@journ/bloom 0.1.1

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 (278) hide show
  1. package/DESIGN.md +287 -0
  2. package/LICENSE +21 -0
  3. package/README.md +59 -0
  4. package/dist/accordion-parts.d.ts +9 -0
  5. package/dist/accordion-parts.js +37 -0
  6. package/dist/accordion.d.ts +10 -0
  7. package/dist/accordion.js +10 -0
  8. package/dist/alert-dialog-parts.d.ts +16 -0
  9. package/dist/alert-dialog-parts.js +33 -0
  10. package/dist/alert-dialog.d.ts +15 -0
  11. package/dist/alert-dialog.js +15 -0
  12. package/dist/alert.d.ts +48 -0
  13. package/dist/alert.js +51 -0
  14. package/dist/animated-size.d.ts +6 -0
  15. package/dist/animated-size.js +12 -0
  16. package/dist/avatar-parts.d.ts +10 -0
  17. package/dist/avatar-parts.js +20 -0
  18. package/dist/avatar.d.ts +9 -0
  19. package/dist/avatar.js +9 -0
  20. package/dist/badge.d.ts +38 -0
  21. package/dist/badge.js +22 -0
  22. package/dist/breadcrumbs.d.ts +18 -0
  23. package/dist/breadcrumbs.js +44 -0
  24. package/dist/bulk-bar.d.ts +13 -0
  25. package/dist/bulk-bar.js +27 -0
  26. package/dist/button.d.ts +40 -0
  27. package/dist/button.js +41 -0
  28. package/dist/calendar-parts.d.ts +17 -0
  29. package/dist/calendar-parts.js +90 -0
  30. package/dist/calendar.d.ts +17 -0
  31. package/dist/calendar.js +17 -0
  32. package/dist/card.d.ts +51 -0
  33. package/dist/card.js +63 -0
  34. package/dist/carousel-parts.d.ts +13 -0
  35. package/dist/carousel-parts.js +53 -0
  36. package/dist/carousel.d.ts +11 -0
  37. package/dist/carousel.js +11 -0
  38. package/dist/checkbox-parts.d.ts +8 -0
  39. package/dist/checkbox-parts.js +21 -0
  40. package/dist/checkbox.d.ts +8 -0
  41. package/dist/checkbox.js +8 -0
  42. package/dist/chip.d.ts +45 -0
  43. package/dist/chip.js +55 -0
  44. package/dist/collapsible-parts.d.ts +8 -0
  45. package/dist/collapsible-parts.js +22 -0
  46. package/dist/collapsible.d.ts +9 -0
  47. package/dist/collapsible.js +9 -0
  48. package/dist/combobox-parts.d.ts +22 -0
  49. package/dist/combobox-parts.js +54 -0
  50. package/dist/combobox.d.ts +26 -0
  51. package/dist/combobox.js +21 -0
  52. package/dist/command-palette-parts.d.ts +13 -0
  53. package/dist/command-palette-parts.js +19 -0
  54. package/dist/command-palette.d.ts +17 -0
  55. package/dist/command-palette.js +17 -0
  56. package/dist/composer.d.ts +12 -0
  57. package/dist/composer.js +21 -0
  58. package/dist/context-menu-parts.d.ts +15 -0
  59. package/dist/context-menu-parts.js +10 -0
  60. package/dist/context-menu.d.ts +20 -0
  61. package/dist/context-menu.js +13 -0
  62. package/dist/currency-input-parts.d.ts +8 -0
  63. package/dist/currency-input-parts.js +13 -0
  64. package/dist/currency-input.d.ts +8 -0
  65. package/dist/currency-input.js +8 -0
  66. package/dist/data-table-parts.d.ts +10 -0
  67. package/dist/data-table-parts.js +65 -0
  68. package/dist/data-table.d.ts +12 -0
  69. package/dist/data-table.js +12 -0
  70. package/dist/date-input-parts.d.ts +7 -0
  71. package/dist/date-input-parts.js +12 -0
  72. package/dist/date-input.d.ts +8 -0
  73. package/dist/date-input.js +8 -0
  74. package/dist/date-picker-parts.d.ts +11 -0
  75. package/dist/date-picker-parts.js +8 -0
  76. package/dist/date-picker.d.ts +20 -0
  77. package/dist/date-picker.js +15 -0
  78. package/dist/date-range-picker-parts.d.ts +11 -0
  79. package/dist/date-range-picker-parts.js +8 -0
  80. package/dist/date-range-picker.d.ts +20 -0
  81. package/dist/date-range-picker.js +15 -0
  82. package/dist/description-list.d.ts +12 -0
  83. package/dist/description-list.js +23 -0
  84. package/dist/dialog-parts.d.ts +15 -0
  85. package/dist/dialog-parts.js +32 -0
  86. package/dist/dialog.d.ts +15 -0
  87. package/dist/dialog.js +15 -0
  88. package/dist/divider.d.ts +6 -0
  89. package/dist/divider.js +12 -0
  90. package/dist/drawer-parts.d.ts +13 -0
  91. package/dist/drawer-parts.js +31 -0
  92. package/dist/drawer.d.ts +15 -0
  93. package/dist/drawer.js +15 -0
  94. package/dist/dropdown-menu-parts.d.ts +15 -0
  95. package/dist/dropdown-menu-parts.js +10 -0
  96. package/dist/dropdown-menu.d.ts +20 -0
  97. package/dist/dropdown-menu.js +13 -0
  98. package/dist/empty-state.d.ts +16 -0
  99. package/dist/empty-state.js +40 -0
  100. package/dist/field-parts.d.ts +10 -0
  101. package/dist/field-parts.js +25 -0
  102. package/dist/field.d.ts +11 -0
  103. package/dist/field.js +11 -0
  104. package/dist/file-dropzone-parts.d.ts +12 -0
  105. package/dist/file-dropzone-parts.js +32 -0
  106. package/dist/file-dropzone.d.ts +10 -0
  107. package/dist/file-dropzone.js +10 -0
  108. package/dist/heading.d.ts +31 -0
  109. package/dist/heading.js +26 -0
  110. package/dist/hover-card-parts.d.ts +8 -0
  111. package/dist/hover-card-parts.js +20 -0
  112. package/dist/hover-card.d.ts +9 -0
  113. package/dist/hover-card.js +9 -0
  114. package/dist/icon-button.d.ts +44 -0
  115. package/dist/icon-button.js +39 -0
  116. package/dist/icon.d.ts +30 -0
  117. package/dist/icon.js +27 -0
  118. package/dist/index.d.ts +96 -0
  119. package/dist/index.js +89 -0
  120. package/dist/input.d.ts +7 -0
  121. package/dist/input.js +14 -0
  122. package/dist/lib/cn.d.ts +6 -0
  123. package/dist/lib/cn.js +7 -0
  124. package/dist/lib/icon-tile.d.ts +32 -0
  125. package/dist/lib/icon-tile.js +23 -0
  126. package/dist/lib/interactive.d.ts +11 -0
  127. package/dist/lib/interactive.js +19 -0
  128. package/dist/lib/menu-parts.d.ts +25 -0
  129. package/dist/lib/menu-parts.js +41 -0
  130. package/dist/lib/modal-content.d.ts +10 -0
  131. package/dist/lib/modal-content.js +17 -0
  132. package/dist/lib/modal-parts.d.ts +7 -0
  133. package/dist/lib/modal-parts.js +15 -0
  134. package/dist/lib/overlay.d.ts +41 -0
  135. package/dist/lib/overlay.js +22 -0
  136. package/dist/lib/picker.d.ts +18 -0
  137. package/dist/lib/picker.js +25 -0
  138. package/dist/lib/text-styles.d.ts +25 -0
  139. package/dist/lib/text-styles.js +25 -0
  140. package/dist/lib/theme.d.ts +43 -0
  141. package/dist/lib/theme.js +45 -0
  142. package/dist/lib/tones.d.ts +52 -0
  143. package/dist/lib/tones.js +55 -0
  144. package/dist/lib/tv.d.ts +2 -0
  145. package/dist/lib/tv.js +2 -0
  146. package/dist/lib/use-enter.d.ts +15 -0
  147. package/dist/lib/use-enter.js +54 -0
  148. package/dist/link.d.ts +8 -0
  149. package/dist/link.js +13 -0
  150. package/dist/markdown.d.ts +10 -0
  151. package/dist/markdown.js +70 -0
  152. package/dist/message.d.ts +15 -0
  153. package/dist/message.js +25 -0
  154. package/dist/month-picker-parts.d.ts +2 -0
  155. package/dist/month-picker-parts.js +3 -0
  156. package/dist/month-picker.d.ts +15 -0
  157. package/dist/month-picker.js +15 -0
  158. package/dist/month-stepper-parts.d.ts +11 -0
  159. package/dist/month-stepper-parts.js +37 -0
  160. package/dist/month-stepper.d.ts +10 -0
  161. package/dist/month-stepper.js +10 -0
  162. package/dist/multiple-selector-parts.d.ts +18 -0
  163. package/dist/multiple-selector-parts.js +28 -0
  164. package/dist/multiple-selector.d.ts +28 -0
  165. package/dist/multiple-selector.js +23 -0
  166. package/dist/nav-bar.d.ts +10 -0
  167. package/dist/nav-bar.js +23 -0
  168. package/dist/navigation-menu-parts.d.ts +12 -0
  169. package/dist/navigation-menu-parts.js +47 -0
  170. package/dist/navigation-menu.d.ts +12 -0
  171. package/dist/navigation-menu.js +12 -0
  172. package/dist/otp-input-parts.d.ts +8 -0
  173. package/dist/otp-input-parts.js +17 -0
  174. package/dist/otp-input.d.ts +9 -0
  175. package/dist/otp-input.js +9 -0
  176. package/dist/page-header.d.ts +12 -0
  177. package/dist/page-header.js +23 -0
  178. package/dist/page.d.ts +45 -0
  179. package/dist/page.js +41 -0
  180. package/dist/pagination.d.ts +18 -0
  181. package/dist/pagination.js +49 -0
  182. package/dist/pill-select.d.ts +5 -0
  183. package/dist/pill-select.js +21 -0
  184. package/dist/popover-parts.d.ts +9 -0
  185. package/dist/popover-parts.js +21 -0
  186. package/dist/popover.d.ts +10 -0
  187. package/dist/popover.js +10 -0
  188. package/dist/portal.d.ts +2 -0
  189. package/dist/portal.js +2 -0
  190. package/dist/progress-parts.d.ts +38 -0
  191. package/dist/progress-parts.js +25 -0
  192. package/dist/progress.d.ts +8 -0
  193. package/dist/progress.js +8 -0
  194. package/dist/quantity-input-parts.d.ts +11 -0
  195. package/dist/quantity-input-parts.js +36 -0
  196. package/dist/quantity-input.d.ts +10 -0
  197. package/dist/quantity-input.js +10 -0
  198. package/dist/radio-parts.d.ts +7 -0
  199. package/dist/radio-parts.js +19 -0
  200. package/dist/radio.d.ts +8 -0
  201. package/dist/radio.js +8 -0
  202. package/dist/scroll-area-parts.d.ts +9 -0
  203. package/dist/scroll-area-parts.js +23 -0
  204. package/dist/scroll-area.d.ts +10 -0
  205. package/dist/scroll-area.js +10 -0
  206. package/dist/select-parts.d.ts +13 -0
  207. package/dist/select-parts.js +46 -0
  208. package/dist/select.d.ts +14 -0
  209. package/dist/select.js +14 -0
  210. package/dist/sheet-parts.d.ts +33 -0
  211. package/dist/sheet-parts.js +41 -0
  212. package/dist/sheet.d.ts +16 -0
  213. package/dist/sheet.js +16 -0
  214. package/dist/sidebar.d.ts +24 -0
  215. package/dist/sidebar.js +58 -0
  216. package/dist/skeleton.d.ts +5 -0
  217. package/dist/skeleton.js +11 -0
  218. package/dist/slider-parts.d.ts +9 -0
  219. package/dist/slider-parts.js +26 -0
  220. package/dist/slider.d.ts +10 -0
  221. package/dist/slider.js +10 -0
  222. package/dist/spinner.d.ts +5 -0
  223. package/dist/spinner.js +10 -0
  224. package/dist/stack-parts.d.ts +39 -0
  225. package/dist/stack-parts.js +35 -0
  226. package/dist/stack.d.ts +10 -0
  227. package/dist/stack.js +10 -0
  228. package/dist/stat.d.ts +14 -0
  229. package/dist/stat.js +29 -0
  230. package/dist/step-button.d.ts +10 -0
  231. package/dist/step-button.js +14 -0
  232. package/dist/stepper-parts.d.ts +10 -0
  233. package/dist/stepper-parts.js +33 -0
  234. package/dist/stepper.d.ts +11 -0
  235. package/dist/stepper.js +11 -0
  236. package/dist/styles.css +2 -0
  237. package/dist/switch-parts.d.ts +7 -0
  238. package/dist/switch-parts.js +19 -0
  239. package/dist/switch.d.ts +8 -0
  240. package/dist/switch.js +8 -0
  241. package/dist/table.d.ts +20 -0
  242. package/dist/table.js +48 -0
  243. package/dist/tabs-parts.d.ts +9 -0
  244. package/dist/tabs-parts.js +25 -0
  245. package/dist/tabs.d.ts +10 -0
  246. package/dist/tabs.js +10 -0
  247. package/dist/tag-input-parts.d.ts +15 -0
  248. package/dist/tag-input-parts.js +24 -0
  249. package/dist/tag-input.d.ts +10 -0
  250. package/dist/tag-input.js +10 -0
  251. package/dist/text-morph.d.ts +6 -0
  252. package/dist/text-morph.js +14 -0
  253. package/dist/text-shimmer.d.ts +9 -0
  254. package/dist/text-shimmer.js +12 -0
  255. package/dist/text.d.ts +38 -0
  256. package/dist/text.js +32 -0
  257. package/dist/textarea.d.ts +5 -0
  258. package/dist/textarea.js +12 -0
  259. package/dist/time-range-parts.d.ts +10 -0
  260. package/dist/time-range-parts.js +22 -0
  261. package/dist/time-range.d.ts +10 -0
  262. package/dist/time-range.js +10 -0
  263. package/dist/toast-parts.d.ts +11 -0
  264. package/dist/toast-parts.js +39 -0
  265. package/dist/toast.d.ts +13 -0
  266. package/dist/toast.js +12 -0
  267. package/dist/toggle-group-parts.d.ts +7 -0
  268. package/dist/toggle-group-parts.js +17 -0
  269. package/dist/toggle-group.d.ts +8 -0
  270. package/dist/toggle-group.js +8 -0
  271. package/dist/tokens.css +64 -0
  272. package/dist/tooltip-parts.d.ts +9 -0
  273. package/dist/tooltip-parts.js +21 -0
  274. package/dist/tooltip.d.ts +10 -0
  275. package/dist/tooltip.js +10 -0
  276. package/dist/touch-target.d.ts +7 -0
  277. package/dist/touch-target.js +10 -0
  278. package/package.json +71 -0
