@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.
Files changed (60) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +3 -0
  3. package/dist/accordion/accordion.styles.d.mts.map +1 -1
  4. package/dist/accordion/accordion.styles.mjs +6 -5
  5. package/dist/accordion/accordion.styles.mjs.map +1 -1
  6. package/dist/badge/badge.styles.d.mts.map +1 -1
  7. package/dist/badge/badge.styles.mjs +1 -1
  8. package/dist/badge/badge.styles.mjs.map +1 -1
  9. package/dist/button/button.styles.mjs +4 -4
  10. package/dist/button/button.styles.mjs.map +1 -1
  11. package/dist/card/card.styles.d.mts.map +1 -1
  12. package/dist/card/card.styles.mjs +8 -3
  13. package/dist/card/card.styles.mjs.map +1 -1
  14. package/dist/checkbox/checkbox.styles.d.mts.map +1 -1
  15. package/dist/checkbox/checkbox.styles.mjs +5 -5
  16. package/dist/checkbox/checkbox.styles.mjs.map +1 -1
  17. package/dist/color-picker/color-picker.styles.mjs +1 -1
  18. package/dist/color-picker/color-picker.styles.mjs.map +1 -1
  19. package/dist/flatlay.css +14 -0
  20. package/dist/flatlay.scoped.css +14 -0
  21. package/dist/input/input.styles.d.mts.map +1 -1
  22. package/dist/input/input.styles.mjs +4 -4
  23. package/dist/input/input.styles.mjs.map +1 -1
  24. package/dist/menu/menu.styles.d.mts +3 -3
  25. package/dist/menu/menu.styles.d.mts.map +1 -1
  26. package/dist/menu/menu.styles.mjs +3 -3
  27. package/dist/menu/menu.styles.mjs.map +1 -1
  28. package/dist/modal/modal.styles.d.mts.map +1 -1
  29. package/dist/modal/modal.styles.mjs +19 -6
  30. package/dist/modal/modal.styles.mjs.map +1 -1
  31. package/dist/popover/popover.styles.d.mts.map +1 -1
  32. package/dist/popover/popover.styles.mjs +1 -1
  33. package/dist/popover/popover.styles.mjs.map +1 -1
  34. package/dist/progress/progress.mjs +1 -1
  35. package/dist/progress/progress.mjs.map +1 -1
  36. package/dist/radio/radio.styles.d.mts.map +1 -1
  37. package/dist/radio/radio.styles.mjs +5 -5
  38. package/dist/radio/radio.styles.mjs.map +1 -1
  39. package/dist/select/select.styles.d.mts.map +1 -1
  40. package/dist/select/select.styles.mjs +6 -5
  41. package/dist/select/select.styles.mjs.map +1 -1
  42. package/dist/spinner/spinner.styles.mjs +1 -1
  43. package/dist/spinner/spinner.styles.mjs.map +1 -1
  44. package/dist/styles/mono.mjs +20 -2
  45. package/dist/styles/mono.mjs.map +1 -1
  46. package/dist/switch/switch.styles.d.mts.map +1 -1
  47. package/dist/switch/switch.styles.mjs +1 -1
  48. package/dist/switch/switch.styles.mjs.map +1 -1
  49. package/dist/tabs/tabs.styles.d.mts.map +1 -1
  50. package/dist/tabs/tabs.styles.mjs +11 -9
  51. package/dist/tabs/tabs.styles.mjs.map +1 -1
  52. package/dist/textarea/textarea.styles.d.mts.map +1 -1
  53. package/dist/textarea/textarea.styles.mjs +3 -3
  54. package/dist/textarea/textarea.styles.mjs.map +1 -1
  55. package/dist/toast/toast.styles.d.mts.map +1 -1
  56. package/dist/toast/toast.styles.mjs +2 -1
  57. package/dist/toast/toast.styles.mjs.map +1 -1
  58. package/dist/tooltip/tooltip.styles.mjs +1 -1
  59. package/dist/tooltip/tooltip.styles.mjs.map +1 -1
  60. package/package.json +8 -7
