@novi-ui/flatlay 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (212) hide show
  1. package/README.md +418 -0
  2. package/dist/accordion/accordion.d.mts +35 -0
  3. package/dist/accordion/accordion.d.mts.map +1 -0
  4. package/dist/accordion/accordion.mjs +74 -0
  5. package/dist/accordion/accordion.mjs.map +1 -0
  6. package/dist/accordion/accordion.styles.d.mts +61 -0
  7. package/dist/accordion/accordion.styles.d.mts.map +1 -0
  8. package/dist/accordion/accordion.styles.mjs +91 -0
  9. package/dist/accordion/accordion.styles.mjs.map +1 -0
  10. package/dist/accordion/index.d.mts +3 -0
  11. package/dist/avatar/avatar.d.mts +22 -0
  12. package/dist/avatar/avatar.d.mts.map +1 -0
  13. package/dist/avatar/avatar.mjs +60 -0
  14. package/dist/avatar/avatar.mjs.map +1 -0
  15. package/dist/avatar/avatar.styles.d.mts +49 -0
  16. package/dist/avatar/avatar.styles.d.mts.map +1 -0
  17. package/dist/avatar/avatar.styles.mjs +55 -0
  18. package/dist/avatar/avatar.styles.mjs.map +1 -0
  19. package/dist/avatar/index.d.mts +3 -0
  20. package/dist/badge/badge.d.mts +15 -0
  21. package/dist/badge/badge.d.mts.map +1 -0
  22. package/dist/badge/badge.mjs +39 -0
  23. package/dist/badge/badge.mjs.map +1 -0
  24. package/dist/badge/badge.styles.d.mts +67 -0
  25. package/dist/badge/badge.styles.d.mts.map +1 -0
  26. package/dist/badge/badge.styles.mjs +110 -0
  27. package/dist/badge/badge.styles.mjs.map +1 -0
  28. package/dist/badge/index.d.mts +3 -0
  29. package/dist/breadcrumbs/breadcrumbs.d.mts +36 -0
  30. package/dist/breadcrumbs/breadcrumbs.d.mts.map +1 -0
  31. package/dist/breadcrumbs/breadcrumbs.mjs +82 -0
  32. package/dist/breadcrumbs/breadcrumbs.mjs.map +1 -0
  33. package/dist/breadcrumbs/breadcrumbs.styles.d.mts +46 -0
  34. package/dist/breadcrumbs/breadcrumbs.styles.d.mts.map +1 -0
  35. package/dist/breadcrumbs/breadcrumbs.styles.mjs +45 -0
  36. package/dist/breadcrumbs/breadcrumbs.styles.mjs.map +1 -0
  37. package/dist/breadcrumbs/index.d.mts +3 -0
  38. package/dist/button/button.d.mts +18 -0
  39. package/dist/button/button.d.mts.map +1 -0
  40. package/dist/button/button.mjs +79 -0
  41. package/dist/button/button.mjs.map +1 -0
  42. package/dist/button/button.styles.d.mts +82 -0
  43. package/dist/button/button.styles.d.mts.map +1 -0
  44. package/dist/button/button.styles.mjs +137 -0
  45. package/dist/button/button.styles.mjs.map +1 -0
  46. package/dist/button/index.d.mts +3 -0
  47. package/dist/card/card.d.mts +51 -0
  48. package/dist/card/card.d.mts.map +1 -0
  49. package/dist/card/card.mjs +96 -0
  50. package/dist/card/card.mjs.map +1 -0
  51. package/dist/card/card.styles.d.mts +73 -0
  52. package/dist/card/card.styles.d.mts.map +1 -0
  53. package/dist/card/card.styles.mjs +72 -0
  54. package/dist/card/card.styles.mjs.map +1 -0
  55. package/dist/card/index.d.mts +3 -0
  56. package/dist/checkbox/checkbox.d.mts +27 -0
  57. package/dist/checkbox/checkbox.d.mts.map +1 -0
  58. package/dist/checkbox/checkbox.mjs +109 -0
  59. package/dist/checkbox/checkbox.mjs.map +1 -0
  60. package/dist/checkbox/checkbox.styles.d.mts +114 -0
  61. package/dist/checkbox/checkbox.styles.d.mts.map +1 -0
  62. package/dist/checkbox/checkbox.styles.mjs +105 -0
  63. package/dist/checkbox/checkbox.styles.mjs.map +1 -0
  64. package/dist/checkbox/index.d.mts +3 -0
  65. package/dist/color-picker/color-picker.d.mts +30 -0
  66. package/dist/color-picker/color-picker.d.mts.map +1 -0
  67. package/dist/color-picker/color-picker.mjs +100 -0
  68. package/dist/color-picker/color-picker.mjs.map +1 -0
  69. package/dist/color-picker/color-picker.styles.d.mts +91 -0
  70. package/dist/color-picker/color-picker.styles.d.mts.map +1 -0
  71. package/dist/color-picker/color-picker.styles.mjs +79 -0
  72. package/dist/color-picker/color-picker.styles.mjs.map +1 -0
  73. package/dist/color-picker/index.d.mts +3 -0
  74. package/dist/flatlay.css +381 -0
  75. package/dist/flatlay.scoped.css +381 -0
  76. package/dist/index.d.mts +67 -0
  77. package/dist/index.mjs +46 -0
  78. package/dist/input/index.d.mts +3 -0
  79. package/dist/input/input.d.mts +23 -0
  80. package/dist/input/input.d.mts.map +1 -0
  81. package/dist/input/input.mjs +89 -0
  82. package/dist/input/input.mjs.map +1 -0
  83. package/dist/input/input.styles.d.mts +97 -0
  84. package/dist/input/input.styles.d.mts.map +1 -0
  85. package/dist/input/input.styles.mjs +96 -0
  86. package/dist/input/input.styles.mjs.map +1 -0
  87. package/dist/menu/index.d.mts +3 -0
  88. package/dist/menu/menu.d.mts +66 -0
  89. package/dist/menu/menu.d.mts.map +1 -0
  90. package/dist/menu/menu.mjs +118 -0
  91. package/dist/menu/menu.mjs.map +1 -0
  92. package/dist/menu/menu.styles.d.mts +114 -0
  93. package/dist/menu/menu.styles.d.mts.map +1 -0
  94. package/dist/menu/menu.styles.mjs +66 -0
  95. package/dist/menu/menu.styles.mjs.map +1 -0
  96. package/dist/modal/index.d.mts +3 -0
  97. package/dist/modal/modal.d.mts +55 -0
  98. package/dist/modal/modal.d.mts.map +1 -0
  99. package/dist/modal/modal.mjs +120 -0
  100. package/dist/modal/modal.mjs.map +1 -0
  101. package/dist/modal/modal.styles.d.mts +70 -0
  102. package/dist/modal/modal.styles.d.mts.map +1 -0
  103. package/dist/modal/modal.styles.mjs +83 -0
  104. package/dist/modal/modal.styles.mjs.map +1 -0
  105. package/dist/popover/index.d.mts +3 -0
  106. package/dist/popover/popover.d.mts +33 -0
  107. package/dist/popover/popover.d.mts.map +1 -0
  108. package/dist/popover/popover.mjs +57 -0
  109. package/dist/popover/popover.mjs.map +1 -0
  110. package/dist/popover/popover.styles.d.mts +40 -0
  111. package/dist/popover/popover.styles.d.mts.map +1 -0
  112. package/dist/popover/popover.styles.mjs +47 -0
  113. package/dist/popover/popover.styles.mjs.map +1 -0
  114. package/dist/progress/index.d.mts +3 -0
  115. package/dist/progress/progress.d.mts +15 -0
  116. package/dist/progress/progress.d.mts.map +1 -0
  117. package/dist/progress/progress.mjs +55 -0
  118. package/dist/progress/progress.mjs.map +1 -0
  119. package/dist/progress/progress.styles.d.mts +100 -0
  120. package/dist/progress/progress.styles.d.mts.map +1 -0
  121. package/dist/progress/progress.styles.mjs +65 -0
  122. package/dist/progress/progress.styles.mjs.map +1 -0
  123. package/dist/radio/index.d.mts +3 -0
  124. package/dist/radio/radio.d.mts +25 -0
  125. package/dist/radio/radio.d.mts.map +1 -0
  126. package/dist/radio/radio.mjs +99 -0
  127. package/dist/radio/radio.mjs.map +1 -0
  128. package/dist/radio/radio.styles.d.mts +114 -0
  129. package/dist/radio/radio.styles.d.mts.map +1 -0
  130. package/dist/radio/radio.styles.mjs +103 -0
  131. package/dist/radio/radio.styles.mjs.map +1 -0
  132. package/dist/select/index.d.mts +3 -0
  133. package/dist/select/select.d.mts +40 -0
  134. package/dist/select/select.d.mts.map +1 -0
  135. package/dist/select/select.mjs +121 -0
  136. package/dist/select/select.mjs.map +1 -0
  137. package/dist/select/select.styles.d.mts +85 -0
  138. package/dist/select/select.styles.d.mts.map +1 -0
  139. package/dist/select/select.styles.mjs +111 -0
  140. package/dist/select/select.styles.mjs.map +1 -0
  141. package/dist/skeleton/index.d.mts +3 -0
  142. package/dist/skeleton/skeleton.d.mts +15 -0
  143. package/dist/skeleton/skeleton.d.mts.map +1 -0
  144. package/dist/skeleton/skeleton.mjs +26 -0
  145. package/dist/skeleton/skeleton.mjs.map +1 -0
  146. package/dist/skeleton/skeleton.styles.d.mts +47 -0
  147. package/dist/skeleton/skeleton.styles.d.mts.map +1 -0
  148. package/dist/skeleton/skeleton.styles.mjs +31 -0
  149. package/dist/skeleton/skeleton.styles.mjs.map +1 -0
  150. package/dist/spinner/index.d.mts +3 -0
  151. package/dist/spinner/spinner.d.mts +15 -0
  152. package/dist/spinner/spinner.d.mts.map +1 -0
  153. package/dist/spinner/spinner.mjs +55 -0
  154. package/dist/spinner/spinner.mjs.map +1 -0
  155. package/dist/spinner/spinner.styles.d.mts +46 -0
  156. package/dist/spinner/spinner.styles.d.mts.map +1 -0
  157. package/dist/spinner/spinner.styles.mjs +50 -0
  158. package/dist/spinner/spinner.styles.mjs.map +1 -0
  159. package/dist/styles/focus-ring.mjs +30 -0
  160. package/dist/styles/focus-ring.mjs.map +1 -0
  161. package/dist/styles/inflow.mjs +156 -0
  162. package/dist/styles/inflow.mjs.map +1 -0
  163. package/dist/styles/mono.mjs +24 -0
  164. package/dist/styles/mono.mjs.map +1 -0
  165. package/dist/switch/index.d.mts +3 -0
  166. package/dist/switch/switch.d.mts +18 -0
  167. package/dist/switch/switch.d.mts.map +1 -0
  168. package/dist/switch/switch.mjs +58 -0
  169. package/dist/switch/switch.mjs.map +1 -0
  170. package/dist/switch/switch.styles.d.mts +58 -0
  171. package/dist/switch/switch.styles.d.mts.map +1 -0
  172. package/dist/switch/switch.styles.mjs +86 -0
  173. package/dist/switch/switch.styles.mjs.map +1 -0
  174. package/dist/tabs/index.d.mts +3 -0
  175. package/dist/tabs/tabs.d.mts +64 -0
  176. package/dist/tabs/tabs.d.mts.map +1 -0
  177. package/dist/tabs/tabs.mjs +93 -0
  178. package/dist/tabs/tabs.mjs.map +1 -0
  179. package/dist/tabs/tabs.styles.d.mts +64 -0
  180. package/dist/tabs/tabs.styles.d.mts.map +1 -0
  181. package/dist/tabs/tabs.styles.mjs +118 -0
  182. package/dist/tabs/tabs.styles.mjs.map +1 -0
  183. package/dist/textarea/index.d.mts +3 -0
  184. package/dist/textarea/textarea.d.mts +15 -0
  185. package/dist/textarea/textarea.d.mts.map +1 -0
  186. package/dist/textarea/textarea.mjs +70 -0
  187. package/dist/textarea/textarea.mjs.map +1 -0
  188. package/dist/textarea/textarea.styles.d.mts +70 -0
  189. package/dist/textarea/textarea.styles.d.mts.map +1 -0
  190. package/dist/textarea/textarea.styles.mjs +85 -0
  191. package/dist/textarea/textarea.styles.mjs.map +1 -0
  192. package/dist/toast/index.d.mts +3 -0
  193. package/dist/toast/toast.d.mts +47 -0
  194. package/dist/toast/toast.d.mts.map +1 -0
  195. package/dist/toast/toast.mjs +100 -0
  196. package/dist/toast/toast.mjs.map +1 -0
  197. package/dist/toast/toast.styles.d.mts +61 -0
  198. package/dist/toast/toast.styles.d.mts.map +1 -0
  199. package/dist/toast/toast.styles.mjs +79 -0
  200. package/dist/toast/toast.styles.mjs.map +1 -0
  201. package/dist/tokens/color-set.mjs +124 -0
  202. package/dist/tokens/color-set.mjs.map +1 -0
  203. package/dist/tooltip/index.d.mts +3 -0
  204. package/dist/tooltip/tooltip.d.mts +20 -0
  205. package/dist/tooltip/tooltip.d.mts.map +1 -0
  206. package/dist/tooltip/tooltip.mjs +45 -0
  207. package/dist/tooltip/tooltip.mjs.map +1 -0
  208. package/dist/tooltip/tooltip.styles.d.mts +48 -0
  209. package/dist/tooltip/tooltip.styles.d.mts.map +1 -0
  210. package/dist/tooltip/tooltip.styles.mjs +39 -0
  211. package/dist/tooltip/tooltip.styles.mjs.map +1 -0
  212. package/package.json +69 -0
