@justanarthur/modo-ui 0.1.0 → 0.2.0

package/dist/shared/{components-x2xyckd5.js → components-9jvzzvt1.js}

@@ -1,22 +1,22 @@
 import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  useShape
-} from "./components-7zp99w5d.js";
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
 import {
-  useReduceMotion
-} from "./components-nnnd2xef.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
 
 // lib/date-locale.ts
 import { isValid, parse } from "date-fns";
@@ -78,7 +78,7 @@ function ScrollColumn({
   const centred = useRef(false);
   const reduceMotion = useReduceMotion();
   const horizontal = orientation === "horizontal";
-  const hover = useFluidHover(containerRef, { axis: horizontal ? "x" : "y" });
+  const hover = useFluidHover2(containerRef, { axis: horizontal ? "x" : "y" });
   const shape = useShape();
   const axis = useRef(horizontal);
   useEffect(() => {
@@ -133,16 +133,16 @@ function ScrollColumn({
     onPointerLeave: () => {
       pointerInside.current = false;
     },
-    className: cn("scrollbar-hide [--scroll-fade-size:24px]", horizontal ? "overflow-x-auto overflow-y-hidden scroll-fade-x" : "overflow-y-auto overflow-x-hidden scroll-fade", className),
+    className: cn2("scrollbar-hide [--scroll-fade-size:24px]", horizontal ? "overflow-x-auto overflow-y-hidden scroll-fade-x" : "overflow-y-auto overflow-x-hidden scroll-fade", className),
     children: /* @__PURE__ */ jsxs("div", {
       ref: containerRef,
       onMouseMove: hover.handlers.onMouseMove,
       onMouseEnter: hover.handlers.onMouseEnter,
       onMouseLeave: hover.handlers.onMouseLeave,
       onClick: hover.handlers.onClick,
-      className: cn("relative flex p-1", horizontal ? "w-max flex-row" : "flex-col"),
+      className: cn2("relative flex p-1", horizontal ? "w-max flex-row" : "flex-col"),
       children: [
-        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
           hover,
           className: shape.bg
         }),
@@ -171,9 +171,9 @@ function ScrollColumnItem({
   onSelect
 }) {
   const ref = useRef(null);
-  useRegisterFluidHoverItem(registerItem, index, ref);
+  useRegisterFluidHoverItem2(registerItem, index, ref);
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   return /* @__PURE__ */ jsxs("button", {
     ref,
     type: "button",
@@ -184,7 +184,7 @@ function ScrollColumnItem({
     "data-value": option.value,
     "data-fluid-hover-index": index,
     onClick: onSelect,
-    className: cn("relative z-[1] flex shrink-0 items-center justify-center px-2 tabular-nums whitespace-nowrap outline-none", "transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", sizeClasses.segmentItem, sizeClasses.text, shape.item, band && !selected && "bg-accent/20 dark:bg-accent/12", selected && "bg-active", band && band !== "single" && "rounded-none", band === "start" && (horizontal ? "rounded-s-lg" : "rounded-t-lg"), band === "end" && (horizontal ? "rounded-e-lg" : "rounded-b-lg"), selected ? "text-foreground weight-semibold" : band ? "text-foreground" : "text-muted-foreground"),
+    className: cn2("relative z-[1] flex shrink-0 items-center justify-center px-2 tabular-nums whitespace-nowrap outline-none", "transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", sizeClasses.segmentItem, sizeClasses.text, shape.item, band && !selected && "bg-accent/20 dark:bg-accent/12", selected && "bg-active", band && band !== "single" && "rounded-none", band === "start" && (horizontal ? "rounded-s-lg" : "rounded-t-lg"), band === "end" && (horizontal ? "rounded-e-lg" : "rounded-b-lg"), selected ? "text-foreground weight-semibold" : band ? "text-foreground" : "text-muted-foreground"),
     children: [
       selected && /* @__PURE__ */ jsx("span", {
         "aria-hidden": true,

package/dist/shared/{components-bf2d9k02.js → components-apdwtweq.js}

@@ -1,25 +1,25 @@
 import {
-  SizeProvider
-} from "./components-vb033rns.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  useIcon
-} from "./components-m5br529r.js";
-import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
 import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  SizeProvider2
+} from "./components-jjw69c4c.js";
 
 // components/card/index.tsx
 import {
@@ -40,7 +40,7 @@ var CardContext = createContext({
   clickable: false,
   hasImage: false
 });
-var CardGroup = forwardRef(({
+var CardGroup2 = forwardRef(({
   orientation = "card",
   columns = 1,
   border = "none",
@@ -53,7 +53,7 @@ var CardGroup = forwardRef(({
   const containerRef = useRef(null);
   const shape = useShape();
   const axis = columns > 1 ? "xy" : "y";
-  const hover = useFluidHover(containerRef, { axis, gapClick: { maxDistance: 16 } });
+  const hover = useFluidHover2(containerRef, { axis, gapClick: { maxDistance: 16 } });
   const { activeIndex, handlers, registerItem } = hover;
   const childArray = Children.toArray(children).filter(isValidElement);
   const count = childArray.length;
@@ -85,7 +85,7 @@ var CardGroup = forwardRef(({
       ...props,
       "data-slot": "card-group",
       "data-orientation": orientation,
-      className: cn("relative grid", outlined && !separated && `border border-border/60 overflow-hidden ${shape.container}`, separated ? "gap-2" : "gap-0", className),
+      className: cn2("relative grid", outlined && !separated && `border border-border/60 overflow-hidden ${shape.container}`, separated ? "gap-2" : "gap-0", className),
       style: {
         gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`
       },
@@ -94,18 +94,18 @@ var CardGroup = forwardRef(({
       onMouseLeave: fluidHover ? handlers.onMouseLeave : undefined,
       onClick: fluidHover ? handlers.onClick : undefined,
       children: [
-        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
           hover,
           hidden: !fluidHover,
-          className: cn("z-0", shape.container)
+          className: cn2("z-0", shape.container)
         }),
         indexed
       ]
     })
   });
 });
-CardGroup.displayName = "CardGroup";
-var Card = forwardRef(({
+CardGroup2.displayName = "CardGroup";
+var Card2 = forwardRef(({
   onClick,
   href,
   external,
@@ -123,7 +123,7 @@ var Card = forwardRef(({
 }, ref) => {
   const internalRef = useRef(null);
   const shape = useShape();
-  const sizeClasses = useSize(size);
+  const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   const group = useContext(CardGroupContext);
   const XIcon = useIcon("x");
@@ -136,7 +136,7 @@ var Card = forwardRef(({
   const activeIndex = group?.activeIndex ?? null;
   const selectedIndex = group?.selectedIndex ?? -1;
   const registerItem = href || onClick ? group?.registerItem : undefined;
-  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
   const col = index !== undefined ? index % columns : 0;
   const hasBelow = index !== undefined && index + columns < count;
   const hasRight = index !== undefined && col < columns - 1 && index + 1 < count;
@@ -146,12 +146,12 @@ var Card = forwardRef(({
   const showBottom = divided && hasBelow && !(touchesBelow(activeIndex ?? -1) || touchesBelow(selectedIndex));
   const showRight = divided && hasRight && !(touchesRight(activeIndex ?? -1) || touchesRight(selectedIndex));
   const isInline = orientation === "inline";
-  const isCardImage = (child) => isValidElement(child) && (child.type === CardImage || child.type?.displayName === "CardImage");
+  const isCardImage = (child) => isValidElement(child) && (child.type === CardImage2 || child.type?.displayName === "CardImage");
   const hasImage = Children.toArray(children).some(isCardImage);
   const inlineImage = isInline && hasImage;
   const clickable = !!href || !!onClick;
   const emphasized = selected;
-  const tileShape = !group ? cn(shape.container, "overflow-hidden") : separated && outlined ? cn(shape.container, "overflow-hidden border border-border/60") : "";
+  const tileShape = !group ? cn2(shape.container, "overflow-hidden") : separated && outlined ? cn2(shape.container, "overflow-hidden border border-border/60") : "";
   const overlay = clickable && !disabled ? href ? /* @__PURE__ */ jsx("a", {
     href,
     onClick,
@@ -176,7 +176,7 @@ var Card = forwardRef(({
       children: [
         image,
         /* @__PURE__ */ jsx("div", {
-          className: cn("flex min-w-0 flex-1 flex-col justify-center gap-2", compact ? "py-2.5 pr-3" : "py-3.5 pr-4"),
+          className: cn2("flex min-w-0 flex-1 flex-col justify-center gap-2", compact ? "py-2.5 pr-3" : "py-3.5 pr-4"),
           children: rest
         })
       ]
@@ -197,12 +197,12 @@ var Card = forwardRef(({
       "data-selected": selected || undefined,
       "data-orientation": orientation,
       "aria-disabled": disabled || undefined,
-      className: cn("group/card relative z-10 min-w-0 min-h-[60px]", inlineImage ? cn("flex flex-row items-center", compact ? "gap-2.5" : "gap-3") : isInline ? cn("flex flex-row items-center", compact ? "gap-2.5 pl-3" : "gap-3 pl-4") : cn("flex flex-col", compact ? "pb-3" : "pb-4"), !group && clickable && !disabled && "transition-colors duration-fast hover:bg-hover", dismissible && isInline && (dismissOnHover ? "[&:hover_[data-slot=card-header]]:pr-10 [&:focus-within_[data-slot=card-header]]:pr-10" : "[&_[data-slot=card-header]]:pr-10"), tileShape, disabled && "opacity-50 pointer-events-none", className),
+      className: cn2("group/card relative z-10 min-w-0 min-h-[60px]", inlineImage ? cn2("flex flex-row items-center", compact ? "gap-2.5" : "gap-3") : isInline ? cn2("flex flex-row items-center", compact ? "gap-2.5 pl-3" : "gap-3 pl-4") : cn2("flex flex-col", compact ? "pb-3" : "pb-4"), !group && clickable && !disabled && "transition-colors duration-fast hover:bg-hover", dismissible && isInline && (dismissOnHover ? "[&:hover_[data-slot=card-header]]:pr-10 [&:focus-within_[data-slot=card-header]]:pr-10" : "[&_[data-slot=card-header]]:pr-10"), tileShape, disabled && "opacity-50 pointer-events-none", className),
       ...props,
       children: [
         selected && /* @__PURE__ */ jsx("span", {
           "aria-hidden": true,
-          className: cn("absolute inset-0 -z-10 bg-active pointer-events-none", shape.container)
+          className: cn2("absolute inset-0 -z-10 bg-active pointer-events-none", shape.container)
         }),
         showBottom && /* @__PURE__ */ jsx("span", {
           "aria-hidden": true,
@@ -210,7 +210,7 @@ var Card = forwardRef(({
         }),
         showRight && /* @__PURE__ */ jsx("span", {
           "aria-hidden": true,
-          className: cn("absolute top-0 right-0 w-px bg-border/60 pointer-events-none -z-10", showBottom ? "bottom-px" : "bottom-0")
+          className: cn2("absolute top-0 right-0 w-px bg-border/60 pointer-events-none -z-10", showBottom ? "bottom-px" : "bottom-0")
         }),
         overlay,
         body,
@@ -218,7 +218,7 @@ var Card = forwardRef(({
           type: "button",
           onClick: onDismiss,
           "aria-label": "Dismiss",
-          className: cn("absolute right-2 top-2 z-30 flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer outline-none transition-colors duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", hasImage ? "bg-card/70 backdrop-blur-sm hover:bg-card" : "hover:bg-hover", dismissOnHover && "pointer-events-none opacity-0 transition-opacity duration-fast group-hover/card:pointer-events-auto group-hover/card:opacity-100 group-focus-within/card:pointer-events-auto group-focus-within/card:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100", shape.button),
+          className: cn2("absolute right-2 top-2 z-30 flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer outline-none transition-colors duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", hasImage ? "bg-card/70 backdrop-blur-sm hover:bg-card" : "hover:bg-hover", dismissOnHover && "pointer-events-none opacity-0 transition-opacity duration-fast group-hover/card:pointer-events-auto group-hover/card:opacity-100 group-focus-within/card:pointer-events-auto group-focus-within/card:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100", shape.button),
           children: /* @__PURE__ */ jsx(XIcon, {
             size: compact ? 13 : 15,
             strokeWidth: 1.5
@@ -227,103 +227,103 @@ var Card = forwardRef(({
       ]
     })
   });
-  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
     size,
     children: card
   }) : card;
 });
-Card.displayName = "Card";
-var CardHeader = forwardRef(({ className, ...props }, ref) => {
+Card2.displayName = "Card";
+var CardHeader2 = forwardRef(({ className, ...props }, ref) => {
   const { orientation, hasImage } = useContext(CardContext);
   const inlineImage = orientation === "inline" && hasImage;
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsx("div", {
     ref,
     "data-slot": "card-header",
-    className: cn("grid auto-rows-min items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto]", inlineImage ? "min-w-0" : orientation === "inline" ? cn("min-w-0 flex-1", compact ? "py-2.5" : "py-3.5") : compact ? "px-3 pt-3" : "px-4 pt-4", className),
+    className: cn2("grid auto-rows-min items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto]", inlineImage ? "min-w-0" : orientation === "inline" ? cn2("min-w-0 flex-1", compact ? "py-2.5" : "py-3.5") : compact ? "px-3 pt-3" : "px-4 pt-4", className),
     ...props
   });
 });
-CardHeader.displayName = "CardHeader";
-var CardTitle = forwardRef(({ className, children, ...props }, ref) => {
+CardHeader2.displayName = "CardHeader";
+var CardTitle2 = forwardRef(({ className, children, ...props }, ref) => {
   const { emphasized, orientation } = useContext(CardContext);
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const trim = orientation === "inline" ? "[text-box:trim-both_cap_alphabetic]" : "";
   return /* @__PURE__ */ jsxs("span", {
     ref,
     "data-slot": "card-title",
-    className: cn("inline-grid grid-cols-[minmax(0,1fr)] leading-snug", compact ? "text-subtitle-compact" : "text-subtitle", className),
+    className: cn2("inline-grid grid-cols-[minmax(0,1fr)] leading-snug", compact ? "text-subtitle-compact" : "text-subtitle", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx("span", {
-        className: cn("col-start-1 row-start-1 invisible min-w-0 overflow-hidden text-ellipsis", trim, "weight-semibold"),
+        className: cn2("col-start-1 row-start-1 invisible min-w-0 overflow-hidden text-ellipsis", trim, "weight-semibold"),
         "aria-hidden": "true",
         children
       }),
       /* @__PURE__ */ jsx("span", {
-        className: cn("col-start-1 row-start-1 min-w-0 overflow-hidden text-ellipsis text-foreground transition-[font-variation-settings] duration-fast", trim, emphasized ? "weight-semibold" : "weight-normal"),
+        className: cn2("col-start-1 row-start-1 min-w-0 overflow-hidden text-ellipsis text-foreground transition-[font-variation-settings] duration-fast", trim, emphasized ? "weight-semibold" : "weight-normal"),
         children
       })
     ]
   });
 });
-CardTitle.displayName = "CardTitle";
-var CardDescription = forwardRef(({ className, ...props }, ref) => {
-  const sizeClasses = useSize();
+CardTitle2.displayName = "CardTitle";
+var CardDescription2 = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsx("p", {
     ref,
     "data-slot": "card-description",
-    className: cn("leading-normal text-muted-foreground", compact ? "text-subtitle-compact" : "text-subtitle", className),
+    className: cn2("leading-normal text-muted-foreground", compact ? "text-subtitle-compact" : "text-subtitle", className),
     ...props
   });
 });
-CardDescription.displayName = "CardDescription";
-var CardAction = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+CardDescription2.displayName = "CardDescription";
+var CardAction2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
   ref,
   "data-slot": "card-action",
-  className: cn("relative z-30 col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+  className: cn2("relative z-30 col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
   ...props
 }));
-CardAction.displayName = "CardAction";
-var CardContent = forwardRef(({ className, ...props }, ref) => {
+CardAction2.displayName = "CardAction";
+var CardContent2 = forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useContext(CardContext);
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsx("div", {
     ref,
     "data-slot": "card-content",
-    className: cn(orientation === "inline" ? "" : compact ? "px-3 pt-2.5" : "px-4 pt-3", className),
+    className: cn2(orientation === "inline" ? "" : compact ? "px-3 pt-2.5" : "px-4 pt-3", className),
     ...props
   });
 });
-CardContent.displayName = "CardContent";
-var CardFooter = forwardRef(({ className, ...props }, ref) => {
+CardContent2.displayName = "CardContent";
+var CardFooter2 = forwardRef(({ className, ...props }, ref) => {
   const { orientation, hasImage } = useContext(CardContext);
   const inlineImage = orientation === "inline" && hasImage;
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsx("div", {
     ref,
     "data-slot": "card-footer",
-    className: cn("relative z-30 flex items-center gap-1", inlineImage ? "flex-wrap" : orientation === "inline" ? cn("shrink-0 ml-auto", compact ? "pr-3" : "pr-4") : cn("flex-wrap", compact ? "px-3 pt-2.5" : "px-4 pt-3"), className),
+    className: cn2("relative z-30 flex items-center gap-1", inlineImage ? "flex-wrap" : orientation === "inline" ? cn2("shrink-0 ml-auto", compact ? "pr-3" : "pr-4") : cn2("flex-wrap", compact ? "px-3 pt-2.5" : "px-4 pt-3"), className),
     ...props
   });
 });
-CardFooter.displayName = "CardFooter";
-function CardMedia({ logo, logoAlt, icon: Icon, size = 22, className }) {
+CardFooter2.displayName = "CardFooter";
+function CardMedia2({ logo, logoAlt, icon: Icon, size = 22, className }) {
   const { orientation } = useContext(CardContext);
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
-  const wrap = cn(orientation === "inline" ? "" : "mb-2", className);
+  const wrap = cn2(orientation === "inline" ? "" : "mb-2", className);
   if (logo) {
     const logos = Array.isArray(logo) ? logo : [logo];
     return /* @__PURE__ */ jsx("span", {
       "data-slot": "card-media",
-      className: cn("inline-flex items-center gap-1.5 shrink-0", wrap),
+      className: cn2("inline-flex items-center gap-1.5 shrink-0", wrap),
       children: logos.map((src, i) => /* @__PURE__ */ jsxs("span", {
         className: "inline-flex items-center gap-1.5",
         children: [
@@ -336,7 +336,7 @@ function CardMedia({ logo, logoAlt, icon: Icon, size = 22, className }) {
             alt: logoAlt ?? "",
             width: size,
             height: size,
-            className: cn("object-contain", shape.bg),
+            className: cn2("object-contain", shape.bg),
             style: { width: size, height: size }
           })
         ]
@@ -346,7 +346,7 @@ function CardMedia({ logo, logoAlt, icon: Icon, size = 22, className }) {
   if (Icon) {
     return /* @__PURE__ */ jsx("span", {
       "data-slot": "card-media",
-      className: cn("inline-flex items-center justify-center shrink-0 size-8 bg-hover", shape.bg, wrap),
+      className: cn2("inline-flex items-center justify-center shrink-0 size-8 bg-hover", shape.bg, wrap),
       children: /* @__PURE__ */ jsx(Icon, {
         size: compact ? 16 : 18,
         strokeWidth: 1.5,
@@ -356,32 +356,32 @@ function CardMedia({ logo, logoAlt, icon: Icon, size = 22, className }) {
   }
   return null;
 }
-function CardImage({ src, alt, className }) {
+function CardImage2({ src, alt, className }) {
   const { orientation } = useContext(CardContext);
   return /* @__PURE__ */ jsx("img", {
     src,
     alt: alt ?? "",
     "data-slot": "card-image",
-    className: cn("object-cover rounded-xs", orientation === "inline" ? "size-40 shrink-0" : "w-full aspect-[16/9]", className)
+    className: cn2("object-cover rounded-xs", orientation === "inline" ? "size-40 shrink-0" : "w-full aspect-[16/9]", className)
   });
 }
-CardImage.displayName = "CardImage";
-var CardEyebrow = forwardRef(({ className, ...props }, ref) => {
-  const compact = useSize().variant === "compact";
+CardImage2.displayName = "CardImage";
+var CardEyebrow2 = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSize2().variant === "compact";
   return /* @__PURE__ */ jsx("span", {
     ref,
     "data-slot": "card-eyebrow",
-    className: cn(compact ? "text-caption-compact" : "text-caption", "uppercase tracking-wide text-muted-foreground", "weight-semibold", className),
+    className: cn2(compact ? "text-caption-compact" : "text-caption", "uppercase tracking-wide text-muted-foreground", "weight-semibold", className),
     ...props
   });
 });
-CardEyebrow.displayName = "CardEyebrow";
-function CardFeature({ icon: Icon, title, description }) {
-  const sizeClasses = useSize();
+CardEyebrow2.displayName = "CardEyebrow";
+function CardFeature2({ icon: Icon, title, description }) {
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsxs("div", {
     "data-slot": "card-feature",
-    className: cn("flex items-start", sizeClasses.gap),
+    className: cn2("flex items-start", sizeClasses.gap),
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,
@@ -392,11 +392,11 @@ function CardFeature({ icon: Icon, title, description }) {
         className: "flex flex-col gap-0.5 min-w-0",
         children: [
           /* @__PURE__ */ jsx("span", {
-            className: cn("text-foreground [text-box:trim-both_cap_alphabetic]", sizeClasses.text, "weight-medium"),
+            className: cn2("text-foreground [text-box:trim-both_cap_alphabetic]", sizeClasses.text, "weight-medium"),
             children: title
           }),
           description && /* @__PURE__ */ jsx("span", {
-            className: cn("leading-relaxed text-muted-foreground", compact ? "text-caption-compact" : "text-caption"),
+            className: cn2("leading-relaxed text-muted-foreground", compact ? "text-caption-compact" : "text-caption"),
             children: description
           })
         ]
@@ -410,7 +410,7 @@ var CARD_BUTTON_VARIANTS = {
   ghost: "text-muted-foreground hover:text-foreground hover:bg-hover active:bg-active",
   link: "text-foreground underline-offset-4 hover:underline !px-0 !h-auto"
 };
-function CardButton({
+function CardButton2({
   children,
   onClick,
   href,
@@ -422,7 +422,7 @@ function CardButton({
 }) {
   const shape = useShape();
   const ArrowRight = useIcon("arrow-right");
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const position = iconPosition ?? (external ? "end" : "start");
   const glyph = Icon ? /* @__PURE__ */ jsx(Icon, {
@@ -446,7 +446,7 @@ function CardButton({
       externalGlyph
     ]
   });
-  const classes = cn("group/action relative z-30 inline-flex items-center justify-center gap-1.5 h-7 px-2.5 cursor-pointer outline-none", compact ? "text-caption-compact" : "text-caption", "weight-medium", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", shape.button, CARD_BUTTON_VARIANTS[variant]);
+  const classes = cn2("group/action relative z-30 inline-flex items-center justify-center gap-1.5 h-7 px-2.5 cursor-pointer outline-none", compact ? "text-caption-compact" : "text-caption", "weight-medium", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", shape.button, CARD_BUTTON_VARIANTS[variant]);
   if (href) {
     return /* @__PURE__ */ jsx("a", {
       href,
@@ -465,20 +465,20 @@ function CardButton({
     children: inner
   });
 }
-Object.assign(Card, {
-  Group: CardGroup,
-  Header: CardHeader,
-  Title: CardTitle,
-  Description: CardDescription,
-  Action: CardAction,
-  Content: CardContent,
-  Footer: CardFooter,
-  Media: CardMedia,
-  Image: CardImage,
-  Eyebrow: CardEyebrow,
-  Feature: CardFeature,
-  Button: CardButton
+Object.assign(Card2, {
+  Group: CardGroup2,
+  Header: CardHeader2,
+  Title: CardTitle2,
+  Description: CardDescription2,
+  Action: CardAction2,
+  Content: CardContent2,
+  Footer: CardFooter2,
+  Media: CardMedia2,
+  Image: CardImage2,
+  Eyebrow: CardEyebrow2,
+  Feature: CardFeature2,
+  Button: CardButton2
 });
-var card_default = Card;
+var card_default = Card2;
 
-export { CardGroup, Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, CardMedia, CardImage, CardEyebrow, CardFeature, CardButton, card_default };
+export { CardGroup2, Card2, CardHeader2, CardTitle2, CardDescription2, CardAction2, CardContent2, CardFooter2, CardMedia2, CardImage2, CardEyebrow2, CardFeature2, CardButton2, card_default };

package/dist/shared/{components-hjkrv00c.js → components-asr5pg50.js}

@@ -1,18 +1,18 @@
 import {
-  useControllableState
-} from "./components-dg0w8g5p.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
   GooIndicator
-} from "./components-kf2ehztc.js";
+} from "./components-chacnk61.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/inputs/switch/index.tsx
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
@@ -38,7 +38,7 @@ var METRICS = {
 };
 var THUMB_OFFSET = 2;
 var DRAG_DEAD_ZONE = 2;
-var Switch = forwardRef(({
+var Switch2 = forwardRef(({
   label,
   checked,
   defaultChecked = false,
@@ -58,7 +58,7 @@ var Switch = forwardRef(({
   const labelId = useId();
   const [hovered, setHovered] = useState(false);
   const [pressed, setPressed] = useState(false);
-  const sizeClasses = useSize(size);
+  const sizeClasses = useSize2(size);
   const m = METRICS[sizeClasses.variant];
   const thumbTravel = m.trackWidth - m.thumbSize - THUMB_OFFSET * 2;
   const dragging = useRef(false);
@@ -139,7 +139,7 @@ var Switch = forwardRef(({
   }, [setDragX]);
   return /* @__PURE__ */ jsxs("div", {
     ref,
-    className: cn("relative z-10 flex items-center cursor-pointer select-none touch-none", sizeClasses.gap, sizeClasses.px, sizeClasses.variant === "compact" ? "py-1" : "py-2", disabled && "opacity-50 pointer-events-none", className),
+    className: cn2("relative z-10 flex items-center cursor-pointer select-none touch-none", sizeClasses.gap, sizeClasses.px, sizeClasses.variant === "compact" ? "py-1" : "py-2", disabled && "opacity-50 pointer-events-none", className),
     onPointerEnter: (e) => {
       if (e.pointerType === "mouse")
         setHovered(true);
@@ -161,7 +161,7 @@ var Switch = forwardRef(({
         "aria-labelledby": labelId,
         disabled,
         tabIndex: 0,
-        className: cn("relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent"),
+        className: cn2("relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent"),
         style: {
           width: m.trackWidth,
           height: m.trackHeight
@@ -173,19 +173,19 @@ var Switch = forwardRef(({
             rect: thumb,
             className: "rounded-full bg-thumb",
             shadow: "shadow-thumb",
-            transition: dragX === null ? thumbTransition ?? spring.moderate : false
+            transition: dragX === null ? thumbTransition ?? spring2.moderate : false
           })
         })
       }),
       /* @__PURE__ */ jsx("span", {
         id: labelId,
-        className: cn("[text-box:trim-both_cap_alphabetic] transition-[color] duration-fast", sizeClasses.text, isChecked ? "text-foreground" : "text-muted-foreground"),
+        className: cn2("[text-box:trim-both_cap_alphabetic] transition-[color] duration-fast", sizeClasses.text, isChecked ? "text-foreground" : "text-muted-foreground"),
         children: label
       })
     ]
   });
 });
-Switch.displayName = "Switch";
-var switch_default = Switch;
+Switch2.displayName = "Switch";
+var switch_default = Switch2;
 
-export { Switch, switch_default };
+export { Switch2, switch_default };