@justanarthur/modo-ui 0.1.0 → 0.3.0

package/dist/shared/{components-7nww01w4.js → components-hqeq3w9q.js}

@@ -1,10 +1,10 @@
 import {
   useReduceMotion
-} from "./components-nnnd2xef.js";
+} from "./components-men63rwj.js";
 import {
-  exitFallbackMs,
-  spring
-} from "./components-vc1k7yv2.js";
+  spring2,
+  exitFallbackMs2
+} from "./components-1v7rxytx.js";
 
 // lib/use-morph.ts
 import { animate, clamp, useMotionValue } from "motion/react";
@@ -128,7 +128,7 @@ function inPlaceOffset({ side, anchor }) {
   return side === "top" || side === "bottom" ? -anchor.height : -anchor.width;
 }
 function holdExit(el, tier) {
-  return el.animate(null, { duration: exitFallbackMs(spring[tier]) });
+  return el.animate(null, { duration: exitFallbackMs2(spring2[tier]) });
 }
 function returnFocus(trigger) {
   requestAnimationFrame(() => requestAnimationFrame(() => {
@@ -167,7 +167,7 @@ function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource =
   const reduced = useReduceMotion();
   const resolve = (wanted) => reduced ? "fade" : wanted;
   const resolved = resolve(effect);
-  const timing = (effect2) => effect2 === "goo" ? "goo" : tier;
+  const timing = (effect) => effect === "goo" ? "goo" : tier;
   const progress = useMotionValue(0);
   const gooId = `morph-goo-${useId().replace(/:/g, "")}`;
   const geometry = useRef(null);
@@ -193,24 +193,24 @@ function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource =
     const g = geometry.current;
     if (!g)
       return;
-    const { bg, content, shadow, popup: popup2, shape } = refs;
-    const { effect: effect2 } = run.current;
-    const shaped = drawsShape(effect2);
+    const { bg, content, shadow, popup, shape } = refs;
+    const { effect } = run.current;
+    const shaped = drawsShape(effect);
     const slide = { ...g.target, x: g.offset.x * (1 - p), y: g.offset.y * (1 - p) };
-    const rect = clampRect(shaped ? lerpRect(g.source, g.target, p) : effect2 === "slide" ? slide : g.target);
+    const rect = clampRect(shaped ? lerpRect(g.source, g.target, p) : effect === "slide" ? slide : g.target);
     place(shaped ? shape.current : bg.current, shaped ? within(rect, g.layer) : rect);
     place(shadow.current, rect);
-    const melting = effect2 === "goo" ? clamp(0, 1, (1 - p) / GOO_RELEASE) : 0;
+    const melting = effect === "goo" ? clamp(0, 1, (1 - p) / GOO_RELEASE) : 0;
     refs.blur.current?.setAttribute("stdDeviation", String(g.blur * melting));
     refs.outline.current?.setAttribute("flood-opacity", String(melting * clamp(0, 1, p / GOO_SETTLE)));
     if (shadow.current)
-      shadow.current.style.opacity = String(effect2 === "goo" ? 1 - melting : clamp(0, 1, p));
+      shadow.current.style.opacity = String(effect === "goo" ? 1 - melting : clamp(0, 1, p));
     if (content.current) {
       content.current.style.clipPath = shaped ? insetClip(rect, g.target) : "";
-      content.current.style.transform = effect2 === "slide" ? `translate(${rect.x}px, ${rect.y}px)` : "";
+      content.current.style.transform = effect === "slide" ? `translate(${rect.x}px, ${rect.y}px)` : "";
     }
-    if (popup2.current)
-      popup2.current.style.opacity = effect2 === "fade" ? String(p) : "";
+    if (popup.current)
+      popup.current.style.opacity = effect === "fade" ? String(p) : "";
   };
   const rest = () => {
     refs.bg.current?.removeAttribute("style");
@@ -228,14 +228,14 @@ function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource =
     const el = refs.popup.current;
     if (!el)
       return;
-    const { effect: effect2, from: from2 } = run.current;
-    const shaped = drawsShape(effect2);
+    const { effect, from } = run.current;
+    const shaped = drawsShape(effect);
     const box = el.getBoundingClientRect();
     const target = { x: 0, y: 0, w: box.width, h: box.height, r: targetRadius.current };
-    const source = sourceRect(from2, origin.current ?? {}, box, target);
-    const blur = effect2 === "goo" ? Math.max(GOO_SURFACE_BLUR, target.r * GOO_BLUR_RATIO) : 0;
+    const source = sourceRect(from, origin.current ?? {}, box, target);
+    const blur = effect === "goo" ? Math.max(GOO_SURFACE_BLUR, target.r * GOO_BLUR_RATIO) : 0;
     const layer = layerBox(source, target, blur * 3);
-    geometry.current = { source, target, layer, offset: slideOffset(from2, source, target, box), blur };
+    geometry.current = { source, target, layer, offset: slideOffset(from, source, target, box), blur };
     const { shapes, copy, bg } = refs;
     if (bg.current)
       bg.current.style.opacity = shaped ? "0" : "";
@@ -245,7 +245,7 @@ function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource =
     if (!shaped)
       return;
     place(shapes.current, { ...layer, r: 0 });
-    if (effect2 === "goo")
+    if (effect === "goo")
       place(copy.current, within(source, layer));
     const cut = source.w > 0 && source.h > 0 && !hideSource && !overlaps(source, target);
     shapes.current.style.clipPath = cut ? `path(evenodd, "${roundedRectPath({ ...layer, x: 0, y: 0 })} ${roundedRectPath(within(source, layer))}")` : "";
@@ -264,36 +264,36 @@ function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource =
     el.style.opacity = "0";
   };
   const skip = (el) => instant?.(el);
-  const opening = (popup2) => {
+  const opening = (popup) => {
     returnTo.current = null;
     run.current = { effect: resolved, from };
     const first = !geometry.current;
     if (first && refs.bg.current) {
-      const box = popup2.getBoundingClientRect();
+      const box = popup.getBoundingClientRect();
       targetRadius.current = radiusOf(refs.bg.current, box.width, box.height);
     }
     let controls;
     const begin = () => {
       measure();
       hide(sourceElement(from, origin.current ?? {}));
-      if (skip(popup2)) {
+      if (skip(popup)) {
         progress.jump(1);
         rest();
         return;
       }
       render(progress.get());
-      const { exit: _, ...enter } = spring[timing(run.current.effect)];
+      const { exit: _, ...enter } = spring2[timing(run.current.effect)];
       controls = animate(progress, 1, {
         ...enter,
         onUpdate: (p) => {
-          if (skip(popup2))
+          if (skip(popup))
             controls?.complete();
           render(p);
         },
         onComplete: rest
       });
     };
-    if (!first || skip(popup2) || !refs.bg.current) {
+    if (!first || skip(popup) || !refs.bg.current) {
       begin();
       return () => controls?.stop();
     }
@@ -308,8 +308,8 @@ function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource =
       controls?.stop();
     };
   };
-  const closing = (popup2) => {
-    returnTo.current = popup2.contains(document.activeElement) ? origin.current?.trigger ?? null : null;
+  const closing = (popup) => {
+    returnTo.current = popup.contains(document.activeElement) ? origin.current?.trigger ?? null : null;
     if (!geometry.current) {
       exited.current?.();
       return;
@@ -319,23 +319,23 @@ function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource =
       geometry.current = null;
       exited.current?.();
     };
-    if (skip(popup2)) {
+    if (skip(popup)) {
       progress.jump(0);
-      popup2.style.opacity = "0";
+      popup.style.opacity = "0";
       done();
       return;
     }
     run.current = { effect: resolve(exit?.effect ?? effect), from: exit?.from ?? from };
     if (exit)
       progress.jump(1);
-    const hold = holdExit(popup2, timing(run.current.effect));
+    const hold = holdExit(popup, timing(run.current.effect));
     measure();
     render(progress.get());
     let controls;
     controls = animate(progress, 0, {
-      ...spring[timing(run.current.effect)].exit,
+      ...spring2[timing(run.current.effect)].exit,
       onUpdate: (p) => {
-        if (skip(popup2))
+        if (skip(popup))
           controls?.complete();
         render(p);
       },

package/dist/shared/{components-zvb11ker.js → components-hw9yk32z.js}

@@ -1,29 +1,29 @@
 import {
-  SizeProvider
-} from "./components-vb033rns.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
-  useSurface
-} from "./components-csxz9f52.js";
-import {
-  useFluidHover
-} from "./components-e46kf6cp.js";
+  GooIndicator
+} from "./components-chacnk61.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  GooIndicator
-} from "./components-kf2ehztc.js";
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2
+} from "./components-zx6b6yby.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  useFluidHover2
+} 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/navigation/tabs/index.tsx
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
@@ -50,7 +50,7 @@ function useTabsList() {
     throw new Error("TabItem must be used within a TabsList");
   return ctx;
 }
-var Tabs = forwardRef(({ value, onValueChange, selectedIndex, onSelect, defaultValue, defaultSelectedIndex, size, children, ...props }, ref) => {
+var Tabs2 = forwardRef(({ value, onValueChange, selectedIndex, onSelect, defaultValue, defaultSelectedIndex, size, children, ...props }, ref) => {
   const [valueOrder, setValueOrder] = useState([]);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   const updateValueOrder = useCallback((order) => {
@@ -88,18 +88,18 @@ var Tabs = forwardRef(({ value, onValueChange, selectedIndex, onSelect, defaultV
       children
     })
   });
-  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
     size,
     children: root
   }) : root;
 });
-Tabs.displayName = "Tabs";
-var TabsList = forwardRef(({ children, className, ...props }, ref) => {
+Tabs2.displayName = "Tabs";
+var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
   const containerRef = useRef(null);
   const isMouseInside = useRef(false);
   const shape = useShape();
-  const sizeClasses = useSize();
-  const substrate = useSurface();
+  const sizeClasses = useSize2();
+  const substrate = useSurface2();
   const indicatorLevel = Math.min(substrate + 3, 8);
   const valueOrderCtx = useContext(TabsValueOrderContext);
   const [optimisticIdx, setOptimisticIdx] = useState(null);
@@ -116,7 +116,7 @@ var TabsList = forwardRef(({ children, className, ...props }, ref) => {
     handlers,
     registerItem,
     measureItems
-  } = useFluidHover(containerRef, { axis: "x" });
+  } = useFluidHover2(containerRef, { axis: "x" });
   const registerTab = useCallback((index, _value, el) => {
     registerItem(index, el);
   }, [registerItem]);
@@ -186,24 +186,24 @@ var TabsList = forwardRef(({ children, className, ...props }, ref) => {
           return;
         setHoveredIndex(null);
       },
-      className: cn("relative inline-flex items-center select-none bg-muted", sizeClasses.segmentPad, shape.container, className),
+      className: cn2("relative inline-flex items-center select-none bg-muted", sizeClasses.segmentPad, shape.container, className),
       ...props,
       children: [
         selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
           rect: selectedRect,
-          className: cn(SURFACE_BG[indicatorLevel], shape.bg),
+          className: cn2(SURFACE_BG[indicatorLevel], shape.bg),
           shadow: SURFACE_SHADOW[indicatorLevel],
           opacity: isHovering ? 0.85 : 1
         }),
         selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
           rect: isHovering && hoverRect ? hoverRect : selectedRect,
-          className: cn("bg-hover", shape.bg),
-          transition: spring.fast,
+          className: cn2("bg-hover", shape.bg),
+          transition: spring2.fast,
           opacity: isHovering ? 0.4 : 0
         }),
         /* @__PURE__ */ jsx(AnimatePresence, {
           children: focusRect && /* @__PURE__ */ jsx(motion.div, {
-            className: cn("absolute pointer-events-none z-20 border border-focus-ring", shape.focusRing),
+            className: cn2("absolute pointer-events-none z-20 border border-focus-ring", shape.focusRing),
             initial: false,
             animate: {
               left: focusRect.left - 2,
@@ -211,10 +211,10 @@ var TabsList = forwardRef(({ children, className, ...props }, ref) => {
               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 }
             }
           })
         }),
@@ -223,10 +223,10 @@ var TabsList = forwardRef(({ children, className, ...props }, ref) => {
     })
   });
 });
-TabsList.displayName = "TabsList";
-var TabItem = forwardRef(({ value, icon: Icon, label, _index = 0, className, onClick, ...props }, ref) => {
+TabsList2.displayName = "TabsList";
+var TabItem2 = forwardRef(({ value, icon: Icon, label, _index = 0, className, onClick, ...props }, ref) => {
   const internalRef = useRef(null);
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const { registerTab, hoveredIndex, selectedValue, setOptimisticIdx } = useTabsList();
   useEffect(() => {
     registerTab(_index, value, internalRef.current);
@@ -248,16 +248,16 @@ var TabItem = forwardRef(({ value, icon: Icon, label, _index = 0, className, onC
     },
     value,
     "data-fluid-hover-index": _index,
-    className: cn("relative z-10 flex items-center px-3 cursor-pointer bg-transparent border-none outline-none", sizeClasses.segmentItem, sizeClasses.gap, className),
+    className: cn2("relative z-10 flex items-center px-3 cursor-pointer bg-transparent border-none outline-none", sizeClasses.segmentItem, sizeClasses.gap, className),
     ...props,
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,
         strokeWidth: isActive ? 2 : 1.5,
-        className: cn("transition-[color,stroke-width] duration-fast", isActive ? "text-foreground" : "text-muted-foreground")
+        className: cn2("transition-[color,stroke-width] duration-fast", isActive ? "text-foreground" : "text-muted-foreground")
       }),
       /* @__PURE__ */ jsxs("span", {
-        className: cn("inline-grid whitespace-nowrap", sizeClasses.text),
+        className: cn2("inline-grid whitespace-nowrap", sizeClasses.text),
         children: [
           /* @__PURE__ */ jsx("span", {
             className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
@@ -265,7 +265,7 @@ var TabItem = forwardRef(({ value, icon: Icon, label, _index = 0, className, onC
             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]", 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]", isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
             children: label
           })
         ]
@@ -273,16 +273,16 @@ var TabItem = forwardRef(({ value, icon: Icon, label, _index = 0, className, onC
     ]
   });
 });
-TabItem.displayName = "TabItem";
-var TabPanel = forwardRef(({ className, ...props }, ref) => {
+TabItem2.displayName = "TabItem";
+var TabPanel2 = forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(TabsPrimitive.Panel, {
     ref,
-    className: cn("outline-none", className),
+    className: cn2("outline-none", className),
     ...props
   });
 });
-TabPanel.displayName = "TabPanel";
-Object.assign(Tabs, { List: TabsList, Item: TabItem, Panel: TabPanel });
-var tabs_default = Tabs;
+TabPanel2.displayName = "TabPanel";
+Object.assign(Tabs2, { List: TabsList2, Item: TabItem2, Panel: TabPanel2 });
+var tabs_default = Tabs2;
 
-export { Tabs, TabsList, TabItem, TabPanel, tabs_default };
+export { Tabs2, TabsList2, TabItem2, TabPanel2, tabs_default };

package/dist/shared/{components-y3cqdrgy.js → components-hyq23phv.js}

@@ -1,35 +1,39 @@
 import {
-  SelectionBackgrounds,
-  useMergeSplitBlocks,
-  useSelectionRuns
-} from "./components-rc63qsy6.js";
-import {
-  SizeProvider
-} from "./components-vb033rns.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
+  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 {
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
   useControllableState
-} from "./components-dg0w8g5p.js";
+} from "./components-n7mjr357.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  useSelectionRuns,
+  useMergeSplitBlocks,
+  SelectionBackgrounds
+} from "./components-5xc2j8jz.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/checkbox-group/index.tsx
+// components/inputs/checkbox/index.tsx
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { AnimatePresence, motion } from "motion/react";
 import {
@@ -43,13 +47,7 @@ import {
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext(null);
-function useCheckboxGroup() {
-  const ctx = useContext(CheckboxGroupContext);
-  if (!ctx)
-    throw new Error("useCheckboxGroup must be used within a CheckboxGroup");
-  return ctx;
-}
-var CheckboxGroup = forwardRef(({
+var CheckboxGroup2 = forwardRef(({
   children,
   checkedIndices: checkedIndicesProp,
   defaultCheckedIndices,
@@ -72,7 +70,7 @@ var CheckboxGroup = forwardRef(({
       return next;
     });
   }, [setCheckedIndices]);
-  const hover = useFluidHover(containerRef);
+  const hover = useFluidHover2(containerRef);
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
   const checkedGroups = useSelectionRuns([...checkedIndices]);
   const [focusedIndex, setFocusedIndex] = useState(null);
@@ -125,13 +123,13 @@ var CheckboxGroup = forwardRef(({
         }
       },
       role: "group",
-      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: [
         /* @__PURE__ */ jsx(SelectionBackgrounds, {
           blocks
         }),
-        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
           hover,
           className: shape.bg
         }),
@@ -145,40 +143,56 @@ var CheckboxGroup = 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
+        })
       ]
     })
   });
-  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
     size,
     children: group
   }) : group;
 });
-CheckboxGroup.displayName = "CheckboxGroup";
-var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: onToggleProp, className, ...props }, ref) => {
+CheckboxGroup2.displayName = "CheckboxGroup";
+var Checkbox2 = forwardRef(({
+  label,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  onToggle: onToggleProp,
+  index: indexProp,
+  size,
+  className,
+  ...props
+}, ref) => {
   const internalRef = useRef(null);
   const hasMounted = useRef(false);
-  const { registerItem, activeIndex, checkedIndices, setItemChecked } = useCheckboxGroup();
-  const checked = checkedProp ?? checkedIndices.has(index);
+  const group = useContext(CheckboxGroupContext);
+  const index = useRowIndex(indexProp);
+  const [ownChecked, setOwnChecked] = useControllableState(checkedProp, defaultChecked, onCheckedChange);
+  const [hovered, setHovered] = useState(false);
+  const checked = checkedProp ?? (group ? group.checkedIndices.has(index) : ownChecked);
   const onToggle = () => {
     onToggleProp?.();
-    setItemChecked(index, !checked);
+    group?.setItemChecked(index, !checked);
+    setOwnChecked(!checked);
   };
-  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  useRegisterFluidHoverItem2(group?.registerItem, index, internalRef);
   useEffect(() => {
     hasMounted.current = true;
   }, []);
-  const isActive = activeIndex === index;
+  const isActive = group ? group.activeIndex === index : hovered;
   const skipAnimation = !hasMounted.current;
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsxs("div", {
     ref: (node) => {
@@ -194,6 +208,11 @@ var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: o
     "aria-checked": checked,
     "aria-label": label,
     onClick: onToggle,
+    onPointerEnter: (e) => {
+      if (e.pointerType === "mouse")
+        setHovered(true);
+    },
+    onPointerLeave: () => setHovered(false),
     onMouseDown: (e) => {
       const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
       if (interactive && interactive !== e.currentTarget)
@@ -207,7 +226,7 @@ var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: o
         onToggle();
       }
     },
-    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`, !group && "focus-visible:ring-1 focus-visible:ring-focus-ring", className),
     ...props,
     children: [
       /* @__PURE__ */ jsxs(CheckboxPrimitive.Root, {
@@ -215,11 +234,11 @@ var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: o
         onCheckedChange: () => onToggle(),
         tabIndex: -1,
         "aria-hidden": true,
-        className: cn("relative shrink-0 appearance-none bg-transparent p-0 border-0 outline-none cursor-pointer", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        className: cn2("relative shrink-0 appearance-none bg-transparent p-0 border-0 outline-none cursor-pointer", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
         onClick: (e) => e.stopPropagation(),
         children: [
           /* @__PURE__ */ jsx("div", {
-            className: cn("absolute inset-0 border-solid transition-all duration-fast", compact ? "rounded-sm" : "rounded-box", checked ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+            className: cn2("absolute inset-0 border-solid transition-all duration-fast", compact ? "rounded-sm" : "rounded-box", checked ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
           }),
           /* @__PURE__ */ jsx(AnimatePresence, {
             children: checked && /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
@@ -254,7 +273,7 @@ var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: o
                     initial: { pathLength: skipAnimation ? 1 : 0 },
                     animate: {
                       pathLength: 1,
-                      transition: { duration: spring.fast.duration, ease: "easeOut" }
+                      transition: { duration: spring2.fast.duration, ease: "easeOut" }
                     },
                     exit: {
                       pathLength: 0,
@@ -268,7 +287,7 @@ var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: o
         ]
       }),
       /* @__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",
@@ -276,7 +295,7 @@ var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: o
             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]", checked || isActive ? "text-foreground" : "text-muted-foreground", checked ? "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]", checked || isActive ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
             children: label
           })
         ]
@@ -284,8 +303,8 @@ var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: o
     ]
   });
 });
-CheckboxItem.displayName = "CheckboxItem";
-Object.assign(CheckboxGroup, { Item: CheckboxItem });
-var checkbox_group_default = CheckboxGroup;
+Checkbox2.displayName = "Checkbox";
+Object.assign(Checkbox2, { Group: CheckboxGroup2 });
+var checkbox_default = Checkbox2;
 
-export { CheckboxGroup, CheckboxItem, checkbox_group_default };
+export { CheckboxGroup2, Checkbox2, checkbox_default };