@novi-ui/raster 0.2.0 → 0.4.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 (32) hide show
  1. package/README.md +43 -13
  2. package/dist/avatar/avatar.d.mts +1 -1
  3. package/dist/avatar/avatar.mjs +1 -1
  4. package/dist/avatar/avatar.mjs.map +1 -1
  5. package/dist/avatar/avatar.styles.d.mts +3 -3
  6. package/dist/badge/badge.styles.d.mts +3 -3
  7. package/dist/button/button.styles.d.mts +3 -3
  8. package/dist/card/card.styles.d.mts +3 -3
  9. package/dist/color-picker/color-picker.d.mts +25 -0
  10. package/dist/color-picker/color-picker.d.mts.map +1 -0
  11. package/dist/color-picker/color-picker.mjs +109 -0
  12. package/dist/color-picker/color-picker.mjs.map +1 -0
  13. package/dist/color-picker/color-picker.styles.d.mts +76 -0
  14. package/dist/color-picker/color-picker.styles.d.mts.map +1 -0
  15. package/dist/color-picker/color-picker.styles.mjs +60 -0
  16. package/dist/color-picker/color-picker.styles.mjs.map +1 -0
  17. package/dist/color-picker/index.d.mts +3 -0
  18. package/dist/index.d.mts +4 -1
  19. package/dist/index.mjs +3 -1
  20. package/dist/input/input.styles.d.mts +3 -3
  21. package/dist/menu/menu.styles.d.mts +9 -9
  22. package/dist/modal/modal.styles.d.mts +3 -3
  23. package/dist/popover/popover.styles.d.mts +3 -3
  24. package/dist/raster.css +237 -7
  25. package/dist/raster.scoped.css +237 -7
  26. package/dist/select/select.styles.d.mts +3 -3
  27. package/dist/skeleton/skeleton.styles.d.mts +3 -3
  28. package/dist/textarea/textarea.styles.d.mts +3 -3
  29. package/dist/toast/toast.styles.d.mts +3 -3
  30. package/dist/tokens/color-set.mjs +106 -0
  31. package/dist/tokens/color-set.mjs.map +1 -0
  32. package/package.json +3 -2
package/README.md CHANGED
@@ -37,27 +37,22 @@ Provider は要りません。テーマは CSS 変数だけで効きます。
37
37
  | コンポーネント高さ | `sm` 32px / `md` 40px / `lg` 48px |
38
38
  | タイポスケール | 比率 1.2。12 / 14 / 16 / 20 / 24 / 30 / 36px |
39
39
  | 境界線 | **1px のみ。** 2px 以上は使わない |
40
- | 影 | **使わない。** 階層は境界線と背景色の差で表す |
41
- | 角丸 | 既定 0。**最大でも 2px** |
40
+ | 影 | **浮いている層だけ**が持つ（メニュー・ダイアログ）。面は平ら |
41
+ | 角丸 | 3段。`sm` 6px / `md` 8px / `lg` 12px |
42
42
  | 彩度 | 中立色は chroma 0。意味を持つ色のみ有彩（上限 0.19） |
43
+ | ブランド色 | トーン L44% / C0.090（light）・L74% / C0.090（dark）に固定 |
43
44
  | モーション | `--novi-duration-fast`(120ms) のみ。`opacity` と `translate` だけ |
44
45
 
45
46
  ## 知っておくべき仕様
46
47
 
47
- ### `radius` は効きません（意図的）
48
+ ### `radius` は3段の階調です
48
49
 
49
- API としては `radius="lg"` を受け付けますが、Raster では **`md` も `lg` も 2px に潰れます**。
50
- 角を立てるのが Raster の思想だからです。不具合ではありません。
50
+ `sm` 6px / `md` 8px / `lg` 12px。部位ごとの既定は 小さな部品 `sm` / 操作類 `md` / 浮く面 `lg`。
51
+ かつては全段 2px に潰していましたが、完全な直角は「古い」と読まれるため改めました（ADR-R8）。
51
52
 
52
53
  語彙は core が共通で固定し、解釈はテーマの自由、という設計です。
53
54
  おかげでドキュメントのコード例がテーマを跨いでそのまま動きます。
54
55
 
55
- ### Switch は矩形です
56
-
57
- 一般的なピル型トグルは「角を立てる」原則と衝突するため、
58
- トラックもサムも角丸 0 の矩形にしています。
59
- 形が見慣れないぶん状態が読み取りにくいので、**ラベルの併記を強く推奨**します。
60
-
61
56
  ```tsx
62
57
  <Switch isSelected={enabled} onChange={setEnabled}>
63
58
  メール通知を受け取る
@@ -100,14 +95,49 @@ tv({ extend: switchStyles, slots: { track: 'w-14' } })
100
95
  <Switch classNames={{ track: 'w-14' }} />
101
96
  ```
102
97
 
103
- ブランド色を変えるだけなら CSS 変数の上書きで足ります。
98
+ ブランド色を変えるだけなら、**まず用意された8色から選べます**（下記）。
99
+ それでも合わなければ CSS 変数を上書きしてください。
104
100
 
