@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":"tabs.styles.d.mts","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"tabs.styles.d.mts","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"mappings":";;;;;;;;;;;cAkIa,wCAAU;;IAxBiB;IAAe;;;IA/CR;IAAa;IAAe;;;;;;;;;;IA+CnC;IAAe;;;IA/CR;IAAa;IAAe;;;;;;;;;;IA+CnC;IAAe;;;IA/CR;IAAa;IAAe;;;;;;;;;KA8E/D,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/tabs/tabs.styles.ts
|
|
4
5
|
/**
|
|
@@ -22,6 +23,7 @@ const slots = {
|
|
|
22
23
|
tab: [
|
|
23
24
|
"flex items-center justify-center whitespace-nowrap cursor-pointer select-none",
|
|
24
25
|
"text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]",
|
|
26
|
+
heading,
|
|
25
27
|
"border border-transparent",
|
|
26
28
|
"-mb-px",
|
|
27
29
|
"data-[selected]:text-[var(--novi-color-fg)] data-[selected]:font-medium",
|
|
@@ -32,7 +34,7 @@ const slots = {
|
|
|
32
34
|
disabledState
|
|
33
35
|
].join(" "),
|
|
34
36
|
indicator: "hidden",
|
|
35
|
-
panel: "outline-none text-[var(--novi-color-fg)]"
|
|
37
|
+
panel: "outline-none text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"
|
|
36
38
|
};
|
|
37
39
|
/**
|
|
38
40
|
* variant が決めるのは**罫線の強さと、切れ目の向こうに何色の紙があるか**。
|
|
@@ -71,12 +73,12 @@ const variant = {
|
|
|
71
73
|
ghost: {
|
|
72
74
|
list: "border-b border-[var(--novi-color-border)]",
|
|
73
75
|
tab: "hover:bg-[var(--novi-color-subtle)] data-[selected]:border-b-[var(--novi-color-bg)]",
|
|
74
|
-
panel: "p-0 pt-
|
|
76
|
+
panel: "p-0 pt-[var(--novi-pad-surface-y)]"
|
|
75
77
|
},
|
|
76
78
|
plain: {
|
|
77
79
|
list: "border-b border-transparent",
|
|
78
80
|
tab: "",
|
|
79
|
-
panel: "p-0 pt-
|
|
81
|
+
panel: "p-0 pt-[var(--novi-pad-surface-y)]"
|
|
80
82
|
}
|
|
81
83
|
};
|
|
82
84
|
/**
|
|
@@ -93,16 +95,16 @@ const tabsStyles = tv({
|
|
|
93
95
|
variants: {
|
|
94
96
|
size: {
|
|
95
97
|
sm: {
|
|
96
|
-
tab: "h-7 px-
|
|
97
|
-
panel: "
|
|
98
|
+
tab: "h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
|
|
99
|
+
panel: "px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]"
|
|
98
100
|
},
|
|
99
101
|
md: {
|
|
100
|
-
tab: "h-8 px-
|
|
101
|
-
panel: "
|
|
102
|
+
tab: "h-8 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]",
|
|
103
|
+
panel: "px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]"
|
|
102
104
|
},
|
|
103
105
|
lg: {
|
|
104
|
-
tab: "h-10 px-
|
|
105
|
-
panel: "
|
|
106
|
+
tab: "h-10 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]",
|
|
107
|
+
panel: "px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]"
|
|
106
108
|
}
|
|
107
109
|
},
|
|
108
110
|
variant
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.styles.mjs","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"sourcesContent":["import type {\n NoviSize,\n NoviVariant,\n SlotMap,\n tabsRequiredSlots,\n tabsSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Flatlay の Tabs は**地続きタブ**（Raster は下線1本・Tactile はセグメンテッド）。\n *\n * 選ばれているタブとパネルが**1枚の紙**になる。タブは見出し列の下辺罫線に 1px 重なり、\n * その 1px を地色で塗って罫線に**切れ目**を作る。切れ目の向こう側がパネルなので、\n * 「いまどれを見ているか」を浮かせずに示せる。\n *\n * 構造差の要点:\n * - `root` に gap を置かない。離すと罫線が繋がらず、別の面になってしまう\n * - `indicator` は**描かない**。切れ目は罫線であって面ではないので、\n * 実体を持つ要素にすると「上に乗った何か」に見える（Tactile の塗り面がまさにそれ）\n * - `panel` が三辺の罫線を持ち、上辺だけは見出し列の罫線と共有する\n *\n * 影も z-index も使えないので、階層はこの一続きの罫線だけで表す。\n */\nconst slots = {\n // 見出しとパネルは地続き。間に余白を入れた時点で罫線が切れて別の面になる\n root: 'flex flex-col',\n list: 'flex',\n tab: [\n 'flex items-center justify-center whitespace-nowrap cursor-pointer select-none',\n 'text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]',\n // 罫線の幅は全 variant が持つ。色は variant が決める\n 'border border-transparent',\n // 見出し列の下辺罫線に 1px 重ねる。選択中はこの 1px を地色で塗って切れ目にする\n '-mb-px',\n 'data-[selected]:text-[var(--novi-color-fg)] data-[selected]:font-medium',\n // 押下は反転スタンプ（ADR-F3）。他のコンポーネントと同じ手応えにする\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 // 切れ目は罫線に空ける穴なので、描く要素を持たない（Tactile との決定的な差）\n indicator: 'hidden',\n panel: 'outline-none text-[var(--novi-color-fg)]',\n} satisfies SlotMap<typeof tabsSlots, (typeof tabsRequiredSlots)[number]>\n\n/**\n * variant が決めるのは**罫線の強さと、切れ目の向こうに何色の紙があるか**。\n *\n * `ghost` / `plain` で囲みが消えるのは他のコンポーネントと同じ方針。\n * ただし `ghost` は切れ目だけ残す。囲みが無くても「そこだけ罫線が抜けている」は成立する。\n */\nconst variant: VariantMap<NoviVariant, { list: string; tab: string; panel: string }> = {\n solid: {\n list: 'border-b border-[var(--novi-color-border-strong)]',\n tab: [\n 'data-[selected]:border-[var(--novi-color-border-strong)]',\n 'data-[selected]:border-b-[var(--novi-color-bg)]',\n 'data-[selected]:bg-[var(--novi-color-bg)]',\n ].join(' '),\n panel: 'border-x border-b border-[var(--novi-color-border-strong)]',\n },\n outline: {\n list: 'border-b border-[var(--novi-color-border)]',\n tab: [\n 'data-[selected]:border-[var(--novi-color-border)]',\n 'data-[selected]:border-b-[var(--novi-color-bg)]',\n 'data-[selected]:bg-[var(--novi-color-bg)]',\n ].join(' '),\n panel: 'border-x border-b border-[var(--novi-color-border)]',\n },\n soft: {\n list: 'border-b border-[var(--novi-color-border)]',\n tab: [\n 'data-[selected]:border-[var(--novi-color-border)]',\n 'data-[selected]:border-b-[var(--novi-color-subtle)]',\n 'data-[selected]:bg-[var(--novi-color-subtle)]',\n ].join(' '),\n panel: 'border-x border-b border-[var(--novi-color-border)] bg-[var(--novi-color-subtle)]',\n },\n ghost: {\n list: 'border-b border-[var(--novi-color-border)]',\n tab: 'hover:bg-[var(--novi-color-subtle)] data-[selected]:border-b-[var(--novi-color-bg)]',\n panel: 'p-0 pt-
|
|
1
|
+
{"version":3,"file":"tabs.styles.mjs","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"sourcesContent":["import type {\n NoviSize,\n NoviVariant,\n SlotMap,\n tabsRequiredSlots,\n tabsSlots,\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 の Tabs は**地続きタブ**（Raster は下線1本・Tactile はセグメンテッド）。\n *\n * 選ばれているタブとパネルが**1枚の紙**になる。タブは見出し列の下辺罫線に 1px 重なり、\n * その 1px を地色で塗って罫線に**切れ目**を作る。切れ目の向こう側がパネルなので、\n * 「いまどれを見ているか」を浮かせずに示せる。\n *\n * 構造差の要点:\n * - `root` に gap を置かない。離すと罫線が繋がらず、別の面になってしまう\n * - `indicator` は**描かない**。切れ目は罫線であって面ではないので、\n * 実体を持つ要素にすると「上に乗った何か」に見える（Tactile の塗り面がまさにそれ）\n * - `panel` が三辺の罫線を持ち、上辺だけは見出し列の罫線と共有する\n *\n * 影も z-index も使えないので、階層はこの一続きの罫線だけで表す。\n */\nconst slots = {\n // 見出しとパネルは地続き。間に余白を入れた時点で罫線が切れて別の面になる\n root: 'flex flex-col',\n list: 'flex',\n tab: [\n 'flex items-center justify-center whitespace-nowrap cursor-pointer select-none',\n 'text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]',\n // タブ名は見出し。等幅にすると、選択で font-medium が乗っても幅が動かない\n heading,\n // 罫線の幅は全 variant が持つ。色は variant が決める\n 'border border-transparent',\n // 見出し列の下辺罫線に 1px 重ねる。選択中はこの 1px を地色で塗って切れ目にする\n '-mb-px',\n 'data-[selected]:text-[var(--novi-color-fg)] data-[selected]:font-medium',\n // 押下は反転スタンプ（ADR-F3）。他のコンポーネントと同じ手応えにする\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 // 切れ目は罫線に空ける穴なので、描く要素を持たない（Tactile との決定的な差）\n indicator: 'hidden',\n panel: 'outline-none text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n} satisfies SlotMap<typeof tabsSlots, (typeof tabsRequiredSlots)[number]>\n\n/**\n * variant が決めるのは**罫線の強さと、切れ目の向こうに何色の紙があるか**。\n *\n * `ghost` / `plain` で囲みが消えるのは他のコンポーネントと同じ方針。\n * ただし `ghost` は切れ目だけ残す。囲みが無くても「そこだけ罫線が抜けている」は成立する。\n */\nconst variant: VariantMap<NoviVariant, { list: string; tab: string; panel: string }> = {\n solid: {\n list: 'border-b border-[var(--novi-color-border-strong)]',\n tab: [\n 'data-[selected]:border-[var(--novi-color-border-strong)]',\n 'data-[selected]:border-b-[var(--novi-color-bg)]',\n 'data-[selected]:bg-[var(--novi-color-bg)]',\n ].join(' '),\n panel: 'border-x border-b border-[var(--novi-color-border-strong)]',\n },\n outline: {\n list: 'border-b border-[var(--novi-color-border)]',\n tab: [\n 'data-[selected]:border-[var(--novi-color-border)]',\n 'data-[selected]:border-b-[var(--novi-color-bg)]',\n 'data-[selected]:bg-[var(--novi-color-bg)]',\n ].join(' '),\n panel: 'border-x border-b border-[var(--novi-color-border)]',\n },\n soft: {\n list: 'border-b border-[var(--novi-color-border)]',\n tab: [\n 'data-[selected]:border-[var(--novi-color-border)]',\n 'data-[selected]:border-b-[var(--novi-color-subtle)]',\n 'data-[selected]:bg-[var(--novi-color-subtle)]',\n ].join(' '),\n panel: 'border-x border-b border-[var(--novi-color-border)] bg-[var(--novi-color-subtle)]',\n },\n ghost: {\n list: 'border-b border-[var(--novi-color-border)]',\n tab: 'hover:bg-[var(--novi-color-subtle)] data-[selected]:border-b-[var(--novi-color-bg)]',\n panel: 'p-0 pt-[var(--novi-pad-surface-y)]',\n },\n plain: {\n list: 'border-b border-transparent',\n tab: '',\n panel: 'p-0 pt-[var(--novi-pad-surface-y)]',\n },\n}\n\n/**\n * 見出しの高さは 28 / 32 / 40px（Button と同じ帳票の行）。\n *\n * **パネルの余白は段で動かさない。** 見出しの寸法が変わってもパネルは同じ紙で、\n * 中身の密度を決めるのは行送りだから。段で動かすと、タブを小さくしただけで\n * 本文の左端が動き、他の面と列が揃わなくなる。\n */\nconst size: VariantMap<NoviSize, { tab: string; panel: string }> = {\n sm: {\n tab: 'h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n panel: 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n },\n md: {\n tab: 'h-8 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n panel: 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n },\n lg: {\n tab: 'h-10 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\n panel: 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n },\n}\n\n/**\n * Tabs のスタイル定義。\n *\n * @example\n * import { tabsStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myTabs = tv({ extend: tabsStyles, slots: { list: 'w-full' } })\n */\nexport const tabsStyles = tv({\n slots,\n // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n variants: { size, variant },\n defaultVariants: { size: 'md', variant: 'solid' },\n})\n\nexport type TabsStyleProps = Parameters<typeof tabsStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2BA,MAAM,QAAQ;CAEZ,MAAM;CACN,MAAM;CACN,KAAK;EACH;EACA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,OAAO;AACT;;;;;;;AAQA,MAAM,UAAiF;CACrF,OAAO;EACL,MAAM;EACN,KAAK;GACH;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;CACT;CACA,SAAS;EACP,MAAM;EACN,KAAK;GACH;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;CACT;CACA,MAAM;EACJ,MAAM;EACN,KAAK;GACH;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;CACT;CACA,OAAO;EACL,MAAM;EACN,KAAK;EACL,OAAO;CACT;CACA,OAAO;EACL,MAAM;EACN,KAAK;EACL,OAAO;CACT;AACF;;;;;;;;;;AAiCA,MAAa,aAAa,GAAG;CAC3B;CAEA,UAAU;EAAE;GA1BZ,IAAI;IACF,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,KAAK;IACL,OAAO;GACT;EAeY;EAAM;CAAQ;CAC1B,iBAAiB;EAAE,MAAM;EAAM,SAAS;CAAQ;AAClD,CAAC"}
|
|
@@ -14,7 +14,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
14
14
|
inputWrapper: string;
|
|
15
15
|
textarea: 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", {
|
|
@@ -32,7 +32,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
32
32
|
inputWrapper: string;
|
|
33
33
|
textarea: string;
|
|
34
34
|
}>;
|
|
35
|
-
radius: VariantMap<"
|
|
35
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
36
36
|
inputWrapper: string;
|
|
37
37
|
}>;
|
|
38
38
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -50,7 +50,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
50
50
|
inputWrapper: string;
|
|
51
51
|
textarea: string;
|
|
52
52
|
}>;
|
|
53
|
-
radius: VariantMap<"
|
|
53
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
54
54
|
inputWrapper: string;
|
|
55
55
|
}>;
|
|
56
56
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.styles.d.mts","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"textarea.styles.d.mts","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"mappings":";;;;;;;;;;;cAiGa,4CAAc;;IAhCsB;IAAkB;;;IAed;;;IAlCE;;;;;;;;;;;IAmBN;IAAkB;;;IAed;;;IAlCE;;;;;;;;;;;IAmBN;IAAkB;;;IAed;;;IAlCE;;;;;;;;;;KA0D3C,qBAAqB,kBAAkB"}
|
|
@@ -46,15 +46,15 @@ const textareaStyles = tv({
|
|
|
46
46
|
variants: {
|
|
47
47
|
size: {
|
|
48
48
|
sm: {
|
|
49
|
-
inputWrapper: "px-
|
|
49
|
+
inputWrapper: "px-[var(--novi-pad-control-x-sm)] py-[var(--novi-pad-surface-y)]",
|
|
50
50
|
textarea: "text-[length:var(--novi-text-sm)]"
|
|
51
51
|
},
|
|
52
52
|
md: {
|
|
53
|
-
inputWrapper: "px-
|
|
53
|
+
inputWrapper: "px-[var(--novi-pad-control-x-md)] py-[var(--novi-pad-surface-y)]",
|
|
54
54
|
textarea: "text-[length:var(--novi-text-base)]"
|
|
55
55
|
},
|
|
56
56
|
lg: {
|
|
57
|
-
inputWrapper: "px-
|
|
57
|
+
inputWrapper: "px-[var(--novi-pad-control-x-lg)] py-[var(--novi-pad-surface-y)]",
|
|
58
58
|
textarea: "text-[length:var(--novi-text-base)]"
|
|
59
59
|
}
|
|
60
60
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.styles.mjs","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n textareaRequiredSlots,\n textareaSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の TextArea は Input と同じ**記入欄**で、行数だけが違う。\n *\n * 縦だけリサイズを許すのは両テーマと同じ判断。横に伸びると罫線で作った\n * 列の揃いが崩れ、帳票として読めなくなる。\n */\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n // 罫線の幅だけを base に置き、色は variant が決める（Input と同じ型）\n inputWrapper: [\n 'flex 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 textarea: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n 'resize-y',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 文字数カウンタもここに置く。専用 slot を増やさない\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 textareaSlots, (typeof textareaRequiredSlots)[number]>\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
|
|
1
|
+
{"version":3,"file":"textarea.styles.mjs","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"sourcesContent":["import type {\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n textareaRequiredSlots,\n textareaSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の TextArea は Input と同じ**記入欄**で、行数だけが違う。\n *\n * 縦だけリサイズを許すのは両テーマと同じ判断。横に伸びると罫線で作った\n * 列の揃いが崩れ、帳票として読めなくなる。\n */\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n // 罫線の幅だけを base に置き、色は variant が決める（Input と同じ型）\n inputWrapper: [\n 'flex 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 textarea: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n 'resize-y',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 文字数カウンタもここに置く。専用 slot を増やさない\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 textareaSlots, (typeof textareaRequiredSlots)[number]>\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/**\n * 1行入力と違い高さは `rows` が決めるので、左右の余白と文字サイズだけを段階で変える。\n *\n * 上下だけ段を持たず面の余白（14px）を使うのは、複数行の記入欄が**行の集まり＝面**\n * だから。密度を担うのは行送り（`leading-body` 1.7）で、上下 padding を段で動かすと\n * 枠と1行目の距離だけが変わり、行同士の間隔と食い違って罫線の目が崩れる。\n */\nconst size: VariantMap<NoviSize, { inputWrapper: string; textarea: string }> = {\n sm: {\n inputWrapper: 'px-[var(--novi-pad-control-x-sm)] py-[var(--novi-pad-surface-y)]',\n textarea: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n inputWrapper: 'px-[var(--novi-pad-control-x-md)] py-[var(--novi-pad-surface-y)]',\n textarea: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'px-[var(--novi-pad-control-x-lg)] py-[var(--novi-pad-surface-y)]',\n textarea: '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 * TextArea のスタイル定義。\n *\n * @example\n * import { textareaStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myTextarea = tv({ extend: textareaStyles, slots: { textarea: 'resize-none' } })\n */\nexport const textareaStyles = tv({\n slots,\n // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n variants: { size, radius, variant },\n defaultVariants: { size: 'md', radius: 'sm', variant: 'outline' },\n})\n\nexport type TextareaStyleProps = Parameters<typeof textareaStyles>[0]\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO,iEAAiE;CAExE,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU;EACR;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,aAAa,oEAAoE;CACjF,cAAc,qEAAqE;AACrF;;;;;;;;;;AAqDA,MAAa,iBAAiB,GAAG;CAC/B;CAEA,UAAU;EAAE;GAlCZ,IAAI;IACF,cAAc;IACd,UAAU;GACZ;GACA,IAAI;IACF,cAAc;IACd,UAAU;GACZ;GACA,IAAI;IACF,cAAc;IACd,UAAU;GACZ;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;GArD1B,OAAO,EACL,cAAc,0EAChB;GACA,SAAS,EAAE,cAAc,0DAA0D;GACnF,MAAM,EAAE,cAAc,kEAAkE;GACxF,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,yCAAyC;EA6CtC;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAU;AAClE,CAAC"}
|
|
@@ -10,7 +10,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -26,7 +26,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
27
27
|
root: string;
|
|
28
28
|
}>;
|
|
29
|
-
radius: VariantMap<"
|
|
29
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
30
30
|
root: string;
|
|
31
31
|
}>;
|
|
32
32
|
}, {
|
|
@@ -42,7 +42,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
42
42
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
43
43
|
root: string;
|
|
44
44
|
}>;
|
|
45
|
-
radius: VariantMap<"
|
|
45
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
46
46
|
root: string;
|
|
47
47
|
}>;
|
|
48
48
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.styles.d.mts","names":[],"sources":["../../src/toast/toast.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"toast.styles.d.mts","names":[],"sources":["../../src/toast/toast.styles.ts"],"mappings":";;;;;;;;cA+Ea,yCAAW;;IAvBmB;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;KAqBjC,kBAAkB,kBAAkB"}
|
|
@@ -19,7 +19,8 @@ import { tv } from "tailwind-variants";
|
|
|
19
19
|
const slots = {
|
|
20
20
|
region: "flex flex-col gap-1.5 w-full outline-none",
|
|
21
21
|
root: [
|
|
22
|
-
"w-full flex items-start gap-
|
|
22
|
+
"w-full flex items-start gap-[var(--novi-gap-inline)]",
|
|
23
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] outline-none",
|
|
23
24
|
"text-[var(--novi-color-fg)] bg-[var(--novi-color-subtle)]",
|
|
24
25
|
"border border-[var(--novi-color-border-strong)]",
|
|
25
26
|
"border-l-2 border-l-[var(--c)]"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.styles.mjs","names":[],"sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviRadius,\n SlotMap,\n toastRequiredSlots,\n toastSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Toast は**フローに挿し込まれる帯**（ADR-F4）。\n *\n * 右下（Raster）にも上端中央（Tactile）にも固定しない。固定は viewport に\n * 貼り付けること、つまり z 軸そのものだから。`sticky` も同じ理由で使わない\n * （スクロール中にコンテンツへ重なった時点で「重なりを持つ UI」になる）。\n *\n * 代わりに region はアプリの先頭に置くフローの帯で、スクロールすれば\n * 流れて見えなくなってよい。帳票の朱書きはページの先頭にあり、\n * 読み進めるあいだ追いかけてはこない。\n *\n * この割り切りの代償は「長いページで気づきにくい」こと。\n * 見落とすと困る確認は Toast ではなく Modal（テイクオーバー）を使う。\n */\nconst slots = {\n // 固定しない。置いた場所がそのまま表示位置になる（アプリ先頭を推奨）\n region: 'flex flex-col gap-1.5 w-full outline-none',\n root: [\n 'w-full flex items-start gap-
|
|
1
|
+
{"version":3,"file":"toast.styles.mjs","names":[],"sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviRadius,\n SlotMap,\n toastRequiredSlots,\n toastSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Toast は**フローに挿し込まれる帯**（ADR-F4）。\n *\n * 右下（Raster）にも上端中央（Tactile）にも固定しない。固定は viewport に\n * 貼り付けること、つまり z 軸そのものだから。`sticky` も同じ理由で使わない\n * （スクロール中にコンテンツへ重なった時点で「重なりを持つ UI」になる）。\n *\n * 代わりに region はアプリの先頭に置くフローの帯で、スクロールすれば\n * 流れて見えなくなってよい。帳票の朱書きはページの先頭にあり、\n * 読み進めるあいだ追いかけてはこない。\n *\n * この割り切りの代償は「長いページで気づきにくい」こと。\n * 見落とすと困る確認は Toast ではなく Modal（テイクオーバー）を使う。\n */\nconst slots = {\n // 固定しない。置いた場所がそのまま表示位置になる（アプリ先頭を推奨）\n region: 'flex flex-col gap-1.5 w-full outline-none',\n root: [\n 'w-full flex items-start gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] outline-none',\n 'text-[var(--novi-color-fg)] bg-[var(--novi-color-subtle)]',\n // 左端の太い罫が朱書きの線。色はここだけが受け持つ\n 'border border-[var(--novi-color-border-strong)]',\n 'border-l-2 border-l-[var(--c)]',\n ].join(' '),\n icon: 'shrink-0 text-[var(--c)]',\n content: 'flex-1 min-w-0 flex flex-col gap-0.5',\n // 見出しも注記も等幅。通知は読ませる文ではなく読み取らせる記録（ADR-F7）\n title: `truncate font-medium ${mono}`,\n description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n closeButton: [\n 'shrink-0 grid place-items-center size-5',\n 'text-[var(--novi-color-muted)]',\n 'border border-transparent',\n 'hover:text-[var(--novi-color-fg)]',\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 focusRing,\n disabledState,\n ].join(' '),\n action: 'shrink-0',\n} satisfies SlotMap<typeof toastSlots, (typeof toastRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-border-strong)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Toast のスタイル定義。\n *\n * @example\n * const myToast = tv({ extend: toastStyles, slots: { region: 'gap-3' } })\n */\nexport const toastStyles = tv({\n slots,\n variants: { color, radius },\n // 紙の幅いっぱいに走る帯に角は要らない（両テーマの既定は lg）\n defaultVariants: { color: 'default', radius: 'none' },\n})\n\nexport type ToastStyleProps = Parameters<typeof toastStyles>[0]\n\n/** 閉じるの ✕。等幅で出す（ADR-F7・Modal の「← 戻る」と同じ扱い）。 */\nexport const closeGlyphClass = mono\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,QAAQ;CAEZ,QAAQ;CACR,MAAM;EACJ;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;CAET,OAAO,wBAAwB;CAC/B,aAAa,oEAAoE;CACjF,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;AACV;;;;;;;AAyBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAxBZ,SAAS,EAAE,MAAM,wCAAwC;GACzD,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAmBrC;EAAO;GAfnB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAW/B;CAAO;CAE1B,iBAAiB;EAAE,OAAO;EAAW,QAAQ;CAAO;AACtD,CAAC;;AAKD,MAAa,kBAAkB"}
|
|
@@ -9,16 +9,16 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
|
|
|
9
9
|
[key: string]: {
|
|
10
10
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
11
11
|
root?: import("tailwind-variants").ClassValue;
|
|
12
|
-
arrow?: import("tailwind-variants").ClassValue;
|
|
13
12
|
content?: import("tailwind-variants").ClassValue;
|
|
13
|
+
arrow?: import("tailwind-variants").ClassValue;
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
16
|
} | {
|
|
17
17
|
[x: string]: {
|
|
18
18
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
19
19
|
root?: import("tailwind-variants").ClassValue;
|
|
20
|
-
arrow?: import("tailwind-variants").ClassValue;
|
|
21
20
|
content?: import("tailwind-variants").ClassValue;
|
|
21
|
+
arrow?: import("tailwind-variants").ClassValue;
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
24
|
} | {}, {
|
|
@@ -29,8 +29,8 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
|
|
|
29
29
|
[key: string]: {
|
|
30
30
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
31
31
|
root?: import("tailwind-variants").ClassValue;
|
|
32
|
-
arrow?: import("tailwind-variants").ClassValue;
|
|
33
32
|
content?: import("tailwind-variants").ClassValue;
|
|
33
|
+
arrow?: import("tailwind-variants").ClassValue;
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
36
|
} | {}, {
|
|
@@ -24,7 +24,7 @@ const slots = {
|
|
|
24
24
|
"rounded-[var(--novi-radius-sm)]"
|
|
25
25
|
].join(" "),
|
|
26
26
|
arrow: "hidden",
|
|
27
|
-
content: `px-
|
|
27
|
+
content: `px-[var(--novi-pad-control-x-sm)] py-1 text-[length:var(--novi-text-xs)] leading-snug ${mono}`
|
|
28
28
|
};
|
|
29
29
|
/**
|
|
30
30
|
* Tooltip のスタイル定義。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.styles.mjs","names":[],"sources":["../../src/tooltip/tooltip.styles.ts"],"sourcesContent":["import type { SlotMap, tooltipRequiredSlots, tooltipSlots } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Tooltip は Flatlay で**唯一浮くもの**（ADR-F6・`position` の例外2号）。\n *\n * 他のすべては開くと場所を取るが、ポインタ追従の一時表示だけはフローに入れられない。\n * 入れた瞬間にレイアウトが動き、ポインタがトリガーから外れて即座に閉じる\n * （出た瞬間に消えるものは補足として成立しない）。\n * 配置は上流（`useOverlayPosition`）がインラインで書くので、ここでは打ち消さない。\n *\n * 浮くことを認めた代わりに、**紙の上の面には見せない**。地と文字を反転した\n * インクの札にして、書類の一部ではなく「一時的に当てた付箋」として読ませる。\n * 影は使わない。浮いていることは反転色と重なりの事実が示す。\n *\n * 例外は Modal（テイクオーバー）とここの2つで凍結してある（NG1）。\n * 3つ目を足すときは「z 軸を持たない」という主張そのものを見直すことになる。\n */\nconst 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 ].join(' '),\n // 矢印は描かない。指す先は重なりの位置が示している\n arrow: 'hidden',\n content: `px-
|
|
1
|
+
{"version":3,"file":"tooltip.styles.mjs","names":[],"sources":["../../src/tooltip/tooltip.styles.ts"],"sourcesContent":["import type { SlotMap, tooltipRequiredSlots, tooltipSlots } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Tooltip は Flatlay で**唯一浮くもの**（ADR-F6・`position` の例外2号）。\n *\n * 他のすべては開くと場所を取るが、ポインタ追従の一時表示だけはフローに入れられない。\n * 入れた瞬間にレイアウトが動き、ポインタがトリガーから外れて即座に閉じる\n * （出た瞬間に消えるものは補足として成立しない）。\n * 配置は上流（`useOverlayPosition`）がインラインで書くので、ここでは打ち消さない。\n *\n * 浮くことを認めた代わりに、**紙の上の面には見せない**。地と文字を反転した\n * インクの札にして、書類の一部ではなく「一時的に当てた付箋」として読ませる。\n * 影は使わない。浮いていることは反転色と重なりの事実が示す。\n *\n * 例外は Modal（テイクオーバー）とここの2つで凍結してある（NG1）。\n * 3つ目を足すときは「z 軸を持たない」という主張そのものを見直すことになる。\n */\nconst 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 ].join(' '),\n // 矢印は描かない。指す先は重なりの位置が示している\n arrow: 'hidden',\n content: `px-[var(--novi-pad-control-x-sm)] py-1 text-[length:var(--novi-text-xs)] leading-snug ${mono}`,\n} satisfies SlotMap<typeof tooltipSlots, (typeof tooltipRequiredSlots)[number]>\n\n/**\n * Tooltip のスタイル定義。\n *\n * @example\n * const myTooltip = tv({ extend: tooltipStyles, slots: { content: 'px-3' } })\n */\nexport const tooltipStyles = tv({ slots })\n\nexport type TooltipStyleProps = Parameters<typeof tooltipStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;CACP,SAAS,yFAAyF;AACpG;;;;;;;AAQA,MAAa,gBAAgB,GAAG,EAAE,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@novi-ui/flatlay",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Novi UI theme 3 — no z-axis. Opening takes space: inflow expansion, full-screen takeover, rules instead of shadows.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"tailwind-variants": "^3.3.1",
|
|
35
|
-
"@novi-ui/core": "0.
|
|
35
|
+
"@novi-ui/core": "0.4.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@size-limit/preset-small-lib": "^13.0.3",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"tsdown": "0.22.14",
|
|
53
53
|
"typescript": "6.0.3",
|
|
54
54
|
"vitest": "4.1.11",
|
|
55
|
-
"@novi-ui/
|
|
56
|
-
"@novi-ui/
|
|
55
|
+
"@novi-ui/tactile": "0.3.0",
|
|
56
|
+
"@novi-ui/raster": "0.5.0"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"build": "tsdown && node scripts/generate-theme-css.mjs",
|