@novi-ui/raster 0.1.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -13
- package/dist/avatar/avatar.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts +3 -3
- package/dist/badge/badge.styles.mjs +2 -2
- package/dist/badge/badge.styles.mjs.map +1 -1
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.mjs +1 -1
- package/dist/button/button.styles.mjs.map +1 -1
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/card/card.styles.mjs +1 -1
- package/dist/card/card.styles.mjs.map +1 -1
- package/dist/checkbox/checkbox.styles.mjs +1 -1
- package/dist/checkbox/checkbox.styles.mjs.map +1 -1
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/input/input.styles.mjs +1 -1
- package/dist/input/input.styles.mjs.map +1 -1
- package/dist/menu/menu.styles.d.mts +6 -6
- package/dist/menu/menu.styles.mjs +3 -3
- package/dist/menu/menu.styles.mjs.map +1 -1
- package/dist/modal/modal.styles.d.mts +3 -3
- package/dist/modal/modal.styles.mjs +2 -2
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/popover/popover.styles.mjs +4 -4
- package/dist/popover/popover.styles.mjs.map +1 -1
- package/dist/progress/progress.styles.mjs +1 -1
- package/dist/progress/progress.styles.mjs.map +1 -1
- package/dist/raster.css +207 -25
- package/dist/raster.scoped.css +207 -25
- package/dist/select/select.styles.d.mts +3 -3
- package/dist/select/select.styles.mjs +4 -4
- package/dist/select/select.styles.mjs.map +1 -1
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/skeleton/skeleton.styles.mjs +1 -1
- package/dist/skeleton/skeleton.styles.mjs.map +1 -1
- package/dist/switch/switch.styles.mjs +2 -2
- package/dist/switch/switch.styles.mjs.map +1 -1
- package/dist/textarea/textarea.styles.d.mts +3 -3
- package/dist/textarea/textarea.styles.mjs +1 -1
- package/dist/textarea/textarea.styles.mjs.map +1 -1
- package/dist/toast/toast.styles.d.mts +3 -3
- package/dist/toast/toast.styles.mjs +2 -2
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -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<"none" | "sm" | "md" | "lg" | "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<"none" | "sm" | "md" | "lg" | "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<"none" | "sm" | "md" | "lg" | "full", {
|
|
65
65
|
trigger: string;
|
|
66
66
|
}>;
|
|
67
67
|
}, {
|
|
@@ -22,8 +22,8 @@ const slots = {
|
|
|
22
22
|
"bg-[var(--novi-color-bg)]",
|
|
23
23
|
"text-[var(--novi-color-fg)]",
|
|
24
24
|
"border border-[var(--novi-color-border)]",
|
|
25
|
-
"rounded-[var(--novi-radius-
|
|
26
|
-
"shadow-
|
|
25
|
+
"rounded-[var(--novi-radius-lg)]",
|
|
26
|
+
"shadow-[var(--novi-shadow-md)]",
|
|
27
27
|
"w-[var(--trigger-width)]",
|
|
28
28
|
"overflow-auto max-h-64"
|
|
29
29
|
].join(" "),
|
|
@@ -32,7 +32,7 @@ const slots = {
|
|
|
32
32
|
"flex items-center justify-between gap-2",
|
|
33
33
|
"px-2 py-1.5 cursor-pointer outline-none",
|
|
34
34
|
"text-[var(--novi-color-fg)]",
|
|
35
|
-
"rounded-[var(--novi-radius-
|
|
35
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
36
36
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
37
37
|
"data-[selected]:font-medium",
|
|
38
38
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-default"
|
|
@@ -84,7 +84,7 @@ const selectStyles = tv({
|
|
|
84
84
|
defaultVariants: {
|
|
85
85
|
variant: "outline",
|
|
86
86
|
size: "md",
|
|
87
|
-
radius: "
|
|
87
|
+
radius: "md"
|
|
88
88
|
}
|
|
89
89
|
});
|
|
90
90
|
//#endregion
|
|
@@ -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-2 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-
|
|
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-2 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-2',\n 'px-2 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-2.5 text-[length:var(--novi-text-sm)]',\n option: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n trigger: 'h-10 px-3 text-[length:var(--novi-text-base)]',\n option: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n trigger: 'h-12 px-3.5 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;EACA;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<"none" | "sm" | "md" | "lg" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
14
14
|
root: string;
|
|
15
15
|
}, undefined, {
|
|
16
|
-
radius: VariantMap<"
|
|
16
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "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<"none" | "sm" | "md" | "lg" | "full", {
|
|
23
23
|
root: string;
|
|
24
24
|
}>;
|
|
25
25
|
}, {
|
|
@@ -14,7 +14,7 @@ const skeletonStyles = tv({
|
|
|
14
14
|
lg: { root: "rounded-[var(--novi-radius-lg)]" },
|
|
15
15
|
full: { root: "rounded-[var(--novi-radius-full)]" }
|
|
16
16
|
} },
|
|
17
|
-
defaultVariants: { radius: "
|
|
17
|
+
defaultVariants: { radius: "sm" }
|
|
18
18
|
});
|
|
19
19
|
//#endregion
|
|
20
20
|
export { skeletonStyles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.styles.mjs","names":[],"sources":["../../src/skeleton/skeleton.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n SlotMap,\n skeletonRequiredSlots,\n skeletonSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n // opacity のパルスのみ。シマー（translate するグラデーション）は使わない。\n // 動きで飾らないという Raster の原則に反するため。\n root: 'block bg-[var(--novi-color-subtle)] motion-safe:animate-pulse',\n} satisfies SlotMap<typeof skeletonSlots, (typeof skeletonRequiredSlots)[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 * Skeleton のスタイル定義。\n *\n * @example\n * const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })\n */\nexport const skeletonStyles = tv({\n slots,\n variants: { radius },\n defaultVariants: { radius: '
|
|
1
|
+
{"version":3,"file":"skeleton.styles.mjs","names":[],"sources":["../../src/skeleton/skeleton.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n SlotMap,\n skeletonRequiredSlots,\n skeletonSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n // opacity のパルスのみ。シマー（translate するグラデーション）は使わない。\n // 動きで飾らないという Raster の原則に反するため。\n root: 'block bg-[var(--novi-color-subtle)] motion-safe:animate-pulse',\n} satisfies SlotMap<typeof skeletonSlots, (typeof skeletonRequiredSlots)[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 * Skeleton のスタイル定義。\n *\n * @example\n * const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })\n */\nexport const skeletonStyles = tv({\n slots,\n variants: { radius },\n defaultVariants: { radius: 'sm' },\n})\n\nexport type SkeletonStyleProps = Parameters<typeof skeletonStyles>[0]\n"],"mappings":";;;;;;;AA6BA,MAAa,iBAAiB,GAAG;CAC/B,SAlBA,MAAM,gEAkBN;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"}
|
|
@@ -17,7 +17,7 @@ const slots = {
|
|
|
17
17
|
].join(" "),
|
|
18
18
|
track: [
|
|
19
19
|
"shrink-0 inline-flex items-center",
|
|
20
|
-
"rounded-[var(--novi-radius-
|
|
20
|
+
"rounded-[var(--novi-radius-full)]",
|
|
21
21
|
"border border-[var(--novi-color-border-strong)]",
|
|
22
22
|
"bg-[var(--novi-color-subtle)]",
|
|
23
23
|
"transition-[background-color,border-color]",
|
|
@@ -26,7 +26,7 @@ const slots = {
|
|
|
26
26
|
focusRing
|
|
27
27
|
].join(" "),
|
|
28
28
|
thumb: [
|
|
29
|
-
"rounded-[var(--novi-radius-
|
|
29
|
+
"rounded-[var(--novi-radius-full)]",
|
|
30
30
|
"bg-[var(--novi-color-bg)]",
|
|
31
31
|
"transition-transform",
|
|
32
32
|
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
|
|
@@ -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-2', 'cursor-pointer', disabledState].join(' '),\n track: [\n 'shrink-0 inline-flex items-center',\n 'rounded-[var(--novi-radius-
|
|
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-2', 'cursor-pointer', disabledState].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;EAAC;EAAkC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAClF,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"}
|
|
@@ -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<"none" | "sm" | "md" | "lg" | "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<"none" | "sm" | "md" | "lg" | "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<"none" | "sm" | "md" | "lg" | "full", {
|
|
60
60
|
inputWrapper: string;
|
|
61
61
|
}>;
|
|
62
62
|
}, {
|
|
@@ -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行入力と違い高さは固定しない。余白と文字サイズだけを段階で変える。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; textarea: string }> = {\n sm: { inputWrapper: 'px-2.5 py-1.5', textarea: 'text-[length:var(--novi-text-sm)]' },\n md: { inputWrapper: 'px-3 py-2', textarea: 'text-[length:var(--novi-text-base)]' },\n lg: { inputWrapper: 'px-3.5 py-2.5', textarea: 'text-[length:var(--novi-text-base)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * 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: '
|
|
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行入力と違い高さは固定しない。余白と文字サイズだけを段階で変える。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; textarea: string }> = {\n sm: { inputWrapper: 'px-2.5 py-1.5', textarea: 'text-[length:var(--novi-text-sm)]' },\n md: { inputWrapper: 'px-3 py-2', textarea: 'text-[length:var(--novi-text-base)]' },\n lg: { inputWrapper: 'px-3.5 py-2.5', textarea: 'text-[length:var(--novi-text-base)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * 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;;;;;;;;;;;;;AAyCA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAxCZ,OAAO,EACL,cAAc,yEAChB;GACA,SAAS,EAAE,cAAc,qEAAqE;GAC9F,MAAM,EAAE,cAAc,mDAAmD;GACzE,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,oCAAoC;EAgC/C;EAAS;GA3BrB,IAAI;IAAE,cAAc;IAAiB,UAAU;GAAoC;GACnF,IAAI;IAAE,cAAc;IAAa,UAAU;GAAsC;GACjF,IAAI;IAAE,cAAc;IAAiB,UAAU;GAAsC;EAyBhE;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"}
|
|
@@ -10,7 +10,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -26,7 +26,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
27
27
|
root: string;
|
|
28
28
|
}>;
|
|
29
|
-
radius: VariantMap<"
|
|
29
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
30
30
|
root: string;
|
|
31
31
|
}>;
|
|
32
32
|
}, {
|
|
@@ -42,7 +42,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
42
42
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
43
43
|
root: string;
|
|
44
44
|
}>;
|
|
45
|
-
radius: VariantMap<"
|
|
45
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
46
46
|
root: string;
|
|
47
47
|
}>;
|
|
48
48
|
}, {
|
|
@@ -8,7 +8,7 @@ const slots = {
|
|
|
8
8
|
"flex items-start gap-3 px-4 py-3 outline-none",
|
|
9
9
|
"bg-[var(--novi-color-bg)]",
|
|
10
10
|
"border border-[var(--novi-color-border-strong)]",
|
|
11
|
-
"shadow-
|
|
11
|
+
"shadow-[var(--novi-shadow-lg)]",
|
|
12
12
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
13
13
|
].join(" "),
|
|
14
14
|
icon: "shrink-0 mt-0.5 text-[var(--c)]",
|
|
@@ -50,7 +50,7 @@ const toastStyles = tv({
|
|
|
50
50
|
},
|
|
51
51
|
defaultVariants: {
|
|
52
52
|
color: "default",
|
|
53
|
-
radius: "
|
|
53
|
+
radius: "lg"
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
56
|
//#endregion
|
|
@@ -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: 'fixed bottom-4 right-4 z-50 flex flex-col gap-2 outline-none max-w-sm',\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-start gap-3 px-4 py-3 outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-
|
|
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: 'fixed bottom-4 right-4 z-50 flex flex-col gap-2 outline-none max-w-sm',\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-start gap-3 px-4 py-3 outline-none',\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,QAAQ;CACR,MAAM;EACJ;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"}
|