@@ -1 +1 @@
1
- {"version":3,"file":"toast.styles.mjs","names":[],"sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviRadius,\n SlotMap,\n toastRequiredSlots,\n toastSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Toast は**フローに挿し込まれる帯**(ADR-F4)。\n *\n * 右下(Raster)にも上端中央(Tactile)にも固定しない。固定は viewport に\n * 貼り付けること、つまり z 軸そのものだから。`sticky` も同じ理由で使わない\n * (スクロール中にコンテンツへ重なった時点で「重なりを持つ UI」になる)。\n *\n * 代わりに region はアプリの先頭に置くフローの帯で、スクロールすれば\n * 流れて見えなくなってよい。帳票の朱書きはページの先頭にあり、\n * 読み進めるあいだ追いかけてはこない。\n *\n * この割り切りの代償は「長いページで気づきにくい」こと。\n * 見落とすと困る確認は Toast ではなく Modal(テイクオーバー)を使う。\n */\nconst slots = {\n // 固定しない。置いた場所がそのまま表示位置になる(アプリ先頭を推奨)\n region: 'flex flex-col gap-1.5 w-full outline-none',\n root: [\n 'w-full flex items-start gap-3 px-3 py-2 outline-none',\n 'text-[var(--novi-color-fg)] bg-[var(--novi-color-subtle)]',\n // 左端の太い罫が朱書きの線。色はここだけが受け持つ\n 'border border-[var(--novi-color-border-strong)]',\n 'border-l-2 border-l-[var(--c)]',\n ].join(' '),\n icon: 'shrink-0 text-[var(--c)]',\n content: 'flex-1 min-w-0 flex flex-col gap-0.5',\n // 見出しも注記も等幅。通知は読ませる文ではなく読み取らせる記録(ADR-F7)\n title: `truncate font-medium ${mono}`,\n description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n closeButton: [\n 'shrink-0 grid place-items-center size-5',\n 'text-[var(--novi-color-muted)]',\n 'border border-transparent',\n 'hover:text-[var(--novi-color-fg)]',\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'transition-[background-color,color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n action: 'shrink-0',\n} satisfies SlotMap<typeof toastSlots, (typeof toastRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-border-strong)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Toast のスタイル定義。\n *\n * @example\n * const myToast = tv({ extend: toastStyles, slots: { region: 'gap-3' } })\n */\nexport const toastStyles = tv({\n slots,\n variants: { color, radius },\n // 紙の幅いっぱいに走る帯に角は要らない(両テーマの既定は lg)\n defaultVariants: { color: 'default', radius: 'none' },\n})\n\nexport type ToastStyleProps = Parameters<typeof toastStyles>[0]\n\n/** 閉じるの ✕。等幅で出す(ADR-F7・Modal の「← 戻る」と同じ扱い)。 */\nexport const closeGlyphClass = mono\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,QAAQ;CAEZ,QAAQ;CACR,MAAM;EACJ;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;CAET,OAAO,wBAAwB;CAC/B,aAAa,oEAAoE;CACjF,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;AACV;;;;;;;AAyBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAxBZ,SAAS,EAAE,MAAM,wCAAwC;GACzD,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAmBrC;EAAO;GAfnB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAW/B;CAAO;CAE1B,iBAAiB;EAAE,OAAO;EAAW,QAAQ;CAAO;AACtD,CAAC;;AAKD,MAAa,kBAAkB"}
1
+ {"version":3,"file":"toast.styles.mjs","names":[],"sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import type {\n NoviColor,\n NoviRadius,\n SlotMap,\n toastRequiredSlots,\n toastSlots,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Toast は**フローに挿し込まれる帯**(ADR-F4)。\n *\n * 右下(Raster)にも上端中央(Tactile)にも固定しない。固定は viewport に\n * 貼り付けること、つまり z 軸そのものだから。`sticky` も同じ理由で使わない\n * (スクロール中にコンテンツへ重なった時点で「重なりを持つ UI」になる)。\n *\n * 代わりに region はアプリの先頭に置くフローの帯で、スクロールすれば\n * 流れて見えなくなってよい。帳票の朱書きはページの先頭にあり、\n * 読み進めるあいだ追いかけてはこない。\n *\n * この割り切りの代償は「長いページで気づきにくい」こと。\n * 見落とすと困る確認は Toast ではなく Modal(テイクオーバー)を使う。\n */\nconst slots = {\n // 固定しない。置いた場所がそのまま表示位置になる(アプリ先頭を推奨)\n region: 'flex flex-col gap-1.5 w-full outline-none',\n root: [\n 'w-full flex items-start gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-surface-x)] py-[var(--novi-pad-surface-y)] outline-none',\n 'text-[var(--novi-color-fg)] bg-[var(--novi-color-subtle)]',\n // 左端の太い罫が朱書きの線。色はここだけが受け持つ\n 'border border-[var(--novi-color-border-strong)]',\n 'border-l-2 border-l-[var(--c)]',\n ].join(' '),\n icon: 'shrink-0 text-[var(--c)]',\n content: 'flex-1 min-w-0 flex flex-col gap-0.5',\n // 見出しも注記も等幅。通知は読ませる文ではなく読み取らせる記録(ADR-F7)\n title: `truncate font-medium ${mono}`,\n description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n closeButton: [\n 'shrink-0 grid place-items-center size-5',\n 'text-[var(--novi-color-muted)]',\n 'border border-transparent',\n 'hover:text-[var(--novi-color-fg)]',\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'transition-[background-color,color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n action: 'shrink-0',\n} satisfies SlotMap<typeof toastSlots, (typeof toastRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: { root: '[--c:var(--novi-color-border-strong)]' },\n primary: { root: '[--c:var(--novi-color-primary)]' },\n secondary: { root: '[--c:var(--novi-color-secondary)]' },\n success: { root: '[--c:var(--novi-color-success)]' },\n warning: { root: '[--c:var(--novi-color-warning)]' },\n danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Toast のスタイル定義。\n *\n * @example\n * const myToast = tv({ extend: toastStyles, slots: { region: 'gap-3' } })\n */\nexport const toastStyles = tv({\n slots,\n variants: { color, radius },\n // 紙の幅いっぱいに走る帯に角は要らない(両テーマの既定は lg)\n defaultVariants: { color: 'default', radius: 'none' },\n})\n\nexport type ToastStyleProps = Parameters<typeof toastStyles>[0]\n\n/** 閉じるの ✕。等幅で出す(ADR-F7・Modal の「← 戻る」と同じ扱い)。 */\nexport const closeGlyphClass = mono\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,QAAQ;CAEZ,QAAQ;CACR,MAAM;EACJ;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;CAET,OAAO,wBAAwB;CAC/B,aAAa,oEAAoE;CACjF,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;AACV;;;;;;;AAyBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAxBZ,SAAS,EAAE,MAAM,wCAAwC;GACzD,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAmBrC;EAAO;GAfnB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAW/B;CAAO;CAE1B,iBAAiB;EAAE,OAAO;EAAW,QAAQ;CAAO;AACtD,CAAC;;AAKD,MAAa,kBAAkB"}
@@ -24,7 +24,7 @@ const slots = {
24
24
  "rounded-[var(--novi-radius-sm)]"
25
25
  ].join(" "),
