@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.styles.d.mts","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"accordion.styles.d.mts","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"mappings":";;;;;;;;cA2Fa,6CAAe;;IArBgB;IAAe;;;IAhBZ;IAAc;;;;;;;;;;;IAgBjB;IAAe;;;IAhBZ;IAAc;;;;;;;;;;;IAgBjB;IAAe;;;IAhBZ;IAAc;;;;;;;;;;KA4CjD,sBAAsB,kBAAkB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { 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/accordion/accordion.styles.ts
|
|
5
5
|
/**
|
|
@@ -21,9 +21,10 @@ const slots = {
|
|
|
21
21
|
item: "border-b border-[var(--novi-color-border-strong)]",
|
|
22
22
|
heading: "m-0",
|
|
23
23
|
trigger: [
|
|
24
|
-
"flex items-center gap-
|
|
24
|
+
"flex items-center gap-[var(--novi-gap-inline)] w-full text-left",
|
|
25
25
|
"cursor-pointer outline-none",
|
|
26
26
|
"text-[var(--novi-color-fg)]",
|
|
27
|
+
heading,
|
|
27
28
|
"hover:bg-[var(--novi-color-subtle)]",
|
|
28
29
|
"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
|
|
29
30
|
"transition-[background-color,color]",
|
|
@@ -45,15 +46,15 @@ const accordionStyles = tv({
|
|
|
45
46
|
variants: {
|
|
46
47
|
size: {
|
|
47
48
|
sm: {
|
|
48
|
-
trigger: "px-
|
|
49
|
+
trigger: "px-[var(--novi-pad-control-x-sm)] py-1.5 text-[length:var(--novi-text-sm)]",
|
|
49
50
|
panel: "pl-6 pr-2 pb-1.5"
|
|
50
51
|
},
|
|
51
52
|
md: {
|
|
52
|
-
trigger: "px-
|
|
53
|
+
trigger: "px-[var(--novi-pad-control-x-md)] py-2 text-[length:var(--novi-text-base)]",
|
|
53
54
|
panel: "pl-8 pr-3 pb-2"
|
|
54
55
|
},
|
|
55
56
|
lg: {
|
|
56
|
-
trigger: "px-
|
|
57
|
+
trigger: "px-[var(--novi-pad-control-x-lg)] py-3 text-[length:var(--novi-text-base)]",
|
|
57
58
|
panel: "pl-10 pr-4 pb-3"
|
|
58
59
|
}
|
|
59
60
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.styles.mjs","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"sourcesContent":["import type {\n accordionRequiredSlots,\n accordionSlots,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Accordion は Flatlay の**主役**。\n *\n * 他のすべては「浮くものをフローに直した」形だが、Accordion だけは\n * もともとインフロー展開で、直す必要が無かった。z 軸を持たないモデルが\n * 無理なく成立する唯一の既存パターンで、他の展開系はここに寄せてある。\n *\n * 開閉の印は `▸` / `▾` の差し替え。シェブロンの回転（Tactile）は使わない。\n * 回転は「同じものが向きを変えた」という 3 次元の言葉で、字を替えるのは\n * 「状態が別の記号になった」という帳票の言葉になる（FR-11 / ADR-F7）。\n *\n * 印が**行頭**にあるのは、Select の選択済み `▸` と同じ列の作り方。\n * 右端（両テーマ）に置くと見出しの長さで位置が変わり、縦に読めなくなる。\n */\nconst slots = {\n root: 'flex flex-col border-t border-[var(--novi-color-border-strong)]',\n item: 'border-b border-[var(--novi-color-border-strong)]',\n // 見出し要素とその中のボタンを分ける。支援技術のために必要\n heading: 'm-0',\n trigger: [\n 'flex items-center gap-
|
|
1
|
+
{"version":3,"file":"accordion.styles.mjs","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"sourcesContent":["import type {\n accordionRequiredSlots,\n accordionSlots,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\nimport { heading, mono } from '../styles/mono'\n\n/**\n * Accordion は Flatlay の**主役**。\n *\n * 他のすべては「浮くものをフローに直した」形だが、Accordion だけは\n * もともとインフロー展開で、直す必要が無かった。z 軸を持たないモデルが\n * 無理なく成立する唯一の既存パターンで、他の展開系はここに寄せてある。\n *\n * 開閉の印は `▸` / `▾` の差し替え。シェブロンの回転（Tactile）は使わない。\n * 回転は「同じものが向きを変えた」という 3 次元の言葉で、字を替えるのは\n * 「状態が別の記号になった」という帳票の言葉になる（FR-11 / ADR-F7）。\n *\n * 印が**行頭**にあるのは、Select の選択済み `▸` と同じ列の作り方。\n * 右端（両テーマ）に置くと見出しの長さで位置が変わり、縦に読めなくなる。\n */\nconst slots = {\n root: 'flex flex-col border-t border-[var(--novi-color-border-strong)]',\n item: 'border-b border-[var(--novi-color-border-strong)]',\n // 見出し要素とその中のボタンを分ける。支援技術のために必要\n heading: 'm-0',\n trigger: [\n 'flex items-center gap-[var(--novi-gap-inline)] w-full text-left',\n 'cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n // 見出しは mono（spec 08）。記号インジケータと同じ書体になり、行頭が縦に揃う\n heading,\n 'hover: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 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n focusRing,\n ].join(' '),\n // 幅を 1 文字ぶんに固定する。`▸` と `▾` で見出しの開始位置がずれない\n indicator: `w-[1ch] shrink-0 leading-none text-[var(--novi-color-muted)] ${mono}`,\n panel: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n} satisfies SlotMap<typeof accordionSlots, (typeof accordionRequiredSlots)[number]>\n\n/**\n * 罫線の引き方だけが変わる。地で段差を作れないので、\n * `solid` と `soft` は「地を一段落とした行」として同じ見え方になる。\n */\nconst variant: VariantMap<NoviVariant, { root: string; item: string }> = {\n solid: { root: 'border-t-0', item: 'bg-[var(--novi-color-subtle)] border-b' },\n outline: { root: 'border-t', item: 'border-b' },\n soft: { root: 'border-t-0', item: 'bg-[var(--novi-color-subtle)] border-b' },\n ghost: { root: 'border-t-0', item: 'border-b border-[var(--novi-color-border)]' },\n plain: { root: 'border-t-0', item: 'border-b-0' },\n}\n\n/**\n * 行の高さは Select / Menu と同じ帳票の刻み。パネルは見出しの字下げに揃える。\n *\n * **例外**: パネルの `pl-*` は字下げの階段で、余白の設計ではなく階層の表現。\n * `pr` / `pb` はその階段と対で決まり、`trigger` の上下は行の高さそのもの。\n * どれもトークンに載せると、字下げと行の刻みが別々に動いて列が崩れる\n * （`raw-spacing` の例外として `design-rules.data.mjs` に登録済み）。\n */\nconst size: VariantMap<NoviSize, { trigger: string; panel: string }> = {\n sm: {\n trigger: 'px-[var(--novi-pad-control-x-sm)] py-1.5 text-[length:var(--novi-text-sm)]',\n panel: 'pl-6 pr-2 pb-1.5',\n },\n md: {\n trigger: 'px-[var(--novi-pad-control-x-md)] py-2 text-[length:var(--novi-text-base)]',\n panel: 'pl-8 pr-3 pb-2',\n },\n lg: {\n trigger: 'px-[var(--novi-pad-control-x-lg)] py-3 text-[length:var(--novi-text-base)]',\n panel: 'pl-10 pr-4 pb-3',\n },\n}\n\n/**\n * Accordion のスタイル定義。\n *\n * @example\n * const myAccordion = tv({ extend: accordionStyles, slots: { panel: 'pt-2' } })\n */\nexport const accordionStyles = tv({\n slots,\n // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n variants: { size, variant },\n defaultVariants: { variant: 'outline', size: 'md' },\n})\n\nexport type AccordionStyleProps = Parameters<typeof accordionStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CAEN,SAAS;CACT,SAAS;EACP;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW,gEAAgE;CAC3E,OAAO;AACT;;;;;;;AA2CA,MAAa,kBAAkB,GAAG;CAChC;CAEA,UAAU;EAAE;GAvBZ,IAAI;IACF,SAAS;IACT,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,OAAO;GACT;EAYY;EAAM;GAvClB,OAAO;IAAE,MAAM;IAAc,MAAM;GAAyC;GAC5E,SAAS;IAAE,MAAM;IAAY,MAAM;GAAW;GAC9C,MAAM;IAAE,MAAM;IAAc,MAAM;GAAyC;GAC3E,OAAO;IAAE,MAAM;IAAc,MAAM;GAA6C;GAChF,OAAO;IAAE,MAAM;IAAc,MAAM;GAAa;EAmC9B;CAAQ;CAC1B,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CAAC"}
|
|
@@ -10,7 +10,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -22,7 +22,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
|
|
|
22
22
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
23
23
|
root: string;
|
|
24
24
|
}>;
|
|
25
|
-
radius: VariantMap<"
|
|
25
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
26
26
|
root: string;
|
|
27
27
|
}>;
|
|
28
28
|
}, {
|
|
@@ -34,7 +34,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
|
|
|
34
34
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
35
35
|
root: string;
|
|
36
36
|
}>;
|
|
37
|
-
radius: VariantMap<"
|
|
37
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
38
38
|
root: string;
|
|
39
39
|
}>;
|
|
40
40
|
}, {
|
|
@@ -14,7 +14,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
|
|
|
14
14
|
root: string;
|
|
15
15
|
dot: string;
|
|
16
16
|
}>;
|
|
17
|
-
radius: VariantMap<"
|
|
17
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
18
18
|
root: string;
|
|
19
19
|
}>;
|
|
20
20
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -32,7 +32,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
|
|
|
32
32
|
root: string;
|
|
33
33
|
dot: string;
|
|
34
34
|
}>;
|
|
35
|
-
radius: VariantMap<"
|
|
35
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
36
36
|
root: string;
|
|
37
37
|
}>;
|
|
38
38
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -50,7 +50,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
|
|
|
50
50
|
root: string;
|
|
51
51
|
dot: string;
|
|
52
52
|
}>;
|
|
53
|
-
radius: VariantMap<"
|
|
53
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
54
54
|
root: string;
|
|
55
55
|
}>;
|
|
56
56
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.styles.d.mts","names":[],"sources":["../../src/badge/badge.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"badge.styles.d.mts","names":[],"sources":["../../src/badge/badge.styles.ts"],"mappings":";;;;;;;;cAuHa,yCAAW;;IAtFmB;;;IA8DF;IAAa;;;IAUT;;;IArBE;;;;;;;;IAnDJ;;;IA8DF;IAAa;;;IAUT;;;IArBE;;;;;;;;IAnDJ;;;IA8DF;IAAa;;;IAUT;;;IArBE;;;;;;;KA0CnC,kBAAkB,kBAAkB"}
|
|
@@ -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'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Badge は**書類に押した区分印**。\n *\n * ラベルが等幅なのは、状態や分類の語が帳票では「読ませる文」ではなく\n * 「読み取らせる記号」だから（ADR-F7）。列に並べたとき幅が揃う効果も兼ねる。\n *\n * 点も正方形。円は Radio と Avatar の2つに予約してあり、\n * ここで丸を使うと「1つ選ぶ」の形と紛れる。\n */\nconst slots = {\n root: [\n 'inline-flex items-center gap-1.5',\n 'whitespace-nowrap',\n 'border border-transparent',\n 'rounded-[var(--novi-radius-sm)]',\n ].join(' '),\n dot: 'shrink-0 rounded-[var(--novi-radius-none)] bg-current',\n label: `truncate ${mono}`,\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)] border-[var(--c)]' },\n outline: { root: 'border-[var(--c-line)] text-[var(--c-text)]' },\n soft: {\n root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)] text-[var(--c-text)]',\n },\n ghost: { root: 'text-[var(--c-text)]' },\n plain: { root: 'text-[var(--c-text)] px-0' },\n}\n\n/** 16 / 20 / 24px。行の中に置いても行が膨らまない高さ（Raster は 20/24/28）。 */\nconst size: VariantMap<NoviSize, { root: string; dot: string }> = {\n sm: { root: 'h-4 px-1 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n md: { root: 'h-5 px-1.5 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n lg: {
|
|
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'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Badge は**書類に押した区分印**。\n *\n * ラベルが等幅なのは、状態や分類の語が帳票では「読ませる文」ではなく\n * 「読み取らせる記号」だから（ADR-F7）。列に並べたとき幅が揃う効果も兼ねる。\n *\n * 点も正方形。円は Radio と Avatar の2つに予約してあり、\n * ここで丸を使うと「1つ選ぶ」の形と紛れる。\n */\nconst slots = {\n root: [\n 'inline-flex items-center gap-1.5',\n 'whitespace-nowrap',\n 'border border-transparent',\n 'rounded-[var(--novi-radius-sm)]',\n ].join(' '),\n dot: 'shrink-0 rounded-[var(--novi-radius-none)] bg-current',\n label: `truncate ${mono}`,\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)] border-[var(--c)]' },\n outline: { root: 'border-[var(--c-line)] text-[var(--c-text)]' },\n soft: {\n root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)] text-[var(--c-text)]',\n },\n ghost: { root: 'text-[var(--c-text)]' },\n plain: { root: 'text-[var(--c-text)] px-0' },\n}\n\n/** 16 / 20 / 24px。行の中に置いても行が膨らまない高さ（Raster は 20/24/28）。 */\nconst size: VariantMap<NoviSize, { root: string; dot: string }> = {\n sm: { root: 'h-4 px-1 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n md: { root: 'h-5 px-1.5 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n // lg だけ左右をトークンで取る。sm / md の 4 / 6px は字の当たりを合わせる微小インセット\n lg: {\n root: 'h-6 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n dot: 'size-2',\n },\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` は最後に宣言する。先に書くと `plain` の px-0 が size の px に負ける（申し送り6）\n variants: { color, size, radius, variant },\n defaultVariants: { color: 'default', variant: 'outline', size: 'md', radius: 'sm' },\n})\n\nexport type BadgeStyleProps = Parameters<typeof badgeStyles>[0]\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,KAAK;CACL,OAAO,YAAY;AACrB;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;;;;;;;AAqCA,MAAa,cAAc,GAAG;CAC5B;CAEA,UAAU;EAAE;EAAO;GA1BnB,IAAI;IAAE,MAAM;IAA8C,KAAK;GAAW;GAC1E,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAW;GAE5E,IAAI;IACF,MAAM;IACN,KAAK;GACP;EAoBmB;EAAM;GAhBzB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAYzB;EAAQ;GArCjC,OAAO,EAAE,MAAM,qDAAqD;GACpE,SAAS,EAAE,MAAM,8CAA8C;GAC/D,MAAM,EACJ,MAAM,uFACR;GACA,OAAO,EAAE,MAAM,uBAAuB;GACtC,OAAO,EAAE,MAAM,4BAA4B;EA+BV;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AACpF,CAAC"}
|
|
@@ -25,7 +25,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
25
25
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
26
26
|
root: string;
|
|
27
27
|
}>;
|
|
28
|
-
radius: VariantMap<"
|
|
28
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
29
29
|
root: string;
|
|
30
30
|
}>;
|
|
31
31
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -44,7 +44,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
44
44
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
45
45
|
root: string;
|
|
46
46
|
}>;
|
|
47
|
-
radius: VariantMap<"
|
|
47
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
48
48
|
root: string;
|
|
49
49
|
}>;
|
|
50
50
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -63,7 +63,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
63
63
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
64
64
|
root: string;
|
|
65
65
|
}>;
|
|
66
|
-
radius: VariantMap<"
|
|
66
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
67
67
|
root: string;
|
|
68
68
|
}>;
|
|
69
69
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
|
|
|
4
4
|
//#region src/button/button.styles.ts
|
|
5
5
|
const slots = {
|
|
6
6
|
root: [
|
|
7
|
-
"inline-flex items-center justify-center gap-
|
|
7
|
+
"inline-flex items-center justify-center gap-[var(--novi-gap-inline)]",
|
|
8
8
|
"font-medium whitespace-nowrap select-none",
|
|
9
9
|
"border",
|
|
10
10
|
"rounded-[var(--novi-radius-sm)]",
|
|
@@ -72,9 +72,9 @@ const color = {
|
|
|
72
72
|
* 広げる細工はしない（それは Tactile の領分で、そこが3本目の密度の identity）。
|
|
73
73
|
*/
|
|
74
74
|
const size = {
|
|
75
|
-
sm: { root: "h-7 px-
|
|
76
|
-
md: { root: "h-8 px-
|
|
77
|
-
lg: { root: "h-10 px-
|
|
75
|
+
sm: { root: "h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]" },
|
|
76
|
+
md: { root: "h-8 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]" },
|
|
77
|
+
lg: { root: "h-10 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]" }
|
|
78
78
|
};
|
|
79
79
|
const radius = {
|
|
80
80
|
none: { root: "rounded-[var(--novi-radius-none)]" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.mjs","names":[],"sources":["../../src/button/button.styles.ts"],"sourcesContent":["import type {\n buttonRequiredSlots,\n buttonSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { monoNumeric } from '../styles/mono'\n\n// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる（ADR-R5）。\nconst slots = {\n root: [\n 'inline-flex items-center justify-center gap-
|
|
1
|
+
{"version":3,"file":"button.styles.mjs","names":[],"sources":["../../src/button/button.styles.ts"],"sourcesContent":["import type {\n buttonRequiredSlots,\n buttonSlots,\n NoviColor,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { monoNumeric } from '../styles/mono'\n\n// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる（ADR-R5）。\nconst slots = {\n root: [\n 'inline-flex items-center justify-center gap-[var(--novi-gap-inline)]',\n 'font-medium whitespace-nowrap select-none',\n // 罫線の幅は全 variant が持つ。影が無い以上、輪郭を示せるのは線だけ。\n // 色は variant が決める（ghost / plain だけが transparent を選ぶ）\n 'border',\n 'rounded-[var(--novi-radius-sm)]',\n // 動かすのは色だけ。位置も大きさも変えない（FR-11）\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 label: 'truncate',\n // 差し込まれるのは記号・数値・ショートカットであることが多い。\n // 等幅と tabular-nums を既定にすると、ボタンが並んだときに幅が暴れない（ADR-F7）\n startContent: `shrink-0 inline-flex ${monoNumeric}`,\n endContent: `shrink-0 inline-flex ${monoNumeric}`,\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/**\n * 高さは 28 / 32 / 40px（Raster は 32/40/48、Tactile は 40/48/56）。\n *\n * **帳票の行の高さ**にあたる。前提はポインタとキーボードで、指の当たり判定を\n * 広げる細工はしない（それは Tactile の領分で、そこが3本目の密度の identity）。\n */\nconst size: VariantMap<NoviSize, { root: string }> = {\n sm: { root: 'h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-8 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-10 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]' },\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 * 語彙の実装漏れ・語彙外の追加はここでコンパイルエラーになる（AC-04-2）。\n *\n * **押下は反転**（FR-11 / ADR-F3）。面と文字が入れ替わる、スタンプを押した跡の見え方。\n * 沈む・縮む・影が消えるといった表現はすべて z 軸の語彙なので使えない。\n * 反転は面積のある変化なので、動かさなくても押した瞬間が確実に伝わる。\n * 前後どちらの状態も 4.5:1 を満たすことは `flatlay-tokens.test.ts` が固定している。\n */\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: {\n root: [\n 'bg-[var(--c)] text-[var(--c-fg)] border-[var(--c)]',\n 'data-[pressed]:bg-[var(--c-fg)] data-[pressed]:text-[var(--c)]',\n ].join(' '),\n },\n outline: {\n root: [\n 'border-[var(--c-line)] text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]',\n 'data-[pressed]:bg-[var(--c)] data-[pressed]:text-[var(--c-fg)]',\n ].join(' '),\n },\n soft: {\n root: [\n 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)] text-[var(--c-text)]',\n 'data-[pressed]:bg-[var(--c)] data-[pressed]:text-[var(--c-fg)]',\n ].join(' '),\n },\n ghost: {\n root: [\n 'border-transparent text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]',\n 'data-[pressed]:bg-[var(--c)] data-[pressed]:text-[var(--c-fg)]',\n ].join(' '),\n },\n plain: {\n root: [\n 'border-transparent text-[var(--c-text)] underline-offset-4 hover:underline',\n 'data-[pressed]:bg-[var(--c)] data-[pressed]:text-[var(--c-fg)]',\n ].join(' '),\n },\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/flatlay'\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 // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n variants: { color, size, radius, variant },\n defaultVariants: { color: 'default', variant: 'solid', size: 'md', radius: 'sm' },\n})\n\nexport type ButtonStyleProps = Parameters<typeof buttonStyles>[0]\n"],"mappings":";;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CAGP,cAAc,wBAAwB;CACtC,YAAY,wBAAwB;CACpC,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;;;;;;;AAQA,MAAM,OAA+C;CACnD,IAAI,EAAE,MAAM,0EAA0E;CACtF,IAAI,EAAE,MAAM,4EAA4E;CACxF,IAAI,EAAE,MAAM,6EAA6E;AAC3F;AAEA,MAAM,SAAmD;CACvD,MAAM,EAAE,MAAM,oCAAoC;CAClD,IAAI,EAAE,MAAM,kCAAkC;CAC9C,IAAI,EAAE,MAAM,kCAAkC;CAC9C,IAAI,EAAE,MAAM,kCAAkC;CAC9C,MAAM,EAAE,MAAM,oCAAoC;AACpD;;;;;;;;;AAUA,MAAM,UAAqD;CACzD,OAAO,EACL,MAAM,CACJ,sDACA,gEACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM,CACJ,mFACA,gEACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,MAAM,EACJ,MAAM,CACJ,wFACA,gEACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,OAAO,EACL,MAAM,CACJ,+EACA,gEACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,OAAO,EACL,MAAM,CACJ,8EACA,gEACF,CAAC,CAAC,KAAK,GAAG,EACZ;AACF;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,eAAe,GAAG;CAC7B;CAEA,UAAU;EAAE;EAAO;EAAM;EAAQ;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAS,MAAM;EAAM,QAAQ;CAAK;AAClF,CAAC"}
|
|
@@ -13,7 +13,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
|
|
|
13
13
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
|
-
radius: VariantMap<"
|
|
16
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
17
17
|
root: string;
|
|
18
18
|
}>;
|
|
19
19
|
isPressable: {
|
|
@@ -32,7 +32,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
|
|
|
32
32
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
33
33
|
root: string;
|
|
34
34
|
}>;
|
|
35
|
-
radius: VariantMap<"
|
|
35
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
36
36
|
root: string;
|
|
37
37
|
}>;
|
|
38
38
|
isPressable: {
|
|
@@ -51,7 +51,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
|
|
|
51
51
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
52
52
|
root: string;
|
|
53
53
|
}>;
|
|
54
|
-
radius: VariantMap<"
|
|
54
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
55
55
|
root: string;
|
|
56
56
|
}>;
|
|
57
57
|
isPressable: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.d.mts","names":[],"sources":["../../src/card/card.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"card.styles.d.mts","names":[],"sources":["../../src/card/card.styles.ts"],"mappings":";;;;;;;;;;;cAuEa,wCAAU;;IAzBwB;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;KAyCjC,iBAAiB,kBAAkB"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { disabledState, focusRing } from "../styles/focus-ring.mjs";
|
|
2
|
+
import { heading } from "../styles/mono.mjs";
|
|
2
3
|
import { tv } from "tailwind-variants";
|
|
3
4
|
//#region src/card/card.styles.ts
|
|
4
5
|
/**
|
|
@@ -16,9 +17,13 @@ const slots = {
|
|
|
16
17
|
"rounded-[var(--novi-radius-sm)]",
|
|
17
18
|
"overflow-hidden"
|
|
18
19
|
].join(" "),
|
|
19
|
-
header:
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
header: [
|
|
21
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
22
|
+
"border-b border-[var(--novi-color-border)]",
|
|
23
|
+
heading
|
|
24
|
+
].join(" "),
|
|
25
|
+
body: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] flex-1", "leading-[var(--novi-leading-body)]"].join(" "),
|
|
26
|
+
footer: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]", "border-t border-[var(--novi-color-border)]"].join(" "),
|
|
22
27
|
image: "w-full object-cover"
|
|
23
28
|
};
|
|
24
29
|
/**
|
|
@@ -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\n/**\n * Flatlay の Card は**書類の枠**。両テーマも影は使わないが、こちらは\n * 「影を使わない」ではなく「影が存在しない」ので、枠と区切りが唯一の表現になる。\n *\n * `surface` が `bg` と同値（浮く面の概念が無い）ため、地の色で面を持ち上げることも\n * できない。header / footer を仕切るのも背景ではなく罫線1本。\n */\nconst slots = {\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex flex-col',\n 'border',\n 'rounded-[var(--novi-radius-sm)]',\n 'overflow-hidden',\n ].join(' '),\n // header と footer
|
|
1
|
+
{"version":3,"file":"card.styles.mjs","names":[],"sources":["../../src/card/card.styles.ts"],"sourcesContent":["import type {\n cardRequiredSlots,\n cardSlots,\n NoviRadius,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { heading } from '../styles/mono'\n\n/**\n * Flatlay の Card は**書類の枠**。両テーマも影は使わないが、こちらは\n * 「影を使わない」ではなく「影が存在しない」ので、枠と区切りが唯一の表現になる。\n *\n * `surface` が `bg` と同値（浮く面の概念が無い）ため、地の色で面を持ち上げることも\n * できない。header / footer を仕切るのも背景ではなく罫線1本。\n */\nconst slots = {\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex flex-col',\n 'border',\n 'rounded-[var(--novi-radius-sm)]',\n 'overflow-hidden',\n ].join(' '),\n // header と footer は罫線で仕切る。地の色を変えて面を増やさない。\n // 見出しが mono なのは Flatlay だけ（spec 08）。書体そのものが header の役割を示す\n header: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'border-b border-[var(--novi-color-border)]',\n heading,\n ].join(' '),\n // 上下 14px でも詰まって見えないのは、行送り 1.7 が余白を引き受けているから\n body: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] flex-1',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n footer: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'border-t border-[var(--novi-color-border)]',\n ].join(' '),\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-strong)]' },\n outline: { root: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\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 * 押せるカードも押下は反転する（ADR-F3）。面積が大きいぶん声も大きいが、\n * 沈む・浮くが使えない以上ここだけ別の語彙にはできない。100ms で戻る。\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 'hover:border-[var(--novi-color-border-strong)]',\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 },\n false: {},\n },\n },\n // 書類の角。Raster の lg（12px）に対して 2px\n defaultVariants: { variant: 'outline', radius: 'sm', isPressable: false },\n})\n\nexport type CardStyleProps = Parameters<typeof cardStyles>[0]\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAGV,QAAQ;EACN;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,MAAM,CACJ,wEACA,oCACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ,CACN,iEACA,4CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;AACT;;;;;;;;;;AA2BA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EACR;GA3BF,OAAO,EAAE,MAAM,yEAAyE;GACxF,SAAS,EAAE,MAAM,qEAAqE;GACtF,MAAM,EAAE,MAAM,kEAAkE;GAChF,OAAO,EAAE,MAAM,oCAAoC;GACnD,OAAO,EAAE,MAAM,oCAAoC;EAuBjD;EACA;GApBF,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAgBhD;EACA,aAAa;GACX,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG,EACZ;GACA,OAAO,CAAC;EACV;CACF;CAEA,iBAAiB;EAAE,SAAS;EAAW,QAAQ;EAAM,aAAa;CAAM;AAC1E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;cA8Fa,4CAAc;;IA1CgB;;;IAeC;IAAmB;IAAe;;;;;;;;;;IAfnC;;;IAeC;IAAmB;IAAe;;;;;;;;;;IAfnC;;;IAeC;IAAmB;IAAe;;;;;;;;;;;;;;;cAgDjE,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWpB,qBAAqB,kBAAkB;KACvC,0BAA0B,kBAAkB"}
|
|
@@ -15,7 +15,7 @@ import { tv } from "tailwind-variants";
|
|
|
15
15
|
*/
|
|
16
16
|
const slots = {
|
|
17
17
|
root: [
|
|
18
|
-
"inline-flex items-start gap-
|
|
18
|
+
"inline-flex items-start gap-[var(--novi-gap-inline)]",
|
|
19
19
|
"cursor-pointer",
|
|
20
20
|
disabledState
|
|
21
21
|
].join(" "),
|
|
@@ -79,9 +79,9 @@ const checkboxStyles = tv({
|
|
|
79
79
|
}
|
|
80
80
|
});
|
|
81
81
|
const groupSlots = {
|
|
82
|
-
root: "flex flex-col gap-
|
|
82
|
+
root: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
83
83
|
label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
|
|
84
|
-
list: "flex flex-col gap-
|
|
84
|
+
list: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
85
85
|
description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,
|
|
86
86
|
errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`
|
|
87
87
|
};
|
|
@@ -94,8 +94,8 @@ const groupSlots = {
|
|
|
94
94
|
const checkboxGroupStyles = tv({
|
|
95
95
|
slots: groupSlots,
|
|
96
96
|
variants: { orientation: {
|
|
97
|
-
vertical: { list: "flex-col gap-
|
|
98
|
-
horizontal: { list: "flex-row gap-
|
|
97
|
+
vertical: { list: "flex-col gap-[var(--novi-gap-stack)]" },
|
|
98
|
+
horizontal: { list: "flex-row gap-[var(--novi-gap-stack)] flex-wrap" }
|
|
99
99
|
} },
|
|
100
100
|
defaultVariants: { orientation: "vertical" }
|
|
101
101
|
});
|
|
@@ -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'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Checkbox は**用紙の記入欄**。2px 角の箱に印を入れる。\n *\n * 印が SVG ではなく文字（`✓` / `−`）なのは ADR-F7 の運用。帳票の記号は\n * 書くものであって描くものではないので、等幅の字として出す。線幅を持つ図形を\n * 足すと、罫線だけで階層を作っているこのテーマの中で唯一の「絵」になってしまう。\n *\n * 選ぶと箱が塗り潰されて印が地色で立つ。押下の反転（ADR-F3）と同じ形だが、\n * こちらは**状態として残る**。押した瞬間との差は持続するかどうかだけで、\n * 語彙をひとつに保つほうが手応えが読める。\n */\nconst slots = {\n root: ['inline-flex items-start gap-
|
|
1
|
+
{"version":3,"file":"checkbox.styles.mjs","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import type {\n checkboxGroupRequiredSlots,\n checkboxGroupSlots,\n checkboxRequiredSlots,\n checkboxSlots,\n NoviColor,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Checkbox は**用紙の記入欄**。2px 角の箱に印を入れる。\n *\n * 印が SVG ではなく文字（`✓` / `−`）なのは ADR-F7 の運用。帳票の記号は\n * 書くものであって描くものではないので、等幅の字として出す。線幅を持つ図形を\n * 足すと、罫線だけで階層を作っているこのテーマの中で唯一の「絵」になってしまう。\n *\n * 選ぶと箱が塗り潰されて印が地色で立つ。押下の反転（ADR-F3）と同じ形だが、\n * こちらは**状態として残る**。押した瞬間との差は持続するかどうかだけで、\n * 語彙をひとつに保つほうが手応えが読める。\n */\nconst slots = {\n root: [\n 'inline-flex items-start gap-[var(--novi-gap-inline)]',\n 'cursor-pointer',\n disabledState,\n ].join(' '),\n // 円にしない。書類のチェック欄は必ず角のある箱で、丸は Radio の担当\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 '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 'transition-[background-color,border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n ].join(' '),\n // 印は箱いっぱいに置かない。`leading-none` で字の行送りを殺して中央に据える\n indicator: `text-[var(--c-fg)] leading-none pointer-events-none ${mono}`,\n // 選択肢の文言は読ませる文なので等幅にしない（項目名は group 側の label）\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 checkboxSlots, (typeof checkboxRequiredSlots)[number]>\n\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 * 14 / 16 / 20px。両テーマ（16/20/24・20/24/28）より一段小さい。\n *\n * 帳票の行が 28 / 32 / 40px なので、箱が行の高さの半分ほどに収まる。\n * 指の下限には合わせない（Flatlay の前提はポインタとキーボード）。\n */\nconst size: VariantMap<NoviSize, { control: string; indicator: string; label: string }> = {\n sm: {\n control: 'size-3.5',\n indicator: 'text-[length:var(--novi-text-xs)]',\n label: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n control: 'size-4',\n indicator: 'text-[length:var(--novi-text-sm)]',\n label: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n control: 'size-5',\n indicator: 'text-[length:var(--novi-text-base)]',\n label: 'text-[length:var(--novi-text-base)]',\n },\n}\n\n/**\n * Checkbox のスタイル定義。\n *\n * @example\n * import { checkboxStyles } from '@novi-ui/flatlay'\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-[var(--novi-gap-stack)]',\n // こちらは項目名なので等幅（Input の label と同じ扱い・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 checkboxGroupSlots, (typeof checkboxGroupRequiredSlots)[number]>\n\n/**\n * CheckboxGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const checkboxGroupStyles = tv({\n slots: groupSlots,\n variants: {\n orientation: {\n vertical: { list: 'flex-col gap-[var(--novi-gap-stack)]' },\n horizontal: { list: 'flex-row gap-[var(--novi-gap-stack)] flex-wrap' },\n },\n },\n defaultVariants: { orientation: 'vertical' },\n})\n\nexport type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0]\nexport type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW,uDAAuD;CAElE,OAAO;CACP,aAAa,oEAAoE;AACnF;;;;;;;;;;AA6CA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GA3CZ,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;EAsC1E;EAAO;GA5BnB,IAAI;IACF,SAAS;IACT,WAAW;IACX,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,WAAW;IACX,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,WAAW;IACX,OAAO;GACT;EAcmB;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,sBAAsB,GAAG;CACpC,OAAO;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,uCAAuC;EACzD,YAAY,EAAE,MAAM,iDAAiD;CACvE,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}
|
|
@@ -13,7 +13,7 @@ import { tv } from "tailwind-variants";
|
|
|
13
13
|
* 二重に線を引くと升目が太って方眼に見えなくなる。
|
|
14
14
|
*/
|
|
15
15
|
const slots = {
|
|
16
|
-
root: ["flex flex-col gap-
|
|
16
|
+
root: ["flex flex-col gap-[var(--novi-gap-stack)]", disabledState].join(" "),
|
|
17
17
|
label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
|
|
18
18
|
description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,
|
|
19
19
|
errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker.styles.mjs","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"sourcesContent":["import type {\n colorPickerRequiredSlots,\n colorPickerSlots,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay のカラー選択は**方眼に貼った色見本**。\n *\n * 両テーマは色面を隙間を空けて並べるが、ここは隙間を持たない。列は罫線で仕切られ、\n * 見本は升目の中に収まる。方眼紙に絵の具を試し塗りした形で、\n * 「階層は罫線でしか作れない」という原理がそのまま見本帳の形になる。\n *\n * **升目の罫線が見本の枠を兼ねる**ので、スウォッチ自身は枠を持たない。\n * 二重に線を引くと升目が太って方眼に見えなくなる。\n */\nconst slots = {\n root: ['flex flex-col gap-
|
|
1
|
+
{"version":3,"file":"color-picker.styles.mjs","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"sourcesContent":["import type {\n colorPickerRequiredSlots,\n colorPickerSlots,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay のカラー選択は**方眼に貼った色見本**。\n *\n * 両テーマは色面を隙間を空けて並べるが、ここは隙間を持たない。列は罫線で仕切られ、\n * 見本は升目の中に収まる。方眼紙に絵の具を試し塗りした形で、\n * 「階層は罫線でしか作れない」という原理がそのまま見本帳の形になる。\n *\n * **升目の罫線が見本の枠を兼ねる**ので、スウォッチ自身は枠を持たない。\n * 二重に線を引くと升目が太って方眼に見えなくなる。\n */\nconst slots = {\n root: ['flex flex-col gap-[var(--novi-gap-stack)]', disabledState].join(' '),\n // 項目名は等幅（Input / CheckboxGroup と同じ扱い・ADR-F7）\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\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 /**\n * 方眼。上辺と左辺だけを持ち、右辺と下辺は各升目が引く。\n * こうすると隣り合う升で線が二重にならず、1px の格子になる。\n */\n list: [\n 'grid grid-cols-4 w-fit',\n 'border-t border-l border-[var(--novi-color-border-strong)]',\n ].join(' '),\n item: [\n 'inline-flex flex-col items-center gap-1',\n 'p-1.5',\n 'border-r border-b border-[var(--novi-color-border-strong)]',\n 'cursor-pointer data-[disabled]:cursor-default',\n // 選択は**枠の反転**。升目の地が紙からインクに入れ替わり、見本が台紙に載る\n 'bg-[var(--novi-color-bg)] data-[selected]:bg-[var(--novi-color-fg)]',\n 'transition-[background-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n ].join(' '),\n /**\n * 色そのものを見せる面。\n *\n * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、\n * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。\n */\n swatch: 'inline-grid place-items-center rounded-[var(--novi-radius-none)]',\n // 色だけに頼らず印でも示す（WCAG 1.4.1）。印は Checkbox と同じ等幅の文字\n indicator: `leading-none ${mono}`,\n itemLabel: [\n 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n 'group-data-[selected]:text-[var(--novi-color-bg)]',\n mono,\n ].join(' '),\n} satisfies SlotMap<typeof colorPickerSlots, (typeof colorPickerRequiredSlots)[number]>\n\n/** md の見本は 28px 角。Button の高さ・Switch のトラック幅と同じ寸法で揃える。 */\nconst size: VariantMap<NoviSize, { swatch: string; indicator: string }> = {\n sm: { swatch: 'size-6', indicator: 'text-[length:var(--novi-text-xs)]' },\n md: { swatch: 'size-7', indicator: 'text-[length:var(--novi-text-sm)]' },\n lg: { swatch: 'size-9', indicator: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * ColorPicker のスタイル定義。\n *\n * @example\n * import { colorPickerStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'grid-cols-2' } })\n */\nexport const colorPickerStyles = tv({\n slots,\n variants: { size },\n defaultVariants: { size: 'md' },\n})\n\nexport type ColorPickerStyleProps = Parameters<typeof colorPickerStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM,CAAC,6CAA6C,aAAa,CAAC,CAAC,KAAK,GAAG;CAE3E,OAAO,iEAAiE;CACxE,aAAa,oEAAoE;CACjF,cAAc,qEAAqE;;;;;CAKnF,MAAM,CACJ,0BACA,4DACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;EACJ;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;;;;;;;CAOV,QAAQ;CAER,WAAW,gBAAgB;CAC3B,WAAW;EACT;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AAkBA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAhBZ,IAAI;GAAE,QAAQ;GAAU,WAAW;EAAoC;EACvE,IAAI;GAAE,QAAQ;GAAU,WAAW;EAAoC;EACvE,IAAI;GAAE,QAAQ;GAAU,WAAW;EAAsC;CAc7D,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}
|
package/dist/flatlay.css
CHANGED
|
@@ -25,6 +25,20 @@
|
|
|
25
25
|
--novi-text-3xl: 32px;
|
|
26
26
|
--novi-font-sans: system-ui, sans-serif;
|
|
27
27
|
--novi-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
|
|
28
|
+
--novi-font-heading: var(--novi-font-mono);
|
|
29
|
+
--novi-font-numeric: tabular-nums slashed-zero;
|
|
30
|
+
--novi-pad-surface-x: 20px;
|
|
31
|
+
--novi-pad-surface-y: 14px;
|
|
32
|
+
--novi-pad-control-x-sm: 10px;
|
|
33
|
+
--novi-pad-control-x-md: 12px;
|
|
34
|
+
--novi-pad-control-x-lg: 16px;
|
|
35
|
+
--novi-gap-inline: 8px;
|
|
36
|
+
--novi-gap-stack: 12px;
|
|
37
|
+
--novi-gap-section: 24px;
|
|
38
|
+
--novi-tracking-tight: 0em;
|
|
39
|
+
--novi-tracking-normal: 0.01em;
|
|
40
|
+
--novi-leading-body: 1.7;
|
|
41
|
+
--novi-leading-heading: 1.35;
|
|
28
42
|
--novi-duration-fast: 100ms;
|
|
29
43
|
--novi-duration-base: 100ms;
|
|
30
44
|
--novi-duration-slow: 100ms;
|
package/dist/flatlay.scoped.css
CHANGED
|
@@ -25,6 +25,20 @@
|
|
|
25
25
|
--novi-text-3xl: 32px;
|
|
26
26
|
--novi-font-sans: system-ui, sans-serif;
|
|
27
27
|
--novi-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
|
|
28
|
+
--novi-font-heading: var(--novi-font-mono);
|
|
29
|
+
--novi-font-numeric: tabular-nums slashed-zero;
|
|
30
|
+
--novi-pad-surface-x: 20px;
|
|
31
|
+
--novi-pad-surface-y: 14px;
|
|
32
|
+
--novi-pad-control-x-sm: 10px;
|
|
33
|
+
--novi-pad-control-x-md: 12px;
|
|
34
|
+
--novi-pad-control-x-lg: 16px;
|
|
35
|
+
--novi-gap-inline: 8px;
|
|
36
|
+
--novi-gap-stack: 12px;
|
|
37
|
+
--novi-gap-section: 24px;
|
|
38
|
+
--novi-tracking-tight: 0em;
|
|
39
|
+
--novi-tracking-normal: 0.01em;
|
|
40
|
+
--novi-leading-body: 1.7;
|
|
41
|
+
--novi-leading-heading: 1.35;
|
|
28
42
|
--novi-duration-fast: 100ms;
|
|
29
43
|
--novi-duration-base: 100ms;
|
|
30
44
|
--novi-duration-slow: 100ms;
|
|
@@ -14,7 +14,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
|
|
|
14
14
|
inputWrapper: string;
|
|
15
15
|
input: string;
|
|
16
16
|
}>;
|
|
17
|
-
radius: VariantMap<"
|
|
17
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
18
18
|
inputWrapper: string;
|
|
19
19
|
}>;
|
|
20
20
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -41,7 +41,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
|
|
|
41
41
|
inputWrapper: string;
|
|
42
42
|
input: string;
|
|
43
43
|
}>;
|
|
44
|
-
radius: VariantMap<"
|
|
44
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
45
45
|
inputWrapper: string;
|
|
46
46
|
}>;
|
|
47
47
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -68,7 +68,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
|
|
|
68
68
|
inputWrapper: string;
|
|
69
69
|
input: string;
|
|
70
70
|
}>;
|
|
71
|
-
radius: VariantMap<"
|
|
71
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
72
72
|
inputWrapper: string;
|
|
73
73
|
}>;
|
|
74
74
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.styles.d.mts","names":[],"sources":["../../src/input/input.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"input.styles.d.mts","names":[],"sources":["../../src/input/input.styles.ts"],"mappings":";;;;;;;;;;;cA6Ga,yCAAW;;IAhCyB;IAAe;;;IAeX;;;IA5BE;;;;;;;;;;;;;;;;;;;;IAaN;IAAe;;;IAeX;;;IA5BE;;;;;;;;;;;;;;;;;;;;IAaN;IAAe;;;IAeX;;;IA5BE;;;;;;;;;;;;;;;;;;;KAoD3C,kBAAkB,kBAAkB"}
|
|
@@ -23,7 +23,7 @@ const slots = {
|
|
|
23
23
|
* 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。
|
|
24
24
|
*/
|
|
25
25
|
inputWrapper: [
|
|
26
|
-
"flex items-center gap-
|
|
26
|
+
"flex items-center gap-[var(--novi-gap-inline)] w-full",
|
|
27
27
|
"text-[var(--novi-color-fg)]",
|
|
28
28
|
"border",
|
|
29
29
|
"rounded-[var(--novi-radius-sm)]",
|
|
@@ -57,15 +57,15 @@ const inputStyles = tv({
|
|
|
57
57
|
variants: {
|
|
58
58
|
size: {
|
|
59
59
|
sm: {
|
|
60
|
-
inputWrapper: "h-7 px-
|
|
60
|
+
inputWrapper: "h-7 px-[var(--novi-pad-control-x-sm)]",
|
|
61
61
|
input: "text-[length:var(--novi-text-sm)]"
|
|
62
62
|
},
|
|
63
63
|
md: {
|
|
64
|
-
inputWrapper: "h-8 px-
|
|
64
|
+
inputWrapper: "h-8 px-[var(--novi-pad-control-x-md)]",
|
|
65
65
|
input: "text-[length:var(--novi-text-base)]"
|
|
66
66
|
},
|
|
67
67
|
lg: {
|
|
68
|
-
inputWrapper: "h-10 px-
|
|
68
|
+
inputWrapper: "h-10 px-[var(--novi-pad-control-x-lg)]",
|
|
69
69
|
input: "text-[length:var(--novi-text-base)]"
|
|
70
70
|
}
|
|
71
71
|
},
|
|
@@ -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'\nimport { mono, monoNumeric } from '../styles/mono'\n\n/**\n * Flatlay の Input は**記入欄**。罫線で囲った枠に書き込む。\n *\n * 押下の反転（ADR-F3）はここには無い。入力欄は「押す」ものではなく、\n * カーソルが入って書くものなので、反転させると書いた文字が読めなくなる。\n * 手応えを返すのは罫線の色だけで、フォーカスはリングが担う。\n *\n * ラベルが等幅なのは ADR-F7 の運用。**読ませる文（本文）と読み取らせる項目名**を\n * 書体で分けるのが帳票の作法で、Flatlay が影を持たない代わりの区別になっている。\n */\nconst slots = {\n root: 'flex flex-col gap-1.5',\n // 項目名は等幅。プレースホルダをラベル代わりにはしない\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n /**\n * 記入欄の枠。RAC の `Group` は `data-focus-visible` / `data-invalid` を出すので、\n * Button と同じ `focusRing` がそのまま効く。\n *\n * 罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。\n * 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。\n */\n inputWrapper: [\n 'flex items-center gap-
|
|
1
|
+
{"version":3,"file":"input.styles.mjs","names":[],"sources":["../../src/input/input.styles.ts"],"sourcesContent":["import type {\n inputRequiredSlots,\n inputSlots,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono, monoNumeric } from '../styles/mono'\n\n/**\n * Flatlay の Input は**記入欄**。罫線で囲った枠に書き込む。\n *\n * 押下の反転（ADR-F3）はここには無い。入力欄は「押す」ものではなく、\n * カーソルが入って書くものなので、反転させると書いた文字が読めなくなる。\n * 手応えを返すのは罫線の色だけで、フォーカスはリングが担う。\n *\n * ラベルが等幅なのは ADR-F7 の運用。**読ませる文（本文）と読み取らせる項目名**を\n * 書体で分けるのが帳票の作法で、Flatlay が影を持たない代わりの区別になっている。\n */\nconst slots = {\n root: 'flex flex-col gap-1.5',\n // 項目名は等幅。プレースホルダをラベル代わりにはしない\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n /**\n * 記入欄の枠。RAC の `Group` は `data-focus-visible` / `data-invalid` を出すので、\n * Button と同じ `focusRing` がそのまま効く。\n *\n * 罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。\n * 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。\n */\n inputWrapper: [\n 'flex items-center gap-[var(--novi-gap-inline)] w-full',\n 'text-[var(--novi-color-fg)]',\n 'border',\n 'rounded-[var(--novi-radius-sm)]',\n 'data-[invalid]:border-[var(--novi-color-danger)]',\n 'transition-[border-color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\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 // 差し込まれるのは単位・通貨記号・件数といった「読み取らせる値」なので等幅（ADR-F7）\n startContent: `shrink-0 inline-flex text-[var(--novi-color-muted)] ${monoNumeric}`,\n endContent: `shrink-0 inline-flex text-[var(--novi-color-muted)] ${monoNumeric}`,\n description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,\n} satisfies SlotMap<typeof inputSlots, (typeof inputRequiredSlots)[number]>\n\n/**\n * variant が決めるのは**枠の強さと地の色**。\n *\n * `ghost` が下線だけになるのは帳票の記入線そのもので、表を詰めて並べたときに\n * 面を増やさずに「ここに書く」を示せる。Flatlay で唯一これが自然に効く形。\n */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: {\n inputWrapper: 'bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]',\n },\n outline: { inputWrapper: 'bg-transparent border-[var(--novi-color-border-strong)]' },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n plain: { inputWrapper: 'bg-transparent border-transparent px-0' },\n}\n\n/** 高さは Button と同じ帳票の行。28 / 32 / 40px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n sm: {\n inputWrapper: 'h-7 px-[var(--novi-pad-control-x-sm)]',\n input: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n inputWrapper: 'h-8 px-[var(--novi-pad-control-x-md)]',\n input: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'h-10 px-[var(--novi-pad-control-x-lg)]',\n input: 'text-[length:var(--novi-text-base)]',\n },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Input のスタイル定義。\n *\n * @example\n * import { inputStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myInput = tv({ extend: inputStyles, slots: { input: 'text-right' } })\n */\nexport const inputStyles = tv({\n slots,\n // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n variants: { size, radius, variant },\n defaultVariants: { size: 'md', radius: 'sm', variant: 'outline' },\n})\n\nexport type InputStyleProps = Parameters<typeof inputStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,QAAQ;CACZ,MAAM;CAEN,OAAO,iEAAiE;;;;;;;;CAQxE,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;CAEV,cAAc,uDAAuD;CACrE,YAAY,uDAAuD;CACnE,aAAa,oEAAoE;CAEjF,cAAc,qEAAqE;AACrF;;;;;;;;;;AAqDA,MAAa,cAAc,GAAG;CAC5B;CAEA,UAAU;EAAE;GAlCZ,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;EAuBY;EAAM;GAnBlB,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAexC;EAAQ;GA/C1B,OAAO,EACL,cAAc,0EAChB;GACA,SAAS,EAAE,cAAc,0DAA0D;GACnF,MAAM,EAAE,cAAc,kEAAkE;GACxF,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,yCAAyC;EAuCtC;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAU;AAClE,CAAC"}
|