@justanarthur/modo-ui 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 (175) hide show
  1. package/README.md +18 -15
  2. package/dist/blocks/sidebar-app/index.d.ts +1 -1
  3. package/dist/blocks/sidebar-app/index.js +28 -31
  4. package/dist/components/{inputs → AI}/input-message/index.d.ts +1 -1
  5. package/dist/components/AI/input-message/index.js +25 -0
  6. package/dist/components/{thinking-indicator → AI/thinking-indicator}/index.d.ts +1 -1
  7. package/dist/components/AI/thinking-indicator/index.js +13 -0
  8. package/dist/components/{navigation/accordion → accordion}/index.d.ts +1 -1
  9. package/dist/components/accordion/index.js +28 -0
  10. package/dist/components/badge/index.d.ts +1 -1
  11. package/dist/components/badge/index.js +12 -14
  12. package/dist/components/button/index.d.ts +1 -1
  13. package/dist/components/button/index.js +10 -12
  14. package/dist/components/card/index.d.ts +1 -1
  15. package/dist/components/card/index.js +38 -40
  16. package/dist/components/{inputs/input-copy → copy}/index.d.ts +7 -7
  17. package/dist/components/copy/index.js +16 -0
  18. package/dist/components/inputs/checkbox/index.d.ts +62 -0
  19. package/dist/components/inputs/checkbox/index.js +22 -0
  20. package/dist/components/inputs/color-picker/index.d.ts +1 -1
  21. package/dist/components/inputs/color-picker/index.js +31 -33
  22. package/dist/components/inputs/combobox/index.d.ts +2 -2
  23. package/dist/components/inputs/combobox/index.js +31 -34
  24. package/dist/components/inputs/date-time/calendar/index.d.ts +1 -1
  25. package/dist/components/inputs/date-time/calendar/index.js +14 -16
  26. package/dist/components/inputs/date-time/date-picker/index.d.ts +1 -1
  27. package/dist/components/inputs/date-time/date-picker/index.js +28 -30
  28. package/dist/components/inputs/date-time/date-range-picker/index.d.ts +1 -1
  29. package/dist/components/inputs/date-time/date-range-picker/index.js +27 -29
  30. package/dist/components/inputs/date-time/duration-picker/index.d.ts +1 -1
  31. package/dist/components/inputs/date-time/duration-picker/index.js +27 -29
  32. package/dist/components/inputs/date-time/month-picker/index.d.ts +1 -1
  33. package/dist/components/inputs/date-time/month-picker/index.js +26 -28
  34. package/dist/components/inputs/date-time/time-picker/index.d.ts +1 -1
  35. package/dist/components/inputs/date-time/time-picker/index.js +27 -29
  36. package/dist/components/inputs/input/index.d.ts +1 -1
  37. package/dist/components/inputs/input/index.js +15 -16
  38. package/dist/components/inputs/{radio-group → radio}/index.d.ts +30 -30
  39. package/dist/components/inputs/radio/index.js +21 -0
  40. package/dist/components/inputs/search/index.d.ts +1 -1
  41. package/dist/components/inputs/search/index.js +21 -24
  42. package/dist/components/inputs/select/index.d.ts +1 -1
  43. package/dist/components/inputs/select/index.js +30 -33
  44. package/dist/components/inputs/slider/index.d.ts +1 -1
  45. package/dist/components/inputs/slider/index.js +10 -12
  46. package/dist/components/inputs/switch/index.d.ts +27 -6
  47. package/dist/components/inputs/switch/index.js +17 -12
  48. package/dist/components/navigation/sidebar/index.d.ts +3 -3
  49. package/dist/components/navigation/sidebar/index.js +95 -97
  50. package/dist/components/navigation/tabs/index.d.ts +1 -1
  51. package/dist/components/navigation/tabs/index.js +19 -21
  52. package/dist/components/navigation/tabs-subtle/index.d.ts +1 -1
  53. package/dist/components/navigation/tabs-subtle/index.js +17 -19
  54. package/dist/components/overlays/alert-dialog/index.d.ts +2 -2
  55. package/dist/components/overlays/alert-dialog/index.js +18 -20
  56. package/dist/components/overlays/command/index.d.ts +1 -1
  57. package/dist/components/overlays/command/index.js +32 -35
  58. package/dist/components/overlays/context-menu/index.d.ts +1 -1
  59. package/dist/components/overlays/context-menu/index.js +25 -28
  60. package/dist/components/overlays/dialog/index.d.ts +1 -1
  61. package/dist/components/overlays/dialog/index.js +33 -35
  62. package/dist/components/overlays/dropdown/index.d.ts +3 -3
  63. package/dist/components/overlays/dropdown/index.js +40 -43
  64. package/dist/components/overlays/popover/index.d.ts +1 -1
  65. package/dist/components/overlays/popover/index.js +22 -24
  66. package/dist/components/overlays/preview-card/index.d.ts +1 -1
  67. package/dist/components/overlays/preview-card/index.js +15 -17
  68. package/dist/components/overlays/sheet/index.d.ts +1 -1
  69. package/dist/components/overlays/sheet/index.js +20 -22
  70. package/dist/components/overlays/toast/index.d.ts +1 -1
  71. package/dist/components/overlays/toast/index.js +17 -19
  72. package/dist/components/overlays/tooltip/index.d.ts +1 -1
  73. package/dist/components/overlays/tooltip/index.js +13 -15
  74. package/dist/components/table/index.d.ts +1 -1
  75. package/dist/components/table/index.js +22 -24
  76. package/dist/index.d.ts +828 -795
  77. package/dist/index.js +509 -508
  78. package/dist/preset.d.ts +1 -1
  79. package/dist/preset.js +5 -5
  80. package/dist/primitives/code/index.d.ts +1 -1
  81. package/dist/primitives/code/index.js +8 -9
  82. package/dist/primitives/craft/index.d.ts +1 -1
  83. package/dist/primitives/craft/index.js +6 -8
  84. package/dist/primitives/fluid-hover/index.d.ts +1 -1
  85. package/dist/primitives/fluid-hover/index.js +18 -20
  86. package/dist/primitives/morph/index.d.ts +3 -3
  87. package/dist/primitives/morph/index.js +15 -17
  88. package/dist/primitives/motion/index.d.ts +1 -1
  89. package/dist/primitives/motion/index.js +15 -16
  90. package/dist/primitives/scroll-area/index.d.ts +1 -1
  91. package/dist/primitives/scroll-area/index.js +8 -9
  92. package/dist/primitives/sizes/index.d.ts +3 -3
  93. package/dist/primitives/sizes/index.js +17 -18
  94. package/dist/primitives/surface/index.d.ts +1 -1
  95. package/dist/primitives/surface/index.js +11 -12
  96. package/dist/shared/{components-jxgznftn.js → components-0q0sqfh4.js} +16 -16
  97. package/dist/shared/{components-x3rz4cyn.js → components-0sn7ypjw.js} +14 -14
  98. package/dist/shared/components-1434p1mh.js +123 -0
  99. package/dist/shared/{components-vc1k7yv2.js → components-1v7rxytx.js} +3 -3
  100. package/dist/shared/{components-6phwsry6.js → components-1z6tdadk.js} +25 -25
  101. package/dist/shared/{components-5zry9te1.js → components-27nnvrwe.js} +27 -27
  102. package/dist/shared/{components-ess3ch6w.js → components-2dxkv6zm.js} +23 -23
  103. package/dist/shared/{components-s5pkbjx1.js → components-2n3whx7z.js} +56 -56
  104. package/dist/shared/{components-v7es8aan.js → components-2nhgyh31.js} +15 -15
  105. package/dist/shared/{components-6t6nr33r.js → components-39jq9va1.js} +26 -26
  106. package/dist/shared/{components-4hh0gm0v.js → components-39vmfq9s.js} +61 -61
  107. package/dist/shared/{components-zx2hr57f.js → components-3fbbvq5j.js} +15 -15
  108. package/dist/shared/{components-6y1th6k4.js → components-3mkepka5.js} +31 -31
  109. package/dist/shared/{components-e46kf6cp.js → components-59efxjd9.js} +8 -8
  110. package/dist/shared/{components-rc63qsy6.js → components-5xc2j8jz.js} +10 -10
  111. package/dist/shared/{components-hzfp4tjb.js → components-7btqt08d.js} +42 -42
  112. package/dist/shared/{components-9p8s8n5q.js → components-7r3etddy.js} +22 -22
  113. package/dist/shared/{components-j65qt1mq.js → components-8ey44d79.js} +101 -101
  114. package/dist/shared/{components-hjkrv00c.js → components-8snj490h.js} +120 -23
  115. package/dist/shared/{components-40j34hdb.js → components-a86dytt0.js} +116 -116
  116. package/dist/shared/{components-tm88ghva.js → components-ar66gnt0.js} +58 -58
  117. package/dist/shared/{components-5pkcfprd.js → components-b2wyq2cq.js} +22 -22
  118. package/dist/shared/{components-vktws5r6.js → components-b3c5et5b.js} +73 -73
  119. package/dist/shared/{components-4xxtggzp.js → components-bshdmf75.js} +18 -18
  120. package/dist/shared/{components-kf2ehztc.js → components-chacnk61.js} +16 -16
  121. package/dist/shared/{components-7zp99w5d.js → components-cv16mryv.js} +2 -2
  122. package/dist/shared/{components-gjfrycb5.js → components-d6xtjht3.js} +66 -69
  123. package/dist/shared/{components-aaq3yk4f.js → components-dk0gjr5a.js} +43 -43
  124. package/dist/shared/{components-0f0as45n.js → components-ezxhrmer.js} +2 -2
  125. package/dist/shared/{components-7gv95yfy.js → components-frw34b65.js} +83 -83
  126. package/dist/shared/{components-s3yfvfkr.js → components-gc5vtq2f.js} +42 -42
  127. package/dist/shared/components-gf5s6ap9.js +42 -0
  128. package/dist/shared/{components-7cqq1sqy.js → components-gvr9w41t.js} +40 -40
  129. package/dist/shared/{components-x2xyckd5.js → components-gz8zf3ec.js} +20 -20
  130. package/dist/shared/{components-ed7cmssr.js → components-hawvy2qz.js} +18 -18
  131. package/dist/shared/{components-7nww01w4.js → components-hqeq3w9q.js} +34 -34
  132. package/dist/shared/{components-zvb11ker.js → components-hw9yk32z.js} +47 -47
  133. package/dist/shared/{components-y3cqdrgy.js → components-hyq23phv.js} +73 -54
  134. package/dist/shared/{components-bf2d9k02.js → components-jbbmdr74.js} +94 -94
  135. package/dist/shared/{components-vb033rns.js → components-jjw69c4c.js} +6 -6
  136. package/dist/shared/{components-r2gke5p6.js → components-jthe1pwb.js} +125 -125
  137. package/dist/shared/{components-tad5h7ta.js → components-jwst3vtj.js} +48 -48
  138. package/dist/shared/{components-xszag63d.js → components-k809mbn0.js} +12 -12
  139. package/dist/shared/{components-r22vtgqc.js → components-kvr7f9hy.js} +11 -11
  140. package/dist/shared/{components-r4jt6hgd.js → components-mjthm1kf.js} +6 -6
  141. package/dist/shared/{components-nn6xezy2.js → components-nb87fjy4.js} +226 -226
  142. package/dist/shared/{components-gndm6am4.js → components-ng72k97e.js} +17 -17
  143. package/dist/shared/{components-54nf2x99.js → components-pbmqctfa.js} +52 -45
  144. package/dist/shared/{components-peg09pzs.js → components-q5xj5c16.js} +11 -11
  145. package/dist/shared/{components-taxmgbnh.js → components-re6rs21k.js} +17 -17
  146. package/dist/shared/{components-r43mqnd6.js → components-rr7a6ja9.js} +46 -46
  147. package/dist/shared/{components-p2vmyfe1.js → components-s083f38z.js} +43 -43
  148. package/dist/shared/{components-bkvb6nem.js → components-s2bz1xpk.js} +11 -11
  149. package/dist/shared/components-ta7shw28.js +19 -0
  150. package/dist/shared/components-vc7vq5nz.js +32 -0
  151. package/dist/shared/{components-6hzwfmfd.js → components-vfbhxf5r.js} +8 -8
  152. package/dist/shared/{components-8hk9ve3r.js → components-wvp1m52g.js} +57 -57
  153. package/dist/shared/{components-brnzrp2t.js → components-xxvdw7k1.js} +41 -41
  154. package/dist/shared/{components-61ckf42z.js → components-zfnmn5d4.js} +64 -64
  155. package/dist/shared/{components-m5br529r.js → components-zrkzcayz.js} +2 -2
  156. package/dist/shared/{components-csxz9f52.js → components-zx6b6yby.js} +4 -4
  157. package/dist/styles.css +1 -1
  158. package/package.json +3 -3
  159. package/dist/components/inputs/checkbox-group/index.d.ts +0 -50
  160. package/dist/components/inputs/checkbox-group/index.js +0 -23
  161. package/dist/components/inputs/input-copy/index.js +0 -18
  162. package/dist/components/inputs/input-message/index.js +0 -27
  163. package/dist/components/inputs/radio-group/index.js +0 -22
  164. package/dist/components/navigation/accordion/index.js +0 -30
  165. package/dist/components/thinking-indicator/index.js +0 -15
  166. package/dist/shared/components-74c20v2f.js +0 -32
  167. package/dist/shared/components-8hzbsfbd.js +0 -123
  168. package/dist/shared/components-dphg9gjr.js +0 -42
  169. package/dist/shared/components-kpbcms10.js +0 -9
  170. /package/dist/shared/{components-5vxtcp88.js → components-3ky44908.js} +0 -0
  171. /package/dist/shared/{components-4xxddc44.js → components-c6s6b43g.js} +0 -0
  172. /package/dist/shared/{components-nnnd2xef.js → components-men63rwj.js} +0 -0
  173. /package/dist/shared/{components-de8xsm9y.js → components-mhd39z7x.js} +0 -0
  174. /package/dist/shared/{components-dg0w8g5p.js → components-n7mjr357.js} +0 -0
  175. /package/dist/shared/{components-jw16snbn.js → components-vynjtrk6.js} +0 -0
