@novi-ui/flatlay 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/accordion/accordion.styles.d.mts.map +1 -1
- package/dist/accordion/accordion.styles.mjs +6 -5
- package/dist/accordion/accordion.styles.mjs.map +1 -1
- package/dist/avatar/avatar.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts.map +1 -1
- package/dist/badge/badge.styles.mjs +1 -1
- package/dist/badge/badge.styles.mjs.map +1 -1
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.mjs +4 -4
- package/dist/button/button.styles.mjs.map +1 -1
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/card/card.styles.d.mts.map +1 -1
- package/dist/card/card.styles.mjs +8 -3
- package/dist/card/card.styles.mjs.map +1 -1
- package/dist/checkbox/checkbox.styles.d.mts.map +1 -1
- package/dist/checkbox/checkbox.styles.mjs +5 -5
- package/dist/checkbox/checkbox.styles.mjs.map +1 -1
- package/dist/color-picker/color-picker.styles.mjs +1 -1
- package/dist/color-picker/color-picker.styles.mjs.map +1 -1
- package/dist/flatlay.css +14 -0
- package/dist/flatlay.scoped.css +14 -0
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/input/input.styles.d.mts.map +1 -1
- package/dist/input/input.styles.mjs +4 -4
- package/dist/input/input.styles.mjs.map +1 -1
- package/dist/menu/menu.styles.d.mts +6 -6
- package/dist/menu/menu.styles.d.mts.map +1 -1
- package/dist/menu/menu.styles.mjs +3 -3
- package/dist/menu/menu.styles.mjs.map +1 -1
- package/dist/modal/modal.styles.d.mts.map +1 -1
- package/dist/modal/modal.styles.mjs +19 -6
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/popover/popover.styles.d.mts.map +1 -1
- package/dist/popover/popover.styles.mjs +1 -1
- package/dist/popover/popover.styles.mjs.map +1 -1
- package/dist/progress/progress.mjs +1 -1
- package/dist/progress/progress.mjs.map +1 -1
- package/dist/radio/radio.styles.d.mts.map +1 -1
- package/dist/radio/radio.styles.mjs +5 -5
- package/dist/radio/radio.styles.mjs.map +1 -1
- package/dist/select/select.styles.d.mts +3 -3
- package/dist/select/select.styles.d.mts.map +1 -1
- package/dist/select/select.styles.mjs +6 -5
- package/dist/select/select.styles.mjs.map +1 -1
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/spinner/spinner.styles.mjs +1 -1
- package/dist/spinner/spinner.styles.mjs.map +1 -1
- package/dist/styles/mono.mjs +20 -2
- package/dist/styles/mono.mjs.map +1 -1
- package/dist/switch/switch.styles.d.mts.map +1 -1
- package/dist/switch/switch.styles.mjs +1 -1
- package/dist/switch/switch.styles.mjs.map +1 -1
- package/dist/tabs/tabs.styles.d.mts.map +1 -1
- package/dist/tabs/tabs.styles.mjs +11 -9
- package/dist/tabs/tabs.styles.mjs.map +1 -1
- package/dist/textarea/textarea.styles.d.mts +3 -3
- package/dist/textarea/textarea.styles.d.mts.map +1 -1
- package/dist/textarea/textarea.styles.mjs +3 -3
- package/dist/textarea/textarea.styles.mjs.map +1 -1
- package/dist/toast/toast.styles.d.mts +3 -3
- package/dist/toast/toast.styles.d.mts.map +1 -1
- package/dist/toast/toast.styles.mjs +2 -1
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/dist/tooltip/tooltip.styles.d.mts +3 -3
- package/dist/tooltip/tooltip.styles.mjs +1 -1
- package/dist/tooltip/tooltip.styles.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -11,14 +11,14 @@
|
|
|
11
11
|
declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
12
12
|
[key: string]: {
|
|
13
13
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
14
|
+
list?: import("tailwind-variants").ClassValue;
|
|
14
15
|
item?: import("tailwind-variants").ClassValue;
|
|
15
16
|
trigger?: import("tailwind-variants").ClassValue;
|
|
16
|
-
list?: import("tailwind-variants").ClassValue;
|
|
17
17
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
18
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
19
18
|
popover?: import("tailwind-variants").ClassValue;
|
|
20
19
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
21
20
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
21
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
22
22
|
section?: import("tailwind-variants").ClassValue;
|
|
23
23
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
24
24
|
};
|
|
@@ -26,14 +26,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
} | {
|
|
27
27
|
[x: string]: {
|
|
28
28
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
29
|
+
list?: import("tailwind-variants").ClassValue;
|
|
29
30
|
item?: import("tailwind-variants").ClassValue;
|
|
30
31
|
trigger?: import("tailwind-variants").ClassValue;
|
|
31
|
-
list?: import("tailwind-variants").ClassValue;
|
|
32
32
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
33
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
34
33
|
popover?: import("tailwind-variants").ClassValue;
|
|
35
34
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
36
35
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
36
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
37
37
|
section?: import("tailwind-variants").ClassValue;
|
|
38
38
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
39
39
|
};
|
|
@@ -59,14 +59,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
59
59
|
}, undefined, {
|
|
60
60
|
[key: string]: {
|
|
61
61
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
62
|
+
list?: import("tailwind-variants").ClassValue;
|
|
62
63
|
item?: import("tailwind-variants").ClassValue;
|
|
63
64
|
trigger?: import("tailwind-variants").ClassValue;
|
|
64
|
-
list?: import("tailwind-variants").ClassValue;
|
|
65
65
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
66
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
67
66
|
popover?: import("tailwind-variants").ClassValue;
|
|
68
67
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
69
68
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
69
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
70
70
|
section?: import("tailwind-variants").ClassValue;
|
|
71
71
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
72
72
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.styles.d.mts","names":[],"sources":["../../src/menu/menu.styles.ts"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"menu.styles.d.mts","names":[],"sources":["../../src/menu/menu.styles.ts"],"mappings":";;;;;;;;;;cAqEa,wCAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEX,iBAAiB,kBAAkB"}
|
|
@@ -22,8 +22,8 @@ const slots = {
|
|
|
22
22
|
].join(" "),
|
|
23
23
|
list: "outline-none flex flex-col divide-y divide-[var(--novi-color-border)]",
|
|
24
24
|
item: [
|
|
25
|
-
"flex items-center justify-between gap-
|
|
26
|
-
"min-h-7 px-
|
|
25
|
+
"flex items-center justify-between gap-[var(--novi-gap-inline)]",
|
|
26
|
+
"min-h-7 px-[var(--novi-pad-control-x-sm)] py-1 cursor-pointer outline-none",
|
|
27
27
|
"text-[var(--novi-color-fg)]",
|
|
28
28
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
29
29
|
"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
|
|
@@ -44,7 +44,7 @@ const slots = {
|
|
|
44
44
|
separator: "h-px bg-[var(--novi-color-border-strong)]",
|
|
45
45
|
section: "flex flex-col",
|
|
46
46
|
sectionLabel: [
|
|
47
|
-
"px-
|
|
47
|
+
"px-[var(--novi-pad-control-x-sm)] py-1",
|
|
48
48
|
"bg-[var(--novi-color-subtle)]",
|
|
49
49
|
"text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
|
|
50
50
|
mono
|
|
@@ -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'\nimport { disabledState } from '../styles/focus-ring'\nimport { mono, monoNumeric } from '../styles/mono'\n\n/**\n * Flatlay の Menu は **インフロー押し下げ**（FR-05）。\n *\n * 両テーマはトリガーの隣（Raster）か画面下端（Tactile）に浮かせるが、Flatlay には\n * 浮かせる先が無い。**一覧はトリガーの直後に生えて後続を押し下げる**。\n * 配置は `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。\n *\n * `placement` / `offset` は受け取るが効かない。浮かないものに寄せる先は無い。\n */\nconst slots = {\n trigger: 'outline-none',\n popover: [\n // 影が無い以上、面の存在を示せるのは罫線だけ\n 'min-w-40 outline-none',\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'overflow-hidden',\n ].join(' '),\n // 行の切れ目も線。Select の一覧と同じ帳票の目\n list: 'outline-none flex flex-col divide-y divide-[var(--novi-color-border)]',\n item: [\n 'flex items-center justify-between gap-
|
|
1
|
+
{"version":3,"file":"menu.styles.mjs","names":[],"sources":["../../src/menu/menu.styles.ts"],"sourcesContent":["import type { menuRequiredSlots, menuSlots, SlotMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState } from '../styles/focus-ring'\nimport { mono, monoNumeric } from '../styles/mono'\n\n/**\n * Flatlay の Menu は **インフロー押し下げ**（FR-05）。\n *\n * 両テーマはトリガーの隣（Raster）か画面下端（Tactile）に浮かせるが、Flatlay には\n * 浮かせる先が無い。**一覧はトリガーの直後に生えて後続を押し下げる**。\n * 配置は `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。\n *\n * `placement` / `offset` は受け取るが効かない。浮かないものに寄せる先は無い。\n */\nconst slots = {\n trigger: 'outline-none',\n popover: [\n // 影が無い以上、面の存在を示せるのは罫線だけ\n 'min-w-40 outline-none',\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'overflow-hidden',\n ].join(' '),\n // 行の切れ目も線。Select の一覧と同じ帳票の目\n list: 'outline-none flex flex-col divide-y divide-[var(--novi-color-border)]',\n item: [\n // 一覧の行は面ではなく行。左右は面の余白（20px）ではなくコントロールの刻みで取る\n 'flex items-center justify-between gap-[var(--novi-gap-inline)]',\n 'min-h-7 px-[var(--novi-pad-control-x-sm)] py-1 cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n 'data-[focused]:bg-[var(--novi-color-subtle)]',\n // 押下は反転スタンプ（ADR-F3）。選ばれた瞬間だけ面が返る\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'transition-[background-color,color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n disabledState,\n ].join(' '),\n itemLabel: 'truncate',\n itemDescription: `text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] ${mono}`,\n /**\n * ショートカットは**主役**（FR-10）。\n *\n * 両テーマは muted の小さな注記として右端に添えるが、帳票の世界では\n * 「キーで引ける」ことが操作そのものの見出しになる。本文と同じ濃さ・\n * 同じ大きさで、等幅の列として縦に揃える。\n */\n itemShortcut: `shrink-0 text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${monoNumeric}`,\n // 行の線より濃い。ここが「まとまりの切れ目」であることを線の濃さで示す\n separator: 'h-px bg-[var(--novi-color-border-strong)]',\n section: 'flex flex-col',\n // 表の見出し行。地を一段落として、浮かせずに階層を作る\n sectionLabel: [\n 'px-[var(--novi-pad-control-x-sm)] py-1',\n 'bg-[var(--novi-color-subtle)]',\n 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n mono,\n ].join(' '),\n} satisfies SlotMap<typeof menuSlots, (typeof menuRequiredSlots)[number]>\n\n/**\n * Menu のスタイル定義。\n *\n * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、\n * ここで `position` 系を書いても効かない（書く必要も無い）。\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":";;;;;;;;;;;;;AAcA,MAAM,QAAQ;CACZ,SAAS;CACT,SAAS;EAEP;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,MAAM;CACN,MAAM;EAEJ;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,iBAAiB,oEAAoE;;;;;;;;CAQrF,cAAc,0EAA0E;CAExF,WAAW;CACX,SAAS;CAET,cAAc;EACZ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AAWA,MAAa,aAAa,GAAG,EAAE,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.styles.d.mts","names":[],"sources":["../../src/modal/modal.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"modal.styles.d.mts","names":[],"sources":["../../src/modal/modal.styles.ts"],"mappings":";;;;;;;;;;;cA6Fa,yCAAW;;IAnB0B;IAAgB;;;;;;;;;;;;;;;;;IAAhB;IAAgB;;;;;;;;;;;;;;;;;IAAhB;IAAgB;;;;;;;;;;;;;;;;KAyBtD,kBAAkB,kBAAkB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { disabledState, focusRing } from "../styles/focus-ring.mjs";
|
|
2
|
-
import { mono } from "../styles/mono.mjs";
|
|
2
|
+
import { heading, mono } from "../styles/mono.mjs";
|
|
3
3
|
import { tv } from "tailwind-variants";
|
|
4
4
|
//#region src/modal/modal.styles.ts
|
|
5
5
|
/**
|
|
@@ -18,14 +18,19 @@ import { tv } from "tailwind-variants";
|
|
|
18
18
|
const slots = {
|
|
19
19
|
backdrop: "fixed inset-0 flex bg-[var(--novi-color-overlay)]",
|
|
20
20
|
panel: ["w-full h-full flex flex-col overflow-auto outline-none", "bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]"].join(" "),
|
|
21
|
-
header: [
|
|
21
|
+
header: [
|
|
22
|
+
"shrink-0 flex items-center gap-[var(--novi-gap-inline)]",
|
|
23
|
+
"px-[var(--novi-pad-surface-x)] h-10",
|
|
24
|
+
"border-b border-[var(--novi-color-border-strong)]"
|
|
25
|
+
].join(" "),
|
|
22
26
|
/**
|
|
23
27
|
* 閉じるは**ヘッダ左端の「← 戻る」**。
|
|
24
28
|
* 右上の ✕（Raster）・フッターのフルワイド（Tactile）に続く第3の位置。
|
|
25
29
|
* ✕ が「閉じて消す」なら、テイクオーバーは前の紙に**戻る**ので矢印になる。
|
|
26
30
|
*/
|
|
27
31
|
closeButton: [
|
|
28
|
-
"shrink-0 inline-flex items-center gap-1.5 h-7
|
|
32
|
+
"shrink-0 inline-flex items-center gap-1.5 h-7",
|
|
33
|
+
"px-[var(--novi-pad-control-x-sm)] -ml-[var(--novi-pad-control-x-sm)]",
|
|
29
34
|
"text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
|
|
30
35
|
"border border-transparent",
|
|
31
36
|
"hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
|
|
@@ -35,9 +40,17 @@ const slots = {
|
|
|
35
40
|
focusRing,
|
|
36
41
|
disabledState
|
|
37
42
|
].join(" "),
|
|
38
|
-
title:
|
|
39
|
-
body:
|
|
40
|
-
|
|
43
|
+
title: `truncate text-[length:var(--novi-text-base)] font-medium ${heading}`,
|
|
44
|
+
body: [
|
|
45
|
+
"grow w-full",
|
|
46
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
47
|
+
"leading-[var(--novi-leading-body)]"
|
|
48
|
+
].join(" "),
|
|
49
|
+
footer: [
|
|
50
|
+
"shrink-0 flex items-center gap-[var(--novi-gap-inline)] w-full",
|
|
51
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
52
|
+
"border-t border-[var(--novi-color-border)]"
|
|
53
|
+
].join(" ")
|
|
41
54
|
};
|
|
42
55
|
/**
|
|
43
56
|
* Modal のスタイル定義。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type { modalRequiredSlots, modalSlots, NoviSize, SlotMap, VariantMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Modal は **全画面テイクオーバー**（design.md 着手条件1）。\n *\n * 中央ダイアログ（Raster）・ボトムシート（Tactile）に続く第3の構造。\n * 浮かせる先が無いので「別の面を重ねる」ができない。代わりに**紙ごと差し替える**。\n *\n * `position` 規律の**例外1号**。viewport 全面を占めるには `fixed` が要る。\n * ただし z-index は使わない — ポータル先が body 末尾なので、DOM 順だけで最前になる。\n * ここで z-10 を1つ足した瞬間に「重なりの順序を持つ UI」に変わってしまう（ADR-F2 / FR-06）。\n *\n * 地が暗転しないのも同じ理由。暗転は「背後に何かがある」ことの表現で、\n * それ自体が z 軸の語彙になる。`--novi-color-overlay` は紙色に固定されている。\n */\nconst slots = {\n // 暗転しないので、backdrop は「覆う膜」ではなく差し替わった紙そのもの\n backdrop: 'fixed inset-0 flex bg-[var(--novi-color-overlay)]',\n panel: [\n 'w-full h-full flex flex-col overflow-auto outline-none',\n 'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n ].join(' '),\n // 書類のヘッダ行。下辺の罫線が「ここから別の文書」を示す唯一の手がかりになる\n header: [\n 'shrink-0 flex items-center gap-
|
|
1
|
+
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type { modalRequiredSlots, modalSlots, NoviSize, SlotMap, VariantMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { heading, mono } from '../styles/mono'\n\n/**\n * Flatlay の Modal は **全画面テイクオーバー**（design.md 着手条件1）。\n *\n * 中央ダイアログ（Raster）・ボトムシート（Tactile）に続く第3の構造。\n * 浮かせる先が無いので「別の面を重ねる」ができない。代わりに**紙ごと差し替える**。\n *\n * `position` 規律の**例外1号**。viewport 全面を占めるには `fixed` が要る。\n * ただし z-index は使わない — ポータル先が body 末尾なので、DOM 順だけで最前になる。\n * ここで z-10 を1つ足した瞬間に「重なりの順序を持つ UI」に変わってしまう（ADR-F2 / FR-06）。\n *\n * 地が暗転しないのも同じ理由。暗転は「背後に何かがある」ことの表現で、\n * それ自体が z 軸の語彙になる。`--novi-color-overlay` は紙色に固定されている。\n */\nconst slots = {\n // 暗転しないので、backdrop は「覆う膜」ではなく差し替わった紙そのもの\n backdrop: 'fixed inset-0 flex bg-[var(--novi-color-overlay)]',\n panel: [\n 'w-full h-full flex flex-col overflow-auto outline-none',\n 'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n ].join(' '),\n // 書類のヘッダ行。下辺の罫線が「ここから別の文書」を示す唯一の手がかりになる\n header: [\n 'shrink-0 flex items-center gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-surface-x)] h-10',\n 'border-b border-[var(--novi-color-border-strong)]',\n ].join(' '),\n /**\n * 閉じるは**ヘッダ左端の「← 戻る」**。\n * 右上の ✕（Raster）・フッターのフルワイド（Tactile）に続く第3の位置。\n * ✕ が「閉じて消す」なら、テイクオーバーは前の紙に**戻る**ので矢印になる。\n */\n closeButton: [\n // 負のマージンは左右 padding と同値でなければならない。字が header の左端\n // （= surface-x の基準線）に載らないと、下の本文と列が揃わない\n 'shrink-0 inline-flex items-center gap-1.5 h-7',\n 'px-[var(--novi-pad-control-x-sm)] -ml-[var(--novi-pad-control-x-sm)]',\n 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n 'border border-transparent',\n 'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'transition-[background-color,border-color,color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n title: `truncate text-[length:var(--novi-text-base)] font-medium ${heading}`,\n // 本文だけが行長の制限を受ける。`mx-auto` ではなく左寄せなのは、\n // 帳票の本文が紙の左端から始まるため（中央寄せは「作品」の版面設計の言葉）\n body: [\n 'grow w-full',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 操作行は上辺の罫線で本文と切る。左揃えは header の「← 戻る」と縦の線を合わせるため\n footer: [\n 'shrink-0 flex items-center gap-[var(--novi-gap-inline)] w-full',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'border-t border-[var(--novi-color-border)]',\n ].join(' '),\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\n/**\n * テイクオーバーでは面積が全画面に固定されるので、幅（Raster）も高さ（Tactile）も\n * 段階を作れない。残るのは**本文の最大行長**で、`size` はそれとして解釈する。\n *\n * 語彙は core が共通で固定し、解釈はテーマの自由（ADR-06）。3例目。\n * footer にも同じ制限を掛けるのは、操作が本文の列から外れると\n * 「どの文書に対する操作か」が読めなくなるため。\n */\nconst size: VariantMap<NoviSize | 'full', { body: string; footer: string }> = {\n sm: { body: 'max-w-[32rem]', footer: 'max-w-[32rem]' },\n md: { body: 'max-w-[44rem]', footer: 'max-w-[44rem]' },\n lg: { body: 'max-w-[56rem]', footer: 'max-w-[56rem]' },\n full: { body: 'max-w-none', footer: 'max-w-none' },\n}\n\n// `radius` は実装しない。全画面を占める面に角は無く、書いても描画に出ない。\n// 死ぬコードを置くくらいなら、解釈を持たないことを明示する（README に記載）。\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * import { modalStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myModal = tv({ extend: modalStyles, slots: { body: 'max-w-[80rem]' } })\n */\nexport const modalStyles = tv({\n slots,\n variants: { size },\n defaultVariants: { size: 'md' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n\n/**\n * 「← 戻る」の矢印。**等幅で出す**（ADR-F7）。\n *\n * SVG ではなく文字なのは、記号そのものが帳票の語彙だから。\n * 等幅にすると、隣に別の記号ボタンが並んだときに幅が揃う。\n */\nexport const backArrowClass = `shrink-0 ${mono}`\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ;CAEZ,UAAU;CACV,OAAO,CACL,0DACA,uDACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;EACN;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;;;;;;CAMV,aAAa;EAGX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO,4DAA4D;CAGnE,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;EACN;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AA6BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU,EAAE;EApBZ,IAAI;GAAE,MAAM;GAAiB,QAAQ;EAAgB;EACrD,IAAI;GAAE,MAAM;GAAiB,QAAQ;EAAgB;EACrD,IAAI;GAAE,MAAM;GAAiB,QAAQ;EAAgB;EACrD,MAAM;GAAE,MAAM;GAAc,QAAQ;EAAa;CAiBrC,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;;;;;;AAUD,MAAa,iBAAiB,YAAY"}
|
|
@@ -10,7 +10,7 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
10
10
|
* const myPopover = tv({ extend: popoverStyles, slots: { content: 'px-4' } })
|
|
11
11
|
*/
|
|
12
12
|
declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -18,7 +18,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
18
18
|
arrow: string;
|
|
19
19
|
content: string;
|
|
20
20
|
}, undefined, {
|
|
21
|
-
radius: VariantMap<"
|
|
21
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
22
22
|
root: string;
|
|
23
23
|
}>;
|
|
24
24
|
}, {
|
|
@@ -26,7 +26,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
arrow: string;
|
|
27
27
|
content: string;
|
|
28
28
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
29
|
-
radius: VariantMap<"
|
|
29
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
30
30
|
root: string;
|
|
31
31
|
}>;
|
|
32
32
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.styles.d.mts","names":[],"sources":["../../src/popover/popover.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"popover.styles.d.mts","names":[],"sources":["../../src/popover/popover.styles.ts"],"mappings":";;;;;;;;;;;cAqDa,2CAAa;;IAjBmB;;;;;;;;IAAA;;;;;;;;IAAA;;;;;;;KAuBjC,oBAAoB,kBAAkB"}
|
|
@@ -19,7 +19,7 @@ const slots = {
|
|
|
19
19
|
"bg-[var(--novi-color-subtle)] text-[var(--novi-color-fg)]"
|
|
20
20
|
].join(" "),
|
|
21
21
|
arrow: "hidden",
|
|
22
|
-
content: "px-
|
|
22
|
+
content: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]", "leading-[var(--novi-leading-body)]"].join(" ")
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
25
|
* Popover のスタイル定義。
|
|
@@ -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 VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\n/**\n * Flatlay の Popover は **インフローの注記面**（FR-05）。\n *\n * 両テーマはトリガーに紐づいて浮かぶが、Flatlay には浮かせる先が無い。\n * トリガーの直後に面が生えて後続を押し下げる。矢印（`arrow`）を描かないのは\n * Raster と同じ理由ではなく、**指す先が無いから**。浮いていないものは\n * 「あちらから来た」と示す必要がない。\n *\n * 地を一段落とすのは Menu / Select の展開部と役割を分けるため。\n * あちらは選ぶための一覧で、こちらは**読むための注記**。同じ紙の上で、\n * 書き足された欄であることを地の濃さが示す。\n */\nconst slots = {\n root: [\n 'outline-none',\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-subtle)] text-[var(--novi-color-fg)]',\n ].join(' '),\n // 浮いていないので、どこから来た面かを指す必要が無い\n arrow: 'hidden',\n content: 'px-
|
|
1
|
+
{"version":3,"file":"popover.styles.mjs","names":[],"sources":["../../src/popover/popover.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n popoverRequiredSlots,\n popoverSlots,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\n/**\n * Flatlay の Popover は **インフローの注記面**（FR-05）。\n *\n * 両テーマはトリガーに紐づいて浮かぶが、Flatlay には浮かせる先が無い。\n * トリガーの直後に面が生えて後続を押し下げる。矢印（`arrow`）を描かないのは\n * Raster と同じ理由ではなく、**指す先が無いから**。浮いていないものは\n * 「あちらから来た」と示す必要がない。\n *\n * 地を一段落とすのは Menu / Select の展開部と役割を分けるため。\n * あちらは選ぶための一覧で、こちらは**読むための注記**。同じ紙の上で、\n * 書き足された欄であることを地の濃さが示す。\n */\nconst slots = {\n root: [\n 'outline-none',\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-subtle)] text-[var(--novi-color-fg)]',\n ].join(' '),\n // 浮いていないので、どこから来た面かを指す必要が無い\n arrow: 'hidden',\n // 読むための注記なので、余白は面の刻みで取り、密度は行送りが担う\n content: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n} satisfies SlotMap<typeof popoverSlots, (typeof popoverRequiredSlots)[number]>\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Popover のスタイル定義。\n *\n * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、\n * ここで `position` 系を書いても効かない（書く必要も無い）。\n *\n * @example\n * const myPopover = tv({ extend: popoverStyles, slots: { content: 'px-4' } })\n */\nexport const popoverStyles = tv({\n slots,\n variants: { radius },\n defaultVariants: { radius: 'sm' },\n})\n\nexport type PopoverStyleProps = Parameters<typeof popoverStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;CAEP,SAAS,CACP,iEACA,oCACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AAmBA,MAAa,gBAAgB,GAAG;CAC9B;CACA,UAAU,EAAE;EAlBZ,MAAM,EAAE,MAAM,oCAAoC;EAClD,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,MAAM,EAAE,MAAM,oCAAoC;CActC,EAAO;CACnB,iBAAiB,EAAE,QAAQ,KAAK;AAClC,CAAC"}
|
|
@@ -28,7 +28,7 @@ function Progress({ size, color, label, value, minValue = 0, maxValue = 100, sho
|
|
|
28
28
|
"data-slot": "root",
|
|
29
29
|
className: s.root({ class: [className, classNames?.root] }),
|
|
30
30
|
children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [(label !== void 0 || showValueLabel === true) && /* @__PURE__ */ jsxs("span", {
|
|
31
|
-
className: "flex items-baseline justify-between gap-
|
|
31
|
+
className: "flex items-baseline justify-between gap-[var(--novi-gap-inline)]",
|
|
32
32
|
children: [label !== void 0 && /* @__PURE__ */ jsx(Label, {
|
|
33
33
|
"data-slot": "label",
|
|
34
34
|
className: s.label({ class: classNames?.label }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["'use client'\n\nimport type { ProgressProps } from '@novi-ui/core'\nimport { Label, ProgressBar } from 'react-aria-components'\nimport { progressStyles } from './progress.styles'\n\n/**\n * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。\n *\n * Flatlay の進捗は**引かれていく罫線**で、面が伸びるのではなく線が引かれる。\n * `prefers-reduced-motion` が有効なときは不確定表示の点滅を止める。\n *\n * @example\n * <Progress label=\"アップロード中\" value={62} showValueLabel />\n */\nexport function Progress({\n size,\n color,\n label,\n value,\n minValue = 0,\n maxValue = 100,\n showValueLabel,\n className,\n classNames,\n id,\n}: ProgressProps) {\n const isIndeterminate = value === undefined\n const s = progressStyles({ size, color, isIndeterminate })\n\n return (\n <ProgressBar\n id={id}\n value={value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {({ percentage, valueText }) => (\n <>\n {(label !== undefined || showValueLabel === true) && (\n <span className=\"flex items-baseline justify-between gap-
|
|
1
|
+
{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["'use client'\n\nimport type { ProgressProps } from '@novi-ui/core'\nimport { Label, ProgressBar } from 'react-aria-components'\nimport { progressStyles } from './progress.styles'\n\n/**\n * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。\n *\n * Flatlay の進捗は**引かれていく罫線**で、面が伸びるのではなく線が引かれる。\n * `prefers-reduced-motion` が有効なときは不確定表示の点滅を止める。\n *\n * @example\n * <Progress label=\"アップロード中\" value={62} showValueLabel />\n */\nexport function Progress({\n size,\n color,\n label,\n value,\n minValue = 0,\n maxValue = 100,\n showValueLabel,\n className,\n classNames,\n id,\n}: ProgressProps) {\n const isIndeterminate = value === undefined\n const s = progressStyles({ size, color, isIndeterminate })\n\n return (\n <ProgressBar\n id={id}\n value={value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {({ percentage, valueText }) => (\n <>\n {(label !== undefined || showValueLabel === true) && (\n <span className=\"flex items-baseline justify-between gap-[var(--novi-gap-inline)]\">\n {label !== undefined && (\n <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {label}\n </Label>\n )}\n {showValueLabel === true && !isIndeterminate && (\n <span\n data-slot=\"valueLabel\"\n className={s.valueLabel({ class: classNames?.valueLabel })}\n >\n {valueText}\n </span>\n )}\n </span>\n )}\n\n <span data-slot=\"track\" className={s.track({ class: classNames?.track })}>\n <span\n data-slot=\"indicator\"\n className={s.indicator({ class: classNames?.indicator })}\n style={isIndeterminate ? undefined : { width: `${percentage ?? 0}%` }}\n />\n </span>\n </>\n )}\n </ProgressBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,SAAS,EACvB,MACA,OACA,OACA,OACA,WAAW,GACX,WAAW,KACX,gBACA,WACA,YACA,MACgB;CAChB,MAAM,kBAAkB,UAAU,KAAA;CAClC,MAAM,IAAI,eAAe;EAAE;EAAM;EAAO;CAAgB,CAAC;CAEzD,OACE,oBAAC,aAAD;EACM;EACG;EACG;EACA;EACO;EACjB,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAExD,WAAA,EAAE,YAAY,gBACd,qBAAA,UAAA,EAAA,UAAA,EACI,UAAU,KAAA,KAAa,mBAAmB,SAC1C,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA,GAER,mBAAmB,QAAQ,CAAC,mBAC3B,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;IAExD,UAAA;GACG,CAAA,CAEJ;EAGR,CAAA,GAAA,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACrE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;IACvD,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,cAAc,EAAE,GAAG;GACrE,CAAA;EACG,CAAA,CACN,EAAA,CAAA;CAEO,CAAA;AAEjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.d.mts","names":[],"sources":["../../src/radio/radio.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"radio.styles.d.mts","names":[],"sources":["../../src/radio/radio.styles.ts"],"mappings":";;;;;;;;;;;cAwEa,yCAAW;;IAzBmB;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;;;;;;cAoCjE,8CAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWjB,kBAAkB,kBAAkB;KACpC,uBAAuB,kBAAkB"}
|
|
@@ -14,7 +14,7 @@ import { tv } from "tailwind-variants";
|
|
|
14
14
|
*/
|
|
15
15
|
const slots = {
|
|
16
16
|
root: [
|
|
17
|
-
"inline-flex items-start gap-
|
|
17
|
+
"inline-flex items-start gap-[var(--novi-gap-inline)]",
|
|
18
18
|
"cursor-pointer",
|
|
19
19
|
disabledState
|
|
20
20
|
].join(" "),
|
|
@@ -77,9 +77,9 @@ const radioStyles = tv({
|
|
|
77
77
|
}
|
|
78
78
|
});
|
|
79
79
|
const groupSlots = {
|
|
80
|
-
root: "flex flex-col gap-
|
|
80
|
+
root: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
81
81
|
label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
|
|
82
|
-
list: "flex flex-col gap-
|
|
82
|
+
list: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
83
83
|
description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,
|
|
84
84
|
errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`
|
|
85
85
|
};
|
|
@@ -92,8 +92,8 @@ const groupSlots = {
|
|
|
92
92
|
const radioGroupStyles = tv({
|
|
93
93
|
slots: groupSlots,
|
|
94
94
|
variants: { orientation: {
|
|
95
|
-
vertical: { list: "flex-col gap-
|
|
96
|
-
horizontal: { list: "flex-row gap-
|
|
95
|
+
vertical: { list: "flex-col gap-[var(--novi-gap-stack)]" },
|
|
96
|
+
horizontal: { list: "flex-row gap-[var(--novi-gap-stack)] flex-wrap" }
|
|
97
97
|
} },
|
|
98
98
|
defaultVariants: { orientation: "vertical" }
|
|
99
99
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.mjs","names":[],"sources":["../../src/radio/radio.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n radioGroupRequiredSlots,\n radioGroupSlots,\n radioRequiredSlots,\n radioSlots,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Radio は**円**。書類の直角（radius 0/2/2/4）に対する数少ない例外。\n *\n * ここで角を守ると Checkbox と同じ形になり、「複数選べる」のか\n * 「1つだけ」なのかが形から読めなくなる。角丸の規律より**形の弁別**が優先する。\n * Avatar と並ぶ `radius-full` の例外で、どちらも意味を形が担っている。\n *\n * 印が Checkbox のような文字ではなく塗りの点なのは、円の中に字を置くと\n * 小さすぎて読めないため。ここだけは記号ではなく面が状態を持つ。\n */\nconst slots = {\n root: ['inline-flex items-start gap-
|
|
1
|
+
{"version":3,"file":"radio.styles.mjs","names":[],"sources":["../../src/radio/radio.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n radioGroupRequiredSlots,\n radioGroupSlots,\n radioRequiredSlots,\n radioSlots,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Radio は**円**。書類の直角（radius 0/2/2/4）に対する数少ない例外。\n *\n * ここで角を守ると Checkbox と同じ形になり、「複数選べる」のか\n * 「1つだけ」なのかが形から読めなくなる。角丸の規律より**形の弁別**が優先する。\n * Avatar と並ぶ `radius-full` の例外で、どちらも意味を形が担っている。\n *\n * 印が Checkbox のような文字ではなく塗りの点なのは、円の中に字を置くと\n * 小さすぎて読めないため。ここだけは記号ではなく面が状態を持つ。\n */\nconst slots = {\n root: [\n 'inline-flex items-start gap-[var(--novi-gap-inline)]',\n 'cursor-pointer',\n disabledState,\n ].join(' '),\n control: [\n 'shrink-0 inline-grid place-items-center',\n 'border border-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-bg)]',\n 'group-data-[selected]:border-[var(--c)]',\n 'group-data-[invalid]:border-[var(--novi-color-danger)]',\n 'transition-[border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n ].join(' '),\n // 内側の点で示す。枠ごと塗り潰すと Checkbox の選択と同じ見え方になる\n indicator: 'rounded-[var(--novi-radius-full)] bg-[var(--c)]',\n label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n} satisfies SlotMap<typeof radioSlots, (typeof radioRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\n/** Checkbox と同じ 14 / 16 / 20px。並べたときに列が揃わないと帳票として読めない。 */\nconst size: VariantMap<NoviSize, { control: string; indicator: string; label: string }> = {\n sm: { control: 'size-3.5', indicator: 'size-1.5', label: 'text-[length:var(--novi-text-sm)]' },\n md: { control: 'size-4', indicator: 'size-2', label: 'text-[length:var(--novi-text-base)]' },\n lg: { control: 'size-5', indicator: 'size-2.5', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Radio のスタイル定義。\n *\n * @example\n * import { radioStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myRadio = tv({ extend: radioStyles, slots: { label: 'font-medium' } })\n */\nexport const radioStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n root: 'flex flex-col gap-[var(--novi-gap-stack)]',\n // 項目名は等幅（Input / CheckboxGroup と同じ扱い・ADR-F7）\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n list: 'flex flex-col gap-[var(--novi-gap-stack)]',\n description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,\n} satisfies SlotMap<typeof radioGroupSlots, (typeof radioGroupRequiredSlots)[number]>\n\n/**\n * RadioGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: radioGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const radioGroupStyles = tv({\n slots: groupSlots,\n variants: {\n orientation: {\n vertical: { list: 'flex-col gap-[var(--novi-gap-stack)]' },\n horizontal: { list: 'flex-row gap-[var(--novi-gap-stack)] flex-wrap' },\n },\n },\n defaultVariants: { orientation: 'vertical' },\n})\n\nexport type RadioStyleProps = Parameters<typeof radioStyles>[0]\nexport type RadioGroupStyleProps = Parameters<typeof radioGroupStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,OAAO;CACP,aAAa,oEAAoE;AACnF;;;;;;;;;;AA2BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA1BZ,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;EAqBrC;EAAO;GAhBnB,IAAI;IAAE,SAAS;IAAY,WAAW;IAAY,OAAO;GAAoC;GAC7F,IAAI;IAAE,SAAS;IAAU,WAAW;IAAU,OAAO;GAAsC;GAC3F,IAAI;IAAE,SAAS;IAAU,WAAW;IAAY,OAAO;GAAsC;EAc1E;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;AAED,MAAM,aAAa;CACjB,MAAM;CAEN,OAAO,iEAAiE;CACxE,MAAM;CACN,aAAa,oEAAoE;CACjF,cAAc,qEAAqE;AACrF;;;;;;;AAQA,MAAa,mBAAmB,GAAG;CACjC,OAAO;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,uCAAuC;EACzD,YAAY,EAAE,MAAM,iDAAiD;CACvE,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}
|
|
@@ -17,7 +17,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
17
17
|
trigger: string;
|
|
18
18
|
option: string;
|
|
19
19
|
}>;
|
|
20
|
-
radius: VariantMap<"
|
|
20
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
21
21
|
trigger: string;
|
|
22
22
|
}>;
|
|
23
23
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -39,7 +39,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
39
39
|
trigger: string;
|
|
40
40
|
option: string;
|
|
41
41
|
}>;
|
|
42
|
-
radius: VariantMap<"
|
|
42
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
43
43
|
trigger: string;
|
|
44
44
|
}>;
|
|
45
45
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -61,7 +61,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
61
61
|
trigger: string;
|
|
62
62
|
option: string;
|
|
63
63
|
}>;
|
|
64
|
-
radius: VariantMap<"
|
|
64
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
65
65
|
trigger: string;
|
|
66
66
|
}>;
|
|
67
67
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.styles.d.mts","names":[],"sources":["../../src/select/select.styles.ts"],"mappings":";;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"select.styles.d.mts","names":[],"sources":["../../src/select/select.styles.ts"],"mappings":";;;;;;;;;;;;;;cAiIa,0CAAY;;IAnDmB;IAAgB;;;IAeZ;;;IAYE;;;;;;;;;;;;;;;IA3BN;IAAgB;;;IAeZ;;;IAYE;;;;;;;;;;;;;;;IA3BN;IAAgB;;;IAeZ;;;IAYE;;;;;;;;;;;;;;KA+BtC,mBAAmB,kBAAkB"}
|
|
@@ -16,7 +16,7 @@ const slots = {
|
|
|
16
16
|
root: ["flex flex-col gap-1.5", "[&>[data-novi-inflow]:empty]:hidden"].join(" "),
|
|
17
17
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
18
18
|
trigger: [
|
|
19
|
-
"flex items-center justify-between gap-
|
|
19
|
+
"flex items-center justify-between gap-[var(--novi-gap-inline)] w-full text-left",
|
|
20
20
|
"text-[var(--novi-color-fg)]",
|
|
21
21
|
"border",
|
|
22
22
|
"rounded-[var(--novi-radius-sm)]",
|
|
@@ -37,7 +37,8 @@ const slots = {
|
|
|
37
37
|
].join(" "),
|
|
38
38
|
listbox: "outline-none flex flex-col divide-y divide-[var(--novi-color-border)]",
|
|
39
39
|
option: [
|
|
40
|
-
"flex items-center gap-
|
|
40
|
+
"flex items-center gap-[var(--novi-gap-inline)] px-[var(--novi-pad-control-x-sm)]",
|
|
41
|
+
"cursor-pointer outline-none",
|
|
41
42
|
"text-[var(--novi-color-fg)]",
|
|
42
43
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
43
44
|
"data-[selected]:font-medium",
|
|
@@ -65,15 +66,15 @@ const selectStyles = tv({
|
|
|
65
66
|
variants: {
|
|
66
67
|
size: {
|
|
67
68
|
sm: {
|
|
68
|
-
trigger: "h-7 px-
|
|
69
|
+
trigger: "h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
|
|
69
70
|
option: "h-6 text-[length:var(--novi-text-sm)]"
|
|
70
71
|
},
|
|
71
72
|
md: {
|
|
72
|
-
trigger: "h-8 px-
|
|
73
|
+
trigger: "h-8 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]",
|
|
73
74
|
option: "h-7 text-[length:var(--novi-text-base)]"
|
|
74
75
|
},
|
|
75
76
|
lg: {
|
|
76
|
-
trigger: "h-10 px-
|
|
77
|
+
trigger: "h-10 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]",
|
|
77
78
|
option: "h-8 text-[length:var(--novi-text-base)]"
|
|
78
79
|
}
|
|
79
80
|
},
|
|
@@ -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'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Select は **インフロー押し下げ**（design.md 着手条件2）。\n *\n * Raster はトリガーの隣に浮き、Tactile は画面下端のシートで出る。Flatlay には\n * 浮かせる先が無いので、**展開部はフローの中に生えて後続を押し下げる**。\n * 配置そのものは `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。\n *\n * 影が使えない以上、展開面が「面である」ことを示せるのは罫線だけ。\n * 全 slot が幅のある線を持ち、行の切れ目も線で示す。\n */\nconst slots = {\n root: [\n 'flex flex-col gap-1.5',\n // 展開部の置き場所（`data-novi-inflow`）は閉じている間も残る。flex の gap は\n // 空の子にも掛かるので、畳まないと閉じたまま余白が 1 つ増える\n '[&>[data-novi-inflow]:empty]:hidden',\n ].join(' '),\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n trigger: [\n 'flex items-center justify-between gap-
|
|
1
|
+
{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n selectRequiredSlots,\n selectSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Select は **インフロー押し下げ**（design.md 着手条件2）。\n *\n * Raster はトリガーの隣に浮き、Tactile は画面下端のシートで出る。Flatlay には\n * 浮かせる先が無いので、**展開部はフローの中に生えて後続を押し下げる**。\n * 配置そのものは `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。\n *\n * 影が使えない以上、展開面が「面である」ことを示せるのは罫線だけ。\n * 全 slot が幅のある線を持ち、行の切れ目も線で示す。\n */\nconst slots = {\n root: [\n 'flex flex-col gap-1.5',\n // 展開部の置き場所（`data-novi-inflow`）は閉じている間も残る。flex の gap は\n // 空の子にも掛かるので、畳まないと閉じたまま余白が 1 つ増える\n '[&>[data-novi-inflow]:empty]:hidden',\n ].join(' '),\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n trigger: [\n 'flex items-center justify-between gap-[var(--novi-gap-inline)] w-full text-left',\n 'text-[var(--novi-color-fg)]',\n // 罫線の幅は全 variant が持つ。色は variant が決める（Button と同じ型）\n 'border',\n 'rounded-[var(--novi-radius-sm)]',\n // 押下は反転。開閉という状態は矢印が持ち、押した瞬間だけを面が返す（ADR-F3）\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'group-data-[invalid]:border-[var(--novi-color-danger)]',\n 'transition-[background-color,border-color,color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n value: 'truncate data-[placeholder]:text-[var(--novi-color-muted)]',\n // 開閉の向きは記号で示す。回すのは z 軸の語彙なので、字を差し替える（FR-11）\n icon: `shrink-0 leading-none text-[var(--novi-color-muted)] ${mono}`,\n popover: [\n // ここが構造差そのもの。浮かないので、面の存在は罫線が引き受ける\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'overflow-hidden',\n ].join(' '),\n // 行の切れ目も線。押し下げた面の中で、どこまでが 1 行かを示せるのはこれだけ\n listbox: 'outline-none flex flex-col divide-y divide-[var(--novi-color-border)]',\n option: [\n // 一覧の行は面ではなく行。左右は面の余白（20px）ではなくコントロールの刻みで取る\n 'flex items-center gap-[var(--novi-gap-inline)] px-[var(--novi-pad-control-x-sm)]',\n 'cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n 'data-[focused]:bg-[var(--novi-color-subtle)]',\n 'data-[selected]:font-medium',\n 'transition-[background-color,color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n disabledState,\n ].join(' '),\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof selectSlots, (typeof selectRequiredSlots)[number]>\n\n/**\n * `size` はトリガーの寸法と行の密度。**どちらも帳票の行**（Tactile は指の下限 48px）。\n *\n * 展開しても 1 行が 28px 前後に収まるので、押し下げ量が読める範囲に留まる。\n * 行を大きくすると、開いた瞬間にページが視界の外まで伸びる。\n */\nconst size: VariantMap<NoviSize, { trigger: string; option: string }> = {\n sm: {\n trigger: 'h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n option: 'h-6 text-[length:var(--novi-text-sm)]',\n },\n md: {\n trigger: 'h-8 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n option: 'h-7 text-[length:var(--novi-text-base)]',\n },\n lg: {\n trigger: 'h-10 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\n option: 'h-8 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 は `color` を受け取らないので、\n * Button のようなローカル変数は要らず、中立トークンだけで書ける。\n */\nconst variant: VariantMap<NoviVariant, { trigger: string }> = {\n solid: { trigger: 'bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]' },\n outline: { trigger: 'bg-transparent border-[var(--novi-color-border-strong)]' },\n soft: { trigger: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n ghost: {\n trigger: 'bg-transparent border-transparent hover:bg-[var(--novi-color-subtle)]',\n },\n plain: {\n trigger: 'bg-transparent border-transparent px-0 underline underline-offset-4',\n },\n}\n\n/**\n * Select のスタイル定義。\n *\n * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、\n * ここで `position` 系を書いても効かない（書く必要も無い）。\n *\n * @example\n * import { selectStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const mySelect = tv({ extend: selectStyles, slots: { option: 'px-4' } })\n */\nexport const selectStyles = tv({\n slots,\n // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n variants: { size, radius, variant },\n defaultVariants: { size: 'md', radius: 'sm', variant: 'solid' },\n})\n\nexport type SelectStyleProps = Parameters<typeof selectStyles>[0]\n\n/**\n * 選択済みの印が立つ場所。**幅を常に確保する**ので、選ぶ前後で行がずれない。\n *\n * チェックマーク（両テーマ）ではなく帳票のインデックス記号にしているのは、\n * 記号そのものが等幅の列として読めるから。`1ch` は mono の 1 文字ぶん。\n */\nexport const optionMarkerClass = `w-[1ch] shrink-0 text-[var(--novi-color-primary)] ${mono}`\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,QAAQ;CACZ,MAAM,CACJ,yBAGA,qCACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,SAAS;EACP;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CAEP,MAAM,wDAAwD;CAC9D,SAAS;EAEP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;CACT,QAAQ;EAEN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AA2DA,MAAa,eAAe,GAAG;CAC7B;CAEA,UAAU;EAAE;GArDZ,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;EA0CY;EAAM;GAtClB,MAAM,EAAE,SAAS,oCAAoC;GACrD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,MAAM,EAAE,SAAS,oCAAoC;EAkCnC;EAAQ;GA1B1B,OAAO,EAAE,SAAS,0EAA0E;GAC5F,SAAS,EAAE,SAAS,0DAA0D;GAC9E,MAAM,EAAE,SAAS,kEAAkE;GACnF,OAAO,EACL,SAAS,wEACX;GACA,OAAO,EACL,SAAS,sEACX;EAkB0B;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAQ;AAChE,CAAC;;;;;;;AAUD,MAAa,oBAAoB,qDAAqD"}
|
|
@@ -11,7 +11,7 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
11
11
|
* const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
|
|
12
12
|
*/
|
|
13
13
|
declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
|
|
14
|
-
radius: VariantMap<"
|
|
14
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
15
15
|
root: string;
|
|
16
16
|
}>;
|
|
17
17
|
}, {
|
|
@@ -21,7 +21,7 @@ declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
21
21
|
*/
|
|
22
22
|
root: string;
|
|
23
23
|
}, undefined, {
|
|
24
|
-
radius: VariantMap<"
|
|
24
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
25
25
|
root: string;
|
|
26
26
|
}>;
|
|
27
27
|
}, {
|
|
@@ -31,7 +31,7 @@ declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
31
31
|
*/
|
|
32
32
|
root: string;
|
|
33
33
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
34
|
-
radius: VariantMap<"
|
|
34
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
35
35
|
root: string;
|
|
36
36
|
}>;
|
|
37
37
|
}, {
|
|
@@ -12,7 +12,7 @@ import { tv } from "tailwind-variants";
|
|
|
12
12
|
* `prefers-reduced-motion` のときは回転を止める。
|
|
13
13
|
*/
|
|
14
14
|
const slots = {
|
|
15
|
-
root: "inline-flex items-center gap-
|
|
15
|
+
root: "inline-flex items-center gap-[var(--novi-gap-inline)]",
|
|
16
16
|
circle: "shrink-0 motion-safe:animate-spin text-[var(--c)]",
|
|
17
17
|
label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.styles.mjs","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n spinnerRequiredSlots,\n spinnerSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Spinner は `transform`（`animate-spin`）を使う**唯一の例外**。\n *\n * Flatlay は動きで飾らないテーマだが、ここだけは規律の外に置いている。\n * 代替（点滅・バーの往復）は「処理中」であることの視認性か情報量で必ず劣り、\n * 待たされている人にとっては世界観よりも「動いていると分かること」が先だから。\n * 例外は `design-rules.data.mjs` にも登録済みで、両テーマと同じ判断。\n *\n * `prefers-reduced-motion` のときは回転を止める。\n */\nconst slots = {\n root: 'inline-flex items-center gap-
|
|
1
|
+
{"version":3,"file":"spinner.styles.mjs","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n spinnerRequiredSlots,\n spinnerSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Spinner は `transform`（`animate-spin`）を使う**唯一の例外**。\n *\n * Flatlay は動きで飾らないテーマだが、ここだけは規律の外に置いている。\n * 代替（点滅・バーの往復）は「処理中」であることの視認性か情報量で必ず劣り、\n * 待たされている人にとっては世界観よりも「動いていると分かること」が先だから。\n * 例外は `design-rules.data.mjs` にも登録済みで、両テーマと同じ判断。\n *\n * `prefers-reduced-motion` のときは回転を止める。\n */\nconst slots = {\n root: 'inline-flex items-center gap-[var(--novi-gap-inline)]',\n circle: 'shrink-0 motion-safe:animate-spin text-[var(--c)]',\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n} satisfies SlotMap<typeof spinnerSlots, (typeof spinnerRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst size: VariantMap<NoviSize, { circle: string }> = {\n sm: { circle: 'size-4' },\n md: { circle: 'size-5' },\n lg: { circle: 'size-6' },\n}\n\n/**\n * Spinner のスタイル定義。\n *\n * @example\n * const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'text-[var(--novi-color-fg)]' } })\n */\nexport const spinnerStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SpinnerStyleProps = Parameters<typeof spinnerStyles>[0]\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;CACN,QAAQ;CACR,OAAO,oEAAoE;AAC7E;;;;;;;AAuBA,MAAa,gBAAgB,GAAG;CAC9B;CACA,UAAU;EAAE;GAtBZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAiBrC;EAAO;GAbnB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;EAWJ;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}
|
package/dist/styles/mono.mjs
CHANGED
|
@@ -16,9 +16,27 @@ const mono = "font-(family-name:--novi-font-mono)";
|
|
|
16
16
|
*
|
|
17
17
|
* `tabular-nums` を等幅と併せるのは、等幅フォントでも比例数字を持つ環境があるため。
|
|
18
18
|
* 揃わない数字は、書類として読むときに一覧性を丸ごと失う。
|
|
19
|
+
*
|
|
20
|
+
* `--novi-font-numeric` はそこに `slashed-zero` を重ねる。帳票は数字を突き合わせて
|
|
21
|
+
* 読むので、0 と O が判別できないと転記のたびに読み違える。
|
|
22
|
+
*/
|
|
23
|
+
const monoNumeric = `${mono} tabular-nums [font-variant-numeric:var(--novi-font-numeric)]`;
|
|
24
|
+
/**
|
|
25
|
+
* 見出しの声。**3モデルで唯一、見出しが sans を使わない**（spec 08）。
|
|
26
|
+
*
|
|
27
|
+
* Web フォントを足せない以上、テーマごとに書体で語れるのは既存2スタックの
|
|
28
|
+
* 使い分けだけになる。本文 sans / 見出し mono という分担は帳票の作法そのもので、
|
|
29
|
+
* ここが Flatlay の最大の識別子になる。
|
|
30
|
+
*
|
|
31
|
+
* 字を詰めない（`tracking-tight` は 0em）のは意図。詰めるのは複数の語を1つの
|
|
32
|
+
* まとまりに見せる操作で、帳票の見出しは各項目が独立している。
|
|
19
33
|
*/
|
|
20
|
-
const
|
|
34
|
+
const heading = [
|
|
35
|
+
"font-[family-name:var(--novi-font-heading)]",
|
|
36
|
+
"tracking-[var(--novi-tracking-tight)]",
|
|
37
|
+
"leading-[var(--novi-leading-heading)]"
|
|
38
|
+
].join(" ");
|
|
21
39
|
//#endregion
|
|
22
|
-
export { mono, monoNumeric };
|
|
40
|
+
export { heading, mono, monoNumeric };
|
|
23
41
|
|
|
24
42
|
//# sourceMappingURL=mono.mjs.map
|
package/dist/styles/mono.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mono.mjs","names":[],"sources":["../../src/styles/mono.ts"],"sourcesContent":["/**\n * 等幅の断片（ADR-F7）。**Flatlay のタイポの声はここに集約する。**\n *\n * 影も奥行きも持たないテーマで、階層の次に効く区別が書体の切り替えになる。\n * 帳票や伝票がそうであるように、「読ませる文」と「読み取らせる値」は別の顔を持つ。\n *\n * Web フォントは同梱しない（依存ゼロ原則）。`--novi-font-mono` に精度の高い\n * システムスタックを積み、各 slot はこの断片経由でのみそれを消費する。\n * 個別に `font-mono` と書くと Tailwind 既定のスタックに落ち、トークンを外れる。\n */\n\n/** 等幅の地。コード・ショートカット・記号インジケータなど、値ではない等幅に使う。 */\nexport const mono = 'font-(family-name:--novi-font-mono)'\n\n/**\n * 数値用。**桁が縦に揃うことが情報になる**列（金額・件数・進捗）に使う。\n *\n * `tabular-nums` を等幅と併せるのは、等幅フォントでも比例数字を持つ環境があるため。\n * 揃わない数字は、書類として読むときに一覧性を丸ごと失う。\n */\nexport const monoNumeric = `${mono} tabular-nums`\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,OAAO
|
|
1
|
+
{"version":3,"file":"mono.mjs","names":[],"sources":["../../src/styles/mono.ts"],"sourcesContent":["/**\n * 等幅の断片（ADR-F7）。**Flatlay のタイポの声はここに集約する。**\n *\n * 影も奥行きも持たないテーマで、階層の次に効く区別が書体の切り替えになる。\n * 帳票や伝票がそうであるように、「読ませる文」と「読み取らせる値」は別の顔を持つ。\n *\n * Web フォントは同梱しない（依存ゼロ原則）。`--novi-font-mono` に精度の高い\n * システムスタックを積み、各 slot はこの断片経由でのみそれを消費する。\n * 個別に `font-mono` と書くと Tailwind 既定のスタックに落ち、トークンを外れる。\n */\n\n/** 等幅の地。コード・ショートカット・記号インジケータなど、値ではない等幅に使う。 */\nexport const mono = 'font-(family-name:--novi-font-mono)'\n\n/**\n * 数値用。**桁が縦に揃うことが情報になる**列（金額・件数・進捗）に使う。\n *\n * `tabular-nums` を等幅と併せるのは、等幅フォントでも比例数字を持つ環境があるため。\n * 揃わない数字は、書類として読むときに一覧性を丸ごと失う。\n *\n * `--novi-font-numeric` はそこに `slashed-zero` を重ねる。帳票は数字を突き合わせて\n * 読むので、0 と O が判別できないと転記のたびに読み違える。\n */\nexport const monoNumeric = `${mono} tabular-nums [font-variant-numeric:var(--novi-font-numeric)]`\n\n/**\n * 見出しの声。**3モデルで唯一、見出しが sans を使わない**（spec 08）。\n *\n * Web フォントを足せない以上、テーマごとに書体で語れるのは既存2スタックの\n * 使い分けだけになる。本文 sans / 見出し mono という分担は帳票の作法そのもので、\n * ここが Flatlay の最大の識別子になる。\n *\n * 字を詰めない（`tracking-tight` は 0em）のは意図。詰めるのは複数の語を1つの\n * まとまりに見せる操作で、帳票の見出しは各項目が独立している。\n */\nexport const heading = [\n 'font-[family-name:var(--novi-font-heading)]',\n 'tracking-[var(--novi-tracking-tight)]',\n 'leading-[var(--novi-leading-heading)]',\n].join(' ')\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,OAAO;;;;;;;;;;AAWpB,MAAa,cAAc,GAAG,KAAK;;;;;;;;;;;AAYnC,MAAa,UAAU;CACrB;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.d.mts","names":[],"sources":["../../src/switch/switch.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"switch.styles.d.mts","names":[],"sources":["../../src/switch/switch.styles.ts"],"mappings":";;;;;;;;cA+Ea,0CAAY;;IAzBkB;;;IAaD;IAAe;IAAe;;;;;;;;;;IAb7B;;;IAaD;IAAe;IAAe;;;;;;;;;;IAb7B;;;IAaD;IAAe;IAAe;;;;;;;;;KAkB5D,mBAAmB,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n switchRequiredSlots,\n switchSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Flatlay の Switch は**矩形のトラックに矩形のつまみ**。両テーマがピル型なのに対して\n * ここだけ角が立つ。Radio の円が例外だったのと逆に、Switch には円を許す理由が無い。\n *\n * つまみは `translate` で滑らない（FR-11 で transform 全面禁止）。左右の寄せを\n * 入れ替えるだけで、位置は**即座に**切り替わる。滑走はレールの上をモノが動く表現＝\n * 奥行きの語彙で、押し下げに transition を付けないのと同じ理由でここでも使わない。\n *\n * 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。\n */\nconst slots = {\n root: ['inline-flex items-center gap-
|
|
1
|
+
{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n switchRequiredSlots,\n switchSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Flatlay の Switch は**矩形のトラックに矩形のつまみ**。両テーマがピル型なのに対して\n * ここだけ角が立つ。Radio の円が例外だったのと逆に、Switch には円を許す理由が無い。\n *\n * つまみは `translate` で滑らない（FR-11 で transform 全面禁止）。左右の寄せを\n * 入れ替えるだけで、位置は**即座に**切り替わる。滑走はレールの上をモノが動く表現＝\n * 奥行きの語彙で、押し下げに transition を付けないのと同じ理由でここでも使わない。\n *\n * 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。\n */\nconst slots = {\n root: [\n 'inline-flex items-center gap-[var(--novi-gap-inline)]',\n 'cursor-pointer',\n disabledState,\n ].join(' '),\n track: [\n 'shrink-0 inline-flex items-center',\n // つまみは寄せで動かす。OFF は左端、ON は右端に即座に立つ\n 'justify-start group-data-[selected]:justify-end',\n 'rounded-[var(--novi-radius-sm)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-bg)]',\n 'group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]',\n // 押下は反転（ADR-F3）。地とつまみが入れ替わる\n 'group-data-[pressed]:bg-[var(--c-fg)] group-data-[pressed]:border-[var(--c)]',\n 'transition-[background-color,border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n ].join(' '),\n // つまみも矩形。ON では地色で抜き、OFF では罫線と同じ色の塊にする\n thumb: [\n 'rounded-[var(--novi-radius-none)]',\n 'bg-[var(--novi-color-border-strong)]',\n 'group-data-[selected]:bg-[var(--novi-color-bg)]',\n 'group-data-[pressed]:bg-[var(--c)]',\n 'transition-[background-color]',\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-sm)] 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)] [--c-fg:var(--novi-color-bg)]' },\n primary: { root: '[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]' },\n success: { root: '[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]' },\n warning: { root: '[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]' },\n danger: { root: '[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]' },\n}\n\n/**\n * md が 28×14px。Button の高さ 28px を**横に倒した**寸法で、\n * 帳票の1行の中に置いても行が膨らまない。sm 24×12 / lg 36×18。\n */\nconst size: VariantMap<NoviSize, { track: string; thumb: string; label: string }> = {\n sm: { track: 'h-3 w-6 p-px', thumb: 'size-2', label: 'text-[length:var(--novi-text-sm)]' },\n md: { track: 'h-3.5 w-7 p-px', thumb: 'size-2.5', label: 'text-[length:var(--novi-text-base)]' },\n lg: { track: 'h-4.5 w-9 p-px', thumb: 'size-3.5', label: 'text-[length:var(--novi-text-base)]' },\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":";;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;AACf;;;;;;;AA2BA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GA1BZ,SAAS,EAAE,MAAM,2DAA2D;GAC5E,SAAS,EAAE,MAAM,wEAAwE;GACzF,WAAW,EAAE,MAAM,4EAA4E;GAC/F,SAAS,EAAE,MAAM,wEAAwE;GACzF,SAAS,EAAE,MAAM,wEAAwE;GACzF,QAAQ,EAAE,MAAM,sEAAsE;EAqB1E;EAAO;GAbnB,IAAI;IAAE,OAAO;IAAgB,OAAO;IAAU,OAAO;GAAoC;GACzF,IAAI;IAAE,OAAO;IAAkB,OAAO;IAAY,OAAO;GAAsC;GAC/F,IAAI;IAAE,OAAO;IAAkB,OAAO;IAAY,OAAO;GAAsC;EAW5E;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}
|