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