package/README.md ADDED
@@ -0,0 +1,418 @@
1
+ # @novi-ui/flatlay
2
+
3
+ Novi UI のテーマ3。**z 軸を持たない。**
4
+
5
+ 浮く層が無いので、開くものは場所を取ります。展開はその場を押し下げ、
6
+ Modal は画面を占め、階層は罫線と地色と面積だけで作ります。
7
+
8
+ ```bash
9
+ pnpm add @novi-ui/flatlay @novi-ui/core react-aria-components
10
+ ```
11
+
12
+ ```tsx
13
+ import '@novi-ui/core/base.css'
14
+ import '@novi-ui/flatlay/flatlay.css'
15
+ import { Button } from '@novi-ui/flatlay'
16
+
17
+ export function Example() {
18
+ return <Button color="primary">保存</Button>
19
+ }
20
+ ```
21
+
22
+ Provider は要りません。テーマは CSS 変数だけで効きます。
23
+
24
+ **`@novi-ui/raster` / `@novi-ui/tactile` と公開 API は完全に同一です。**
25
+ import 元を差し替えるだけで構造ごと切り替わります。
26
+
27
+ ## 他の2つとどう違うか
28
+
29
+ | | Raster | Tactile | **Flatlay** |
30
+ |---|---|---|---|
31
+ | 前提の入力 | ポインタ | 指 | **ポインタ + キーボード** |
32
+ | 階層の作り方 | 線で切る | 面を持ち上げる | **罫線・地色・面積だけ** |
33
+ | 影 | 使う | 面にも使う | **全段が透明（存在しない）** |
34
+ | 展開（Select / Menu / Popover） | 隣に浮く | 下から出るシート | **その場を押し下げる** |
35
+ | Modal | 中央のダイアログ | 下から出るシート | **全画面テイクオーバー** |
36
+ | Toast | 右下に浮く | 上端に浮く | **フローに挿入される帯** |
37
+ | 押下の表現 | 色 | 0.97 倍に沈む | **面と文字が入れ替わる** |
38
+ | 高さ | 32 / 40 / 48px | 40 / 48 / 56px | **28 / 32 / 40px** |
39
+ | 中立色 | 染まらない紙 | 染まる生地 | **地は染まらず罫線だけが染まる** |
40
+
41
+ **指で触る画面なら Tactile を選んでください。** Flatlay はタッチの下限（44px）を
42
+ 意図的に満たしていません。帳票の密度と両立しないためです。
43
+
44
+ ## デザイン言語（数値定義）
45
+
46
+ 「z 軸を持たない」を主観で運用すると必ず崩れるので、すべて規則にしています。
47
+ 違反は CI（`scripts/check-design-rules.mjs`・9 ルール）が検出します。
48
+
49
+ | 項目 | 規則 |
50
+ |---|---|
51
+ | `z-index` | **禁止。例外なし。** 重なりの順序は DOM 順だけで表す |
52
+ | `position` | `fixed` / `absolute` / `sticky` は**例外2ファイルのみ**（Modal / Tooltip） |
53
+ | 影 | **全段 `0 0 #0000`。** `none` ではないのは ring が box-shadow に合成されるため |
54
+ | `transform` | 禁止（Spinner の回転のみ例外）。押下で沈む・縮むは z 軸の語彙 |
55
+ | 角丸 | `sm` 2px / `md` **2px** / `lg` 4px。**書類の直角** |
56
+ | コンポーネント高さ | `sm` 28px / `md` 32px / `lg` 40px |
57
+ | タイポスケール | 11 / 13 / **16** / 18 / 22 / 26 / 32px（比率 ≒1.18） |
58
+ | モーション | **1本（100ms）。** 展開・格納はアニメーションしない |
59
+ | 罫線の彩度 | chroma 0.02〜0.03。`border-strong` は地に対し 3:1 以上 |
60
+ | 中立色 | 地・文字は chroma 0（無彩）。染まるのは罫線2本だけ |
61
+
62
+ ## 色を選ぶ
63
+
64
+ Flatlay は **Stationery** という8色のカラーセットを持ちます。全色が机の上の
65
+ 事務道具の実名です。`data-novi-color` 属性ひとつで切り替わります。
66
+
67
+ ```html
68
+ <html data-novi-color="blueprint">
69
+ ```
70
+
71
+ | 色 | hue | 出自 | 差し色（バイカラー） |
72
+ |---|---|---|---|
73
+ | `fieldbook` **（既定）** | 172 | 測量野帳の表紙の緑 | `eraser` |
74
+ | `blueprint` | 215 | 青焼き図面の青 | `manila` |
75
+ | `carbon` | 288 | カーボン複写紙の紫 | `legalpad` |
76
+ | `ribbon` | 330 | タイプライターのインクリボン | `fieldbook` |
77
+ | `eraser` | 352 | ピンクの消しゴム | `pencil` |
78
+ | `manila` | 58 | マニラ封筒の黄土 | `blueprint` |
79
+ | `legalpad` | 98 | 黄色いリーガルパッド | `carbon` |
80
+ | `pencil` | 240 | 鉛筆の芯（無彩枠） | `eraser` |
81
+
82
+ - **トーンはテーマが持ちます。** どの色を選んでも L47% / C0.070（dark は L75% / C0.060）
83
+ - **染まるのは罫線だけです。** 地も文字も無彩のまま。唯一の階層表現である罫線に
84
+ 色を持たせないと、色を選んだ実感がどこにも出ません
85
+ - **赤がありません。** 校正の朱書きはエラーの道具なので、赤は `danger` に予約しています。
86
+ primary が danger と紛れる事故を、規則ではなく世界観で防いでいます
87
+ - **差し色が組で付いてきます。** `--novi-color-secondary` に表の相方が入ります
88
+ - **知らない名前を書いても壊れません。** 既定の `fieldbook` で描画されます
89
+
90
+ Raster（`ink` / `brick` など）・Tactile（`indigo` / `madder` など）の色名とは
91
+ **1つも重なりません。** テーマを切り替えると既定色に戻ります。
92
+
93
+ ## 基準パターン（コンポーネント実装の型）
94
+
95
+ Button がこの型を定義しています。以降のコンポーネントはこれを踏襲します。
96
+
97
+ ### ファイル構成
98
+
99
+ ```
100
+ src/<name>/
101
+ <name>.tsx コンポーネント本体（'use client' はエントリ側で宣言）
102
+ <name>.styles.ts tv() 定義。named export する
103
+ <name>.test.tsx 5点セット + Flatlay 固有の差分
104
+ index.ts 2行の再輸出
105
+ ```
106
+
107
+ ### スタイル定義の型
108
+
109
+ - slot は型注釈ではなく `satisfies SlotMap<...>` で書く。型注釈だと任意 slot が
110
+ `undefined` 扱いになり、`s.startContent()` が呼べなくなる（ADR-R5）
111
+ - 色は `--c` / `--c-fg` / `--c-text` / `--c-line` のローカル変数に落としてから
112
+ variant が参照する。variant 5 × color 6 = 30 通りを書かないため
113
+ - `variants` は `{ color, size, radius, variant }` の順で宣言する。
114
+ **`variant` を先に書くと size のクラスに負ける**
115
+ - **base に色を書かない。** tailwind-merge が同族クラスを後勝ちでマージするため、
116
+ 全 variant が上書きする性質（border 色など）を base に置くと死ぬコードになる
117
+
118
+ ### テストの5点セット
119
+
120
+ 1. デフォルト props でレンダリングできる
121
+ 2. slot 契約を満たす（`testSlotContract`）
122
+ 3. a11y 違反がない
123
+ 4. 全 variant / size / color が**互いに異なる**クラスを適用する
124
+ 5. `classNames` が該当 slot に反映される
125
+
126
+ これに Flatlay 固有の3点を足します。
127
+
128
+ 6. 押下で面と文字が入れ替わる。**離すと元に戻る**（Button は状態を持たない）
129
+ 7. z 軸の語彙（`scale` / `translate` / `rotate` / `shadow-` / `z-`）を持たない
130
+ 8. 色はすべてトークン経由（リテラルを書かない）
131
+
132
+ 合成後のクラスに対する検査は `src/styles/cross-cutting.test.ts` が担当します。
133
+ 公開エントリから `*Styles` を自動収集するので、**コンポーネントを足すだけで対象が増えます。**
134
+
135
+ ## 知っておくべき仕様
136
+
137
+ ### `size` は幅ではなく本文の行長です（Modal）
138
+
139
+ Modal は全画面テイクオーバーなので面積が固定されます。幅（Raster）にも
140
+ 高さ（Tactile）にも段階を作れないので、`size` は**本文の最大行長**として
141
+ 解釈します（`sm` 32rem / `md` 44rem / `lg` 56rem / `full` 制限なし）。
142
+
143
+ 語彙は core が共通で固定し、解釈はテーマの自由、という設計です。同じコードが
144
+ テーマを跨いでそのまま動くのはこのためで、不具合ではありません。
145
+
146
+ ### Modal の `radius` は効きません
147
+
148
+ 全画面を占める面に角はありません。書いても描画に出ないので、解釈を
149
+ 持たせていません（渡しても黙って無視されます）。
150
+
151
+ ### 閉じるは「← 戻る」です（Modal）
152
+
153
+ ヘッダ行の左端にあります。右上の ✕（Raster）・フッターのフルワイド（Tactile）に
154
+ 続く第3の位置で、書類の「戻る」が常に左上にあることに合わせています。
155
+
156
+ 地が暗転しないので、文書が切り替わったことを示すのはこのボタンと下辺の罫線だけです。
157
+
158
+ ### 開くと後続が下がります（Select）
159
+
160
+ 選択肢はトリガーの隣にも画面下端にも出ません。**トリガーの直後、同じフローの中**に
161
+ 展開されて、下にあるものを押し下げます。浮く層が無いので「どこかが隠れている」が
162
+ 起きません。閉じると元の位置に戻ります。
163
+
164
+ 選択済みの印は行頭の `▸` です。チェックマーク（他の2テーマ）ではないのは、押下の
165
+ 反転と役割を分けるためで、**状態は記号、押した瞬間は面**が示します。
166
+ 開閉の向きも `▾` / `▴` の差し替えで、矢印は回りません。
167
+
168
+ ### Menu も後続を押し下げます
169
+
170
+ Select と同じインフロー展開です。一覧はトリガーの直後に生え、後続が下がります。
171
+ `placement` / `offset` は**受け取りますが効きません**。浮かないものに寄せる先は
172
+ 無いためで、他テーマ向けに書いたコードがそのまま動くよう受け取ること自体はやめていません。
173
+
174
+ ショートカット（`shortcut`）は**主役**です。両テーマは muted の小さな注記として
175
+ 右端に添えますが、帳票の世界では「キーで引ける」ことが操作の見出しになります。
176
+ 本文と同じ濃さ・同じ大きさで、等幅の列として縦に揃います。
177
+
178
+ 行の間には罫線が入り、`MenuSeparator` はそれより濃い線でまとまりの切れ目を示します。
179
+ `MenuSection` の見出しは地を一段落とした表のヘッダ行です。
180
+
181
+ ### Popover は注記の面です（浮きません）
182
+
183
+ トリガーの直後、フローの中に面が生えます。Select / Menu と違うのは**地の色**で、
184
+ 展開部が紙と同じ地（`bg`）なのに対して、Popover は一段落とした地（`subtle`）です。
185
+ 一覧の続きではなく、本文に貼った注記であることを地の差で読ませます。
186
+
187
+ `arrow` slot は描きません。浮いていないので指す先が無く、矢印は嘘になります。
188
+ `placement` / `offset` は Menu と同じく受け取るだけで効きません。
189
+
190
+ ### 通知は帯としてフローに挿さります（Toast）
191
+
192
+ `NoviToastRegion` は右下（Raster）にも上端中央（Tactile）にも固定しません。**置いた場所に
193
+ 出ます**。アプリの先頭、ヘッダの直下あたりに1つ置いてください。通知が出ると帯が生えて
194
+ 後続が押し下がり、閉じると元に戻ります。
195
+
196
+ ```tsx
197
+ <Header />
198
+ <NoviToastRegion queue={toast} />
199
+ <main>…</main>
200
+ ```
201
+
202
+ `sticky` も使いません。滞留もまた重なりだからです。スクロールすれば通知は流れて
203
+ 見えなくなります（帳票の朱書きはページの先頭にあり、読み進めるあいだ追いかけてはきません）。
204
+
205
+ この割り切りの代償は「長いページでは気づきにくい」ことです。**見落とすと困る確認を
206
+ Toast に置かないでください。** 取り返しのつかない操作の確認は `Modal`（テイクオーバー）です。
207
+
208
+ 色は左端の太い罫だけが受け持ちます。地を塗り分けないのは、通知が「別の種類の紙」ではなく
209
+ 「同じ紙に入った書き込み」だからです。
210
+
211
+ ### 浮くのは Tooltip だけです
212
+
213
+ Flatlay で唯一 z 軸を持つのが `Tooltip` です。フローに入れた瞬間にレイアウトが動いて
214
+ ポインタがトリガーから外れ、出た瞬間に閉じてしまうため、ここだけは浮かせています。
215
+
216
+ 浮くことを認めた代わりに、**紙の上の面には見せません**。地と文字を反転したインクの札で、
217
+ 書類の一部ではなく「一時的に当てた付箋」として読ませます。影は使いません。
218
+ 浮いていることは反転色と重なりの事実が示します。
219
+
220
+ そのため `Tooltip` では `placement` / `offset` が**効きます**（Popover / Menu / Select と
221
+ 逆なので注意してください）。浮くものはこの2つ（`Modal` と `Tooltip`）で凍結しています。
222
+
223
+ ### Accordion はこのテーマの主役です
224
+
225
+ 「開く = 場所を取る」という Flatlay の原理を、もともと素で満たしていた唯一の
226
+ コンポーネントです。他の overlay を直して辿り着いた形に、Accordion は最初から居ます。
227
+
228
+ 開閉の印は **`▸` と `▾` の差し替え**です。回転させません。回転は「同じ物体が
229
+ 向きを変えた」という 3 次元の言い方で、Flatlay には奥行きがないからです。
230
+ 字を替えるのは帳票の言い方です。
231
+
232
+ 印は**行頭**に置き、幅を 1 文字ぶんに固定しています（`w-[1ch]`）。見出しの
233
+ 開始位置が開閉でずれず、段が縦に読めます。右端に置くと見出しの長さで位置が
234
+ 変わり、列として読めなくなります。
235
+
236
+ 高さのアニメーションも持ちません。開いた瞬間に後続が下がります。
237
+ `solid` と `soft` は地色が同じため、Flatlay では同じ見え方になります。
238
+
239
+ ### タブとパネルが地続きになります（Tabs）
240
+
241
+ 選ばれた見出しとパネルは**1枚の紙**です。見出し列の下辺に走る罫線は、選ばれた
242
+ 見出しの下でだけ途切れ、その切れ目の向こうがパネルになります。下線1本（Raster）・
243
+ セグメンテッドの塗り面（Tactile）に続く第3の形です。
244
+
245
+ 切れ目を作っているのは印ではなく、**選択中の見出しが自分の下辺罫線を地色で塗る**
246
+ ことです。そのため `indicator` slot は描画されません。実体のある印を置くと
247
+ 「罫線が抜けている」ではなく「上に何か乗っている」に見えてしまいます。
248
+
249
+ 見出し列とパネルの間に余白はありません。離すと罫線が繋がらず、ただ隣り合った
250
+ 2つの面に戻ります。`classNames` で間隔を足すときはこの点に注意してください。
251
+
252
+ ### Radio だけが円です
253
+
254
+ 角丸は 0 / 2 / 2 / 4px で統一していますが、`Radio` の枠と印は `radius-full` です
255
+ （`Avatar` と並ぶ2つの例外）。ここで角を守ると `Checkbox` と同じ形になり、
256
+ 「複数選べる」のか「1つだけ」なのかが形から読めなくなります。角丸の規律より
257
+ **形の弁別**が優先します。
258
+
259
+ 印は `Checkbox` の `✓` のような文字ではなく塗りの点です。円の中に字を置くと
260
+ 小さすぎて読めないためで、ここだけは記号ではなく面が状態を持ちます。
261
+ 枠ごと塗り潰さないのも同じ理由で、塗ると `Checkbox` の選択と見分けがつきません。
262
+
263
+ `Select` の選択済み項目に付く `▸` とは役割が違います。`▸` は**一覧のどれが選ばれて
264
+ いるかを読ませる印**、`Radio` は**排他選択を入力させる部品**です。すでに決まった値を
265
+ 表示するだけなら `Radio` を並べず `Select` を使ってください。
266
+
267
+ ### つまみは滑りません（Switch）
268
+
269
+ トラックもつまみも矩形で、md は 28×14px（Button の高さ 28px を横に倒した寸法）です。
270
+ 両テーマのピル型に対する第3の形で、帳票の1行の中に置いても行が膨らみません。
271
+
272
+ つまみは `translate` で滑らず、左端と右端を**即座に**行き来します。滑走は
273
+ レールの上をモノが動く表現＝奥行きの語彙なので、押し下げに transition を
274
+ 付けないのと同じ理由でここでも使いません。変わるのは色だけです。
275
+
276
+ 形が見慣れないぶん ON/OFF が読み取りにくいので、ラベルの併記を強く推奨します。
277
+
278
+ ### 色見本は方眼に並びます（ColorPicker）
279
+
280
+ 両テーマは色面を隙間を空けて並べますが、Flatlay の見本帳は**升目**です。列は罫線で
281
+ 仕切られ、見本は升の中に収まります。升目の罫線が見本の枠を兼ねるので、スウォッチ自身は
282
+ 枠を持ちません（二重に線を引くと升目が太って方眼に見えなくなります）。
283
+
284
+ 選択は**枠の反転**です。選ばれた升目の地が紙からインクに入れ替わり、見本が台紙に
285
+ 載った見え方になります。色だけに頼らないよう `✓` も併記します。
286
+
287
+ 並ぶのは Stationery の8色で、**赤はありません**。校正の朱書きはエラー表示の道具なので、
288
+ 赤は `danger` に予約しています。primary が danger と紛れる事故を規則ではなく世界観で
289
+ 防ぐ設計です。
290
+
291
+ ### Card は面で持ち上がりません（罫線で仕切ります）
292
+
293
+ Flatlay の `surface` は `bg` と同値です。浮く面という概念がないので、カードの地を
294
+ 背景から一段持ち上げることができません。header と footer は**罫線だけ**で本文と
295
+ 仕切ります。影も、`surface` トークンも使いません。
296
+
297
+ `isPressable` なカードは押下で**全面が反転**します。面積が大きいぶん派手ですが、
298
+ 沈む・浮くが使えない以上ここだけ別の語彙にはできません。
299
+
300
+ 角の既定は `sm`（2px）です。Raster の `lg` と違い、カードだけが大きく丸まることは
301
+ ありません。
302
+
303
+ ### Avatar の badge は浮きません
304
+
305
+ 両テーマは在席バッジを枠の外へ `absolute` で貼り出しますが、Flatlay で `position` を
306
+ 使えるのは Modal と Tooltip の2つだけです。代わりに画像と同じ升（`[grid-area:1/1]`）へ
307
+ 重ね、**枠の内側の下端**に収めます。
308
+
309
+ 重なりの順序を決めているのは DOM 順だけです。`badge` は root の最後の子なので上に
310
+ 描かれます。`z-index` は使いません。
311
+
312
+ はみ出さないぶん badge は画像の一部を隠します。小さい `size` では `sm` の Badge を
313
+ 渡すか、badge 自体を省いてください。
314
+
315
+ ### Badge の点も正方形です
316
+
317
+ `withDot` の点は角を持ちません。円は Radio と Avatar の2つに予約してあり、
318
+ それ以外の丸は世界観の外です。点は色だけを担うので `aria-hidden` を付け、
319
+ 意味はラベルの文言が持ちます。
320
+
321
+ Badge の高さは 16 / 20 / 24px です。本文の行に置いても行が膨らまない寸法にしてあります。
322
+
323
+ ### 階層は番地として読ませます（Breadcrumbs）
324
+
325
+ 区切りの `/` は**等幅**で出ます。階層の列を「文」ではなく「番地」として
326
+ 読ませるためで、段の深さが目で数えられ、折り返しても列がずれません。
327
+
328
+ リンクは既定で下線を持ちます。色だけで押せることを示しません。現在地は
329
+ リンクにならず、**色ではなく太さ**で示します。色を変えると「リンクの色違い」に
330
+ 見えてしまい、押せるのか押せないのかが読めなくなるからです。
331
+
332
+ ### 進捗は罫線が引かれていきます（Progress）
333
+
334
+ トラックは 1 / 2 / 4px で、両テーマより1段細くしてあります。面が伸びるのではなく
335
+ **線が引かれる**表現なので、地の色は `subtle` ではなく罫線の色です（2px の帯では
336
+ `subtle` と `bg` の明度差が見えず、線が消えます）。
337
+
338
+ 不確定表示は**点滅**です。両テーマは細い帯を `translate` で往復させますが、
339
+ Flatlay は transform を持ちません。線を全幅で引いたまま濃さを脈打たせることで、
340
+ 「進んでいるが量は分からない」を動かさずに示します。
341
+
342
+ ### 回転するのは Spinner だけです
343
+
344
+ `transform` を使える唯一のコンポーネントです。代替（点滅・バーの往復）は
345
+ 処理中であることの視認性か情報量で必ず劣り、待たされている人にとっては
346
+ 世界観よりも「動いていると分かること」が先だと判断しました。
347
+
348
+ 例外はここ1つで、`scale` や `translate` は Spinner でも使いません。
349
+ `prefers-reduced-motion` のときは回転が止まります。
350
+
351
+ ### Skeleton の既定は角なしです
352
+
353
+ 場所取りは**記入前の空欄**そのものなので、中身の角丸を先取りしません
354
+ （両テーマの既定は `sm`）。動きは濃さのパルスだけで、シマー（グラデーションを
355
+ 滑らせる光沢）は使いません。光沢は光源を前提にした表現で、影を持たない
356
+ Flatlay では成立しないためです。
357
+
358
+ ### 押すと反転します
359
+
360
+ 対話要素は押下中に面の色と文字の色が入れ替わります。**スタンプを押した跡**の
361
+ 見え方で、沈む・浮くを使わずに押した瞬間を返します。離すと元に戻ります。
362
+
363
+ 面積のある変化なので、要素が1px も動かなくても押下が伝わります。
364
+
365
+ ### 既定で罫線を持ちます
366
+
367
+ 影の無い紙面で輪郭を示せるのは線だけです。すべての variant が罫線の幅を持ち、
368
+ 線の色を variant が決めます（`ghost` / `plain` だけが `transparent` を選ぶ）。
369
+
370
+ ### 記号と数値は等幅です
371
+
372
+ `startContent` / `endContent` / ショートカット / 数値の slot は `--novi-font-mono` と
373
+ `tabular-nums` を既定で持ちます。ボタンや行が並んだときに幅が暴れないためです。
374
+
375
+ Flatlay は `--novi-font-*` を実際に上書きする初のテーマです。Web フォントは
376
+ 同梱せず（依存ゼロ原則）、フォールバックスタックを精密に組んでいます。
377
+
378
+ ## スタイルの拡張
379
+
380
+ すべての `tv()` 定義を named export しています。
381
+
382
+ ```tsx
383
+ import { buttonStyles } from '@novi-ui/flatlay'
384
+ import { tv } from 'tailwind-variants'
385
+
386
+ // slot ベースの定義なので `base` ではなく `slots` で足す（`base` は無視されます）
387
+ const myButton = tv({
388
+ extend: buttonStyles,
389
+ slots: { root: 'uppercase tracking-widest' },
390
+ })
391
+ ```
392
+
393
+ size variant のクラスに負ける場合は、呼び出し時に渡してください。
394
+
395
+ ```tsx
396
+ // ✗ size の px-3 に負ける
397
+ tv({ extend: buttonStyles, slots: { root: 'px-10' } })
398
+
399
+ // ✓ 呼び出し時なら勝つ
400
+ <Button classNames={{ root: 'px-10' }} />
401
+ ```
402
+
403
+ ## slot
404
+
405
+ 全コンポーネントは構成部位に `data-slot="<名前>"` を出力します。
406
+ テスト・CSS の上書き・視覚回帰がすべてこれに乗ります。
407
+
408
+ **他テーマ向けに書いた `classNames` をそのまま渡しても壊れません。** Flatlay が
409
+ 描画しない slot のキーは黙って無視されます。
410
+
411
+ ## 日本語入力
412
+
413
+ テキスト入力と一覧選択は、IME の変換中に Enter を押しても送信・選択が起きません。
414
+ `useImeSafeKeys` を経由しています。
415
+
416
+ ## ライセンス
417
+
418
+ MIT
package/dist/accordion/accordion.d.mts ADDED
@@ -0,0 +1,35 @@
1
+ import { ReactNode } from "react";
2
+ import { AccordionProps } from "@novi-ui/core";
3
+ //#region src/accordion/accordion.d.ts
4
+ interface AccordionItemProps {
5
+ id: string;
6
+ title: ReactNode;
7
+ isDisabled?: boolean;
8
+ children?: ReactNode;
9
+ className?: string;
10
+ }
11
+ /**
12
+ * Accordion の項目。
13
+ *
14
+ * @example
15
+ * <AccordionItem id="shipping" title="配送について">…</AccordionItem>
16
+ */
17
+ declare function AccordionItem({ id, title, isDisabled, children, className }: AccordionItemProps): import("react").JSX.Element;
18
+ /**
19
+ * 折りたたみできる項目の集合。**Flatlay の主役**です。
20
+ *
21
+ * 他の展開系（Select / Menu / Popover）はここに合わせてフローへ降ろしました。
22
+ * Accordion だけは最初からこの形だったので、直すところがありません。
23
+ *
24
+ * 開閉の印は行頭の `▸` / `▾`。回転（Tactile）ではなく字の差し替えです。
25
+ * 高さのアニメーションも持たないので、開いた瞬間に後続がその場で下がります。
26
+ *
27
+ * @example
28
+ * <Accordion allowsMultipleExpanded>
29
+ * <AccordionItem id="shipping" title="配送について">…</AccordionItem>
30
+ * </Accordion>
31
+ */
32
+ declare function Accordion({ variant, size, allowsMultipleExpanded, expandedKeys, defaultExpandedKeys, onExpandedChange, isDisabled, children, className, classNames, id }: AccordionProps): import("react").JSX.Element;
33
+ //#endregion
34
+ export { Accordion, AccordionItem, AccordionItemProps };
35
+ //# sourceMappingURL=accordion.d.mts.map
package/dist/accordion/accordion.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"accordion.d.mts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;UAaiB;EACf;EACA,OAAO;EACP;EACA,WAAW;EACX;;;;;;;;iBASc,gBAAgB,IAAI,OAAO,YAAY,UAAU,aAAa,qCAAkB,IAAA;;;;;;;;;;;;;;;iBA4ChF,YACd,SACA,MACA,wBACA,cACA,qBACA,kBACA,YACA,UACA,WACA,YACA,MACC,iCAAc,IAAA"}
package/dist/accordion/accordion.mjs ADDED
@@ -0,0 +1,74 @@
1
+ "use client";
2
+ import { accordionStyles } from "./accordion.styles.mjs";
3
+ import { Button, Disclosure, DisclosureGroup, DisclosurePanel, Heading } from "react-aria-components";
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ //#region src/accordion/accordion.tsx
6
+ /**
7
+ * Accordion の項目。
8
+ *
9
+ * @example
10
+ * <AccordionItem id="shipping" title="配送について">…</AccordionItem>
11
+ */
12
+ function AccordionItem({ id, title, isDisabled, children, className }) {
13
+ const s = accordionStyles();
14
+ return /* @__PURE__ */ jsx(Disclosure, {
15
+ id,
16
+ isDisabled,
17
+ "data-slot": "item",
18
+ className: s.item({ class: className }),
19
+ children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
20
+ "data-slot": "heading",
21
+ className: s.heading(),
22
+ children: /* @__PURE__ */ jsxs(Button, {
23
+ slot: "trigger",
24
+ "data-slot": "trigger",
25
+ className: s.trigger(),
26
+ children: [/* @__PURE__ */ jsx("span", {
27
+ "data-slot": "indicator",
28
+ className: s.indicator(),
29
+ "aria-hidden": "true",
30
+ children: isExpanded ? "▾" : "▸"
31
+ }), /* @__PURE__ */ jsx("span", { children: title })]
32
+ })
33
+ }), /* @__PURE__ */ jsx(DisclosurePanel, {
34
+ "data-slot": "panel",
35
+ className: s.panel(),
36
+ children
37
+ })] })
38
+ });
39
+ }
40
+ /**
41
+ * 折りたたみできる項目の集合。**Flatlay の主役**です。
42
+ *
43
+ * 他の展開系（Select / Menu / Popover）はここに合わせてフローへ降ろしました。
44
+ * Accordion だけは最初からこの形だったので、直すところがありません。
45
+ *
46
+ * 開閉の印は行頭の `▸` / `▾`。回転（Tactile）ではなく字の差し替えです。
47
+ * 高さのアニメーションも持たないので、開いた瞬間に後続がその場で下がります。
48
+ *
49
+ * @example
50
+ * <Accordion allowsMultipleExpanded>
51
+ * <AccordionItem id="shipping" title="配送について">…</AccordionItem>
52
+ * </Accordion>
53
+ */
54
+ function Accordion({ variant, size, allowsMultipleExpanded, expandedKeys, defaultExpandedKeys, onExpandedChange, isDisabled, children, className, classNames, id }) {
55
+ const s = accordionStyles({
56
+ variant,
57
+ size
58
+ });
59
+ return /* @__PURE__ */ jsx(DisclosureGroup, {
60
+ id,
61
+ allowsMultipleExpanded,
62
+ expandedKeys,
63
+ defaultExpandedKeys,
64
+ onExpandedChange: (keys) => onExpandedChange?.([...keys].map(String)),
65
+ isDisabled,
66
+ "data-slot": "root",
67
+ className: s.root({ class: [className, classNames?.root] }),
68
+ children
69
+ });
70
+ }
71
+ //#endregion
72
+ export { Accordion, AccordionItem };
73
+
74
+ //# sourceMappingURL=accordion.mjs.map
package/dist/accordion/accordion.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"accordion.mjs","names":[],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["'use client'\n\nimport type { AccordionProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n Button,\n Disclosure,\n DisclosureGroup,\n DisclosurePanel,\n Heading,\n} from 'react-aria-components'\nimport { accordionStyles } from './accordion.styles'\n\nexport interface AccordionItemProps {\n id: string\n title: ReactNode\n isDisabled?: boolean\n children?: ReactNode\n className?: string\n}\n\n/**\n * Accordion の項目。\n *\n * @example\n * <AccordionItem id=\"shipping\" title=\"配送について\">…</AccordionItem>\n */\nexport function AccordionItem({ id, title, isDisabled, children, className }: AccordionItemProps) {\n const s = accordionStyles()\n\n return (\n <Disclosure\n id={id}\n isDisabled={isDisabled}\n data-slot=\"item\"\n className={s.item({ class: className })}\n >\n {({ isExpanded }) => (\n <>\n <Heading data-slot=\"heading\" className={s.heading()}>\n <Button slot=\"trigger\" data-slot=\"trigger\" className={s.trigger()}>\n {/* 印は行頭。回さず字を差し替える（FR-11） */}\n <span data-slot=\"indicator\" className={s.indicator()} aria-hidden=\"true\">\n {isExpanded ? '▾' : '▸'}\n </span>\n <span>{title}</span>\n </Button>\n </Heading>\n <DisclosurePanel data-slot=\"panel\" className={s.panel()}>\n {children}\n </DisclosurePanel>\n </>\n )}\n </Disclosure>\n )\n}\n\n/**\n * 折りたたみできる項目の集合。**Flatlay の主役**です。\n *\n * 他の展開系（Select / Menu / Popover）はここに合わせてフローへ降ろしました。\n * Accordion だけは最初からこの形だったので、直すところがありません。\n *\n * 開閉の印は行頭の `▸` / `▾`。回転（Tactile）ではなく字の差し替えです。\n * 高さのアニメーションも持たないので、開いた瞬間に後続がその場で下がります。\n *\n * @example\n * <Accordion allowsMultipleExpanded>\n * <AccordionItem id=\"shipping\" title=\"配送について\">…</AccordionItem>\n * </Accordion>\n */\nexport function Accordion({\n variant,\n size,\n allowsMultipleExpanded,\n expandedKeys,\n defaultExpandedKeys,\n onExpandedChange,\n isDisabled,\n children,\n className,\n classNames,\n id,\n}: AccordionProps) {\n const s = accordionStyles({ variant, size })\n\n return (\n <DisclosureGroup\n id={id}\n allowsMultipleExpanded={allowsMultipleExpanded}\n expandedKeys={expandedKeys}\n defaultExpandedKeys={defaultExpandedKeys}\n onExpandedChange={(keys) => onExpandedChange?.([...keys].map(String))}\n isDisabled={isDisabled}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {children}\n </DisclosureGroup>\n )\n}\n"],"mappings":";;;;;;;;;;;AA2BA,SAAgB,cAAc,EAAE,IAAI,OAAO,YAAY,UAAU,aAAiC;CAChG,MAAM,IAAI,gBAAgB;CAE1B,OACE,oBAAC,YAAD;EACM;EACQ;EACZ,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,UAAU,CAAC;EAEpC,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;GAAS,aAAU;GAAU,WAAW,EAAE,QAAQ;GAChD,UAAA,qBAAC,QAAD;IAAQ,MAAK;IAAU,aAAU;IAAU,WAAW,EAAE,QAAQ;IAAhE,UAAA,CAEE,oBAAC,QAAD;KAAM,aAAU;KAAY,WAAW,EAAE,UAAU;KAAG,eAAY;KAC/D,UAAA,aAAa,MAAM;IAChB,CAAA,GACN,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CACb;;EACD,CAAA,GACT,oBAAC,iBAAD;GAAiB,aAAU;GAAQ,WAAW,EAAE,MAAM;GACnD;EACc,CAAA,CACjB,EAAA,CAAA;CAEM,CAAA;AAEhB;;;;;;;;;;;;;;;AAgBA,SAAgB,UAAU,EACxB,SACA,MACA,wBACA,cACA,qBACA,kBACA,YACA,UACA,WACA,YACA,MACiB;CACjB,MAAM,IAAI,gBAAgB;EAAE;EAAS;CAAK,CAAC;CAE3C,OACE,oBAAC,iBAAD;EACM;EACoB;EACV;EACO;EACrB,mBAAmB,SAAS,mBAAmB,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC;EACxD;EACZ,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEzD;CACc,CAAA;AAErB"}
package/dist/accordion/accordion.styles.d.mts ADDED
@@ -0,0 +1,61 @@
1
+ import { VariantMap } from "@novi-ui/core";
2
+ //#region src/accordion/accordion.styles.d.ts
3
+ /**
4
+ * Accordion のスタイル定義。
5
+ *
6
+ * @example
7
+ * const myAccordion = tv({ extend: accordionStyles, slots: { panel: 'pt-2' } })
8
+ */
9
+ declare const accordionStyles: import("tailwind-variants").TVReturnType<{
10
+ size: VariantMap<"sm" | "md" | "lg", {
11
+ trigger: string;
12
+ panel: string;
13
+ }>;
14
+ variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
15
+ root: string;
16
+ item: string;
17
+ }>;
18
+ }, {
19
+ root: string;
20
+ item: string;
21
+ heading: string;
22
+ trigger: string;
23
+ indicator: string;
24
+ panel: string;
25
+ }, undefined, {
26
+ size: VariantMap<"sm" | "md" | "lg", {
27
+ trigger: string;
28
+ panel: string;
29
+ }>;
30
+ variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
31
+ root: string;
32
+ item: string;
33
+ }>;
34
+ }, {
35
+ root: string;
36
+ item: string;
37
+ heading: string;
38
+ trigger: string;
39
+ indicator: string;
40
+ panel: string;
41
+ }, import("tailwind-variants").TVReturnTypeLike<{
42
+ size: VariantMap<"sm" | "md" | "lg", {
43
+ trigger: string;
44
+ panel: string;
45
+ }>;
46
+ variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
47
+ root: string;
48
+ item: string;
49
+ }>;
50
+ }, {
51
+ root: string;
52
+ item: string;
53
+ heading: string;
54
+ trigger: string;
55
+ indicator: string;
56
+ panel: string;
57
+ }>>;
58
+ type AccordionStyleProps = Parameters<typeof accordionStyles>[0];
59
+ //#endregion
60
+ export { AccordionStyleProps, accordionStyles };
61
+ //# sourceMappingURL=accordion.styles.d.mts.map
package/dist/accordion/accordion.styles.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"accordion.styles.d.mts","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"mappings":";;;;;;;;cAyEa,6CAAe;;IAZgB;IAAe;;;IATZ;IAAc;;;;;;;;;;;IASjB;IAAe;;;IATZ;IAAc;;;;;;;;;;;IASjB;IAAe;;;IATZ;IAAc;;;;;;;;;;KA4BjD,sBAAsB,kBAAkB"}