@novi-ui/tactile 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/accordion.styles.d.mts.map +1 -1
- package/dist/accordion/accordion.styles.mjs +41 -29
- 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 +3 -3
- package/dist/badge/badge.styles.mjs.map +1 -1
- package/dist/breadcrumbs/breadcrumbs.styles.mjs +1 -1
- package/dist/breadcrumbs/breadcrumbs.styles.mjs.map +1 -1
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.d.mts.map +1 -1
- package/dist/button/button.styles.mjs +7 -5
- package/dist/button/button.styles.mjs.map +1 -1
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/card/card.styles.d.mts.map +1 -1
- package/dist/card/card.styles.mjs +8 -3
- package/dist/card/card.styles.mjs.map +1 -1
- package/dist/checkbox/checkbox.styles.d.mts.map +1 -1
- package/dist/checkbox/checkbox.styles.mjs +5 -5
- package/dist/checkbox/checkbox.styles.mjs.map +1 -1
- package/dist/color-picker/color-picker.styles.d.mts.map +1 -1
- package/dist/color-picker/color-picker.styles.mjs +2 -2
- package/dist/color-picker/color-picker.styles.mjs.map +1 -1
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/input/input.styles.d.mts.map +1 -1
- package/dist/input/input.styles.mjs +4 -4
- package/dist/input/input.styles.mjs.map +1 -1
- package/dist/menu/menu.styles.d.mts +9 -9
- package/dist/menu/menu.styles.d.mts.map +1 -1
- package/dist/menu/menu.styles.mjs +8 -4
- package/dist/menu/menu.styles.mjs.map +1 -1
- package/dist/modal/modal.styles.d.mts +3 -3
- package/dist/modal/modal.styles.d.mts.map +1 -1
- package/dist/modal/modal.styles.mjs +5 -3
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.d.mts +1 -1
- package/dist/popover/popover.mjs +1 -1
- package/dist/popover/popover.mjs.map +1 -1
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/popover/popover.styles.d.mts.map +1 -1
- package/dist/popover/popover.styles.mjs +2 -2
- package/dist/popover/popover.styles.mjs.map +1 -1
- package/dist/progress/progress.mjs +1 -1
- package/dist/progress/progress.mjs.map +1 -1
- package/dist/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 +7 -7
- package/dist/select/select.styles.mjs.map +1 -1
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/spinner/spinner.styles.mjs +1 -1
- package/dist/spinner/spinner.styles.mjs.map +1 -1
- package/dist/switch/switch.styles.d.mts.map +1 -1
- package/dist/switch/switch.styles.mjs +1 -1
- package/dist/switch/switch.styles.mjs.map +1 -1
- package/dist/tabs/tabs.styles.d.mts.map +1 -1
- package/dist/tabs/tabs.styles.mjs +7 -7
- package/dist/tabs/tabs.styles.mjs.map +1 -1
- package/dist/tactile.css +16 -0
- package/dist/tactile.scoped.css +16 -0
- 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 +7 -5
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -10,7 +10,7 @@ const slots = {
|
|
|
10
10
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
11
11
|
inputWrapper: [
|
|
12
12
|
"text-[var(--novi-color-fg)]",
|
|
13
|
-
"flex items-center gap-
|
|
13
|
+
"flex items-center gap-[var(--novi-gap-inline)] w-full",
|
|
14
14
|
"bg-[var(--novi-color-surface)]",
|
|
15
15
|
"shadow-[var(--novi-shadow-sm)]",
|
|
16
16
|
"rounded-[var(--novi-radius-md)]",
|
|
@@ -56,15 +56,15 @@ const inputStyles = tv({
|
|
|
56
56
|
},
|
|
57
57
|
size: {
|
|
58
58
|
sm: {
|
|
59
|
-
inputWrapper: "h-10 px-
|
|
59
|
+
inputWrapper: "h-10 px-[var(--novi-pad-control-x-sm)]",
|
|
60
60
|
input: "text-[length:var(--novi-text-base)]"
|
|
61
61
|
},
|
|
62
62
|
md: {
|
|
63
|
-
inputWrapper: "h-12 px-
|
|
63
|
+
inputWrapper: "h-12 px-[var(--novi-pad-control-x-md)]",
|
|
64
64
|
input: "text-[length:var(--novi-text-base)]"
|
|
65
65
|
},
|
|
66
66
|
lg: {
|
|
67
|
-
inputWrapper: "h-14 px-
|
|
67
|
+
inputWrapper: "h-14 px-[var(--novi-pad-control-x-lg)]",
|
|
68
68
|
input: "text-[length:var(--novi-text-base)]"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.styles.mjs","names":[],"sources":["../../src/input/input.styles.ts"],"sourcesContent":["import type {\n inputRequiredSlots,\n inputSlots,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Input は**指で触る前提の面**。境界線ではなく影で持ち上げ、\n * 入力の文字は 16px を下回らせない（iOS Safari が自動ズームしてレイアウトが飛ぶ）。\n */\n// 型注釈ではなく satisfies（ADR-R5）。任意 slot が呼べなくなるのを防ぐ。\nconst slots = {\n root: 'flex flex-col gap-1.5',\n // ラベルは常に上・左揃え。プレースホルダをラベル代わりにしない\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n // RAC の Group を使う。Group は data-focus-visible / data-invalid を出すので、\n // Button と同じ focusRing 定義がそのまま使える（属性名を書き換える必要がない）。\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center gap-
|
|
1
|
+
{"version":3,"file":"input.styles.mjs","names":[],"sources":["../../src/input/input.styles.ts"],"sourcesContent":["import type {\n inputRequiredSlots,\n inputSlots,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Input は**指で触る前提の面**。境界線ではなく影で持ち上げ、\n * 入力の文字は 16px を下回らせない（iOS Safari が自動ズームしてレイアウトが飛ぶ）。\n */\n// 型注釈ではなく satisfies（ADR-R5）。任意 slot が呼べなくなるのを防ぐ。\nconst slots = {\n root: 'flex flex-col gap-1.5',\n // ラベルは常に上・左揃え。プレースホルダをラベル代わりにしない\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n // RAC の Group を使う。Group は data-focus-visible / data-invalid を出すので、\n // Button と同じ focusRing 定義がそのまま使える（属性名を書き換える必要がない）。\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center gap-[var(--novi-gap-inline)] w-full',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-sm)]',\n 'rounded-[var(--novi-radius-md)]',\n 'transition-[opacity,box-shadow]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n input: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n ].join(' '),\n startContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n endContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof inputSlots, (typeof inputRequiredSlots)[number]>\n\n/**\n * core の語彙定義（solid=塗りつぶしで最も強い / soft=淡い背景で境界線なし）に従って\n * 5つを視覚的に区別する。同じクラスを生む variant があると\n * 「テーマを切り替えても API が同じ」という約束が形だけになる。\n */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n // 持ち上がった面。最も強い\n solid: { inputWrapper: 'bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]' },\n // 輪郭のみ。影を持たない\n outline: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n },\n // 沈んだ面。輪郭も影も持たない\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n // 地に溶ける。表を詰めて並べるときに面を増やさない\n ghost: { inputWrapper: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n // 完全に無装飾。インライン編集などで使う\n // 下線だけ残す。ghost（完全に地へ溶ける）と見分けがつかなくならないようにする\n plain: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]',\n },\n}\n\n/**\n * 高さは Button と揃える。40 / 48 / 56px。\n *\n * **入力の文字は全段 base(17px)** にする。`sm` でも小さくしないのは、\n * iOS Safari が 16px 未満の入力欄でフォーカス時にページごと拡大するため。\n * 視覚的な軽さは高さと余白で作る（FR-08 / AC-01-3）。\n */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n sm: {\n inputWrapper: 'h-10 px-[var(--novi-pad-control-x-sm)]',\n input: 'text-[length:var(--novi-text-base)]',\n },\n md: {\n inputWrapper: 'h-12 px-[var(--novi-pad-control-x-md)]',\n input: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'h-14 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 * 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。\n *\n * @example\n * import { inputStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myInput = tv({\n * extend: inputStyles,\n * slots: { inputWrapper: 'font-mono' },\n * })\n */\nexport const inputStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type InputStyleProps = Parameters<typeof inputStyles>[0]\n"],"mappings":";;;;;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;CAEN,OAAO;CAGP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,cAAc;CACd,YAAY;CACZ,aAAa;CAEb,cAAc;AAChB;;;;;;;;;;;;;;;AAuEA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAhEZ,OAAO,EAAE,cAAc,gEAAgE;GAEvF,SAAS,EACP,cACE,gGACJ;GAEA,MAAM,EAAE,cAAc,iEAAiE;GAEvF,OAAO,EAAE,cAAc,kDAAkD;GAGzE,OAAO,EACL,cACE,sIACJ;EAiDY;EAAS;GAtCrB,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;EA2BqB;EAAM;GAvB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAmB/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
9
9
|
[key: string]: {
|
|
10
10
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
11
|
-
item?: import("tailwind-variants").ClassValue;
|
|
12
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
13
11
|
list?: import("tailwind-variants").ClassValue;
|
|
12
|
+
item?: import("tailwind-variants").ClassValue;
|
|
14
13
|
separator?: import("tailwind-variants").ClassValue;
|
|
15
|
-
|
|
14
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
16
15
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
16
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
17
17
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
18
18
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
19
19
|
section?: import("tailwind-variants").ClassValue;
|
|
@@ -23,12 +23,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
} | {
|
|
24
24
|
[x: string]: {
|
|
25
25
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
26
|
-
item?: import("tailwind-variants").ClassValue;
|
|
27
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
28
26
|
list?: import("tailwind-variants").ClassValue;
|
|
27
|
+
item?: import("tailwind-variants").ClassValue;
|
|
29
28
|
separator?: import("tailwind-variants").ClassValue;
|
|
30
|
-
|
|
29
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
31
30
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
31
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
32
32
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
33
33
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
34
34
|
section?: import("tailwind-variants").ClassValue;
|
|
@@ -49,12 +49,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
49
49
|
}, undefined, {
|
|
50
50
|
[key: string]: {
|
|
51
51
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
52
|
-
item?: import("tailwind-variants").ClassValue;
|
|
53
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
54
52
|
list?: import("tailwind-variants").ClassValue;
|
|
53
|
+
item?: import("tailwind-variants").ClassValue;
|
|
55
54
|
separator?: import("tailwind-variants").ClassValue;
|
|
56
|
-
|
|
55
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
57
56
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
57
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
58
58
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
59
59
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
60
60
|
section?: import("tailwind-variants").ClassValue;
|
|
@@ -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":";;;;;;;cAqDa,wCAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEX,iBAAiB,kBAAkB"}
|
|
@@ -14,10 +14,10 @@ const slots = {
|
|
|
14
14
|
"pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]",
|
|
15
15
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
16
16
|
].join(" "),
|
|
17
|
-
list: "outline-none p-
|
|
17
|
+
list: "outline-none p-1.5 flex flex-col",
|
|
18
18
|
item: [
|
|
19
|
-
"flex items-center gap-
|
|
20
|
-
"min-h-12 px-
|
|
19
|
+
"flex items-center gap-[var(--novi-gap-inline)] justify-between",
|
|
20
|
+
"min-h-12 px-[var(--novi-pad-control-x-md)] cursor-pointer outline-none",
|
|
21
21
|
"text-[var(--novi-color-fg)]",
|
|
22
22
|
"rounded-[var(--novi-radius-md)]",
|
|
23
23
|
"data-[focused]:bg-[var(--novi-color-subtle)]",
|
|
@@ -28,7 +28,11 @@ const slots = {
|
|
|
28
28
|
itemShortcut: "shrink-0 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tabular-nums",
|
|
29
29
|
separator: "my-1 h-px bg-[var(--novi-color-border)]",
|
|
30
30
|
section: "flex flex-col",
|
|
31
|
-
sectionLabel:
|
|
31
|
+
sectionLabel: [
|
|
32
|
+
"px-[var(--novi-pad-control-x-md)] pt-[var(--novi-gap-inline)] pb-1",
|
|
33
|
+
"text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
|
|
34
|
+
"tracking-[var(--novi-tracking-normal)]"
|
|
35
|
+
].join(" ")
|
|
32
36
|
};
|
|
33
37
|
/**
|
|
34
38
|
* Menu のスタイル定義。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.styles.mjs","names":[],"sources":["../../src/menu/menu.styles.ts"],"sourcesContent":["import type { menuRequiredSlots, menuSlots, SlotMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n trigger: 'outline-none',\n // Select と同じ下端シート。RAC の位置決めを奪えるのは !important だけ（ADR-T2）\n popover: [\n 'text-[var(--novi-color-fg)]',\n 'outline-none',\n '!fixed !top-auto !inset-x-0 !bottom-0 !max-w-none !w-full',\n '!max-h-[70dvh]',\n 'bg-[var(--novi-color-surface)]',\n 'rounded-t-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'pb-[env(safe-area-inset-bottom,0px)]',\n // 横向きのノッチは左右に来る。面は全幅のまま、中身だけを内側へ寄せる（FR-13）\n 'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n list: 'outline-none p-
|
|
1
|
+
{"version":3,"file":"menu.styles.mjs","names":[],"sources":["../../src/menu/menu.styles.ts"],"sourcesContent":["import type { menuRequiredSlots, menuSlots, SlotMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n trigger: 'outline-none',\n // Select と同じ下端シート。RAC の位置決めを奪えるのは !important だけ（ADR-T2）\n popover: [\n 'text-[var(--novi-color-fg)]',\n 'outline-none',\n '!fixed !top-auto !inset-x-0 !bottom-0 !max-w-none !w-full',\n '!max-h-[70dvh]',\n 'bg-[var(--novi-color-surface)]',\n 'rounded-t-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'pb-[env(safe-area-inset-bottom,0px)]',\n // 横向きのノッチは左右に来る。面は全幅のまま、中身だけを内側へ寄せる（FR-13）\n 'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n // 行の背景が丸く抜けて見えるための溝。ここは「余白の設計」ではなく行の位置合わせなので\n // 生値のまま置く。シート端から文字までの実距離は溝 + 行の余白 = 26px で、\n // 面の余白（28px）とほぼ揃う\n list: 'outline-none p-1.5 flex flex-col',\n item: [\n 'flex items-center gap-[var(--novi-gap-inline)] justify-between',\n // 一覧は誤タップが最も起きる場所。行高は 48px を下回らせない\n 'min-h-12 px-[var(--novi-pad-control-x-md)] cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-md)]',\n 'data-[focused]:bg-[var(--novi-color-subtle)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n ].join(' '),\n itemLabel: 'truncate',\n itemDescription: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n // ショートカットは桁を揃える。等幅数字にしないと縦の線が揃わない\n itemShortcut:\n 'shrink-0 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tabular-nums',\n separator: 'my-1 h-px bg-[var(--novi-color-border)]',\n section: 'flex flex-col',\n // 行の文字と左端を揃える。ラベルだけ内側にずれると、どの行に掛かる見出しか読めない\n sectionLabel: [\n 'px-[var(--novi-pad-control-x-md)] pt-[var(--novi-gap-inline)] pb-1',\n 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n 'tracking-[var(--novi-tracking-normal)]',\n ].join(' '),\n} satisfies SlotMap<typeof menuSlots, (typeof menuRequiredSlots)[number]>\n\n/**\n * Menu のスタイル定義。\n *\n * @example\n * const myMenu = tv({ extend: menuStyles, slots: { popover: 'min-w-56' } })\n */\nexport const menuStyles = tv({ slots })\n\nexport type MenuStyleProps = Parameters<typeof menuStyles>[0]\n"],"mappings":";;AAGA,MAAM,QAAQ;CACZ,SAAS;CAET,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAIV,MAAM;CACN,MAAM;EACJ;EAEA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,iBAAiB;CAEjB,cACE;CACF,WAAW;CACX,SAAS;CAET,cAAc;EACZ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;AAQA,MAAa,aAAa,GAAG,EAAE,MAAM,CAAC"}
|
|
@@ -13,7 +13,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
13
13
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
14
14
|
panel: string;
|
|
15
15
|
}>;
|
|
16
|
-
radius: VariantMap<"
|
|
16
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
17
17
|
panel: string;
|
|
18
18
|
}>;
|
|
19
19
|
}, {
|
|
@@ -27,7 +27,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
27
27
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
28
28
|
panel: string;
|
|
29
29
|
}>;
|
|
30
|
-
radius: VariantMap<"
|
|
30
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
31
31
|
panel: string;
|
|
32
32
|
}>;
|
|
33
33
|
}, {
|
|
@@ -41,7 +41,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
41
41
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
42
42
|
panel: string;
|
|
43
43
|
}>;
|
|
44
|
-
radius: VariantMap<"
|
|
44
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
45
45
|
panel: string;
|
|
46
46
|
}>;
|
|
47
47
|
}, {
|
|
@@ -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":";;;;;;;;;;;cAuGa,yCAAW;;IAzB2B;;;IAQL;;;;;;;;;;;IARK;;;IAQL;;;;;;;;;;;IARK;;;IAQL;;;;;;;;;;KAuBlC,kBAAkB,kBAAkB"}
|
|
@@ -27,8 +27,10 @@ const slots = {
|
|
|
27
27
|
"data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]"
|
|
28
28
|
].join(" "),
|
|
29
29
|
title: [
|
|
30
|
-
"px-
|
|
30
|
+
"px-[var(--novi-pad-surface-x)] pt-[var(--novi-pad-surface-y)] pb-[var(--novi-gap-inline)]",
|
|
31
31
|
"text-[length:var(--novi-text-lg)] font-bold",
|
|
32
|
+
"font-[family-name:var(--novi-font-heading)]",
|
|
33
|
+
"tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]",
|
|
32
34
|
"text-[var(--novi-color-fg)]"
|
|
33
35
|
].join(" "),
|
|
34
36
|
closeButton: [
|
|
@@ -41,8 +43,8 @@ const slots = {
|
|
|
41
43
|
"data-[pressed]:scale-[0.97] motion-reduce:data-[pressed]:scale-100",
|
|
42
44
|
focusRing
|
|
43
45
|
].join(" "),
|
|
44
|
-
body: ["px-
|
|
45
|
-
footer: "flex flex-col gap-
|
|
46
|
+
body: ["px-[var(--novi-pad-surface-x)] pb-[var(--novi-pad-surface-y)] pt-1", "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"].join(" "),
|
|
47
|
+
footer: ["flex flex-col gap-[var(--novi-gap-inline)]", "px-[var(--novi-pad-surface-x)] pb-[var(--novi-pad-surface-y)]"].join(" ")
|
|
46
48
|
};
|
|
47
49
|
/**
|
|
48
50
|
* Modal のスタイル定義。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type {\n modalRequiredSlots,\n modalSlots,\n NoviRadius,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Modal は **下端から出るボトムシート**（architecture.md §5 テーマB）。\n *\n * Raster との構造差:\n * - 中央配置 → 画面下端に張り付く（`items-end`）\n * - ヘッダー行に ✕ → **フッターのフルワイドボタン**（親指の届く位置に出口を置く）\n * - 上下すべて角丸 → **上端だけ角丸**（下から出てきた紙という形）\n * - 影は下向き → **上向き**（下端から来る面には上から光が当たる）\n */\nconst slots = {\n backdrop: [\n // items-end が「下から出る」の全て。Raster は place-items-center\n 'fixed inset-0 z-50 flex items-end justify-center',\n 'bg-[var(--novi-color-overlay)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_200ms_ease-out]',\n ].join(' '),\n panel: [\n 'text-[var(--novi-color-fg)]',\n 'w-full outline-none',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'overflow-auto',\n // 下端の余白はホームインジケータぶんを足す。env() の第2引数で\n // safe-area の無い環境（デスクトップ）では 0 に落ちる（AC-10-3 / FR-13）\n 'pb-[env(safe-area-inset-bottom,0px)]',\n // 横向きではノッチが左右に来る。面は画面幅いっぱいのまま、中身だけを内側へ寄せる\n 'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]',\n // 下から せり上がる。260ms は移動距離に見合う時間（120ms では瞬間移動に見える）\n 'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n ].join(' '),\n // header は描画しない（任意 slot の省略）。title だけが body の上に載る\n title: [\n 'px-
|
|
1
|
+
{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type {\n modalRequiredSlots,\n modalSlots,\n NoviRadius,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Modal は **下端から出るボトムシート**（architecture.md §5 テーマB）。\n *\n * Raster との構造差:\n * - 中央配置 → 画面下端に張り付く（`items-end`）\n * - ヘッダー行に ✕ → **フッターのフルワイドボタン**（親指の届く位置に出口を置く）\n * - 上下すべて角丸 → **上端だけ角丸**（下から出てきた紙という形）\n * - 影は下向き → **上向き**（下端から来る面には上から光が当たる）\n */\nconst slots = {\n backdrop: [\n // items-end が「下から出る」の全て。Raster は place-items-center\n 'fixed inset-0 z-50 flex items-end justify-center',\n 'bg-[var(--novi-color-overlay)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_200ms_ease-out]',\n ].join(' '),\n panel: [\n 'text-[var(--novi-color-fg)]',\n 'w-full outline-none',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'overflow-auto',\n // 下端の余白はホームインジケータぶんを足す。env() の第2引数で\n // safe-area の無い環境（デスクトップ）では 0 に落ちる（AC-10-3 / FR-13）\n 'pb-[env(safe-area-inset-bottom,0px)]',\n // 横向きではノッチが左右に来る。面は画面幅いっぱいのまま、中身だけを内側へ寄せる\n 'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]',\n // 下から せり上がる。260ms は移動距離に見合う時間（120ms では瞬間移動に見える）\n 'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n ].join(' '),\n // header は描画しない（任意 slot の省略）。title だけが body の上に載る\n title: [\n // 下だけ gap トークンなのは、この余白が「見出しと本文の距離」そのものだから。\n // 面の余白（surface-y）で開けると、見出しが本文から切り離されて別の区画に見える\n 'px-[var(--novi-pad-surface-x)] pt-[var(--novi-pad-surface-y)] pb-[var(--novi-gap-inline)]',\n 'text-[length:var(--novi-text-lg)] font-bold',\n 'font-[family-name:var(--novi-font-heading)]',\n 'tracking-[var(--novi-tracking-tight)] leading-[var(--novi-leading-heading)]',\n 'text-[var(--novi-color-fg)]',\n ].join(' '),\n closeButton: [\n // フルワイド。指がどこに落ちても当たる\n 'w-full h-14 grid place-items-center',\n 'text-[length:var(--novi-text-base)] font-bold',\n 'text-[var(--novi-color-fg)]',\n 'bg-[var(--novi-color-subtle)]',\n 'rounded-[var(--novi-radius-md)]',\n 'transition-[background-color,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[pressed]:scale-[0.97] motion-reduce:data-[pressed]:scale-100',\n focusRing,\n ].join(' '),\n body: [\n 'px-[var(--novi-pad-surface-x)] pb-[var(--novi-pad-surface-y)] pt-1',\n 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 縦積み。横並びだと1つあたりの幅が指に対して狭くなる。\n // ボタン列は1つの塊なので gap は inline。stack まで開けると別々の操作に見える\n footer: [\n 'flex flex-col gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-surface-x)] pb-[var(--novi-pad-surface-y)]',\n ].join(' '),\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\n/**\n * 全幅シートに幅の段階は存在しないため、`size` は**最大高**として解釈する（ADR-T3）。\n * 語彙は共通、解釈はテーマの自由（ADR-06）。\n */\nconst size: VariantMap<NoviSize | 'full', { panel: string }> = {\n sm: { panel: 'max-h-[40dvh]' },\n md: { panel: 'max-h-[60dvh]' },\n lg: { panel: 'max-h-[80dvh]' },\n full: { panel: 'max-h-[100dvh] h-[100dvh]' },\n}\n\n/** 下端は画面に接しているので、角丸は上端だけに効く。 */\nconst radius: VariantMap<NoviRadius, { panel: string }> = {\n none: { panel: 'rounded-t-[var(--novi-radius-none)]' },\n sm: { panel: 'rounded-t-[var(--novi-radius-sm)]' },\n md: { panel: 'rounded-t-[var(--novi-radius-md)]' },\n lg: { panel: 'rounded-t-[var(--novi-radius-lg)]' },\n full: { panel: 'rounded-t-[var(--novi-radius-full)]' },\n}\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * import { modalStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myModal = tv({ extend: modalStyles, slots: { panel: 'max-h-[50dvh]' } })\n */\nexport const modalStyles = tv({\n slots,\n variants: { size, radius },\n defaultVariants: { size: 'md', radius: 'lg' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n\n/**\n * シート上端の掴み手。**装飾であり slot ではない**（architecture.md §5 の運用）。\n *\n * ドラッグ開閉は MVP の対象外（NG6）なので、掴めそうに見せすぎない。\n * 細く低コントラストにして「シートの上端」を示す線に留める。\n */\nexport const grabberClass = [\n 'mx-auto mt-2 mb-1 h-1 w-9 shrink-0',\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-border)]',\n].join(' ')\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,QAAQ;CACZ,UAAU;EAER;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EAGA;EAEA;EAEA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;EAGL;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;EAEX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM,CACJ,sEACA,gEACF,CAAC,CAAC,KAAK,GAAG;CAGV,QAAQ,CACN,8CACA,+DACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AA+BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA1BZ,IAAI,EAAE,OAAO,gBAAgB;GAC7B,IAAI,EAAE,OAAO,gBAAgB;GAC7B,IAAI,EAAE,OAAO,gBAAgB;GAC7B,MAAM,EAAE,OAAO,4BAA4B;EAuB/B;EAAM;GAlBlB,MAAM,EAAE,OAAO,sCAAsC;GACrD,IAAI,EAAE,OAAO,oCAAoC;GACjD,IAAI,EAAE,OAAO,oCAAoC;GACjD,IAAI,EAAE,OAAO,oCAAoC;GACjD,MAAM,EAAE,OAAO,sCAAsC;EAcnC;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAK;AAC9C,CAAC;;;;;;;AAUD,MAAa,eAAe;CAC1B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG"}
|
|
@@ -14,7 +14,7 @@ declare function PopoverContent({ children, className }: {
|
|
|
14
14
|
/**
|
|
15
15
|
* トリガーに紐づいて浮かぶ小さな面。Escape で閉じてトリガーへフォーカスが戻る。
|
|
16
16
|
*
|
|
17
|
-
*
|
|
17
|
+
* 矢印（arrow slot）は描画しない。任意 slot を省略できることの実例。
|
|
18
18
|
*
|
|
19
19
|
* @example
|
|
20
20
|
* <Popover placement="bottom">
|
package/dist/popover/popover.mjs
CHANGED
|
@@ -19,7 +19,7 @@ function PopoverContent({ children, className }) {
|
|
|
19
19
|
/**
|
|
20
20
|
* トリガーに紐づいて浮かぶ小さな面。Escape で閉じてトリガーへフォーカスが戻る。
|
|
21
21
|
*
|
|
22
|
-
*
|
|
22
|
+
* 矢印（arrow slot）は描画しない。任意 slot を省略できることの実例。
|
|
23
23
|
*
|
|
24
24
|
* @example
|
|
25
25
|
* <Popover placement="bottom">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.mjs","names":["Popover","RACPopover","Tooltip","RACTooltip"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["'use client'\n\nimport type { PopoverProps, TooltipProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n Popover as RACPopover,\n Tooltip as RACTooltip,\n TooltipTrigger,\n} from 'react-aria-components'\nimport { popoverStyles, tooltipStyles } from './popover.styles'\n\n/**\n * Popover の中身。\n *\n * @example\n * <PopoverContent>ここに補足を書く</PopoverContent>\n */\nexport function PopoverContent({\n children,\n className,\n}: {\n children?: ReactNode\n className?: string\n}) {\n return (\n <div data-slot=\"content\" className={popoverStyles().content({ class: className })}>\n {children}\n </div>\n )\n}\n\n/**\n * トリガーに紐づいて浮かぶ小さな面。Escape で閉じてトリガーへフォーカスが戻る。\n *\n *
|
|
1
|
+
{"version":3,"file":"popover.mjs","names":["Popover","RACPopover","Tooltip","RACTooltip"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["'use client'\n\nimport type { PopoverProps, TooltipProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n Popover as RACPopover,\n Tooltip as RACTooltip,\n TooltipTrigger,\n} from 'react-aria-components'\nimport { popoverStyles, tooltipStyles } from './popover.styles'\n\n/**\n * Popover の中身。\n *\n * @example\n * <PopoverContent>ここに補足を書く</PopoverContent>\n */\nexport function PopoverContent({\n children,\n className,\n}: {\n children?: ReactNode\n className?: string\n}) {\n return (\n <div data-slot=\"content\" className={popoverStyles().content({ class: className })}>\n {children}\n </div>\n )\n}\n\n/**\n * トリガーに紐づいて浮かぶ小さな面。Escape で閉じてトリガーへフォーカスが戻る。\n *\n * 矢印（arrow slot）は描画しない。任意 slot を省略できることの実例。\n *\n * @example\n * <Popover placement=\"bottom\">\n * <Button>詳細</Button>\n * <PopoverContent>ここに補足を書く</PopoverContent>\n * </Popover>\n */\nexport function Popover({\n radius,\n placement = 'bottom',\n offset = 6,\n isOpen,\n defaultOpen,\n onOpenChange,\n children,\n className,\n classNames,\n id,\n}: PopoverProps) {\n const s = popoverStyles({ radius })\n const items = Array.isArray(children) ? children : [children]\n const [trigger, ...content] = items\n\n return (\n <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n {trigger}\n <RACPopover\n placement={placement}\n offset={offset}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {/* RAC の Popover は id を受け取らないため Dialog に付ける */}\n <Dialog id={id} className=\"outline-none\">\n {content}\n </Dialog>\n </RACPopover>\n </DialogTrigger>\n )\n}\n\n/**\n * 要素の補足説明。ホバーとフォーカスの両方で開く。\n *\n * ツールチップだけに情報を置かないこと。触れないと読めないため、\n * 操作に必須の情報は本文かラベルに書く。\n *\n * @example\n * <Tooltip content=\"コピーする\">\n * <Button>複製</Button>\n * </Tooltip>\n */\nexport function Tooltip({\n content,\n placement = 'top',\n offset = 6,\n delay = 400,\n isOpen,\n defaultOpen,\n onOpenChange,\n isDisabled,\n children,\n className,\n classNames,\n id,\n}: TooltipProps) {\n const s = tooltipStyles()\n\n return (\n <TooltipTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n delay={delay}\n >\n {children}\n <RACTooltip\n placement={placement}\n offset={offset}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {/* RAC の Tooltip は id を受け取らないため中身に付ける */}\n <span id={id} data-slot=\"content\" className={s.content({ class: classNames?.content })}>\n {content}\n </span>\n </RACTooltip>\n </TooltipTrigger>\n )\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,eAAe,EAC7B,UACA,aAIC;CACD,OACE,oBAAC,OAAD;EAAK,aAAU;EAAU,WAAW,cAAc,CAAC,CAAC,QAAQ,EAAE,OAAO,UAAU,CAAC;EAC7E;CACE,CAAA;AAET;;;;;;;;;;;;AAaA,SAAgBA,UAAQ,EACtB,QACA,YAAY,UACZ,SAAS,GACT,QACA,aACA,cACA,UACA,WACA,YACA,MACe;CACf,MAAM,IAAI,cAAc,EAAE,OAAO,CAAC;CAElC,MAAM,CAAC,SAAS,GAAG,WADL,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ;CAG5D,OACE,qBAAC,eAAD;EAAuB;EAAqB;EAA2B;EAAvE,UAAA,CACG,SACD,oBAACC,SAAD;GACa;GACH;GACR,aAAU;GACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;GAG1D,UAAA,oBAAC,QAAD;IAAY;IAAI,WAAU;IACvB,UAAA;GACK,CAAA;EACE,CAAA,CACC;;AAEnB;;;;;;;;;;;;AAaA,SAAgBC,UAAQ,EACtB,SACA,YAAY,OACZ,SAAS,GACT,QAAQ,KACR,QACA,aACA,cACA,YACA,UACA,WACA,YACA,MACe;CACf,MAAM,IAAI,cAAc;CAExB,OACE,qBAAC,gBAAD;EACU;EACK;EACC;EACF;EACL;EALT,UAAA,CAOG,UACD,oBAACC,SAAD;GACa;GACH;GACR,aAAU;GACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;GAG1D,UAAA,oBAAC,QAAD;IAAU;IAAI,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAClF,UAAA;GACG,CAAA;EACI,CAAA,CACE;;AAEpB"}
|
|
@@ -7,7 +7,7 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
7
7
|
* const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })
|
|
8
8
|
*/
|
|
9
9
|
declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
-
radius: VariantMap<"
|
|
10
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
@@ -15,7 +15,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
15
15
|
arrow: string;
|
|
16
16
|
content: string;
|
|
17
17
|
}, undefined, {
|
|
18
|
-
radius: VariantMap<"
|
|
18
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
19
19
|
root: string;
|
|
20
20
|
}>;
|
|
21
21
|
}, {
|
|
@@ -23,7 +23,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
arrow: string;
|
|
24
24
|
content: string;
|
|
25
25
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
26
|
-
radius: VariantMap<"
|
|
26
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
27
27
|
root: string;
|
|
28
28
|
}>;
|
|
29
29
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.styles.d.mts","names":[],"sources":["../../src/popover/popover.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"popover.styles.d.mts","names":[],"sources":["../../src/popover/popover.styles.ts"],"mappings":";;;;;;;;cA0Ca,2CAAa;;IAdmB;;;;;;;;IAAA;;;;;;;;IAAA;;;;;;;;;;;;;cA0BhC,2CAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoBd,oBAAoB,kBAAkB;KACtC,oBAAoB,kBAAkB"}
|
|
@@ -10,7 +10,7 @@ const slots = {
|
|
|
10
10
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
11
11
|
].join(" "),
|
|
12
12
|
arrow: "hidden",
|
|
13
|
-
content: "px-
|
|
13
|
+
content: ["px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]", "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"].join(" ")
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
16
16
|
* Popover のスタイル定義。
|
|
@@ -45,7 +45,7 @@ const tooltipStyles = tv({ slots: {
|
|
|
45
45
|
"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
|
|
46
46
|
].join(" "),
|
|
47
47
|
arrow: "hidden",
|
|
48
|
-
content: "px-
|
|
48
|
+
content: ["px-[var(--novi-pad-control-x-sm)] py-1.5", "text-[length:var(--novi-text-xs)] leading-snug"].join(" ")
|
|
49
49
|
} });
|
|
50
50
|
//#endregion
|
|
51
51
|
export { popoverStyles, tooltipStyles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.styles.mjs","names":[],"sources":["../../src/popover/popover.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n popoverRequiredSlots,\n popoverSlots,\n SlotMap,\n tooltipRequiredSlots,\n tooltipSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'text-[var(--novi-color-fg)]',\n 'outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'ring-1 ring-[var(--novi-color-border)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n // Raster では arrow を描画しない。任意 slot を省略する実例\n arrow: 'hidden',\n content: 'px-
|
|
1
|
+
{"version":3,"file":"popover.styles.mjs","names":[],"sources":["../../src/popover/popover.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n popoverRequiredSlots,\n popoverSlots,\n SlotMap,\n tooltipRequiredSlots,\n tooltipSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n root: [\n 'text-[var(--novi-color-fg)]',\n 'outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'ring-1 ring-[var(--novi-color-border)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n // Raster では arrow を描画しない。任意 slot を省略する実例\n arrow: 'hidden',\n content: [\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n ].join(' '),\n} satisfies SlotMap<typeof popoverSlots, (typeof popoverRequiredSlots)[number]>\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Popover のスタイル定義。\n *\n * @example\n * const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })\n */\nexport const popoverStyles = tv({\n slots,\n variants: { radius },\n defaultVariants: { radius: 'lg' },\n})\n\n/**\n * Tooltip のスタイル定義。\n *\n * Popover と違い**反転色**（暗い面に明るい文字）で出す。\n * 補足であって操作対象ではない、という区別を色で伝える。\n */\nexport const tooltipStyles = tv({\n slots: {\n root: [\n 'outline-none max-w-xs',\n 'bg-[var(--novi-color-fg)] text-[var(--novi-color-bg)]',\n 'border border-transparent',\n 'rounded-[var(--novi-radius-sm)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n ].join(' '),\n arrow: 'hidden',\n // 補足の小片であって面ではないので、上下は面の余白を使わない。\n // 横だけコントロール段の余白に揃えると、隣接するボタンと縁が並んで見える\n content: [\n 'px-[var(--novi-pad-control-x-sm)] py-1.5',\n 'text-[length:var(--novi-text-xs)] leading-snug',\n ].join(' '),\n } satisfies SlotMap<typeof tooltipSlots, (typeof tooltipRequiredSlots)[number]>,\n})\n\nexport type PopoverStyleProps = Parameters<typeof popoverStyles>[0]\nexport type TooltipStyleProps = Parameters<typeof tooltipStyles>[0]\n"],"mappings":";;AAWA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;CACP,SAAS,CACP,iEACA,gEACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;AAgBA,MAAa,gBAAgB,GAAG;CAC9B;CACA,UAAU,EAAE;EAfZ,MAAM,EAAE,MAAM,oCAAoC;EAClD,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,MAAM,EAAE,MAAM,oCAAoC;CAWtC,EAAO;CACnB,iBAAiB,EAAE,QAAQ,KAAK;AAClC,CAAC;;;;;;;AAQD,MAAa,gBAAgB,GAAG,EAC9B,OAAO;CACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CAGP,SAAS,CACP,4CACA,gDACF,CAAC,CAAC,KAAK,GAAG;AACZ,EACF,CAAC"}
|
|
@@ -27,7 +27,7 @@ function Progress({ size, color, label, value, minValue = 0, maxValue = 100, sho
|
|
|
27
27
|
"data-slot": "root",
|
|
28
28
|
className: s.root({ class: [className, classNames?.root] }),
|
|
29
29
|
children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [(label !== void 0 || showValueLabel === true) && /* @__PURE__ */ jsxs("span", {
|
|
30
|
-
className: "flex items-baseline justify-between gap-
|
|
30
|
+
className: "flex items-baseline justify-between gap-[var(--novi-gap-inline)]",
|
|
31
31
|
children: [label !== void 0 && /* @__PURE__ */ jsx(Label, {
|
|
32
32
|
"data-slot": "label",
|
|
33
33
|
className: s.label({ class: classNames?.label }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["'use client'\n\nimport type { ProgressProps } from '@novi-ui/core'\nimport { Label, ProgressBar } from 'react-aria-components'\nimport { progressStyles } from './progress.styles'\n\n/**\n * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。\n *\n * `prefers-reduced-motion` が有効なときは不確定表示のアニメーションを止める。\n *\n * @example\n * <Progress label=\"アップロード中\" value={62} showValueLabel />\n */\nexport function Progress({\n size,\n color,\n label,\n value,\n minValue = 0,\n maxValue = 100,\n showValueLabel,\n className,\n classNames,\n id,\n}: ProgressProps) {\n const isIndeterminate = value === undefined\n const s = progressStyles({ size, color, isIndeterminate })\n\n return (\n <ProgressBar\n id={id}\n value={value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {({ percentage, valueText }) => (\n <>\n {(label !== undefined || showValueLabel === true) && (\n <span className=\"flex items-baseline justify-between gap-
|
|
1
|
+
{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["'use client'\n\nimport type { ProgressProps } from '@novi-ui/core'\nimport { Label, ProgressBar } from 'react-aria-components'\nimport { progressStyles } from './progress.styles'\n\n/**\n * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。\n *\n * `prefers-reduced-motion` が有効なときは不確定表示のアニメーションを止める。\n *\n * @example\n * <Progress label=\"アップロード中\" value={62} showValueLabel />\n */\nexport function Progress({\n size,\n color,\n label,\n value,\n minValue = 0,\n maxValue = 100,\n showValueLabel,\n className,\n classNames,\n id,\n}: ProgressProps) {\n const isIndeterminate = value === undefined\n const s = progressStyles({ size, color, isIndeterminate })\n\n return (\n <ProgressBar\n id={id}\n value={value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {({ percentage, valueText }) => (\n <>\n {(label !== undefined || showValueLabel === true) && (\n <span className=\"flex items-baseline justify-between gap-[var(--novi-gap-inline)]\">\n {label !== undefined && (\n <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {label}\n </Label>\n )}\n {showValueLabel === true && !isIndeterminate && (\n <span\n data-slot=\"valueLabel\"\n className={s.valueLabel({ class: classNames?.valueLabel })}\n >\n {valueText}\n </span>\n )}\n </span>\n )}\n\n <span data-slot=\"track\" className={s.track({ class: classNames?.track })}>\n <span\n data-slot=\"indicator\"\n className={s.indicator({ class: classNames?.indicator })}\n style={isIndeterminate ? undefined : { width: `${percentage ?? 0}%` }}\n />\n </span>\n </>\n )}\n </ProgressBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,SAAS,EACvB,MACA,OACA,OACA,OACA,WAAW,GACX,WAAW,KACX,gBACA,WACA,YACA,MACgB;CAChB,MAAM,kBAAkB,UAAU,KAAA;CAClC,MAAM,IAAI,eAAe;EAAE;EAAM;EAAO;CAAgB,CAAC;CAEzD,OACE,oBAAC,aAAD;EACM;EACG;EACG;EACA;EACO;EACjB,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAExD,WAAA,EAAE,YAAY,gBACd,qBAAA,UAAA,EAAA,UAAA,EACI,UAAU,KAAA,KAAa,mBAAmB,SAC1C,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA,GAER,mBAAmB,QAAQ,CAAC,mBAC3B,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;IAExD,UAAA;GACG,CAAA,CAEJ;EAGR,CAAA,GAAA,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACrE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;IACvD,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,cAAc,EAAE,GAAG;GACrE,CAAA;EACG,CAAA,CACN,EAAA,CAAA;CAEO,CAAA;AAEjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.d.mts","names":[],"sources":["../../src/radio/radio.styles.ts"],"mappings":";;;;;;;;cAmEa,yCAAW;;IAtBmB;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"radio.styles.d.mts","names":[],"sources":["../../src/radio/radio.styles.ts"],"mappings":";;;;;;;;cAmEa,yCAAW;;IAtBmB;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;;;;;;cAiCjE,8CAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWjB,kBAAkB,kBAAkB;KACpC,uBAAuB,kBAAkB"}
|
|
@@ -8,7 +8,7 @@ import { tv } from "tailwind-variants";
|
|
|
8
8
|
*/
|
|
9
9
|
const slots = {
|
|
10
10
|
root: [
|
|
11
|
-
"inline-flex items-center gap-
|
|
11
|
+
"inline-flex items-center gap-[var(--novi-gap-inline)] min-h-12 py-1",
|
|
12
12
|
"cursor-pointer",
|
|
13
13
|
tapTarget,
|
|
14
14
|
disabledState
|
|
@@ -77,15 +77,15 @@ const radioStyles = tv({
|
|
|
77
77
|
*/
|
|
78
78
|
const radioGroupStyles = tv({
|
|
79
79
|
slots: {
|
|
80
|
-
root: "flex flex-col gap-
|
|
80
|
+
root: "flex flex-col gap-[var(--novi-gap-inline)]",
|
|
81
81
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
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)]",
|
|
84
84
|
errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
|
|
85
85
|
},
|
|
86
86
|
variants: { orientation: {
|
|
87
|
-
vertical: { list: "flex-col gap-
|
|
88
|
-
horizontal: { list: "flex-row gap-
|
|
87
|
+
vertical: { list: "flex-col gap-[var(--novi-gap-stack)]" },
|
|
88
|
+
horizontal: { list: "flex-row gap-[var(--novi-gap-section)] flex-wrap" }
|
|
89
89
|
} },
|
|
90
90
|
defaultVariants: { orientation: "vertical" }
|
|
91
91
|
});
|
|
@@ -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 { tapTarget } from '../styles/tap-target'\n\n/**\n * Checkbox と同じく、視覚寸法とタップ寸法を分ける（AC-01-5）。\n * 行全体を押せるようにするのは、指がラベルに落ちても切り替わるようにするため。\n */\nconst slots = {\n root: [\n 'inline-flex items-center 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 { tapTarget } from '../styles/tap-target'\n\n/**\n * Checkbox と同じく、視覚寸法とタップ寸法を分ける（AC-01-5）。\n * 行全体を押せるようにするのは、指がラベルに落ちても切り替わるようにするため。\n */\nconst slots = {\n root: [\n 'inline-flex items-center gap-[var(--novi-gap-inline)] min-h-12 py-1',\n 'cursor-pointer',\n tapTarget,\n disabledState,\n ].join(' '),\n // 円は radius-full を使う数少ない例外。Checkbox（四角）との形の差で\n // 「1つだけ選ぶ」ことを示すため、ここは丸を守る\n control: [\n 'shrink-0 inline-grid place-items-center',\n 'ring-1 ring-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-surface)]',\n 'transition-[box-shadow,scale]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'group-data-[pressed]:scale-[0.92] motion-reduce:group-data-[pressed]:scale-100',\n 'group-data-[selected]:ring-[var(--c)]',\n 'group-data-[invalid]:ring-[var(--novi-color-danger)]',\n focusRing,\n ].join(' '),\n // 内側のドットで選択を示す。塗りつぶしにしない\n indicator: 'rounded-[var(--novi-radius-full)] bg-[var(--c)]',\n label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof radioSlots, (typeof radioRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\n/** 視覚寸法。当たり判定は root の tapTarget が 44px を保つ。 */\nconst size: VariantMap<NoviSize, { control: string; indicator: string; label: string }> = {\n sm: { control: 'size-5', indicator: 'size-2', label: 'text-[length:var(--novi-text-sm)]' },\n md: { control: 'size-6', indicator: 'size-2.5', label: 'text-[length:var(--novi-text-base)]' },\n lg: { control: 'size-7', indicator: 'size-3', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Radio のスタイル定義。\n *\n * @example\n * const myRadio = tv({ extend: radioStyles, slots: { label: 'font-medium' } })\n */\nexport const radioStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n // Checkbox と同じ扱い。フィールドの部品どうしは inline、選択肢どうしは stack\n root: 'flex flex-col gap-[var(--novi-gap-inline)]',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n list: 'flex flex-col gap-[var(--novi-gap-stack)]',\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof radioGroupSlots, (typeof radioGroupRequiredSlots)[number]>\n\n/**\n * RadioGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: radioGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const radioGroupStyles = tv({\n slots: groupSlots,\n variants: {\n orientation: {\n vertical: { list: 'flex-col gap-[var(--novi-gap-stack)]' },\n horizontal: { list: 'flex-row gap-[var(--novi-gap-section)] 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":";;;;;;;;AAkBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAGV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,OAAO;CACP,aAAa;AACf;;;;;;;AAwBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAvBZ,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;EAkBrC;EAAO;GAbnB,IAAI;IAAE,SAAS;IAAU,WAAW;IAAU,OAAO;GAAoC;GACzF,IAAI;IAAE,SAAS;IAAU,WAAW;IAAY,OAAO;GAAsC;GAC7F,IAAI;IAAE,SAAS;IAAU,WAAW;IAAU,OAAO;GAAsC;EAWxE;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;;;;;;;AAiBD,MAAa,mBAAmB,GAAG;CACjC,OAAO;EAdP,MAAM;EACN,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;CAUP;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,uCAAuC;EACzD,YAAY,EAAE,MAAM,mDAAmD;CACzE,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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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":";;;;;;;;;;;;;;cA6Ha,0CAAY;;IAhDmB;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;;IAvBN;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;;IAvBN;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;KA+BtC,mBAAmB,kBAAkB"}
|
|
@@ -15,7 +15,7 @@ const slots = {
|
|
|
15
15
|
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
16
16
|
trigger: [
|
|
17
17
|
"text-[var(--novi-color-fg)]",
|
|
18
|
-
"flex items-center justify-between gap-
|
|
18
|
+
"flex items-center justify-between gap-[var(--novi-gap-inline)] w-full",
|
|
19
19
|
"text-left",
|
|
20
20
|
"bg-[var(--novi-color-surface)]",
|
|
21
21
|
"shadow-[var(--novi-shadow-sm)]",
|
|
@@ -40,10 +40,10 @@ const slots = {
|
|
|
40
40
|
"pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]",
|
|
41
41
|
"data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]"
|
|
42
42
|
].join(" "),
|
|
43
|
-
listbox: "outline-none p-
|
|
43
|
+
listbox: "outline-none p-1.5 flex flex-col",
|
|
44
44
|
option: [
|
|
45
|
-
"flex items-center justify-between gap-
|
|
46
|
-
"px-
|
|
45
|
+
"flex items-center justify-between gap-[var(--novi-gap-inline)]",
|
|
46
|
+
"px-[var(--novi-pad-control-x-md)] cursor-pointer outline-none",
|
|
47
47
|
"text-[var(--novi-color-fg)]",
|
|
48
48
|
"rounded-[var(--novi-radius-md)]",
|
|
49
49
|
"transition-[background-color] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
@@ -71,15 +71,15 @@ const selectStyles = tv({
|
|
|
71
71
|
variants: {
|
|
72
72
|
size: {
|
|
73
73
|
sm: {
|
|
74
|
-
trigger: "h-10 px-
|
|
74
|
+
trigger: "h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
|
|
75
75
|
option: "h-12 text-[length:var(--novi-text-sm)]"
|
|
76
76
|
},
|
|
77
77
|
md: {
|
|
78
|
-
trigger: "h-12 px-
|
|
78
|
+
trigger: "h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]",
|
|
79
79
|
option: "h-14 text-[length:var(--novi-text-base)]"
|
|
80
80
|
},
|
|
81
81
|
lg: {
|
|
82
|
-
trigger: "h-14 px-
|
|
82
|
+
trigger: "h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]",
|
|
83
83
|
option: "h-16 text-[length:var(--novi-text-base)]"
|
|
84
84
|
}
|
|
85
85
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n selectRequiredSlots,\n selectSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Select は **画面下端から出るシート型ピッカー**（Raster はアンカー型ポップオーバー）。\n *\n * 一覧は誤タップが最も起きる場所なので、行を大きく取り、選択済みをチェックで示す。\n *\n * **`!` 付きのユーティリティは意図的**。RAC の `Popover` はトリガー基準の位置を\n * インラインスタイルで書き込むため、通常のクラスでも `style` prop でも勝てない。\n * スタイルシートの `!important` だけがインラインに勝つ（ADR-T2 / T-13 の実測）。\n */\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n trigger: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center justify-between gap-
|
|
1
|
+
{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n selectRequiredSlots,\n selectSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Select は **画面下端から出るシート型ピッカー**（Raster はアンカー型ポップオーバー）。\n *\n * 一覧は誤タップが最も起きる場所なので、行を大きく取り、選択済みをチェックで示す。\n *\n * **`!` 付きのユーティリティは意図的**。RAC の `Popover` はトリガー基準の位置を\n * インラインスタイルで書き込むため、通常のクラスでも `style` prop でも勝てない。\n * スタイルシートの `!important` だけがインラインに勝つ（ADR-T2 / T-13 の実測）。\n */\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n trigger: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center justify-between gap-[var(--novi-gap-inline)] w-full',\n 'text-left',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-sm)]',\n 'rounded-[var(--novi-radius-md)]',\n 'transition-[opacity,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[pressed]:scale-[0.99] motion-reduce:data-[pressed]:scale-100',\n 'group-data-[invalid]:ring-1 group-data-[invalid]:ring-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n value: [\n 'truncate text-[var(--novi-color-fg)]',\n 'data-[placeholder]:text-[var(--novi-color-muted)]',\n ].join(' '),\n icon: 'shrink-0 text-[var(--novi-color-muted)]',\n popover: [\n // ここが Raster との構造差そのもの。トリガーの隣ではなく画面下端に張り付く\n '!fixed !top-auto !inset-x-0 !bottom-0 !max-w-none !w-full',\n '!max-h-[70dvh]',\n 'bg-[var(--novi-color-surface)]',\n 'text-[var(--novi-color-fg)]',\n // 下端は画面に接するので上端だけ角丸。下から出てきた紙の形\n 'rounded-t-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'overflow-auto',\n 'pb-[env(safe-area-inset-bottom,0px)]',\n // 横向きのノッチは左右に来る。面は全幅のまま、中身だけを内側へ寄せる（FR-13）\n 'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]',\n 'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n ].join(' '),\n // Menu と同じ溝。行の背景が丸く抜けて見えるための位置合わせで、余白の設計ではない\n listbox: 'outline-none p-1.5 flex flex-col',\n option: [\n 'flex items-center justify-between gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-control-x-md)] cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-md)]',\n 'transition-[background-color] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[focused]:bg-[var(--novi-color-subtle)]',\n 'data-[selected]:font-bold',\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` はトリガーの寸法と**行の密度**（ADR-T3）。\n * 行はどの段でも 48px を下回らない — 一覧は誤タップが最も起きる場所。\n */\nconst size: VariantMap<NoviSize, { trigger: string; option: string }> = {\n sm: {\n trigger: 'h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n option: 'h-12 text-[length:var(--novi-text-sm)]',\n },\n md: {\n trigger: 'h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n option: 'h-14 text-[length:var(--novi-text-base)]',\n },\n lg: {\n trigger: 'h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\n option: 'h-16 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\nconst variant: VariantMap<NoviVariant, { trigger: string }> = {\n solid: { trigger: 'bg-[var(--novi-color-surface)]' },\n outline: {\n trigger:\n 'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n },\n soft: { trigger: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n ghost: { trigger: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n plain: {\n trigger: 'bg-transparent shadow-[var(--novi-shadow-none)] px-0 underline underline-offset-4',\n },\n}\n\n/**\n * Select のスタイル定義。\n *\n * `popover` の `!` 付きクラスを `classNames` で上書きすることはできない\n * （`!important` 同士では後勝ちにならない）。配置を変えたい場合は `tv({ extend })` を使う。\n *\n * @example\n * import { selectStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const mySelect = tv({ extend: selectStyles, slots: { option: 'font-mono' } })\n */\nexport const selectStyles = tv({\n slots,\n variants: { size, radius, variant },\n defaultVariants: { size: 'md', radius: 'md', variant: 'solid' },\n})\n\nexport type SelectStyleProps = Parameters<typeof selectStyles>[0]\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO,CACL,wCACA,mDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;EAEP;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;CACT,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AAsDA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAjDZ,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;EAsCY;EAAM;GAlClB,MAAM,EAAE,SAAS,oCAAoC;GACrD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,MAAM,EAAE,SAAS,oCAAoC;EA8BnC;EAAQ;GA1B1B,OAAO,EAAE,SAAS,iCAAiC;GACnD,SAAS,EACP,SACE,gGACJ;GACA,MAAM,EAAE,SAAS,iEAAiE;GAClF,OAAO,EAAE,SAAS,kDAAkD;GACpE,OAAO,EACL,SAAS,oFACX;EAiB0B;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAQ;AAChE,CAAC"}
|
|
@@ -7,19 +7,19 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
7
7
|
* const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
|
|
8
8
|
*/
|
|
9
9
|
declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
-
radius: VariantMap<"
|
|
10
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
14
14
|
root: string;
|
|
15
15
|
}, undefined, {
|
|
16
|
-
radius: VariantMap<"
|
|
16
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
17
17
|
root: string;
|
|
18
18
|
}>;
|
|
19
19
|
}, {
|
|
20
20
|
root: string;
|
|
21
21
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
22
|
-
radius: VariantMap<"
|
|
22
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
23
23
|
root: string;
|
|
24
24
|
}>;
|
|
25
25
|
}, {
|