105
101
  ```css
106
102
  :root {
107
- --novi-color-primary: oklch(50% 0.18 20);
103
+ --novi-color-primary: oklch(44% 0.09 20);
108
104
  }
109
105
  ```
110
106
 
107
+ ## 色を選ぶ
108
+
109
+ Raster は **Print Inks** という8色のカラーセットを持ちます。全色が顔料・インクの実名です。
110
+ `data-novi-color` 属性ひとつで切り替わります。**JavaScript も追加の import も不要**です。
111
+
112
+ ```html
113
+ <html data-novi-color="brick">
114
+ ```
115
+
116
+ | 色 | hue | 出自 | 差し色（2色刷り） |
117
+ |---|---|---|---|
118
+ | `ink` **（既定）** | 268 | 万年筆の藍黒。書き物の色 | `brick` |
119
+ | `prussian` | 235 | 紺青。18世紀からある合成顔料 | `ochre` |
120
+ | `forest` | 160 | 深い常緑。製図インクの緑 | `ochre` |
121
+ | `olive` | 125 | オリーブドラブ。土に近い緑 | `ink` |
122
+ | `ochre` | 70 | 黄土。最古の顔料のひとつ | `prussian` |
123
+ | `brick` | 35 | 煉瓦の朱。スイスポスターの赤の末裔 | `ink` |
124
+ | `bordeaux` | 12 | ワインの澱の赤 | `ochre` |
125
+ | `graphite` | 無彩 | 黒鉛。色を消すという選択肢 | `brick` |
126
+
127
+ - **トーンはテーマが持ちます。** どの色を選んでも明度と彩度は L44% / C0.090（dark は L74%）。
128
+ 色相だけが変わるので、選び方で画面の印象が壊れません
129
+ - **差し色が組で付いてきます。** `--novi-color-secondary` には表の「差し色」の値が入ります。
130
+ 新しい色を作らず同じセット内で組む、印刷の2色刷りと同じ考え方です
131
+ - **意味を持つ色は変わりません。** `success` / `warning` / `danger` は色選択の影響を受けません
132
+ - **知らない名前を書いても壊れません。** 該当する色が無ければ既定の `ink` で描画されます
133
+
134
+ 8色 × light/dark のすべてについて、sRGB 色域内にあること・地に対して 4.5:1 以上・
135
+ 面の上の文字が 4.5:1 以上であることを CI が検査しています。
136
+
137
+ > **`data-novi-color` はテーマを宣言している要素に置いてください。**
138
+ > `raster.scoped.css` を使っていて `data-novi-theme` を入れ子にしている場合、
139
+ > 内側の要素が既定色を宣言し直すため、外側に置いた色指定はそこで止まります。
140
+
111
141
  ## slot
112
142
 
113
143
  全コンポーネントは構成部位に `data-slot="<名前>"` を出力します。
package/dist/avatar/avatar.d.mts CHANGED
@@ -11,7 +11,7 @@ declare function initialsOf(name: string): string;
11
11
  * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。
12
12
  *
13
13
  * @example
14
- * <Avatar src="/me.jpg" name="小島 佑翔" />
14
+ * <Avatar src="/me.jpg" name="山本 太郎" />
15
15
  */
16
16
  declare function Avatar({ size, radius, src, name, fallback, badge, className, classNames, id }: AvatarProps): import("react").JSX.Element;
17
17
  //#endregion
