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 / onCollapsedChangenavLabelnavOpen / onNavOpenChange。外枠は min-h-screenh-dvhoverflow-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 / MeterSemanticTone を直接受理⁠(影響: ⁠none⁠)— Statisticpositive / negative / neutralsuccess / destructive / mutedStatusBoarddangerdestructive へ内部正規化し、0.1.x の互換 alias として維持。trend / goodWhen の方向・評価ロジックは不変。StatusBoard.problemTones は正規化後に判定し、Meterdefault を 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: ナビゲーション)。navLabel prop で個別上書き可。(#697)
  • ⁠純 CSS 資産の subpath export⁠(影響: none)— npm 不可環境向けに gunjo.jp の固定 URL で配布している Tailwind 非依存の純 CSS 資産をパッケージにも同梱し、@gunjo/ui/tokens.css(純 CSS トークン)・@gunjo/ui/patterns.cssgj- パターンクラス)として 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/drawervaul)、@gunjo/ui/carouselembla-carousel-react)、@gunjo/ui/markdownreact-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 / max readout をまとめた、満席率・稼働率・設備利用率向けの薄い合成。既定は direction="neutral" で低い値を失敗色にせず、targettoneformatValuesizeMeter へ転送する。(#343)
  • CheckboxCard / CheckboxCardGroup(影響: none)— RadioCard の複数選択版。各カードは独立した role="checkbox" / Tab stop と角丸スクエアのチェックを持ち、配列の制御・非制御選択、フォーム送信用 name、無効化理由ツールチップに対応。矢印キーの roving navigation は行わない。(#378)
  • Meterdirection="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)
  • Toastdescription / 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)
  • PersonCellhref / onActivate(影響: none)— セル全体を activation target に(ルートが <a> / <button> になり chevron が affordance)。「人物行を毎回 button で包む」定型を解消。未指定なら従来どおり <div>。(#341)
  • Comboboxcreatable(影響: none)— 検索テキストがどの候補にも一致しない時に「作成」項目を表示し、onCreate(text) で自由入力の値を追加できる(options への追加と value のセットは呼び出し側が担当)。createLabel でラベル差し替え。(#200)
  • BarChart / StackedBarChartthreshold(影響: none)— 上限ラインを引いて超過を示す。BarChart は超えた棒を thresholdTone(既定 destructive)で塗る。StackedBarChart⁠グループ合計⁠に対する上限で、超過グループをリング+thresholdTone の合計値で示す(⁠segment の色は一切変えない⁠——各 segment が固有の意味を持つため)。超過は aria-label にも出るので色だけに頼らない。両者とも縦横 variant 対応。StackedBarChart では normalize 併用時に無視(各グループが 100% になり絶対値の位置が無いため・dev 警告あり)。(#285)
  • Input / TextareashowCount(影響: none)— 文字数表示。maxLength 併用で count / max 形式になり、aria-describedby で関連付く。制御・非制御どちらでも動作。(#314)
  • AvatarcolorSeed(影響: none)— AvatarFallback の頭文字背景を名前から決定的に配色(ディレクトリの視認性)。opt-in。(#331)
  • SwatchLegend(影響: none)— ChartLegend を単体利用できる別名として公開(カレンダー / かんばんの tone → ラベル凡例)。(#327)
  • StepperonStepClick(影響: none)— 完了済みステップへのジャンプ移動。未指定なら従来どおり非インタラクティブ。(#157)
  • ReferenceValueaffirmative(影響: none)— 正常値のうち「良い」値を肯定的に強調できる(従来は中立か異常のみ)。(#291)
  • ToggleGroup の項目ごとの tone⁠(影響: none)— 排他ステータスピル(休講 red / 補講 blue など)向けに ToggleGroupItemTone を追加。(#288)
  • ScheduleGrid のセル単位 selected + cellClassName(影響: none)— アクティブ / オープン中のセルを強調できる。(#299)
  • Timelineitems data-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)
  • IconIconGlyph 型が実態より狭い⁠(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-0sticky 除去では直らない)。両コンポーネントの横スクローラに [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⁠)。SemanticTonedefault|muted|primary|info|success|warning|destructive)と SEMANTIC_TONES/isSemanticTone/toChartTone/toMeterTone/toBadgeVariant/toDangerTone を公開。tone 系コンポーネント間で共有し、語彙が違う所は変換器で橋渡し(画面ごとの変換表を不要に)。変換器は型のみ import で RSC-safe。(#294)
  • Button loading(影響: none)— Spinner+disabledaria-busy。(#305)
  • Alert 便利 props⁠ icon/title/description(影響: none)— compound を書かずに1行で。(#303)
  • Badge size(sm/default/lg)・Tag icon(影響: none・既定は現状維持)。(#300)
  • Sheet size(sm–xl/full)⁠(影響: none)— サイドドロワーを広く。死んでいた w-[384px] を除去。(#328)
  • Drawer direction(影響: none)— Root の direction を single source of truth 化(下記 Fixed 参照)。(#335)
  • DatePicker/DateRangePicker labeldescription(影響: none)— useId で a11y 配線。(#315)
  • DataTable caption/aria-label/aria-labelledbyhidePaginationSummary(影響: none)。(#298, #311)
  • MetadataList wrap(影響: none)— 長い値を折り返す(既定は truncate)。(#284)
  • TreeView onNodeActivate(影響: none)— ラベルのドリルインを展開/折りたたみと分離。(#283)
  • RadioGroup disabled(影響: none)— グループ一括無効+<fieldset disabled> 継承(下記 Fixed)。(#273)
  • ⁠レイアウトの t-shirt gap エイリアス⁠VStack/HStack/Clustergap="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 未設定でサイドドロワーの子がクリック不能だった。Root direction を配線し、ミスマッチ時に dev 警告。(#335)
  • RadioGroup<fieldset disabled> を継承しない⁠(a11y・影響: none)— :disabled で検出し aria-disabled 反映+roving tabindex から除外。(#273)
  • DataTable 狭幅ヘッダ崩れ⁠(影響: none)— <480px コンテナでサマリが1文字ずつ改行 → flex-wrapmin-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 との使い分け)・⁠DataTable renderCard の activatable-card 契約・⁠render props の RSC 安全性⁠注記。(#337, #324, #333, #338)

Changed

  • ⁠安定性の昇格 第一波:54 部品を Experimental → Beta⁠(採用先影響: ⁠none⁠・ラベルのみ)。コールドテスト 170 画面での登場頻度(≥12 ラウンド)を「本番採用」の代理指標とし、docs Props 完全カバー(#559 監査済)と合わせて /docs/stability の Beta 基準を満たすコアを昇格。Beta = 機能完成・API はフィードバックで調整されうる(パッチでは壊れない)。対象: Badge Button Card Separator Select Statistic MetadataList Alert Tabs Meter Sheet EmptyState StatGroup DataTable Container Input PageHeader Textarea Timeline Tag Dialog NumberInput ActionQueue Delta ToggleGroup ListCard AmountBreakdown Checkbox SignedRecord Table PersonCell Icon Label RouteStops CoSign Banner ReferenceValue SearchInput Avatar Switch Stepper Form ScheduleGrid Progress VStack ApprovalSteps Drawer FilterChips LineChart BottomActionBar RadioCard DatePicker EditableDataTable RadioGroup。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)。
  • Buttonsize="touch" / size="icon-touch"(採用先影響: ⁠none⁠・追加のみ)。44px タップ標的(WCAG 2.5.5)を意図で選べるサイズ。モバイル / toC 画面向け (#362 / #568)。
  • ⁠部品固有のローカライズ上書き prop⁠(採用先影響: ⁠none⁠・追加のみ)— ActionQueue.severityLabels / EventCalendar.formatMonthTitleformatDayLabel / 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:libtsc -p tsconfig.build.json)で生成し、preparenpm 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.jsonlicense: MIT 宣言と整合)
  • git tag v0.0.1-alpha.0 バックフィル(commit dc7256d、初回 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 の薄いラッパー。ratio prop で 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。options array で 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)。useSidebar hook で 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)⁠size prop(sm/md/lg/xl/2xl/full/prose)で max-width + padding wrapper
  • ⁠新コンポーネント:HStack(atom)⁠ — flex 横、gap / align / justify / wrap props
  • ⁠新コンポーネント:VStack(atom)⁠ — flex 縦、gap / align / justify props
  • ⁠新コンポーネント:Cluster(atom)⁠ — flex-wrap、tag list 等の自動折返し用
  • ⁠新コンポーネント:Grid(atom)⁠cols 固定 or minItemWidth auto-fit のレスポンシブ grid
  • ⁠新コンポーネント:Spacer(atom)⁠size で固定 or flex-grow filler
  • ⁠🎉 Layout primitives 全 6 件完了⁠
  • ⁠新コンポーネント:NumberInput(atom)⁠ — chevron stepper 付き numeric input。value / onValueChange / min / max / step props
  • ⁠新コンポーネント: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-otp library wrap、InputOTPGroup / InputOTPSlot / InputOTPSeparator の compound
  • ⁠新コンポーネント:AvatarGroup(molecule)⁠ — 重ね avatars、max prop で +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 / maxTags props
  • ⁠新コンポーネント:CodeBlock(molecule)⁠ — code 表示用、filename / language / copyable props
  • ⁠新コンポーネント: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 / size props
  • ⁠新コンポーネント: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 / maxSuggestions props
  • ⁠新コンポーネント: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、onComplete callback
  • ⁠🎉 Tier 3 specialty 全 9 件完了⁠
  • ⁠新コンポーネント:NotFoundTemplate(template)⁠ — 404 page、code / title / description / action props
  • ⁠新コンポーネント: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/uitranspilePackages 込みの実動作確認)
  • 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)
  • @gunjo Org(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.configcontent / next.config / globals.css の @import / @source)も @gunjo/ui へ追従要
  • package.jsonprivate: truefalsepublishConfig.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.configtranspilePackages 等で参照していた場合は全て @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.jsondescription / keywords / publishConfig / 拡張 files / 追加 exports 整備(PR 1f9b760
  • SSOT 三軸(pen + source + docs)配備、視覚監査 70/70(コミット 8e3246e 他)