@novi-ui/raster 0.4.1 → 0.6.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/LICENSE +21 -0
- package/README.md +3 -0
- package/dist/accordion/accordion.styles.d.mts.map +1 -1
- package/dist/accordion/accordion.styles.mjs +12 -9
- package/dist/accordion/accordion.styles.mjs.map +1 -1
- package/dist/avatar/avatar.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts +3 -3
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.mjs +4 -4
- package/dist/button/button.styles.mjs.map +1 -1
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/card/card.styles.d.mts.map +1 -1
- package/dist/card/card.styles.mjs +8 -3
- package/dist/card/card.styles.mjs.map +1 -1
- package/dist/checkbox/checkbox.styles.d.mts.map +1 -1
- package/dist/checkbox/checkbox.styles.mjs +5 -5
- package/dist/checkbox/checkbox.styles.mjs.map +1 -1
- package/dist/color-picker/color-picker.styles.d.mts.map +1 -1
- package/dist/color-picker/color-picker.styles.mjs +2 -2
- package/dist/color-picker/color-picker.styles.mjs.map +1 -1
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/input/input.styles.d.mts.map +1 -1
- package/dist/input/input.styles.mjs +4 -4
- package/dist/input/input.styles.mjs.map +1 -1
- package/dist/menu/menu.styles.d.mts.map +1 -1
- package/dist/menu/menu.styles.mjs +4 -4
- package/dist/menu/menu.styles.mjs.map +1 -1
- package/dist/modal/modal.styles.d.mts +3 -3
- package/dist/modal/modal.styles.d.mts.map +1 -1
- package/dist/modal/modal.styles.mjs +15 -6
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/popover/popover.styles.d.mts.map +1 -1
- package/dist/popover/popover.styles.mjs +2 -2
- package/dist/popover/popover.styles.mjs.map +1 -1
- package/dist/progress/progress.mjs +1 -1
- package/dist/progress/progress.mjs.map +1 -1
- package/dist/progress/progress.styles.d.mts.map +1 -1
- package/dist/progress/progress.styles.mjs +1 -1
- package/dist/progress/progress.styles.mjs.map +1 -1
- package/dist/radio/radio.styles.d.mts.map +1 -1
- package/dist/radio/radio.styles.mjs +5 -5
- package/dist/radio/radio.styles.mjs.map +1 -1
- package/dist/raster.css +16 -0
- package/dist/raster.scoped.css +16 -0
- package/dist/select/select.styles.d.mts +3 -3
- package/dist/select/select.styles.d.mts.map +1 -1
- package/dist/select/select.styles.mjs +6 -6
- package/dist/select/select.styles.mjs.map +1 -1
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/spinner/spinner.styles.mjs +1 -1
- package/dist/spinner/spinner.styles.mjs.map +1 -1
- package/dist/switch/switch.styles.d.mts.map +1 -1
- package/dist/switch/switch.styles.mjs +1 -1
- package/dist/switch/switch.styles.mjs.map +1 -1
- package/dist/tabs/tabs.styles.d.mts.map +1 -1
- package/dist/tabs/tabs.styles.mjs +5 -5
- package/dist/tabs/tabs.styles.mjs.map +1 -1
- package/dist/textarea/textarea.styles.d.mts +3 -3
- package/dist/textarea/textarea.styles.d.mts.map +1 -1
- package/dist/textarea/textarea.styles.mjs +3 -3
- package/dist/textarea/textarea.styles.mjs.map +1 -1
- package/dist/toast/toast.styles.d.mts +3 -3
- package/dist/toast/toast.styles.d.mts.map +1 -1
- package/dist/toast/toast.styles.mjs +3 -2
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +5 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 yuuto22009911-hash
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -9,6 +9,9 @@ Novi UI のテーマ1。**ミニマル / スイス系。**
|
|
|
9
9
|
pnpm add @novi-ui/raster @novi-ui/core react-aria-components
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
+
> **Tailwind CSS v4 が必要です。** テーマの CSS はトークン定義だけで、コンポーネントのクラスは利用側の Tailwind が生成します。
|
|
13
|
+
> `globals.css` に `@source "../node_modules/@novi-ui/raster/dist";` を足してください（パスは CSS ファイルからの相対）。
|
|
14
|
+
|
|
12
15
|
```tsx
|
|
13
16
|
import '@novi-ui/core/base.css'
|
|
14
17
|
import '@novi-ui/raster/raster.css'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.styles.d.mts","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"accordion.styles.d.mts","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"mappings":";;;;;;;;cAyEa,6CAAe;;IArBgB;IAAe;;;IAVZ;IAAc;;;;;;;;;;;IAUjB;IAAe;;;IAVZ;IAAc;;;;;;;;;;;IAUjB;IAAe;;;IAVZ;IAAc;;;;;;;;;;KAqCjD,sBAAsB,kBAAkB"}
|
|
@@ -10,16 +10,19 @@ const slots = {
|
|
|
10
10
|
item: "border-b border-[var(--novi-color-border)]",
|
|
11
11
|
heading: "m-0",
|
|
12
12
|
trigger: [
|
|
13
|
-
"flex items-center justify-between gap-
|
|
13
|
+
"flex items-center justify-between gap-[var(--novi-gap-inline)] w-full text-left",
|
|
14
|
+
"py-[var(--novi-pad-surface-y)]",
|
|
14
15
|
"cursor-pointer outline-none",
|
|
15
16
|
"text-[var(--novi-color-fg)]",
|
|
17
|
+
"font-[family-name:var(--novi-font-heading)]",
|
|
18
|
+
"tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]",
|
|
16
19
|
"transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
17
20
|
"hover:bg-[var(--novi-color-subtle)]",
|
|
18
21
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
|
|
19
22
|
focusRing
|
|
20
23
|
].join(" "),
|
|
21
24
|
indicator: "shrink-0 text-[var(--novi-color-muted)]",
|
|
22
|
-
panel: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"
|
|
25
|
+
panel: ["pb-[var(--novi-pad-surface-y)]", "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"].join(" ")
|
|
23
26
|
};
|
|
24
27
|
/**
|
|
25
28
|
* Accordion のスタイル定義。
|
|
@@ -32,16 +35,16 @@ const accordionStyles = tv({
|
|
|
32
35
|
variants: {
|
|
33
36
|
size: {
|
|
34
37
|
sm: {
|
|
35
|
-
trigger: "px-
|
|
36
|
-
panel: "px-
|
|
38
|
+
trigger: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
|
|
39
|
+
panel: "px-[var(--novi-pad-control-x-sm)]"
|
|
37
40
|
},
|
|
38
41
|
md: {
|
|
39
|
-
trigger: "px-
|
|
40
|
-
panel: "px-
|
|
42
|
+
trigger: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]",
|
|
43
|
+
panel: "px-[var(--novi-pad-control-x-md)]"
|
|
41
44
|
},
|
|
42
45
|
lg: {
|
|
43
|
-
trigger: "px-
|
|
44
|
-
panel: "px-
|
|
46
|
+
trigger: "px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]",
|
|
47
|
+
panel: "px-[var(--novi-pad-control-x-lg)]"
|
|
45
48
|
}
|
|
46
49
|
},
|
|
47
50
|
variant: {
|
|
@@ -62,7 +65,7 @@ const accordionStyles = tv({
|
|
|
62
65
|
item: "border-b border-[var(--novi-color-border)]"
|
|
63
66
|
},
|
|
64
67
|
plain: {
|
|
65
|
-
root: "border-t-0 gap-
|
|
68
|
+
root: "border-t-0 gap-[var(--novi-gap-stack)]",
|
|
66
69
|
item: "border-b-0"
|
|
67
70
|
}
|
|
68
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.styles.mjs","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"sourcesContent":["import type {\n accordionRequiredSlots,\n accordionSlots,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * インジケータは `+` と `−` の線で示す。\n * 三角矢印を回転させる表現は Raster の「動きで飾らない」原則に反するため使わない。\n */\nconst slots = {\n root: 'flex flex-col border-t border-[var(--novi-color-border)]',\n item: 'border-b border-[var(--novi-color-border)]',\n // 見出し要素とその中のボタンを分ける。支援技術のために必要\n heading: 'm-0',\n trigger: [\n 'flex items-center justify-between gap-
|
|
1
|
+
{"version":3,"file":"accordion.styles.mjs","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"sourcesContent":["import type {\n accordionRequiredSlots,\n accordionSlots,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * インジケータは `+` と `−` の線で示す。\n * 三角矢印を回転させる表現は Raster の「動きで飾らない」原則に反するため使わない。\n */\nconst slots = {\n root: 'flex flex-col border-t border-[var(--novi-color-border)]',\n item: 'border-b border-[var(--novi-color-border)]',\n // 見出し要素とその中のボタンを分ける。支援技術のために必要\n heading: 'm-0',\n // 行の縦余白は面の縦余白と同じ。アコーディオンの1行は Card の header と同じ役目の面で、\n // size で変えるのは横のインセットと文字サイズだけにする\n trigger: [\n 'flex items-center justify-between gap-[var(--novi-gap-inline)] w-full text-left',\n 'py-[var(--novi-pad-surface-y)]',\n 'cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n 'font-[family-name:var(--novi-font-heading)]',\n 'tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]',\n 'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'hover:bg-[var(--novi-color-subtle)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n focusRing,\n ].join(' '),\n indicator: 'shrink-0 text-[var(--novi-color-muted)]',\n // 上の余白は trigger の下余白が兼ねる。下だけ自分で持つ\n panel: [\n 'pb-[var(--novi-pad-surface-y)]',\n 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n ].join(' '),\n} satisfies SlotMap<typeof accordionSlots, (typeof accordionRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { root: string; item: string }> = {\n solid: { root: 'border-t-0 gap-1', item: 'bg-[var(--novi-color-subtle)] border-b-0' },\n outline: { root: 'border-t border-[var(--novi-color-border)]', item: 'border-b' },\n soft: { root: 'border-t-0 gap-1', item: 'bg-[var(--novi-color-subtle)] border-b-0' },\n ghost: { root: 'border-t-0', item: 'border-b border-[var(--novi-color-border)]' },\n // 境界線を持たない plain は、項目の切れ目を余白だけで示す必要がある\n plain: { root: 'border-t-0 gap-[var(--novi-gap-stack)]', item: 'border-b-0' },\n}\n\n/** trigger と panel の左右は必ず同じ値にする。ズレると開閉で文字の左端が動く。 */\nconst size: VariantMap<NoviSize, { trigger: string; panel: string }> = {\n sm: {\n trigger: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n panel: 'px-[var(--novi-pad-control-x-sm)]',\n },\n md: {\n trigger: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n panel: 'px-[var(--novi-pad-control-x-md)]',\n },\n lg: {\n trigger: 'px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\n panel: 'px-[var(--novi-pad-control-x-lg)]',\n },\n}\n\n/**\n * Accordion のスタイル定義。\n *\n * @example\n * const myAccordion = tv({ extend: accordionStyles, slots: { panel: 'pt-2' } })\n */\nexport const accordionStyles = tv({\n slots,\n variants: { size, variant },\n defaultVariants: { variant: 'outline', size: 'md' },\n})\n\nexport type AccordionStyleProps = Parameters<typeof accordionStyles>[0]\n"],"mappings":";;;;;;;AAeA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CAEN,SAAS;CAGT,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CAEX,OAAO,CACL,kCACA,gEACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;AAiCA,MAAa,kBAAkB,GAAG;CAChC;CACA,UAAU;EAAE;GAtBZ,IAAI;IACF,SAAS;IACT,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,OAAO;GACT;EAWY;EAAM;GAhClB,OAAO;IAAE,MAAM;IAAoB,MAAM;GAA2C;GACpF,SAAS;IAAE,MAAM;IAA8C,MAAM;GAAW;GAChF,MAAM;IAAE,MAAM;IAAoB,MAAM;GAA2C;GACnF,OAAO;IAAE,MAAM;IAAc,MAAM;GAA6C;GAEhF,OAAO;IAAE,MAAM;IAA0C,MAAM;GAAa;EA2B1D;CAAQ;CAC1B,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CAAC"}
|
|
@@ -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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "full", {
|
|
54
54
|
root: string;
|
|
55
55
|
}>;
|
|
56
56
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "full", {
|
|
70
70
|
root: string;
|
|
71
71
|
}>;
|
|
72
72
|
}, {
|
|
@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
|
|
|
3
3
|
//#region src/button/button.styles.ts
|
|
4
4
|
const slots = {
|
|
5
5
|
root: [
|
|
6
|
-
"inline-flex items-center justify-center gap-
|
|
6
|
+
"inline-flex items-center justify-center gap-[var(--novi-gap-inline)]",
|
|
7
7
|
"font-medium whitespace-nowrap select-none",
|
|
8
8
|
"border border-transparent",
|
|
9
9
|
"transition-[background-color,border-color,color,opacity]",
|
|
@@ -93,9 +93,9 @@ const buttonStyles = tv({
|
|
|
93
93
|
plain: { root: "text-[var(--c-text)] underline-offset-4 hover:underline" }
|
|
94
94
|
},
|
|
95
95
|
size: {
|
|
96
|
-
sm: { root: "h-8 px-
|
|
97
|
-
md: { root: "h-10 px-
|
|
98
|
-
lg: { root: "h-12 px-
|
|
96
|
+
sm: { root: "h-8 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]" },
|
|
97
|
+
md: { root: "h-10 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]" },
|
|
98
|
+
lg: { root: "h-12 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]" }
|
|
99
99
|
},
|
|
100
100
|
radius: {
|
|
101
101
|
none: { root: "rounded-[var(--novi-radius-none)]" },
|
|
@@ -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-
|
|
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-[var(--novi-gap-inline)]',\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-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-10 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-12 px-[var(--novi-pad-control-x-lg)] 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,0EAA0E;GACtF,IAAI,EAAE,MAAM,6EAA6E;GACzF,IAAI,EAAE,MAAM,6EAA6E;EAgC7D;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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "full", {
|
|
52
52
|
root: string;
|
|
53
53
|
}>;
|
|
54
54
|
isPressable: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.d.mts","names":[],"sources":["../../src/card/card.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"card.styles.d.mts","names":[],"sources":["../../src/card/card.styles.ts"],"mappings":";;;;;;;;cA0Da,wCAAU;;IAtBwB;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;KAoCjC,iBAAiB,kBAAkB"}
|
|
@@ -10,9 +10,14 @@ const slots = {
|
|
|
10
10
|
"shadow-none",
|
|
11
11
|
"overflow-hidden"
|
|
12
12
|
].join(" "),
|
|
13
|
-
header:
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
header: [
|
|
14
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
15
|
+
"font-[family-name:var(--novi-font-heading)]",
|
|
16
|
+
"tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]",
|
|
17
|
+
"border-b border-[var(--novi-color-border)]"
|
|
18
|
+
].join(" "),
|
|
19
|
+
body: "px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] flex-1",
|
|
20
|
+
footer: "px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] border-t border-[var(--novi-color-border)]",
|
|
16
21
|
image: "w-full object-cover"
|
|
17
22
|
};
|
|
18
23
|
/**
|
|
@@ -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
|
|
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 // 3区画とも面の余白は同じ値で、切れ目は境界線が伝える。\n // 区画ごとに縦余白を変えると「どの区画が主か」を余白が語ってしまう\n header: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'font-[family-name:var(--novi-font-heading)]',\n 'tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]',\n 'border-b border-[var(--novi-color-border)]',\n ].join(' '),\n body: 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] flex-1',\n footer:\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] 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;CAIV,QAAQ;EACN;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,QACE;CACF,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;cA0Ea,4CAAc;;IArCgB;;;IAsBC;IAAe;;;;;;;;;;IAtBhB;;;IAsBC;IAAe;;;;;;;;;;IAtBhB;;;IAsBC;IAAe;;;;;;;;;;;;;;;cAqC9C,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWpB,qBAAqB,kBAAkB;KACvC,0BAA0B,kBAAkB"}
|
|
@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
|
|
|
3
3
|
//#region src/checkbox/checkbox.styles.ts
|
|
4
4
|
const slots = {
|
|
5
5
|
root: [
|
|
6
|
-
"inline-flex items-start gap-
|
|
6
|
+
"inline-flex items-start gap-[var(--novi-gap-inline)]",
|
|
7
7
|
"cursor-pointer",
|
|
8
8
|
disabledState
|
|
9
9
|
].join(" "),
|
|
@@ -71,15 +71,15 @@ const checkboxStyles = tv({
|
|
|
71
71
|
*/
|
|
72
72
|
const checkboxGroupStyles = tv({
|
|
73
73
|
slots: {
|
|
74
|
-
root: "flex flex-col gap-
|
|
74
|
+
root: "flex flex-col gap-[var(--novi-gap-inline)]",
|
|
75
75
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
76
|
-
list: "flex flex-col gap-
|
|
76
|
+
list: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
77
77
|
description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
|
|
78
78
|
errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
|
|
79
79
|
},
|
|
80
80
|
variants: { orientation: {
|
|
81
|
-
vertical: { list: "flex-col gap-
|
|
82
|
-
horizontal: { list: "flex-row gap-
|
|
81
|
+
vertical: { list: "flex-col gap-[var(--novi-gap-stack)]" },
|
|
82
|
+
horizontal: { list: "flex-row gap-[var(--novi-gap-stack)] flex-wrap" }
|
|
83
83
|
} },
|
|
84
84
|
defaultVariants: { orientation: "vertical" }
|
|
85
85
|
});
|
|
@@ -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-
|
|
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: [\n 'inline-flex items-start gap-[var(--novi-gap-inline)]',\n 'cursor-pointer',\n disabledState,\n ].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 // フィールドの部品（ラベル・本体・説明）は近い。選択肢どうしはそれより離す —\n // この比がないと、どこまでが1つのフィールドなのかが読めない\n root: 'flex flex-col gap-[var(--novi-gap-inline)]',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n list: 'flex flex-col gap-[var(--novi-gap-stack)]',\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-[var(--novi-gap-stack)]' },\n horizontal: { list: 'flex-row gap-[var(--novi-gap-stack)] 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;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,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;;;;;;;AAkBD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EAdP,MAAM;EACN,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;CAUP;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,uCAAuC;EACzD,YAAY,EAAE,MAAM,iDAAiD;CACvE,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker.styles.d.mts","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"color-picker.styles.d.mts","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"mappings":";;;;;;;;;;;cAiEa,+CAAiB;;IAfa;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;KAqB/B,wBAAwB,kBAAkB"}
|
|
@@ -8,11 +8,11 @@ import { tv } from "tailwind-variants";
|
|
|
8
8
|
* 円にすると Radio と見分けがつかなくなる（あちらは「1つ選ぶ」の形）。
|
|
9
9
|
*/
|
|
10
10
|
const slots = {
|
|
11
|
-
root: ["flex flex-col gap-
|
|
11
|
+
root: ["flex flex-col gap-[var(--novi-gap-inline)]", disabledState].join(" "),
|
|
12
12
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
13
13
|
description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
|
|
14
14
|
errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]",
|
|
15
|
-
list: "flex flex-wrap items-start gap-
|
|
15
|
+
list: "flex flex-wrap items-start gap-[var(--novi-gap-inline)]",
|
|
16
16
|
item: [
|
|
17
17
|
"inline-flex flex-col items-center gap-1",
|
|
18
18
|
"cursor-pointer",
|
|
@@ -1 +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-
|
|
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-[var(--novi-gap-inline)]', 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 // 間隔は行内の詰め。離すと1枚の見本帳ではなく個別のボタンの列に見える\n list: 'flex flex-wrap items-start gap-[var(--novi-gap-inline)]',\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,8CAA8C,aAAa,CAAC,CAAC,KAAK,GAAG;CAC5E,OAAO;CACP,aAAa;CACb,cAAc;CAGd,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"}
|
|
@@ -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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "full", {
|
|
66
66
|
inputWrapper: string;
|
|
67
67
|
}>;
|
|
68
68
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.styles.d.mts","names":[],"sources":["../../src/input/input.styles.ts"],"mappings":";;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"input.styles.d.mts","names":[],"sources":["../../src/input/input.styles.ts"],"mappings":";;;;;;;;;;;;;;;;cAsGa,yCAAW;;IAvD+B;;;IAkBN;IAAe;;;IAeX;;;;;;;;;;;;;IAjCE;;;IAkBN;IAAe;;;IAeX;;;;;;;;;;;;;IAjCE;;;IAkBN;IAAe;;;IAeX;;;;;;;;;;;;KA4BzC,kBAAkB,kBAAkB"}
|
|
@@ -6,7 +6,7 @@ const slots = {
|
|
|
6
6
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
7
7
|
inputWrapper: [
|
|
8
8
|
"text-[var(--novi-color-fg)]",
|
|
9
|
-
"flex items-center gap-
|
|
9
|
+
"flex items-center gap-[var(--novi-gap-inline)] w-full",
|
|
10
10
|
"bg-[var(--novi-color-bg)]",
|
|
11
11
|
"border border-[var(--novi-color-border-strong)]",
|
|
12
12
|
"transition-[border-color,opacity]",
|
|
@@ -51,15 +51,15 @@ const inputStyles = tv({
|
|
|
51
51
|
},
|
|
52
52
|
size: {
|
|
53
53
|
sm: {
|
|
54
|
-
inputWrapper: "h-8 px-
|
|
54
|
+
inputWrapper: "h-8 px-[var(--novi-pad-control-x-sm)]",
|
|
55
55
|
input: "text-[length:var(--novi-text-sm)]"
|
|
56
56
|
},
|
|
57
57
|
md: {
|
|
58
|
-
inputWrapper: "h-10 px-
|
|
58
|
+
inputWrapper: "h-10 px-[var(--novi-pad-control-x-md)]",
|
|
59
59
|
input: "text-[length:var(--novi-text-base)]"
|
|
60
60
|
},
|
|
61
61
|
lg: {
|
|
62
|
-
inputWrapper: "h-12 px-
|
|
62
|
+
inputWrapper: "h-12 px-[var(--novi-pad-control-x-lg)]",
|
|
63
63
|
input: "text-[length:var(--novi-text-base)]"
|
|
64
64
|
}
|
|
65
65
|
},
|
|
@@ -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-
|
|
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-[var(--novi-gap-inline)] 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: {\n inputWrapper: 'h-8 px-[var(--novi-pad-control-x-sm)]',\n input: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n inputWrapper: 'h-10 px-[var(--novi-pad-control-x-md)]',\n input: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'h-12 px-[var(--novi-pad-control-x-lg)]',\n input: 'text-[length:var(--novi-text-base)]',\n },\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;;;;;;;;;;;;;;;AA8DA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAvDZ,OAAO,EACL,cAAc,yEAChB;GAEA,SAAS,EAAE,cAAc,qEAAqE;GAE9F,MAAM,EAAE,cAAc,mDAAmD;GAEzE,OAAO,EACL,cAAc,+EAChB;GAEA,OAAO,EAAE,cAAc,oCAAoC;EA2C/C;EAAS;GAtCrB,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;EA2BqB;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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.styles.d.mts","names":[],"sources":["../../src/menu/menu.styles.ts"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"menu.styles.d.mts","names":[],"sources":["../../src/menu/menu.styles.ts"],"mappings":";;;;;;;cA8Ca,wCAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEX,iBAAiB,kBAAkB"}
|
|
@@ -13,8 +13,8 @@ const slots = {
|
|
|
13
13
|
].join(" "),
|
|
14
14
|
list: "outline-none p-1 flex flex-col",
|
|
15
15
|
item: [
|
|
16
|
-
"flex items-center gap-
|
|
17
|
-
"px-
|
|
16
|
+
"flex items-center gap-[var(--novi-gap-inline)] justify-between",
|
|
17
|
+
"px-[var(--novi-pad-control-x-sm)] py-1.5 cursor-pointer outline-none",
|
|
18
18
|
"text-[var(--novi-color-fg)]",
|
|
19
19
|
"rounded-[var(--novi-radius-sm)]",
|
|
20
20
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
@@ -22,10 +22,10 @@ const slots = {
|
|
|
22
22
|
].join(" "),
|
|
23
23
|
itemLabel: "truncate",
|
|
24
24
|
itemDescription: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
|
|
25
|
-
itemShortcut: "shrink-0 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]
|
|
25
|
+
itemShortcut: ["shrink-0 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]", "[font-variant-numeric:var(--novi-font-numeric)]"].join(" "),
|
|
26
26
|
separator: "my-1 h-px bg-[var(--novi-color-border)]",
|
|
27
27
|
section: "flex flex-col",
|
|
28
|
-
sectionLabel: "px-
|
|
28
|
+
sectionLabel: ["px-[var(--novi-pad-control-x-sm)] pt-[var(--novi-gap-inline)] pb-1", "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tracking-wide"].join(" ")
|
|
29
29
|
};
|
|
30
30
|
/**
|
|
31
31
|
* Menu のスタイル定義。
|
|
@@ -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-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-
|
|
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-[var(--novi-gap-inline)] justify-between',\n // 縦は 6px。行を詰めて一覧性を稼ぐ場所なので、面の縦余白は当てない\n 'px-[var(--novi-pad-control-x-sm)] 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)]',\n '[font-variant-numeric:var(--novi-font-numeric)]',\n ].join(' '),\n separator: 'my-1 h-px bg-[var(--novi-color-border)]',\n section: 'flex flex-col',\n // 上の余白だけ広いのは、見出しが「下の項目群のもの」だと近接で示すため\n sectionLabel: [\n 'px-[var(--novi-pad-control-x-sm)] pt-[var(--novi-gap-inline)] pb-1',\n 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tracking-wide',\n ].join(' '),\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;EAEA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,iBAAiB;CAEjB,cAAc,CACZ,6EACA,iDACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,SAAS;CAET,cAAc,CACZ,sEACA,gFACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "full", {
|
|
44
44
|
panel: string;
|
|
45
45
|
}>;
|
|
46
46
|
}, {
|