package/dist/avatar/avatar.mjs CHANGED
@@ -19,7 +19,7 @@ function initialsOf(name) {
19
19
  * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。
20
20
  *
21
21
  * @example
22
- * <Avatar src="/me.jpg" name="小島 佑翔" />
22
+ * <Avatar src="/me.jpg" name="山本 太郎" />
23
23
  */
24
24
  function Avatar({ size, radius, src, name, fallback, badge, className, classNames, id }) {
25
25
  const s = avatarStyles({
package/dist/avatar/avatar.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.mjs","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["'use client'\n\nimport type { AvatarProps } from '@novi-ui/core'\nimport { useState } from 'react'\nimport { avatarStyles } from './avatar.styles'\n\n/**\n * 表示名からイニシャルを作る。\n *\n * 日本語の氏名は空白で区切られないことが多いので、\n * 空白があれば各語の先頭、なければ先頭1文字を使う。\n */\nexport function initialsOf(name: string): string {\n const parts = name.trim().split(/\\s+/).filter(Boolean)\n if (parts.length === 0) return ''\n if (parts.length === 1) return [...(parts[0] as string)][0] ?? ''\n return parts\n .slice(0, 2)\n .map((part) => [...part][0] ?? '')\n .join('')\n}\n\n/**\n * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。\n *\n * @example\n * <Avatar src=\"/me.jpg\" name=\"小島 佑翔\" />\n */\nexport function Avatar({\n size,\n radius,\n src,\n name,\n fallback,\n badge,\n className,\n classNames,\n id,\n}: AvatarProps) {\n const s = avatarStyles({ size, radius })\n const [failed, setFailed] = useState(false)\n const showImage = src !== undefined && src !== '' && !failed\n\n return (\n <span id={id} data-slot=\"root\" className={s.root({ class: [className, classNames?.root] })}>\n {showImage ? (\n <img\n data-slot=\"image\"\n className={s.image({ class: classNames?.image })}\n src={src}\n alt={name ?? ''}\n onError={() => setFailed(true)}\n />\n ) : (\n // 画像の代わりなので role=\"img\" を与える。\n // これがないと aria-label が効かず、読み上げが「小佑」のような\n // イニシャルだけになって氏名が伝わらない\n <span\n data-slot=\"fallback\"\n className={s.fallback({ class: classNames?.fallback })}\n role=\"img\"\n aria-label={name}\n >\n {fallback ?? (name !== undefined ? initialsOf(name) : null)}\n </span>\n )}\n\n {badge !== undefined && (\n <span data-slot=\"badge\" className={s.badge({ class: classNames?.badge })}>\n {badge}\n </span>\n )}\n </span>\n )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,WAAW,MAAsB;CAC/C,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC,GAAI,MAAM,EAAa,CAAC,CAAC,MAAM;CAC/D,OAAO,MACJ,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACjC,KAAK,EAAE;AACZ;;;;;;;AAQA,SAAgB,OAAO,EACrB,MACA,QACA,KACA,MACA,UACA,OACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAM;CAAO,CAAC;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,YAAY,QAAQ,KAAA,KAAa,QAAQ,MAAM,CAAC;CAEtD,OACE,qBAAC,QAAD;EAAU;EAAI,aAAU;EAAO,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAAzF,UAAA,CACG,YACC,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAC1C;GACL,KAAK,QAAQ;GACb,eAAe,UAAU,IAAI;EAC9B,CAAA,IAKD,oBAAC,QAAD;GACE,aAAU;GACV,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;GACrD,MAAK;GACL,cAAY;GAEX,UAAA,aAAa,SAAS,KAAA,IAAY,WAAW,IAAI,IAAI;EAClD,CAAA,GAGP,UAAU,KAAA,KACT,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACpE,UAAA;EACG,CAAA,CAEJ;;AAEV"}
1
+ {"version":3,"file":"avatar.mjs","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["'use client'\n\nimport type { AvatarProps } from '@novi-ui/core'\nimport { useState } from 'react'\nimport { avatarStyles } from './avatar.styles'\n\n/**\n * 表示名からイニシャルを作る。\n *\n * 日本語の氏名は空白で区切られないことが多いので、\n * 空白があれば各語の先頭、なければ先頭1文字を使う。\n */\nexport function initialsOf(name: string): string {\n const parts = name.trim().split(/\\s+/).filter(Boolean)\n if (parts.length === 0) return ''\n if (parts.length === 1) return [...(parts[0] as string)][0] ?? ''\n return parts\n .slice(0, 2)\n .map((part) => [...part][0] ?? '')\n .join('')\n}\n\n/**\n * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。\n *\n * @example\n * <Avatar src=\"/me.jpg\" name=\"山本 太郎\" />\n */\nexport function Avatar({\n size,\n radius,\n src,\n name,\n fallback,\n badge,\n className,\n classNames,\n id,\n}: AvatarProps) {\n const s = avatarStyles({ size, radius })\n const [failed, setFailed] = useState(false)\n const showImage = src !== undefined && src !== '' && !failed\n\n return (\n <span id={id} data-slot=\"root\" className={s.root({ class: [className, classNames?.root] })}>\n {showImage ? (\n <img\n data-slot=\"image\"\n className={s.image({ class: classNames?.image })}\n src={src}\n alt={name ?? ''}\n onError={() => setFailed(true)}\n />\n ) : (\n // 画像の代わりなので role=\"img\" を与える。\n // これがないと aria-label が効かず、読み上げが「山太」のような\n // イニシャルだけになって氏名が伝わらない\n <span\n data-slot=\"fallback\"\n className={s.fallback({ class: classNames?.fallback })}\n role=\"img\"\n aria-label={name}\n >\n {fallback ?? (name !== undefined ? initialsOf(name) : null)}\n </span>\n )}\n\n {badge !== undefined && (\n <span data-slot=\"badge\" className={s.badge({ class: classNames?.badge })}>\n {badge}\n </span>\n )}\n </span>\n )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,WAAW,MAAsB;CAC/C,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC,GAAI,MAAM,EAAa,CAAC,CAAC,MAAM;CAC/D,OAAO,MACJ,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACjC,KAAK,EAAE;AACZ;;;;;;;AAQA,SAAgB,OAAO,EACrB,MACA,QACA,KACA,MACA,UACA,OACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAM;CAAO,CAAC;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,YAAY,QAAQ,KAAA,KAAa,QAAQ,MAAM,CAAC;CAEtD,OACE,qBAAC,QAAD;EAAU;EAAI,aAAU;EAAO,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAAzF,UAAA,CACG,YACC,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAC1C;GACL,KAAK,QAAQ;GACb,eAAe,UAAU,IAAI;EAC9B,CAAA,IAKD,oBAAC,QAAD;GACE,aAAU;GACV,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;GACrD,MAAK;GACL,cAAY;GAEX,UAAA,aAAa,SAAS,KAAA,IAAY,WAAW,IAAI,IAAI;EAClD,CAAA,GAGP,UAAU,KAAA,KACT,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACpE,UAAA;EACG,CAAA,CAEJ;;AAEV"}
package/dist/avatar/avatar.styles.d.mts CHANGED
@@ -10,7 +10,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
10
10
  size: VariantMap<"sm" | "md" | "lg", {
11
11
  root: string;
12
12
  }>;
13
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
13
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
14
14
  root: string;
15
15
  }>;
16
16
  }, {
@@ -22,7 +22,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
22
22
  size: VariantMap<"sm" | "md" | "lg", {
23
23
  root: string;
24
24
  }>;
25
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
25
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
26
26
  root: string;
27
27
  }>;
28
28
  }, {
@@ -34,7 +34,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
34
34
  size: VariantMap<"sm" | "md" | "lg", {
35
35
  root: string;
36
36
  }>;
37
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
37
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
38
38
  root: string;
39
39
  }>;
40
40
  }, {
package/dist/badge/badge.styles.d.mts CHANGED
@@ -14,7 +14,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
14
14
  root: string;
15
15
  dot: string;
16
16
  }>;
17
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
17
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
18
18
  root: string;
19
19
  }>;
20
20
  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -32,7 +32,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
32
32
  root: string;
33
33
  dot: string;
34
34
  }>;