26
26
  arrow: "hidden",
27
- content: `px-2 py-1 text-[length:var(--novi-text-xs)] leading-snug ${mono}`
27
+ content: `px-[var(--novi-pad-control-x-sm)] py-1 text-[length:var(--novi-text-xs)] leading-snug ${mono}`
28
28
  };
29
29
  /**
30
30
  * Tooltip のスタイル定義。
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.styles.mjs","names":[],"sources":["../../src/tooltip/tooltip.styles.ts"],"sourcesContent":["import type { SlotMap, tooltipRequiredSlots, tooltipSlots } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Tooltip は Flatlay で**唯一浮くもの**(ADR-F6・`position` の例外2号)。\n *\n * 他のすべては開くと場所を取るが、ポインタ追従の一時表示だけはフローに入れられない。\n * 入れた瞬間にレイアウトが動き、ポインタがトリガーから外れて即座に閉じる\n * (出た瞬間に消えるものは補足として成立しない)。\n * 配置は上流(`useOverlayPosition`)がインラインで書くので、ここでは打ち消さない。\n *\n * 浮くことを認めた代わりに、**紙の上の面には見せない**。地と文字を反転した\n * インクの札にして、書類の一部ではなく「一時的に当てた付箋」として読ませる。\n * 影は使わない。浮いていることは反転色と重なりの事実が示す。\n *\n * 例外は Modal(テイクオーバー)とここの2つで凍結してある(NG1)。\n * 3つ目を足すときは「z 軸を持たない」という主張そのものを見直すことになる。\n */\nconst slots = {\n root: [\n 'outline-none max-w-xs',\n 'bg-[var(--novi-color-fg)] text-[var(--novi-color-bg)]',\n 'border border-transparent',\n 'rounded-[var(--novi-radius-sm)]',\n ].join(' '),\n // 矢印は描かない。指す先は重なりの位置が示している\n arrow: 'hidden',\n content: `px-2 py-1 text-[length:var(--novi-text-xs)] leading-snug ${mono}`,\n} satisfies SlotMap<typeof tooltipSlots, (typeof tooltipRequiredSlots)[number]>\n\n/**\n * Tooltip のスタイル定義。\n *\n * @example\n * const myTooltip = tv({ extend: tooltipStyles, slots: { content: 'px-3' } })\n */\nexport const tooltipStyles = tv({ slots })\n\nexport type TooltipStyleProps = Parameters<typeof tooltipStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;CACP,SAAS,4DAA4D;AACvE;;;;;;;AAQA,MAAa,gBAAgB,GAAG,EAAE,MAAM,CAAC"}
1
+ {"version":3,"file":"tooltip.styles.mjs","names":[],"sources":["../../src/tooltip/tooltip.styles.ts"],"sourcesContent":["import type { SlotMap, tooltipRequiredSlots, tooltipSlots } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Tooltip は Flatlay で**唯一浮くもの**(ADR-F6・`position` の例外2号)。\n *\n * 他のすべては開くと場所を取るが、ポインタ追従の一時表示だけはフローに入れられない。\n * 入れた瞬間にレイアウトが動き、ポインタがトリガーから外れて即座に閉じる\n * (出た瞬間に消えるものは補足として成立しない)。\n * 配置は上流(`useOverlayPosition`)がインラインで書くので、ここでは打ち消さない。\n *\n * 浮くことを認めた代わりに、**紙の上の面には見せない**。地と文字を反転した\n * インクの札にして、書類の一部ではなく「一時的に当てた付箋」として読ませる。\n * 影は使わない。浮いていることは反転色と重なりの事実が示す。\n *\n * 例外は Modal(テイクオーバー)とここの2つで凍結してある(NG1)。\n * 3つ目を足すときは「z 軸を持たない」という主張そのものを見直すことになる。\n */\nconst slots = {\n root: [\n 'outline-none max-w-xs',\n 'bg-[var(--novi-color-fg)] text-[var(--novi-color-bg)]',\n 'border border-transparent',\n 'rounded-[var(--novi-radius-sm)]',\n ].join(' '),\n // 矢印は描かない。指す先は重なりの位置が示している\n arrow: 'hidden',\n content: `px-[var(--novi-pad-control-x-sm)] py-1 text-[length:var(--novi-text-xs)] leading-snug ${mono}`,\n} satisfies SlotMap<typeof tooltipSlots, (typeof tooltipRequiredSlots)[number]>\n\n/**\n * Tooltip のスタイル定義。\n *\n * @example\n * const myTooltip = tv({ extend: tooltipStyles, slots: { content: 'px-3' } })\n */\nexport const tooltipStyles = tv({ slots })\n\nexport type TooltipStyleProps = Parameters<typeof tooltipStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;CACP,SAAS,yFAAyF;AACpG;;;;;;;AAQA,MAAa,gBAAgB,GAAG,EAAE,MAAM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@novi-ui/flatlay",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "Novi UI theme 3 — no z-axis. Opening takes space: inflow expansion, full-screen takeover, rules instead of shadows.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -28,13 +28,16 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "react": "^19.0.0",
31
- "react-aria-components": "^1.20.0"
31
+ "react-aria-components": "^1.20.0",
32
+ "tailwindcss": "^4.0.0"
32
33
  },
33
34
  "dependencies": {
34
- "tailwind-variants": "^3.3.1",
35
- "@novi-ui/core": "0.3.0"
35
+ "@novi-ui/core": "0.4.1",
36
+ "tailwind-variants": "^3.3.1"
36
37
  },
37
38
  "devDependencies": {
39
+ "@novi-ui/raster": "0.6.0",
40
+ "@novi-ui/tactile": "0.4.0",
38
41
  "@size-limit/preset-small-lib": "^13.0.3",
39
42
  "@testing-library/dom": "^10.4.1",
40
43
  "@testing-library/react": "^16.3.2",
@@ -51,9 +54,7 @@
51
54
  "size-limit": "^13.0.3",
52
55
  "tsdown": "0.22.14",
53
56
  "typescript": "6.0.3",
54
- "vitest": "4.1.11",
55
- "@novi-ui/raster": "0.4.1",
56
- "@novi-ui/tactile": "0.2.1"
57
+ "vitest": "4.1.11"
57
58
  },
58
59
  "scripts": {
59
60
  "build": "tsdown && node scripts/generate-theme-css.mjs",