@novi-ui/raster 0.4.1 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +3 -0
- package/dist/accordion/accordion.styles.d.mts.map +1 -1
- package/dist/accordion/accordion.styles.mjs +12 -9
- package/dist/accordion/accordion.styles.mjs.map +1 -1
- package/dist/avatar/avatar.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts +3 -3
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.mjs +4 -4
- package/dist/button/button.styles.mjs.map +1 -1
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/card/card.styles.d.mts.map +1 -1
- package/dist/card/card.styles.mjs +8 -3
- package/dist/card/card.styles.mjs.map +1 -1
- package/dist/checkbox/checkbox.styles.d.mts.map +1 -1
- package/dist/checkbox/checkbox.styles.mjs +5 -5
- package/dist/checkbox/checkbox.styles.mjs.map +1 -1
- package/dist/color-picker/color-picker.styles.d.mts.map +1 -1
- package/dist/color-picker/color-picker.styles.mjs +2 -2
- package/dist/color-picker/color-picker.styles.mjs.map +1 -1
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/input/input.styles.d.mts.map +1 -1
- package/dist/input/input.styles.mjs +4 -4
- package/dist/input/input.styles.mjs.map +1 -1
- package/dist/menu/menu.styles.d.mts.map +1 -1
- package/dist/menu/menu.styles.mjs +4 -4
- package/dist/menu/menu.styles.mjs.map +1 -1
- package/dist/modal/modal.styles.d.mts +3 -3
- package/dist/modal/modal.styles.d.mts.map +1 -1
- package/dist/modal/modal.styles.mjs +15 -6
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/popover/popover.styles.d.mts.map +1 -1
- package/dist/popover/popover.styles.mjs +2 -2
- package/dist/popover/popover.styles.mjs.map +1 -1
- package/dist/progress/progress.mjs +1 -1
- package/dist/progress/progress.mjs.map +1 -1
- package/dist/progress/progress.styles.d.mts.map +1 -1
- package/dist/progress/progress.styles.mjs +1 -1
- package/dist/progress/progress.styles.mjs.map +1 -1
- package/dist/radio/radio.styles.d.mts.map +1 -1
- package/dist/radio/radio.styles.mjs +5 -5
- package/dist/radio/radio.styles.mjs.map +1 -1
- package/dist/raster.css +16 -0
- package/dist/raster.scoped.css +16 -0
- package/dist/select/select.styles.d.mts +3 -3
- package/dist/select/select.styles.d.mts.map +1 -1
- package/dist/select/select.styles.mjs +6 -6
- package/dist/select/select.styles.mjs.map +1 -1
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/spinner/spinner.styles.mjs +1 -1
- package/dist/spinner/spinner.styles.mjs.map +1 -1
- package/dist/switch/switch.styles.d.mts.map +1 -1
- package/dist/switch/switch.styles.mjs +1 -1
- package/dist/switch/switch.styles.mjs.map +1 -1
- package/dist/tabs/tabs.styles.d.mts.map +1 -1
- package/dist/tabs/tabs.styles.mjs +5 -5
- package/dist/tabs/tabs.styles.mjs.map +1 -1
- package/dist/textarea/textarea.styles.d.mts +3 -3
- package/dist/textarea/textarea.styles.d.mts.map +1 -1
- package/dist/textarea/textarea.styles.mjs +3 -3
- package/dist/textarea/textarea.styles.mjs.map +1 -1
- package/dist/toast/toast.styles.d.mts +3 -3
- package/dist/toast/toast.styles.d.mts.map +1 -1
- package/dist/toast/toast.styles.mjs +3 -2
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +5 -4
|
@@ -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"}
|
|
@@ -7,7 +7,7 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
7
7
|
* const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })
|
|
8
8
|
*/
|
|
9
9
|
declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
-
radius: VariantMap<"
|
|
10
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
@@ -15,7 +15,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
15
15
|
arrow: string;
|
|
16
16
|
content: string;
|
|
17
17
|
}, undefined, {
|
|
18
|
-
radius: VariantMap<"
|
|
18
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
19
19
|
root: string;
|
|
20
20
|
}>;
|
|
21
21
|
}, {
|
|
@@ -23,7 +23,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
arrow: string;
|
|
24
24
|
content: string;
|
|
25
25
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
26
|
-
radius: VariantMap<"
|
|
26
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
27
27
|
root: string;
|
|
28
28
|
}>;
|
|
29
29
|
}, {
|
|
@@ -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;
|
|
@@ -17,7 +17,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
17
17
|
trigger: string;
|
|
18
18
|
option: string;
|
|
19
19
|
}>;
|
|
20
|
-
radius: VariantMap<"
|
|
20
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
21
21
|
trigger: string;
|
|
22
22
|
}>;
|
|
23
23
|
}, {
|
|
@@ -39,7 +39,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
39
39
|
trigger: string;
|
|
40
40
|
option: string;
|
|
41
41
|
}>;
|
|
42
|
-
radius: VariantMap<"
|
|
42
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
43
43
|
trigger: string;
|
|
44
44
|
}>;
|
|
45
45
|
}, {
|
|
@@ -61,7 +61,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
61
61
|
trigger: string;
|
|
62
62
|
option: string;
|
|
63
63
|
}>;
|
|
64
|
-
radius: VariantMap<"
|
|
64
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
65
65
|
trigger: string;
|
|
66
66
|
}>;
|
|
67
67
|
}, {
|
|
@@ -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,19 +7,19 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
7
7
|
* const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
|
|
8
8
|
*/
|
|
9
9
|
declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
-
radius: VariantMap<"
|
|
10
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
14
14
|
root: string;
|
|
15
15
|
}, undefined, {
|
|
16
|
-
radius: VariantMap<"
|
|
16
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
17
17
|
root: string;
|
|
18
18
|
}>;
|
|
19
19
|
}, {
|
|
20
20
|
root: string;
|
|
21
21
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
22
|
-
radius: VariantMap<"
|
|
22
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
23
23
|
root: string;
|
|
24
24
|
}>;
|
|
25
25
|
}, {
|
|
@@ -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"}
|
|
@@ -20,7 +20,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
20
20
|
inputWrapper: string;
|
|
21
21
|
textarea: string;
|
|
22
22
|
}>;
|
|
23
|
-
radius: VariantMap<"
|
|
23
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
24
24
|
inputWrapper: string;
|
|
25
25
|
}>;
|
|
26
26
|
}, {
|
|
@@ -38,7 +38,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
38
38
|
inputWrapper: string;
|
|
39
39
|
textarea: string;
|
|
40
40
|
}>;
|
|
41
|
-
radius: VariantMap<"
|
|
41
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
42
42
|
inputWrapper: string;
|
|
43
43
|
}>;
|
|
44
44
|
}, {
|
|
@@ -56,7 +56,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
56
56
|
inputWrapper: string;
|
|
57
57
|
textarea: string;
|
|
58
58
|
}>;
|
|
59
|
-
radius: VariantMap<"
|
|
59
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
60
60
|
inputWrapper: string;
|
|
61
61
|
}>;
|
|
62
62
|
}, {
|
|
@@ -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"}
|