@@ -0,0 +1,11 @@
1
+ import { Description, Error as FieldError, Label, Root } from "./field-parts.js";
2
+ //#region src/field.d.ts
3
+ declare const Field: {
4
+ Root: typeof Root;
5
+ Label: typeof Label;
6
+ Description: typeof Description;
7
+ Error: typeof FieldError;
8
+ Control: any;
9
+ };
10
+ //#endregion
11
+ export { Field };
package/dist/field.js ADDED
@@ -0,0 +1,11 @@
1
+ import { Control, Description, Error as FieldError, Label, Root } from "./field-parts.js";
2
+ //#region src/field.tsx
3
+ const Field = {
4
+ Root,
5
+ Label,
6
+ Description,
7
+ Error: FieldError,
8
+ Control
9
+ };
10
+ //#endregion
11
+ export { Field };
@@ -0,0 +1,12 @@
1
+ import { ComponentPropsWithRef } from "react";
2
+ import * as Nude from "@journ/nude/file-dropzone-parts";
3
+ import { FileRejection, RejectionReason } from "@journ/nude/file-dropzone-parts";
4
+ //#region src/file-dropzone-parts.d.ts
5
+ declare const matchesAccept: any, sortFiles: any;
6
+ /** A drop target that is also a button: click or press Enter to open the file picker. */
7
+ declare const Root: ({ className, ...props }: Nude.RootProps) => import("react").JSX.Element;
8
+ declare const Icon: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
9
+ declare const Title: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
10
+ declare const Description: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
11
+ //#endregion
12
+ export { Description, type FileRejection, Icon, type RejectionReason, Root, Title, matchesAccept, sortFiles };
@@ -0,0 +1,32 @@
1
+ "use client";
2
+ import { cn } from "./lib/cn.js";
3
+ import { mutedText } from "./lib/text-styles.js";
4
+ import { iconTile } from "./lib/icon-tile.js";
5
+ import { jsx } from "react/jsx-runtime";
6
+ import * as Nude from "@journ/nude/file-dropzone-parts";
7
+ //#region src/file-dropzone-parts.tsx
8
+ const { matchesAccept, sortFiles } = Nude;
9
+ /** A drop target that is also a button: click or press Enter to open the file picker. */
10
+ const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Root, {
11
+ ...props,
12
+ className: cn("flex cursor-default flex-col items-center gap-2 rounded-bloom border border-dashed border-current/25 p-8 text-center outline-none transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky", "data-dragging:border-current/60 data-dragging:bg-current/5 data-disabled:pointer-events-none data-disabled:opacity-50", className)
13
+ });
14
+ const Icon = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Icon, {
15
+ "aria-hidden": true,
16
+ ...props,
17
+ className: iconTile({
18
+ size: "md",
19
+ tone: "soft",
20
+ class: className
21
+ })
22
+ });
23
+ const Title = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Title, {
24
+ ...props,
25
+ className: cn("text-sm/6 font-medium", className)
26
+ });
27
+ const Description = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Description, {
28
+ ...props,
29
+ className: cn(mutedText, className)
30
+ });
31
+ //#endregion
32
+ export { Description, Icon, Root, Title, matchesAccept, sortFiles };
@@ -0,0 +1,10 @@
1
+ import { Description, FileRejection, Icon, RejectionReason, Root, Title } from "./file-dropzone-parts.js";
2
+ //#region src/file-dropzone.d.ts
3
+ declare const FileDropzone: {
4
+ Root: typeof Root;
5
+ Icon: typeof Icon;
6
+ Title: typeof Title;
7
+ Description: typeof Description;
8
+ };
9
+ //#endregion
10
+ export { FileDropzone, type FileRejection, type RejectionReason };
@@ -0,0 +1,10 @@
1
+ import { Description, Icon, Root, Title } from "./file-dropzone-parts.js";
2
+ //#region src/file-dropzone.tsx
3
+ const FileDropzone = {
4
+ Root,
5
+ Icon,
6
+ Title,
7
+ Description
8
+ };
9
+ //#endregion
10
+ export { FileDropzone };
@@ -0,0 +1,31 @@
1
+ import { VariantProps } from "./lib/tv.js";
2
+ import { ComponentPropsWithRef } from "react";
3
+ //#region src/heading.d.ts
4
+ declare const heading: import("tailwind-variants").TVReturnType<{
5
+ size: {
6
+ sm: "text-lg/7";
7
+ md: "text-2xl/8";
8
+ lg: "text-3xl/9";
9
+ xl: "text-5xl/none";
10
+ };
11
+ }, undefined, "font-medium tracking-tight", {
12
+ size: {
13
+ sm: "text-lg/7";
14
+ md: "text-2xl/8";
15
+ lg: "text-3xl/9";
16
+ xl: "text-5xl/none";
17
+ };
18
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
19
+ size: {
20
+ sm: "text-lg/7";
21
+ md: "text-2xl/8";
22
+ lg: "text-3xl/9";
23
+ xl: "text-5xl/none";
24
+ };
25
+ }, undefined>>;
26
+ type HeadingProps = ComponentPropsWithRef<'h1'> & VariantProps<typeof heading> & {
27
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
28
+ };
29
+ declare const Heading: ({ level, size, className, ...props }: HeadingProps) => import("react").JSX.Element;
30
+ //#endregion
31
+ export { Heading, type HeadingProps };
@@ -0,0 +1,26 @@
1
+ import { tv } from "./lib/tv.js";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Heading as Heading$1 } from "@journ/nude/heading";
4
+ //#region src/heading.tsx
5
+ const heading = tv({
6
+ base: "font-medium tracking-tight",
7
+ variants: { size: {
8
+ sm: "text-lg/7",
9
+ md: "text-2xl/8",
10
+ lg: "text-3xl/9",
11
+ xl: "text-5xl/none"
12
+ } },
13
+ defaultVariants: { size: "lg" }
14
+ });
15
+ const Heading = ({ level = 1, size, className, ...props }) => {
16
+ return /* @__PURE__ */ jsx(Heading$1, {
17
+ level,
18
+ ...props,
19
+ className: heading({
20
+ size,
21
+ class: className
22
+ })
23
+ });
24
+ };
25
+ //#endregion
26
+ export { Heading };
@@ -0,0 +1,8 @@
1
+ import { ComponentPropsWithRef } from "react";
2
+ import * as Nude from "@journ/nude/hover-card-parts";
3
+ //#region src/hover-card-parts.d.ts
4
+ declare const Root: any;
5
+ declare const Trigger: any;
6
+ declare const Content: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Content>) => import("react").JSX.Element;
7
+ //#endregion
8
+ export { Content, Root, Trigger };
@@ -0,0 +1,20 @@
1
+ "use client";
2
+ import { cn } from "./lib/cn.js";
3
+ import { usePopEnter } from "./lib/use-enter.js";
4
+ import { floatingCard } from "./lib/overlay.js";
5
+ import { jsx } from "react/jsx-runtime";
6
+ import * as Nude from "@journ/nude/hover-card-parts";
7
+ //#region src/hover-card-parts.tsx
8
+ const Root = Nude.Root;
9
+ const Trigger = Nude.Trigger;
10
+ const Content = ({ className, ...props }) => {
11
+ const panel = usePopEnter(160);
12
+ return /* @__PURE__ */ jsx(Nude.Content, {
13
+ ref: panel,
14
+ sideOffset: 8,
15
+ ...props,
16
+ className: cn(floatingCard, className)
17
+ });
18
+ };
19
+ //#endregion
20
+ export { Content, Root, Trigger };
@@ -0,0 +1,9 @@
1
+ import { Content } from "./hover-card-parts.js";
2
+ //#region src/hover-card.d.ts
3
+ declare const HoverCard: {
4
+ Root: any;
5
+ Trigger: any;
6
+ Content: typeof Content;
7
+ };
8
+ //#endregion
9
+ export { HoverCard };
@@ -0,0 +1,9 @@
1
+ import { Content, Root, Trigger } from "./hover-card-parts.js";
2
+ //#region src/hover-card.tsx
3
+ const HoverCard = {
4
+ Root,
5
+ Trigger,
6
+ Content
7
+ };
8
+ //#endregion
9
+ export { HoverCard };
@@ -0,0 +1,44 @@
1
+ import { VariantProps } from "./lib/tv.js";
2
+ import { ComponentPropsWithRef } from "react";
3
+ //#region src/icon-button.d.ts
4
+ declare const iconButton: import("tailwind-variants").TVReturnType<{
5
+ tone: {
6
+ neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
7
+ ink: "bg-bloom-ink text-bloom-paper";
8
+ coral: "bg-bloom-coral text-bloom-paper";
9
+ ghost: "bg-transparent text-inherit";
10
+ outline: "border border-current/15 bg-transparent text-inherit";
11
+ };
12
+ size: {
13
+ sm: "size-8 [&>svg]:size-4";
14
+ md: "size-9 [&>svg]:size-4";
15
+ };
16
+ }, undefined, string[], {
17
+ tone: {
18
+ neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
19
+ ink: "bg-bloom-ink text-bloom-paper";
20
+ coral: "bg-bloom-coral text-bloom-paper";
21
+ ghost: "bg-transparent text-inherit";
22
+ outline: "border border-current/15 bg-transparent text-inherit";
23
+ };
24
+ size: {
25
+ sm: "size-8 [&>svg]:size-4";
26
+ md: "size-9 [&>svg]:size-4";
27
+ };
28
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
29
+ tone: {
30
+ neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
31
+ ink: "bg-bloom-ink text-bloom-paper";
32
+ coral: "bg-bloom-coral text-bloom-paper";
33
+ ghost: "bg-transparent text-inherit";
34
+ outline: "border border-current/15 bg-transparent text-inherit";
35
+ };
36
+ size: {
37
+ sm: "size-8 [&>svg]:size-4";
38
+ md: "size-9 [&>svg]:size-4";
39
+ };
40
+ }, undefined>>;
41
+ type IconButtonProps = ComponentPropsWithRef<'button'> & VariantProps<typeof iconButton>;
42
+ declare const IconButton: ({ tone, size, className, children, type, ...props }: IconButtonProps) => import("react").JSX.Element;
43
+ //#endregion
44
+ export { IconButton, type IconButtonProps, iconButton };
@@ -0,0 +1,39 @@
1
+ import { tv } from "./lib/tv.js";
2
+ import { interactive } from "./lib/interactive.js";
3
+ import { inkTone, solidTones } from "./lib/tones.js";
4
+ import { TouchTarget } from "./touch-target.js";
5
+ import { jsx } from "react/jsx-runtime";
6
+ import { IconButton as IconButton$1 } from "@journ/nude/icon-button";
7
+ //#region src/icon-button.tsx
8
+ const iconButton = tv({
9
+ base: [interactive, "rounded-bloom grid shrink-0 place-items-center"],
10
+ variants: {
11
+ tone: {
12
+ neutral: solidTones.neutral,
13
+ ink: inkTone,
14
+ coral: solidTones.coral,
15
+ ghost: "bg-transparent text-inherit",
16
+ outline: "border border-current/15 bg-transparent text-inherit"
17
+ },
18
+ size: {
19
+ sm: "size-8 [&>svg]:size-4",
20
+ md: "size-9 [&>svg]:size-4"
21
+ }
22
+ },
23
+ defaultVariants: {
24
+ tone: "neutral",
25
+ size: "md"
26
+ }
27
+ });
28
+ const IconButton = ({ tone, size, className, children, type = "button", ...props }) => /* @__PURE__ */ jsx(IconButton$1, {
29
+ type,
30
+ ...props,
31
+ className: iconButton({
32
+ tone,
33
+ size,
34
+ class: className
35
+ }),
36
+ children: /* @__PURE__ */ jsx(TouchTarget, { children })
37
+ });
38
+ //#endregion
39
+ export { IconButton, iconButton };
package/dist/icon.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import { VariantProps } from "./lib/tv.js";
2
+ import { ComponentPropsWithRef } from "react";
3
+ //#region src/icon.d.ts
4
+ declare const icon: import("tailwind-variants").TVReturnType<{
5
+ size: {
6
+ sm: "[&>svg]:size-4";
7
+ md: "[&>svg]:size-5";
8
+ lg: "[&>svg]:size-6";
9
+ xl: "[&>svg]:size-8";
10
+ };
11
+ }, undefined, "inline-flex shrink-0 items-center justify-center", {
12
+ size: {
13
+ sm: "[&>svg]:size-4";
14
+ md: "[&>svg]:size-5";
15
+ lg: "[&>svg]:size-6";
16
+ xl: "[&>svg]:size-8";
17
+ };
18
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
19
+ size: {
20
+ sm: "[&>svg]:size-4";
21
+ md: "[&>svg]:size-5";
22
+ lg: "[&>svg]:size-6";
23
+ xl: "[&>svg]:size-8";
24
+ };
25
+ }, undefined>>;
26
+ type IconProps = ComponentPropsWithRef<'span'> & VariantProps<typeof icon>;
27
+ /** Sizes any svg child and hides it from assistive tech unless a label is given. */
28
+ declare const Icon: ({ size, className, 'aria-label': label, ...props }: IconProps) => import("react").JSX.Element;
29
+ //#endregion
30
+ export { Icon, type IconProps };
package/dist/icon.js ADDED
@@ -0,0 +1,27 @@
1
+ import { tv } from "./lib/tv.js";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Icon as Icon$1 } from "@journ/nude/icon";
4
+ //#region src/icon.tsx
5
+ const icon = tv({
6
+ base: "inline-flex shrink-0 items-center justify-center",
7
+ variants: { size: {
8
+ sm: "[&>svg]:size-4",
9
+ md: "[&>svg]:size-5",
10
+ lg: "[&>svg]:size-6",
11
+ xl: "[&>svg]:size-8"
12
+ } },
13
+ defaultVariants: { size: "md" }
14
+ });
15
+ /** Sizes any svg child and hides it from assistive tech unless a label is given. */
16
+ const Icon = ({ size, className, "aria-label": label, ...props }) => /* @__PURE__ */ jsx(Icon$1, {
17
+ role: label ? "img" : void 0,
18
+ "aria-label": label,
19
+ "aria-hidden": label ? void 0 : true,
20
+ ...props,
21
+ className: icon({
22
+ size,
23
+ class: className
24
+ })
25
+ });
26
+ //#endregion
27
+ export { Icon };
@@ -0,0 +1,96 @@
1
+ import { Accordion } from "./accordion.js";
2
+ import { VariantProps, tv } from "./lib/tv.js";
3
+ import { AlertDialog } from "./alert-dialog.js";
4
+ import { Alert } from "./alert.js";
5
+ import { AnimatedSize, AnimatedSizeProps } from "./animated-size.js";
6
+ import { Avatar } from "./avatar.js";
7
+ import { Badge } from "./badge.js";
8
+ import { Breadcrumbs } from "./breadcrumbs.js";
9
+ import { BulkBar } from "./bulk-bar.js";
10
+ import { Button, ButtonProps } from "./button.js";
11
+ import { IconButton, IconButtonProps } from "./icon-button.js";
12
+ import { CalendarActions, CalendarContextValue, CalendarMeta, CalendarState, CalendarView, RootProps, Weekday, useCalendar } from "./calendar-parts.js";
13
+ import { Calendar } from "./calendar.js";
14
+ import { Card, CardProps } from "./card.js";
15
+ import { RootProps as RootProps$1, useCarousel } from "./carousel-parts.js";
16
+ import { Carousel } from "./carousel.js";
17
+ import { Checkbox } from "./checkbox.js";
18
+ import { Chip, ChipProps as RootProps$2 } from "./chip.js";
19
+ import { Collapsible } from "./collapsible.js";
20
+ import { ComboboxActions, ComboboxContextValue, ComboboxState, RootProps as RootProps$3, useCombobox } from "./combobox-parts.js";
21
+ import { Combobox } from "./combobox.js";
22
+ import { RootProps as RootProps$4 } from "./command-palette-parts.js";
23
+ import { CommandPalette } from "./command-palette.js";
24
+ import { Composer } from "./composer.js";
25
+ import { ContextMenu } from "./context-menu.js";
26
+ import { RootProps as RootProps$5 } from "./currency-input-parts.js";
27
+ import { CurrencyInput } from "./currency-input.js";
28
+ import { DataTableColumn, RootProps as RootProps$6, dataTableColumns, selectColumn, useDataTable } from "./data-table-parts.js";
29
+ import { DataTable } from "./data-table.js";
30
+ import { DateInput } from "./date-input.js";
31
+ import { DatePickerActions, DatePickerContextValue, DatePickerMeta, DatePickerState, RootProps as RootProps$7, useDatePicker } from "./date-picker-parts.js";
32
+ import { DatePicker } from "./date-picker.js";
33
+ import { DateRange, DateRangePickerActions, DateRangePickerContextValue, DateRangePickerMeta, DateRangePickerState, RootProps as RootProps$8, useDateRangePicker } from "./date-range-picker-parts.js";
34
+ import { DateRangePicker } from "./date-range-picker.js";
35
+ import { DescriptionList } from "./description-list.js";
36
+ import { Dialog } from "./dialog.js";
37
+ import { Divider } from "./divider.js";
38
+ import { Drawer } from "./drawer.js";
39
+ import { DropdownMenu } from "./dropdown-menu.js";
40
+ import { EmptyState } from "./empty-state.js";
41
+ import { Field } from "./field.js";
42
+ import { FileRejection, RejectionReason } from "./file-dropzone-parts.js";
43
+ import { FileDropzone } from "./file-dropzone.js";
44
+ import { Heading } from "./heading.js";
45
+ import { HoverCard } from "./hover-card.js";
46
+ import { Icon } from "./icon.js";
47
+ import { Input } from "./input.js";
48
+ import { ClassValue, cn } from "./lib/cn.js";
49
+ import { Link } from "./link.js";
50
+ import { Markdown, MarkdownProps } from "./markdown.js";
51
+ import { Message } from "./message.js";
52
+ import { RootProps as RootProps$9 } from "./month-picker-parts.js";
53
+ import { MonthPicker } from "./month-picker.js";
54
+ import { MonthStepper } from "./month-stepper.js";
55
+ import { RootProps as RootProps$10, useMultipleSelector } from "./multiple-selector-parts.js";
56
+ import { MultipleSelector } from "./multiple-selector.js";
57
+ import { NavBar } from "./nav-bar.js";
58
+ import { NavigationMenu } from "./navigation-menu.js";
59
+ import { OtpInput } from "./otp-input.js";
60
+ import { Page, PageProps as RootProps$11 } from "./page.js";
61
+ import { PageHeader } from "./page-header.js";
62
+ import { Pagination } from "./pagination.js";
63
+ import { PillSelect } from "./pill-select.js";
64
+ import { Popover } from "./popover.js";
65
+ import { Portal, PortalProps } from "./portal.js";
66
+ import { Progress } from "./progress.js";
67
+ import { RootProps as RootProps$12 } from "./quantity-input-parts.js";
68
+ import { QuantityInput } from "./quantity-input.js";
69
+ import { Radio } from "./radio.js";
70
+ import { ScrollArea } from "./scroll-area.js";
71
+ import { Select } from "./select.js";
72
+ import { SheetContentProps as ContentProps, SheetSide as Side } from "./sheet-parts.js";
73
+ import { Sheet } from "./sheet.js";
74
+ import { Sidebar } from "./sidebar.js";
75
+ import { Skeleton } from "./skeleton.js";
76
+ import { Slider } from "./slider.js";
77
+ import { Spinner } from "./spinner.js";
78
+ import { Stack } from "./stack.js";
79
+ import { Stat } from "./stat.js";
80
+ import { Stepper } from "./stepper.js";
81
+ import { Switch } from "./switch.js";
82
+ import { Table } from "./table.js";
83
+ import { Tabs } from "./tabs.js";
84
+ import { RootProps as RootProps$13, useTagInput } from "./tag-input-parts.js";
85
+ import { TagInput } from "./tag-input.js";
86
+ import { Text } from "./text.js";
87
+ import { TextMorph, TextMorphProps } from "./text-morph.js";
88
+ import { TextShimmer, TextShimmerProps } from "./text-shimmer.js";
89
+ import { Textarea } from "./textarea.js";
90
+ import { RootProps as RootProps$14, TimeRangeValue } from "./time-range-parts.js";
91
+ import { TimeRange } from "./time-range.js";
92
+ import { Toast } from "./toast.js";
93
+ import { ToggleGroup } from "./toggle-group.js";
94
+ import { Tooltip } from "./tooltip.js";
95
+ import { TouchTarget } from "./touch-target.js";
96
+ export { Accordion, Alert, AlertDialog, AnimatedSize, type AnimatedSizeProps, Avatar, Badge, Breadcrumbs, BulkBar, Button, type ButtonProps, Calendar, type CalendarActions, type CalendarContextValue, type CalendarMeta, type RootProps as CalendarProps, type CalendarState, type CalendarView, Card, type CardProps, Carousel, type RootProps$1 as CarouselProps, Checkbox, Chip, type RootProps$2 as ChipProps, type ClassValue, Collapsible, Combobox, type ComboboxActions, type ComboboxContextValue, type RootProps$3 as ComboboxProps, type ComboboxState, CommandPalette, type RootProps$4 as CommandPaletteProps, Composer, ContextMenu, CurrencyInput, type RootProps$5 as CurrencyInputProps, DataTable, type DataTableColumn, type RootProps$6 as DataTableProps, DateInput, DatePicker, type DatePickerActions, type DatePickerContextValue, type DatePickerMeta, type RootProps$7 as DatePickerProps, type DatePickerState, type DateRange, DateRangePicker, type DateRangePickerActions, type DateRangePickerContextValue, type DateRangePickerMeta, type RootProps$8 as DateRangePickerProps, type DateRangePickerState, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, type FileRejection, Heading, HoverCard, Icon, IconButton, type IconButtonProps, Input, Link, Markdown, type MarkdownProps, Message, MonthPicker, type RootProps$9 as MonthPickerProps, MonthStepper, MultipleSelector, type RootProps$10 as MultipleSelectorProps, NavBar, NavigationMenu, OtpInput, Page, PageHeader, type RootProps$11 as PageProps, Pagination, PillSelect, Popover, Portal, type PortalProps, Progress, QuantityInput, type RootProps$12 as QuantityInputProps, Radio, type RejectionReason, ScrollArea, Select, Sheet, type ContentProps as SheetContentProps, type Side as SheetSide, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, type RootProps$13 as TagInputProps, Text, TextMorph, type TextMorphProps, TextShimmer, type TextShimmerProps, Textarea, TimeRange, type RootProps$14 as TimeRangeProps, type TimeRangeValue, Toast, ToggleGroup, Tooltip, TouchTarget, type VariantProps, type Weekday, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };
package/dist/index.js ADDED
@@ -0,0 +1,89 @@
1
+ import { tv } from "./lib/tv.js";
2
+ import { cn } from "./lib/cn.js";
3
+ import { Accordion } from "./accordion.js";
4
+ import { AlertDialog } from "./alert-dialog.js";
5
+ import { Alert } from "./alert.js";
6
+ import { AnimatedSize } from "./animated-size.js";
7
+ import { Avatar } from "./avatar.js";
8
+ import { Badge } from "./badge.js";
9
+ import { Breadcrumbs } from "./breadcrumbs.js";
10
+ import { BulkBar } from "./bulk-bar.js";
11
+ import { Spinner } from "./spinner.js";
12
+ import { TouchTarget } from "./touch-target.js";
13
+ import { Button } from "./button.js";
14
+ import { IconButton } from "./icon-button.js";
15
+ import { useCalendar } from "./calendar-parts.js";
16
+ import { Calendar } from "./calendar.js";
17
+ import { Card } from "./card.js";
18
+ import { useCarousel } from "./carousel-parts.js";
19
+ import { Carousel } from "./carousel.js";
20
+ import { Checkbox } from "./checkbox.js";
21
+ import { Chip } from "./chip.js";
22
+ import { Collapsible } from "./collapsible.js";
23
+ import { useCombobox } from "./combobox-parts.js";
24
+ import { Combobox } from "./combobox.js";
25
+ import { CommandPalette } from "./command-palette.js";
26
+ import { Composer } from "./composer.js";
27
+ import { ContextMenu } from "./context-menu.js";
28
+ import { Input } from "./input.js";
29
+ import { CurrencyInput } from "./currency-input.js";
30
+ import { Pagination } from "./pagination.js";
31
+ import { Table } from "./table.js";
32
+ import { dataTableColumns, selectColumn, useDataTable } from "./data-table-parts.js";
33
+ import { DataTable } from "./data-table.js";
34
+ import { DateInput } from "./date-input.js";
35
+ import { useDatePicker } from "./date-picker-parts.js";
36
+ import { DatePicker } from "./date-picker.js";
37
+ import { useDateRangePicker } from "./date-range-picker-parts.js";
38
+ import { DateRangePicker } from "./date-range-picker.js";
39
+ import { DescriptionList } from "./description-list.js";
40
+ import { Dialog } from "./dialog.js";
41
+ import { Divider } from "./divider.js";
42
+ import { Drawer } from "./drawer.js";
43
+ import { DropdownMenu } from "./dropdown-menu.js";
44
+ import { EmptyState } from "./empty-state.js";
45
+ import { Field } from "./field.js";
46
+ import { FileDropzone } from "./file-dropzone.js";
47
+ import { Heading } from "./heading.js";
48
+ import { HoverCard } from "./hover-card.js";
49
+ import { Icon } from "./icon.js";
50
+ import { Link } from "./link.js";
51
+ import { Markdown } from "./markdown.js";
52
+ import { Message } from "./message.js";
53
+ import { MonthPicker } from "./month-picker.js";
54
+ import { MonthStepper } from "./month-stepper.js";
55
+ import { useMultipleSelector } from "./multiple-selector-parts.js";
56
+ import { MultipleSelector } from "./multiple-selector.js";
57
+ import { NavBar } from "./nav-bar.js";
58
+ import { NavigationMenu } from "./navigation-menu.js";
59
+ import { OtpInput } from "./otp-input.js";
60
+ import { Page } from "./page.js";
61
+ import { PageHeader } from "./page-header.js";
62
+ import { PillSelect } from "./pill-select.js";
63
+ import { Popover } from "./popover.js";
64
+ import { Portal } from "./portal.js";
65
+ import { Progress } from "./progress.js";
66
+ import { QuantityInput } from "./quantity-input.js";
67
+ import { Radio } from "./radio.js";
68
+ import { ScrollArea } from "./scroll-area.js";
69
+ import { Select } from "./select.js";
70
+ import { Sheet } from "./sheet.js";
71
+ import { Sidebar } from "./sidebar.js";
72
+ import { Skeleton } from "./skeleton.js";
73
+ import { Slider } from "./slider.js";
74
+ import { Stack } from "./stack.js";
75
+ import { Stat } from "./stat.js";
76
+ import { Stepper } from "./stepper.js";
77
+ import { Switch } from "./switch.js";
78
+ import { Tabs } from "./tabs.js";
79
+ import { useTagInput } from "./tag-input-parts.js";
80
+ import { TagInput } from "./tag-input.js";
81
+ import { Text } from "./text.js";
82
+ import { TextMorph } from "./text-morph.js";
83
+ import { TextShimmer } from "./text-shimmer.js";
84
+ import { Textarea } from "./textarea.js";
85
+ import { TimeRange } from "./time-range.js";
86
+ import { Toast } from "./toast.js";
87
+ import { ToggleGroup } from "./toggle-group.js";
88
+ import { Tooltip } from "./tooltip.js";
89
+ export { Accordion, Alert, AlertDialog, AnimatedSize, Avatar, Badge, Breadcrumbs, BulkBar, Button, Calendar, Card, Carousel, Checkbox, Chip, Collapsible, Combobox, CommandPalette, Composer, ContextMenu, CurrencyInput, DataTable, DateInput, DatePicker, DateRangePicker, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, Heading, HoverCard, Icon, IconButton, Input, Link, Markdown, Message, MonthPicker, MonthStepper, MultipleSelector, NavBar, NavigationMenu, OtpInput, Page, PageHeader, Pagination, PillSelect, Popover, Portal, Progress, QuantityInput, Radio, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, Text, TextMorph, TextShimmer, Textarea, TimeRange, Toast, ToggleGroup, Tooltip, TouchTarget, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };
@@ -0,0 +1,7 @@
1
+ import { ComponentPropsWithRef } from "react";
2
+ //#region src/input.d.ts
3
+ declare const field = "block w-full rounded-bloom px-3 border border-bloom-line dark:border-bloom-line-dark bg-transparent text-bloom-foreground dark:text-bloom-foreground-dark py-2.5 text-base/6 sm:py-1.5 sm:text-sm/6 placeholder:text-current/40 scheme-light dark:scheme-dark outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky aria-invalid:border-bloom-coral disabled:opacity-50";
4
+ declare const input: (className?: string) => string;
5
+ declare const Input: ({ className, ...props }: ComponentPropsWithRef<'input'>) => import("react").JSX.Element;
6
+ //#endregion
7
+ export { Input, field, input };
package/dist/input.js ADDED
@@ -0,0 +1,14 @@
1
+ import { cn } from "./lib/cn.js";
2
+ import { controlSize, fieldRing, fieldText } from "./lib/text-styles.js";
3
+ import { control } from "./lib/theme.js";
4
+ import { jsx } from "react/jsx-runtime";
5
+ import { Input as Input$1 } from "@journ/nude/input";
6
+ //#region src/input.tsx
7
+ const field = `block w-full rounded-bloom px-3 ${control} ${controlSize} ${fieldText} ${fieldRing}`;
8
+ const input = (className) => cn(field, className);
9
+ const Input = ({ className, ...props }) => /* @__PURE__ */ jsx(Input$1, {
10
+ ...props,
11
+ className: input(className)
12
+ });
13
+ //#endregion
14
+ export { Input, field, input };
@@ -0,0 +1,6 @@
1
+ //#region src/lib/cn.d.ts
2
+ type ClassValue = string | null | undefined | false | ClassValue[];
3
+ /** Joins class names; later Tailwind utilities win over earlier ones in the same group. */
4
+ declare const cn: (...args: ClassValue[]) => string;
5
+ //#endregion
6
+ export { type ClassValue, cn };
package/dist/lib/cn.js ADDED
@@ -0,0 +1,7 @@
1
+ import { tv } from "./tv.js";
2
+ //#region src/lib/cn.ts
3
+ const cnClasses = tv({ base: [] });
4
+ /** Joins class names; later Tailwind utilities win over earlier ones in the same group. */
5
+ const cn = (...args) => cnClasses({ class: [args] }) ?? "";
6
+ //#endregion
7
+ export { cn };
@@ -0,0 +1,32 @@
1
+ //#region src/lib/icon-tile.d.ts
2
+ /** A bordered square that holds an icon: card icons, empty states, dropzones. */
3
+ declare const iconTile: import("tailwind-variants").TVReturnType<{
4
+ size: {
5
+ md: "size-10 [&>svg]:size-5";
6
+ lg: "size-12 [&>svg]:size-6";
7
+ };
8
+ tone: {
9
+ outline: "border border-bloom-line dark:border-bloom-line-dark";
10
+ soft: "bg-current/8";
11
+ };
12
+ }, undefined, "grid shrink-0 place-items-center", {
13
+ size: {
14
+ md: "size-10 [&>svg]:size-5";
15
+ lg: "size-12 [&>svg]:size-6";
16
+ };
17
+ tone: {
18
+ outline: "border border-bloom-line dark:border-bloom-line-dark";
19
+ soft: "bg-current/8";
20
+ };
21
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
22
+ size: {
23
+ md: "size-10 [&>svg]:size-5";
24
+ lg: "size-12 [&>svg]:size-6";
25
+ };
26
+ tone: {
27
+ outline: "border border-bloom-line dark:border-bloom-line-dark";
28
+ soft: "bg-current/8";
29
+ };
30
+ }, undefined>>;
31
+ //#endregion
32
+ export { iconTile };
@@ -0,0 +1,23 @@
1
+ import { tv } from "./tv.js";
2
+ import { line } from "./theme.js";
3
+ //#region src/lib/icon-tile.ts
4
+ /** A bordered square that holds an icon: card icons, empty states, dropzones. */
5
+ const iconTile = tv({
6
+ base: "grid shrink-0 place-items-center",
7
+ variants: {
8
+ size: {
9
+ md: "size-10 [&>svg]:size-5",
10
+ lg: "size-12 [&>svg]:size-6"
11
+ },
12
+ tone: {
13
+ outline: `border ${line}`,
14
+ soft: "bg-current/8"
15
+ }
16
+ },
17
+ defaultVariants: {
18
+ size: "md",
19
+ tone: "outline"
20
+ }
21
+ });
22
+ //#endregion
23
+ export { iconTile };
@@ -0,0 +1,11 @@
1
+ //#region src/lib/interactive.d.ts
2
+ /**
3
+ * Shared affordances for anything pressable: keyboard-only focus ring, a
4
+ * currentColor hover/press overlay that sits between the background and the
5
+ * content, and a dimmed disabled state. Flat: nothing moves on press.
6
+ */
7
+ /** Stops text selection and the iOS tap flash on controls that are pressed, not read. */
8
+ declare const pressReset = "select-none [-webkit-tap-highlight-color:transparent]";
9
+ declare const interactive: string;
10
+ //#endregion
11
+ export { interactive, pressReset };