@novi-ui/tactile 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/accordion.styles.d.mts.map +1 -1
- package/dist/accordion/accordion.styles.mjs +41 -29
- package/dist/accordion/accordion.styles.mjs.map +1 -1
- package/dist/avatar/avatar.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts.map +1 -1
- package/dist/badge/badge.styles.mjs +3 -3
- package/dist/badge/badge.styles.mjs.map +1 -1
- package/dist/breadcrumbs/breadcrumbs.styles.mjs +1 -1
- package/dist/breadcrumbs/breadcrumbs.styles.mjs.map +1 -1
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/button/button.styles.d.mts.map +1 -1
- package/dist/button/button.styles.mjs +7 -5
- package/dist/button/button.styles.mjs.map +1 -1
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/card/card.styles.d.mts.map +1 -1
- package/dist/card/card.styles.mjs +8 -3
- package/dist/card/card.styles.mjs.map +1 -1
- package/dist/checkbox/checkbox.styles.d.mts.map +1 -1
- package/dist/checkbox/checkbox.styles.mjs +5 -5
- package/dist/checkbox/checkbox.styles.mjs.map +1 -1
- package/dist/color-picker/color-picker.styles.d.mts.map +1 -1
- package/dist/color-picker/color-picker.styles.mjs +2 -2
- package/dist/color-picker/color-picker.styles.mjs.map +1 -1
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/input/input.styles.d.mts.map +1 -1
- package/dist/input/input.styles.mjs +4 -4
- package/dist/input/input.styles.mjs.map +1 -1
- package/dist/menu/menu.styles.d.mts +9 -9
- package/dist/menu/menu.styles.d.mts.map +1 -1
- package/dist/menu/menu.styles.mjs +8 -4
- package/dist/menu/menu.styles.mjs.map +1 -1
- package/dist/modal/modal.styles.d.mts +3 -3
- package/dist/modal/modal.styles.d.mts.map +1 -1
- package/dist/modal/modal.styles.mjs +5 -3
- package/dist/modal/modal.styles.mjs.map +1 -1
- package/dist/popover/popover.d.mts +1 -1
- package/dist/popover/popover.mjs +1 -1
- package/dist/popover/popover.mjs.map +1 -1
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/popover/popover.styles.d.mts.map +1 -1
- package/dist/popover/popover.styles.mjs +2 -2
- package/dist/popover/popover.styles.mjs.map +1 -1
- package/dist/progress/progress.mjs +1 -1
- package/dist/progress/progress.mjs.map +1 -1
- package/dist/radio/radio.styles.d.mts.map +1 -1
- package/dist/radio/radio.styles.mjs +5 -5
- package/dist/radio/radio.styles.mjs.map +1 -1
- package/dist/select/select.styles.d.mts +3 -3
- package/dist/select/select.styles.d.mts.map +1 -1
- package/dist/select/select.styles.mjs +7 -7
- package/dist/select/select.styles.mjs.map +1 -1
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/spinner/spinner.styles.mjs +1 -1
- package/dist/spinner/spinner.styles.mjs.map +1 -1
- package/dist/switch/switch.styles.d.mts.map +1 -1
- package/dist/switch/switch.styles.mjs +1 -1
- package/dist/switch/switch.styles.mjs.map +1 -1
- package/dist/tabs/tabs.styles.d.mts.map +1 -1
- package/dist/tabs/tabs.styles.mjs +7 -7
- package/dist/tabs/tabs.styles.mjs.map +1 -1
- package/dist/tactile.css +16 -0
- package/dist/tactile.scoped.css +16 -0
- package/dist/textarea/textarea.styles.d.mts +3 -3
- package/dist/textarea/textarea.styles.d.mts.map +1 -1
- package/dist/textarea/textarea.styles.mjs +3 -3
- package/dist/textarea/textarea.styles.mjs.map +1 -1
- package/dist/toast/toast.styles.d.mts +3 -3
- package/dist/toast/toast.styles.d.mts.map +1 -1
- package/dist/toast/toast.styles.mjs +7 -5
- package/dist/toast/toast.styles.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
|
|
|
7
7
|
*/
|
|
8
8
|
const spinnerStyles = tv({
|
|
9
9
|
slots: {
|
|
10
|
-
root: "inline-flex items-center gap-
|
|
10
|
+
root: "inline-flex items-center gap-[var(--novi-gap-inline)]",
|
|
11
11
|
circle: "shrink-0 motion-safe:animate-spin text-[var(--c)]",
|
|
12
12
|
label: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]"
|
|
13
13
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.styles.mjs","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n spinnerRequiredSlots,\n spinnerSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\n/**\n * Spinner は `rotate` を使う**唯一の例外**（ADR-R2）。\n *\n * 代替のローディング表現（点滅・バーの往復）は視認性か情報量で劣るため、\n * ここだけ回転を許可している。デザイン規律の検査でも例外登録済み。\n * `prefers-reduced-motion` のときは回転を止める。\n */\nconst slots = {\n root: 'inline-flex items-center gap-
|
|
1
|
+
{"version":3,"file":"spinner.styles.mjs","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n spinnerRequiredSlots,\n spinnerSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\n/**\n * Spinner は `rotate` を使う**唯一の例外**（ADR-R2）。\n *\n * 代替のローディング表現（点滅・バーの往復）は視認性か情報量で劣るため、\n * ここだけ回転を許可している。デザイン規律の検査でも例外登録済み。\n * `prefers-reduced-motion` のときは回転を止める。\n */\nconst slots = {\n root: 'inline-flex items-center gap-[var(--novi-gap-inline)]',\n circle: 'shrink-0 motion-safe:animate-spin text-[var(--c)]',\n label: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof spinnerSlots, (typeof spinnerRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst size: VariantMap<NoviSize, { circle: string }> = {\n sm: { circle: 'size-5' },\n md: { circle: 'size-6' },\n lg: { circle: 'size-7' },\n}\n\n/**\n * Spinner のスタイル定義。\n *\n * @example\n * const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'font-medium' } })\n */\nexport const spinnerStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SpinnerStyleProps = Parameters<typeof spinnerStyles>[0]\n"],"mappings":";;;;;;;AA4CA,MAAa,gBAAgB,GAAG;CAC9B;EA3BA,MAAM;EACN,QAAQ;EACR,OAAO;CAyBP;CACA,UAAU;EAAE;GAtBZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAiBrC;EAAO;GAbnB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;EAWJ;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.d.mts","names":[],"sources":["../../src/switch/switch.styles.ts"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"switch.styles.d.mts","names":[],"sources":["../../src/switch/switch.styles.ts"],"mappings":";;;;;;;;cAkFa,0CAAY;;IAlCkB;;;IAUD;IAAe;IAAe;;;;;;;;;;IAV7B;;;IAUD;IAAe;IAAe;;;;;;;;;;IAV7B;;;IAUD;IAAe;IAAe;;;;;;;;;KA8B5D,mBAAmB,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n switchRequiredSlots,\n switchSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Switch は **iOS 相当の 51×31px**。パーツ自体がタップ下限を満たす。\n *\n * 押下フィードバックは `scale` ではなく**サムの横伸長**で出す。\n * トグルは「掴んで動かす」ものなので、沈むより伸びる方が動作の予告になる。\n */\nconst slots = {\n // 行全体が押せる。トラック（31px）だけでは指のタップ下限を割るため、\n // ラベルを含む行に 44px の下限を持たせる（e2e の実測で判明）\n root: ['inline-flex items-center gap-
|
|
1
|
+
{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviSize,\n SlotMap,\n switchRequiredSlots,\n switchSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Switch は **iOS 相当の 51×31px**。パーツ自体がタップ下限を満たす。\n *\n * 押下フィードバックは `scale` ではなく**サムの横伸長**で出す。\n * トグルは「掴んで動かす」ものなので、沈むより伸びる方が動作の予告になる。\n */\nconst slots = {\n // 行全体が押せる。トラック（31px）だけでは指のタップ下限を割るため、\n // ラベルを含む行に 44px の下限を持たせる（e2e の実測で判明）\n root: [\n 'inline-flex items-center gap-[var(--novi-gap-inline)] min-h-11',\n 'cursor-pointer',\n disabledState,\n ].join(' '),\n track: [\n 'shrink-0 inline-flex items-center',\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-subtle)]',\n 'ring-1 ring-[var(--novi-color-border)]',\n 'transition-[background-color,box-shadow]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'group-data-[selected]:bg-[var(--c)] group-data-[selected]:ring-[var(--c)]',\n focusRing,\n ].join(' '),\n // 押下でサムが横に伸びる。scale を使わないのは、掴んでいる感触は\n // 「縮む」より「引き伸ばされる」方が近いため（ADR-T5 の scale はボタン用）\n thumb: [\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-sm)]',\n 'transition-[transform,width]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n ].join(' '),\n label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof switchSlots, (typeof switchRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\n/** md の 51×31px は iOS のスイッチ寸法。パーツ自体が 44px 相当のタップ域を持つ。 */\nconst size: VariantMap<NoviSize, { track: string; thumb: string; label: string }> = {\n sm: {\n track: 'h-7 w-12 p-0.5',\n thumb: 'size-6 group-data-[selected]:translate-x-5',\n label: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n track: 'h-[31px] w-[51px] p-0.5',\n thumb: 'size-[27px] group-data-[selected]:translate-x-5',\n label: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n track: 'h-9 w-[60px] p-0.5',\n thumb: 'size-8 group-data-[selected]:translate-x-6',\n label: 'text-[length:var(--novi-text-base)]',\n },\n}\n\n/**\n * Switch のスタイル定義。\n *\n * @example\n * const mySwitch = tv({ extend: switchStyles, slots: { track: 'w-12' } })\n */\nexport const switchStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SwitchStyleProps = Parameters<typeof switchStyles>[0]\n"],"mappings":";;;;;;;;;AAiBA,MAAM,QAAQ;CAGZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAGV,OAAO;EACL;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;AACf;;;;;;;AAoCA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAnCZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EA8BrC;EAAO;GAzBnB,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;EAWmB;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}
|
|
@@ -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":";;;;;;;;;;;cAyFa,wCAAU;;IAfiB;;;IAnBO;IAAmB;;;;;;;;;;IAmB1B;;;IAnBO;IAAmB;;;;;;;;;;IAmB1B;;;IAnBO;IAAmB;;;;;;;;;KAwCtD,iBAAiB,kBAAkB"}
|
|
@@ -13,7 +13,7 @@ import { tv } from "tailwind-variants";
|
|
|
13
13
|
* 下線1本は視線には十分でも、指には「どこまでが自分の区画か」を伝えない。
|
|
14
14
|
*/
|
|
15
15
|
const slots = {
|
|
16
|
-
root: "flex flex-col gap-
|
|
16
|
+
root: "flex flex-col gap-[var(--novi-gap-stack)]",
|
|
17
17
|
list: [
|
|
18
18
|
"flex gap-1 w-fit",
|
|
19
19
|
"bg-[var(--novi-color-subtle)]",
|
|
@@ -39,7 +39,7 @@ const slots = {
|
|
|
39
39
|
"rounded-[var(--novi-radius-sm)]",
|
|
40
40
|
"shadow-[var(--novi-shadow-sm)]"
|
|
41
41
|
].join(" "),
|
|
42
|
-
panel: "outline-none text-[var(--novi-color-fg)]"
|
|
42
|
+
panel: "outline-none text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"
|
|
43
43
|
};
|
|
44
44
|
/**
|
|
45
45
|
* Tabs のスタイル定義。
|
|
@@ -54,9 +54,9 @@ const tabsStyles = tv({
|
|
|
54
54
|
slots,
|
|
55
55
|
variants: {
|
|
56
56
|
size: {
|
|
57
|
-
sm: { tab: "h-10 px-
|
|
58
|
-
md: { tab: "h-12 px-
|
|
59
|
-
lg: { tab: "h-14 px-
|
|
57
|
+
sm: { tab: "h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]" },
|
|
58
|
+
md: { tab: "h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]" },
|
|
59
|
+
lg: { tab: "h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]" }
|
|
60
60
|
},
|
|
61
61
|
variant: {
|
|
62
62
|
solid: {
|
|
@@ -72,11 +72,11 @@ const tabsStyles = tv({
|
|
|
72
72
|
indicator: "shadow-[var(--novi-shadow-none)]"
|
|
73
73
|
},
|
|
74
74
|
ghost: {
|
|
75
|
-
list: "bg-transparent p-0 gap-
|
|
75
|
+
list: "bg-transparent p-0 gap-[var(--novi-gap-inline)]",
|
|
76
76
|
indicator: "bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]"
|
|
77
77
|
},
|
|
78
78
|
plain: {
|
|
79
|
-
list: "bg-transparent p-0 gap-
|
|
79
|
+
list: "bg-transparent p-0 gap-[var(--novi-gap-stack)]",
|
|
80
80
|
indicator: "bg-transparent shadow-[var(--novi-shadow-none)]"
|
|
81
81
|
}
|
|
82
82
|
}
|
|
@@ -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 { focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Tabs は**セグメンテッドコントロール**（Raster は下線1本）。\n *\n * 構造差の要点:\n * - `list` が**塗られたトラック**になる（Raster は下辺の罫線だけ）\n * - `indicator` が**実体を持つ塗り面**として選択中のタブに重なる（Raster は描画しない）\n * - タブは「線の上の文字」ではなく「トラックに沈んだ区画」になる\n *\n * 指で切り替える前提なので、どこが押せる範囲かが面で分かる必要がある。\n * 下線1本は視線には十分でも、指には「どこまでが自分の区画か」を伝えない。\n */\nconst slots = {\n root: 'flex flex-col gap-
|
|
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 { focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Tabs は**セグメンテッドコントロール**（Raster は下線1本）。\n *\n * 構造差の要点:\n * - `list` が**塗られたトラック**になる（Raster は下辺の罫線だけ）\n * - `indicator` が**実体を持つ塗り面**として選択中のタブに重なる（Raster は描画しない）\n * - タブは「線の上の文字」ではなく「トラックに沈んだ区画」になる\n *\n * 指で切り替える前提なので、どこが押せる範囲かが面で分かる必要がある。\n * 下線1本は視線には十分でも、指には「どこまでが自分の区画か」を伝えない。\n */\nconst slots = {\n // トラックとパネルは別の区画。ここを詰めると、どのタブの中身なのかが読めなくなる\n root: 'flex flex-col gap-[var(--novi-gap-stack)]',\n list: [\n 'flex gap-1 w-fit',\n 'bg-[var(--novi-color-subtle)]',\n 'rounded-[var(--novi-radius-md)]',\n 'p-1',\n ].join(' '),\n tab: [\n // indicator を内側に置くため、位置の基準を作る\n 'relative isolate cursor-pointer outline-none whitespace-nowrap',\n 'flex items-center justify-center',\n 'text-[var(--novi-color-muted)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'transition-[color,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[pressed]:scale-[0.97] motion-reduce:data-[pressed]:scale-100',\n 'hover:text-[var(--novi-color-fg)]',\n 'data-[selected]:text-[var(--novi-color-fg)]',\n 'data-[selected]:font-bold',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n focusRing,\n ].join(' '),\n // 選択中のタブの内側に敷かれる面。トラックから1段持ち上がって見える\n indicator: [\n 'absolute inset-0 -z-10',\n 'bg-[var(--novi-color-surface)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'shadow-[var(--novi-shadow-sm)]',\n ].join(' '),\n panel: 'outline-none text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n} satisfies SlotMap<typeof tabsSlots, (typeof tabsRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { list: string; indicator: string }> = {\n solid: { list: 'bg-[var(--novi-color-subtle)]', indicator: '' },\n outline: {\n list: 'bg-transparent ring-1 ring-[var(--novi-color-border)]',\n indicator: 'shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n },\n soft: { list: 'bg-[var(--novi-color-subtle)]', indicator: 'shadow-[var(--novi-shadow-none)]' },\n ghost: {\n list: 'bg-transparent p-0 gap-[var(--novi-gap-inline)]',\n indicator: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]',\n },\n plain: {\n // トラックが無いぶん、区画の境目は距離だけで示す\n list: 'bg-transparent p-0 gap-[var(--novi-gap-stack)]',\n indicator: 'bg-transparent shadow-[var(--novi-shadow-none)]',\n },\n}\n\n/** どの段でもタップ下限を割らない。トラックの内側なので上下の余白も確保する。 */\nconst size: VariantMap<NoviSize, { tab: string }> = {\n sm: { tab: 'h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]' },\n md: { tab: 'h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]' },\n lg: { tab: 'h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Tabs のスタイル定義。\n *\n * @example\n * import { tabsStyles } from '@novi-ui/tactile'\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 variants: { size, variant },\n defaultVariants: { size: 'md', variant: 'solid' },\n})\n\nexport type TabsStyleProps = Parameters<typeof tabsStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,QAAQ;CAEZ,MAAM;CACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,KAAK;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;EACT;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;AACT;;;;;;;;;;AAoCA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EAAE;GAhBZ,IAAI,EAAE,KAAK,2EAA2E;GACtF,IAAI,EAAE,KAAK,6EAA6E;GACxF,IAAI,EAAE,KAAK,6EAA6E;EAc5E;EAAM;GAnClB,OAAO;IAAE,MAAM;IAAiC,WAAW;GAAG;GAC9D,SAAS;IACP,MAAM;IACN,WAAW;GACb;GACA,MAAM;IAAE,MAAM;IAAiC,WAAW;GAAmC;GAC7F,OAAO;IACL,MAAM;IACN,WAAW;GACb;GACA,OAAO;IAEL,MAAM;IACN,WAAW;GACb;EAqBkB;CAAQ;CAC1B,iBAAiB;EAAE,MAAM;EAAM,SAAS;CAAQ;AAClD,CAAC"}
|
package/dist/tactile.css
CHANGED
|
@@ -28,6 +28,22 @@
|
|
|
28
28
|
--novi-text-xl: 26px;
|
|
29
29
|
--novi-text-2xl: 32px;
|
|
30
30
|
--novi-text-3xl: 40px;
|
|
31
|
+
--novi-pad-surface-x: 28px;
|
|
32
|
+
--novi-pad-surface-y: 24px;
|
|
33
|
+
--novi-pad-control-x-sm: 16px;
|
|
34
|
+
--novi-pad-control-x-md: 20px;
|
|
35
|
+
--novi-pad-control-x-lg: 24px;
|
|
36
|
+
--novi-gap-inline: 10px;
|
|
37
|
+
--novi-gap-stack: 20px;
|
|
38
|
+
--novi-gap-section: 32px;
|
|
39
|
+
--novi-tracking-tight: -0.006em;
|
|
40
|
+
--novi-tracking-normal: 0.006em;
|
|
41
|
+
--novi-leading-body: 1.75;
|
|
42
|
+
--novi-leading-heading: 1.3;
|
|
43
|
+
--novi-font-sans: system-ui, sans-serif;
|
|
44
|
+
--novi-font-mono: ui-monospace, monospace;
|
|
45
|
+
--novi-font-heading: var(--novi-font-sans);
|
|
46
|
+
--novi-font-numeric: normal;
|
|
31
47
|
--novi-duration-fast: 120ms;
|
|
32
48
|
--novi-duration-base: 200ms;
|
|
33
49
|
--novi-duration-slow: 260ms;
|
package/dist/tactile.scoped.css
CHANGED
|
@@ -28,6 +28,22 @@
|
|
|
28
28
|
--novi-text-xl: 26px;
|
|
29
29
|
--novi-text-2xl: 32px;
|
|
30
30
|
--novi-text-3xl: 40px;
|
|
31
|
+
--novi-pad-surface-x: 28px;
|
|
32
|
+
--novi-pad-surface-y: 24px;
|
|
33
|
+
--novi-pad-control-x-sm: 16px;
|
|
34
|
+
--novi-pad-control-x-md: 20px;
|
|
35
|
+
--novi-pad-control-x-lg: 24px;
|
|
36
|
+
--novi-gap-inline: 10px;
|
|
37
|
+
--novi-gap-stack: 20px;
|
|
38
|
+
--novi-gap-section: 32px;
|
|
39
|
+
--novi-tracking-tight: -0.006em;
|
|
40
|
+
--novi-tracking-normal: 0.006em;
|
|
41
|
+
--novi-leading-body: 1.75;
|
|
42
|
+
--novi-leading-heading: 1.3;
|
|
43
|
+
--novi-font-sans: system-ui, sans-serif;
|
|
44
|
+
--novi-font-mono: ui-monospace, monospace;
|
|
45
|
+
--novi-font-heading: var(--novi-font-sans);
|
|
46
|
+
--novi-font-numeric: normal;
|
|
31
47
|
--novi-duration-fast: 120ms;
|
|
32
48
|
--novi-duration-base: 200ms;
|
|
33
49
|
--novi-duration-slow: 260ms;
|
|
@@ -20,7 +20,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
20
20
|
inputWrapper: string;
|
|
21
21
|
textarea: string;
|
|
22
22
|
}>;
|
|
23
|
-
radius: VariantMap<"
|
|
23
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
24
24
|
inputWrapper: string;
|
|
25
25
|
}>;
|
|
26
26
|
}, {
|
|
@@ -38,7 +38,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
38
38
|
inputWrapper: string;
|
|
39
39
|
textarea: string;
|
|
40
40
|
}>;
|
|
41
|
-
radius: VariantMap<"
|
|
41
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
42
42
|
inputWrapper: string;
|
|
43
43
|
}>;
|
|
44
44
|
}, {
|
|
@@ -56,7 +56,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
56
56
|
inputWrapper: string;
|
|
57
57
|
textarea: string;
|
|
58
58
|
}>;
|
|
59
|
-
radius: VariantMap<"
|
|
59
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
60
60
|
inputWrapper: string;
|
|
61
61
|
}>;
|
|
62
62
|
}, {
|
|
@@ -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":";;;;;;;;;;;;;;cAoGa,4CAAc;;IAzD4B;;;IAqBN;IAAkB;;;IAgBd;;;;;;;;;;;IArCE;;;IAqBN;IAAkB;;;IAgBd;;;;;;;;;;;IArCE;;;IAqBN;IAAkB;;;IAgBd;;;;;;;;;;KA0BzC,qBAAqB,kBAAkB"}
|
|
@@ -51,15 +51,15 @@ const textareaStyles = tv({
|
|
|
51
51
|
},
|
|
52
52
|
size: {
|
|
53
53
|
sm: {
|
|
54
|
-
inputWrapper: "px-
|
|
54
|
+
inputWrapper: "px-[var(--novi-pad-control-x-sm)] py-[var(--novi-pad-surface-y)]",
|
|
55
55
|
textarea: "text-[length:var(--novi-text-base)]"
|
|
56
56
|
},
|
|
57
57
|
md: {
|
|
58
|
-
inputWrapper: "px-
|
|
58
|
+
inputWrapper: "px-[var(--novi-pad-control-x-md)] py-[var(--novi-pad-surface-y)]",
|
|
59
59
|
textarea: "text-[length:var(--novi-text-base)]"
|
|
60
60
|
},
|
|
61
61
|
lg: {
|
|
62
|
-
inputWrapper: "px-
|
|
62
|
+
inputWrapper: "px-[var(--novi-pad-control-x-lg)] py-[var(--novi-pad-surface-y)]",
|
|
63
63
|
textarea: "text-[length:var(--novi-text-base)]"
|
|
64
64
|
}
|
|
65
65
|
},
|
|
@@ -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'\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex w-full',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-sm)]',\n 'rounded-[var(--novi-radius-md)]',\n 'transition-[opacity,box-shadow]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n 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 // 横に伸ばすとレイアウトが崩れるので縦のみ許可する\n 'resize-y',\n // 指で書く前提なので最低でも3行ぶんの高さを確保する\n 'min-h-24',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 文字数カウンタもここに置く。専用 slot を増やさない\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof textareaSlots, (typeof textareaRequiredSlots)[number]>\n\n/** Input と同じ解釈。面の重さで5段を作る（境界線ではなく影と背景で区別する）。 */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: { inputWrapper: 'bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]' },\n outline: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n ghost: { inputWrapper: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n // 下線だけ残す。ghost（完全に地へ溶ける）と見分けがつかなくならないようにする\n plain: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]',\n },\n}\n\n
|
|
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'\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex w-full',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-sm)]',\n 'rounded-[var(--novi-radius-md)]',\n 'transition-[opacity,box-shadow]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n 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 // 横に伸ばすとレイアウトが崩れるので縦のみ許可する\n 'resize-y',\n // 指で書く前提なので最低でも3行ぶんの高さを確保する\n 'min-h-24',\n 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 文字数カウンタもここに置く。専用 slot を増やさない\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof textareaSlots, (typeof textareaRequiredSlots)[number]>\n\n/** Input と同じ解釈。面の重さで5段を作る（境界線ではなく影と背景で区別する）。 */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: { inputWrapper: 'bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]' },\n outline: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n ghost: { inputWrapper: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n // 下線だけ残す。ghost（完全に地へ溶ける）と見分けがつかなくならないようにする\n plain: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]',\n },\n}\n\n/**\n * 1行入力と違い高さは固定しない。**段が変えるのは左右の余白だけ。**\n *\n * 上下は書く面の余白（surface-y）で一定にする。複数行を書く面で上下だけ詰めると、\n * カーソルが枠の縁に寄って、指を置いたときに親指で最終行が隠れる。\n */\nconst size: VariantMap<NoviSize, { inputWrapper: string; textarea: string }> = {\n // 入力の文字は全段 base(17px)。16px を割ると iOS Safari が自動ズームする\n sm: {\n inputWrapper: 'px-[var(--novi-pad-control-x-sm)] py-[var(--novi-pad-surface-y)]',\n textarea: 'text-[length:var(--novi-text-base)]',\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/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myTextarea = tv({\n * extend: textareaStyles,\n * slots: { textarea: 'font-mono' },\n * })\n */\nexport const textareaStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type TextareaStyleProps = Parameters<typeof textareaStyles>[0]\n"],"mappings":";;;AAYA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU;EACR;EACA;EACA;EAEA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AA4DA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GA1DZ,OAAO,EAAE,cAAc,gEAAgE;GACvF,SAAS,EACP,cACE,gGACJ;GACA,MAAM,EAAE,cAAc,iEAAiE;GACvF,OAAO,EAAE,cAAc,kDAAkD;GAEzE,OAAO,EACL,cACE,sIACJ;EA+CY;EAAS;GApCrB,IAAI;IACF,cAAc;IACd,UAAU;GACZ;GACA,IAAI;IACF,cAAc;IACd,UAAU;GACZ;GACA,IAAI;IACF,cAAc;IACd,UAAU;GACZ;EAyBqB;EAAM;GArB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAiB/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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<"sm" | "md" | "lg" | "none" | "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":";;;;;;;;cAuEa,yCAAW;;IAvBmB;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;KAoBjC,kBAAkB,kBAAkB"}
|
|
@@ -3,14 +3,16 @@ import { tv } from "tailwind-variants";
|
|
|
3
3
|
//#region src/toast/toast.styles.ts
|
|
4
4
|
const slots = {
|
|
5
5
|
region: [
|
|
6
|
-
"fixed top-0 inset-x-0 z-50 flex flex-col gap-
|
|
7
|
-
"p-
|
|
8
|
-
"
|
|
9
|
-
"
|
|
6
|
+
"fixed top-0 inset-x-0 z-50 flex flex-col gap-[var(--novi-gap-inline)] outline-none",
|
|
7
|
+
"p-[var(--novi-gap-inline)]",
|
|
8
|
+
"pt-[calc(env(safe-area-inset-top,0px)+var(--novi-gap-inline))]",
|
|
9
|
+
"pl-[calc(env(safe-area-inset-left,0px)+var(--novi-gap-inline))]",
|
|
10
|
+
"pr-[calc(env(safe-area-inset-right,0px)+var(--novi-gap-inline))]"
|
|
10
11
|
].join(" "),
|
|
11
12
|
root: [
|
|
12
13
|
"text-[var(--novi-color-fg)]",
|
|
13
|
-
"flex items-start gap-
|
|
14
|
+
"flex items-start gap-[var(--novi-gap-inline)] outline-none",
|
|
15
|
+
"px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]",
|
|
14
16
|
"bg-[var(--novi-color-surface)]",
|
|
15
17
|
"rounded-[var(--novi-radius-lg)]",
|
|
16
18
|
"shadow-[var(--novi-shadow-md)]",
|
|
@@ -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 { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // 右下に固定する。操作の起点から遠く、視線移動が最小になる位置\n // 上端に出すのは、下端がシートとソフトウェアキーボードに占有されるため。\n // safe-area(top) はノッチぶんを避ける\n region: [\n 'fixed top-0 inset-x-0 z-50 flex flex-col 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 { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // 右下に固定する。操作の起点から遠く、視線移動が最小になる位置\n // 上端に出すのは、下端がシートとソフトウェアキーボードに占有されるため。\n // safe-area(top) はノッチぶんを避ける\n // 画面端からの逃げは safe-area に足す形でしか書けないので、加算する値もトークンにする。\n // 生の 0.75rem を残すと、テーマを跨いだときにここだけ密度が動かない\n region: [\n 'fixed top-0 inset-x-0 z-50 flex flex-col gap-[var(--novi-gap-inline)] outline-none',\n 'p-[var(--novi-gap-inline)]',\n 'pt-[calc(env(safe-area-inset-top,0px)+var(--novi-gap-inline))]',\n // 横向きではノッチが左右に来る。上端だけ避けても通知はノッチに隠れる（FR-13）\n 'pl-[calc(env(safe-area-inset-left,0px)+var(--novi-gap-inline))]',\n 'pr-[calc(env(safe-area-inset-right,0px)+var(--novi-gap-inline))]',\n ].join(' '),\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-start gap-[var(--novi-gap-inline)] outline-none',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)]',\n 'bg-[var(--novi-color-surface)]',\n 'rounded-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-md)]',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_200ms_ease-out]',\n ].join(' '),\n icon: 'shrink-0 mt-0.5 text-[var(--c)]',\n content: 'flex-1 min-w-0 flex flex-col gap-0.5',\n title: 'font-medium text-[var(--novi-color-fg)]',\n description:\n 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] leading-[var(--novi-leading-body)]',\n closeButton: [\n 'shrink-0 grid place-items-center size-6 -mr-1',\n 'text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]',\n 'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\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-fg)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)] border-l-[var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)] border-l-[var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)] border-l-[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: 'bottom-8' } })\n */\nexport const toastStyles = tv({\n slots,\n variants: { color, radius },\n defaultVariants: { color: 'default', radius: 'lg' },\n})\n\nexport type ToastStyleProps = Parameters<typeof toastStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CAMZ,QAAQ;EACN;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;CACT,OAAO;CACP,aACE;CACF,aAAa;EACX;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;AACV;;;;;;;AAyBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAxBZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,uEAAuE;GACxF,SAAS,EAAE,MAAM,uEAAuE;GACxF,QAAQ,EAAE,MAAM,qEAAqE;EAmBzE;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;CAC1B,iBAAiB;EAAE,OAAO;EAAW,QAAQ;CAAK;AACpD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@novi-ui/tactile",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Novi UI theme 2 — touch-first. Bottom sheets, generous tap targets, soft elevation.",
|
|
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,7 +52,7 @@
|
|
|
52
52
|
"tsdown": "0.22.14",
|
|
53
53
|
"typescript": "6.0.3",
|
|
54
54
|
"vitest": "4.1.11",
|
|
55
|
-
"@novi-ui/raster": "0.
|
|
55
|
+
"@novi-ui/raster": "0.5.0"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"build": "tsdown && node scripts/generate-theme-css.mjs",
|