@novi-ui/raster 0.1.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 (188) hide show
  1. package/README.md +129 -0
  2. package/dist/accordion/accordion.d.mts +31 -0
  3. package/dist/accordion/accordion.d.mts.map +1 -0
  4. package/dist/accordion/accordion.mjs +88 -0
  5. package/dist/accordion/accordion.mjs.map +1 -0
  6. package/dist/accordion/accordion.styles.d.mts +61 -0
  7. package/dist/accordion/accordion.styles.d.mts.map +1 -0
  8. package/dist/accordion/accordion.styles.mjs +78 -0
  9. package/dist/accordion/accordion.styles.mjs.map +1 -0
  10. package/dist/accordion/index.d.mts +3 -0
  11. package/dist/avatar/avatar.d.mts +19 -0
  12. package/dist/avatar/avatar.d.mts.map +1 -0
  13. package/dist/avatar/avatar.mjs +57 -0
  14. package/dist/avatar/avatar.mjs.map +1 -0
  15. package/dist/avatar/avatar.styles.d.mts +49 -0
  16. package/dist/avatar/avatar.styles.d.mts.map +1 -0
  17. package/dist/avatar/avatar.styles.mjs +45 -0
  18. package/dist/avatar/avatar.styles.mjs.map +1 -0
  19. package/dist/avatar/index.d.mts +3 -0
  20. package/dist/badge/badge.d.mts +15 -0
  21. package/dist/badge/badge.d.mts.map +1 -0
  22. package/dist/badge/badge.mjs +39 -0
  23. package/dist/badge/badge.mjs.map +1 -0
  24. package/dist/badge/badge.styles.d.mts +67 -0
  25. package/dist/badge/badge.styles.d.mts.map +1 -0
  26. package/dist/badge/badge.styles.mjs +99 -0
  27. package/dist/badge/badge.styles.mjs.map +1 -0
  28. package/dist/badge/index.d.mts +3 -0
  29. package/dist/breadcrumbs/breadcrumbs.d.mts +33 -0
  30. package/dist/breadcrumbs/breadcrumbs.d.mts.map +1 -0
  31. package/dist/breadcrumbs/breadcrumbs.mjs +79 -0
  32. package/dist/breadcrumbs/breadcrumbs.mjs.map +1 -0
  33. package/dist/breadcrumbs/breadcrumbs.styles.d.mts +46 -0
  34. package/dist/breadcrumbs/breadcrumbs.styles.d.mts.map +1 -0
  35. package/dist/breadcrumbs/breadcrumbs.styles.mjs +35 -0
  36. package/dist/breadcrumbs/breadcrumbs.styles.mjs.map +1 -0
  37. package/dist/breadcrumbs/index.d.mts +3 -0
  38. package/dist/button/button.d.mts +14 -0
  39. package/dist/button/button.d.mts.map +1 -0
  40. package/dist/button/button.mjs +75 -0
  41. package/dist/button/button.mjs.map +1 -0
  42. package/dist/button/button.styles.d.mts +82 -0
  43. package/dist/button/button.styles.d.mts.map +1 -0
  44. package/dist/button/button.styles.mjs +118 -0
  45. package/dist/button/button.styles.mjs.map +1 -0
  46. package/dist/button/index.d.mts +3 -0
  47. package/dist/card/card.d.mts +51 -0
  48. package/dist/card/card.d.mts.map +1 -0
  49. package/dist/card/card.mjs +96 -0
  50. package/dist/card/card.mjs.map +1 -0
  51. package/dist/card/card.styles.d.mts +70 -0
  52. package/dist/card/card.styles.d.mts.map +1 -0
  53. package/dist/card/card.styles.mjs +62 -0
  54. package/dist/card/card.styles.mjs.map +1 -0
  55. package/dist/card/index.d.mts +3 -0
  56. package/dist/checkbox/checkbox.d.mts +24 -0
  57. package/dist/checkbox/checkbox.d.mts.map +1 -0
  58. package/dist/checkbox/checkbox.mjs +124 -0
  59. package/dist/checkbox/checkbox.mjs.map +1 -0
  60. package/dist/checkbox/checkbox.styles.d.mts +111 -0
  61. package/dist/checkbox/checkbox.styles.d.mts.map +1 -0
  62. package/dist/checkbox/checkbox.styles.mjs +89 -0
  63. package/dist/checkbox/checkbox.styles.mjs.map +1 -0
  64. package/dist/checkbox/index.d.mts +3 -0
  65. package/dist/index.d.mts +61 -0
  66. package/dist/index.mjs +42 -0
  67. package/dist/input/index.d.mts +3 -0
  68. package/dist/input/input.d.mts +20 -0
  69. package/dist/input/input.d.mts.map +1 -0
  70. package/dist/input/input.mjs +86 -0
  71. package/dist/input/input.mjs.map +1 -0
  72. package/dist/input/input.styles.d.mts +81 -0
  73. package/dist/input/input.styles.d.mts.map +1 -0
  74. package/dist/input/input.styles.mjs +83 -0
  75. package/dist/input/input.styles.mjs.map +1 -0
  76. package/dist/menu/index.d.mts +3 -0
  77. package/dist/menu/menu.d.mts +62 -0
  78. package/dist/menu/menu.d.mts.map +1 -0
  79. package/dist/menu/menu.mjs +115 -0
  80. package/dist/menu/menu.mjs.map +1 -0
  81. package/dist/menu/menu.styles.d.mts +90 -0
  82. package/dist/menu/menu.styles.d.mts.map +1 -0
  83. package/dist/menu/menu.styles.mjs +40 -0
  84. package/dist/menu/menu.styles.mjs.map +1 -0
  85. package/dist/modal/index.d.mts +3 -0
  86. package/dist/modal/modal.d.mts +47 -0
  87. package/dist/modal/modal.d.mts.map +1 -0
  88. package/dist/modal/modal.mjs +110 -0
  89. package/dist/modal/modal.mjs.map +1 -0
  90. package/dist/modal/modal.styles.d.mts +58 -0
  91. package/dist/modal/modal.styles.d.mts.map +1 -0
  92. package/dist/modal/modal.styles.mjs +69 -0
  93. package/dist/modal/modal.styles.mjs.map +1 -0
  94. package/dist/popover/index.d.mts +3 -0
  95. package/dist/popover/popover.d.mts +40 -0
  96. package/dist/popover/popover.d.mts.map +1 -0
  97. package/dist/popover/popover.mjs +86 -0
  98. package/dist/popover/popover.mjs.map +1 -0
  99. package/dist/popover/popover.styles.d.mts +81 -0
  100. package/dist/popover/popover.styles.d.mts.map +1 -0
  101. package/dist/popover/popover.styles.mjs +53 -0
  102. package/dist/popover/popover.styles.mjs.map +1 -0
  103. package/dist/progress/index.d.mts +3 -0
  104. package/dist/progress/progress.d.mts +14 -0
  105. package/dist/progress/progress.d.mts.map +1 -0
  106. package/dist/progress/progress.mjs +54 -0
  107. package/dist/progress/progress.mjs.map +1 -0
  108. package/dist/progress/progress.styles.d.mts +70 -0
  109. package/dist/progress/progress.styles.d.mts.map +1 -0
  110. package/dist/progress/progress.styles.mjs +54 -0
  111. package/dist/progress/progress.styles.mjs.map +1 -0
  112. package/dist/radio/index.d.mts +3 -0
  113. package/dist/radio/radio.d.mts +22 -0
  114. package/dist/radio/radio.d.mts.map +1 -0
  115. package/dist/radio/radio.mjs +95 -0
  116. package/dist/radio/radio.mjs.map +1 -0
  117. package/dist/radio/radio.styles.d.mts +111 -0
  118. package/dist/radio/radio.styles.d.mts.map +1 -0
  119. package/dist/radio/radio.styles.mjs +88 -0
  120. package/dist/radio/radio.styles.mjs.map +1 -0
  121. package/dist/raster.css +92 -0
  122. package/dist/raster.scoped.css +92 -0
  123. package/dist/select/index.d.mts +3 -0
  124. package/dist/select/select.d.mts +33 -0
  125. package/dist/select/select.d.mts.map +1 -0
  126. package/dist/select/select.mjs +114 -0
  127. package/dist/select/select.mjs.map +1 -0
  128. package/dist/select/select.styles.d.mts +82 -0
  129. package/dist/select/select.styles.d.mts.map +1 -0
  130. package/dist/select/select.styles.mjs +93 -0
  131. package/dist/select/select.styles.mjs.map +1 -0
  132. package/dist/skeleton/index.d.mts +3 -0
  133. package/dist/skeleton/skeleton.d.mts +15 -0
  134. package/dist/skeleton/skeleton.d.mts.map +1 -0
  135. package/dist/skeleton/skeleton.mjs +26 -0
  136. package/dist/skeleton/skeleton.mjs.map +1 -0
  137. package/dist/skeleton/skeleton.styles.d.mts +31 -0
  138. package/dist/skeleton/skeleton.styles.d.mts.map +1 -0
  139. package/dist/skeleton/skeleton.styles.mjs +22 -0
  140. package/dist/skeleton/skeleton.styles.mjs.map +1 -0
  141. package/dist/spinner/index.d.mts +3 -0
  142. package/dist/spinner/spinner.d.mts +15 -0
  143. package/dist/spinner/spinner.d.mts.map +1 -0
  144. package/dist/spinner/spinner.mjs +55 -0
  145. package/dist/spinner/spinner.mjs.map +1 -0
  146. package/dist/spinner/spinner.styles.d.mts +46 -0
  147. package/dist/spinner/spinner.styles.d.mts.map +1 -0
  148. package/dist/spinner/spinner.styles.mjs +37 -0
  149. package/dist/spinner/spinner.styles.mjs.map +1 -0
  150. package/dist/styles/focus-ring.mjs +23 -0
  151. package/dist/styles/focus-ring.mjs.map +1 -0
  152. package/dist/switch/index.d.mts +3 -0
  153. package/dist/switch/switch.d.mts +17 -0
  154. package/dist/switch/switch.d.mts.map +1 -0
  155. package/dist/switch/switch.mjs +57 -0
  156. package/dist/switch/switch.mjs.map +1 -0
  157. package/dist/switch/switch.styles.d.mts +58 -0
  158. package/dist/switch/switch.styles.d.mts.map +1 -0
  159. package/dist/switch/switch.styles.mjs +80 -0
  160. package/dist/switch/switch.styles.mjs.map +1 -0
  161. package/dist/tabs/index.d.mts +3 -0
  162. package/dist/tabs/tabs.d.mts +55 -0
  163. package/dist/tabs/tabs.d.mts.map +1 -0
  164. package/dist/tabs/tabs.mjs +84 -0
  165. package/dist/tabs/tabs.mjs.map +1 -0
  166. package/dist/tabs/tabs.styles.d.mts +55 -0
  167. package/dist/tabs/tabs.styles.d.mts.map +1 -0
  168. package/dist/tabs/tabs.styles.mjs +73 -0
  169. package/dist/tabs/tabs.styles.mjs.map +1 -0
  170. package/dist/textarea/index.d.mts +3 -0
  171. package/dist/textarea/textarea.d.mts +15 -0
  172. package/dist/textarea/textarea.d.mts.map +1 -0
  173. package/dist/textarea/textarea.mjs +70 -0
  174. package/dist/textarea/textarea.mjs.map +1 -0
  175. package/dist/textarea/textarea.styles.d.mts +73 -0
  176. package/dist/textarea/textarea.styles.d.mts.map +1 -0
  177. package/dist/textarea/textarea.styles.mjs +81 -0
  178. package/dist/textarea/textarea.styles.mjs.map +1 -0
  179. package/dist/toast/index.d.mts +3 -0
  180. package/dist/toast/toast.d.mts +38 -0
  181. package/dist/toast/toast.d.mts.map +1 -0
  182. package/dist/toast/toast.mjs +86 -0
  183. package/dist/toast/toast.mjs.map +1 -0
  184. package/dist/toast/toast.styles.d.mts +61 -0
  185. package/dist/toast/toast.styles.d.mts.map +1 -0
  186. package/dist/toast/toast.styles.mjs +59 -0
  187. package/dist/toast/toast.styles.mjs.map +1 -0
  188. package/package.json +59 -0
