@justanarthur/modo-ui 0.1.0 → 0.3.0

package/dist/shared/{components-gndm6am4.js → components-ng72k97e.js}

@@ -1,16 +1,16 @@
 import {
   MorphSurface
-} from "./components-jxgznftn.js";
+} from "./components-0q0sqfh4.js";
 import {
-  useShape
-} from "./components-7zp99w5d.js";
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
-  useMorph,
-  useMorphOrigin
-} from "./components-7nww01w4.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  useShape
+} from "./components-cv16mryv.js";
 
 // components/overlays/tooltip/index.tsx
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
@@ -18,7 +18,7 @@ import { motion, useMotionValue } from "motion/react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TooltipPortalContainerContext = createContext(null);
-function TooltipPortalContainer({ value, children }) {
+function TooltipPortalContainer2({ value, children }) {
   return /* @__PURE__ */ jsx(TooltipPortalContainerContext.Provider, {
     value,
     children
@@ -26,7 +26,7 @@ function TooltipPortalContainer({ value, children }) {
 }
 var DEFAULT_DELAY = 200;
 var TooltipGroupContext = createContext(false);
-function TooltipProvider({ children, delayDuration = DEFAULT_DELAY, skipDelayDuration = 300 }) {
+function TooltipProvider2({ children, delayDuration = DEFAULT_DELAY, skipDelayDuration = 300 }) {
   return /* @__PURE__ */ jsx(TooltipGroupContext.Provider, {
     value: true,
     children: /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
@@ -36,7 +36,7 @@ function TooltipProvider({ children, delayDuration = DEFAULT_DELAY, skipDelayDur
     })
   });
 }
-function Tooltip({
+function Tooltip2({
   content,
   children,
   side = "top",
@@ -95,7 +95,7 @@ function Tooltip({
         children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, {
           side,
           sideOffset,
-          className: cn("z-50", contentClassName),
+          className: cn2("z-50", contentClassName),
           children: /* @__PURE__ */ jsx(TooltipPrimitive.Popup, {
             ref: morph.popupRef,
             className: "relative outline-none",
@@ -106,7 +106,7 @@ function Tooltip({
               morph,
               bg: "bg-foreground",
               radius: shape.bg,
-              className: cn("text-background text-caption px-2 py-1", "[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both]:py-2", "weight-medium", className),
+              className: cn2("text-background text-caption px-2 py-1", "[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both]:py-2", "weight-medium", className),
               children: content
             })
           })
@@ -121,8 +121,8 @@ function Tooltip({
     children: tooltip
   });
 }
-Tooltip.Provider = TooltipProvider;
-Tooltip.PortalContainer = TooltipPortalContainer;
-var tooltip_default = Tooltip;
+Tooltip2.Provider = TooltipProvider2;
+Tooltip2.PortalContainer = TooltipPortalContainer2;
+var tooltip_default = Tooltip2;
 
-export { TooltipPortalContainer, TooltipProvider, Tooltip, tooltip_default };
+export { TooltipPortalContainer2, TooltipProvider2, Tooltip2, tooltip_default };

package/dist/shared/{components-54nf2x99.js → components-pbmqctfa.js}

@@ -1,33 +1,37 @@
 import {
-  SizeProvider
-} from "./components-vb033rns.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
+  GooIndicator
+} from "./components-chacnk61.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
 import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
+  IndexedRows,
+  useRowIndex
+} from "./components-ta7shw28.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  useControllableState
-} from "./components-dg0w8g5p.js";
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
-  GooIndicator
-} from "./components-kf2ehztc.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  SizeProvider2
+} from "./components-jjw69c4c.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
-// components/inputs/radio-group/index.tsx
+// components/inputs/radio/index.tsx
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { AnimatePresence, motion } from "motion/react";
@@ -46,10 +50,10 @@ var RadioGroupContext = createContext(null);
 function useRadioGroupContext() {
   const ctx = useContext(RadioGroupContext);
   if (!ctx)
-    throw new Error("useRadioGroup must be used within a RadioGroup");
+    throw new Error("Radio must be used within a Radio.Group");
   return ctx;
 }
-var RadioGroup = forwardRef(({
+var RadioGroup2 = forwardRef(({
   children,
   selectedIndex: selectedIndexProp,
   defaultSelectedIndex,
@@ -65,7 +69,7 @@ var RadioGroup = forwardRef(({
   const [value, onValueChange] = useControllableState(valueProp, defaultValue, onValueChangeProp);
   const containerRef = useRef(null);
   const childValues = Children.toArray(children).filter(isValidElement).map((child) => child.props.value);
-  const hover = useFluidHover(containerRef);
+  const hover = useFluidHover2(containerRef);
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
   const [focusedIndex, setFocusedIndex] = useState(null);
   const resolvedSelectedIndex = value !== undefined ? childValues.findIndex((childValue) => childValue === value) : selectedIndex ?? -1;
@@ -124,14 +128,14 @@ var RadioGroup = forwardRef(({
       }
     },
     role: "radiogroup",
-    className: cn("relative flex flex-col w-72 max-w-full select-none", className),
+    className: cn2("relative flex flex-col w-72 max-w-full select-none", className),
     ...props,
     children: [
       selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
         rect: selectedRect,
-        className: cn("bg-active", shape.bg)
+        className: cn2("bg-active", shape.bg)
       }),
-      /* @__PURE__ */ jsx(FluidHoverHighlight, {
+      /* @__PURE__ */ jsx(FluidHoverHighlight2, {
         hover,
         className: shape.bg
       }),
@@ -145,17 +149,19 @@ var RadioGroup = forwardRef(({
             width: focusRect.width + 4,
             height: focusRect.height + 4
           },
-          exit: { opacity: 0, transition: spring.fast.exit },
+          exit: { opacity: 0, transition: spring2.fast.exit },
           transition: {
-            ...spring.fast,
-            opacity: { duration: spring.fast.duration }
+            ...spring2.fast,
+            opacity: { duration: spring2.fast.duration }
           }
         })
       }),
-      children
+      /* @__PURE__ */ jsx(IndexedRows, {
+        children
+      })
     ]
   });
-  const withSize = (node) => size ? /* @__PURE__ */ jsx(SizeProvider, {
+  const withSize = (node) => size ? /* @__PURE__ */ jsx(SizeProvider2, {
     size,
     children: node
   }) : node;
@@ -188,19 +194,20 @@ var RadioGroup = forwardRef(({
     children: content
   }));
 });
-RadioGroup.displayName = "RadioGroup";
-var RadioItem = forwardRef(({ label, index, selected, onSelect, value, className, ...props }, ref) => {
+RadioGroup2.displayName = "RadioGroup";
+var Radio2 = forwardRef(({ label, index: indexProp, selected, onSelect, value, className, ...props }, ref) => {
   const internalRef = useRef(null);
   const hasMounted = useRef(false);
   const { registerItem, activeIndex, selectedIndex, selectedValue, onValueChange, hasSelection, selectIndex } = useRadioGroupContext();
-  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  const index = useRowIndex(indexProp);
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
   useEffect(() => {
     hasMounted.current = true;
   }, []);
   const isActive = activeIndex === index;
   const skipAnimation = !hasMounted.current;
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const isSelected = value !== undefined && selectedValue !== undefined ? selectedValue === value : selected ?? selectedIndex === index;
   const handleSelect = () => {
@@ -237,14 +244,14 @@ var RadioItem = forwardRef(({ label, index, selected, onSelect, value, className
         handleSelect();
       }
     },
-    className: cn(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, className),
+    className: cn2(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, className),
     ...props,
     children: [
       /* @__PURE__ */ jsxs("div", {
-        className: cn("relative shrink-0", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        className: cn2("relative shrink-0", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
         children: [
           /* @__PURE__ */ jsx("div", {
-            className: cn("absolute inset-0 rounded-full border-solid transition-all duration-fast", isSelected ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+            className: cn2("absolute inset-0 rounded-full border-solid transition-all duration-fast", isSelected ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
           }),
           /* @__PURE__ */ jsx(AnimatePresence, {
             children: isSelected && /* @__PURE__ */ jsx(motion.div, {
@@ -255,16 +262,16 @@ var RadioItem = forwardRef(({ label, index, selected, onSelect, value, className
               },
               animate: { opacity: 1, scale: 1 },
               exit: { opacity: 0, scale: 0.3, transition: { duration: 0.04 } },
-              transition: spring.fast,
+              transition: spring2.fast,
               children: /* @__PURE__ */ jsx("div", {
-                className: cn("rounded-full bg-foreground", compact ? "w-[7px] h-[7px]" : "w-[8px] h-[8px]")
+                className: cn2("rounded-full bg-foreground", compact ? "w-[7px] h-[7px]" : "w-[8px] h-[8px]")
               })
             })
           })
         ]
       }),
       /* @__PURE__ */ jsxs("span", {
-        className: cn("inline-grid", sizeClasses.text),
+        className: cn2("inline-grid", sizeClasses.text),
         children: [
           /* @__PURE__ */ jsx("span", {
             className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
@@ -272,7 +279,7 @@ var RadioItem = forwardRef(({ label, index, selected, onSelect, value, className
             children: label
           }),
           /* @__PURE__ */ jsx("span", {
-            className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isSelected || isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
+            className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isSelected || isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
             children: label
           })
         ]
@@ -286,8 +293,8 @@ var RadioItem = forwardRef(({ label, index, selected, onSelect, value, className
     ]
   });
 });
-RadioItem.displayName = "RadioItem";
-Object.assign(RadioGroup, { Item: RadioItem });
-var radio_group_default = RadioGroup;
+Radio2.displayName = "Radio";
+Object.assign(Radio2, { Group: RadioGroup2 });
+var radio_default = Radio2;
 
-export { RadioGroup, RadioItem, radio_group_default };
+export { RadioGroup2, Radio2, radio_default };

package/dist/shared/{components-peg09pzs.js → components-q5xj5c16.js}

@@ -1,20 +1,20 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
 import {
   button_default
-} from "./components-5pkcfprd.js";
+} from "./components-b2wyq2cq.js";
 import {
   useControllableState
-} from "./components-dg0w8g5p.js";
-import {
-  spring
-} from "./components-vc1k7yv2.js";
+} from "./components-n7mjr357.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // primitives/motion/index.tsx
 import { MotionConfig, motion } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Motion({
+function Motion2({
   tier = "moderate",
   show,
   defaultShow = true,
@@ -25,12 +25,12 @@ function Motion({
   children
 }) {
   const [shown, setShown] = useControllableState(show, defaultShow, onShowChange);
-  const enter = spring[tier];
+  const enter = spring2[tier];
   const leave = sameExit ? enter : enter.exit;
   return /* @__PURE__ */ jsx(MotionConfig, {
     reducedMotion,
     children: /* @__PURE__ */ jsxs("div", {
-      className: cn("flex flex-col items-center gap-3", className),
+      className: cn2("flex flex-col items-center gap-3", className),
       children: [
         /* @__PURE__ */ jsx(motion.div, {
           initial: false,
@@ -76,4 +76,4 @@ function Motion({
     })
   });
 }
-export { Motion };
+export { Motion2 };

package/dist/shared/{components-taxmgbnh.js → components-re6rs21k.js}

@@ -1,29 +1,29 @@
 import {
-  pad
-} from "./components-r4jt6hgd.js";
-import {
-  PickerInput,
-  PickerShell
-} from "./components-hzfp4tjb.js";
-import {
-  ScrollColumn,
   defaultLocale,
+  fieldLabel,
   dividedColumns,
-  fieldLabel
-} from "./components-x2xyckd5.js";
+  ScrollColumn
+} from "./components-gz8zf3ec.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
 import {
   useControllableState
-} from "./components-dg0w8g5p.js";
+} from "./components-n7mjr357.js";
+import {
+  PickerShell,
+  PickerInput
+} from "./components-7btqt08d.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  pad
+} from "./components-mjthm1kf.js";
 
 // components/inputs/date-time/duration-picker/index.tsx
 import { formatDuration } from "date-fns";
 import { useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TYPED = /^\s*(\d{1,3})(?::(\d{1,2}))?\s*$/;
-function DurationPicker({
+function DurationPicker2({
   value: valueProp,
   defaultValue = null,
   onValueChange,
@@ -95,7 +95,7 @@ function DurationPicker({
     tier,
     className,
     children: /* @__PURE__ */ jsxs("div", {
-      className: cn(dividedColumns, "h-56"),
+      className: cn2(dividedColumns, "h-56"),
       children: [
         /* @__PURE__ */ jsx(ScrollColumn, {
           label: fieldLabel(locale, "hour"),
@@ -115,6 +115,6 @@ function DurationPicker({
     })
   });
 }
-var duration_picker_default = DurationPicker;
+var duration_picker_default = DurationPicker2;
 
-export { DurationPicker, duration_picker_default };
+export { DurationPicker2, duration_picker_default };

package/dist/shared/{components-r43mqnd6.js → components-rr7a6ja9.js}

@@ -1,31 +1,31 @@
 import {
-  DialogClose,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogState,
-  DialogTitle,
-  DialogTrigger,
-  useDialogState
-} from "./components-61ckf42z.js";
+  MorphSurface
+} from "./components-0q0sqfh4.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
-  SurfaceProvider,
-  useSurface
-} from "./components-csxz9f52.js";
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
-  MorphSurface
-} from "./components-jxgznftn.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  useMorph
-} from "./components-7nww01w4.js";
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  useDialogState2,
+  DialogTrigger2,
+  DialogClose2,
+  DialogHeader2,
+  DialogFooter2,
+  DialogTitle2,
+  DialogDescription2,
+  DialogState2
+} from "./components-zfnmn5d4.js";
 
 // components/overlays/sheet/index.tsx
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
@@ -53,9 +53,9 @@ var PLACEMENT = {
 };
 var DRAWER_OFFSET = 4;
 var INDENT_RADIUS = { pill: "data-[active]:rounded-3xl", rounded: "data-[active]:rounded-xl" };
-var SheetContent = forwardRef(({ from, effect, hideSource, tier, container, className, children, ...props }, ref) => {
+var SheetContent2 = forwardRef(({ from, effect, hideSource, tier, container, className, children, ...props }, ref) => {
   const { side, swiped } = useContext(SheetContext);
-  const { open, origin } = useDialogState();
+  const { open, origin } = useDialogState2();
   const morph = useMorph(open, origin, {
     from: from ?? side,
     effect,
@@ -65,7 +65,7 @@ var SheetContent = forwardRef(({ from, effect, hideSource, tier, container, clas
   });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   const shape = useShape();
-  const level = Math.min(useSurface() + DRAWER_OFFSET, 8);
+  const level = Math.min(useSurface2() + DRAWER_OFFSET, 8);
   const edge = side === "top" || side === "bottom";
   return /* @__PURE__ */ jsxs(DrawerPrimitive.Portal, {
     container: container ?? undefined,
@@ -74,22 +74,22 @@ var SheetContent = forwardRef(({ from, effect, hideSource, tier, container, clas
         render: /* @__PURE__ */ jsx(motion.div, {
           style: { opacity: morph.progress }
         }),
-        className: cn(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
+        className: cn2(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
       }),
       /* @__PURE__ */ jsx(DrawerPrimitive.Viewport, {
-        className: cn(container ? "absolute" : "fixed", "inset-0 z-50"),
+        className: cn2(container ? "absolute" : "fixed", "inset-0 z-50"),
         children: /* @__PURE__ */ jsx(DrawerPrimitive.Popup, {
           ref: morph.popupRef,
           ...props,
-          className: cn("absolute flex flex-col focus:outline-none", PLACEMENT[side], "[transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]", "transition-[transform] duration-slow"),
-          children: /* @__PURE__ */ jsx(SurfaceProvider, {
+          className: cn2("absolute flex flex-col focus:outline-none", PLACEMENT[side], "[transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]", "transition-[transform] duration-slow"),
+          children: /* @__PURE__ */ jsx(SurfaceProvider2, {
             value: level,
             children: /* @__PURE__ */ jsxs(MorphSurface, {
               morph,
               bg: SURFACE_BG[level],
               shadow: SURFACE_SHADOW[level],
               radius: shape.container,
-              className: cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6", edge && "pt-3", className),
+              className: cn2("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6", edge && "pt-3", className),
               children: [
                 edge && /* @__PURE__ */ jsx("div", {
                   "aria-hidden": true,
@@ -104,17 +104,17 @@ var SheetContent = forwardRef(({ from, effect, hideSource, tier, container, clas
     ]
   });
 });
-SheetContent.displayName = "SheetContent";
-var SheetIndent = forwardRef(({ className, ...props }, ref) => {
+SheetContent2.displayName = "SheetContent";
+var SheetIndent2 = forwardRef(({ className, ...props }, ref) => {
   const shape = useShape();
   return /* @__PURE__ */ jsx(DrawerPrimitive.Indent, {
     ref,
-    className: cn("origin-top transition-[transform] duration-slow data-[active]:scale-[0.96] data-[active]:overflow-hidden", INDENT_RADIUS[shape.variant], className),
+    className: cn2("origin-top transition-[transform] duration-slow data-[active]:scale-[0.96] data-[active]:overflow-hidden", INDENT_RADIUS[shape.variant], className),
     ...props
   });
 });
-SheetIndent.displayName = "SheetIndent";
-function Sheet({
+SheetIndent2.displayName = "SheetIndent";
+function Sheet2({
   children,
   open,
   defaultOpen,
@@ -127,7 +127,7 @@ function Sheet({
   const [swiped, setSwiped] = useState(false);
   return /* @__PURE__ */ jsx(SheetContext.Provider, {
     value: { side, swiped },
-    children: /* @__PURE__ */ jsx(DialogState, {
+    children: /* @__PURE__ */ jsx(DialogState2, {
       open,
       defaultOpen,
       onOpenChange,
@@ -146,15 +146,15 @@ function Sheet({
     })
   });
 }
-Sheet.Trigger = DialogTrigger;
-Sheet.Content = SheetContent;
-Sheet.Header = DialogHeader;
-Sheet.Footer = DialogFooter;
-Sheet.Title = DialogTitle;
-Sheet.Description = DialogDescription;
-Sheet.Close = DialogClose;
-Sheet.Provider = DrawerPrimitive.Provider;
-Sheet.Indent = SheetIndent;
-var sheet_default = Sheet;
+Sheet2.Trigger = DialogTrigger2;
+Sheet2.Content = SheetContent2;
+Sheet2.Header = DialogHeader2;
+Sheet2.Footer = DialogFooter2;
+Sheet2.Title = DialogTitle2;
+Sheet2.Description = DialogDescription2;
+Sheet2.Close = DialogClose2;
+Sheet2.Provider = DrawerPrimitive.Provider;
+Sheet2.Indent = SheetIndent2;
+var sheet_default = Sheet2;
 
-export { SheetContent, SheetIndent, Sheet, sheet_default };
+export { SheetContent2, SheetIndent2, Sheet2, sheet_default };