@novi-ui/tactile 0.2.0 → 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/dist/accordion/accordion.styles.d.mts.map +1 -1
- package/dist/accordion/accordion.styles.mjs +41 -29
- 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/badge/badge.styles.d.mts.map +1 -1
- package/dist/badge/badge.styles.mjs +3 -3
- package/dist/badge/badge.styles.mjs.map +1 -1
- package/dist/breadcrumbs/breadcrumbs.styles.mjs +1 -1
- package/dist/breadcrumbs/breadcrumbs.styles.mjs.map +1 -1
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.d.mts.map +1 -1
- package/dist/button/button.styles.mjs +7 -5
- 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 +9 -9
- package/dist/menu/menu.styles.d.mts.map +1 -1
- package/dist/menu/menu.styles.mjs +8 -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 +5 -3
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.d.mts +1 -1
- package/dist/popover/popover.mjs +1 -1
- package/dist/popover/popover.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/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/select/select.styles.d.mts +3 -3
- package/dist/select/select.styles.d.mts.map +1 -1
- package/dist/select/select.styles.mjs +7 -7
- 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 +7 -7
- package/dist/tabs/tabs.styles.mjs.map +1 -1
- package/dist/tactile.css +16 -0
- package/dist/tactile.scoped.css +16 -0
- 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 +7 -5
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -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":";;;;;;;;cAmFa,6CAAe;;IArBgB;IAAe;;;IAnBZ;IAAc;;;;;;;;;;;IAmBjB;IAAe;;;IAnBZ;IAAc;;;;;;;;;;;IAmBjB;IAAe;;;IAnBZ;IAAc;;;;;;;;;;KA8CjD,sBAAsB,kBAAkB"}
|
|
@@ -10,9 +10,11 @@ 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
14
|
"cursor-pointer outline-none",
|
|
15
15
|
"text-[var(--novi-color-fg)]",
|
|
16
|
+
"font-[family-name:var(--novi-font-heading)]",
|
|
17
|
+
"tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]",
|
|
16
18
|
"transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
17
19
|
"hover:bg-[var(--novi-color-subtle)]",
|
|
18
20
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
|
|
@@ -26,6 +28,37 @@ const slots = {
|
|
|
26
28
|
].join(" "),
|
|
27
29
|
panel: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"
|
|
28
30
|
};
|
|
31
|
+
const variant = {
|
|
32
|
+
solid: {
|
|
33
|
+
root: "border-t-0 gap-1",
|
|
34
|
+
item: "bg-[var(--novi-color-subtle)] border-b-0"
|
|
35
|
+
},
|
|
36
|
+
outline: {
|
|
37
|
+
root: "border-t border-[var(--novi-color-border)]",
|
|
38
|
+
item: "border-b"
|
|
39
|
+
},
|
|
40
|
+
soft: {
|
|
41
|
+
root: "border-t-0 gap-1",
|
|
42
|
+
item: "bg-[var(--novi-color-subtle)] border-b-0"
|
|
43
|
+
},
|
|
44
|
+
ghost: {
|
|
45
|
+
root: "border-t-0",
|
|
46
|
+
item: "border-b border-[var(--novi-color-border)]"
|
|
47
|
+
},
|
|
48
|
+
plain: {
|
|
49
|
+
root: "border-t-0 gap-[var(--novi-gap-inline)]",
|
|
50
|
+
item: "border-b-0"
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
/**
|
|
54
|
+
* trigger は行全体が押せる。どの段でも 48px を下回らせない。
|
|
55
|
+
*
|
|
56
|
+
* 行は「面」なので余白は面のトークンで揃え、**段が変えるのは高さの下限と文字サイズだけ**。
|
|
57
|
+
* trigger と panel が同じ左右余白を共有しないと、開いたときに見出しと本文の左端がずれ、
|
|
58
|
+
* どの見出しに属する本文なのかが読めなくなる。
|
|
59
|
+
*/
|
|
60
|
+
const surface = "px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]";
|
|
61
|
+
const panelSurface = "px-[var(--novi-pad-surface-x)] pb-[var(--novi-pad-surface-y)]";
|
|
29
62
|
/**
|
|
30
63
|
* Accordion のスタイル定義。
|
|
31
64
|
*
|
|
@@ -37,40 +70,19 @@ const accordionStyles = tv({
|
|
|
37
70
|
variants: {
|
|
38
71
|
size: {
|
|
39
72
|
sm: {
|
|
40
|
-
trigger:
|
|
41
|
-
panel:
|
|
73
|
+
trigger: `min-h-12 ${surface} text-[length:var(--novi-text-sm)]`,
|
|
74
|
+
panel: panelSurface
|
|
42
75
|
},
|
|
43
76
|
md: {
|
|
44
|
-
trigger:
|
|
45
|
-
panel:
|
|
77
|
+
trigger: `min-h-14 ${surface} text-[length:var(--novi-text-base)]`,
|
|
78
|
+
panel: panelSurface
|
|
46
79
|
},
|
|
47
80
|
lg: {
|
|
48
|
-
trigger:
|
|
49
|
-
panel:
|
|
81
|
+
trigger: `min-h-16 ${surface} text-[length:var(--novi-text-base)]`,
|
|
82
|
+
panel: panelSurface
|
|
50
83
|
}
|
|
51
84
|
},
|
|
52
|
-
variant
|
|
53
|
-
solid: {
|
|
54
|
-
root: "border-t-0 gap-1",
|
|
55
|
-
item: "bg-[var(--novi-color-subtle)] border-b-0"
|
|
56
|
-
},
|
|
57
|
-
outline: {
|
|
58
|
-
root: "border-t border-[var(--novi-color-border)]",
|
|
59
|
-
item: "border-b"
|
|
60
|
-
},
|
|
61
|
-
soft: {
|
|
62
|
-
root: "border-t-0 gap-1",
|
|
63
|
-
item: "bg-[var(--novi-color-subtle)] border-b-0"
|
|
64
|
-
},
|
|
65
|
-
ghost: {
|
|
66
|
-
root: "border-t-0",
|
|
67
|
-
item: "border-b border-[var(--novi-color-border)]"
|
|
68
|
-
},
|
|
69
|
-
plain: {
|
|
70
|
-
root: "border-t-0 gap-2",
|
|
71
|
-
item: "border-b-0"
|
|
72
|
-
}
|
|
73
|
-
}
|
|
85
|
+
variant
|
|
74
86
|
},
|
|
75
87
|
defaultVariants: {
|
|
76
88
|
variant: "outline",
|
|
@@ -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 trigger: [\n 'flex items-center justify-between gap-[var(--novi-gap-inline)] w-full text-left',\n 'cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n // trigger のラベルがこの項目の見出し。別書体は積まず、字送りと行送りで階層を作る\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 // シェブロンは開閉の「方向」そのものを示すので回転させる。\n // +/− に置き換えると向きの情報が消える（ADR-T4 の rotate 例外）\n indicator: [\n 'shrink-0 text-[var(--novi-color-muted)]',\n 'transition-transform duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'group-data-[expanded]:rotate-180',\n 'motion-reduce:transition-none',\n ].join(' '),\n panel: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\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 // 罫線も面も持たないので、項目の切れ目は距離だけが示す\n plain: { root: 'border-t-0 gap-[var(--novi-gap-inline)]', item: 'border-b-0' },\n}\n\n/**\n * trigger は行全体が押せる。どの段でも 48px を下回らせない。\n *\n * 行は「面」なので余白は面のトークンで揃え、**段が変えるのは高さの下限と文字サイズだけ**。\n * trigger と panel が同じ左右余白を共有しないと、開いたときに見出しと本文の左端がずれ、\n * どの見出しに属する本文なのかが読めなくなる。\n */\nconst surface = 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]'\nconst panelSurface = 'px-[var(--novi-pad-surface-x)] pb-[var(--novi-pad-surface-y)]'\n\nconst size: VariantMap<NoviSize, { trigger: string; panel: string }> = {\n sm: {\n trigger: `min-h-12 ${surface} text-[length:var(--novi-text-sm)]`,\n panel: panelSurface,\n },\n md: {\n trigger: `min-h-14 ${surface} text-[length:var(--novi-text-base)]`,\n panel: panelSurface,\n },\n lg: {\n trigger: `min-h-16 ${surface} text-[length:var(--novi-text-base)]`,\n panel: panelSurface,\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;CACT,SAAS;EACP;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAGV,WAAW;EACT;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;AACT;AAEA,MAAM,UAAmE;CACvE,OAAO;EAAE,MAAM;EAAoB,MAAM;CAA2C;CACpF,SAAS;EAAE,MAAM;EAA8C,MAAM;CAAW;CAChF,MAAM;EAAE,MAAM;EAAoB,MAAM;CAA2C;CACnF,OAAO;EAAE,MAAM;EAAc,MAAM;CAA6C;CAEhF,OAAO;EAAE,MAAM;EAA2C,MAAM;CAAa;AAC/E;;;;;;;;AASA,MAAM,UAAU;AAChB,MAAM,eAAe;;;;;;;AAuBrB,MAAa,kBAAkB,GAAG;CAChC;CACA,UAAU;EAAE;GAtBZ,IAAI;IACF,SAAS,YAAY,QAAQ;IAC7B,OAAO;GACT;GACA,IAAI;IACF,SAAS,YAAY,QAAQ;IAC7B,OAAO;GACT;GACA,IAAI;IACF,SAAS,YAAY,QAAQ;IAC7B,OAAO;GACT;EAWY;EAAM;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", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.styles.d.mts","names":[],"sources":["../../src/badge/badge.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"badge.styles.d.mts","names":[],"sources":["../../src/badge/badge.styles.ts"],"mappings":";;;;;;;;cAiHa,yCAAW;;IA1FmB;;;IA2DF;IAAa;;;IAiBT;;;IAzBE;;;;;;;;IAnDJ;;;IA2DF;IAAa;;;IAiBT;;;IAzBE;;;;;;;;IAnDJ;;;IA2DF;IAAa;;;IAiBT;;;IAzBE;;;;;;;KA+CnC,kBAAkB,kBAAkB"}
|
|
@@ -59,15 +59,15 @@ const badgeStyles = tv({
|
|
|
59
59
|
color,
|
|
60
60
|
size: {
|
|
61
61
|
sm: {
|
|
62
|
-
root: "h-6 px-
|
|
62
|
+
root: "h-6 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-xs)]",
|
|
63
63
|
dot: "size-1.5"
|
|
64
64
|
},
|
|
65
65
|
md: {
|
|
66
|
-
root: "h-7 px-
|
|
66
|
+
root: "h-7 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-sm)]",
|
|
67
67
|
dot: "size-2"
|
|
68
68
|
},
|
|
69
69
|
lg: {
|
|
70
|
-
root: "h-8 px-
|
|
70
|
+
root: "h-8 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-sm)]",
|
|
71
71
|
dot: "size-2.5"
|
|
72
72
|
}
|
|
73
73
|
},
|
|
@@ -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-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 // Badge は表示専用でタップ対象ではないため、高さの下限（40px）の対象外。\n // 文字だけは読める大きさを保つ\n sm: {
|
|
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 // Badge は表示専用でタップ対象ではないため、高さの下限（40px）の対象外。\n // 文字だけは読める大きさを保つ\n sm: {\n root: 'h-6 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-xs)]',\n dot: 'size-1.5',\n },\n md: {\n root: 'h-7 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-sm)]',\n dot: 'size-2',\n },\n lg: {\n root: 'h-8 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-sm)]',\n dot: 'size-2.5',\n },\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;;;;;;;AAyCA,MAAa,cAAc,GAAG;CAC5B;CAGA,UAAU;EAAE;EAAO;GAhCnB,IAAI;IACF,MAAM;IACN,KAAK;GACP;GACA,IAAI;IACF,MAAM;IACN,KAAK;GACP;GACA,IAAI;IACF,MAAM;IACN,KAAK;GACP;EAqBmB;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;GA1CjC,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;EAsCV;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAQ,MAAM;EAAM,QAAQ;CAAK;AACjF,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
|
|
|
4
4
|
const slots = {
|
|
5
5
|
root: "flex",
|
|
6
6
|
list: ["flex flex-wrap items-center gap-1.5", "[&>li:first-child>[data-slot=separator]]:hidden"].join(" "),
|
|
7
|
-
item: "flex items-center gap-
|
|
7
|
+
item: "flex items-center gap-[var(--novi-gap-inline)]",
|
|
8
8
|
link: [
|
|
9
9
|
"relative inline-flex items-center min-h-11",
|
|
10
10
|
"before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.styles.mjs","names":[],"sources":["../../src/breadcrumbs/breadcrumbs.styles.ts"],"sourcesContent":["import type {\n breadcrumbsRequiredSlots,\n breadcrumbsSlots,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // root は <nav>、list は RAC が描画する <ol>。nav > ol が意味的に正しい構造\n root: 'flex',\n list: [\n 'flex flex-wrap items-center gap-1.5',\n // 先頭の項目だけ区切り文字を隠す。各項目が自分の前に区切りを持つ構造\n '[&>li:first-child>[data-slot=separator]]:hidden',\n ].join(' '),\n item: 'flex items-center gap-
|
|
1
|
+
{"version":3,"file":"breadcrumbs.styles.mjs","names":[],"sources":["../../src/breadcrumbs/breadcrumbs.styles.ts"],"sourcesContent":["import type {\n breadcrumbsRequiredSlots,\n breadcrumbsSlots,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // root は <nav>、list は RAC が描画する <ol>。nav > ol が意味的に正しい構造\n root: 'flex',\n list: [\n 'flex flex-wrap items-center gap-1.5',\n // 先頭の項目だけ区切り文字を隠す。各項目が自分の前に区切りを持つ構造\n '[&>li:first-child>[data-slot=separator]]:hidden',\n ].join(' '),\n item: 'flex items-center gap-[var(--novi-gap-inline)]',\n // 薄く小さいリンクはタップ違反の典型。当たり判定を擬似要素で 44px に広げる\n link: [\n 'relative inline-flex items-center min-h-11',\n 'before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2',\n 'before:h-11 before:content-[\"\"]',\n 'text-[var(--novi-color-muted)] underline-offset-4',\n 'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'hover:text-[var(--novi-color-fg)] hover:underline',\n focusRing,\n ].join(' '),\n // 装飾なので支援技術には読ませない\n separator: 'text-[var(--novi-color-border-strong)] select-none',\n // 現在地はリンクにしない。色ではなく太さで示す\n current: 'text-[var(--novi-color-fg)] font-medium',\n} satisfies SlotMap<typeof breadcrumbsSlots, (typeof breadcrumbsRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize, { list: string }> = {\n sm: { list: 'text-[length:var(--novi-text-xs)]' },\n md: { list: 'text-[length:var(--novi-text-sm)]' },\n lg: { list: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Breadcrumbs のスタイル定義。\n *\n * @example\n * const myCrumbs = tv({ extend: breadcrumbsStyles, slots: { separator: 'mx-2' } })\n */\nexport const breadcrumbsStyles = tv({\n slots,\n variants: { size },\n defaultVariants: { size: 'md' },\n})\n\nexport type BreadcrumbsStyleProps = Parameters<typeof breadcrumbsStyles>[0]\n"],"mappings":";;;AAUA,MAAM,QAAQ;CAEZ,MAAM;CACN,MAAM,CACJ,uCAEA,iDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CAEN,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CAEX,SAAS;AACX;;;;;;;AAcA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAbZ,IAAI,EAAE,MAAM,oCAAoC;EAChD,IAAI,EAAE,MAAM,oCAAoC;EAChD,IAAI,EAAE,MAAM,sCAAsC;CAWtC,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}
|
|
@@ -25,7 +25,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
25
25
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
26
26
|
root: string;
|
|
27
27
|
}>;
|
|
28
|
-
radius: VariantMap<"
|
|
28
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
29
29
|
root: string;
|
|
30
30
|
}>;
|
|
31
31
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -44,7 +44,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
44
44
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
45
45
|
root: string;
|
|
46
46
|
}>;
|
|
47
|
-
radius: VariantMap<"
|
|
47
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
48
48
|
root: string;
|
|
49
49
|
}>;
|
|
50
50
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -63,7 +63,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
63
63
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
64
64
|
root: string;
|
|
65
65
|
}>;
|
|
66
|
-
radius: VariantMap<"
|
|
66
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
67
67
|
root: string;
|
|
68
68
|
}>;
|
|
69
69
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.d.mts","names":[],"sources":["../../src/button/button.styles.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"button.styles.d.mts","names":[],"sources":["../../src/button/button.styles.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;cAiKa,0CAAY;;IA/GkB;;;IA0DF;;;IAMI;;;IAcE;;;;;;;;;;IA9EJ;;;IA0DF;;;IAMI;;;IAcE;;;;;;;;;;IA9EJ;;;IA0DF;;;IAMI;;;IAcE;;;;;;;;;KAwCnC,mBAAmB,kBAAkB"}
|
|
@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
|
|
|
4
4
|
//#region src/button/button.styles.ts
|
|
5
5
|
const slots = {
|
|
6
6
|
root: [
|
|
7
|
-
"inline-flex items-center justify-center gap-
|
|
7
|
+
"inline-flex items-center justify-center gap-[var(--novi-gap-inline)]",
|
|
8
8
|
"font-medium whitespace-nowrap select-none",
|
|
9
9
|
"border border-transparent",
|
|
10
10
|
"transition-[background-color,border-color,color,opacity,scale,box-shadow]",
|
|
@@ -70,12 +70,14 @@ const color = {
|
|
|
70
70
|
/**
|
|
71
71
|
* 高さは 40 / 48 / 56px（Raster は 32 / 40 / 48）。
|
|
72
72
|
* 最小段でも 40px あり、擬似要素と合わせて実効タップ領域が 44px を割らない。
|
|
73
|
-
*
|
|
73
|
+
*
|
|
74
|
+
* 左右の余白は `--novi-pad-control-x-*` に預ける。**段の差が出るのは横方向だけ** —
|
|
75
|
+
* 縦は面の余白（surface-y）で一定に保つ。指の当たり方は段が変わっても変わらない。
|
|
74
76
|
*/
|
|
75
77
|
const size = {
|
|
76
|
-
sm: { root: "h-10 px-
|
|
77
|
-
md: { root: "h-12 px-
|
|
78
|
-
lg: { root: "h-14 px-
|
|
78
|
+
sm: { root: "h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]" },
|
|
79
|
+
md: { root: "h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]" },
|
|
80
|
+
lg: { root: "h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]" }
|
|
79
81
|
};
|
|
80
82
|
const radius = {
|
|
81
83
|
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'\nimport { tapTarget } from '../styles/tap-target'\n\n// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる（ADR-R5）。\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'\nimport { tapTarget } from '../styles/tap-target'\n\n// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる（ADR-R5）。\nconst slots = {\n root: [\n // アイコンと文字は1つの塊。塊の内側の距離はテーマが持つ\n 'inline-flex items-center justify-center gap-[var(--novi-gap-inline)]',\n 'font-medium whitespace-nowrap select-none',\n 'border border-transparent',\n // 押下フィードバック。指の下で沈む感触を作る。\n // scale はここでしか使わない（装飾目的の scale は禁止・ADR-T5）\n 'transition-[background-color,border-color,color,opacity,scale,box-shadow]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[pressed]:scale-[0.97]',\n // 沈む動きが不快になりうる利用者には出さない（AC-09-2）\n 'motion-reduce:data-[pressed]:scale-100',\n focusRing,\n disabledState,\n // 視覚寸法が 44px を満たしていても付けてよい。max() なので当たり判定は広がらない\n tapTarget,\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/**\n * 高さは 40 / 48 / 56px（Raster は 32 / 40 / 48）。\n * 最小段でも 40px あり、擬似要素と合わせて実効タップ領域が 44px を割らない。\n *\n * 左右の余白は `--novi-pad-control-x-*` に預ける。**段の差が出るのは横方向だけ** —\n * 縦は面の余白（surface-y）で一定に保つ。指の当たり方は段が変わっても変わらない。\n */\nconst size: VariantMap<NoviSize, { root: string }> = {\n sm: { root: 'h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]' },\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 * 語彙の実装漏れ・語彙外の追加はここでコンパイルエラーになる（AC-04-2）。\n *\n * `solid` だけが影を持ち、押下すると影が消える。**持ち上がっていた面が沈む**という\n * 一連の動きで、Tactile は押した手応えを作る（Raster は色の変化だけで示す）。\n */\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: {\n root: [\n 'bg-[var(--c)] text-[var(--c-fg)] hover:opacity-90',\n 'shadow-[var(--novi-shadow-sm)] data-[pressed]:shadow-[var(--novi-shadow-none)]',\n ].join(' '),\n },\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/**\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/tactile'\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 // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n variants: { color, size, radius, variant },\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;EAEJ;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;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;;;;;;;;AASA,MAAM,OAA+C;CACnD,IAAI,EAAE,MAAM,2EAA2E;CACvF,IAAI,EAAE,MAAM,6EAA6E;CACzF,IAAI,EAAE,MAAM,6EAA6E;AAC3F;AAEA,MAAM,SAAmD;CACvD,MAAM,EAAE,MAAM,oCAAoC;CAClD,IAAI,EAAE,MAAM,kCAAkC;CAC9C,IAAI,EAAE,MAAM,kCAAkC;CAC9C,IAAI,EAAE,MAAM,kCAAkC;CAC9C,MAAM,EAAE,MAAM,oCAAoC;AACpD;;;;;;;AAQA,MAAM,UAAqD;CACzD,OAAO,EACL,MAAM,CACJ,qDACA,gFACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM,kFACR;CACA,MAAM,EAAE,MAAM,yEAAyE;CACvF,OAAO,EAAE,MAAM,2DAA2D;CAC1E,OAAO,EAAE,MAAM,0DAA0D;AAC3E;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,eAAe,GAAG;CAC7B;CAEA,UAAU;EAAE;EAAO;EAAM;EAAQ;CAAQ;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":";;;;;;;;cA+Da,wCAAU;;IAtBwB;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;KAoCjC,iBAAiB,kBAAkB"}
|
|
@@ -9,9 +9,14 @@ const slots = {
|
|
|
9
9
|
"shadow-[var(--novi-shadow-sm)]",
|
|
10
10
|
"overflow-hidden"
|
|
11
11
|
].join(" "),
|
|
12
|
-
header:
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
header: [
|
|
13
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
14
|
+
"border-b border-[var(--novi-color-border)]",
|
|
15
|
+
"font-[family-name:var(--novi-font-heading)]",
|
|
16
|
+
"tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]"
|
|
17
|
+
].join(" "),
|
|
18
|
+
body: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] flex-1", "leading-[var(--novi-leading-body)]"].join(" "),
|
|
19
|
+
footer: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]", "border-t border-[var(--novi-color-border)]"].join(" "),
|
|
15
20
|
image: "w-full object-cover"
|
|
16
21
|
};
|
|
17
22
|
/**
|
|
@@ -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 'shadow-[var(--novi-shadow-sm)]',\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 'shadow-[var(--novi-shadow-sm)]',\n 'overflow-hidden',\n ].join(' '),\n // header と footer は境界線で仕切る。背景色を変えて面を増やさない。\n // 3段とも同じ余白トークンを使う。以前は py-3 / py-4 / py-3 と実質 1:1 で、\n // 「区画の中」と「区画の境目」が同じ距離だったため詰まって見えていた\n header: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'border-b border-[var(--novi-color-border)]',\n // 見出しの声。別書体を積まず、字送りと行送りだけで本文と階層を分ける\n 'font-[family-name:var(--novi-font-heading)]',\n 'tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]',\n ].join(' '),\n body: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] flex-1',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n footer: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'border-t border-[var(--novi-color-border)]',\n ].join(' '),\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;CACF,CAAC,CAAC,KAAK,GAAG;CAIV,QAAQ;EACN;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM,CACJ,wEACA,oCACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ,CACN,iEACA,4CACF,CAAC,CAAC,KAAK,GAAG;CACV,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":";;;;;;;;;;;cAsFa,4CAAc;;IAxCgB;;;IAyBC;IAAe;;;;;;;;;;IAzBhB;;;IAyBC;IAAe;;;;;;;;;;IAzBhB;;;IAyBC;IAAe;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;cAsFa,4CAAc;;IAxCgB;;;IAyBC;IAAe;;;;;;;;;;IAzBhB;;;IAyBC;IAAe;;;;;;;;;;IAzBhB;;;IAyBC;IAAe;;;;;;;;;;;;;;;cAqC9C,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAYpB,qBAAqB,kBAAkB;KACvC,0BAA0B,kBAAkB"}
|
|
@@ -11,7 +11,7 @@ import { tv } from "tailwind-variants";
|
|
|
11
11
|
*/
|
|
12
12
|
const slots = {
|
|
13
13
|
root: [
|
|
14
|
-
"inline-flex items-center gap-
|
|
14
|
+
"inline-flex items-center gap-[var(--novi-gap-inline)] min-h-12 py-1",
|
|
15
15
|
"cursor-pointer",
|
|
16
16
|
tapTarget,
|
|
17
17
|
disabledState
|
|
@@ -81,15 +81,15 @@ const checkboxStyles = tv({
|
|
|
81
81
|
*/
|
|
82
82
|
const checkboxGroupStyles = tv({
|
|
83
83
|
slots: {
|
|
84
|
-
root: "flex flex-col gap-
|
|
84
|
+
root: "flex flex-col gap-[var(--novi-gap-inline)]",
|
|
85
85
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
86
|
-
list: "flex flex-col gap-
|
|
86
|
+
list: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
87
87
|
description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
|
|
88
88
|
errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
|
|
89
89
|
},
|
|
90
90
|
variants: { orientation: {
|
|
91
|
-
vertical: { list: "flex-col gap-
|
|
92
|
-
horizontal: { list: "flex-row gap-
|
|
91
|
+
vertical: { list: "flex-col gap-[var(--novi-gap-stack)]" },
|
|
92
|
+
horizontal: { list: "flex-row gap-[var(--novi-gap-section)] flex-wrap" }
|
|
93
93
|
} },
|
|
94
94
|
defaultVariants: { orientation: "vertical" }
|
|
95
95
|
});
|
|
@@ -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'\nimport { tapTarget } from '../styles/tap-target'\n\n/**\n * Tactile の Checkbox は**視覚寸法とタップ寸法を分ける**（AC-01-5）。\n *\n * 箱は 24px 前後で小さく見せてよいが、指が当たる範囲は 44px 以上ないと押し直しが起きる。\n * 擬似要素で当たり判定だけを広げるので、見た目を変えずに下限を満たせる。\n * 行全体（root）も押せるようにして、ラベルを狙っても切り替わるようにする。\n */\nconst slots = {\n root: [\n 'inline-flex items-center 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'\nimport { tapTarget } from '../styles/tap-target'\n\n/**\n * Tactile の Checkbox は**視覚寸法とタップ寸法を分ける**（AC-01-5）。\n *\n * 箱は 24px 前後で小さく見せてよいが、指が当たる範囲は 44px 以上ないと押し直しが起きる。\n * 擬似要素で当たり判定だけを広げるので、見た目を変えずに下限を満たせる。\n * 行全体（root）も押せるようにして、ラベルを狙っても切り替わるようにする。\n */\nconst slots = {\n root: [\n 'inline-flex items-center gap-[var(--novi-gap-inline)] min-h-12 py-1',\n 'cursor-pointer',\n tapTarget,\n disabledState,\n ].join(' '),\n control: [\n 'shrink-0 inline-grid place-items-center',\n 'ring-1 ring-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'bg-[var(--novi-color-surface)]',\n 'transition-[background-color,box-shadow,scale]',\n 'group-data-[pressed]:scale-[0.92] motion-reduce:group-data-[pressed]:scale-100',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'group-data-[selected]:bg-[var(--c)] group-data-[selected]:ring-[var(--c)]',\n 'group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:ring-[var(--c)]',\n 'group-data-[invalid]:ring-[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-sm)] 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/**\n * 20 / 24 / 28px。**これは視覚寸法**で、当たり判定は root の `tapTarget` が 44px を保つ。\n * 小さく見せることと押しやすさは両立できる（AC-01-5）。\n */\nconst size: VariantMap<NoviSize, { control: string; label: string }> = {\n sm: { control: 'size-5', label: 'text-[length:var(--novi-text-sm)]' },\n md: { control: 'size-6', label: 'text-[length:var(--novi-text-base)]' },\n lg: { control: 'size-7', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Checkbox のスタイル定義。\n *\n * @example\n * import { checkboxStyles } from '@novi-ui/tactile'\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 // ラベル・一覧・補足は1つのフィールドの部品なので inline。\n // 一覧の中の行どうしは stack — 44px の当たり判定が重なると押し間違える\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-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] 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 // 横並びは当たり判定が左右で重なる。縦積みより広く取る\n horizontal: { list: 'flex-row gap-[var(--novi-gap-section)] 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":";;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,OAAO;CACP,aAAa;AACf;;;;;;;;;;AA0CA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAzCZ,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;EAwBY;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;EAEzD,YAAY,EAAE,MAAM,mDAAmD;CACzE,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":";;;;;;;;;;;cA2Ea,+CAAiB;;IAfa;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;KAqB/B,wBAAwB,kBAAkB"}
|
|
@@ -10,11 +10,11 @@ import { tv } from "tailwind-variants";
|
|
|
10
10
|
* 小さく詰めた見本帳は指では押し分けられない。
|
|
11
11
|
*/
|
|
12
12
|
const slots = {
|
|
13
|
-
root: ["flex flex-col gap-
|
|
13
|
+
root: ["flex flex-col gap-[var(--novi-gap-inline)]", disabledState].join(" "),
|
|
14
14
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
15
15
|
description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
|
|
16
16
|
errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]",
|
|
17
|
-
list: "flex flex-wrap items-start gap-
|
|
17
|
+
list: "flex flex-wrap items-start gap-[var(--novi-gap-stack)]",
|
|
18
18
|
item: [
|
|
19
19
|
"inline-flex flex-col items-center gap-1.5",
|
|
20
20
|
"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'\nimport { tapTarget } from '../styles/tap-target'\n\n/**\n * Tactile のカラー選択は**染料の玉**。丸く、指で押せる大きさで並べる。\n *\n * Raster が見本帳（角のある矩形を方眼に敷き詰める）なのに対して、\n * こちらは1粒ずつ間隔をあけて置く。**寸法はテーマの美学**（ADR-06）で、\n * 小さく詰めた見本帳は指では押し分けられない。\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'\nimport { tapTarget } from '../styles/tap-target'\n\n/**\n * Tactile のカラー選択は**染料の玉**。丸く、指で押せる大きさで並べる。\n *\n * Raster が見本帳（角のある矩形を方眼に敷き詰める）なのに対して、\n * こちらは1粒ずつ間隔をあけて置く。**寸法はテーマの美学**（ADR-06）で、\n * 小さく詰めた見本帳は指では押し分けられない。\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-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n // 玉どうしは stack。44px の当たり判定が重なると押し間違えるので、\n // 玉の直径ではなく「玉と玉の距離」で誤タップを防ぐ\n list: 'flex flex-wrap items-start gap-[var(--novi-gap-stack)]',\n item: [\n 'inline-flex flex-col items-center gap-1.5',\n 'cursor-pointer',\n 'data-[disabled]:cursor-default',\n // 見た目の玉は 32〜44px でも、指の当たる範囲は必ず 44px 以上にする\n tapTarget,\n ].join(' '),\n /**\n * 色そのものを見せる面。\n *\n * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、\n * 染料が増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。\n */\n swatch: [\n 'inline-grid place-items-center',\n 'rounded-[var(--novi-radius-full)]',\n 'shadow-[var(--novi-shadow-sm)]',\n 'transition-[scale,box-shadow]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n // 押した瞬間だけ沈む。触れている感触をここで返す\n 'group-data-[pressed]:scale-[0.92] motion-reduce:group-data-[pressed]:scale-100',\n // 選択は「持ち上がり」でも示す。色面だけだと選択中が色の違いに埋もれる\n 'group-data-[selected]:shadow-[var(--novi-shadow-md)]',\n focusRing,\n ].join(' '),\n // 色だけに頼らず印でも示す（WCAG 1.4.1）\n indicator: 'leading-none',\n itemLabel: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof colorPickerSlots, (typeof colorPickerRequiredSlots)[number]>\n\n/**\n * 玉の直径。**最小でも 32px**（Raster の sm は 24px）。\n * 実効タップ領域は `tapTarget` が 44px を保証するので、視覚寸法はここで決めてよい。\n */\nconst size: VariantMap<NoviSize, { swatch: string }> = {\n sm: { swatch: 'size-8' },\n md: { swatch: 'size-11' },\n lg: { swatch: 'size-14' },\n}\n\n/**\n * ColorPicker のスタイル定義。\n *\n * @example\n * import { colorPickerStyles } from '@novi-ui/tactile'\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":";;;;;;;;;;;AAkBA,MAAM,QAAQ;CACZ,MAAM,CAAC,8CAA8C,aAAa,CAAC,CAAC,KAAK,GAAG;CAC5E,OAAO;CACP,aAAa;CACb,cAAc;CAGd,MAAM;CACN,MAAM;EACJ;EACA;EACA;EAEA;CACF,CAAC,CAAC,KAAK,GAAG;;;;;;;CAOV,QAAQ;EACN;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,WAAW;AACb;;;;;;;;;;AAqBA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAhBZ,IAAI,EAAE,QAAQ,SAAS;EACvB,IAAI,EAAE,QAAQ,UAAU;EACxB,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":";;;;;;;;;;;;;;;;cAoHa,yCAAW;;IAhE+B;;;IA2BN;IAAe;;;IAeX;;;;;;;;;;;;;IA1CE;;;IA2BN;IAAe;;;IAeX;;;;;;;;;;;;;IA1CE;;;IA2BN;IAAe;;;IAeX;;;;;;;;;;;;KA4BzC,kBAAkB,kBAAkB"}
|