@@ -1,39 +1,39 @@
1
- import {
2
- slotRender
3
- } from "./components-5vxtcp88.js";
4
- import {
5
- Button
6
- } from "./components-5pkcfprd.js";
7
1
  import {
8
2
  useIcon
9
- } from "./components-m5br529r.js";
10
- import {
11
- SURFACE_BG,
12
- SURFACE_SHADOW,
13
- SurfaceProvider,
14
- useSurface
15
- } from "./components-csxz9f52.js";
3
+ } from "./components-zrkzcayz.js";
16
4
  import {
17
5
  MorphPartScope,
18
6
  MorphSurface
19
- } from "./components-jxgznftn.js";
7
+ } from "./components-0q0sqfh4.js";
8
+ import {
9
+ useMorphOrigin,
10
+ useMorph
11
+ } from "./components-hqeq3w9q.js";
12
+ import {
13
+ cn2
14
+ } from "./components-ezxhrmer.js";
20
15
  import {
21
16
  useShape
22
- } from "./components-7zp99w5d.js";
17
+ } from "./components-cv16mryv.js";
23
18
  import {
24
- useControllableState
25
- } from "./components-dg0w8g5p.js";
19
+ useSizeVariant2,
20
+ useSize2
21
+ } from "./components-0sn7ypjw.js";
26
22
  import {
27
- useMorph,
28
- useMorphOrigin
29
- } from "./components-7nww01w4.js";
23
+ slotRender
24
+ } from "./components-3ky44908.js";
30
25
  import {
31
- useSize,
32
- useSizeVariant
33
- } from "./components-x3rz4cyn.js";
26
+ SURFACE_BG,
27
+ SURFACE_SHADOW,
28
+ useSurface2,
29
+ SurfaceProvider2
30
+ } from "./components-zx6b6yby.js";
31
+ import {
32
+ useControllableState
33
+ } from "./components-n7mjr357.js";
34
34
  import {
35
- cn
36
- } from "./components-0f0as45n.js";
35
+ Button2
36
+ } from "./components-b2wyq2cq.js";
37
37
 
