@novi-ui/raster 0.1.1 → 0.3.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.
- package/README.md +43 -13
- package/dist/avatar/avatar.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts +3 -3
- package/dist/badge/badge.styles.mjs +2 -2
- package/dist/badge/badge.styles.mjs.map +1 -1
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.mjs +1 -1
- package/dist/button/button.styles.mjs.map +1 -1
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/card/card.styles.mjs +1 -1
- package/dist/card/card.styles.mjs.map +1 -1
- package/dist/checkbox/checkbox.styles.mjs +1 -1
- package/dist/checkbox/checkbox.styles.mjs.map +1 -1
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/input/input.styles.mjs +1 -1
- package/dist/input/input.styles.mjs.map +1 -1
- package/dist/menu/menu.styles.d.mts +6 -6
- package/dist/menu/menu.styles.mjs +3 -3
- package/dist/menu/menu.styles.mjs.map +1 -1
- package/dist/modal/modal.styles.d.mts +3 -3
- package/dist/modal/modal.styles.mjs +2 -2
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/popover/popover.styles.mjs +4 -4
- package/dist/popover/popover.styles.mjs.map +1 -1
- package/dist/progress/progress.styles.mjs +1 -1
- package/dist/progress/progress.styles.mjs.map +1 -1
- package/dist/raster.css +207 -25
- package/dist/raster.scoped.css +207 -25
- package/dist/select/select.styles.d.mts +3 -3
- package/dist/select/select.styles.mjs +4 -4
- package/dist/select/select.styles.mjs.map +1 -1
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/skeleton/skeleton.styles.mjs +1 -1
- package/dist/skeleton/skeleton.styles.mjs.map +1 -1
- package/dist/switch/switch.styles.mjs +2 -2
- package/dist/switch/switch.styles.mjs.map +1 -1
- package/dist/textarea/textarea.styles.d.mts +3 -3
- package/dist/textarea/textarea.styles.mjs +1 -1
- package/dist/textarea/textarea.styles.mjs.map +1 -1
- package/dist/toast/toast.styles.d.mts +3 -3
- package/dist/toast/toast.styles.mjs +2 -2
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +1 -1
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
|
-
| 角丸 |
|
|
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
|
-
|
|
50
|
-
|
|
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
|
-
|
|
98
|
+
ブランド色を変えるだけなら、**まず用意された8色から選べます**（下記）。
|
|
99
|
+
それでも合わなければ CSS 変数を上書きしてください。
|
|
104
100
|
|
|
105
101
|
```css
|
|
106
102
|
:root {
|
|
107
|
-
--novi-color-primary: oklch(
|
|
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="<名前>"` を出力します。
|
|
@@ -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<"
|
|
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<"
|
|
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<"
|
|
37
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
38
38
|
root: string;
|
|
39
39
|
}>;
|
|
40
40
|
}, {
|
|
@@ -14,7 +14,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
|
|
|
14
14
|
root: string;
|
|
15
15
|
dot: string;
|
|
16
16
|
}>;
|
|
17
|
-
radius: VariantMap<"
|
|
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<"
|
|
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<"
|
|
53
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
54
54
|
root: string;
|
|
55
55
|
}>;
|
|
56
56
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -6,7 +6,7 @@ const slots = {
|
|
|
6
6
|
"font-medium whitespace-nowrap",
|
|
7
7
|
"border border-transparent"
|
|
8
8
|
].join(" "),
|
|
9
|
-
dot: "shrink-0 rounded-[var(--novi-radius-
|
|
9
|
+
dot: "shrink-0 rounded-[var(--novi-radius-full)] bg-current",
|
|
10
10
|
label: "truncate"
|
|
11
11
|
};
|
|
12
12
|
const color = {
|
|
@@ -90,7 +90,7 @@ const badgeStyles = tv({
|
|
|
90
90
|
color: "default",
|
|
91
91
|
variant: "soft",
|
|
92
92
|
size: "md",
|
|
93
|
-
radius: "
|
|
93
|
+
radius: "sm"
|
|
94
94
|
}
|
|
95
95
|
});
|
|
96
96
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.styles.mjs","names":[],"sources":["../../src/badge/badge.styles.ts"],"sourcesContent":["import type {\n badgeRequiredSlots,\n badgeSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'inline-flex items-center gap-1.5',\n 'font-medium whitespace-nowrap',\n 'border border-transparent',\n ].join(' '),\n // 円ではなく正方形。Raster では点も角を立てる\n dot: 'shrink-0 rounded-[var(--novi-radius-
|
|
1
|
+
{"version":3,"file":"badge.styles.mjs","names":[],"sources":["../../src/badge/badge.styles.ts"],"sourcesContent":["import type {\n badgeRequiredSlots,\n badgeSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'inline-flex items-center gap-1.5',\n 'font-medium whitespace-nowrap',\n 'border border-transparent',\n ].join(' '),\n // 円ではなく正方形。Raster では点も角を立てる\n dot: 'shrink-0 rounded-[var(--novi-radius-full)] bg-current',\n label: 'truncate',\n} satisfies SlotMap<typeof badgeSlots, (typeof badgeRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: {\n root: [\n '[--c:var(--novi-color-default)]',\n '[--c-fg:var(--novi-color-default-fg)]',\n '[--c-text:var(--novi-color-fg)]',\n '[--c-line:var(--novi-color-border-strong)]',\n ].join(' '),\n },\n primary: {\n root: [\n '[--c:var(--novi-color-primary)]',\n '[--c-fg:var(--novi-color-primary-fg)]',\n '[--c-text:var(--novi-color-primary)]',\n '[--c-line:var(--novi-color-primary)]',\n ].join(' '),\n },\n secondary: {\n root: [\n '[--c:var(--novi-color-secondary)]',\n '[--c-fg:var(--novi-color-secondary-fg)]',\n '[--c-text:var(--novi-color-secondary)]',\n '[--c-line:var(--novi-color-secondary)]',\n ].join(' '),\n },\n success: {\n root: [\n '[--c:var(--novi-color-success)]',\n '[--c-fg:var(--novi-color-success-fg)]',\n '[--c-text:var(--novi-color-success)]',\n '[--c-line:var(--novi-color-success)]',\n ].join(' '),\n },\n warning: {\n root: [\n '[--c:var(--novi-color-warning)]',\n '[--c-fg:var(--novi-color-warning-fg)]',\n '[--c-text:var(--novi-color-warning)]',\n '[--c-line:var(--novi-color-warning)]',\n ].join(' '),\n },\n danger: {\n root: [\n '[--c:var(--novi-color-danger)]',\n '[--c-fg:var(--novi-color-danger-fg)]',\n '[--c-text:var(--novi-color-danger)]',\n '[--c-line:var(--novi-color-danger)]',\n ].join(' '),\n },\n}\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--c)] text-[var(--c-fg)]' },\n outline: { root: 'border-[var(--c-line)] text-[var(--c-text)]' },\n soft: { root: 'bg-[var(--novi-color-subtle)] text-[var(--c-text)]' },\n ghost: { root: 'text-[var(--c-text)]' },\n plain: { root: 'text-[var(--c-text)] px-0' },\n}\n\nconst size: VariantMap<NoviSize, { root: string; dot: string }> = {\n sm: { root: 'h-5 px-1.5 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n md: { root: 'h-6 px-2 text-[length:var(--novi-text-xs)]', dot: 'size-2' },\n lg: { root: 'h-7 px-2.5 text-[length:var(--novi-text-sm)]', dot: 'size-2' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Badge のスタイル定義。\n *\n * @example\n * const myBadge = tv({ extend: badgeStyles, slots: { label: 'uppercase' } })\n */\nexport const badgeStyles = tv({\n slots,\n // variant を最後に宣言する。tv は宣言順に適用するため、\n // 先に書くと `plain` の px-0 が size の px-2 に負けて ghost と同じ見た目になる。\n variants: { color, size, radius, variant },\n defaultVariants: { color: 'default', variant: 'soft', size: 'md', radius: 'sm' },\n})\n\nexport type BadgeStyleProps = Parameters<typeof badgeStyles>[0]\n"],"mappings":";;AAYA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,KAAK;CACL,OAAO;AACT;AAEA,MAAM,QAAiD;CACrD,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,WAAW,EACT,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,QAAQ,EACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;AACF;;;;;;;AA8BA,MAAa,cAAc,GAAG;CAC5B;CAGA,UAAU;EAAE;EAAO;GAvBnB,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAW;GAC5E,IAAI;IAAE,MAAM;IAA8C,KAAK;GAAS;GACxE,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAS;EAqBvD;EAAM;GAjBzB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAazB;EAAQ;GA/BjC,OAAO,EAAE,MAAM,mCAAmC;GAClD,SAAS,EAAE,MAAM,8CAA8C;GAC/D,MAAM,EAAE,MAAM,qDAAqD;GACnE,OAAO,EAAE,MAAM,uBAAuB;GACtC,OAAO,EAAE,MAAM,4BAA4B;EA2BV;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAQ,MAAM;EAAM,QAAQ;CAAK;AACjF,CAAC"}
|
|
@@ -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<"
|
|
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<"
|
|
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<"
|
|
69
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
70
70
|
root: string;
|
|
71
71
|
}>;
|
|
72
72
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.mjs","names":[],"sources":["../../src/button/button.styles.ts"],"sourcesContent":["import type {\n buttonRequiredSlots,\n buttonSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる。\n// satisfies なら契約を検査しつつ、実際に定義した slot の情報が保たれる。\nconst slots = {\n root: [\n 'inline-flex items-center justify-center gap-2',\n 'font-medium whitespace-nowrap select-none',\n 'border border-transparent',\n 'transition-[background-color,border-color,color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n label: 'truncate',\n startContent: 'shrink-0 inline-flex',\n endContent: 'shrink-0 inline-flex',\n spinner: 'shrink-0 inline-flex',\n} satisfies SlotMap<typeof buttonSlots, (typeof buttonRequiredSlots)[number]>\n\n/**\n * 色は「役割ごとのローカル変数」に落としてから variant が参照する。\n * こうしないと variant 5 × color 6 = 30 通りの組み合わせを書くことになる。\n *\n * - `--c` 面の色（solid の背景）\n * - `--c-fg` その面に乗る文字色\n * - `--c-text` 面を持たない variant での文字色\n * - `--c-line` 境界線の色\n */\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: {\n root: [\n '[--c:var(--novi-color-default)]',\n '[--c-fg:var(--novi-color-default-fg)]',\n '[--c-text:var(--novi-color-fg)]',\n '[--c-line:var(--novi-color-border-strong)]',\n ].join(' '),\n },\n primary: {\n root: [\n '[--c:var(--novi-color-primary)]',\n '[--c-fg:var(--novi-color-primary-fg)]',\n '[--c-text:var(--novi-color-primary)]',\n '[--c-line:var(--novi-color-primary)]',\n ].join(' '),\n },\n secondary: {\n root: [\n '[--c:var(--novi-color-secondary)]',\n '[--c-fg:var(--novi-color-secondary-fg)]',\n '[--c-text:var(--novi-color-secondary)]',\n '[--c-line:var(--novi-color-secondary)]',\n ].join(' '),\n },\n success: {\n root: [\n '[--c:var(--novi-color-success)]',\n '[--c-fg:var(--novi-color-success-fg)]',\n '[--c-text:var(--novi-color-success)]',\n '[--c-line:var(--novi-color-success)]',\n ].join(' '),\n },\n warning: {\n root: [\n '[--c:var(--novi-color-warning)]',\n '[--c-fg:var(--novi-color-warning-fg)]',\n '[--c-text:var(--novi-color-warning)]',\n '[--c-line:var(--novi-color-warning)]',\n ].join(' '),\n },\n danger: {\n root: [\n '[--c:var(--novi-color-danger)]',\n '[--c-fg:var(--novi-color-danger-fg)]',\n '[--c-text:var(--novi-color-danger)]',\n '[--c-line:var(--novi-color-danger)]',\n ].join(' '),\n },\n}\n\n/** 語彙の実装漏れ・語彙外の追加はここでコンパイルエラーになる（AC-02-2）。 */\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--c)] text-[var(--c-fg)] hover:opacity-90' },\n outline: {\n root: 'border-[var(--c-line)] text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]',\n },\n soft: { root: 'bg-[var(--novi-color-subtle)] text-[var(--c-text)] hover:brightness-95' },\n ghost: { root: 'text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]' },\n plain: { root: 'text-[var(--c-text)] underline-offset-4 hover:underline' },\n}\n\n/** 高さは 8px グリッドに乗せる。32 / 40 / 48px（AC-01-2）。 */\nconst size: VariantMap<NoviSize, { root: string }> = {\n sm: { root: 'h-8 px-3 text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-10 px-4 text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-12 px-5 text-[length:var(--novi-text-base)]' },\n}\n\n/** Raster では md / lg も 2px に潰れる（ADR-R1）。API は語彙どおり受け付ける。 */\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Button のスタイル定義。\n *\n * `tv({ extend: buttonStyles })` で拡張できるよう named export する。\n * npm 配布の「コードを所有できない」という不満への回答（FR-04）。\n *\n * slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。\n * `base` は黙って無視される。\n *\n * @example\n * import { buttonStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myButton = tv({\n * extend: buttonStyles,\n * slots: { root: 'uppercase tracking-widest' },\n * })\n */\nexport const buttonStyles = tv({\n slots,\n variants: { color, variant, size, radius },\n defaultVariants: { color: 'default', variant: 'solid', size: 'md', radius: '
|
|
1
|
+
{"version":3,"file":"button.styles.mjs","names":[],"sources":["../../src/button/button.styles.ts"],"sourcesContent":["import type {\n buttonRequiredSlots,\n buttonSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる。\n// satisfies なら契約を検査しつつ、実際に定義した slot の情報が保たれる。\nconst slots = {\n root: [\n 'inline-flex items-center justify-center gap-2',\n 'font-medium whitespace-nowrap select-none',\n 'border border-transparent',\n 'transition-[background-color,border-color,color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n label: 'truncate',\n startContent: 'shrink-0 inline-flex',\n endContent: 'shrink-0 inline-flex',\n spinner: 'shrink-0 inline-flex',\n} satisfies SlotMap<typeof buttonSlots, (typeof buttonRequiredSlots)[number]>\n\n/**\n * 色は「役割ごとのローカル変数」に落としてから variant が参照する。\n * こうしないと variant 5 × color 6 = 30 通りの組み合わせを書くことになる。\n *\n * - `--c` 面の色（solid の背景）\n * - `--c-fg` その面に乗る文字色\n * - `--c-text` 面を持たない variant での文字色\n * - `--c-line` 境界線の色\n */\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: {\n root: [\n '[--c:var(--novi-color-default)]',\n '[--c-fg:var(--novi-color-default-fg)]',\n '[--c-text:var(--novi-color-fg)]',\n '[--c-line:var(--novi-color-border-strong)]',\n ].join(' '),\n },\n primary: {\n root: [\n '[--c:var(--novi-color-primary)]',\n '[--c-fg:var(--novi-color-primary-fg)]',\n '[--c-text:var(--novi-color-primary)]',\n '[--c-line:var(--novi-color-primary)]',\n ].join(' '),\n },\n secondary: {\n root: [\n '[--c:var(--novi-color-secondary)]',\n '[--c-fg:var(--novi-color-secondary-fg)]',\n '[--c-text:var(--novi-color-secondary)]',\n '[--c-line:var(--novi-color-secondary)]',\n ].join(' '),\n },\n success: {\n root: [\n '[--c:var(--novi-color-success)]',\n '[--c-fg:var(--novi-color-success-fg)]',\n '[--c-text:var(--novi-color-success)]',\n '[--c-line:var(--novi-color-success)]',\n ].join(' '),\n },\n warning: {\n root: [\n '[--c:var(--novi-color-warning)]',\n '[--c-fg:var(--novi-color-warning-fg)]',\n '[--c-text:var(--novi-color-warning)]',\n '[--c-line:var(--novi-color-warning)]',\n ].join(' '),\n },\n danger: {\n root: [\n '[--c:var(--novi-color-danger)]',\n '[--c-fg:var(--novi-color-danger-fg)]',\n '[--c-text:var(--novi-color-danger)]',\n '[--c-line:var(--novi-color-danger)]',\n ].join(' '),\n },\n}\n\n/** 語彙の実装漏れ・語彙外の追加はここでコンパイルエラーになる（AC-02-2）。 */\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--c)] text-[var(--c-fg)] hover:opacity-90' },\n outline: {\n root: 'border-[var(--c-line)] text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]',\n },\n soft: { root: 'bg-[var(--novi-color-subtle)] text-[var(--c-text)] hover:brightness-95' },\n ghost: { root: 'text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]' },\n plain: { root: 'text-[var(--c-text)] underline-offset-4 hover:underline' },\n}\n\n/** 高さは 8px グリッドに乗せる。32 / 40 / 48px（AC-01-2）。 */\nconst size: VariantMap<NoviSize, { root: string }> = {\n sm: { root: 'h-8 px-3 text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-10 px-4 text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-12 px-5 text-[length:var(--novi-text-base)]' },\n}\n\n/** Raster では md / lg も 2px に潰れる（ADR-R1）。API は語彙どおり受け付ける。 */\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Button のスタイル定義。\n *\n * `tv({ extend: buttonStyles })` で拡張できるよう named export する。\n * npm 配布の「コードを所有できない」という不満への回答（FR-04）。\n *\n * slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。\n * `base` は黙って無視される。\n *\n * @example\n * import { buttonStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myButton = tv({\n * extend: buttonStyles,\n * slots: { root: 'uppercase tracking-widest' },\n * })\n */\nexport const buttonStyles = tv({\n slots,\n variants: { color, variant, size, radius },\n defaultVariants: { color: 'default', variant: 'solid', size: 'md', radius: 'md' },\n})\n\nexport type ButtonStyleProps = Parameters<typeof buttonStyles>[0]\n"],"mappings":";;;AAiBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,cAAc;CACd,YAAY;CACZ,SAAS;AACX;;;;;;;;;;AAWA,MAAM,QAAiD;CACrD,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,WAAW,EACT,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,QAAQ,EACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;AACF;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;EAAO;GA7CnB,OAAO,EAAE,MAAM,oDAAoD;GACnE,SAAS,EACP,MAAM,kFACR;GACA,MAAM,EAAE,MAAM,yEAAyE;GACvF,OAAO,EAAE,MAAM,2DAA2D;GAC1E,OAAO,EAAE,MAAM,0DAA0D;EAuCtD;EAAS;GAlC5B,IAAI,EAAE,MAAM,6CAA6C;GACzD,IAAI,EAAE,MAAM,gDAAgD;GAC5D,IAAI,EAAE,MAAM,gDAAgD;EAgChC;EAAM;GA3BlC,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAuBhB;CAAO;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAS,MAAM;EAAM,QAAQ;CAAK;AAClF,CAAC"}
|
|
@@ -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<"
|
|
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<"
|
|
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<"
|
|
51
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
52
52
|
root: string;
|
|
53
53
|
}>;
|
|
54
54
|
isPressable: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.mjs","names":[],"sources":["../../src/card/card.styles.ts"],"sourcesContent":["import type {\n cardRequiredSlots,\n cardSlots,\n NoviRadius,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // 影は使わない。面の区切りは 1px の境界線だけで表す\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex flex-col',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border)]',\n 'shadow-none',\n 'overflow-hidden',\n ].join(' '),\n // header と footer は境界線で仕切る。背景色を変えて面を増やさない\n header: 'px-4 py-3 border-b border-[var(--novi-color-border)]',\n body: 'px-4 py-4 flex-1',\n footer: 'px-4 py-3 border-t border-[var(--novi-color-border)]',\n image: 'w-full object-cover',\n} satisfies SlotMap<typeof cardSlots, (typeof cardRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n outline: { root: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { root: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: { root: 'bg-transparent border-transparent' },\n plain: { root: 'bg-transparent border-transparent' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Card のスタイル定義。\n *\n * @example\n * const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })\n */\nexport const cardStyles = tv({\n slots,\n variants: {\n variant,\n radius,\n isPressable: {\n true: {\n root: [\n 'text-left cursor-pointer',\n 'transition-[border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'hover:border-[var(--novi-color-border-strong)]',\n focusRing,\n disabledState,\n ].join(' '),\n },\n false: {},\n },\n },\n defaultVariants: { variant: 'outline', radius: '
|
|
1
|
+
{"version":3,"file":"card.styles.mjs","names":[],"sources":["../../src/card/card.styles.ts"],"sourcesContent":["import type {\n cardRequiredSlots,\n cardSlots,\n NoviRadius,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // 影は使わない。面の区切りは 1px の境界線だけで表す\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex flex-col',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border)]',\n 'shadow-none',\n 'overflow-hidden',\n ].join(' '),\n // header と footer は境界線で仕切る。背景色を変えて面を増やさない\n header: 'px-4 py-3 border-b border-[var(--novi-color-border)]',\n body: 'px-4 py-4 flex-1',\n footer: 'px-4 py-3 border-t border-[var(--novi-color-border)]',\n image: 'w-full object-cover',\n} satisfies SlotMap<typeof cardSlots, (typeof cardRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n outline: { root: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { root: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: { root: 'bg-transparent border-transparent' },\n plain: { root: 'bg-transparent border-transparent' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Card のスタイル定義。\n *\n * @example\n * const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })\n */\nexport const cardStyles = tv({\n slots,\n variants: {\n variant,\n radius,\n isPressable: {\n true: {\n root: [\n 'text-left cursor-pointer',\n 'transition-[border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'hover:border-[var(--novi-color-border-strong)]',\n focusRing,\n disabledState,\n ].join(' '),\n },\n false: {},\n },\n },\n defaultVariants: { variant: 'outline', radius: 'lg', isPressable: false },\n})\n\nexport type CardStyleProps = Parameters<typeof cardStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CAEZ,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,OAAO;AACT;;;;;;;AAwBA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EACR;GAxBF,OAAO,EAAE,MAAM,kEAAkE;GACjF,SAAS,EAAE,MAAM,qEAAqE;GACtF,MAAM,EAAE,MAAM,mDAAmD;GACjE,OAAO,EAAE,MAAM,oCAAoC;GACnD,OAAO,EAAE,MAAM,oCAAoC;EAoBjD;EACA;GAjBF,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAahD;EACA,aAAa;GACX,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG,EACZ;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,QAAQ;EAAM,aAAa;CAAM;AAC1E,CAAC"}
|
|
@@ -10,7 +10,7 @@ const slots = {
|
|
|
10
10
|
control: [
|
|
11
11
|
"shrink-0 inline-grid place-items-center",
|
|
12
12
|
"border border-[var(--novi-color-border-strong)]",
|
|
13
|
-
"rounded-[var(--novi-radius-
|
|
13
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
14
14
|
"bg-[var(--novi-color-bg)]",
|
|
15
15
|
"transition-[background-color,border-color]",
|
|
16
16
|
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.styles.mjs","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import type {\n checkboxGroupRequiredSlots,\n checkboxGroupSlots,\n checkboxRequiredSlots,\n checkboxSlots,\n NoviColor,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n root: ['inline-flex items-start gap-2', 'cursor-pointer', disabledState].join(' '),\n // 角丸 0 の四角。円にしない\n control: [\n 'shrink-0 inline-grid place-items-center',\n 'border border-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-
|
|
1
|
+
{"version":3,"file":"checkbox.styles.mjs","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import type {\n checkboxGroupRequiredSlots,\n checkboxGroupSlots,\n checkboxRequiredSlots,\n checkboxSlots,\n NoviColor,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n root: ['inline-flex items-start gap-2', 'cursor-pointer', disabledState].join(' '),\n // 角丸 0 の四角。円にしない\n control: [\n 'shrink-0 inline-grid place-items-center',\n 'border border-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'bg-[var(--novi-color-bg)]',\n 'transition-[background-color,border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]',\n 'group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:border-[var(--c)]',\n 'group-data-[invalid]:border-[var(--novi-color-danger)]',\n focusRing,\n ].join(' '),\n indicator: 'text-[var(--c-fg)] pointer-events-none',\n label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof checkboxSlots, (typeof checkboxRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: {\n root: '[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]',\n },\n primary: {\n root: '[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]',\n },\n secondary: {\n root: '[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]',\n },\n success: {\n root: '[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]',\n },\n warning: {\n root: '[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]',\n },\n danger: {\n root: '[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]',\n },\n}\n\n/** 16 / 20 / 24px。いずれも実効タップ領域は root 側の余白で 24px 以上を確保する。 */\nconst size: VariantMap<NoviSize, { control: string; label: string }> = {\n sm: { control: 'size-4', label: 'text-[length:var(--novi-text-sm)]' },\n md: { control: 'size-5', label: 'text-[length:var(--novi-text-base)]' },\n lg: { control: 'size-6', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Checkbox のスタイル定義。\n *\n * @example\n * import { checkboxStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })\n */\nexport const checkboxStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n root: 'flex flex-col gap-2',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n list: 'flex flex-col gap-2',\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} satisfies SlotMap<typeof checkboxGroupSlots, (typeof checkboxGroupRequiredSlots)[number]>\n\n/**\n * CheckboxGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const checkboxGroupStyles = tv({\n slots: groupSlots,\n variants: {\n orientation: {\n vertical: { list: 'flex-col gap-2' },\n horizontal: { list: 'flex-row gap-4 flex-wrap' },\n },\n },\n defaultVariants: { orientation: 'vertical' },\n})\n\nexport type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0]\nexport type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0]\n"],"mappings":";;;AAaA,MAAM,QAAQ;CACZ,MAAM;EAAC;EAAiC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAEjF,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,OAAO;CACP,aAAa;AACf;;;;;;;;;;AAuCA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAtCZ,SAAS,EACP,MAAM,2DACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,WAAW,EACT,MAAM,4EACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,QAAQ,EACN,MAAM,sEACR;EAqBY;EAAO;GAhBnB,IAAI;IAAE,SAAS;IAAU,OAAO;GAAoC;GACpE,IAAI;IAAE,SAAS;IAAU,OAAO;GAAsC;GACtE,IAAI;IAAE,SAAS;IAAU,OAAO;GAAsC;EAcnD;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;;;;;;;AAgBD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EAdP,MAAM;EACN,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;CAUP;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,iBAAiB;EACnC,YAAY,EAAE,MAAM,2BAA2B;CACjD,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}
|
|
@@ -22,7 +22,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
|
|
|
22
22
|
inputWrapper: string;
|
|
23
23
|
input: string;
|
|
24
24
|
}>;
|
|
25
|
-
radius: VariantMap<"
|
|
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<"
|
|
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<"
|
|
65
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
66
66
|
inputWrapper: string;
|
|
67
67
|
}>;
|
|
68
68
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.styles.mjs","names":[],"sources":["../../src/input/input.styles.ts"],"sourcesContent":["import type {\n inputRequiredSlots,\n inputSlots,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n// 型注釈ではなく satisfies（ADR-R5）。任意 slot が呼べなくなるのを防ぐ。\nconst slots = {\n root: 'flex flex-col gap-1.5',\n // ラベルは常に上・左揃え。プレースホルダをラベル代わりにしない\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n // RAC の Group を使う。Group は data-focus-visible / data-invalid を出すので、\n // Button と同じ focusRing 定義がそのまま使える（属性名を書き換える必要がない）。\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center gap-2 w-full',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'transition-[border-color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:border-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n input: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n ].join(' '),\n startContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n endContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof inputSlots, (typeof inputRequiredSlots)[number]>\n\n/**\n * core の語彙定義（solid=塗りつぶしで最も強い / soft=淡い背景で境界線なし）に従って\n * 5つを視覚的に区別する。同じクラスを生む variant があると\n * 「テーマを切り替えても API が同じ」という約束が形だけになる。\n */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n // 面 + 境界線。最も重い\n solid: {\n inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n },\n // 境界線のみ。背景は地のまま\n outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n // 淡い面のみ。境界線なし\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n // 下線だけ。表を詰めて並べるときに面を増やさない\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n // 完全に無装飾。インライン編集などで使う\n plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button と揃える。32 / 40 / 48px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n sm: { inputWrapper: 'h-8 px-2.5', input: 'text-[length:var(--novi-text-sm)]' },\n md: { inputWrapper: 'h-10 px-3', input: 'text-[length:var(--novi-text-base)]' },\n lg: { inputWrapper: 'h-12 px-3.5', input: 'text-[length:var(--novi-text-base)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Input のスタイル定義。\n *\n * 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。\n *\n * @example\n * import { inputStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myInput = tv({\n * extend: inputStyles,\n * slots: { inputWrapper: 'font-mono' },\n * })\n */\nexport const inputStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: '
|
|
1
|
+
{"version":3,"file":"input.styles.mjs","names":[],"sources":["../../src/input/input.styles.ts"],"sourcesContent":["import type {\n inputRequiredSlots,\n inputSlots,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n// 型注釈ではなく satisfies（ADR-R5）。任意 slot が呼べなくなるのを防ぐ。\nconst slots = {\n root: 'flex flex-col gap-1.5',\n // ラベルは常に上・左揃え。プレースホルダをラベル代わりにしない\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n // RAC の Group を使う。Group は data-focus-visible / data-invalid を出すので、\n // Button と同じ focusRing 定義がそのまま使える（属性名を書き換える必要がない）。\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center gap-2 w-full',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'transition-[border-color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:border-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n input: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n ].join(' '),\n startContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n endContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof inputSlots, (typeof inputRequiredSlots)[number]>\n\n/**\n * core の語彙定義（solid=塗りつぶしで最も強い / soft=淡い背景で境界線なし）に従って\n * 5つを視覚的に区別する。同じクラスを生む variant があると\n * 「テーマを切り替えても API が同じ」という約束が形だけになる。\n */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n // 面 + 境界線。最も重い\n solid: {\n inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n },\n // 境界線のみ。背景は地のまま\n outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n // 淡い面のみ。境界線なし\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n // 下線だけ。表を詰めて並べるときに面を増やさない\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n // 完全に無装飾。インライン編集などで使う\n plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button と揃える。32 / 40 / 48px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n sm: { inputWrapper: 'h-8 px-2.5', input: 'text-[length:var(--novi-text-sm)]' },\n md: { inputWrapper: 'h-10 px-3', input: 'text-[length:var(--novi-text-base)]' },\n lg: { inputWrapper: 'h-12 px-3.5', input: 'text-[length:var(--novi-text-base)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Input のスタイル定義。\n *\n * 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。\n *\n * @example\n * import { inputStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myInput = tv({\n * extend: inputStyles,\n * slots: { inputWrapper: 'font-mono' },\n * })\n */\nexport const inputStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type InputStyleProps = Parameters<typeof inputStyles>[0]\n"],"mappings":";;;AAaA,MAAM,QAAQ;CACZ,MAAM;CAEN,OAAO;CAGP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,cAAc;CACd,YAAY;CACZ,aAAa;CAEb,cAAc;AAChB;;;;;;;;;;;;;;;AAqDA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA9CZ,OAAO,EACL,cAAc,yEAChB;GAEA,SAAS,EAAE,cAAc,qEAAqE;GAE9F,MAAM,EAAE,cAAc,mDAAmD;GAEzE,OAAO,EACL,cAAc,+EAChB;GAEA,OAAO,EAAE,cAAc,oCAAoC;EAkC/C;EAAS;GA7BrB,IAAI;IAAE,cAAc;IAAc,OAAO;GAAoC;GAC7E,IAAI;IAAE,cAAc;IAAa,OAAO;GAAsC;GAC9E,IAAI;IAAE,cAAc;IAAe,OAAO;GAAsC;EA2B3D;EAAM;GAvB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAmB/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
9
9
|
[key: string]: {
|
|
10
10
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
11
|
-
list?: import("tailwind-variants").ClassValue;
|
|
12
11
|
item?: import("tailwind-variants").ClassValue;
|
|
13
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
14
12
|
trigger?: import("tailwind-variants").ClassValue;
|
|
13
|
+
list?: import("tailwind-variants").ClassValue;
|
|
14
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
15
15
|
popover?: import("tailwind-variants").ClassValue;
|
|
16
16
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
17
17
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
@@ -23,10 +23,10 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
} | {
|
|
24
24
|
[x: string]: {
|
|
25
25
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
26
|
-
list?: import("tailwind-variants").ClassValue;
|
|
27
26
|
item?: import("tailwind-variants").ClassValue;
|
|
28
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
29
27
|
trigger?: import("tailwind-variants").ClassValue;
|
|
28
|
+
list?: import("tailwind-variants").ClassValue;
|
|
29
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
30
30
|
popover?: import("tailwind-variants").ClassValue;
|
|
31
31
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
32
32
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
@@ -49,10 +49,10 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
49
49
|
}, undefined, {
|
|
50
50
|
[key: string]: {
|
|
51
51
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
52
|
-
list?: import("tailwind-variants").ClassValue;
|
|
53
52
|
item?: import("tailwind-variants").ClassValue;
|
|
54
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
55
53
|
trigger?: import("tailwind-variants").ClassValue;
|
|
54
|
+
list?: import("tailwind-variants").ClassValue;
|
|
55
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
56
56
|
popover?: import("tailwind-variants").ClassValue;
|
|
57
57
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
58
58
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
@@ -7,8 +7,8 @@ const slots = {
|
|
|
7
7
|
"min-w-40 outline-none",
|
|
8
8
|
"bg-[var(--novi-color-bg)]",
|
|
9
9
|
"border border-[var(--novi-color-border-strong)]",
|
|
10
|
-
"rounded-[var(--novi-radius-
|
|
11
|
-
"shadow-
|
|
10
|
+
"rounded-[var(--novi-radius-lg)]",
|
|
11
|
+
"shadow-[var(--novi-shadow-md)]",
|
|
12
12
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
13
13
|
].join(" "),
|
|
14
14
|
list: "outline-none p-1 flex flex-col",
|
|
@@ -16,7 +16,7 @@ const slots = {
|
|
|
16
16
|
"flex items-center gap-3 justify-between",
|
|
17
17
|
"px-2 py-1.5 cursor-pointer outline-none",
|
|
18
18
|
"text-[var(--novi-color-fg)]",
|
|
19
|
-
"rounded-[var(--novi-radius-
|
|
19
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
20
20
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
21
21
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-default"
|
|
22
22
|
].join(" "),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.styles.mjs","names":[],"sources":["../../src/menu/menu.styles.ts"],"sourcesContent":["import type { menuRequiredSlots, menuSlots, SlotMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n trigger: 'outline-none',\n popover: [\n 'text-[var(--novi-color-fg)]',\n 'min-w-40 outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-
|
|
1
|
+
{"version":3,"file":"menu.styles.mjs","names":[],"sources":["../../src/menu/menu.styles.ts"],"sourcesContent":["import type { menuRequiredSlots, menuSlots, SlotMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n trigger: 'outline-none',\n popover: [\n 'text-[var(--novi-color-fg)]',\n 'min-w-40 outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n list: 'outline-none p-1 flex flex-col',\n item: [\n 'flex items-center gap-3 justify-between',\n 'px-2 py-1.5 cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'data-[focused]:bg-[var(--novi-color-subtle)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n ].join(' '),\n itemLabel: 'truncate',\n itemDescription: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n // ショートカットは桁を揃える。等幅数字にしないと縦の線が揃わない\n itemShortcut:\n 'shrink-0 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tabular-nums',\n separator: 'my-1 h-px bg-[var(--novi-color-border)]',\n section: 'flex flex-col',\n sectionLabel:\n 'px-2 pt-2 pb-1 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tracking-wide',\n} satisfies SlotMap<typeof menuSlots, (typeof menuRequiredSlots)[number]>\n\n/**\n * Menu のスタイル定義。\n *\n * @example\n * const myMenu = tv({ extend: menuStyles, slots: { popover: 'min-w-56' } })\n */\nexport const menuStyles = tv({ slots })\n\nexport type MenuStyleProps = Parameters<typeof menuStyles>[0]\n"],"mappings":";;AAGA,MAAM,QAAQ;CACZ,SAAS;CACT,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,iBAAiB;CAEjB,cACE;CACF,WAAW;CACX,SAAS;CACT,cACE;AACJ;;;;;;;AAQA,MAAa,aAAa,GAAG,EAAE,MAAM,CAAC"}
|
|
@@ -10,7 +10,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
11
11
|
panel: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
panel: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -25,7 +25,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
25
25
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
26
26
|
panel: string;
|
|
27
27
|
}>;
|
|
28
|
-
radius: VariantMap<"
|
|
28
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
29
29
|
panel: string;
|
|
30
30
|
}>;
|
|
31
31
|
}, {
|
|
@@ -40,7 +40,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
40
40
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
41
41
|
panel: string;
|
|
42
42
|
}>;
|
|
43
|
-
radius: VariantMap<"
|
|
43
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
44
44
|
panel: string;
|
|
45
45
|
}>;
|
|
46
46
|
}, {
|
|
@@ -17,7 +17,7 @@ const slots = {
|
|
|
17
17
|
"w-full outline-none",
|
|
18
18
|
"bg-[var(--novi-color-bg)]",
|
|
19
19
|
"border border-[var(--novi-color-border-strong)]",
|
|
20
|
-
"shadow-
|
|
20
|
+
"shadow-[var(--novi-shadow-lg)]",
|
|
21
21
|
"max-h-[calc(100dvh-2rem)] overflow-auto"
|
|
22
22
|
].join(" "),
|
|
23
23
|
header: [
|
|
@@ -60,7 +60,7 @@ const modalStyles = tv({
|
|
|
60
60
|
},
|
|
61
61
|
defaultVariants: {
|
|
62
62
|
size: "md",
|
|
63
|
-
radius: "
|
|
63
|
+
radius: "lg"
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
66
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type {\n modalRequiredSlots,\n modalSlots,\n NoviRadius,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Modal は **中央配置・閉じるボタンはヘッダー右上**（architecture.md §5 テーマA）。\n *\n * 影を使わないので、階層は backdrop の暗転と 1px の境界線だけで作る。\n */\nconst slots = {\n backdrop: [\n 'fixed inset-0 z-50 grid place-items-center p-4',\n 'bg-[var(--novi-color-overlay)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n panel: [\n 'text-[var(--novi-color-fg)]',\n 'w-full outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-
|
|
1
|
+
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type {\n modalRequiredSlots,\n modalSlots,\n NoviRadius,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Modal は **中央配置・閉じるボタンはヘッダー右上**（architecture.md §5 テーマA）。\n *\n * 影を使わないので、階層は backdrop の暗転と 1px の境界線だけで作る。\n */\nconst slots = {\n backdrop: [\n 'fixed inset-0 z-50 grid place-items-center p-4',\n 'bg-[var(--novi-color-overlay)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n panel: [\n 'text-[var(--novi-color-fg)]',\n 'w-full outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'max-h-[calc(100dvh-2rem)] overflow-auto',\n ].join(' '),\n // 見出しと閉じるを同じ行に置く。情報の階層を横方向で作る\n header: [\n 'flex items-baseline justify-between gap-4',\n 'px-6 pt-5 pb-4',\n 'border-b border-[var(--novi-color-border)]',\n ].join(' '),\n title: 'text-[length:var(--novi-text-lg)] font-medium tracking-tight text-[var(--novi-color-fg)]',\n closeButton: [\n 'shrink-0 grid place-items-center size-8 -mr-2',\n 'text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]',\n 'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n ].join(' '),\n body: 'px-6 py-5 text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n footer: ['flex justify-end gap-2 px-6 py-4', 'border-t border-[var(--novi-color-border)]'].join(\n ' ',\n ),\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize | 'full', { panel: string }> = {\n sm: { panel: 'max-w-sm' },\n md: { panel: 'max-w-md' },\n lg: { panel: 'max-w-lg' },\n full: { panel: 'max-w-none h-[calc(100dvh-2rem)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { panel: string }> = {\n none: { panel: 'rounded-[var(--novi-radius-none)]' },\n sm: { panel: 'rounded-[var(--novi-radius-sm)]' },\n md: { panel: 'rounded-[var(--novi-radius-md)]' },\n lg: { panel: 'rounded-[var(--novi-radius-lg)]' },\n full: { panel: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * const myModal = tv({ extend: modalStyles, slots: { panel: 'border-2' } })\n */\nexport const modalStyles = tv({\n slots,\n variants: { size, radius },\n defaultVariants: { size: 'md', radius: 'lg' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n"],"mappings":";;;;;;;;AAgBA,MAAM,QAAQ;CACZ,UAAU;EACR;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;EACN;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;EACX;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,QAAQ,CAAC,oCAAoC,4CAA4C,CAAC,CAAC,KACzF,GACF;AACF;;;;;;;AAuBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAtBZ,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,WAAW;GACxB,MAAM,EAAE,OAAO,mCAAmC;EAmBtC;EAAM;GAflB,MAAM,EAAE,OAAO,oCAAoC;GACnD,IAAI,EAAE,OAAO,kCAAkC;GAC/C,IAAI,EAAE,OAAO,kCAAkC;GAC/C,IAAI,EAAE,OAAO,kCAAkC;GAC/C,MAAM,EAAE,OAAO,oCAAoC;EAWjC;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAK;AAC9C,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
7
7
|
* const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })
|
|
8
8
|
*/
|
|
9
9
|
declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
-
radius: VariantMap<"
|
|
10
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
@@ -15,7 +15,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
15
15
|
arrow: string;
|
|
16
16
|
content: string;
|
|
17
17
|
}, undefined, {
|
|
18
|
-
radius: VariantMap<"
|
|
18
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
19
19
|
root: string;
|
|
20
20
|
}>;
|
|
21
21
|
}, {
|
|
@@ -23,7 +23,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
arrow: string;
|
|
24
24
|
content: string;
|
|
25
25
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
26
|
-
radius: VariantMap<"
|
|
26
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
27
27
|
root: string;
|
|
28
28
|
}>;
|
|
29
29
|
}, {
|