35
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
35
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
36
36
  root: string;
37
37
  }>;
38
38
  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -50,7 +50,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
50
50
  root: string;
51
51
  dot: string;
52
52
  }>;
53
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
53
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
54
54
  root: string;
55
55
  }>;
56
56
  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
package/dist/button/button.styles.d.mts CHANGED
@@ -28,7 +28,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
28
28
  size: VariantMap<"sm" | "md" | "lg", {
29
29
  root: string;
30
30
  }>;
31
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
31
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
32
32
  root: string;
33
33
  }>;
34
34
  }, {
@@ -47,7 +47,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
47
47
  size: VariantMap<"sm" | "md" | "lg", {
48
48
  root: string;
49
49
  }>;
50
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
50
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
51
51
  root: string;
52
52
  }>;
53
53
  }, {
@@ -66,7 +66,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
66
66
  size: VariantMap<"sm" | "md" | "lg", {
67
67
  root: string;
68
68
  }>;
69
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
69
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
70
70
  root: string;
71
71
  }>;
72
72
  }, {
package/dist/card/card.styles.d.mts CHANGED
@@ -10,7 +10,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
10
10
  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
11
11
  root: string;
12
12
  }>;
13
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
13
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
14
14
  root: string;
15
15
  }>;
16
16
  isPressable: {
@@ -29,7 +29,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
29
29
  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
30
30
  root: string;
31
31
  }>;
32
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
32
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
33
33
  root: string;
34
34
  }>;
35
35
  isPressable: {
@@ -48,7 +48,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
48
48
  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
49
49
  root: string;
50
50
  }>;
51
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
51
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
52
52
  root: string;
53
53
  }>;
