@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/{components-1z6tdadk.js → components-k74j4hwh.js}

@@ -1,21 +1,24 @@
+"use client";
 import {
-  defaultLocale,
-  fieldLabel,
-  dividedColumns,
-  ScrollColumn
-} from "./components-gz8zf3ec.js";
+  defaultLocale2,
+  fieldLabel2
+} from "./components-559tf7yb.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
+import {
+  dividedColumns2,
+  ScrollColumn2
+} from "./components-1k0wv53d.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
+} from "./components-dcc02hs2.js";
 
 // components/inputs/date-time/calendar/index.tsx
 import {
@@ -175,7 +178,7 @@ function DayButton({ day: _, modifiers, className, ...props }) {
     if (modifiers.focused)
       ref.current?.focus();
   }, [modifiers.focused]);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const pill = modifiers.selected && !modifiers.range_middle;
   return /* @__PURE__ */ jsx("button", {
@@ -185,7 +188,7 @@ function DayButton({ day: _, modifiers, className, ...props }) {
   });
 }
 function Calendar2({
-  locale = defaultLocale,
+  locale = defaultLocale2,
   size,
   columnsSide = "end",
   extraColumns,
@@ -260,8 +263,8 @@ function Calendar2({
   const jumpToYear = useCallback2((year) => jumpTo(new Date(year, monthInView, 1)), [jumpTo, monthInView]);
   const orientation = wide ? "vertical" : "horizontal";
   const column = wide ? "w-16 shrink-0" : "w-full";
-  const monthColumn = /* @__PURE__ */ jsx(ScrollColumn, {
-    label: fieldLabel(locale, "month"),
+  const monthColumn = /* @__PURE__ */ jsx(ScrollColumn2, {
+    label: fieldLabel2(locale, "month"),
     options: months,
     value: picked && isSameYear(picked, new Date(yearInView, 0, 1)) ? picked.getMonth() : null,
     follow: monthInView,
@@ -270,8 +273,8 @@ function Calendar2({
     orientation,
     className: column
   }, "month");
-  const yearColumn = /* @__PURE__ */ jsx(ScrollColumn, {
-    label: fieldLabel(locale, "year"),
+  const yearColumn = /* @__PURE__ */ jsx(ScrollColumn2, {
+    label: fieldLabel2(locale, "year"),
     options: years,
     value: picked?.getFullYear() ?? null,
     follow: yearInView,
@@ -283,7 +286,7 @@ function Calendar2({
   const extras = extraColumns?.(orientation);
   const before = [extraColumnsSide === "start" && extras, columnsSide === "start" && [yearColumn, monthColumn]];
   const after = [columnsSide === "end" && [monthColumn, yearColumn], extraColumnsSide === "end" && extras];
-  const side = (place) => wide ? cn2(dividedColumns, "h-full shrink-0 border-border", place === "start" ? "border-e" : "border-s") : "order-first flex w-full flex-col [&>*]:border-b [&>*]:border-border";
+  const side = (place) => wide ? cn2(dividedColumns2, "h-full shrink-0 border-border", place === "start" ? "border-e" : "border-s") : "order-first flex w-full flex-col [&>*]:border-b [&>*]:border-border";
   const grid = /* @__PURE__ */ jsxs("div", {
     className: cn2("flex min-h-0 shrink-0 flex-col", wide ? "h-full" : "flex-1 self-center"),
     children: [

package/dist/shared/components-kswxnm3h.js

@@ -0,0 +1,24 @@
+// components/navigation/sidebar/variants.ts
+import { cva } from "class-variance-authority";
+var sidebarMenuButtonVariants2 = cva("peer/menu-button relative z-10 flex w-full cursor-pointer select-none items-center gap-2 pl-2 text-left outline-none disabled:opacity-50 disabled:pointer-events-none transition-[padding] duration-fast pr-[var(--row-gutter)] group-hover/menu-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-item:pr-[var(--row-gutter-hover)] group-hover/menu-sub-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-sub-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-sub-item:pr-[var(--row-gutter-hover)]", {
+  variants: {
+    variant: {
+      default: "",
+      outline: "border border-border bg-background"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var SIDEBAR_COOKIE_NAME2 = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE2 = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH2 = "16rem";
+var SIDEBAR_WIDTH_MOBILE2 = "18rem";
+var SIDEBAR_KEYBOARD_SHORTCUT2 = "[";
+var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2 = "]";
+var SIDEBAR_MIN_WIDTH2 = 160;
+var SIDEBAR_MAX_WIDTH2 = 360;
+var SIDEBAR_COLLAPSE_SLOP2 = 56;
+var SIDEBAR_HOVER_STRIP2 = 12;
+var SIDEBAR_HOVER_TRIGGER_GAP2 = 24;
+
+export { sidebarMenuButtonVariants2, SIDEBAR_COOKIE_NAME2, SIDEBAR_COOKIE_MAX_AGE2, SIDEBAR_WIDTH2, SIDEBAR_WIDTH_MOBILE2, SIDEBAR_KEYBOARD_SHORTCUT2, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2, SIDEBAR_MIN_WIDTH2, SIDEBAR_MAX_WIDTH2, SIDEBAR_COLLAPSE_SLOP2, SIDEBAR_HOVER_STRIP2, SIDEBAR_HOVER_TRIGGER_GAP2 };

package/dist/shared/{components-jbbmdr74.js → components-mkkbbgb7.js}

@@ -1,25 +1,29 @@
+"use client";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
 import {
-  useIcon
-} from "./components-zrkzcayz.js";
+  useIcon2
+} from "./components-jqpefjsn.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
+import {
+  separator_default
+} from "./components-3h92d94m.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
+} from "./components-dcc02hs2.js";
 
 // components/card/index.tsx
 import {
@@ -51,7 +55,7 @@ var CardGroup2 = forwardRef(({
   ...props
 }, ref) => {
   const containerRef = useRef(null);
-  const shape = useShape();
+  const shape = useShape2();
   const axis = columns > 1 ? "xy" : "y";
   const hover = useFluidHover2(containerRef, { axis, gapClick: { maxDistance: 16 } });
   const { activeIndex, handlers, registerItem } = hover;
@@ -116,17 +120,18 @@ var Card2 = forwardRef(({
   dismissOnHover = true,
   onDismiss,
   size,
+  border = "none",
   index,
   className,
   children,
   ...props
 }, ref) => {
   const internalRef = useRef(null);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   const group = useContext(CardGroupContext);
-  const XIcon = useIcon("x");
+  const XIcon = useIcon2("x");
   const orientation = group?.orientation ?? "card";
   const columns = group?.columns ?? 1;
   const count = group?.count ?? 1;
@@ -151,7 +156,7 @@ var Card2 = forwardRef(({
   const inlineImage = isInline && hasImage;
   const clickable = !!href || !!onClick;
   const emphasized = selected;
-  const tileShape = !group ? cn2(shape.container, "overflow-hidden") : separated && outlined ? cn2(shape.container, "overflow-hidden border border-border/60") : "";
+  const tileShape = !group ? cn2(shape.container, "overflow-hidden", border === "outlined" && "border border-border/60") : separated && outlined ? cn2(shape.container, "overflow-hidden border border-border/60") : "";
   const overlay = clickable && !disabled ? href ? /* @__PURE__ */ jsx("a", {
     href,
     onClick,
@@ -313,9 +318,22 @@ var CardFooter2 = forwardRef(({ className, ...props }, ref) => {
   });
 });
 CardFooter2.displayName = "CardFooter";
+var CardDivider2 = forwardRef(({ className, orientation, ...props }, ref) => {
+  const { orientation: cardOrientation } = useContext(CardContext);
+  const compact = useSize2().variant === "compact";
+  const vertical = (orientation ?? (cardOrientation === "inline" ? "vertical" : "horizontal")) === "vertical";
+  return /* @__PURE__ */ jsx(separator_default, {
+    ref,
+    "data-slot": "card-divider",
+    ...props,
+    orientation: vertical ? "vertical" : "horizontal",
+    className: cn2("bg-border/60", vertical ? compact ? "my-2.5" : "my-3.5" : compact ? "mt-2.5" : "mt-3", className)
+  });
+});
+CardDivider2.displayName = "CardDivider";
 function CardMedia2({ logo, logoAlt, icon: Icon, size = 22, className }) {
   const { orientation } = useContext(CardContext);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const wrap = cn2(orientation === "inline" ? "" : "mb-2", className);
@@ -420,8 +438,8 @@ function CardButton2({
   external = false,
   disabled = false
 }) {
-  const shape = useShape();
-  const ArrowRight = useIcon("arrow-right");
+  const shape = useShape2();
+  const ArrowRight = useIcon2("arrow-right");
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const position = iconPosition ?? (external ? "end" : "start");
@@ -473,6 +491,7 @@ Object.assign(Card2, {
   Action: CardAction2,
   Content: CardContent2,
   Footer: CardFooter2,
+  Divider: CardDivider2,
   Media: CardMedia2,
   Image: CardImage2,
   Eyebrow: CardEyebrow2,
@@ -481,4 +500,4 @@ Object.assign(Card2, {
 });
 var card_default = Card2;
 
-export { CardGroup2, Card2, CardHeader2, CardTitle2, CardDescription2, CardAction2, CardContent2, CardFooter2, CardMedia2, CardImage2, CardEyebrow2, CardFeature2, CardButton2, card_default };
+export { CardGroup2, Card2, CardHeader2, CardTitle2, CardDescription2, CardAction2, CardContent2, CardFooter2, CardDivider2, CardMedia2, CardImage2, CardEyebrow2, CardFeature2, CardButton2, card_default };

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

@@ -1,35 +1,39 @@
+"use client";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  GooIndicator
-} from "./components-chacnk61.js";
+  GooIndicator2
+} from "./components-pw06rbxq.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
+import {
+  isDisabledRow2
+} from "./components-h6p86be3.js";
 import {
-  IndexedRows,
-  useRowIndex
-} from "./components-ta7shw28.js";
+  IndexedRows2,
+  useRowIndex2
+} from "./components-r8eqs7gz.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-dcc02hs2.js";
 
 // components/inputs/radio/index.tsx
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
@@ -42,10 +46,11 @@ import {
   isValidElement,
   useContext,
   useEffect,
+  useId,
   useRef,
   useState
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 var RadioGroupContext = createContext(null);
 function useRadioGroupContext() {
   const ctx = useContext(RadioGroupContext);
@@ -61,22 +66,62 @@ var RadioGroup2 = forwardRef(({
   value: valueProp,
   defaultValue,
   onValueChange: onValueChangeProp,
+  disabled = false,
+  name,
+  required,
   size,
   className,
   ...props
 }, ref) => {
-  const [selectedIndex, selectIndex] = useControllableState(selectedIndexProp, defaultSelectedIndex, onSelectedIndexChange);
-  const [value, onValueChange] = useControllableState(valueProp, defaultValue, onValueChangeProp);
+  const [selectedIndex, selectIndex] = useControllableState2(selectedIndexProp, defaultSelectedIndex, onSelectedIndexChange);
+  const [value, onValueChange] = useControllableState2(valueProp, defaultValue, onValueChangeProp);
   const containerRef = useRef(null);
   const childValues = Children.toArray(children).filter(isValidElement).map((child) => child.props.value);
-  const hover = useFluidHover2(containerRef);
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
   const [focusedIndex, setFocusedIndex] = useState(null);
   const resolvedSelectedIndex = value !== undefined ? childValues.findIndex((childValue) => childValue === value) : selectedIndex ?? -1;
   const hasSelection = resolvedSelectedIndex >= 0 || Children.toArray(children).filter(isValidElement).some((child) => child.props.selected === true);
   const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
   const selectedRect = resolvedSelectedIndex >= 0 ? itemRects[resolvedSelectedIndex] : null;
-  const shape = useShape();
+  const shape = useShape2();
+  const hasRows = Children.toArray(children).some((child) => isValidElement(child) && child.props.label !== undefined);
+  const setRef = (node) => {
+    containerRef.current = node;
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  };
+  if (!hasRows) {
+    const bare = /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+      value: {
+        registerItem,
+        activeIndex,
+        selectedIndex: null,
+        selectedValue: value,
+        onValueChange,
+        hasSelection,
+        selectIndex,
+        disabled
+      },
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive, {
+        ref: setRef,
+        value: value ?? null,
+        onValueChange: (v) => onValueChange(v),
+        disabled,
+        name,
+        required,
+        className: cn2("relative flex flex-col gap-2", className),
+        ...props,
+        children
+      })
+    });
+    return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+      size,
+      children: bare
+    }) : bare;
+  }
   const content = /* @__PURE__ */ jsxs("div", {
     ref: (node) => {
       containerRef.current = node;
@@ -104,7 +149,7 @@ var RadioGroup2 = forwardRef(({
       setActiveIndex(null);
     },
     onKeyDown: (e) => {
-      const items = Array.from(containerRef.current?.querySelectorAll("[data-fluid-hover-index]") ?? []);
+      const items = Array.from(containerRef.current?.querySelectorAll('[data-fluid-hover-index]:not([aria-disabled="true"])') ?? []);
       const currentIdx = items.indexOf(e.target);
       if (currentIdx === -1)
         return;
@@ -128,10 +173,11 @@ var RadioGroup2 = forwardRef(({
       }
     },
     role: "radiogroup",
-    className: cn2("relative flex flex-col w-72 max-w-full select-none", className),
+    "aria-disabled": disabled || undefined,
+    className: cn2("relative flex flex-col w-72 max-w-full select-none transition-[opacity] duration-fast", disabled && "opacity-50 pointer-events-none", className),
     ...props,
     children: [
-      selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+      selectedRect && /* @__PURE__ */ jsx(GooIndicator2, {
         rect: selectedRect,
         className: cn2("bg-active", shape.bg)
       }),
@@ -156,7 +202,7 @@ var RadioGroup2 = forwardRef(({
           }
         })
       }),
-      /* @__PURE__ */ jsx(IndexedRows, {
+      /* @__PURE__ */ jsx(IndexedRows2, {
         children
       })
     ]
@@ -174,11 +220,15 @@ var RadioGroup2 = forwardRef(({
         selectedValue: value,
         onValueChange,
         hasSelection,
-        selectIndex
+        selectIndex,
+        disabled
       },
       children: /* @__PURE__ */ jsx(RadioGroupPrimitive, {
         value,
         onValueChange: (v) => onValueChange(v),
+        disabled,
+        name,
+        required,
         render: content
       })
     }));
@@ -189,47 +239,118 @@ var RadioGroup2 = forwardRef(({
       activeIndex,
       selectedIndex: selectedIndex ?? null,
       hasSelection,
-      selectIndex
+      selectIndex,
+      disabled
     },
     children: content
   }));
 });
 RadioGroup2.displayName = "RadioGroup";
-var Radio2 = forwardRef(({ label, index: indexProp, selected, onSelect, value, className, ...props }, ref) => {
+function RadioCircle({ selected, active, compact, skipAnimation, bare }) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: cn2("absolute inset-0 rounded-full border-solid transition-all duration-fast", selected ? bare ? "border-[1.5px] border-control" : "border-[1.5px] border-transparent" : active ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children: selected && /* @__PURE__ */ jsx(motion.div, {
+          className: "absolute inset-0 flex items-center justify-center",
+          initial: {
+            opacity: skipAnimation ? 1 : 0,
+            scale: skipAnimation ? 1 : 0.3
+          },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.3, transition: { duration: 0.04 } },
+          transition: spring2.fast,
+          children: /* @__PURE__ */ jsx("div", {
+            className: cn2("rounded-full bg-foreground", compact ? "w-[7px] h-[7px]" : "w-[8px] h-[8px]")
+          })
+        })
+      })
+    ]
+  });
+}
+var Radio2 = forwardRef(({ label, index: indexProp, selected, onSelect, value, disabled: disabledProp, className, ...props }, ref) => {
   const internalRef = useRef(null);
   const hasMounted = useRef(false);
-  const { registerItem, activeIndex, selectedIndex, selectedValue, onValueChange, hasSelection, selectIndex } = useRadioGroupContext();
-  const index = useRowIndex(indexProp);
-  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  const {
+    registerItem,
+    activeIndex,
+    selectedIndex,
+    selectedValue,
+    onValueChange,
+    hasSelection,
+    selectIndex,
+    disabled: groupDisabled
+  } = useRadioGroupContext();
+  const index = useRowIndex2(indexProp);
+  const labelId = useId();
+  const [hovered, setHovered] = useState(false);
+  const bare = label === undefined;
+  const disabled = disabledProp ?? groupDisabled;
+  useRegisterFluidHoverItem2(bare ? undefined : registerItem, index, internalRef);
   useEffect(() => {
     hasMounted.current = true;
   }, []);
-  const isActive = activeIndex === index;
+  const isActive = bare ? hovered : activeIndex === index;
   const skipAnimation = !hasMounted.current;
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const isSelected = value !== undefined && selectedValue !== undefined ? selectedValue === value : selected ?? selectedIndex === index;
   const handleSelect = () => {
+    if (disabled)
+      return;
     if (value !== undefined) {
       onValueChange?.(value);
     }
     onSelect?.();
     selectIndex(index);
   };
+  const setRef = (node) => {
+    internalRef.current = node;
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  };
+  const circle = /* @__PURE__ */ jsx(RadioCircle, {
+    selected: isSelected,
+    active: isActive,
+    compact,
+    skipAnimation,
+    bare
+  });
+  if (bare) {
+    return /* @__PURE__ */ jsx(RadioPrimitive.Root, {
+      ref: setRef,
+      render: /* @__PURE__ */ jsx("div", {}),
+      value,
+      disabled,
+      onClick: () => {
+        if (!disabled)
+          onSelect?.();
+      },
+      onPointerEnter: (e) => {
+        if (e.pointerType === "mouse")
+          setHovered(true);
+      },
+      onPointerLeave: () => setHovered(false),
+      className: cn2("relative inline-flex shrink-0 cursor-pointer rounded-full outline-none transition-[opacity] duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", compact ? "size-3.5" : "size-4", disabled && "opacity-50 pointer-events-none", className),
+      ...props,
+      children: circle
+    });
+  }
   return /* @__PURE__ */ jsxs("div", {
-    ref: (node) => {
-      internalRef.current = node;
-      if (typeof ref === "function")
-        ref(node);
-      else if (ref)
-        ref.current = node;
-    },
+    ref: setRef,
     "data-fluid-hover-index": index,
-    tabIndex: isSelected ? 0 : !hasSelection && index === 0 ? 0 : -1,
+    "data-disabled": disabled || undefined,
+    tabIndex: disabled ? -1 : isSelected ? 0 : !hasSelection && index === 0 ? 0 : -1,
     role: "radio",
     "aria-checked": isSelected,
-    "aria-label": label,
+    "aria-disabled": disabled || undefined,
+    "aria-label": typeof label === "string" ? label : undefined,
+    "aria-labelledby": typeof label !== "string" ? labelId : undefined,
     onClick: handleSelect,
     onMouseDown: (e) => {
       const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -244,31 +365,12 @@ var Radio2 = forwardRef(({ label, index: indexProp, selected, onSelect, value, c
         handleSelect();
       }
     },
-    className: cn2(`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 transition-[opacity] duration-fast`, disabled && "pointer-events-none", disabled && !groupDisabled && "opacity-50", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs("div", {
+      /* @__PURE__ */ jsx("div", {
         className: cn2("relative shrink-0", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            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, {
-              className: "absolute inset-0 flex items-center justify-center",
-              initial: {
-                opacity: skipAnimation ? 1 : 0,
-                scale: skipAnimation ? 1 : 0.3
-              },
-              animate: { opacity: 1, scale: 1 },
-              exit: { opacity: 0, scale: 0.3, transition: { duration: 0.04 } },
-              transition: spring2.fast,
-              children: /* @__PURE__ */ jsx("div", {
-                className: cn2("rounded-full bg-foreground", compact ? "w-[7px] h-[7px]" : "w-[8px] h-[8px]")
-              })
-            })
-          })
-        ]
+        children: circle
       }),
       /* @__PURE__ */ jsxs("span", {
         className: cn2("inline-grid", sizeClasses.text),
@@ -279,6 +381,7 @@ var Radio2 = forwardRef(({ label, index: indexProp, selected, onSelect, value, c
             children: label
           }),
           /* @__PURE__ */ jsx("span", {
+            id: labelId,
             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,6 +389,7 @@ var Radio2 = forwardRef(({ label, index: indexProp, selected, onSelect, value, c
       }),
       value !== undefined && /* @__PURE__ */ jsx(RadioPrimitive.Root, {
         value,
+        disabled,
         className: "sr-only",
         tabIndex: -1,
         "aria-hidden": true