@@ -0,0 +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-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'transition-[border-color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:border-[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 'leading-[var(--novi-leading-body)]',\n ].join(' '),\n // 文字数カウンタもここに置く。専用 slot を増やさない\n description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof textareaSlots, (typeof textareaRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: {\n inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n },\n outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 1行入力と違い高さは固定しない。余白と文字サイズだけを段階で変える。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; textarea: string }> = {\n sm: { inputWrapper: 'px-2.5 py-1.5', textarea: 'text-[length:var(--novi-text-sm)]' },\n md: { inputWrapper: 'px-3 py-2', textarea: 'text-[length:var(--novi-text-base)]' },\n lg: { inputWrapper: 'px-3.5 py-2.5', textarea: 'text-[length:var(--novi-text-base)]' },\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/raster'\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: 'none' },\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;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU;EACR;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AAyCA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAxCZ,OAAO,EACL,cAAc,yEAChB;GACA,SAAS,EAAE,cAAc,qEAAqE;GAC9F,MAAM,EAAE,cAAc,mDAAmD;GACzE,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,oCAAoC;EAgC/C;EAAS;GA3BrB,IAAI;IAAE,cAAc;IAAiB,UAAU;GAAoC;GACnF,IAAI;IAAE,cAAc;IAAa,UAAU;GAAsC;GACjF,IAAI;IAAE,cAAc;IAAiB,UAAU;GAAsC;EAyBhE;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;CAAO;AACpE,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { NoviToast, NoviToastRegion, createToastQueue } from "./toast.mjs";
2
+ import { ToastStyleProps, toastStyles } from "./toast.styles.mjs";
3
+ export { type NoviToast, NoviToastRegion, type ToastStyleProps, createToastQueue, toastStyles };
@@ -0,0 +1,38 @@
1
+ import { ReactNode } from "react";
2
+ import { ToastQueue } from "@novi-ui/core/client";
3
+ import { NoviColor } from "@novi-ui/core";
4
+ //#region src/toast/toast.d.ts
5
+ /** 1件分の通知内容。 */
6
+ interface NoviToast {
7
+ title?: ReactNode;
8
+ description?: ReactNode;
9
+ color?: NoviColor;
10
+ /** 補助操作。「元に戻す」など */
11
+ action?: ReactNode;
12
+ }
13
+ /**
14
+ * 通知のキュー。アプリで1つ作って使い回す。
15
+ *
16
+ * 上流の React Aria では Toast がまだ不安定な API のため、
17
+ * core が安定名で再公開したものを経由している。
18
+ *
19
+ * @example
20
+ * export const toast = createToastQueue()
21
+ * toast.add({ title: '保存しました', color: 'success' }, { timeout: 4000 })
22
+ */
23
+ declare function createToastQueue(): ToastQueue<NoviToast>;
24
+ /**
25
+ * 通知の表示領域。アプリのルート付近に1つ置く。
26
+ *
27
+ * 操作に必須の情報を Toast に置かないこと。自動で消えるため読み落とすと取り返しがつかない。
28
+ *
29
+ * @example
30
+ * <NoviToastRegion queue={toast} />
31
+ */
32
+ declare function NoviToastRegion({ queue, className }: {
33
+ queue: ReturnType<typeof createToastQueue>;
34
+ className?: string;
35
+ }): import("react").JSX.Element;
36
+ //#endregion
37
+ export { NoviToast, NoviToastRegion, createToastQueue };
38
+ //# sourceMappingURL=toast.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toast.d.mts","names":[],"sources":["../../src/toast/toast.tsx"],"mappings":";;;;;UAUiB;EACf,QAAQ;EACR,cAAc;EACd,QAAQ;;EAER,SAAS;;;;;;;;;;;;iBAaK,oBAAgB,WAAA;;;;;;;;;iBAYhB,kBACd,OACA;EAEA,OAAO,kBAAkB;EACzB;oBACD,IAAA"}
@@ -0,0 +1,86 @@
1
+ "use client";
2
+ import { toastStyles } from "./toast.styles.mjs";
3
+ import { Button, Text } from "react-aria-components";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { Toast, ToastContent, ToastQueue, ToastRegion } from "@novi-ui/core/client";
6
+ //#region src/toast/toast.tsx
7
+ /**
8
+ * 通知のキュー。アプリで1つ作って使い回す。
9
+ *
10
+ * 上流の React Aria では Toast がまだ不安定な API のため、
11
+ * core が安定名で再公開したものを経由している。
12
+ *
13
+ * @example
14
+ * export const toast = createToastQueue()
15
+ * toast.add({ title: '保存しました', color: 'success' }, { timeout: 4000 })
16
+ */
17
+ function createToastQueue() {
18
+ return new ToastQueue({ maxVisibleToasts: 4 });
19
+ }
20
+ /**
21
+ * 通知の表示領域。アプリのルート付近に1つ置く。
22
+ *
23
+ * 操作に必須の情報を Toast に置かないこと。自動で消えるため読み落とすと取り返しがつかない。
24
+ *
25
+ * @example
26
+ * <NoviToastRegion queue={toast} />
27
+ */
28
+ function NoviToastRegion({ queue, className }) {
29
+ return /* @__PURE__ */ jsx(ToastRegion, {
30
+ queue,
31
+ "data-slot": "region",
32
+ className: toastStyles().region({ class: className }),
33
+ children: ({ toast }) => {
34
+ const s = toastStyles({ color: toast.content.color });
35
+ return /* @__PURE__ */ jsxs(Toast, {
36
+ toast,
37
+ "data-slot": "root",
38
+ className: s.root(),
39
+ children: [
40
+ /* @__PURE__ */ jsxs(ToastContent, {
41
+ "data-slot": "content",
42
+ className: s.content(),
43
+ children: [toast.content.title !== void 0 && /* @__PURE__ */ jsx(Text, {
44
+ slot: "title",
45
+ "data-slot": "title",
46
+ className: s.title(),
47
+ children: toast.content.title
48
+ }), toast.content.description !== void 0 && /* @__PURE__ */ jsx(Text, {
49
+ slot: "description",
50
+ "data-slot": "description",
51
+ className: s.description(),
52
+ children: toast.content.description
53
+ })]
54
+ }),
55
+ toast.content.action !== void 0 && /* @__PURE__ */ jsx("span", {
56
+ "data-slot": "action",
57
+ className: s.action(),
58
+ children: toast.content.action
59
+ }),
60
+ /* @__PURE__ */ jsx(Button, {
61
+ slot: "close",
62
+ "data-slot": "closeButton",
63
+ className: s.closeButton(),
64
+ "aria-label": "閉じる",
65
+ children: /* @__PURE__ */ jsx("svg", {
66
+ viewBox: "0 0 16 16",
67
+ width: "0.875em",
68
+ height: "0.875em",
69
+ fill: "none",
70
+ "aria-hidden": "true",
71
+ children: /* @__PURE__ */ jsx("path", {
72
+ d: "M4 4l8 8M12 4l-8 8",
73
+ stroke: "currentColor",
74
+ strokeWidth: "1.5"
75
+ })
76
+ })
77
+ })
78
+ ]
79
+ });
80
+ }
81
+ });
82
+ }
83
+ //#endregion
84
+ export { NoviToastRegion, createToastQueue };
85
+
86
+ //# sourceMappingURL=toast.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toast.mjs","names":[],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["'use client'\n\nimport type { NoviColor } from '@novi-ui/core'\n// UNSTABLE_ には触れない。core が安定名で再公開したものだけを使う(ADR-07)\nimport { Toast, ToastContent, ToastQueue, ToastRegion } from '@novi-ui/core/client'\nimport type { ReactNode } from 'react'\nimport { Button, Text } from 'react-aria-components'\nimport { toastStyles } from './toast.styles'\n\n/** 1件分の通知内容。 */\nexport interface NoviToast {\n title?: ReactNode\n description?: ReactNode\n color?: NoviColor\n /** 補助操作。「元に戻す」など */\n action?: ReactNode\n}\n\n/**\n * 通知のキュー。アプリで1つ作って使い回す。\n *\n * 上流の React Aria では Toast がまだ不安定な API のため、\n * core が安定名で再公開したものを経由している。\n *\n * @example\n * export const toast = createToastQueue()\n * toast.add({ title: '保存しました', color: 'success' }, { timeout: 4000 })\n */\nexport function createToastQueue() {\n return new ToastQueue<NoviToast>({ maxVisibleToasts: 4 })\n}\n\n/**\n * 通知の表示領域。アプリのルート付近に1つ置く。\n *\n * 操作に必須の情報を Toast に置かないこと。自動で消えるため読み落とすと取り返しがつかない。\n *\n * @example\n * <NoviToastRegion queue={toast} />\n */\nexport function NoviToastRegion({\n queue,\n className,\n}: {\n queue: ReturnType<typeof createToastQueue>\n className?: string\n}) {\n return (\n <ToastRegion\n queue={queue}\n data-slot=\"region\"\n className={toastStyles().region({ class: className })}\n >\n {({ toast }) => {\n const s = toastStyles({ color: toast.content.color })\n return (\n <Toast toast={toast} data-slot=\"root\" className={s.root()}>\n <ToastContent data-slot=\"content\" className={s.content()}>\n {toast.content.title !== undefined && (\n <Text slot=\"title\" data-slot=\"title\" className={s.title()}>\n {toast.content.title}\n </Text>\n )}\n {toast.content.description !== undefined && (\n <Text slot=\"description\" data-slot=\"description\" className={s.description()}>\n {toast.content.description}\n </Text>\n )}\n </ToastContent>\n\n {toast.content.action !== undefined && (\n <span data-slot=\"action\" className={s.action()}>\n {toast.content.action}\n </span>\n )}\n\n <Button\n slot=\"close\"\n data-slot=\"closeButton\"\n className={s.closeButton()}\n aria-label=\"閉じる\"\n >\n <svg\n viewBox=\"0 0 16 16\"\n width=\"0.875em\"\n height=\"0.875em\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n </svg>\n </Button>\n </Toast>\n )\n }}\n </ToastRegion>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,SAAgB,mBAAmB;CACjC,OAAO,IAAI,WAAsB,EAAE,kBAAkB,EAAE,CAAC;AAC1D;;;;;;;;;AAUA,SAAgB,gBAAgB,EAC9B,OACA,aAIC;CACD,OACE,oBAAC,aAAD;EACS;EACP,aAAU;EACV,WAAW,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EAElD,WAAA,EAAE,YAAY;GACd,MAAM,IAAI,YAAY,EAAE,OAAO,MAAM,QAAQ,MAAM,CAAC;GACpD,OACE,qBAAC,OAAD;IAAc;IAAO,aAAU;IAAO,WAAW,EAAE,KAAK;IAAxD,UAAA;KACE,qBAAC,cAAD;MAAc,aAAU;MAAU,WAAW,EAAE,QAAQ;MAAvD,UAAA,CACG,MAAM,QAAQ,UAAU,KAAA,KACvB,oBAAC,MAAD;OAAM,MAAK;OAAQ,aAAU;OAAQ,WAAW,EAAE,MAAM;OACrD,UAAA,MAAM,QAAQ;MACX,CAAA,GAEP,MAAM,QAAQ,gBAAgB,KAAA,KAC7B,oBAAC,MAAD;OAAM,MAAK;OAAc,aAAU;OAAc,WAAW,EAAE,YAAY;OACvE,UAAA,MAAM,QAAQ;MACX,CAAA,CAEI;;KAEb,MAAM,QAAQ,WAAW,KAAA,KACxB,oBAAC,QAAD;MAAM,aAAU;MAAS,WAAW,EAAE,OAAO;MAC1C,UAAA,MAAM,QAAQ;KACX,CAAA;KAGR,oBAAC,QAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,EAAE,YAAY;MACzB,cAAW;MAEX,UAAA,oBAAC,OAAD;OACE,SAAQ;OACR,OAAM;OACN,QAAO;OACP,MAAK;OACL,eAAY;OAEZ,UAAA,oBAAC,QAAD;QAAM,GAAE;QAAqB,QAAO;QAAe,aAAY;OAAO,CAAA;MACnE,CAAA;KACC,CAAA;IACH;;EAEX;CACW,CAAA;AAEjB"}
@@ -0,0 +1,61 @@
1
+ import { VariantMap } from "@novi-ui/core";
2
+ //#region src/toast/toast.styles.d.ts
3
+ /**
4
+ * Toast のスタイル定義。
5
+ *
6
+ * @example
7
+ * const myToast = tv({ extend: toastStyles, slots: { region: 'bottom-8' } })
8
+ */
9
+ declare const toastStyles: import("tailwind-variants").TVReturnType<{
10
+ color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
11
+ root: string;
12
+ }>;
13
+ radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
14
+ root: string;
15
+ }>;
16
+ }, {
17
+ region: string;
18
+ root: string;
19
+ icon: string;
20
+ content: string;
21
+ title: string;
22
+ description: string;
23
+ closeButton: string;
24
+ action: string;
25
+ }, undefined, {
26
+ color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
27
+ root: string;
28
+ }>;
29
+ radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
30
+ root: string;
31
+ }>;
32
+ }, {
33
+ region: string;
34
+ root: string;
35
+ icon: string;
36
+ content: string;
37
+ title: string;
38
+ description: string;
39
+ closeButton: string;
40
+ action: string;
41
+ }, import("tailwind-variants").TVReturnTypeLike<{
42
+ color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
43
+ root: string;
44
+ }>;
45
+ radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
46
+ root: string;
47
+ }>;
48
+ }, {
49
+ region: string;
50
+ root: string;
51
+ icon: string;
52
+ content: string;
53
+ title: string;
54
+ description: string;
55
+ closeButton: string;
56
+ action: string;
57
+ }>>;
58
+ type ToastStyleProps = Parameters<typeof toastStyles>[0];
59
+ //#endregion
60
+ export { ToastStyleProps, toastStyles };
61
+ //# sourceMappingURL=toast.styles.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toast.styles.d.mts","names":[],"sources":["../../src/toast/toast.styles.ts"],"mappings":";;;;;;;;cA2Da,yCAAW;;IAvBmB;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;KAoBjC,kBAAkB,kBAAkB"}
@@ -0,0 +1,59 @@
1
+ import { focusRing } from "../styles/focus-ring.mjs";
2
+ import { tv } from "tailwind-variants";
3
+ //#region src/toast/toast.styles.ts
4
+ const slots = {
5
+ region: "fixed bottom-4 right-4 z-50 flex flex-col gap-2 outline-none max-w-sm",
6
+ root: [
7
+ "text-[var(--novi-color-fg)]",
8
+ "flex items-start gap-3 px-4 py-3 outline-none",
9
+ "bg-[var(--novi-color-bg)]",
10
+ "border border-[var(--novi-color-border-strong)]",
11
+ "shadow-none",
12
+ "data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
13
+ ].join(" "),
14
+ icon: "shrink-0 mt-0.5 text-[var(--c)]",
15
+ content: "flex-1 min-w-0 flex flex-col gap-0.5",
16
+ title: "font-medium text-[var(--novi-color-fg)]",
17
+ description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] leading-[var(--novi-leading-body)]",
18
+ closeButton: [
19
+ "shrink-0 grid place-items-center size-6 -mr-1",
20
+ "text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]",
21
+ "transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
22
+ focusRing
23
+ ].join(" "),
24
+ action: "shrink-0"
25
+ };
26
+ /**
27
+ * Toast のスタイル定義。
28
+ *
29
+ * @example
30
+ * const myToast = tv({ extend: toastStyles, slots: { region: 'bottom-8' } })
31
+ */
32
+ const toastStyles = tv({
33
+ slots,
34
+ variants: {
35
+ color: {
36
+ default: { root: "[--c:var(--novi-color-fg)]" },
37
+ primary: { root: "[--c:var(--novi-color-primary)]" },
38
+ secondary: { root: "[--c:var(--novi-color-secondary)]" },
39
+ success: { root: "[--c:var(--novi-color-success)] border-l-[var(--novi-color-success)]" },
40
+ warning: { root: "[--c:var(--novi-color-warning)] border-l-[var(--novi-color-warning)]" },
41
+ danger: { root: "[--c:var(--novi-color-danger)] border-l-[var(--novi-color-danger)]" }
42
+ },
43
+ radius: {
44
+ none: { root: "rounded-[var(--novi-radius-none)]" },
45
+ sm: { root: "rounded-[var(--novi-radius-sm)]" },
46
+ md: { root: "rounded-[var(--novi-radius-md)]" },
47
+ lg: { root: "rounded-[var(--novi-radius-lg)]" },
48
+ full: { root: "rounded-[var(--novi-radius-full)]" }
49
+ }
50
+ },
51
+ defaultVariants: {
52
+ color: "default",
53
+ radius: "none"
54
+ }
55
+ });
56
+ //#endregion
57
+ export { toastStyles };
58
+
59
+ //# sourceMappingURL=toast.styles.mjs.map
@@ -0,0 +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 region: 'fixed bottom-4 right-4 z-50 flex flex-col gap-2 outline-none max-w-sm',\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-start gap-3 px-4 py-3 outline-none',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'shadow-none',\n 'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_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: 'none' },\n})\n\nexport type ToastStyleProps = Parameters<typeof toastStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CAEZ,QAAQ;CACR,MAAM;EACJ;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;CAAO;AACtD,CAAC"}
package/package.json ADDED
@@ -0,0 +1,59 @@
1
+ {
2
+ "name": "@novi-ui/raster",
3
+ "version": "0.1.0",
4
+ "description": "Novi UI theme 1 — minimal / Swiss. Sharp corners, no shadows, hairline rules, restrained motion.",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "sideEffects": false,
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "files": [
12
+ "dist"
13
+ ],
14
+ "exports": {
15
+ ".": {
16
+ "types": "./dist/index.d.mts",
17
+ "default": "./dist/index.mjs"
18
+ },
19
+ "./raster.css": "./dist/raster.css",
20
+ "./raster.scoped.css": "./dist/raster.scoped.css"
21
+ },
22
+ "peerDependencies": {
23
+ "react": "^19.0.0",
24
+ "react-aria-components": "^1.20.0"
25
+ },
26
+ "dependencies": {
27
+ "tailwind-variants": "^3.3.1",
28
+ "@novi-ui/core": "0.1.0"
29
+ },
30
+ "devDependencies": {
31
+ "@size-limit/preset-small-lib": "^13.0.3",
32
+ "@testing-library/dom": "^10.4.1",
33
+ "@testing-library/react": "^16.3.2",
34
+ "@testing-library/user-event": "^14.6.5",
35
+ "@types/node": "^26.2.0",
36
+ "@types/react": "^19.0.0",
37
+ "@types/react-dom": "^19.2.4",
38
+ "@vitest/coverage-v8": "^4.1.11",
39
+ "jsdom": "^30.0.1",
40
+ "react": "^19.0.0",
41
+ "react-aria-components": "^1.20.0",
42
+ "react-dom": "^19.2.8",
43
+ "size-limit": "^13.0.3",
44
+ "tsdown": "0.22.14",
45
+ "typescript": "6.0.3",
46
+ "vitest": "4.1.11"
47
+ },
48
+ "scripts": {
49
+ "build": "tsdown && node scripts/generate-theme-css.mjs",
50
+ "dev": "tsdown --watch",
51
+ "typecheck": "tsc --noEmit",
52
+ "check:design": "node scripts/check-design-rules.mjs",
53
+ "test": "vitest run",
54
+ "test:watch": "vitest",
55
+ "test:coverage": "vitest run --coverage",
56
+ "size": "size-limit",
57
+ "check:treeshaking": "node scripts/check-treeshaking.mjs"
58
+ }
59
+ }