54
54
  isPressable: {
package/dist/color-picker/color-picker.d.mts ADDED
@@ -0,0 +1,25 @@
1
+ import { ColorPickerProps, NoviColorOption } from "@novi-ui/core";
2
+ //#region src/color-picker/color-picker.d.ts
3
+ /**
4
+ * Raster のカラーセット（Print Inks）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
5
+ *
6
+ * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
7
+ * Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。
8
+ */
9
+ declare const COLOR_OPTIONS: readonly NoviColorOption[];
10
+ /**
11
+ * テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。
12
+ *
13
+ * @example
14
+ * // 色 id を書かない。未指定ならテーマの既定色から始まる
15
+ * const [color, setColor] = useState<string>()
16
+ * return (
17
+ * <div data-novi-color={color}>
18
+ * <ColorPicker label="配色" onChange={setColor} />
19
+ * </div>
20
+ * )
21
+ */
22
+ declare function ColorPicker({ size, label, description, errorMessage, value, defaultValue, onChange, colors, showLabels, isDisabled, isReadOnly, isRequired, isInvalid, name, className, classNames, id }: ColorPickerProps): import("react").JSX.Element;
23
+ //#endregion
24
+ export { COLOR_OPTIONS, ColorPicker };
25
+ //# sourceMappingURL=color-picker.d.mts.map
package/dist/color-picker/color-picker.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-picker.d.mts","names":[],"sources":["../../src/color-picker/color-picker.tsx"],"mappings":";;;;;;;;cAmBa,wBAAwB;;;;;;;;;;;;;iBAyBrB,cACd,MACA,OACA,aACA,cACA,OACA,cACA,UACA,QACA,YACA,YACA,YACA,YACA,WACA,MACA,WACA,YACA,MACC,mCAAgB,IAAA"}
package/dist/color-picker/color-picker.mjs ADDED
@@ -0,0 +1,109 @@
1
+ "use client";
2
+ import { RASTER_COLOR_SET } from "../tokens/color-set.mjs";
3
+ import { colorPickerStyles } from "./color-picker.styles.mjs";
4
+ import { FieldError, Label, Radio, RadioGroup, Text } from "react-aria-components";
5
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
+ //#region src/color-picker/color-picker.tsx
7
+ /**
8
+ * Raster のカラーセット（Print Inks）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
9
+ *
10
+ * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
11
+ * Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。
12
+ */
13
+ const COLOR_OPTIONS = RASTER_COLOR_SET.map(({ id, name, description }) => ({
14
+ id,
15
+ name,
16
+ description
17
+ }));
18
+ /** 選択中であることを色以外でも示す印。 */
19
+ function CheckMark() {
20
+ return /* @__PURE__ */ jsx("svg", {
21
+ viewBox: "0 0 16 16",
22
+ width: "0.75em",
23
+ height: "0.75em",
24
+ fill: "none",
25
+ "aria-hidden": "true",
26
+ children: /* @__PURE__ */ jsx("path", {
27
+ d: "M2.5 8.5l3.5 3.5 7.5-8",
28
+ stroke: "currentColor",
29
+ strokeWidth: "2"
30
+ })
31
+ });
32
+ }
33
+ /**
34
+ * テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。
35
+ *
36
+ * @example
37
+ * // 色 id を書かない。未指定ならテーマの既定色から始まる
38
+ * const [color, setColor] = useState<string>()
39
+ * return (
40
+ * <div data-novi-color={color}>
41
+ * <ColorPicker label="配色" onChange={setColor} />
42
+ * </div>
43
+ * )
44
+ */
45
+ function ColorPicker({ size, label, description, errorMessage, value, defaultValue = "ink", onChange, colors = COLOR_OPTIONS, showLabels = false, isDisabled, isReadOnly, isRequired, isInvalid, name, className, classNames, id }) {
46
+ const s = colorPickerStyles({ size });
47
+ return /* @__PURE__ */ jsxs(RadioGroup, {
48
+ id,
49
+ name,
50
+ value,
51
+ defaultValue,
52
+ onChange,
53
+ isDisabled,
54
+ isReadOnly,
55
+ isRequired,
56
+ isInvalid,
57
+ "data-slot": "root",
58
+ className: s.root({ class: [className, classNames?.root] }),
59
+ children: [
60
+ label !== void 0 && /* @__PURE__ */ jsx(Label, {
61
+ "data-slot": "label",
62
+ className: s.label({ class: classNames?.label }),
63
+ children: label
64
+ }),
65
+ /* @__PURE__ */ jsx("div", {
66
+ "data-slot": "list",
67
+ className: s.list({ class: classNames?.list }),
68
+ children: colors.map((color) => /* @__PURE__ */ jsx(Radio, {
69
+ value: color.id,
70
+ "aria-label": color.name,
71
+ "data-slot": "item",
72
+ className: `group ${s.item({ class: classNames?.item })}`,
73
+ children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
74
+ "data-slot": "swatch",
75
+ style: {
76
+ background: `var(--novi-swatch-${color.id})`,
77
+ color: `var(--novi-swatch-${color.id}-fg)`
78
+ },
79
+ className: s.swatch({ class: classNames?.swatch }),
80
+ children: isSelected && /* @__PURE__ */ jsx("span", {
81
+ "data-slot": "indicator",
82
+ className: s.indicator({ class: classNames?.indicator }),
83
+ children: /* @__PURE__ */ jsx(CheckMark, {})
84
+ })
85
+ }), showLabels && /* @__PURE__ */ jsx("span", {
86
+ "data-slot": "itemLabel",
87
+ className: s.itemLabel({ class: classNames?.itemLabel }),
88
+ children: color.name
89
+ })] })
90
+ }, color.id))
91
+ }),
92
+ description !== void 0 && /* @__PURE__ */ jsx(Text, {
93
+ slot: "description",
94
+ "data-slot": "description",
95
+ className: s.description({ class: classNames?.description }),
96
+ children: description
97
+ }),
98
+ errorMessage !== void 0 && /* @__PURE__ */ jsx(FieldError, {
99
+ "data-slot": "errorMessage",
100
+ className: s.errorMessage({ class: classNames?.errorMessage }),
101
+ children: errorMessage
102
+ })
103
+ ]
104
+ });
105
+ }
106
+ //#endregion
107
+ export { COLOR_OPTIONS, ColorPicker };
108
+
109
+ //# sourceMappingURL=color-picker.mjs.map
package/dist/color-picker/color-picker.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-picker.mjs","names":["RACRadioGroup","RACRadio"],"sources":["../../src/color-picker/color-picker.tsx"],"sourcesContent":["'use client'\n\nimport type { ColorPickerProps, NoviColorOption } from '@novi-ui/core'\nimport {\n FieldError,\n Label,\n Radio as RACRadio,\n RadioGroup as RACRadioGroup,\n Text,\n} from 'react-aria-components'\nimport { DEFAULT_COLOR_ID, RASTER_COLOR_SET } from '../tokens/color-set'\nimport { colorPickerStyles } from './color-picker.styles'\n\n/**\n * Raster のカラーセット（Print Inks）。**利用側が色値を書かなくてよい**ように既定で並ぶ。\n *\n * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも\n * Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。\n */\nexport const COLOR_OPTIONS: readonly NoviColorOption[] = RASTER_COLOR_SET.map(\n ({ id, name, description }) => ({ id, name, description }),\n)\n\n/** 選択中であることを色以外でも示す印。 */\nfunction CheckMark() {\n return (\n <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2.5 8.5l3.5 3.5 7.5-8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\n/**\n * テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。\n *\n * @example\n * // 色 id を書かない。未指定ならテーマの既定色から始まる\n * const [color, setColor] = useState<string>()\n * return (\n * <div data-novi-color={color}>\n * <ColorPicker label=\"配色\" onChange={setColor} />\n * </div>\n * )\n */\nexport function ColorPicker({\n size,\n label,\n description,\n errorMessage,\n value,\n defaultValue = DEFAULT_COLOR_ID,\n onChange,\n colors = COLOR_OPTIONS,\n showLabels = false,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n name,\n className,\n classNames,\n id,\n}: ColorPickerProps) {\n const s = colorPickerStyles({ size })\n\n return (\n <RACRadioGroup\n id={id}\n name={name}\n value={value}\n defaultValue={defaultValue}\n onChange={onChange}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={isInvalid}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {label !== undefined && (\n <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {label}\n </Label>\n )}\n\n <div data-slot=\"list\" className={s.list({ class: classNames?.list })}>\n {colors.map((color) => (\n <RACRadio\n key={color.id}\n value={color.id}\n // スウォッチは色の面でしかない。名前を持たせないと読み上げが「ラジオボタン」で終わる\n aria-label={color.name}\n data-slot=\"item\"\n className={`group ${s.item({ class: classNames?.item })}`}\n >\n {({ isSelected }) => (\n <>\n {/*\n 色の解決は生成 CSS の `--novi-swatch-*` に委ねる。実装は色値を持たない。\n `data-novi-color` を置く形は採れない — テーマ宣言ごと切り替わってしまい、\n ライト / ダークの選択からも外れる（06 の申し送り）。\n */}\n <span\n data-slot=\"swatch\"\n style={{\n background: `var(--novi-swatch-${color.id})`,\n color: `var(--novi-swatch-${color.id}-fg)`,\n }}\n className={s.swatch({ class: classNames?.swatch })}\n >\n {isSelected && (\n <span\n data-slot=\"indicator\"\n className={s.indicator({ class: classNames?.indicator })}\n >\n <CheckMark />\n </span>\n )}\n </span>\n\n {showLabels && (\n <span\n data-slot=\"itemLabel\"\n className={s.itemLabel({ class: classNames?.itemLabel })}\n >\n {color.name}\n </span>\n )}\n </>\n )}\n </RACRadio>\n ))}\n </div>\n\n {description !== undefined && (\n <Text\n slot=\"description\"\n data-slot=\"description\"\n className={s.description({ class: classNames?.description })}\n >\n {description}\n </Text>\n )}\n\n {errorMessage !== undefined && (\n <FieldError\n data-slot=\"errorMessage\"\n className={s.errorMessage({ class: classNames?.errorMessage })}\n >\n {errorMessage}\n </FieldError>\n )}\n </RACRadioGroup>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAa,gBAA4C,iBAAiB,KACvE,EAAE,IAAI,MAAM,mBAAmB;CAAE;CAAI;CAAM;AAAY,EAC1D;;AAGA,SAAS,YAAY;CACnB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC9E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAyB,QAAO;GAAe,aAAY;EAAK,CAAA;CACrE,CAAA;AAET;;;;;;;;;;;;;AAcA,SAAgB,YAAY,EAC1B,MACA,OACA,aACA,cACA,OACA,eAAA,OACA,UACA,SAAS,eACT,aAAa,OACb,YACA,YACA,YACA,WACA,MACA,WACA,YACA,MACmB;CACnB,MAAM,IAAI,kBAAkB,EAAE,KAAK,CAAC;CAEpC,OACE,qBAACA,YAAD;EACM;EACE;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAX5D,UAAA;GAaG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,oBAAC,OAAD;IAAK,aAAU;IAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IAChE,UAAA,OAAO,KAAK,UACX,oBAACC,OAAD;KAEE,OAAO,MAAM;KAEb,cAAY,MAAM;KAClB,aAAU;KACV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAEpD,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CAME,oBAAC,QAAD;MACE,aAAU;MACV,OAAO;OACL,YAAY,qBAAqB,MAAM,GAAG;OAC1C,OAAO,qBAAqB,MAAM,GAAG;MACvC;MACA,WAAW,EAAE,OAAO,EAAE,OAAO,YAAY,OAAO,CAAC;MAEhD,UAAA,cACC,oBAAC,QAAD;OACE,aAAU;OACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;OAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;MACR,CAAA;KAEJ,CAAA,GAEL,cACC,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;MAEtD,UAAA,MAAM;KACH,CAAA,CAER,EAAA,CAAA;IAEI,GA1CH,MAAM,EA0CH,CACX;GACE,CAAA;GAEJ,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGP,iBAAiB,KAAA,KAChB,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EAED;;AAEnB"}
package/dist/color-picker/color-picker.styles.d.mts ADDED
@@ -0,0 +1,76 @@
1
+ import { VariantMap } from "@novi-ui/core";
2
+ //#region src/color-picker/color-picker.styles.d.ts
3
+ /**
4
+ * ColorPicker のスタイル定義。
5
+ *
6
+ * @example
7
+ * import { colorPickerStyles } from '@novi-ui/raster'
8
+ * import { tv } from 'tailwind-variants'
9
+ *
10
+ * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'gap-4' } })
11
+ */
12
+ declare const colorPickerStyles: import("tailwind-variants").TVReturnType<{
13
+ size: VariantMap<"sm" | "md" | "lg", {
14
+ swatch: string;
15
+ }>;
16
+ }, {
17
+ root: string;
18
+ label: string;
19
+ description: string;
20
+ errorMessage: string;
21
+ list: string;
22
+ item: string;
23
+ /**
24
+ * 色そのものを見せる面。
25
+ *
26
+ * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
27
+ * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
28
+ */
29
+ swatch: string;
30
+ indicator: string;
31
+ itemLabel: string;
32
+ }, undefined, {
33
+ size: VariantMap<"sm" | "md" | "lg", {
34
+ swatch: string;
35
+ }>;
36
+ }, {
37
+ root: string;
38
+ label: string;
39
+ description: string;
40
+ errorMessage: string;
41
+ list: string;
42
+ item: string;
43
+ /**
44
+ * 色そのものを見せる面。
45
+ *
46
+ * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
47
+ * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
48
+ */
49
+ swatch: string;
50
+ indicator: string;
51
+ itemLabel: string;
52
+ }, import("tailwind-variants").TVReturnTypeLike<{
53
+ size: VariantMap<"sm" | "md" | "lg", {
54
+ swatch: string;
55
+ }>;
56
+ }, {
57
+ root: string;
58
+ label: string;
59
+ description: string;
60
+ errorMessage: string;
61
+ list: string;
62
+ item: string;
63
+ /**
64
+ * 色そのものを見せる面。
65
+ *
66
+ * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
67
+ * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
68
+ */
69
+ swatch: string;
70
+ indicator: string;
71
+ itemLabel: string;
72
+ }>>;
73
+ type ColorPickerStyleProps = Parameters<typeof colorPickerStyles>[0];
74
+ //#endregion
75
+ export { ColorPickerStyleProps, colorPickerStyles };
76
+ //# sourceMappingURL=color-picker.styles.d.mts.map
package/dist/color-picker/color-picker.styles.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-picker.styles.d.mts","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"mappings":";;;;;;;;;;;cAgEa,+CAAiB;;IAfa;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;KAqB/B,wBAAwB,kBAAkB"}
package/dist/color-picker/color-picker.styles.mjs ADDED
@@ -0,0 +1,60 @@
1
+ import { disabledState, focusRing } from "../styles/focus-ring.mjs";
2
+ import { tv } from "tailwind-variants";
3
+ //#region src/color-picker/color-picker.styles.ts
4
+ /**
5
+ * Raster のカラー選択は**見本帳**。インクの試し刷りを方眼に並べた形にする。
6
+ *
7
+ * スウォッチが角丸の小さい矩形なのは Raster の語彙そのもので、
8
+ * 円にすると Radio と見分けがつかなくなる（あちらは「1つ選ぶ」の形）。
9
+ */
10
+ const slots = {
11
+ root: ["flex flex-col gap-2", disabledState].join(" "),
12
+ label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
13
+ description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
14
+ errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]",
15
+ list: "flex flex-wrap items-start gap-2",
16
+ item: [
17
+ "inline-flex flex-col items-center gap-1",
18
+ "cursor-pointer",
19
+ "data-[disabled]:cursor-default"
20
+ ].join(" "),
21
+ /**
22
+ * 色そのものを見せる面。
23
+ *
24
+ * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
25
+ * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
26
+ */
27
+ swatch: [
28
+ "inline-grid place-items-center",
29
+ "border border-[var(--novi-color-border-strong)]",
30
+ "rounded-[var(--novi-radius-sm)]",
31
+ "transition-[border-color]",
32
+ "duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
33
+ "group-data-[selected]:border-[var(--novi-color-fg)]",
34
+ focusRing
35
+ ].join(" "),
36
+ indicator: "leading-none",
37
+ itemLabel: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]"
38
+ };
39
+ /**
40
+ * ColorPicker のスタイル定義。
41
+ *
42
+ * @example
43
+ * import { colorPickerStyles } from '@novi-ui/raster'
44
+ * import { tv } from 'tailwind-variants'
45
+ *
46
+ * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'gap-4' } })
47
+ */
48
+ const colorPickerStyles = tv({
49
+ slots,
50
+ variants: { size: {
51
+ sm: { swatch: "size-6" },
52
+ md: { swatch: "size-8" },
53
+ lg: { swatch: "size-10" }
54
+ } },
55
+ defaultVariants: { size: "md" }
56
+ });
57
+ //#endregion
58
+ export { colorPickerStyles };
59
+
60
+ //# sourceMappingURL=color-picker.styles.mjs.map
package/dist/color-picker/color-picker.styles.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-picker.styles.mjs","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"sourcesContent":["import type {\n colorPickerRequiredSlots,\n colorPickerSlots,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Raster のカラー選択は**見本帳**。インクの試し刷りを方眼に並べた形にする。\n *\n * スウォッチが角丸の小さい矩形なのは Raster の語彙そのもので、\n * 円にすると Radio と見分けがつかなくなる（あちらは「1つ選ぶ」の形）。\n */\nconst slots = {\n root: ['flex flex-col gap-2', disabledState].join(' '),\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n // 見本帳なので折り返して並べる。縦1列にすると色同士を比べられない\n list: 'flex flex-wrap items-start gap-2',\n item: [\n 'inline-flex flex-col items-center gap-1',\n 'cursor-pointer',\n 'data-[disabled]:cursor-default',\n ].join(' '),\n /**\n * 色そのものを見せる面。\n *\n * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、\n * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。\n */\n swatch: [\n 'inline-grid place-items-center',\n 'border border-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'transition-[border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n // 選択は枠でも示す。色面だけだと「どれが選択中か」が色の違いに埋もれる\n 'group-data-[selected]:border-[var(--novi-color-fg)]',\n focusRing,\n ].join(' '),\n // 色だけに頼らず印でも示す（WCAG 1.4.1）\n indicator: 'leading-none',\n itemLabel: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof colorPickerSlots, (typeof colorPickerRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize, { swatch: string }> = {\n sm: { swatch: 'size-6' },\n md: { swatch: 'size-8' },\n lg: { swatch: 'size-10' },\n}\n\n/**\n * ColorPicker のスタイル定義。\n *\n * @example\n * import { colorPickerStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'gap-4' } })\n */\nexport const colorPickerStyles = tv({\n slots,\n variants: { size },\n defaultVariants: { size: 'md' },\n})\n\nexport type ColorPickerStyleProps = Parameters<typeof colorPickerStyles>[0]\n"],"mappings":";;;;;;;;;AAgBA,MAAM,QAAQ;CACZ,MAAM,CAAC,uBAAuB,aAAa,CAAC,CAAC,KAAK,GAAG;CACrD,OAAO;CACP,aAAa;CACb,cAAc;CAEd,MAAM;CACN,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;;;;;;;CAOV,QAAQ;EACN;EACA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,WAAW;AACb;;;;;;;;;;AAiBA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAhBZ,IAAI,EAAE,QAAQ,SAAS;EACvB,IAAI,EAAE,QAAQ,SAAS;EACvB,IAAI,EAAE,QAAQ,UAAU;CAcZ,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}
package/dist/color-picker/index.d.mts ADDED
@@ -0,0 +1,3 @@
1
+ import { COLOR_OPTIONS, ColorPicker } from "./color-picker.mjs";
2
+ import { ColorPickerStyleProps, colorPickerStyles } from "./color-picker.styles.mjs";
3
+ export { COLOR_OPTIONS, ColorPicker, type ColorPickerStyleProps, colorPickerStyles };
package/dist/index.d.mts CHANGED
@@ -19,6 +19,9 @@ import "./card/index.mjs";
19
19
  import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
