@novi-ui/raster 0.1.0 → 0.2.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/badge/badge.styles.mjs +2 -2
- package/dist/badge/badge.styles.mjs.map +1 -1
- package/dist/button/button.styles.mjs +1 -1
- package/dist/button/button.styles.mjs.map +1 -1
- 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.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.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 +24 -24
- package/dist/raster.scoped.css +24 -24
- package/dist/select/select.styles.mjs +4 -4
- package/dist/select/select.styles.mjs.map +1 -1
- 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.mjs +1 -1
- package/dist/textarea/textarea.styles.mjs.map +1 -1
- package/dist/toast/toast.styles.mjs +2 -2
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +9 -2
|
@@ -6,7 +6,7 @@ const slots = {
|
|
|
6
6
|
"font-medium whitespace-nowrap",
|
|
7
7
|
"border border-transparent"
|
|
8
8
|
].join(" "),
|
|
9
|
-
dot: "shrink-0 rounded-[var(--novi-radius-
|
|
9
|
+
dot: "shrink-0 rounded-[var(--novi-radius-full)] bg-current",
|
|
10
10
|
label: "truncate"
|
|
11
11
|
};
|
|
12
12
|
const color = {
|
|
@@ -90,7 +90,7 @@ const badgeStyles = tv({
|
|
|
90
90
|
color: "default",
|
|
91
91
|
variant: "soft",
|
|
92
92
|
size: "md",
|
|
93
|
-
radius: "
|
|
93
|
+
radius: "sm"
|
|
94
94
|
}
|
|
95
95
|
});
|
|
96
96
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.styles.mjs","names":[],"sources":["../../src/badge/badge.styles.ts"],"sourcesContent":["import type {\n badgeRequiredSlots,\n badgeSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'inline-flex items-center gap-1.5',\n 'font-medium whitespace-nowrap',\n 'border border-transparent',\n ].join(' '),\n // 円ではなく正方形。Raster では点も角を立てる\n dot: 'shrink-0 rounded-[var(--novi-radius-
|
|
1
|
+
{"version":3,"file":"badge.styles.mjs","names":[],"sources":["../../src/badge/badge.styles.ts"],"sourcesContent":["import type {\n badgeRequiredSlots,\n badgeSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'inline-flex items-center gap-1.5',\n 'font-medium whitespace-nowrap',\n 'border border-transparent',\n ].join(' '),\n // 円ではなく正方形。Raster では点も角を立てる\n dot: 'shrink-0 rounded-[var(--novi-radius-full)] bg-current',\n label: 'truncate',\n} satisfies SlotMap<typeof badgeSlots, (typeof badgeRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: {\n root: [\n '[--c:var(--novi-color-default)]',\n '[--c-fg:var(--novi-color-default-fg)]',\n '[--c-text:var(--novi-color-fg)]',\n '[--c-line:var(--novi-color-border-strong)]',\n ].join(' '),\n },\n primary: {\n root: [\n '[--c:var(--novi-color-primary)]',\n '[--c-fg:var(--novi-color-primary-fg)]',\n '[--c-text:var(--novi-color-primary)]',\n '[--c-line:var(--novi-color-primary)]',\n ].join(' '),\n },\n secondary: {\n root: [\n '[--c:var(--novi-color-secondary)]',\n '[--c-fg:var(--novi-color-secondary-fg)]',\n '[--c-text:var(--novi-color-secondary)]',\n '[--c-line:var(--novi-color-secondary)]',\n ].join(' '),\n },\n success: {\n root: [\n '[--c:var(--novi-color-success)]',\n '[--c-fg:var(--novi-color-success-fg)]',\n '[--c-text:var(--novi-color-success)]',\n '[--c-line:var(--novi-color-success)]',\n ].join(' '),\n },\n warning: {\n root: [\n '[--c:var(--novi-color-warning)]',\n '[--c-fg:var(--novi-color-warning-fg)]',\n '[--c-text:var(--novi-color-warning)]',\n '[--c-line:var(--novi-color-warning)]',\n ].join(' '),\n },\n danger: {\n root: [\n '[--c:var(--novi-color-danger)]',\n '[--c-fg:var(--novi-color-danger-fg)]',\n '[--c-text:var(--novi-color-danger)]',\n '[--c-line:var(--novi-color-danger)]',\n ].join(' '),\n },\n}\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--c)] text-[var(--c-fg)]' },\n outline: { root: 'border-[var(--c-line)] text-[var(--c-text)]' },\n soft: { root: 'bg-[var(--novi-color-subtle)] text-[var(--c-text)]' },\n ghost: { root: 'text-[var(--c-text)]' },\n plain: { root: 'text-[var(--c-text)] px-0' },\n}\n\nconst size: VariantMap<NoviSize, { root: string; dot: string }> = {\n sm: { root: 'h-5 px-1.5 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n md: { root: 'h-6 px-2 text-[length:var(--novi-text-xs)]', dot: 'size-2' },\n lg: { root: 'h-7 px-2.5 text-[length:var(--novi-text-sm)]', dot: 'size-2' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Badge のスタイル定義。\n *\n * @example\n * const myBadge = tv({ extend: badgeStyles, slots: { label: 'uppercase' } })\n */\nexport const badgeStyles = tv({\n slots,\n // variant を最後に宣言する。tv は宣言順に適用するため、\n // 先に書くと `plain` の px-0 が size の px-2 に負けて ghost と同じ見た目になる。\n variants: { color, size, radius, variant },\n defaultVariants: { color: 'default', variant: 'soft', size: 'md', radius: 'sm' },\n})\n\nexport type BadgeStyleProps = Parameters<typeof badgeStyles>[0]\n"],"mappings":";;AAYA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,KAAK;CACL,OAAO;AACT;AAEA,MAAM,QAAiD;CACrD,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,WAAW,EACT,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,QAAQ,EACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;AACF;;;;;;;AA8BA,MAAa,cAAc,GAAG;CAC5B;CAGA,UAAU;EAAE;EAAO;GAvBnB,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAW;GAC5E,IAAI;IAAE,MAAM;IAA8C,KAAK;GAAS;GACxE,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAS;EAqBvD;EAAM;GAjBzB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAazB;EAAQ;GA/BjC,OAAO,EAAE,MAAM,mCAAmC;GAClD,SAAS,EAAE,MAAM,8CAA8C;GAC/D,MAAM,EAAE,MAAM,qDAAqD;GACnE,OAAO,EAAE,MAAM,uBAAuB;GACtC,OAAO,EAAE,MAAM,4BAA4B;EA2BV;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAQ,MAAM;EAAM,QAAQ;CAAK;AACjF,CAAC"}
|
|
@@ -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-2',\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-3 text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-10 px-4 text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-12 px-5 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: '
|
|
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-2',\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-3 text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-10 px-4 text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-12 px-5 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,6CAA6C;GACzD,IAAI,EAAE,MAAM,gDAAgD;GAC5D,IAAI,EAAE,MAAM,gDAAgD;EAgChC;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.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 header: 'px-4 py-3 border-b border-[var(--novi-color-border)]',\n body: 'px-4 py-4 flex-1',\n footer: 'px-4 py-3 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: '
|
|
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 header: 'px-4 py-3 border-b border-[var(--novi-color-border)]',\n body: 'px-4 py-4 flex-1',\n footer: 'px-4 py-3 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;CAEV,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,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"}
|
|
@@ -10,7 +10,7 @@ const slots = {
|
|
|
10
10
|
control: [
|
|
11
11
|
"shrink-0 inline-grid place-items-center",
|
|
12
12
|
"border border-[var(--novi-color-border-strong)]",
|
|
13
|
-
"rounded-[var(--novi-radius-
|
|
13
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
14
14
|
"bg-[var(--novi-color-bg)]",
|
|
15
15
|
"transition-[background-color,border-color]",
|
|
16
16
|
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
@@ -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-2', 'cursor-pointer', disabledState].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-
|
|
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-2', 'cursor-pointer', disabledState].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 root: 'flex flex-col gap-2',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n list: 'flex flex-col gap-2',\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-2' },\n horizontal: { list: 'flex-row gap-4 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;EAAC;EAAiC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAEjF,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;;;;;;;AAgBD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EAdP,MAAM;EACN,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;CAUP;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,iBAAiB;EACnC,YAAY,EAAE,MAAM,2BAA2B;CACjD,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}
|
|
@@ -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-2 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: { inputWrapper: 'h-8 px-2.5', input: 'text-[length:var(--novi-text-sm)]' },\n md: { inputWrapper: 'h-10 px-3', input: 'text-[length:var(--novi-text-base)]' },\n lg: { inputWrapper: 'h-12 px-3.5', input: '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 * 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: '
|
|
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-2 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: { inputWrapper: 'h-8 px-2.5', input: 'text-[length:var(--novi-text-sm)]' },\n md: { inputWrapper: 'h-10 px-3', input: 'text-[length:var(--novi-text-base)]' },\n lg: { inputWrapper: 'h-12 px-3.5', input: '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 * 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;;;;;;;;;;;;;;;AAqDA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA9CZ,OAAO,EACL,cAAc,yEAChB;GAEA,SAAS,EAAE,cAAc,qEAAqE;GAE9F,MAAM,EAAE,cAAc,mDAAmD;GAEzE,OAAO,EACL,cAAc,+EAChB;GAEA,OAAO,EAAE,cAAc,oCAAoC;EAkC/C;EAAS;GA7BrB,IAAI;IAAE,cAAc;IAAc,OAAO;GAAoC;GAC7E,IAAI;IAAE,cAAc;IAAa,OAAO;GAAsC;GAC9E,IAAI;IAAE,cAAc;IAAe,OAAO;GAAsC;EA2B3D;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"}
|
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
9
9
|
[key: string]: {
|
|
10
10
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
11
|
+
list?: import("tailwind-variants").ClassValue;
|
|
11
12
|
item?: import("tailwind-variants").ClassValue;
|
|
13
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
12
14
|
trigger?: import("tailwind-variants").ClassValue;
|
|
13
|
-
list?: import("tailwind-variants").ClassValue;
|
|
14
15
|
popover?: import("tailwind-variants").ClassValue;
|
|
15
16
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
16
17
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
17
18
|
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
|
};
|
|
@@ -23,14 +23,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
} | {
|
|
24
24
|
[x: string]: {
|
|
25
25
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
26
|
+
list?: import("tailwind-variants").ClassValue;
|
|
26
27
|
item?: import("tailwind-variants").ClassValue;
|
|
28
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
27
29
|
trigger?: import("tailwind-variants").ClassValue;
|
|
28
|
-
list?: import("tailwind-variants").ClassValue;
|
|
29
30
|
popover?: import("tailwind-variants").ClassValue;
|
|
30
31
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
31
32
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
32
33
|
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
|
};
|
|
@@ -49,14 +49,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
49
49
|
}, undefined, {
|
|
50
50
|
[key: string]: {
|
|
51
51
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
52
|
+
list?: import("tailwind-variants").ClassValue;
|
|
52
53
|
item?: import("tailwind-variants").ClassValue;
|
|
54
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
53
55
|
trigger?: import("tailwind-variants").ClassValue;
|
|
54
|
-
list?: import("tailwind-variants").ClassValue;
|
|
55
56
|
popover?: import("tailwind-variants").ClassValue;
|
|
56
57
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
57
58
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
58
59
|
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
|
};
|
|
@@ -7,8 +7,8 @@ const slots = {
|
|
|
7
7
|
"min-w-40 outline-none",
|
|
8
8
|
"bg-[var(--novi-color-bg)]",
|
|
9
9
|
"border border-[var(--novi-color-border-strong)]",
|
|
10
|
-
"rounded-[var(--novi-radius-
|
|
11
|
-
"shadow-
|
|
10
|
+
"rounded-[var(--novi-radius-lg)]",
|
|
11
|
+
"shadow-[var(--novi-shadow-md)]",
|
|
12
12
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
13
13
|
].join(" "),
|
|
14
14
|
list: "outline-none p-1 flex flex-col",
|
|
@@ -16,7 +16,7 @@ const slots = {
|
|
|
16
16
|
"flex items-center gap-3 justify-between",
|
|
17
17
|
"px-2 py-1.5 cursor-pointer outline-none",
|
|
18
18
|
"text-[var(--novi-color-fg)]",
|
|
19
|
-
"rounded-[var(--novi-radius-
|
|
19
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
20
20
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
21
21
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-default"
|
|
22
22
|
].join(" "),
|
|
@@ -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-
|
|
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-3 justify-between',\n 'px-2 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)] tabular-nums',\n separator: 'my-1 h-px bg-[var(--novi-color-border)]',\n section: 'flex flex-col',\n sectionLabel:\n 'px-2 pt-2 pb-1 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tracking-wide',\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;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,iBAAiB;CAEjB,cACE;CACF,WAAW;CACX,SAAS;CACT,cACE;AACJ;;;;;;;AAQA,MAAa,aAAa,GAAG,EAAE,MAAM,CAAC"}
|
|
@@ -17,7 +17,7 @@ const slots = {
|
|
|
17
17
|
"w-full outline-none",
|
|
18
18
|
"bg-[var(--novi-color-bg)]",
|
|
19
19
|
"border border-[var(--novi-color-border-strong)]",
|
|
20
|
-
"shadow-
|
|
20
|
+
"shadow-[var(--novi-shadow-lg)]",
|
|
21
21
|
"max-h-[calc(100dvh-2rem)] overflow-auto"
|
|
22
22
|
].join(" "),
|
|
23
23
|
header: [
|
|
@@ -60,7 +60,7 @@ const modalStyles = tv({
|
|
|
60
60
|
},
|
|
61
61
|
defaultVariants: {
|
|
62
62
|
size: "md",
|
|
63
|
-
radius: "
|
|
63
|
+
radius: "lg"
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
66
|
//#endregion
|
|
@@ -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-4',\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-
|
|
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-4',\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-4',\n 'px-6 pt-5 pb-4',\n 'border-b border-[var(--novi-color-border)]',\n ].join(' '),\n title: 'text-[length:var(--novi-text-lg)] font-medium tracking-tight text-[var(--novi-color-fg)]',\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: 'px-6 py-5 text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n footer: ['flex justify-end gap-2 px-6 py-4', 'border-t border-[var(--novi-color-border)]'].join(\n ' ',\n ),\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;EACR;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;CACP,aAAa;EACX;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,QAAQ,CAAC,oCAAoC,4CAA4C,CAAC,CAAC,KACzF,GACF;AACF;;;;;;;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"}
|
|
@@ -41,16 +41,16 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
|
|
|
41
41
|
[key: string]: {
|
|
42
42
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
43
43
|
root?: import("tailwind-variants").ClassValue;
|
|
44
|
-
arrow?: import("tailwind-variants").ClassValue;
|
|
45
44
|
content?: import("tailwind-variants").ClassValue;
|
|
45
|
+
arrow?: import("tailwind-variants").ClassValue;
|
|
46
46
|
};
|
|
47
47
|
};
|
|
48
48
|
} | {
|
|
49
49
|
[x: string]: {
|
|
50
50
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
51
51
|
root?: import("tailwind-variants").ClassValue;
|
|
52
|
-
arrow?: import("tailwind-variants").ClassValue;
|
|
53
52
|
content?: import("tailwind-variants").ClassValue;
|
|
53
|
+
arrow?: import("tailwind-variants").ClassValue;
|
|
54
54
|
};
|
|
55
55
|
};
|
|
56
56
|
} | {}, {
|
|
@@ -61,8 +61,8 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
|
|
|
61
61
|
[key: string]: {
|
|
62
62
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
63
63
|
root?: import("tailwind-variants").ClassValue;
|
|
64
|
-
arrow?: import("tailwind-variants").ClassValue;
|
|
65
64
|
content?: import("tailwind-variants").ClassValue;
|
|
65
|
+
arrow?: import("tailwind-variants").ClassValue;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
68
|
} | {}, {
|
|
@@ -6,7 +6,7 @@ const slots = {
|
|
|
6
6
|
"outline-none",
|
|
7
7
|
"bg-[var(--novi-color-bg)]",
|
|
8
8
|
"border border-[var(--novi-color-border-strong)]",
|
|
9
|
-
"shadow-
|
|
9
|
+
"shadow-[var(--novi-shadow-md)]",
|
|
10
10
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
11
11
|
].join(" "),
|
|
12
12
|
arrow: "hidden",
|
|
@@ -27,7 +27,7 @@ const popoverStyles = tv({
|
|
|
27
27
|
lg: { root: "rounded-[var(--novi-radius-lg)]" },
|
|
28
28
|
full: { root: "rounded-[var(--novi-radius-full)]" }
|
|
29
29
|
} },
|
|
30
|
-
defaultVariants: { radius: "
|
|
30
|
+
defaultVariants: { radius: "lg" }
|
|
31
31
|
});
|
|
32
32
|
/**
|
|
33
33
|
* Tooltip のスタイル定義。
|
|
@@ -40,8 +40,8 @@ const tooltipStyles = tv({ slots: {
|
|
|
40
40
|
"outline-none max-w-xs",
|
|
41
41
|
"bg-[var(--novi-color-fg)] text-[var(--novi-color-bg)]",
|
|
42
42
|
"border border-transparent",
|
|
43
|
-
"rounded-[var(--novi-radius-
|
|
44
|
-
"shadow-
|
|
43
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
44
|
+
"shadow-[var(--novi-shadow-md)]",
|
|
45
45
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
46
46
|
].join(" "),
|
|
47
47
|
arrow: "hidden",
|
|
@@ -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-
|
|
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-4 py-3 text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\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 content: 'px-2 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;AACX;;;;;;;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;CACP,SAAS;AACX,EACF,CAAC"}
|
|
@@ -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-
|
|
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 // 桁が揺れないよう等幅数字にする\n valueLabel: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tabular-nums',\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;AACd;;;;;;;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"}
|
package/dist/raster.css
CHANGED
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
@layer novi.base {
|
|
4
4
|
:root {
|
|
5
5
|
--novi-radius-none: 0px;
|
|
6
|
-
--novi-radius-sm:
|
|
7
|
-
--novi-radius-md:
|
|
8
|
-
--novi-radius-lg:
|
|
6
|
+
--novi-radius-sm: 6px;
|
|
7
|
+
--novi-radius-md: 8px;
|
|
8
|
+
--novi-radius-lg: 12px;
|
|
9
9
|
--novi-radius-full: 9999px;
|
|
10
10
|
--novi-shadow-none: none;
|
|
11
|
-
--novi-shadow-sm:
|
|
12
|
-
--novi-shadow-md:
|
|
13
|
-
--novi-shadow-lg:
|
|
11
|
+
--novi-shadow-sm: 0 1px 2px oklch(15% 0 0 / 0.06);
|
|
12
|
+
--novi-shadow-md: 0 4px 12px oklch(15% 0 0 / 0.1), 0 1px 3px oklch(15% 0 0 / 0.06);
|
|
13
|
+
--novi-shadow-lg: 0 16px 40px oklch(15% 0 0 / 0.16), 0 4px 12px oklch(15% 0 0 / 0.08);
|
|
14
14
|
--novi-text-xs: 12px;
|
|
15
15
|
--novi-text-sm: 14px;
|
|
16
16
|
--novi-text-base: 16px;
|
|
@@ -27,20 +27,20 @@
|
|
|
27
27
|
--novi-color-subtle: oklch(96% 0 0);
|
|
28
28
|
--novi-color-fg: oklch(20% 0 0);
|
|
29
29
|
--novi-color-muted: oklch(48% 0 0);
|
|
30
|
-
--novi-color-border: oklch(
|
|
30
|
+
--novi-color-border: oklch(92% 0 0);
|
|
31
31
|
--novi-color-border-strong: oklch(58% 0 0);
|
|
32
32
|
--novi-color-overlay: oklch(20% 0 0 / 0.45);
|
|
33
33
|
--novi-color-default: oklch(96% 0 0);
|
|
34
34
|
--novi-color-default-fg: oklch(20% 0 0);
|
|
35
|
-
--novi-color-primary: oklch(
|
|
35
|
+
--novi-color-primary: oklch(50% 0.19 265);
|
|
36
36
|
--novi-color-primary-fg: oklch(99% 0 0);
|
|
37
|
-
--novi-color-secondary: oklch(
|
|
37
|
+
--novi-color-secondary: oklch(48% 0.15 300);
|
|
38
38
|
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
39
|
-
--novi-color-success: oklch(
|
|
39
|
+
--novi-color-success: oklch(47% 0.13 155);
|
|
40
40
|
--novi-color-success-fg: oklch(99% 0 0);
|
|
41
|
-
--novi-color-warning: oklch(
|
|
41
|
+
--novi-color-warning: oklch(47% 0.13 60);
|
|
42
42
|
--novi-color-warning-fg: oklch(99% 0 0);
|
|
43
|
-
--novi-color-danger: oklch(
|
|
43
|
+
--novi-color-danger: oklch(50% 0.19 27);
|
|
44
44
|
--novi-color-danger-fg: oklch(99% 0 0);
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -49,20 +49,20 @@
|
|
|
49
49
|
--novi-color-subtle: oklch(21% 0 0);
|
|
50
50
|
--novi-color-fg: oklch(95% 0 0);
|
|
51
51
|
--novi-color-muted: oklch(72% 0 0);
|
|
52
|
-
--novi-color-border: oklch(
|
|
52
|
+
--novi-color-border: oklch(27% 0 0);
|
|
53
53
|
--novi-color-border-strong: oklch(55% 0 0);
|
|
54
54
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
55
55
|
--novi-color-default: oklch(25% 0 0);
|
|
56
56
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
57
|
-
--novi-color-primary: oklch(
|
|
57
|
+
--novi-color-primary: oklch(76% 0.13 265);
|
|
58
58
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
59
|
-
--novi-color-secondary: oklch(
|
|
59
|
+
--novi-color-secondary: oklch(76% 0.12 300);
|
|
60
60
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
61
|
-
--novi-color-success: oklch(
|
|
61
|
+
--novi-color-success: oklch(77% 0.13 155);
|
|
62
62
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
63
|
-
--novi-color-warning: oklch(
|
|
63
|
+
--novi-color-warning: oklch(81% 0.13 65);
|
|
64
64
|
--novi-color-warning-fg: oklch(16% 0 0);
|
|
65
|
-
--novi-color-danger: oklch(
|
|
65
|
+
--novi-color-danger: oklch(73% 0.16 27);
|
|
66
66
|
--novi-color-danger-fg: oklch(16% 0 0);
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -72,20 +72,20 @@
|
|
|
72
72
|
--novi-color-subtle: oklch(21% 0 0);
|
|
73
73
|
--novi-color-fg: oklch(95% 0 0);
|
|
74
74
|
--novi-color-muted: oklch(72% 0 0);
|
|
75
|
-
--novi-color-border: oklch(
|
|
75
|
+
--novi-color-border: oklch(27% 0 0);
|
|
76
76
|
--novi-color-border-strong: oklch(55% 0 0);
|
|
77
77
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
78
78
|
--novi-color-default: oklch(25% 0 0);
|
|
79
79
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
80
|
-
--novi-color-primary: oklch(
|
|
80
|
+
--novi-color-primary: oklch(76% 0.13 265);
|
|
81
81
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
82
|
-
--novi-color-secondary: oklch(
|
|
82
|
+
--novi-color-secondary: oklch(76% 0.12 300);
|
|
83
83
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
84
|
-
--novi-color-success: oklch(
|
|
84
|
+
--novi-color-success: oklch(77% 0.13 155);
|
|
85
85
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
86
|
-
--novi-color-warning: oklch(
|
|
86
|
+
--novi-color-warning: oklch(81% 0.13 65);
|
|
87
87
|
--novi-color-warning-fg: oklch(16% 0 0);
|
|
88
|
-
--novi-color-danger: oklch(
|
|
88
|
+
--novi-color-danger: oklch(73% 0.16 27);
|
|
89
89
|
--novi-color-danger-fg: oklch(16% 0 0);
|
|
90
90
|
}
|
|
91
91
|
}
|
package/dist/raster.scoped.css
CHANGED
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
@layer novi.base {
|
|
4
4
|
[data-novi-theme='raster'] {
|
|
5
5
|
--novi-radius-none: 0px;
|
|
6
|
-
--novi-radius-sm:
|
|
7
|
-
--novi-radius-md:
|
|
8
|
-
--novi-radius-lg:
|
|
6
|
+
--novi-radius-sm: 6px;
|
|
7
|
+
--novi-radius-md: 8px;
|
|
8
|
+
--novi-radius-lg: 12px;
|
|
9
9
|
--novi-radius-full: 9999px;
|
|
10
10
|
--novi-shadow-none: none;
|
|
11
|
-
--novi-shadow-sm:
|
|
12
|
-
--novi-shadow-md:
|
|
13
|
-
--novi-shadow-lg:
|
|
11
|
+
--novi-shadow-sm: 0 1px 2px oklch(15% 0 0 / 0.06);
|
|
12
|
+
--novi-shadow-md: 0 4px 12px oklch(15% 0 0 / 0.1), 0 1px 3px oklch(15% 0 0 / 0.06);
|
|
13
|
+
--novi-shadow-lg: 0 16px 40px oklch(15% 0 0 / 0.16), 0 4px 12px oklch(15% 0 0 / 0.08);
|
|
14
14
|
--novi-text-xs: 12px;
|
|
15
15
|
--novi-text-sm: 14px;
|
|
16
16
|
--novi-text-base: 16px;
|
|
@@ -27,20 +27,20 @@
|
|
|
27
27
|
--novi-color-subtle: oklch(96% 0 0);
|
|
28
28
|
--novi-color-fg: oklch(20% 0 0);
|
|
29
29
|
--novi-color-muted: oklch(48% 0 0);
|
|
30
|
-
--novi-color-border: oklch(
|
|
30
|
+
--novi-color-border: oklch(92% 0 0);
|
|
31
31
|
--novi-color-border-strong: oklch(58% 0 0);
|
|
32
32
|
--novi-color-overlay: oklch(20% 0 0 / 0.45);
|
|
33
33
|
--novi-color-default: oklch(96% 0 0);
|
|
34
34
|
--novi-color-default-fg: oklch(20% 0 0);
|
|
35
|
-
--novi-color-primary: oklch(
|
|
35
|
+
--novi-color-primary: oklch(50% 0.19 265);
|
|
36
36
|
--novi-color-primary-fg: oklch(99% 0 0);
|
|
37
|
-
--novi-color-secondary: oklch(
|
|
37
|
+
--novi-color-secondary: oklch(48% 0.15 300);
|
|
38
38
|
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
39
|
-
--novi-color-success: oklch(
|
|
39
|
+
--novi-color-success: oklch(47% 0.13 155);
|
|
40
40
|
--novi-color-success-fg: oklch(99% 0 0);
|
|
41
|
-
--novi-color-warning: oklch(
|
|
41
|
+
--novi-color-warning: oklch(47% 0.13 60);
|
|
42
42
|
--novi-color-warning-fg: oklch(99% 0 0);
|
|
43
|
-
--novi-color-danger: oklch(
|
|
43
|
+
--novi-color-danger: oklch(50% 0.19 27);
|
|
44
44
|
--novi-color-danger-fg: oklch(99% 0 0);
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -49,20 +49,20 @@
|
|
|
49
49
|
--novi-color-subtle: oklch(21% 0 0);
|
|
50
50
|
--novi-color-fg: oklch(95% 0 0);
|
|
51
51
|
--novi-color-muted: oklch(72% 0 0);
|
|
52
|
-
--novi-color-border: oklch(
|
|
52
|
+
--novi-color-border: oklch(27% 0 0);
|
|
53
53
|
--novi-color-border-strong: oklch(55% 0 0);
|
|
54
54
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
55
55
|
--novi-color-default: oklch(25% 0 0);
|
|
56
56
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
57
|
-
--novi-color-primary: oklch(
|
|
57
|
+
--novi-color-primary: oklch(76% 0.13 265);
|
|
58
58
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
59
|
-
--novi-color-secondary: oklch(
|
|
59
|
+
--novi-color-secondary: oklch(76% 0.12 300);
|
|
60
60
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
61
|
-
--novi-color-success: oklch(
|
|
61
|
+
--novi-color-success: oklch(77% 0.13 155);
|
|
62
62
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
63
|
-
--novi-color-warning: oklch(
|
|
63
|
+
--novi-color-warning: oklch(81% 0.13 65);
|
|
64
64
|
--novi-color-warning-fg: oklch(16% 0 0);
|
|
65
|
-
--novi-color-danger: oklch(
|
|
65
|
+
--novi-color-danger: oklch(73% 0.16 27);
|
|
66
66
|
--novi-color-danger-fg: oklch(16% 0 0);
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -72,20 +72,20 @@
|
|
|
72
72
|
--novi-color-subtle: oklch(21% 0 0);
|
|
73
73
|
--novi-color-fg: oklch(95% 0 0);
|
|
74
74
|
--novi-color-muted: oklch(72% 0 0);
|
|
75
|
-
--novi-color-border: oklch(
|
|
75
|
+
--novi-color-border: oklch(27% 0 0);
|
|
76
76
|
--novi-color-border-strong: oklch(55% 0 0);
|
|
77
77
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
78
78
|
--novi-color-default: oklch(25% 0 0);
|
|
79
79
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
80
|
-
--novi-color-primary: oklch(
|
|
80
|
+
--novi-color-primary: oklch(76% 0.13 265);
|
|
81
81
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
82
|
-
--novi-color-secondary: oklch(
|
|
82
|
+
--novi-color-secondary: oklch(76% 0.12 300);
|
|
83
83
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
84
|
-
--novi-color-success: oklch(
|
|
84
|
+
--novi-color-success: oklch(77% 0.13 155);
|
|
85
85
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
86
|
-
--novi-color-warning: oklch(
|
|
86
|
+
--novi-color-warning: oklch(81% 0.13 65);
|
|
87
87
|
--novi-color-warning-fg: oklch(16% 0 0);
|
|
88
|
-
--novi-color-danger: oklch(
|
|
88
|
+
--novi-color-danger: oklch(73% 0.16 27);
|
|
89
89
|
--novi-color-danger-fg: oklch(16% 0 0);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@novi-ui/raster",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Novi UI theme 1 — minimal / Swiss. Sharp corners, no shadows, hairline rules, restrained motion.",
|
|
5
5
|
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/yuuto22009911-hash/novi.git",
|
|
9
|
+
"directory": "packages/raster"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://novi-42r.pages.dev",
|
|
12
|
+
"bugs": "https://github.com/yuuto22009911-hash/novi/issues",
|
|
6
13
|
"type": "module",
|
|
7
14
|
"sideEffects": false,
|
|
8
15
|
"publishConfig": {
|
|
@@ -25,7 +32,7 @@
|
|
|
25
32
|
},
|
|
26
33
|
"dependencies": {
|
|
27
34
|
"tailwind-variants": "^3.3.1",
|
|
28
|
-
"@novi-ui/core": "0.1.
|
|
35
|
+
"@novi-ui/core": "0.1.1"
|
|
29
36
|
},
|
|
30
37
|
"devDependencies": {
|
|
31
38
|
"@size-limit/preset-small-lib": "^13.0.3",
|