Docs resource
CHANGELOG
GunjoUI のバージョンごとの変更履歴と公開前マイルストーンの記録です。
GunjoUI の変更履歴。フォーマットは Keep a Changelog に概ね準拠し、バージョニングは docs/versioning.md のポリシーに従う。
採用先影響度の表記:
- none — 既存採用先のコードに変更不要
- minor —
git grepで機械的に置換可能 - breaking — 構造変更が必要
[Unreleased]
[0.1.0-beta.2] — 2026-07-27
0.1.0-beta.1以降の変更。破壊的変更(構造変更を要する break)なし。新機能はすべて opt-in で既定挙動は据え置き(影響: none)。例外は下記 Changed の2件のみ、いずれも影響 minor・移行パス明記 —RouteStopsの既定ラベル変更(1プロップで復元可能)とDashboardTemplateのシェル所有化(ラッパーを外して行だけ渡す機械的変更)。
Changed
-
DashboardTemplateがダッシュボードのシェルを自前で所有(影響: minor)— 旧実装の sidebar スロットは固定hidden border-r w-64 md:blockの枠で、<Sidebar>を開いたまま固定して折りたたみ不能にし、md未満ではナビが丸ごと消えて携帯で画面遷移できなかった。テンプレート自身がSidebarProvider/Sidebar/SidebarBodyを組み、小画面では同じナビ行をSheetで開くように変更。呼び出し側はsidebarに「行」(通常はSidebarItem群)だけを渡す。新 props:sidebarHeader/sidebarFooter(ブランド行・アカウント行)・collapsible(既定true)・defaultCollapsed/collapsed/onCollapsedChange・navLabel・navOpen/onNavOpenChange。外枠はmin-h-screen→h-dvh+overflow-hidden(レールには確定高さの親が要り、ダッシュボードはページではなく main 列がスクロールするため)。移行:sidebar={<Sidebar><SidebarBody>…</SidebarBody></Sidebar>}のように完成品を渡していた場合はラッパーを外して行だけ渡す。SidebarHeader/SidebarFooterに入れていた内容はsidebarHeader/sidebarFooterへ。行だけ渡していた場合は変更不要で、折りたたみと小画面ナビが自動で付く。(#692, #697) - design-verify の arbitrary color / shadow クラスガードを復活(内部・影響: none)—
ARBITRARY_COLOR_CLASS_PATTERN/ARBITRARY_SHADOW_CLASS_PATTERNが]直後の\b(充足不能な境界)で一度もマッチしていなかったのを修正。例外リストはreason/addedOn/expiresOnを必須化し、期限切れは fail するため、ポリシーが再び静かに死ぬことはない。復活で検出された実バグは下記 Fixed の loyalty-summary-card を参照。(#698, #702) -
Statistic/StatGroup/StatusBoard/MeterがSemanticToneを直接受理(影響: none)—Statisticのpositive / negative / neutralはsuccess / destructive / muted、StatusBoardのdangerはdestructiveへ内部正規化し、0.1.x の互換 alias として維持。trend/goodWhenの方向・評価ロジックは不変。StatusBoard.problemTonesは正規化後に判定し、Meterはdefaultを muted の見た目で描画する。Badgeは presentation variant、ExpiryBadgeは domain state の公開 API を維持。旧値の撤去は次 major 以降に利用調査+codemod 付きで再判断。(#673) -
RouteStopsの既定ステータスラベルを中立語彙に(影響: minor)— ステータスキー(pending/current/completed/failed/delayed)は汎用なのに、既定ラベルだけが配送依存(未配 / 配送中 / 不在)だったのを、ドメイン中立な未着手 / 進行中 / 完了 / 失敗 / 遅延に変更。配送・介護・製造など各ドメインは従来どおりstatusLabelsで上書きする設計。移行:配送用途はstatusLabels={{ pending: "未配", current: "配送中", failed: "不在" }}の1プロップで従来表示を復元(completed/delayedは既に中立で変更なし)。マーカーの色・アイコン、aria-current、予実Deltaは不変。(#282)
Added
-
useSidebarCollapsed()(影響: none)—useSidebarの非例外版。SidebarProviderの外では throw せずnullを返すので、Sidebar 内外どちらに置かれても成立する部品(SidebarItem自身がこれを使う)が折りたたみ状態に追従できる。(#692, #697) -
LocaleProviderの文字列にnavigationを追加(影響: none)—DashboardTemplateのナビ領域・開閉ボタン・Sheet のアクセシブル名(en:Navigation/ ja:ナビゲーション)。navLabelprop で個別上書き可。(#697) - 純 CSS 資産の subpath export(影響: none)— npm 不可環境向けに gunjo.jp の固定 URL で配布している Tailwind 非依存の純 CSS 資産をパッケージにも同梱し、
@gunjo/ui/tokens.css(純 CSS トークン)・@gunjo/ui/patterns.css(gj-パターンクラス)として import できるようにした。中身は配信版と同一(同じ SSOT から生成・drift 検証つき)。固定 URL 配布(/docs/no-npm)は従来どおり併存。(#684) - subpath export の追加(影響: none)— 重い runtime を引く部品を、依存クラスタ単位の subpath から narrow に import できるようにした:
@gunjo/ui/table(DataTable / ActionDataTable +ColumnDef・@tanstack/react-table)、@gunjo/ui/calendar(DatePicker / DateRangePicker / Calendar・react-day-picker)、@gunjo/ui/drawer(vaul)、@gunjo/ui/carousel(embla-carousel-react)、@gunjo/ui/markdown(react-markdown)、@gunjo/ui/motion(FloatingPanel・framer-motion)。これらは 0.1.x では root barrel(@gunjo/ui)からも従来どおり import できる(Phase 1・純追加)。0.2.0で root barrel からの重部品 export を撤去し、該当依存を optional peer 化する予定(Phase 2・破壊枠・移行表を別途提示)。(#492) -
DesktopPageHeader(影響: none)— デスクトップ業務コンソールの各画面に置く、eyebrow・タイトル・説明・末尾アクションの軽量見出しバー。アプリ全体のクロームであるHeader、モバイル app-bar のPageHeaderと責務を分離する。(#397) -
OccupancyMeter(影響: none)—Meterの上にラベルとvalue / maxreadout をまとめた、満席率・稼働率・設備利用率向けの薄い合成。既定はdirection="neutral"で低い値を失敗色にせず、target・tone・formatValue・sizeはMeterへ転送する。(#343) -
CheckboxCard/CheckboxCardGroup(影響: none)—RadioCardの複数選択版。各カードは独立したrole="checkbox"/ Tab stop と角丸スクエアのチェックを持ち、配列の制御・非制御選択、フォーム送信用name、無効化理由ツールチップに対応。矢印キーの roving navigation は行わない。(#378) -
Meterのdirection="neutral"(影響: none)— 時間で埋まっていくゲージ(満席率・稼働率)向けの中立モード。判定色を付けず(primary 一定)、targetは参照マーカーのみ。higher-is-betterは目標未達を赤にするためサービス開始直後の低い値が誤警報になる問題(cold-test #95)を、意味論の明確な名前付きモードで回避できる。tone上書きは従来どおり優先。docs に3+1モードのトーン意味論を明記。(#343) -
SignedRecordの複数署名(影響: none)—requiredSigners(当事者一覧)を渡すと複数署名モードに。全員が署名するまで下書きのまま編集でき、最後の署名でロックする(単一署名は従来どおり1回でロック)。value.signaturesに署名を蓄積し、当事者ごとの署名状況と進捗(N/M)を表示。同一人物の二重署名と当事者外の署名は理由つきで不可。追記の author は当事者ラベルで表示。requiredSigners未指定なら従来の挙動のまま。(#259) -
Toastのdescription/action(影響: none)— 2行目の補足と操作ボタン1つを追加し、ToastActionを公開。useToast().showToastはオブジェクト形{ message, description, type, duration, action }のオーバーロードも受け付ける(従来の位置引数呼び出しはそのまま動く)。action付きでduration未指定なら、押す前に消えないよう自動クローズを延長。(#301) -
DataTableの合計 / フッター行(影響: none)— いずれかの列に TanStack のfooterを定義すると<tfoot>を描画。footer(({ table }) => …)でgetFilteredRowModel()を使えばフィルタ後の合計になる(表示中ページだけではない)。footer未定義なら従来どおり何も出ない。card モード(renderCard)には出ない。(#255) -
SheetBody/DialogBody(影響: none)— 長いフォーム用のスクロール領域。Content の直下に置いた時だけ高さ制限つき flex 列へ切り替え、ヘッダー / フッターを固定して中央だけスクロールする。Body が無い既存の Sheet / Dialog は出力不変。(#293) -
PersonCellのhref/onActivate(影響: none)— セル全体を activation target に(ルートが<a>/<button>になり chevron が affordance)。「人物行を毎回 button で包む」定型を解消。未指定なら従来どおり<div>。(#341) -
Comboboxのcreatable(影響: none)— 検索テキストがどの候補にも一致しない時に「作成」項目を表示し、onCreate(text)で自由入力の値を追加できる(options への追加と value のセットは呼び出し側が担当)。createLabelでラベル差し替え。(#200) -
BarChart/StackedBarChartのthreshold(影響: none)— 上限ラインを引いて超過を示す。BarChartは超えた棒をthresholdTone(既定destructive)で塗る。StackedBarChartはグループ合計に対する上限で、超過グループをリング+thresholdToneの合計値で示す(segment の色は一切変えない——各 segment が固有の意味を持つため)。超過はaria-labelにも出るので色だけに頼らない。両者とも縦横 variant 対応。StackedBarChartではnormalize併用時に無視(各グループが 100% になり絶対値の位置が無いため・dev 警告あり)。(#285) -
Input/TextareaのshowCount(影響: none)— 文字数表示。maxLength併用でcount / max形式になり、aria-describedbyで関連付く。制御・非制御どちらでも動作。(#314) -
AvatarのcolorSeed(影響: none)—AvatarFallbackの頭文字背景を名前から決定的に配色(ディレクトリの視認性)。opt-in。(#331) -
SwatchLegend(影響: none)—ChartLegendを単体利用できる別名として公開(カレンダー / かんばんの tone → ラベル凡例)。(#327) -
StepperのonStepClick(影響: none)— 完了済みステップへのジャンプ移動。未指定なら従来どおり非インタラクティブ。(#157) -
ReferenceValueのaffirmative(影響: none)— 正常値のうち「良い」値を肯定的に強調できる(従来は中立か異常のみ)。(#291) -
ToggleGroupの項目ごとの tone(影響: none)— 排他ステータスピル(休講 red / 補講 blue など)向けにToggleGroupItemToneを追加。(#288) -
ScheduleGridのセル単位selected+cellClassName(影響: none)— アクティブ / オープン中のセルを強調できる。(#299) -
Timelineのitemsdata-prop(影響: none)— compound API に加えてデータ駆動の形を追加(compound だけでは発見しづらかったため)。(#349)
Fixed
-
Sidebarが高さ不定の親で潰れる(影響: none)—h-fullの百分率高さは親の確定高さが無い(例:min-h-*)と解決できず、レールが自身のコンテンツ高まで潰れ、flex の stretch まで打ち消していた。self-stretchに変更(実測:min-height:500pxの flex 行で旧契約は 0px、新契約は 500px で描画)。(#692, #697) -
SidebarItemが折りたたみに追従しない(影響: none)— 60px レールでアイコンを中央寄せし、56px の末尾予約を落とし、ラベルはツールチップへ移動、可視ラベルが消えるぶんaria-labelに名前を明示。呼び出し側で行ごとに Tooltip で包む定型が不要になった。(#692, #697) -
SidebarHeader/SidebarFooterが 60px レールからはみ出す(影響: none)— 両者も折りたたみに追従するようになり、ブランド行やアカウント行がレール幅を突き破らない。(#692, #697) -
AuthTemplateの左ブランド面がダークで白へ反転(影響: none)—bg-foreground/text-backgroundはダークモードで白面+黒字になり、隣のフォームと真逆だった。デザインソースどおりテーマ不変の--pure-black/--pure-whiteに変更(CodeBlockと同じ手当て)。(#693, #697) -
IconのIconGlyph型が実態より狭い(DX・影響: none)—ForwardRefExoticComponent固定だったため、@tabler/icons-reactが公開するIcon型(FunctionComponent<IconProps>)の型付き変数・レジストリ経由で渡すとProperty '$$typeof' is missingで落ち、インラインのicon={IconChevronRight}しか通らなかった。React.ComponentTypeに拡張して両方受理(IconGlyphPropsも公開)。(#694, #697) -
Accordionの最終項目の下線がルート枠と二重(影響: none)— 最後の項目にlast:border-b-0。(#695, #697) - loyalty-summary-card デモのバーコードがダークでほぼ不可視(docs・影響: none)— デモのバーコード3枚中2枚が
#111直書きでdark:variant を持たず、ダークのカード(rgb(2,8,23))上で実質見えなかった。hsl(var(--foreground))に変更し、コピー元コードもテーマ追従に。上記 Changed のガード復活(#698)で検出。(#702) -
*VariantKey型が barrel から出ていなかった(DX・影響: none)—BadgeVariantKeyなどの variant-key union は各部品が内部でimport typeするだけで re-export しておらず、import type { BadgeVariantKey } from "@gunjo/ui"が tsc で落ちていた。採用先がRecord<Status, BadgeVariantKey>を書くのに literal union を手写しする必要があった。barrel 生成器を更新し、全カテゴリの*VariantKey型をexport type *で公開(型のみ・runtime のキー配列は非公開のまま)。純追加なので既存コードに影響なし。(#411) -
Table/DataTableの横スクロール漏れ(影響: none)— 狭い画面(375px 等)で、幅広の内側要素がoverflow-x-autoスクローラからページ全体に横スクロールを漏らすことがあった(html.scrollWidthが膨らむ・祖先のmin-w-0やsticky除去では直らない)。両コンポーネントの横スクローラに[contain:paint]を付与して封じ込め(ScheduleGrid#287 と同じ手当て)。正しくレイアウトされている場合は no-op。自前の幅広コンテンツ(チャート・カスタムグリッド)向けに Table docs へ手順も記載。(#289) -
Alertの見出し順序(a11y・影響: none)—AlertTitleの既定要素がh5で、h1 → h5 と見出しレベルが飛んでいた。既定を<p>に変更(見た目は不変。見出しにしたい場合はas="h5"を明示)。(#251)
[0.1.0-beta.1] — 2026-07-15
初の beta。
0.0.1-alpha.3以降の全変更。beta 昇格ゲート(#572・4/4 達成)をクリアし、コア 54 部品を Beta に。破壊的変更なし(採用先影響は原則 none・追加 API と a11y 修正のみ・既存コード変更不要)。この版から semver /@deprecated規律が発効(破壊はマイナーのみ・移行パスを提示)。
Added
-
SemanticTone正準スケール+変換器(影響: none)。SemanticTone(default|muted|primary|info|success|warning|destructive)とSEMANTIC_TONES/isSemanticTone/toChartTone/toMeterTone/toBadgeVariant/toDangerToneを公開。tone 系コンポーネント間で共有し、語彙が違う所は変換器で橋渡し(画面ごとの変換表を不要に)。変換器は型のみ import で RSC-safe。(#294) -
Buttonloading(影響: none)— Spinner+disabled+aria-busy。(#305) -
Alert便利 propsicon/title/description(影響: none)— compound を書かずに1行で。(#303) -
Badgesize(sm/default/lg)・Tagicon(影響: none・既定は現状維持)。(#300) -
Sheetsize(sm–xl/full)(影響: none)— サイドドロワーを広く。死んでいたw-[384px]を除去。(#328) -
Drawerdirection(影響: none)— Root のdirectionを single source of truth 化(下記 Fixed 参照)。(#335) -
DatePicker/DateRangePickerlabel+description(影響: none)—useIdで a11y 配線。(#315) -
DataTablecaption/aria-label/aria-labelledby・hidePaginationSummary(影響: none)。(#298, #311) -
MetadataListwrap(影響: none)— 長い値を折り返す(既定は truncate)。(#284) -
TreeViewonNodeActivate(影響: none)— ラベルのドリルインを展開/折りたたみと分離。(#283) -
RadioGroupdisabled(影響: none)— グループ一括無効+<fieldset disabled>継承(下記 Fixed)。(#273) - レイアウトの t-shirt gap エイリアス(
VStack/HStack/Clusterのgap="sm|md|lg"…、影響: none)+ prop 語彙規約の文書化。(#330) - 直列化可能な
valueFormat/feeFormat/timeFormat(影響: none)— 11 チャート+クライアント footgun 部品/SignedRecordに、関数 prop を使わず RSC から渡せる代替を追加。(#338 Phase 1–3)
Fixed
- RSC function-prop footgun のガード(影響: none/CI)— Server Component から関数 prop を渡すと
next buildが壊れるが tsc/dev/CI が捕まえない問題に、CI へ本番ビルドゲートを追加+直列化代替+render props の RSC 注意書き。beta ゲートの実質単一ブロッカーを解消。(#338) - overlay の Radix「Missing Description」警告(a11y・影響: none)— Dialog/Sheet/Drawer/AlertDialog で description が無いときだけ
aria-describedbyを opt-out(ある時は配線維持・回帰なし)。(#322) -
Drawer sideがポインタを飲む(機能バグ・影響: none)— vaul のdirection未設定でサイドドロワーの子がクリック不能だった。Rootdirectionを配線し、ミスマッチ時に dev 警告。(#335) -
RadioGroupが<fieldset disabled>を継承しない(a11y・影響: none)—:disabledで検出しaria-disabled反映+roving tabindex から除外。(#273) -
DataTable狭幅ヘッダ崩れ(影響: none)— <480px コンテナでサマリが1文字ずつ改行 →flex-wrap+min-w-0。(#311) -
DataTableソートヘッダの a11y(影響: none)— 冗長な英語ラベルがセル名に漏れる問題を解消、列名がアクセシブル名に。(#307) -
ReferenceValueの sr-only 二重読み上げ(a11y・影響: none)。(#306) -
MetadataList/TreeView/DatePickerほか の細部(上記 Added に対応する挙動修正)。 -
Popoverの重複クラス(影響: none・視覚不変)—w-72 w-[288px]/rounded-md rounded-lgを .pen に合わせ単一化、drift チェックのcornerRadius:8→rounded-md誤マッピングも訂正。(#140) - 不正な
ChartColorに dev 警告(DX・影響: none)— tone でも CSS 色でもない値に開発時警告。(#296)
Docs
- パッケージ版ゲート(alpha → beta → 1.0)を
/docs/stabilityに追記。(#572) - Semantic Tones ページ(正準スケール+ライブデモ+変換器表)。(#294)
- Installation:
@tabler/icons-reactを consumer 直依存として案内(pnpm/strict hoisting 対策)。(#309) - Icon
icon={Glyph}契約の可視化・Banner は1行の帯(Alert との使い分け)・DataTablerenderCard の activatable-card 契約・render props の RSC 安全性注記。(#337, #324, #333, #338)
Changed
- 安定性の昇格 第一波:54 部品を Experimental → Beta(採用先影響: none・ラベルのみ)。コールドテスト 170 画面での登場頻度(≥12 ラウンド)を「本番採用」の代理指標とし、docs Props 完全カバー(#559 監査済)と合わせて
/docs/stabilityの Beta 基準を満たすコアを昇格。Beta = 機能完成・API はフィードバックで調整されうる(パッチでは壊れない)。対象:BadgeButtonCardSeparatorSelectStatisticMetadataListAlertTabsMeterSheetEmptyStateStatGroupDataTableContainerInputPageHeaderTextareaTimelineTagDialogNumberInputActionQueueDeltaToggleGroupListCardAmountBreakdownCheckboxSignedRecordTablePersonCellIconLabelRouteStopsCoSignBannerReferenceValueSearchInputAvatarSwitchStepperFormScheduleGridProgressVStackApprovalStepsDrawerFilterChipsLineChartBottomActionBarRadioCardDatePickerEditableDataTableRadioGroup。SSOT はdesign/stability.json。(#573) - semver 規律の開始(beta ゲート③)— 本リリース以降、破壊的変更はマイナーのみ・
@deprecatedで移行パスを提示し、その内容をこの CHANGELOG に記録する(docs/versioning の作法をここから有効化)。
[0.0.1-alpha.3] — 2026-07-10
alpha.2(173 部品)以降、コールドテスト 170 画面の検証ループで見つかった欠落を埋め続けた成果をまとめた alpha リリース。部品セットは 216 に到達(+43)。API は今後変更される可能性があります(全部品 Experimental)。
Added
- コンポーネント +43 件(173 → 216)(採用先影響: none・追加のみ)。コールドテスト 170 ラウンドで「文脈ゼロの AI が手組みした=欠落」と報告された部品を、業種横断で追加(運行図 Stringline、系譜 LineageGraph、月カレンダー EventCalendar、座席 SeatMap、経路 OriginDestination / RouteStops / Itinerary ほか)。docs / SSOT / Figma を 3 軸で監査 (#559)。
- i18n
LocaleProvider(採用先影響: none・後方互換)。shadcn 由来の組み込み文字列(No results./ 検索プレースホルダ / ページャ等)を<LocaleProvider locale="ja">一箇所で切替。en 既定=プロバイダ未マウント時は従来どおり。precedence: instance prop > provider bundle > 既定。14 部品配線 (#326 / #560–562)。docs:/docs/i18n(ライブ en/ja トグル)(#567)。 -
Buttonのsize="touch"/size="icon-touch"(採用先影響: none・追加のみ)。44px タップ標的(WCAG 2.5.5)を意図で選べるサイズ。モバイル / toC 画面向け (#362 / #568)。 - 部品固有のローカライズ上書き prop(採用先影響: none・追加のみ)—
ActionQueue.severityLabels/EventCalendar.formatMonthTitle・formatDayLabel/ScanGate.stepsLabel/TicketStub.formatCodeAlt。既定は日本語のまま (#558)。
Changed
- 配布形態を「生 TS 直配布」から「コンパイル済み
dist/(ESM +.d.ts)」へ変更(採用先影響: none)。exports "."が./dist/index.jsを指すようになり、採用先はtranspilePackages: ["@gunjo/ui"]なしで Next.js / Vite からそのまま import できる。各コンポーネントの"use client"境界はtscが directive として保持。npm run build:lib(tsc -p tsconfig.build.json)で生成し、prepareでnpm install/pack/publish時に自動ビルド。既存採用先はコード変更不要(transpilePackagesは削除してよい)。 ScanGateの手順区切りをテキスト矢印(→)からアイコン(IconChevronRight)へ(採用先影響: none・視覚のみ、aria-hidden の装飾)(#570)。
Fixed
prepareが dist を自動ビルドするようになり、npm install file:../gunjoなどローカル採用でもdist/が確実に揃う(採用先影響: none)。prepareの git hooks インストールを堅牢化:書込不可環境でも失敗しない(npm pack/publishを壊さない)。gunjo リポジトリ本体でのみ動作し、file:/git+install で採用先のcore.hooksPathを書き換えない。- リポジトリに commit されていた古いビルド成果物
gunjo-ui-0.0.1-alpha.2.tgzを削除し、*.tgzを gitignore。
[0.0.1-alpha.2] — 2026-06-13
OSS 公開に合わせた alpha リリース。0.0.1-alpha.0 / alpha.1(70 components)以降に追加された全コンポーネント(Tier 1/2/3 + Templates、計 42 件)と、LICENSE / repository フィールド / public 化などの OSS 整備を配布。npm 上の README・メタデータも刷新。API は今後変更される可能性があります。
Added
LICENSEファイル追加(MIT、package.jsonのlicense: MIT宣言と整合)- git tag
v0.0.1-alpha.0バックフィル(commitdc7256d、初回 publish 時点を指す) CONTRIBUTING.md/SECURITY.md追加(OSS 整備)- 新コンポーネント:Toggle(atom) — Radix
react-toggleベース。variant(default/outline) とsize(sm/default/lg) をサポート。Tier 1 batch 1 の最初の追加 - 新コンポーネント:AspectRatio(atom) — Radix
react-aspect-ratioの薄いラッパー。ratioprop で 16/9, 4/3, 1 等の固定比率コンテナ提供 - 新コンポーネント:Code(atom) — inline
<code>の cva スタイル。variant(default/muted) とsize(sm/default/lg) をサポート - 新コンポーネント:AlertDialog(molecule) — Radix
react-alert-dialogベースの compound pattern。Trigger / Content / Header / Title / Description / Footer / Action / Cancel - 新コンポーネント:Drawer(molecule) — vaul ライブラリベースの mobile bottom-sheet。drag-to-dismiss handle 付き
- 新コンポーネント:Combobox(molecule) — Popover + Command の compound。
optionsarray で searchable select。placeholder/searchPlaceholder/emptyMessageカスタマイズ可 - 新コンポーネント:DatePicker(molecule) — Popover + Calendar + date-fns の compound。
value(Date) とonValueChangeで controlled 利用、dateFormatで表示形式指定 - 新コンポーネント:Sidebar(molecule) — Context-based provider + compound (
Sidebar/SidebarHeader/SidebarBody/SidebarFooter/SidebarSeparator)。useSidebarhook で descendant から collapsed 制御 - 新コンポーネント:DataTable(molecule) —
@tanstack/react-tableの wrapper。generic で型安全 (<TData, TValue>)。sort + filter(指定カラム)+ pagination(pageSize 設定可)統合 - 🎉 Tier 1 essentials 全 9 件完了(Toggle / AspectRatio / Code / AlertDialog / Drawer / Combobox / DatePicker / Sidebar / DataTable)
- 新コンポーネント:Container(atom) —
sizeprop(sm/md/lg/xl/2xl/full/prose)で max-width + padding wrapper - 新コンポーネント:HStack(atom) — flex 横、
gap/align/justify/wrapprops - 新コンポーネント:VStack(atom) — flex 縦、
gap/align/justifyprops - 新コンポーネント:Cluster(atom) — flex-wrap、tag list 等の自動折返し用
- 新コンポーネント:Grid(atom) —
cols固定 orminItemWidthauto-fit のレスポンシブ grid - 新コンポーネント:Spacer(atom) —
sizeで固定 or flex-grow filler - 🎉 Layout primitives 全 6 件完了
- 新コンポーネント:NumberInput(atom) — chevron stepper 付き numeric input。
value/onValueChange/min/max/stepprops - 新コンポーネント:PasswordInput(atom) — Eye / EyeOff icon の visibility toggle 付き password input
- 新コンポーネント:SearchInput(atom) — leading Search icon と clearable × button 付き search input
- 新コンポーネント:EmptyState(atom) — icon / title / description / action slot 付きのプレースホルダ
- 新コンポーネント:Tag(atom) —
onRemove付き Badge、4 variants × 3 sizes - 新コンポーネント:InputOTP(atom) —
input-otplibrary wrap、InputOTPGroup/InputOTPSlot/InputOTPSeparatorの compound - 新コンポーネント:AvatarGroup(molecule) — 重ね avatars、
maxprop で +N overflow indicator - 新コンポーネント:DateRangePicker(molecule) — Popover + Calendar (mode="range") + date-fns、
numberOfMonthsで複月表示 - 新コンポーネント:TimePicker(molecule) — hour / minute select、
hour12(AM/PM) とminuteStep(1/5/10/15/30) props - 新コンポーネント:TagInput(molecule) — Tag を内部使用、Enter/コンマでコミット、Backspace で末尾削除、
dedupe/maxTagsprops - 新コンポーネント:CodeBlock(molecule) — code 表示用、
filename/language/copyableprops - 新コンポーネント:Banner(molecule) — page 全幅 announcement、5 variants + icon / action / onDismiss
- 新コンポーネント:NavigationMenu(molecule) — Radix
react-navigation-menuの compound(List/Item/Trigger/Content/Link/Indicator/Viewport) - 🎉 Tier 2 high-frequency 全 13 件完了
- 新コンポーネント:ColorSwatch(atom) — color preview chip、
color/label/copyable/sizeprops - 新コンポーネント:Timeline(molecule) —
TimelineItem(variant/marker/connector) + Title/Description/Time の compound - 新コンポーネント:TreeView(molecule) —
TreeNode[]data driven、controlled / uncontrolled expand、selected state - 新コンポーネント:MarkdownRenderer(molecule) — react-markdown + remark-gfm、prose styling 内蔵、
disableGfmで plain markdown - 新コンポーネント:Mention(molecule) — textarea +
@trigger picker、↑↓+Enter で選択、options/trigger/maxSuggestionsprops - 新コンポーネント:Statistic(molecule) — KPI card、
label/value/change/trend(up/down/flat) で色・矢印切替 - 新コンポーネント:Header(organism) — Brand / Nav / NavLink / Actions の compound site nav bar
- 新コンポーネント:Footer(organism) — Columns / Section / Link / Brand / Copyright compound、responsive grid
- 新コンポーネント:OnboardingFlow(organism) — step indicator + content + Back/Continue、controlled/uncontrolled、
onCompletecallback - 🎉 Tier 3 specialty 全 9 件完了
- 新コンポーネント:NotFoundTemplate(template) — 404 page、
code/title/description/actionprops - 新コンポーネント:ErrorTemplate(template) — 500 page、
details(stack trace) prop 付き - 新コンポーネント:PricingTemplate(template) — 3-tier 価格表、
PricingPlan[]、featuredで highlight - 新コンポーネント:BlogTemplate(template) —
category/title/meta/heroの prose article layout - 新コンポーネント:DocsTemplate(template) — sidebar / main / toc の三分割 layout
- 新コンポーネント:OnboardingTemplate(template) — hero panel + content の二分割、OnboardingFlow と組合せ可
- 🎉🎉🎉 Templates 全 6 件完了 — 計画 42/42 components 完成
docs/component-roadmap.md追加(42 components 追加計画と引き継ぎログの SSOT)
Planned(次回以降)
- 実採用プロジェクトでのドライラン(
npm install @gunjo/uiでtranspilePackages込みの実動作確認) - CONTRIBUTING.md / SECURITY.md の整備
- CI で
npm publish --dry-runを流して配布物の差分を見える化 - GitHub リポジトリの public 化+
repositoryフィールド追加(OSS 公開準備が整い次第)
[0.0.1-alpha.1] — 2026-05-04
軽微な housekeeping リリース。コードの API 変更なし、配布物のサイズ・依存・コンポーネント構成は 0.0.1-alpha.0 と完全同一。
Changed
package.jsonの maintainer メアドがregister@4px.jp(メール転送設定不備のあった alias)→dev@4px.jpに切り替わったため、npm registry の maintainer 表記を更新- 採用先影響度:none
[0.0.1-alpha.0] — 2026-05-04
初回 npm publish。 @gunjo/ui の名前確保が主目的の alpha 公開で、API は今後の alpha / beta 期間中に変更される可能性があります。中身は L3 整備完了時点のスナップショット(70 components)。
Added
- npm レジストリへの初回 publish(
@gunjo/ui、access: public) @gunjoOrg(admin:uixhero)配下の最初のパッケージとして登録
Changed
- パッケージ名:
@gunjo(bare scope、npm 規則違反で publish 不能)→ @gunjo/ui(npm の@scope/name規則準拠) - export サブパスも追従:
@gunjo/styles→@gunjo/ui/styles@gunjo/tailwind-preset→@gunjo/ui/tailwind-preset@gunjo/tailwind-theme-extend→@gunjo/ui/tailwind-theme-extend
- 採用先側の参照箇所(
transpilePackages/tailwind.configのcontent/next.config/ globals.css の@import/@source)も@gunjo/uiへ追従要 package.json:private: true→false、publishConfig.access: "restricted"→"public"version:内部マイルストーン1.0.0を npm 公開バージョンとしては破棄、初回公開を0.0.1-alpha.0から開始(npm 上の1.0.0は将来の stable リリースに予約)
Removed
- React 18 peer サポート(peer は
^19.0.0のみ。内部実装で React 19 専用 API を採用したため)
Documentation
- adoption / migration / dependencies / versioning / component-addition / adoption-strategy 整備(PR #2)
- このファイル(CHANGELOG.md、PR #2 で bootstrap、PR #3 で本エントリ追加)
採用先影響度
- breaking:
@gunjoを import /tailwind.configの content /next.configのtranspilePackages等で参照していた場合は全て@gunjo/uiに置換必須- 移行手順:
git grep -l '@gunjo' | xargs sed -i '' 's|@gunjo|@gunjo/ui|g'のような一括置換 + 確認 - ただし alpha 段階のため、現時点の採用先は本リポジトリ内 docs サイトのみで影響範囲は限定
- 移行手順:
Pre-publish history(内部 1.0.0 期間、2026-04 以前〜2026-05-03)
npm 未公開期間の内部マイルストーン。CHANGELOG エントリではなく履歴メモ:
- L3 整備:adoption guide 一式追加(PR #2 / 2026-05-03)
- React peer 範囲を
^18 || ^19→^19のみに縮小(実装内で React 19 専用 API 使用のため、本来 MAJOR 事案だが未公開期間中の調整として CHANGELOG エントリ化せず) - コンポーネント 67 → 70 追加:
Skeleton,Stepper,Form(コミットbe127e9/ 2026-05) - L3 配布準備:
package.jsonのdescription/keywords/publishConfig/ 拡張files/ 追加exports整備(PR1f9b760) - SSOT 三軸(pen + source + docs)配備、視覚監査 70/70(コミット
8e3246e他)