20
20
  import { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
21
21
  import "./checkbox/index.mjs";
22
+ import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
23
+ import { ColorPickerStyleProps, colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
24
+ import "./color-picker/index.mjs";
22
25
  import { Input } from "./input/input.mjs";
23
26
  import { InputStyleProps, inputStyles } from "./input/input.styles.mjs";
24
27
  import "./input/index.mjs";
@@ -58,4 +61,4 @@ import "./textarea/index.mjs";
58
61
  import { NoviToast, NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
59
62
  import { ToastStyleProps, toastStyles } from "./toast/toast.styles.mjs";
60
63
  import "./toast/index.mjs";
61
- export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
64
+ export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, ColorPicker, type ColorPickerStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
package/dist/index.mjs CHANGED
@@ -13,6 +13,8 @@ import { cardStyles } from "./card/card.styles.mjs";
13
13
  import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card/card.mjs";
14
14
  import { checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
15
15
  import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
16
+ import { colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
17
+ import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
16
18
  import { inputStyles } from "./input/input.styles.mjs";
17
19
  import { Input } from "./input/input.mjs";
18
20
  import { menuStyles } from "./menu/menu.styles.mjs";
@@ -39,4 +41,4 @@ import { textareaStyles } from "./textarea/textarea.styles.mjs";
39
41
  import { TextArea } from "./textarea/textarea.mjs";
40
42
  import { toastStyles } from "./toast/toast.styles.mjs";
41
43
  import { NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
42
- export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
44
+ export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, ColorPicker, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
package/dist/input/input.styles.d.mts CHANGED
@@ -22,7 +22,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
22
22
  inputWrapper: string;
23
23
  input: string;
24
24
  }>;
25
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
25
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
26
26
  inputWrapper: string;
27
27
  }>;
28
28
  }, {
@@ -42,7 +42,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
42
42
  inputWrapper: string;
43
43
  input: string;
44
44
  }>;
45
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
45
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
46
46
  inputWrapper: string;
47
47
  }>;
48
48
  }, {
@@ -62,7 +62,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
62
62
  inputWrapper: string;
63
63
  input: string;
64
64
  }>;
65
- radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
65
+ radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
66
66
  inputWrapper: string;
67
67
  }>;
68
68
  }, {