@novi-ui/raster 0.4.0 → 0.5.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 +12 -9
- package/dist/accordion/accordion.styles.mjs.map +1 -1
- package/dist/button/button.styles.mjs +4 -4
- package/dist/button/button.styles.mjs.map +1 -1
- 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.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 +6 -6
- 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.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.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.map +1 -1
- package/dist/select/select.styles.mjs +6 -6
- package/dist/select/select.styles.mjs.map +1 -1
- 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.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.map +1 -1
- package/dist/toast/toast.styles.mjs +3 -2
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -10,12 +10,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
11
11
|
item?: import("tailwind-variants").ClassValue;
|
|
12
12
|
trigger?: import("tailwind-variants").ClassValue;
|
|
13
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
13
14
|
list?: import("tailwind-variants").ClassValue;
|
|
14
15
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
15
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
16
|
-
popover?: import("tailwind-variants").ClassValue;
|
|
17
16
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
18
17
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
18
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
19
19
|
section?: import("tailwind-variants").ClassValue;
|
|
20
20
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
21
21
|
};
|
|
@@ -25,12 +25,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
25
25
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
26
26
|
item?: import("tailwind-variants").ClassValue;
|
|
27
27
|
trigger?: import("tailwind-variants").ClassValue;
|
|
28
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
28
29
|
list?: import("tailwind-variants").ClassValue;
|
|
29
30
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
30
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
31
|
-
popover?: import("tailwind-variants").ClassValue;
|
|
32
31
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
33
32
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
33
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
34
34
|
section?: import("tailwind-variants").ClassValue;
|
|
35
35
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
36
36
|
};
|
|
@@ -51,12 +51,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
51
51
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
52
52
|
item?: import("tailwind-variants").ClassValue;
|
|
53
53
|
trigger?: import("tailwind-variants").ClassValue;
|
|
54
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
54
55
|
list?: import("tailwind-variants").ClassValue;
|
|
55
56
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
56
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
57
|
-
popover?: import("tailwind-variants").ClassValue;
|
|
58
57
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
59
58
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
59
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
60
60
|
section?: import("tailwind-variants").ClassValue;
|
|
61
61
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
62
62
|
};
|
|
@@ -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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.styles.d.mts","names":[],"sources":["../../src/modal/modal.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"modal.styles.d.mts","names":[],"sources":["../../src/modal/modal.styles.ts"],"mappings":";;;;;;;;cAiFa,yCAAW;;IArB2B;;;IAOL;;;;;;;;;;;;IAPK;;;IAOL;;;;;;;;;;;;IAPK;;;IAOL;;;;;;;;;;;KAoBlC,kBAAkB,kBAAkB"}
|
|
@@ -8,7 +8,7 @@ import { tv } from "tailwind-variants";
|
|
|
8
8
|
*/
|
|
9
9
|
const slots = {
|
|
10
10
|
backdrop: [
|
|
11
|
-
"fixed inset-0 z-50 grid place-items-center p-
|
|
11
|
+
"fixed inset-0 z-50 grid place-items-center p-[var(--novi-pad-surface-y)]",
|
|
12
12
|
"bg-[var(--novi-color-overlay)]",
|
|
13
13
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
14
14
|
].join(" "),
|
|
@@ -21,19 +21,28 @@ const slots = {
|
|
|
21
21
|
"max-h-[calc(100dvh-2rem)] overflow-auto"
|
|
22
22
|
].join(" "),
|
|
23
23
|
header: [
|
|
24
|
-
"flex items-baseline justify-between gap-
|
|
25
|
-
"px-
|
|
24
|
+
"flex items-baseline justify-between gap-[var(--novi-gap-inline)]",
|
|
25
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
26
26
|
"border-b border-[var(--novi-color-border)]"
|
|
27
27
|
].join(" "),
|
|
28
|
-
title:
|
|
28
|
+
title: [
|
|
29
|
+
"text-[length:var(--novi-text-lg)] font-medium",
|
|
30
|
+
"font-[family-name:var(--novi-font-heading)]",
|
|
31
|
+
"tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]",
|
|
32
|
+
"text-[var(--novi-color-fg)]"
|
|
33
|
+
].join(" "),
|
|
29
34
|
closeButton: [
|
|
30
35
|
"shrink-0 grid place-items-center size-8 -mr-2",
|
|
31
36
|
"text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]",
|
|
32
37
|
"transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
33
38
|
focusRing
|
|
34
39
|
].join(" "),
|
|
35
|
-
body: "px-
|
|
36
|
-
footer: [
|
|
40
|
+
body: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]", "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"].join(" "),
|
|
41
|
+
footer: [
|
|
42
|
+
"flex justify-end gap-[var(--novi-gap-inline)]",
|
|
43
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
44
|
+
"border-t border-[var(--novi-color-border)]"
|
|
45
|
+
].join(" ")
|
|
37
46
|
};
|
|
38
47
|
/**
|
|
39
48
|
* Modal のスタイル定義。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type {\n modalRequiredSlots,\n modalSlots,\n NoviRadius,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Modal は **中央配置・閉じるボタンはヘッダー右上**（architecture.md §5 テーマA）。\n *\n * 影を使わないので、階層は backdrop の暗転と 1px の境界線だけで作る。\n */\nconst slots = {\n backdrop: [\n 'fixed inset-0 z-50 grid place-items-center p-
|
|
1
|
+
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type {\n modalRequiredSlots,\n modalSlots,\n NoviRadius,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Modal は **中央配置・閉じるボタンはヘッダー右上**（architecture.md §5 テーマA）。\n *\n * 影を使わないので、階層は backdrop の暗転と 1px の境界線だけで作る。\n */\nconst slots = {\n backdrop: [\n // 画面端とパネルの距離。panel / full の max-h が引く 2rem はこの値の 2 倍を指す\n 'fixed inset-0 z-50 grid place-items-center p-[var(--novi-pad-surface-y)]',\n 'bg-[var(--novi-color-overlay)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n panel: [\n 'text-[var(--novi-color-fg)]',\n 'w-full outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'max-h-[calc(100dvh-2rem)] overflow-auto',\n ].join(' '),\n // 見出しと閉じるを同じ行に置く。情報の階層を横方向で作る\n header: [\n 'flex items-baseline justify-between gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'border-b border-[var(--novi-color-border)]',\n ].join(' '),\n title: [\n 'text-[length:var(--novi-text-lg)] font-medium',\n 'font-[family-name:var(--novi-font-heading)]',\n 'tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]',\n 'text-[var(--novi-color-fg)]',\n ].join(' '),\n closeButton: [\n 'shrink-0 grid place-items-center size-8 -mr-2',\n 'text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]',\n 'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n ].join(' '),\n body: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n ].join(' '),\n footer: [\n 'flex justify-end gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'border-t border-[var(--novi-color-border)]',\n ].join(' '),\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize | 'full', { panel: string }> = {\n sm: { panel: 'max-w-sm' },\n md: { panel: 'max-w-md' },\n lg: { panel: 'max-w-lg' },\n full: { panel: 'max-w-none h-[calc(100dvh-2rem)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { panel: string }> = {\n none: { panel: 'rounded-[var(--novi-radius-none)]' },\n sm: { panel: 'rounded-[var(--novi-radius-sm)]' },\n md: { panel: 'rounded-[var(--novi-radius-md)]' },\n lg: { panel: 'rounded-[var(--novi-radius-lg)]' },\n full: { panel: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * const myModal = tv({ extend: modalStyles, slots: { panel: 'border-2' } })\n */\nexport const modalStyles = tv({\n slots,\n variants: { size, radius },\n defaultVariants: { size: 'md', radius: 'lg' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n"],"mappings":";;;;;;;;AAgBA,MAAM,QAAQ;CACZ,UAAU;EAER;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;EACN;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;EACX;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM,CACJ,iEACA,gEACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;EACN;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;AAuBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAtBZ,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,WAAW;GACxB,MAAM,EAAE,OAAO,mCAAmC;EAmBtC;EAAM;GAflB,MAAM,EAAE,OAAO,oCAAoC;GACnD,IAAI,EAAE,OAAO,kCAAkC;GAC/C,IAAI,EAAE,OAAO,kCAAkC;GAC/C,IAAI,EAAE,OAAO,kCAAkC;GAC/C,MAAM,EAAE,OAAO,oCAAoC;EAWjC;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAK;AAC9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.styles.d.mts","names":[],"sources":["../../src/popover/popover.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"popover.styles.d.mts","names":[],"sources":["../../src/popover/popover.styles.ts"],"mappings":";;;;;;;;cA0Ca,2CAAa;;IAdmB;;;;;;;;IAAA;;;;;;;;IAAA;;;;;;;;;;;;;cA0BhC,2CAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkBd,oBAAoB,kBAAkB;KACtC,oBAAoB,kBAAkB"}
|
|
@@ -10,7 +10,7 @@ const slots = {
|
|
|
10
10
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
11
11
|
].join(" "),
|
|
12
12
|
arrow: "hidden",
|
|
13
|
-
content: "px-
|
|
13
|
+
content: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]", "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"].join(" ")
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
16
16
|
* Popover のスタイル定義。
|
|
@@ -45,7 +45,7 @@ const tooltipStyles = tv({ slots: {
|
|
|
45
45
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
46
46
|
].join(" "),
|
|
47
47
|
arrow: "hidden",
|
|
48
|
-
content: "px-
|
|
48
|
+
content: "px-[var(--novi-pad-control-x-sm)] py-1 text-[length:var(--novi-text-xs)] leading-snug"
|
|
49
49
|
} });
|
|
50
50
|
//#endregion
|
|
51
51
|
export { popoverStyles, tooltipStyles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.styles.mjs","names":[],"sources":["../../src/popover/popover.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n popoverRequiredSlots,\n popoverSlots,\n SlotMap,\n tooltipRequiredSlots,\n tooltipSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'text-[var(--novi-color-fg)]',\n 'outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n // Raster では arrow を描画しない。任意 slot を省略する実例\n arrow: 'hidden',\n content: 'px-
|
|
1
|
+
{"version":3,"file":"popover.styles.mjs","names":[],"sources":["../../src/popover/popover.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n popoverRequiredSlots,\n popoverSlots,\n SlotMap,\n tooltipRequiredSlots,\n tooltipSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'text-[var(--novi-color-fg)]',\n 'outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n // Raster では arrow を描画しない。任意 slot を省略する実例\n arrow: 'hidden',\n content: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n ].join(' '),\n} satisfies SlotMap<typeof popoverSlots, (typeof popoverRequiredSlots)[number]>\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 * Popover のスタイル定義。\n *\n * @example\n * const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })\n */\nexport const popoverStyles = tv({\n slots,\n variants: { radius },\n defaultVariants: { radius: 'lg' },\n})\n\n/**\n * Tooltip のスタイル定義。\n *\n * Popover と違い**反転色**（暗い面に明るい文字）で出す。\n * 補足であって操作対象ではない、という区別を色で伝える。\n */\nexport const tooltipStyles = tv({\n slots: {\n root: [\n 'outline-none max-w-xs',\n 'bg-[var(--novi-color-fg)] text-[var(--novi-color-bg)]',\n 'border border-transparent',\n 'rounded-[var(--novi-radius-sm)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n arrow: 'hidden',\n // 補足の吹き出しは面ではなくラベル。面の余白を当てると本題より重くなるので、\n // 横は最小のコントロール余白、縦は文字が枠に触れない最小値だけを取る\n content:\n 'px-[var(--novi-pad-control-x-sm)] py-1 text-[length:var(--novi-text-xs)] leading-snug',\n } satisfies SlotMap<typeof tooltipSlots, (typeof tooltipRequiredSlots)[number]>,\n})\n\nexport type PopoverStyleProps = Parameters<typeof popoverStyles>[0]\nexport type TooltipStyleProps = Parameters<typeof tooltipStyles>[0]\n"],"mappings":";;AAWA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;CACP,SAAS,CACP,iEACA,gEACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;AAgBA,MAAa,gBAAgB,GAAG;CAC9B;CACA,UAAU,EAAE;EAfZ,MAAM,EAAE,MAAM,oCAAoC;EAClD,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,MAAM,EAAE,MAAM,oCAAoC;CAWtC,EAAO;CACnB,iBAAiB,EAAE,QAAQ,KAAK;AAClC,CAAC;;;;;;;AAQD,MAAa,gBAAgB,GAAG,EAC9B,OAAO;CACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CAGP,SACE;AACJ,EACF,CAAC"}
|
|
@@ -27,7 +27,7 @@ function Progress({ size, color, label, value, minValue = 0, maxValue = 100, sho
|
|
|
27
27
|
"data-slot": "root",
|
|
28
28
|
className: s.root({ class: [className, classNames?.root] }),
|
|
29
29
|
children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [(label !== void 0 || showValueLabel === true) && /* @__PURE__ */ jsxs("span", {
|
|
30
|
-
className: "flex items-baseline justify-between gap-
|
|
30
|
+
className: "flex items-baseline justify-between gap-[var(--novi-gap-inline)]",
|
|
31
31
|
children: [label !== void 0 && /* @__PURE__ */ jsx(Label, {
|
|
32
32
|
"data-slot": "label",
|
|
33
33
|
className: s.label({ class: classNames?.label }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["'use client'\n\nimport type { ProgressProps } from '@novi-ui/core'\nimport { Label, ProgressBar } from 'react-aria-components'\nimport { progressStyles } from './progress.styles'\n\n/**\n * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。\n *\n * `prefers-reduced-motion` が有効なときは不確定表示のアニメーションを止める。\n *\n * @example\n * <Progress label=\"アップロード中\" value={62} showValueLabel />\n */\nexport function Progress({\n size,\n color,\n label,\n value,\n minValue = 0,\n maxValue = 100,\n showValueLabel,\n className,\n classNames,\n id,\n}: ProgressProps) {\n const isIndeterminate = value === undefined\n const s = progressStyles({ size, color, isIndeterminate })\n\n return (\n <ProgressBar\n id={id}\n value={value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {({ percentage, valueText }) => (\n <>\n {(label !== undefined || showValueLabel === true) && (\n <span className=\"flex items-baseline justify-between gap-
|
|
1
|
+
{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["'use client'\n\nimport type { ProgressProps } from '@novi-ui/core'\nimport { Label, ProgressBar } from 'react-aria-components'\nimport { progressStyles } from './progress.styles'\n\n/**\n * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。\n *\n * `prefers-reduced-motion` が有効なときは不確定表示のアニメーションを止める。\n *\n * @example\n * <Progress label=\"アップロード中\" value={62} showValueLabel />\n */\nexport function Progress({\n size,\n color,\n label,\n value,\n minValue = 0,\n maxValue = 100,\n showValueLabel,\n className,\n classNames,\n id,\n}: ProgressProps) {\n const isIndeterminate = value === undefined\n const s = progressStyles({ size, color, isIndeterminate })\n\n return (\n <ProgressBar\n id={id}\n value={value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {({ percentage, valueText }) => (\n <>\n {(label !== undefined || showValueLabel === true) && (\n <span className=\"flex items-baseline justify-between gap-[var(--novi-gap-inline)]\">\n {label !== undefined && (\n <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {label}\n </Label>\n )}\n {showValueLabel === true && !isIndeterminate && (\n <span\n data-slot=\"valueLabel\"\n className={s.valueLabel({ class: classNames?.valueLabel })}\n >\n {valueText}\n </span>\n )}\n </span>\n )}\n\n <span data-slot=\"track\" className={s.track({ class: classNames?.track })}>\n <span\n data-slot=\"indicator\"\n className={s.indicator({ class: classNames?.indicator })}\n style={isIndeterminate ? undefined : { width: `${percentage ?? 0}%` }}\n />\n </span>\n </>\n )}\n </ProgressBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,SAAS,EACvB,MACA,OACA,OACA,OACA,WAAW,GACX,WAAW,KACX,gBACA,WACA,YACA,MACgB;CAChB,MAAM,kBAAkB,UAAU,KAAA;CAClC,MAAM,IAAI,eAAe;EAAE;EAAM;EAAO;CAAgB,CAAC;CAEzD,OACE,oBAAC,aAAD;EACM;EACG;EACG;EACA;EACO;EACjB,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAExD,WAAA,EAAE,YAAY,gBACd,qBAAA,UAAA,EAAA,UAAA,EACI,UAAU,KAAA,KAAa,mBAAmB,SAC1C,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA,GAER,mBAAmB,QAAQ,CAAC,mBAC3B,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;IAExD,UAAA;GACG,CAAA,CAEJ;EAGR,CAAA,GAAA,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACrE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;IACvD,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,cAAc,EAAE,GAAG;GACrE,CAAA;EACG,CAAA,CACN,EAAA,CAAA;CAEO,CAAA;AAEjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.styles.d.mts","names":[],"sources":["../../src/progress/progress.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"progress.styles.d.mts","names":[],"sources":["../../src/progress/progress.styles.ts"],"mappings":";;;;;;;;cAoDa,4CAAc;;IArBgB;;;IASD;;;;;;;;;;;;;;;;IATC;;;IASD;;;;;;;;;;;;;;;;IATC;;;IASD;;;;;;;;;;;;;;;KA0B9B,qBAAqB,kBAAkB"}
|
|
@@ -13,7 +13,7 @@ const slots = {
|
|
|
13
13
|
"transition-[width,transform]",
|
|
14
14
|
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
|
|
15
15
|
].join(" "),
|
|
16
|
-
valueLabel: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]
|
|
16
|
+
valueLabel: ["text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]", "[font-variant-numeric:var(--novi-font-numeric)]"].join(" ")
|
|
17
17
|
};
|
|
18
18
|
/**
|
|
19
19
|
* Progress のスタイル定義。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.styles.mjs","names":[],"sources":["../../src/progress/progress.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n progressRequiredSlots,\n progressSlots,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: 'flex flex-col gap-1.5 w-full',\n label: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)]',\n // 細い線1本。面を作らない\n track: [\n 'w-full overflow-hidden',\n 'bg-[var(--novi-color-subtle)]',\n 'rounded-[var(--novi-radius-full)]',\n ].join(' '),\n indicator: [\n 'h-full bg-[var(--c)]',\n 'transition-[width,transform]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n ].join(' '),\n //
|
|
1
|
+
{"version":3,"file":"progress.styles.mjs","names":[],"sources":["../../src/progress/progress.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n progressRequiredSlots,\n progressSlots,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: 'flex flex-col gap-1.5 w-full',\n label: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)]',\n // 細い線1本。面を作らない\n track: [\n 'w-full overflow-hidden',\n 'bg-[var(--novi-color-subtle)]',\n 'rounded-[var(--novi-radius-full)]',\n ].join(' '),\n indicator: [\n 'h-full bg-[var(--c)]',\n 'transition-[width,transform]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n ].join(' '),\n // 数字の字形はテーマが決める。Raster は等幅なので、値が更新されても行が横に踊らない\n valueLabel: [\n 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n '[font-variant-numeric:var(--novi-font-numeric)]',\n ].join(' '),\n} satisfies SlotMap<typeof progressSlots, (typeof progressRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst size: VariantMap<NoviSize, { track: string }> = {\n sm: { track: 'h-0.5' },\n md: { track: 'h-1' },\n lg: { track: 'h-1.5' },\n}\n\n/**\n * Progress のスタイル定義。\n *\n * @example\n * const myProgress = tv({ extend: progressStyles, slots: { track: 'h-2' } })\n */\nexport const progressStyles = tv({\n slots,\n variants: {\n color,\n size,\n // 不確定表示。translate のみで表現する（scale や rotate は使わない）\n isIndeterminate: {\n true: { indicator: 'w-1/3 motion-safe:animate-[novi-indeterminate_1.2s_linear_infinite]' },\n false: {},\n },\n },\n defaultVariants: { color: 'default', size: 'md', isIndeterminate: false },\n})\n\nexport type ProgressStyleProps = Parameters<typeof progressStyles>[0]\n"],"mappings":";;AAUA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CAEP,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;EACT;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,YAAY,CACV,oEACA,iDACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;AAuBA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EACR;GAvBF,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAkB/C;EACA;GAfF,IAAI,EAAE,OAAO,QAAQ;GACrB,IAAI,EAAE,OAAO,MAAM;GACnB,IAAI,EAAE,OAAO,QAAQ;EAanB;EAEA,iBAAiB;GACf,MAAM,EAAE,WAAW,sEAAsE;GACzF,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EAAE,OAAO;EAAW,MAAM;EAAM,iBAAiB;CAAM;AAC1E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.d.mts","names":[],"sources":["../../src/radio/radio.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"radio.styles.d.mts","names":[],"sources":["../../src/radio/radio.styles.ts"],"mappings":";;;;;;;;cA2Da,yCAAW;;IArBmB;;;IASC;IAAmB;IAAe;;;;;;;;;;IATnC;;;IASC;IAAmB;IAAe;;;;;;;;;;IATnC;;;IASC;IAAmB;IAAe;;;;;;;;;;;;;;;cAiCjE,8CAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWjB,kBAAkB,kBAAkB;KACpC,uBAAuB,kBAAkB"}
|
|
@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
|
|
|
3
3
|
//#region src/radio/radio.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(" "),
|
|
@@ -70,15 +70,15 @@ const radioStyles = tv({
|
|
|
70
70
|
*/
|
|
71
71
|
const radioGroupStyles = tv({
|
|
72
72
|
slots: {
|
|
73
|
-
root: "flex flex-col gap-
|
|
73
|
+
root: "flex flex-col gap-[var(--novi-gap-inline)]",
|
|
74
74
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
75
|
-
list: "flex flex-col gap-
|
|
75
|
+
list: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
76
76
|
description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
|
|
77
77
|
errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
|
|
78
78
|
},
|
|
79
79
|
variants: { orientation: {
|
|
80
|
-
vertical: { list: "flex-col gap-
|
|
81
|
-
horizontal: { list: "flex-row gap-
|
|
80
|
+
vertical: { list: "flex-col gap-[var(--novi-gap-stack)]" },
|
|
81
|
+
horizontal: { list: "flex-row gap-[var(--novi-gap-stack)] flex-wrap" }
|
|
82
82
|
} },
|
|
83
83
|
defaultVariants: { orientation: "vertical" }
|
|
84
84
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.mjs","names":[],"sources":["../../src/radio/radio.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n radioGroupRequiredSlots,\n radioGroupSlots,\n radioRequiredSlots,\n radioSlots,\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":"radio.styles.mjs","names":[],"sources":["../../src/radio/radio.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n radioGroupRequiredSlots,\n radioGroupSlots,\n radioRequiredSlots,\n radioSlots,\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 // 円は radius-full を使う数少ない例外。Checkbox（四角）との形の差で\n // 「1つだけ選ぶ」ことを示すため、ここは丸を守る\n control: [\n 'shrink-0 inline-grid place-items-center',\n 'border border-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-bg)]',\n 'transition-[border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'group-data-[selected]:border-[var(--c)]',\n 'group-data-[invalid]:border-[var(--novi-color-danger)]',\n focusRing,\n ].join(' '),\n // 内側のドットで選択を示す。塗りつぶしにしない\n indicator: 'rounded-[var(--novi-radius-full)] bg-[var(--c)]',\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 radioSlots, (typeof radioRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst size: VariantMap<NoviSize, { control: string; indicator: string; label: string }> = {\n sm: { control: 'size-4', indicator: 'size-1.5', label: 'text-[length:var(--novi-text-sm)]' },\n md: { control: 'size-5', indicator: 'size-2', label: 'text-[length:var(--novi-text-base)]' },\n lg: { control: 'size-6', indicator: 'size-2.5', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Radio のスタイル定義。\n *\n * @example\n * const myRadio = tv({ extend: radioStyles, slots: { label: 'font-medium' } })\n */\nexport const radioStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n // CheckboxGroup と同じ比。フィールドの部品は近く、選択肢どうしはそれより離す\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 radioGroupSlots, (typeof radioGroupRequiredSlots)[number]>\n\n/**\n * RadioGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: radioGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const radioGroupStyles = 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 RadioStyleProps = Parameters<typeof radioStyles>[0]\nexport type RadioGroupStyleProps = Parameters<typeof radioGroupStyles>[0]\n"],"mappings":";;;AAaA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAGV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,OAAO;CACP,aAAa;AACf;;;;;;;AAuBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAtBZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAiBrC;EAAO;GAbnB,IAAI;IAAE,SAAS;IAAU,WAAW;IAAY,OAAO;GAAoC;GAC3F,IAAI;IAAE,SAAS;IAAU,WAAW;IAAU,OAAO;GAAsC;GAC3F,IAAI;IAAE,SAAS;IAAU,WAAW;IAAY,OAAO;GAAsC;EAW1E;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;;;;;;;AAiBD,MAAa,mBAAmB,GAAG;CACjC,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"}
|
package/dist/raster.css
CHANGED
|
@@ -18,6 +18,22 @@
|
|
|
18
18
|
--novi-text-xl: 24px;
|
|
19
19
|
--novi-text-2xl: 30px;
|
|
20
20
|
--novi-text-3xl: 36px;
|
|
21
|
+
--novi-pad-surface-x: 20px;
|
|
22
|
+
--novi-pad-surface-y: 16px;
|
|
23
|
+
--novi-pad-control-x-sm: 12px;
|
|
24
|
+
--novi-pad-control-x-md: 16px;
|
|
25
|
+
--novi-pad-control-x-lg: 20px;
|
|
26
|
+
--novi-gap-inline: 8px;
|
|
27
|
+
--novi-gap-stack: 16px;
|
|
28
|
+
--novi-gap-section: 24px;
|
|
29
|
+
--novi-tracking-tight: -0.014em;
|
|
30
|
+
--novi-tracking-normal: 0em;
|
|
31
|
+
--novi-leading-body: 1.6;
|
|
32
|
+
--novi-leading-heading: 1.2;
|
|
33
|
+
--novi-font-sans: system-ui, sans-serif;
|
|
34
|
+
--novi-font-mono: ui-monospace, monospace;
|
|
35
|
+
--novi-font-heading: var(--novi-font-sans);
|
|
36
|
+
--novi-font-numeric: tabular-nums;
|
|
21
37
|
--novi-duration-fast: 120ms;
|
|
22
38
|
--novi-duration-base: 120ms;
|
|
23
39
|
--novi-duration-slow: 120ms;
|
package/dist/raster.scoped.css
CHANGED
|
@@ -18,6 +18,22 @@
|
|
|
18
18
|
--novi-text-xl: 24px;
|
|
19
19
|
--novi-text-2xl: 30px;
|
|
20
20
|
--novi-text-3xl: 36px;
|
|
21
|
+
--novi-pad-surface-x: 20px;
|
|
22
|
+
--novi-pad-surface-y: 16px;
|
|
23
|
+
--novi-pad-control-x-sm: 12px;
|
|
24
|
+
--novi-pad-control-x-md: 16px;
|
|
25
|
+
--novi-pad-control-x-lg: 20px;
|
|
26
|
+
--novi-gap-inline: 8px;
|
|
27
|
+
--novi-gap-stack: 16px;
|
|
28
|
+
--novi-gap-section: 24px;
|
|
29
|
+
--novi-tracking-tight: -0.014em;
|
|
30
|
+
--novi-tracking-normal: 0em;
|
|
31
|
+
--novi-leading-body: 1.6;
|
|
32
|
+
--novi-leading-heading: 1.2;
|
|
33
|
+
--novi-font-sans: system-ui, sans-serif;
|
|
34
|
+
--novi-font-mono: ui-monospace, monospace;
|
|
35
|
+
--novi-font-heading: var(--novi-font-sans);
|
|
36
|
+
--novi-font-numeric: tabular-nums;
|
|
21
37
|
--novi-duration-fast: 120ms;
|
|
22
38
|
--novi-duration-base: 120ms;
|
|
23
39
|
--novi-duration-slow: 120ms;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.styles.d.mts","names":[],"sources":["../../src/select/select.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"select.styles.d.mts","names":[],"sources":["../../src/select/select.styles.ts"],"mappings":";;;;;;;;;;;cAuGa,0CAAY;;IA3CyB;;;IAWN;IAAgB;;;IAeZ;;;;;;;;;;;;;;;IA1BE;;;IAWN;IAAgB;;;IAeZ;;;;;;;;;;;;;;;IA1BE;;;IAWN;IAAgB;;;IAeZ;;;;;;;;;;;;;;KAuBpC,mBAAmB,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
|
trigger: [
|
|
8
8
|
"text-[var(--novi-color-fg)]",
|
|
9
|
-
"flex items-center justify-between gap-
|
|
9
|
+
"flex items-center justify-between gap-[var(--novi-gap-inline)] w-full",
|
|
10
10
|
"text-left",
|
|
11
11
|
"bg-[var(--novi-color-bg)]",
|
|
12
12
|
"border border-[var(--novi-color-border-strong)]",
|
|
@@ -29,8 +29,8 @@ const slots = {
|
|
|
29
29
|
].join(" "),
|
|
30
30
|
listbox: "outline-none p-1 flex flex-col",
|
|
31
31
|
option: [
|
|
32
|
-
"flex items-center justify-between gap-
|
|
33
|
-
"px-
|
|
32
|
+
"flex items-center justify-between gap-[var(--novi-gap-inline)]",
|
|
33
|
+
"px-[var(--novi-pad-control-x-sm)] py-1.5 cursor-pointer outline-none",
|
|
34
34
|
"text-[var(--novi-color-fg)]",
|
|
35
35
|
"rounded-[var(--novi-radius-sm)]",
|
|
36
36
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
@@ -61,15 +61,15 @@ const selectStyles = tv({
|
|
|
61
61
|
},
|
|
62
62
|
size: {
|
|
63
63
|
sm: {
|
|
64
|
-
trigger: "h-8 px-
|
|
64
|
+
trigger: "h-8 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
|
|
65
65
|
option: "text-[length:var(--novi-text-sm)]"
|
|
66
66
|
},
|
|
67
67
|
md: {
|
|
68
|
-
trigger: "h-10 px-
|
|
68
|
+
trigger: "h-10 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]",
|
|
69
69
|
option: "text-[length:var(--novi-text-base)]"
|
|
70
70
|
},
|
|
71
71
|
lg: {
|
|
72
|
-
trigger: "h-12 px-
|
|
72
|
+
trigger: "h-12 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]",
|
|
73
73
|
option: "text-[length:var(--novi-text-base)]"
|
|
74
74
|
}
|
|
75
75
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n selectRequiredSlots,\n selectSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n trigger: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center justify-between gap-
|
|
1
|
+
{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n selectRequiredSlots,\n selectSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n trigger: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center justify-between gap-[var(--novi-gap-inline)] w-full',\n 'text-left',\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 'group-data-[invalid]:border-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n value: [\n 'truncate text-[var(--novi-color-fg)]',\n // 未選択時のプレースホルダは補助色にする\n 'data-[placeholder]:text-[var(--novi-color-muted)]',\n ].join(' '),\n icon: 'shrink-0 text-[var(--novi-color-muted)]',\n // 影を使わず、1px の境界線と背景の差だけで浮かせる\n popover: [\n 'bg-[var(--novi-color-bg)]',\n 'text-[var(--novi-color-fg)]',\n 'border border-[var(--novi-color-border)]',\n 'rounded-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-md)]',\n // トリガーと同じ幅に揃える\n 'w-[var(--trigger-width)]',\n 'overflow-auto max-h-64',\n ].join(' '),\n listbox: 'outline-none p-1 flex flex-col',\n option: [\n 'flex items-center justify-between gap-[var(--novi-gap-inline)]',\n // Menu の項目と同じ寸法。縦は 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 // 選択中は面ではなく文字の強さで示す。面を増やさない\n 'data-[focused]:bg-[var(--novi-color-subtle)]',\n 'data-[selected]:font-medium',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n ].join(' '),\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 selectSlots, (typeof selectRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { trigger: string }> = {\n solid: { trigger: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]' },\n outline: { trigger: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { trigger: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: {\n trigger: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n plain: { trigger: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button / Input と揃える。32 / 40 / 48px。 */\nconst size: VariantMap<NoviSize, { trigger: string; option: string }> = {\n sm: {\n trigger: 'h-8 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n option: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n trigger: 'h-10 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n option: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n trigger: 'h-12 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\n option: 'text-[length:var(--novi-text-base)]',\n },\n}\n\nconst radius: VariantMap<NoviRadius, { trigger: string }> = {\n none: { trigger: 'rounded-[var(--novi-radius-none)]' },\n sm: { trigger: 'rounded-[var(--novi-radius-sm)]' },\n md: { trigger: 'rounded-[var(--novi-radius-md)]' },\n lg: { trigger: 'rounded-[var(--novi-radius-lg)]' },\n full: { trigger: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Select のスタイル定義。\n *\n * @example\n * import { selectStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const mySelect = tv({ extend: selectStyles, slots: { popover: 'max-h-96' } })\n */\nexport const selectStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type SelectStyleProps = Parameters<typeof selectStyles>[0]\n"],"mappings":";;;AAYA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO,CACL,wCAEA,mDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CAEN,SAAS;EACP;EACA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;CACT,QAAQ;EACN;EAEA;EACA;EACA;EAEA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;AA6CA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GA5CZ,OAAO,EAAE,SAAS,yEAAyE;GAC3F,SAAS,EAAE,SAAS,qEAAqE;GACzF,MAAM,EAAE,SAAS,mDAAmD;GACpE,OAAO,EACL,SAAS,+EACX;GACA,OAAO,EAAE,SAAS,oCAAoC;EAsC1C;EAAS;GAjCrB,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;EAsBqB;EAAM;GAlB3B,MAAM,EAAE,SAAS,oCAAoC;GACrD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,MAAM,EAAE,SAAS,oCAAoC;EAc1B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
|
|
|
7
7
|
*/
|
|
8
8
|
const spinnerStyles = tv({
|
|
9
9
|
slots: {
|
|
10
|
-
root: "inline-flex items-center gap-
|
|
10
|
+
root: "inline-flex items-center gap-[var(--novi-gap-inline)]",
|
|
11
11
|
circle: "shrink-0 motion-safe:animate-spin text-[var(--c)]",
|
|
12
12
|
label: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]"
|
|
13
13
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.styles.mjs","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n spinnerRequiredSlots,\n spinnerSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\n/**\n * Spinner は `rotate` を使う**唯一の例外**（ADR-R2）。\n *\n * 代替のローディング表現（点滅・バーの往復）は視認性か情報量で劣るため、\n * ここだけ回転を許可している。デザイン規律の検査でも例外登録済み。\n * `prefers-reduced-motion` のときは回転を止める。\n */\nconst slots = {\n root: 'inline-flex items-center gap-
|
|
1
|
+
{"version":3,"file":"spinner.styles.mjs","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n spinnerRequiredSlots,\n spinnerSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\n/**\n * Spinner は `rotate` を使う**唯一の例外**（ADR-R2）。\n *\n * 代替のローディング表現（点滅・バーの往復）は視認性か情報量で劣るため、\n * ここだけ回転を許可している。デザイン規律の検査でも例外登録済み。\n * `prefers-reduced-motion` のときは回転を止める。\n */\nconst slots = {\n root: 'inline-flex items-center gap-[var(--novi-gap-inline)]',\n circle: 'shrink-0 motion-safe:animate-spin text-[var(--c)]',\n label: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof spinnerSlots, (typeof spinnerRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst size: VariantMap<NoviSize, { circle: string }> = {\n sm: { circle: 'size-4' },\n md: { circle: 'size-5' },\n lg: { circle: 'size-6' },\n}\n\n/**\n * Spinner のスタイル定義。\n *\n * @example\n * const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'font-medium' } })\n */\nexport const spinnerStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SpinnerStyleProps = Parameters<typeof spinnerStyles>[0]\n"],"mappings":";;;;;;;AA4CA,MAAa,gBAAgB,GAAG;CAC9B;EA3BA,MAAM;EACN,QAAQ;EACR,OAAO;CAyBP;CACA,UAAU;EAAE;GAtBZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAiBrC;EAAO;GAbnB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;EAWJ;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.d.mts","names":[],"sources":["../../src/switch/switch.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"switch.styles.d.mts","names":[],"sources":["../../src/switch/switch.styles.ts"],"mappings":";;;;;;;;cA+Ea,0CAAY;;IAjCkB;;;IASD;IAAe;IAAe;;;;;;;;;;IAT7B;;;IASD;IAAe;IAAe;;;;;;;;;;IAT7B;;;IASD;IAAe;IAAe;;;;;;;;;KA8B5D,mBAAmB,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n switchRequiredSlots,\n switchSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Switch は**ピル型ではなく矩形**（ADR-R3）。\n *\n * 一般的なピル型トグルは「角を立てる」という Raster の原則と正面から衝突する。\n * ここが「テーマ差は色と角丸ではなく構造」であることの最も分かりやすい実例になる。\n *\n * 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。\n */\nconst slots = {\n root: ['inline-flex items-center gap-
|
|
1
|
+
{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n switchRequiredSlots,\n switchSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Switch は**ピル型ではなく矩形**（ADR-R3）。\n *\n * 一般的なピル型トグルは「角を立てる」という Raster の原則と正面から衝突する。\n * ここが「テーマ差は色と角丸ではなく構造」であることの最も分かりやすい実例になる。\n *\n * 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。\n */\nconst slots = {\n root: [\n 'inline-flex items-center gap-[var(--novi-gap-inline)]',\n 'cursor-pointer',\n disabledState,\n ].join(' '),\n track: [\n 'shrink-0 inline-flex items-center',\n 'rounded-[var(--novi-radius-full)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-subtle)]',\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 focusRing,\n ].join(' '),\n // サムも矩形。translate で滑らせる（scale や rotate は使わない）\n thumb: [\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-bg)]',\n 'transition-transform',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n ].join(' '),\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 switchSlots, (typeof switchRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst size: VariantMap<NoviSize, { track: string; thumb: string; label: string }> = {\n sm: {\n track: 'h-4 w-7 p-0.5',\n thumb: 'size-3 group-data-[selected]:translate-x-3',\n label: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n track: 'h-5 w-9 p-0.5',\n thumb: 'size-4 group-data-[selected]:translate-x-4',\n label: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n track: 'h-6 w-11 p-0.5',\n thumb: 'size-5 group-data-[selected]:translate-x-5',\n label: 'text-[length:var(--novi-text-base)]',\n },\n}\n\n/**\n * Switch のスタイル定義。\n *\n * @example\n * const mySwitch = tv({ extend: switchStyles, slots: { track: 'w-12' } })\n */\nexport const switchStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SwitchStyleProps = Parameters<typeof switchStyles>[0]\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;EACL;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;AACf;;;;;;;AAmCA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAlCZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EA6BrC;EAAO;GAzBnB,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;EAWmB;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.styles.d.mts","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"tabs.styles.d.mts","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"mappings":";;;;;;;;cA+Da,wCAAU;;IAZiB;;;IAdO;IAAa;;;;;;;;;;IAcpB;;;IAdO;IAAa;;;;;;;;;;IAcpB;;;IAdO;IAAa;;;;;;;;;KAgChD,iBAAiB,kBAAkB"}
|
|
@@ -8,7 +8,7 @@ import { tv } from "tailwind-variants";
|
|
|
8
8
|
* 下線は非テキストコントラスト 3:1 を満たす色を使う。
|
|
9
9
|
*/
|
|
10
10
|
const slots = {
|
|
11
|
-
root: "flex flex-col gap-
|
|
11
|
+
root: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
12
12
|
list: "flex gap-1 border-b border-[var(--novi-color-border)]",
|
|
13
13
|
tab: [
|
|
14
14
|
"relative cursor-pointer outline-none whitespace-nowrap",
|
|
@@ -35,9 +35,9 @@ const tabsStyles = tv({
|
|
|
35
35
|
slots,
|
|
36
36
|
variants: {
|
|
37
37
|
size: {
|
|
38
|
-
sm: { tab: "px-
|
|
39
|
-
md: { tab: "px-
|
|
40
|
-
lg: { tab: "px-
|
|
38
|
+
sm: { tab: "px-[var(--novi-pad-control-x-sm)] py-1.5 text-[length:var(--novi-text-sm)]" },
|
|
39
|
+
md: { tab: "px-[var(--novi-pad-control-x-md)] py-2 text-[length:var(--novi-text-base)]" },
|
|
40
|
+
lg: { tab: "px-[var(--novi-pad-control-x-lg)] py-2.5 text-[length:var(--novi-text-base)]" }
|
|
41
41
|
},
|
|
42
42
|
variant: {
|
|
43
43
|
solid: {
|
|
@@ -57,7 +57,7 @@ const tabsStyles = tv({
|
|
|
57
57
|
tab: ""
|
|
58
58
|
},
|
|
59
59
|
plain: {
|
|
60
|
-
list: "border-transparent gap-
|
|
60
|
+
list: "border-transparent gap-[var(--novi-gap-stack)]",
|
|
61
61
|
tab: "border-b-0"
|
|
62
62
|
}
|
|
63
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.styles.mjs","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"sourcesContent":["import type {\n NoviSize,\n NoviVariant,\n SlotMap,\n tabsRequiredSlots,\n tabsSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Tabs は**アクティブを下線1本と文字色だけで示す**（ADR-R4）。\n *\n * 背景の塗り分けはミニマルの原則（面を増やさない）に反するので使わない。\n * 下線は非テキストコントラスト 3:1 を満たす色を使う。\n */\nconst slots = {\n root: 'flex flex-col gap-
|
|
1
|
+
{"version":3,"file":"tabs.styles.mjs","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"sourcesContent":["import type {\n NoviSize,\n NoviVariant,\n SlotMap,\n tabsRequiredSlots,\n tabsSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Tabs は**アクティブを下線1本と文字色だけで示す**（ADR-R4）。\n *\n * 背景の塗り分けはミニマルの原則（面を増やさない）に反するので使わない。\n * 下線は非テキストコントラスト 3:1 を満たす色を使う。\n */\nconst slots = {\n root: 'flex flex-col gap-[var(--novi-gap-stack)]',\n list: 'flex gap-1 border-b border-[var(--novi-color-border)]',\n tab: [\n 'relative cursor-pointer outline-none whitespace-nowrap',\n 'text-[var(--novi-color-muted)]',\n 'border-b border-transparent -mb-px',\n 'transition-[color,border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'hover:text-[var(--novi-color-fg)]',\n // 背景は変えない。文字色と下線だけで示す\n 'data-[selected]:text-[var(--novi-color-fg)]',\n 'data-[selected]:border-[var(--novi-color-fg)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n focusRing,\n ].join(' '),\n indicator: 'hidden',\n panel: 'outline-none text-[var(--novi-color-fg)]',\n} satisfies SlotMap<typeof tabsSlots, (typeof tabsRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { list: string; tab: string }> = {\n solid: { list: 'bg-[var(--novi-color-subtle)] p-1 border-transparent', tab: 'border-b-0' },\n outline: { list: 'border-b border-[var(--novi-color-border)]', tab: '' },\n soft: { list: 'bg-[var(--novi-color-subtle)] border-transparent', tab: '' },\n ghost: { list: 'border-transparent', tab: '' },\n // 下線も面も持たない plain は、タブの切れ目を余白だけで示す\n plain: { list: 'border-transparent gap-[var(--novi-gap-stack)]', tab: 'border-b-0' },\n}\n\n/**\n * 左右は Button / Input と同じトークン。\n * 縦だけは生値のまま残す — タブの縦余白はタブバーの行の高さそのもので、\n * 面の縦余白（16px）を当てると見出しの帯が本文より重くなる。\n */\nconst size: VariantMap<NoviSize, { tab: string }> = {\n sm: { tab: 'px-[var(--novi-pad-control-x-sm)] py-1.5 text-[length:var(--novi-text-sm)]' },\n md: { tab: 'px-[var(--novi-pad-control-x-md)] py-2 text-[length:var(--novi-text-base)]' },\n lg: { tab: 'px-[var(--novi-pad-control-x-lg)] py-2.5 text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Tabs のスタイル定義。\n *\n * @example\n * const myTabs = tv({ extend: tabsStyles, slots: { list: 'gap-6' } })\n */\nexport const tabsStyles = tv({\n slots,\n variants: { size, variant },\n defaultVariants: { variant: 'outline', size: 'md' },\n})\n\nexport type TabsStyleProps = Parameters<typeof tabsStyles>[0]\n"],"mappings":";;;;;;;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CACN,KAAK;EACH;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,OAAO;AACT;;;;;;;AA4BA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EAAE;GAbZ,IAAI,EAAE,KAAK,6EAA6E;GACxF,IAAI,EAAE,KAAK,6EAA6E;GACxF,IAAI,EAAE,KAAK,+EAA+E;EAW9E;EAAM;GA3BlB,OAAO;IAAE,MAAM;IAAwD,KAAK;GAAa;GACzF,SAAS;IAAE,MAAM;IAA8C,KAAK;GAAG;GACvE,MAAM;IAAE,MAAM;IAAoD,KAAK;GAAG;GAC1E,OAAO;IAAE,MAAM;IAAsB,KAAK;GAAG;GAE7C,OAAO;IAAE,MAAM;IAAkD,KAAK;GAAa;EAsBjE;CAAQ;CAC1B,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.styles.d.mts","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"mappings":";;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"textarea.styles.d.mts","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"mappings":";;;;;;;;;;;;;;cA2Fa,4CAAc;;IApD4B;;;IAiBN;IAAkB;;;IAed;;;;;;;;;;;IAhCE;;;IAiBN;IAAkB;;;IAed;;;;;;;;;;;IAhCE;;;IAiBN;IAAkB;;;IAed;;;;;;;;;;KA0BzC,qBAAqB,kBAAkB"}
|
|
@@ -49,15 +49,15 @@ const textareaStyles = tv({
|
|
|
49
49
|
},
|
|
50
50
|
size: {
|
|
51
51
|
sm: {
|
|
52
|
-
inputWrapper: "px-
|
|
52
|
+
inputWrapper: "px-[var(--novi-pad-control-x-sm)] py-1.5",
|
|
53
53
|
textarea: "text-[length:var(--novi-text-sm)]"
|
|
54
54
|
},
|
|
55
55
|
md: {
|
|
56
|
-
inputWrapper: "px-
|
|
56
|
+
inputWrapper: "px-[var(--novi-pad-control-x-md)] py-2",
|
|
57
57
|
textarea: "text-[length:var(--novi-text-base)]"
|
|
58
58
|
},
|
|
59
59
|
lg: {
|
|
60
|
-
inputWrapper: "px-
|
|
60
|
+
inputWrapper: "px-[var(--novi-pad-control-x-lg)] py-2.5",
|
|
61
61
|
textarea: "text-[length:var(--novi-text-base)]"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.styles.mjs","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n textareaRequiredSlots,\n textareaSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex 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 textarea: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n // 横に伸ばすとレイアウトが崩れるので縦のみ許可する\n 'resize-y',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 文字数カウンタもここに置く。専用 slot を増やさない\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 textareaSlots, (typeof textareaRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: {\n inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n },\n outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n
|
|
1
|
+
{"version":3,"file":"textarea.styles.mjs","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n textareaRequiredSlots,\n textareaSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex 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 textarea: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n // 横に伸ばすとレイアウトが崩れるので縦のみ許可する\n 'resize-y',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 文字数カウンタもここに置く。専用 slot を増やさない\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 textareaSlots, (typeof textareaRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: {\n inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n },\n outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/**\n * 1行入力と違い高さは固定しない。左右は Input と同じトークン、\n * 縦だけは生値のまま残す — この値が Input の h-8 / h-10 / h-12 に対応する\n * 実効の高さを作っており、面の縦余白（16px）を当てると1行入力との連続性が壊れる。\n */\nconst size: VariantMap<NoviSize, { inputWrapper: string; textarea: string }> = {\n sm: {\n inputWrapper: 'px-[var(--novi-pad-control-x-sm)] py-1.5',\n textarea: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n inputWrapper: 'px-[var(--novi-pad-control-x-md)] py-2',\n textarea: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'px-[var(--novi-pad-control-x-lg)] py-2.5',\n textarea: '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 * TextArea のスタイル定義。\n *\n * @example\n * import { textareaStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myTextarea = tv({\n * extend: textareaStyles,\n * slots: { textarea: 'font-mono' },\n * })\n */\nexport const textareaStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type TextareaStyleProps = Parameters<typeof textareaStyles>[0]\n"],"mappings":";;;AAYA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU;EACR;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AAsDA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GArDZ,OAAO,EACL,cAAc,yEAChB;GACA,SAAS,EAAE,cAAc,qEAAqE;GAC9F,MAAM,EAAE,cAAc,mDAAmD;GACzE,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,oCAAoC;EA6C/C;EAAS;GApCrB,IAAI;IACF,cAAc;IACd,UAAU;GACZ;GACA,IAAI;IACF,cAAc;IACd,UAAU;GACZ;GACA,IAAI;IACF,cAAc;IACd,UAAU;GACZ;EAyBqB;EAAM;GArB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAiB/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.styles.d.mts","names":[],"sources":["../../src/toast/toast.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"toast.styles.d.mts","names":[],"sources":["../../src/toast/toast.styles.ts"],"mappings":";;;;;;;;cA6Da,yCAAW;;IAvBmB;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;KAoBjC,kBAAkB,kBAAkB"}
|
|
@@ -2,10 +2,11 @@ import { focusRing } from "../styles/focus-ring.mjs";
|
|
|
2
2
|
import { tv } from "tailwind-variants";
|
|
3
3
|
//#region src/toast/toast.styles.ts
|
|
4
4
|
const slots = {
|
|
5
|
-
region: "fixed bottom-4 right-4 z-50 flex flex-col gap-
|
|
5
|
+
region: "fixed bottom-4 right-4 z-50 flex flex-col gap-[var(--novi-gap-stack)] outline-none max-w-sm",
|
|
6
6
|
root: [
|
|
7
7
|
"text-[var(--novi-color-fg)]",
|
|
8
|
-
"flex items-start gap-
|
|
8
|
+
"flex items-start gap-[var(--novi-gap-inline)] outline-none",
|
|
9
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
9
10
|
"bg-[var(--novi-color-bg)]",
|
|
10
11
|
"border border-[var(--novi-color-border-strong)]",
|
|
11
12
|
"shadow-[var(--novi-shadow-lg)]",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.styles.mjs","names":[],"sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviRadius,\n SlotMap,\n toastRequiredSlots,\n toastSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // 右下に固定する。操作の起点から遠く、視線移動が最小になる位置\n region
|
|
1
|
+
{"version":3,"file":"toast.styles.mjs","names":[],"sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviRadius,\n SlotMap,\n toastRequiredSlots,\n toastSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // 右下に固定する。操作の起点から遠く、視線移動が最小になる位置\n region:\n 'fixed bottom-4 right-4 z-50 flex flex-col gap-[var(--novi-gap-stack)] outline-none max-w-sm',\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-start gap-[var(--novi-gap-inline)] outline-none',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n icon: 'shrink-0 mt-0.5 text-[var(--c)]',\n content: 'flex-1 min-w-0 flex flex-col gap-0.5',\n title: 'font-medium text-[var(--novi-color-fg)]',\n description:\n 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] leading-[var(--novi-leading-body)]',\n closeButton: [\n 'shrink-0 grid place-items-center size-6 -mr-1',\n 'text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]',\n 'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n ].join(' '),\n action: 'shrink-0',\n} satisfies SlotMap<typeof toastSlots, (typeof toastRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)] border-l-[var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)] border-l-[var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)] border-l-[var(--novi-color-danger)]' },\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 * Toast のスタイル定義。\n *\n * @example\n * const myToast = tv({ extend: toastStyles, slots: { region: 'bottom-8' } })\n */\nexport const toastStyles = tv({\n slots,\n variants: { color, radius },\n defaultVariants: { color: 'default', radius: 'lg' },\n})\n\nexport type ToastStyleProps = Parameters<typeof toastStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CAEZ,QACE;CACF,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;CACT,OAAO;CACP,aACE;CACF,aAAa;EACX;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;AACV;;;;;;;AAyBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAxBZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,uEAAuE;GACxF,SAAS,EAAE,MAAM,uEAAuE;GACxF,QAAQ,EAAE,MAAM,qEAAqE;EAmBzE;EAAO;GAfnB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAW/B;CAAO;CAC1B,iBAAiB;EAAE,OAAO;EAAW,QAAQ;CAAK;AACpD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@novi-ui/raster",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Novi UI theme 1 — minimal / Swiss. Sharp corners, no shadows, hairline rules, restrained motion.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"tailwind-variants": "^3.3.1",
|
|
35
|
-
"@novi-ui/core": "0.
|
|
35
|
+
"@novi-ui/core": "0.4.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@size-limit/preset-small-lib": "^13.0.3",
|