38
38
  // components/overlays/dialog/index.tsx
39
39
  import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
@@ -52,8 +52,8 @@ var DialogContext = createContext({
52
52
  open: false,
53
53
  origin: { current: {} }
54
54
  });
55
- var useDialogState = () => useContext(DialogContext);
56
- var DialogTrigger = forwardRef(({ render, asChild, children, ...props }, ref) => {
55
+ var useDialogState2 = () => useContext(DialogContext);
56
+ var DialogTrigger2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
57
57
  const el = slotRender(render, asChild, children);
58
58
  return el ? /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
59
59
  ref,
@@ -65,8 +65,8 @@ var DialogTrigger = forwardRef(({ render, asChild, children, ...props }, ref) =>
65
65
  children
66
66
  });
67
67
  });
68
- DialogTrigger.displayName = "DialogTrigger";
69
- var DialogClose = forwardRef(({ render, asChild, children, ...props }, ref) => {
68
+ DialogTrigger2.displayName = "DialogTrigger";
69
+ var DialogClose2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
70
70
  const el = slotRender(render, asChild, children);
71
71
  return el ? /* @__PURE__ */ jsx(DialogPrimitive.Close, {
72
72
  ref,
@@ -78,8 +78,8 @@ var DialogClose = forwardRef(({ render, asChild, children, ...props }, ref) => {
78
78
  children
79
79
  });
80
80
  });
81
- DialogClose.displayName = "DialogClose";
82
- var DialogContent = forwardRef(({
81
+ DialogClose2.displayName = "DialogClose";
82
+ var DialogContent2 = forwardRef(({
83
83
  className,
84
84
  children,
85
85
  size = "sm",
@@ -94,10 +94,10 @@ var DialogContent = forwardRef(({
94
94
  }, ref) => {
95
95
  const XIcon = useIcon("x");
96
96
  const shape = useShape();
97
- const substrate = useSurface();
97
+ const substrate = useSurface2();
98
98
  const dialogLevel = Math.min(substrate + DIALOG_OFFSET, 8);
99
- const compact = useSize().variant === "compact";
100
- const { open, origin } = useDialogState();
99
+ const compact = useSize2().variant === "compact";
100
+ const { open, origin } = useDialogState2();
101
101
  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
102
102
  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
103
103
  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, {
@@ -107,24 +107,24 @@ var DialogContent = forwardRef(({
107
107
  render: /* @__PURE__ */ jsx(motion.div, {
108
108
  style: { opacity: morph.progress }
109
109
  }),
110
- className: cn(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
110
+ className: cn2(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
111
111
  }),
112
112
  /* @__PURE__ */ jsx(DialogPrimitive.Popup, {
113
113
  ref: morph.popupRef,
114
114
  ...props,
115
- className: cn(container ? "absolute" : "fixed", "left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none", position === "top" ? "top-[12dvh]" : "top-1/2 -translate-y-1/2", size === "sm" && (compact ? "max-w-[360px]" : "max-w-[400px]"), size === "lg" && (compact ? "max-w-[480px]" : "max-w-[540px]"), size === "xl" && (compact ? "max-w-[800px]" : "max-w-[880px]")),
116
- children: /* @__PURE__ */ jsx(SurfaceProvider, {
115
+ className: cn2(container ? "absolute" : "fixed", "left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none", position === "top" ? "top-[12dvh]" : "top-1/2 -translate-y-1/2", size === "sm" && (compact ? "max-w-[360px]" : "max-w-[400px]"), size === "lg" && (compact ? "max-w-[480px]" : "max-w-[540px]"), size === "xl" && (compact ? "max-w-[800px]" : "max-w-[880px]")),
116
+ children: /* @__PURE__ */ jsx(SurfaceProvider2, {
117
117
  value: dialogLevel,
118
118
  children: /* @__PURE__ */ jsxs(MorphSurface, {
119
119
  morph,
120
120
  bg: SURFACE_BG[dialogLevel],
121
121
  shadow: SURFACE_SHADOW[dialogLevel],
122
122
  radius: shape.container,
123
- className: cn("p-6", className),
123
+ className: cn2("p-6", className),
124
124
  children: [
125
125
  children,
126
126
  showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
127
- render: /* @__PURE__ */ jsxs(Button, {
127
+ render: /* @__PURE__ */ jsxs(Button2, {
128
128
  variant: "ghost",
129
129
  size: "icon-sm",
130
130
  className: "absolute right-3 top-3",
@@ -144,38 +144,38 @@ var DialogContent = forwardRef(({
144
144
  ]
145
145
  });
146
146
  });
147
- DialogContent.displayName = "DialogContent";
148
- function DialogHeader({ className, ...props }) {
147
+ DialogContent2.displayName = "DialogContent";
148
+ function DialogHeader2({ className, ...props }) {
149
149
  return /* @__PURE__ */ jsx("div", {
150
- className: cn("flex flex-col gap-1.5 mb-4", className),
150
+ className: cn2("flex flex-col gap-1.5 mb-4", className),
151
151
  ...props
152
152
  });
153
153
  }
154
- function DialogFooter({ className, ...props }) {
154
+ function DialogFooter2({ className, ...props }) {
155
155
  return /* @__PURE__ */ jsx("div", {
156
- className: cn("flex justify-end gap-2 mt-6", className),
156
+ className: cn2("flex justify-end gap-2 mt-6", className),
157
157
  ...props
158
158
  });
159
159
  }
160
- var DialogTitle = forwardRef(({ className, ...props }, ref) => {
161
- const compact = useSizeVariant() === "compact";
160
+ var DialogTitle2 = forwardRef(({ className, ...props }, ref) => {
161
+ const compact = useSizeVariant2() === "compact";
162
162
  return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
163
163
  ref,
164
- className: cn(compact ? "text-title-compact" : "text-title", "weight-bold text-foreground leading-tight", className),
164
+ className: cn2(compact ? "text-title-compact" : "text-title", "weight-bold text-foreground leading-tight", className),
165
165
  ...props
166
166
  });
167
167
  });
168
- DialogTitle.displayName = "DialogTitle";
169
- var DialogDescription = forwardRef(({ className, ...props }, ref) => {
170
- const compact = useSizeVariant() === "compact";
168
+ DialogTitle2.displayName = "DialogTitle";
169
+ var DialogDescription2 = forwardRef(({ className, ...props }, ref) => {
170
+ const compact = useSizeVariant2() === "compact";
171
171
  return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
172
172
  ref,
173
- className: cn(compact ? "text-body-compact" : "text-body", "text-muted-foreground", className),
173
+ className: cn2(compact ? "text-body-compact" : "text-body", "text-muted-foreground", className),
174
174
  ...props
175
175
  });
176
176
  });
177
- DialogDescription.displayName = "DialogDescription";
178
- function DialogState({ open, defaultOpen = false, onOpenChange, children }) {
177
+ DialogDescription2.displayName = "DialogDescription";
178
+ function DialogState2({ open, defaultOpen = false, onOpenChange, children }) {
179
179
  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
180
180
  const { origin, capture } = useMorphOrigin();
181
181
  const id = useId();
@@ -196,8 +196,8 @@ function DialogState({ open, defaultOpen = false, onOpenChange, children }) {
196
196
  })
197
197
  });
198
198
  }
199
- function Dialog({ children, open, defaultOpen, onOpenChange, modal }) {
200
- return /* @__PURE__ */ jsx(DialogState, {
199
+ function Dialog2({ children, open, defaultOpen, onOpenChange, modal }) {
200
+ return /* @__PURE__ */ jsx(DialogState2, {
201
201
  open,
202
202
  defaultOpen,
203
203
  onOpenChange,
@@ -208,13 +208,13 @@ function Dialog({ children, open, defaultOpen, onOpenChange, modal }) {
208
208
  })
209
209
  });
210
210
  }
211
- Dialog.Trigger = DialogTrigger;
212
- Dialog.Content = DialogContent;
213
- Dialog.Header = DialogHeader;
214
- Dialog.Footer = DialogFooter;
215
- Dialog.Title = DialogTitle;
216
- Dialog.Description = DialogDescription;
217
- Dialog.Close = DialogClose;
218
- var dialog_default = Dialog;
211
+ Dialog2.Trigger = DialogTrigger2;
212
+ Dialog2.Content = DialogContent2;
213
+ Dialog2.Header = DialogHeader2;
214
+ Dialog2.Footer = DialogFooter2;
215
+ Dialog2.Title = DialogTitle2;
216
+ Dialog2.Description = DialogDescription2;
217
+ Dialog2.Close = DialogClose2;
218
+ var dialog_default = Dialog2;
219
219
 
220
- export { useDialogState, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogState, Dialog, dialog_default };
220
+ export { useDialogState2, DialogTrigger2, DialogClose2, DialogContent2, DialogHeader2, DialogFooter2, DialogTitle2, DialogDescription2, DialogState2, Dialog2, dialog_default };
@@ -130,7 +130,7 @@ function useIcon(name) {
130
130
  const icons = useContext(IconContext);
131
131
  return (icons ?? defaultIcons)[name];
132
132
  }
133
- function IconProvider({ children, icons }) {
133
+ function IconProvider2({ children, icons }) {
134
134
  const value = useMemo(() => ({ ...defaultIcons, ...icons }), [icons]);
135
135
  return /* @__PURE__ */ jsx(IconContext.Provider, {
136
136
  value,
@@ -138,4 +138,4 @@ function IconProvider({ children, icons }) {
138
138
  });
139
139
  }
140
140
 
141
- export { useIcon, IconProvider };
141
+ export { useIcon, IconProvider2 };
@@ -19,7 +19,7 @@ var SURFACE_SHADOW = {
19
19
  7: "shadow-surface-7",
20
20
  8: "shadow-surface-8"
21
21
  };
22
- function surfaceClasses(bgLevel, shadowLevel = bgLevel) {
22
+ function surfaceClasses2(bgLevel, shadowLevel = bgLevel) {
23
23
  const bg = Math.round(Math.max(1, Math.min(8, bgLevel)));
24
24
  const shadow = Math.round(Math.max(1, Math.min(8, shadowLevel)));
25
25
  return `${SURFACE_BG[bg]} ${SURFACE_SHADOW[shadow]}`;
@@ -29,14 +29,14 @@ function surfaceClasses(bgLevel, shadowLevel = bgLevel) {
29
29
  import { createContext, useContext } from "react";
30
30
  import { jsx } from "react/jsx-runtime";
31
31
  var SurfaceContext = createContext(1);
32
- function useSurface() {
32
+ function useSurface2() {
33
33
  return useContext(SurfaceContext);
34
34
  }
35
- function SurfaceProvider({ value, children }) {
35
+ function SurfaceProvider2({ value, children }) {
36
36
  return /* @__PURE__ */ jsx(SurfaceContext.Provider, {
37
37
  value: Math.max(1, Math.min(8, value)),
38
38
  children
39
39
  });
40
40
  }
41
41
 
42
- export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses, useSurface, SurfaceProvider };
42
+ export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses2, useSurface2, SurfaceProvider2 };
package/dist/styles.css CHANGED
@@ -59,7 +59,7 @@
59
59
  }
60
60
  /* layer: theme */
61
61
  @layer theme{
62
- :root, :host { --radius-DEFAULT: 0.25rem; --spacing: 0.25rem; --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --radius-none: 0; --ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1); --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --leading-tight: 1.25; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --leading-none: 1; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --leading-relaxed: 1.625; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --radius-md: 0.375rem; --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-sm: 0.25rem; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
62
+ :root, :host { --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --spacing: 0.25rem; --ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1); --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --radius-md: 0.375rem; --radius-DEFAULT: 0.25rem; --radius-none: 0; --leading-relaxed: 1.625; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --leading-none: 1; --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-sm: 0.25rem; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --leading-tight: 1.25; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
63
63
  }
64
64
  /* layer: base */
65
65
  @layer base{
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justanarthur/modo-ui",
3
3
  "type": "module",
4
- "version": "0.1.0",
4
+ "version": "0.3.0",
5
5
  "description": "Fluid Functionalism (Base UI flavor, MIT © 2026 Micka Touillaud) ported to UnoCSS: motion springs, fluid hover, a two-step size ladder and an eight-level elevated surface system. Documented with modo.",
6
6
  "license": "MIT",
7
7
  "keywords": [
@@ -91,7 +91,7 @@
91
91
  "react-dom": ">=18"
92
92
  },
93
93
  "devDependencies": {
94
- "@justanarthur/modo": "0.7.3",
94
+ "@justanarthur/modo": "0.8.0",
95
95
  "@types/react": "^18.3.0",
96
96
  "@types/react-dom": "^18.3.0",
97
97
  "bunup": "^0.16.0",
@@ -102,4 +102,4 @@
102
102
  "unocss": "66.10.5",
103
103
  "vite": "^5.4.0"
104
104
  }
105
- }
105
+ }
@@ -1,50 +0,0 @@
1
- import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
2
- type SizeVariant = "default" | "compact";
3
- interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
4
- /** CheckboxGroup.Item children. */
5
- children: ReactNode;
6
- /** Set of checked item indices; drives the merged background across contiguous picks. Controlled — pair it with `onCheckedIndicesChange` (or per-item `onToggle`). */
7
- checkedIndices?: Set<number>;
8
- /** Checked indices on first render when uncontrolled (a Set or an array). Defaults to none. */
9
- defaultCheckedIndices?: Set<number> | number[];
10
- /** Called with the next checked set whenever an item is toggled. */
11
- onCheckedIndicesChange?: (checkedIndices: Set<number>) => void;
12
- /** Pins the group's rows to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
13
- size?: SizeVariant;
14
- }
15
- type CheckboxGroupComponent = ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<HTMLDivElement>> & {
16
- Item: typeof CheckboxItem;
17
- };
18
- /**
19
- * Checkbox group with merged backgrounds for contiguous selections.
20
- *
21
- * Each row is a `CheckboxGroup.Item` with a stable `index`. Contiguous checked
22
- * rows share one background: a checked row's background grows out of its
23
- * center and melts into its neighbours, an unchecked one pinches off and
24
- * shrinks away (the liquid indicators in Morph). A fluid hover highlight melts
25
- * from row to row, and Arrow Up/Down,
26
- * Home and End move focus while Space or Enter toggles. The checked label
27
- * animates to semibold without shifting its width. The group is uncontrolled
28
- * with `defaultCheckedIndices`, or controlled with `checkedIndices` plus
29
- * `onCheckedIndicesChange` — FF's per-item `checked` / `onToggle` still work
30
- * and override the group state for their row.
31
- *
32
- * Statics:
33
- * - `CheckboxGroup.Item` — one checkbox row: `label`, `index`, and optional
34
- * `checked` / `onToggle`.
35
- *
36
- * @example {@include ./examples.mdx}
37
- */
38
- declare const CheckboxGroup: CheckboxGroupComponent;
39
- interface CheckboxItemProps extends HTMLAttributes<HTMLDivElement> {
40
- /** Text label for the checkbox. */
41
- label: string;
42
- /** Position index within the group. */
43
- index: number;
44
- /** Whether this item is checked. Defaults to the group's checked set. */
45
- checked?: boolean;
46
- /** Called when this item is toggled (the group's `onCheckedIndicesChange` fires too). */
47
- onToggle?: () => void;
48
- }
49
- declare const CheckboxItem: ForwardRefExoticComponent<CheckboxItemProps & RefAttributes<HTMLDivElement>>;
50
- export { CheckboxGroup as default, CheckboxItemProps, CheckboxItem, CheckboxGroupProps, CheckboxGroup };
@@ -1,23 +0,0 @@
1
- import {
2
- CheckboxGroup,
3
- CheckboxItem,
4
- checkbox_group_default
5
- } from "../../../shared/components-y3cqdrgy.js";
6
- import"../../../shared/components-rc63qsy6.js";
7
- import"../../../shared/components-vb033rns.js";
8
- import"../../../shared/components-r22vtgqc.js";
9
- import"../../../shared/components-e46kf6cp.js";
10
- import"../../../shared/components-7zp99w5d.js";
11
- import"../../../shared/components-dg0w8g5p.js";
12
- import"../../../shared/components-kf2ehztc.js";
13
- import"../../../shared/components-7nww01w4.js";
14
- import"../../../shared/components-nnnd2xef.js";
15
- import"../../../shared/components-vc1k7yv2.js";
16
- import"../../../shared/components-x3rz4cyn.js";
17
- import"../../../shared/components-0f0as45n.js";
18
- import"../../../shared/components-kpbcms10.js";
19
- export {
20
- checkbox_group_default as default,
21
- CheckboxItem,
22
- CheckboxGroup
23
- };
@@ -1,18 +0,0 @@
1
- import {
2
- InputCopy,
3
- input_copy_default
4
- } from "../../../shared/components-p2vmyfe1.js";
5
- import"../../../shared/components-gndm6am4.js";
6
- import"../../../shared/components-m5br529r.js";
7
- import"../../../shared/components-jxgznftn.js";
8
- import"../../../shared/components-7zp99w5d.js";
9
- import"../../../shared/components-7nww01w4.js";
10
- import"../../../shared/components-nnnd2xef.js";
11
- import"../../../shared/components-vc1k7yv2.js";
12
- import"../../../shared/components-x3rz4cyn.js";
13
- import"../../../shared/components-0f0as45n.js";
14
- import"../../../shared/components-kpbcms10.js";
15
- export {
16
- input_copy_default as default,
17
- InputCopy
18
- };
@@ -1,27 +0,0 @@
1
- import {
2
- FileThumbnail,
3
- InputMessage,
4
- input_message_default
5
- } from "../../../shared/components-gjfrycb5.js";
6
- import"../../../shared/components-gndm6am4.js";
7
- import"../../../shared/components-vb033rns.js";
8
- import"../../../shared/components-5pkcfprd.js";
9
- import"../../../shared/components-m5br529r.js";
10
- import"../../../shared/components-csxz9f52.js";
11
- import"../../../shared/components-jxgznftn.js";
12
- import"../../../shared/components-r22vtgqc.js";
13
- import"../../../shared/components-e46kf6cp.js";
14
- import"../../../shared/components-7zp99w5d.js";
15
- import"../../../shared/components-dg0w8g5p.js";
16
- import"../../../shared/components-kf2ehztc.js";
17
- import"../../../shared/components-7nww01w4.js";
18
- import"../../../shared/components-nnnd2xef.js";
19
- import"../../../shared/components-vc1k7yv2.js";
20
- import"../../../shared/components-x3rz4cyn.js";
21
- import"../../../shared/components-0f0as45n.js";
22
- import"../../../shared/components-kpbcms10.js";
23
- export {
24
- input_message_default as default,
25
- InputMessage,
26
- FileThumbnail
27
- };
@@ -1,22 +0,0 @@
1
- import {
2
- RadioGroup,
3
- RadioItem,
4
- radio_group_default
5
- } from "../../../shared/components-54nf2x99.js";
6
- import"../../../shared/components-vb033rns.js";
7
- import"../../../shared/components-r22vtgqc.js";
8
- import"../../../shared/components-e46kf6cp.js";
9
- import"../../../shared/components-7zp99w5d.js";
10
- import"../../../shared/components-dg0w8g5p.js";
11
- import"../../../shared/components-kf2ehztc.js";
12
- import"../../../shared/components-7nww01w4.js";
13
- import"../../../shared/components-nnnd2xef.js";
14
- import"../../../shared/components-vc1k7yv2.js";
15
- import"../../../shared/components-x3rz4cyn.js";
16
- import"../../../shared/components-0f0as45n.js";
17
- import"../../../shared/components-kpbcms10.js";
18
- export {
19
- radio_group_default as default,
20
- RadioItem,
21
- RadioGroup
22
- };
@@ -1,30 +0,0 @@
1
- import {
2
- Accordion,
3
- AccordionContent,
4
- AccordionGroup,
5
- AccordionItem,
6
- AccordionTrigger,
7
- accordion_default
8
- } from "../../../shared/components-vktws5r6.js";
9
- import"../../../shared/components-vb033rns.js";
10
- import"../../../shared/components-m5br529r.js";
11
- import"../../../shared/components-jxgznftn.js";
12
- import"../../../shared/components-r22vtgqc.js";
13
- import"../../../shared/components-e46kf6cp.js";
14
- import"../../../shared/components-7zp99w5d.js";
15
- import"../../../shared/components-dg0w8g5p.js";
16
- import"../../../shared/components-kf2ehztc.js";
17
- import"../../../shared/components-7nww01w4.js";
18
- import"../../../shared/components-nnnd2xef.js";
19
- import"../../../shared/components-vc1k7yv2.js";
20
- import"../../../shared/components-x3rz4cyn.js";
21
- import"../../../shared/components-0f0as45n.js";
22
- import"../../../shared/components-kpbcms10.js";
23
- export {
24
- accordion_default as default,
25
- AccordionTrigger,
26
- AccordionItem,
27
- AccordionGroup,
28
- AccordionContent,
29
- Accordion
30
- };
@@ -1,15 +0,0 @@
1
- import {
2
- ThinkingIndicator,
3
- thinking_indicator_default
4
- } from "../../shared/components-5zry9te1.js";
5
- import"../../shared/components-jxgznftn.js";
6
- import"../../shared/components-7nww01w4.js";
7
- import"../../shared/components-nnnd2xef.js";
8
- import"../../shared/components-vc1k7yv2.js";
9
- import"../../shared/components-x3rz4cyn.js";
10
- import"../../shared/components-0f0as45n.js";
11
- import"../../shared/components-kpbcms10.js";
12
- export {
13
- thinking_indicator_default as default,
14
- ThinkingIndicator
15
- };
@@ -1,32 +0,0 @@
1
- import {
2
- SurfaceProvider,
3
- surfaceClasses,
4
- useSurface
5
- } from "./components-csxz9f52.js";
6
- import {
7
- cn
8
- } from "./components-0f0as45n.js";
9
-
10
- // primitives/surface/index.tsx
11
- import {
12
- forwardRef
13
- } from "react";
14
- import { jsx } from "react/jsx-runtime";
15
- var Elevated = forwardRef(({ offset, shadowLevel, className, children, ...props }, ref) => {
16
- const substrate = useSurface();
17
- const level = Math.min(substrate + offset, 8);
18
- return /* @__PURE__ */ jsx(SurfaceProvider, {
19
- value: level,
20
- children: /* @__PURE__ */ jsx("div", {
21
- ref,
22
- className: cn(surfaceClasses(level, shadowLevel ?? level), className),
23
- ...props,
24
- children
25
- })
26
- });
27
- });
28
- Elevated.displayName = "Elevated";
29
- Object.assign(Elevated, { Provider: SurfaceProvider });
30
- var surface_default = Elevated;
31
-
32
- export { Elevated, surface_default };
@@ -1,123 +0,0 @@
1
- import {
2
- SizeProvider
3
- } from "./components-vb033rns.js";
4
- import {
5
- FluidHoverHighlight
6
- } from "./components-r22vtgqc.js";
7
- import {
8
- useFluidHover,
9
- useRegisterFluidHoverItem
10
- } from "./components-e46kf6cp.js";
11
- import {
12
- useSize
13
- } from "./components-x3rz4cyn.js";
14
- import {
15
- cn
16
- } from "./components-0f0as45n.js";
17
-
18
- // components/table/index.tsx
19
- import {
20
- createContext,
21
- forwardRef,
22
- useContext,
23
- useMemo,
24
- useRef
25
- } from "react";
26
- import { jsx, jsxs } from "react/jsx-runtime";
27
- var TableContext = createContext(null);
28
- var Table = forwardRef(({ children, size, className, ...props }, ref) => {
29
- const containerRef = useRef(null);
30
- const sizeClasses = useSize(size);
31
- const hover = useFluidHover(containerRef);
32
- const { activeIndex, handlers, registerItem } = hover;
33
- const contextValue = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
34
- const table = /* @__PURE__ */ jsx(TableContext.Provider, {
35
- value: contextValue,
36
- children: /* @__PURE__ */ jsxs("div", {
37
- ref: containerRef,
38
- className: "relative",
39
- onMouseEnter: handlers.onMouseEnter,
40
- onMouseMove: handlers.onMouseMove,
41
- onMouseLeave: handlers.onMouseLeave,
42
- onClick: handlers.onClick,
43
- children: [
44
- /* @__PURE__ */ jsx(FluidHoverHighlight, {
45
- hover
46
- }),
47
- /* @__PURE__ */ jsx("table", {
48
- ref,
49
- className: cn("w-full border-collapse", sizeClasses.text, className),
50
- ...props,
51
- children
52
- })
53
- ]
54
- })
55
- });
56
- return size ? /* @__PURE__ */ jsx(SizeProvider, {
57
- size,
58
- children: table
59
- }) : table;
60
- });
61
- Table.displayName = "Table";
62
- var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
63
- ref,
64
- className: cn("", className),
65
- ...props
66
- }));
67
- TableHeader.displayName = "TableHeader";
68
- var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
69
- ref,
70
- className: cn("", className),
71
- ...props
72
- }));
73
- TableBody.displayName = "TableBody";
74
- var TableRow = forwardRef(({ index, className, style, ...props }, ref) => {
75
- const internalRef = useRef(null);
76
- const ctx = useContext(TableContext);
77
- useRegisterFluidHoverItem(ctx?.registerItem, index, internalRef);
78
- const isBodyRow = index !== undefined;
79
- const activeIdx = ctx?.activeIndex ?? null;
80
- const hideBorder = activeIdx !== null && (isBodyRow && (index === activeIdx || index === activeIdx - 1) || !isBodyRow && activeIdx === 0);
81
- return /* @__PURE__ */ jsx("tr", {
82
- ref: (node) => {
83
- internalRef.current = node;
84
- if (typeof ref === "function")
85
- ref(node);
86
- else if (ref)
87
- ref.current = node;
88
- },
89
- "data-fluid-hover-index": index,
90
- className: cn("group/row relative z-10 border-b transition-[border-color] duration-fast", hideBorder ? "border-transparent" : "border-accent/40", isBodyRow && activeIdx === index && "is-active", isBodyRow ? "weight-normal" : "weight-semibold", className),
91
- style,
92
- ...props
93
- });
94
- });
95
- TableRow.displayName = "TableRow";
96
- var TableHead = forwardRef(({ className, ...props }, ref) => {
97
- const sizeClasses = useSize();
98
- return /* @__PURE__ */ jsx("th", {
99
- ref,
100
- className: cn("text-left text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
101
- ...props
102
- });
103
- });
104
- TableHead.displayName = "TableHead";
105
- var TableCell = forwardRef(({ className, ...props }, ref) => {
106
- const sizeClasses = useSize();
107
- return /* @__PURE__ */ jsx("td", {
108
- ref,
109
- className: cn("text-muted-foreground transition-colors duration-fast group-[.is-active]/row:text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
110
- ...props
111
- });
112
- });
113
- TableCell.displayName = "TableCell";
114
- Object.assign(Table, {
115
- Header: TableHeader,
116
- Body: TableBody,
117
- Row: TableRow,
118
- Head: TableHead,
119
- Cell: TableCell
120
- });
121
- var table_default = Table;
122
-
123
- export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, table_default };