@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/dist/shared/{components-9sttq78t.js → components-b2wyq2cq.js}

@@ -1,26 +1,22 @@
-"use client";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSizeVariant2
-} from "./components-h83az0bz.js";
-import {
-  spring2
-} from "./components-3ey0hzpb.js";
+} from "./components-0sn7ypjw.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
-  legacySizeAliases2,
-  buttonVariants2
-} from "./components-4vfm04wq.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/button/index.tsx
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
 import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
 import {
   cloneElement,
@@ -30,29 +26,63 @@ import {
   useRef
 } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var buttonVariants2 = cva([
+  "group relative isolate inline-flex items-center justify-center outline-none cursor-pointer",
+  "transition-[color,opacity] duration-fast",
+  "disabled:opacity-50 disabled:pointer-events-none",
+  "focus-visible:ring-1 focus-visible:ring-focus-ring"
+], {
+  variants: {
+    variant: {
+      primary: "text-background",
+      secondary: "text-foreground",
+      tertiary: "text-foreground",
+      ghost: "text-muted-foreground hover:text-foreground"
+    },
+    size: {
+      default: "h-9 px-4 text-body gap-1.5",
+      compact: "h-7 px-3 text-body-compact gap-1",
+      icon: "h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4",
+      "icon-compact": "h-7 w-7 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5"
+    },
+    iconLeft: { true: "" },
+    iconRight: { true: "" }
+  },
+  compoundVariants: [
+    { size: "compact", iconLeft: true, className: "pl-2" },
+    { size: "default", iconLeft: true, className: "pl-3" },
+    { size: "compact", iconRight: true, className: "pr-2" },
+    { size: "default", iconRight: true, className: "pr-3" }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "default"
+  }
+});
+var legacySizeAliases = {
+  sm: "compact",
+  md: "default",
+  lg: "default",
+  "icon-sm": "icon-compact",
+  "icon-lg": "icon"
+};
 var bgVariants = {
-  primary: "[--btn-bg:var(--primary)] group-hover:[--btn-bg:var(--primary-hover)] group-active:[--btn-bg:var(--primary-active)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg),var(--shadow-button-primary)] group-active:shadow-[0_0_0_0px_var(--btn-bg),var(--shadow-button-primary)]",
+  primary: "[--btn-bg:var(--foreground)] group-hover:[--btn-bg:color-mix(in_oklab,var(--foreground)_90%,var(--background))] group-active:[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
   secondary: "[--btn-bg:var(--accent)] group-hover:[--btn-bg:color-mix(in_oklab,var(--accent)_80%,var(--background))] group-active:[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
   tertiary: "bg-transparent shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-hover:bg-hover group-active:bg-active group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]",
-  ghost: "bg-transparent shadow-[0_0_0_1px_transparent] group-hover:bg-hover group-hover:shadow-[0_0_0_1px_var(--hover)] group-active:bg-active group-active:shadow-[0_0_0_0px_var(--active)]",
-  destructive: "bg-destructive-wash group-hover:bg-destructive-wash-hover group-active:bg-destructive-wash-active [--btn-bg:var(--destructive-wash)] group-hover:[--btn-bg:var(--destructive-wash-hover)] group-active:[--btn-bg:var(--destructive-wash-active)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
-  success: "bg-success-wash group-hover:bg-success-wash-hover group-active:bg-success-wash-active [--btn-bg:var(--success-wash)] group-hover:[--btn-bg:var(--success-wash-hover)] group-active:[--btn-bg:var(--success-wash-active)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
-  link: "bg-transparent"
+  ghost: "bg-transparent shadow-[0_0_0_1px_transparent] group-hover:bg-hover group-hover:shadow-[0_0_0_1px_var(--hover)] group-active:bg-active group-active:shadow-[0_0_0_0px_var(--active)]"
 };
 var activeBgVariants = {
-  primary: "[--btn-bg:var(--primary-active)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg),var(--shadow-button-primary)] group-active:shadow-[0_0_0_0px_var(--btn-bg),var(--shadow-button-primary)]",
+  primary: "[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
   secondary: "[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
   tertiary: "bg-active shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]",
-  ghost: "bg-active shadow-[0_0_0_1px_var(--active)] group-active:shadow-[0_0_0_0px_var(--active)]",
-  destructive: "bg-destructive-wash-active [--btn-bg:var(--destructive-wash-active)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
-  success: "bg-success-wash-active [--btn-bg:var(--success-wash-active)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
-  link: "bg-transparent"
+  ghost: "bg-active shadow-[0_0_0_1px_var(--active)] group-active:shadow-[0_0_0_0px_var(--active)]"
 };
 var { exit: _exit, ...enter } = spring2.moderate;
 function useLoadingMorph(loading) {
   const surface = useRef(null);
   const progress = useMotionValue(loading ? 1 : 0);
-  const reduced = useReduceMotion2();
+  const reduced = useReduceMotion();
   useLayoutEffect(() => {
     const el = surface.current;
     const root = el?.parentElement;
@@ -99,14 +129,13 @@ var Button2 = forwardRef(({
   const asChildElement = asChild && isValidElement(children) ? children : null;
   const label = asChildElement ? asChildElement.props.children : children;
   const contextSize = useSizeVariant2();
-  const resolvedSize = size ? legacySizeAliases2[size] ?? size : contextSize === "compact" ? "compact" : "default";
+  const resolvedSize = size ? legacySizeAliases[size] ?? size : contextSize === "compact" ? "compact" : "default";
   const isIconOnly = resolvedSize === "icon" || resolvedSize === "icon-compact";
   const isCompact = resolvedSize === "compact" || resolvedSize === "icon-compact";
   const iconSize = isCompact ? 14 : 16;
   const spinnerSizeClass = isCompact ? "h-7 w-7" : "h-9 w-9";
-  const shape = useShape2();
-  const surfaceVariant = variant === "outline" ? "tertiary" : variant ?? "primary";
-  const bgClass = active ? activeBgVariants[surfaceVariant] : bgVariants[surfaceVariant];
+  const shape = useShape();
+  const bgClass = active ? activeBgVariants[variant ?? "primary"] : bgVariants[variant ?? "primary"];
   const surface = useLoadingMorph(loading);
   const internals = /* @__PURE__ */ jsxs(Fragment, {
     children: [
@@ -176,23 +205,13 @@ var Button2 = forwardRef(({
     size: resolvedSize,
     iconLeft: !isIconOnly && !!LeadingIcon,
     iconRight: !isIconOnly && !!TrailingIcon
-  }), shape.button, "aria-disabled:opacity-50 aria-disabled:pointer-events-none", active && variant === "link" && "decoration-current", className);
+  }), shape.button, className);
   if (asChildElement) {
     const childProps = asChildElement.props;
-    const onClick = props.onClick ?? childProps.onClick;
     return cloneElement(asChildElement, {
       ...props,
       ref,
       "aria-busy": loading || undefined,
-      "aria-disabled": loading || props["aria-disabled"] || childProps["aria-disabled"],
-      onClick: (event) => {
-        if (loading) {
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        onClick?.(event);
-      },
       className: cn2(rootClassName, childProps.className),
       style: { ...style, ...childProps.style }
     }, internals);
@@ -201,7 +220,6 @@ var Button2 = forwardRef(({
     ref,
     className: rootClassName,
     disabled: disabled || loading,
-    focusableWhenDisabled: loading,
     "aria-busy": loading || undefined,
     style,
     ...props,
@@ -211,4 +229,4 @@ var Button2 = forwardRef(({
 Button2.displayName = "Button";
 var button_default = Button2;
 
-export { Button2, button_default };
+export { buttonVariants2, Button2, button_default };

package/dist/shared/{components-pv1dyrtn.js → components-b3c5et5b.js}

@@ -1,45 +1,40 @@
-"use client";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  spring2
-} from "./components-3ey0hzpb.js";
-import {
-  GOO_BLUR_RATIO2
-} from "./components-m06yq8wk.js";
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
   FluidHoverHighlight2
-} from "./components-dc5q749x.js";
+} from "./components-kvr7f9hy.js";
 import {
-  useIcon2
-} from "./components-jqpefjsn.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
-  GooFilter2
-} from "./components-c7rwx0ap.js";
+  GooFilter
+} from "./components-0q0sqfh4.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
-import {
-  slotRender2,
-  slotId2
-} from "./components-mrbaxt8q.js";
+} from "./components-0sn7ypjw.js";
 import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/accordion/index.tsx
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
@@ -115,8 +110,8 @@ var AccordionGroup2 = forwardRef((props, ref) => {
   }, []);
   const sp = props;
   const mp = props;
-  const [singleValue, setSingleValue] = useControllableState2(type === "single" ? sp.value : undefined, type === "single" ? sp.defaultValue ?? "" : "", type === "single" ? sp.onValueChange : undefined);
-  const [multipleValue, setMultipleValue] = useControllableState2(type === "multiple" ? mp.value : undefined, type === "multiple" ? mp.defaultValue ?? [] : [], type === "multiple" ? mp.onValueChange : undefined);
+  const [singleValue, setSingleValue] = useControllableState(type === "single" ? sp.value : undefined, type === "single" ? sp.defaultValue ?? "" : "", type === "single" ? sp.onValueChange : undefined);
+  const [multipleValue, setMultipleValue] = useControllableState(type === "multiple" ? mp.value : undefined, type === "multiple" ? mp.defaultValue ?? [] : [], type === "multiple" ? mp.onValueChange : undefined);
   const openValuesList = type === "multiple" ? multipleValue : singleValue ? [singleValue] : [];
   const openValuesKey = openValuesList.join(",");
   const openValues = useMemo(() => new Set(openValuesList), [openValuesKey]);
@@ -135,7 +130,7 @@ var AccordionGroup2 = forwardRef((props, ref) => {
     return rect ? [[idx, rect]] : [];
   })) : new Map;
   const isHoveringNonOpen = activeIndex !== null && !openItemRects.has(activeIndex);
-  const shape = useShape2();
+  const shape = useShape();
   const {
     value: _value,
     defaultValue: _defaultValue,
@@ -310,8 +305,8 @@ var Accordion2 = forwardRef(({
   className,
   ...props
 }, ref) => {
-  const [singleValue, setSingleValue] = useControllableState2(type === "single" ? value : undefined, type === "single" ? defaultValue ?? "" : "", type === "single" ? onValueChange : undefined);
-  const [multipleValue, setMultipleValue] = useControllableState2(type === "multiple" ? value : undefined, type === "multiple" ? defaultValue ?? [] : [], type === "multiple" ? onValueChange : undefined);
+  const [singleValue, setSingleValue] = useControllableState(type === "single" ? value : undefined, type === "single" ? defaultValue ?? "" : "", type === "single" ? onValueChange : undefined);
+  const [multipleValue, setMultipleValue] = useControllableState(type === "multiple" ? value : undefined, type === "multiple" ? defaultValue ?? [] : [], type === "multiple" ? onValueChange : undefined);
   const openValues = new Set(type === "multiple" ? multipleValue : singleValue ? [singleValue] : []);
   const baseValue = [...openValues];
   const baseOnValueChange = (next) => {
@@ -395,13 +390,11 @@ var AccordionItem2 = forwardRef(({ value, index, disabled, highlight: highlightP
   });
 });
 AccordionItem2.displayName = "AccordionItem";
-var AccordionTrigger2 = forwardRef(({ children, className, icon, weightShift = true, render, asChild, nativeButton, ...props }, ref) => {
-  const el = slotRender2(render, asChild, children);
-  const ChevronRight = useIcon2("chevron-right");
-  const Glyph = icon === false ? null : icon ?? ChevronRight;
+var AccordionTrigger2 = forwardRef(({ children, className, ...props }, ref) => {
+  const ChevronRight = useIcon("chevron-right");
   const groupCtx = useAccordionGroup();
   const { index, isOpen, triggerRef, highlight, press } = useAccordionItemContext();
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const [isHovered, setIsHovered] = useState(false);
   const isActive = groupCtx?.grouped ? groupCtx.activeIndex === index : isHovered;
@@ -414,11 +407,10 @@ var AccordionTrigger2 = forwardRef(({ children, className, icon, weightShift = t
     render: /* @__PURE__ */ jsx("div", {}),
     children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
       ref,
-      className: el ? className : cn2(`relative z-10 flex items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} ${sizeClasses.variant === "compact" ? "py-1" : "py-2"} w-full cursor-pointer outline-none select-none`, !groupCtx?.grouped && "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-0", className),
+      className: cn2(`relative z-10 flex items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} ${sizeClasses.variant === "compact" ? "py-1" : "py-2"} w-full cursor-pointer outline-none select-none`, !groupCtx?.grouped && "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-0", className),
       ...props,
-      ...el ? { render: el, nativeButton, id: slotId2(el, props.id) } : {},
       children: [
-        el ? undefined : weightShift ? /* @__PURE__ */ jsxs("span", {
+        /* @__PURE__ */ jsxs("span", {
           className: cn2("inline-grid flex-1 text-left", sizeClasses.text),
           children: [
             /* @__PURE__ */ jsx("span", {
@@ -431,15 +423,12 @@ var AccordionTrigger2 = forwardRef(({ children, className, icon, weightShift = t
               children
             })
           ]
-        }) : /* @__PURE__ */ jsx("span", {
-          className: cn2("block min-w-0 flex-1 text-left transition-[color] duration-fast", sizeClasses.text, isOpen || isActive ? "text-foreground" : "text-muted-foreground"),
-          children
         }),
-        !el && Glyph && /* @__PURE__ */ jsx(motion.span, {
+        /* @__PURE__ */ jsx(motion.span, {
           className: "shrink-0 inline-flex items-center justify-center",
           animate: { rotate: isOpen ? 90 : 0 },
           transition: spring2.fast,
-          children: /* @__PURE__ */ jsx(Glyph, {
+          children: /* @__PURE__ */ jsx(ChevronRight, {
             size: sizeClasses.icon,
             strokeWidth: isOpen || isActive ? 2 : 1.5,
             className: cn2("transition-[color,stroke-width] duration-fast", isOpen || isActive ? "text-foreground" : "text-muted-foreground")
@@ -500,12 +489,12 @@ function place(el, { x, y, w, h, r }) {
   el.style.height = `${h}px`;
   el.style.borderRadius = `${r}px`;
 }
-var AccordionContent2 = forwardRef(({ children, className, effect = "goo", tier = "slow", contentClassName, ...props }, ref) => {
+var AccordionContent2 = forwardRef(({ children, className, effect = "goo", tier = "slow", ...props }, ref) => {
   const groupCtx = useAccordionGroup();
   const { isOpen, highlight, press } = useAccordionItemContext();
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
-  const reduceMotion = useReduceMotion2();
+  const reduceMotion = useReduceMotion();
   const gooId = `accordion-goo-${useId().replace(/:/g, "")}`;
   const progress = useMotionValue(isOpen ? 1 : 0);
   const tint = useTransform(progress, [0, 0.3], [0, 1]);
@@ -632,9 +621,9 @@ var AccordionContent2 = forwardRef(({ children, className, effect = "goo", tier
                       ref: refs.rest,
                       className: cn2("absolute inset-0 bg-accent", shape.bg)
                     }),
-                    effect === "goo" && /* @__PURE__ */ jsx(GooFilter2, {
+                    effect === "goo" && /* @__PURE__ */ jsx(GooFilter, {
                       id: gooId,
-                      blur: shape.bgRadius * GOO_BLUR_RATIO2
+                      blur: shape.bgRadius * GOO_BLUR_RATIO
                     }),
                     /* @__PURE__ */ jsxs("div", {
                       ref: refs.goo,
@@ -657,7 +646,7 @@ var AccordionContent2 = forwardRef(({ children, className, effect = "goo", tier
             }),
             /* @__PURE__ */ jsx("div", {
               ref: refs.content,
-              className: cn2("relative pt-1 text-muted-foreground", sizeClasses.px, sizeClasses.text, sizeClasses.variant === "compact" ? "pb-2.5" : "pb-3", contentClassName),
+              className: cn2("relative pt-1 text-muted-foreground", sizeClasses.px, sizeClasses.text, sizeClasses.variant === "compact" ? "pb-2.5" : "pb-3"),
               children
             })
           ]

package/dist/shared/{components-rrbpmfx4.js → components-c6s6b43g.js}

@@ -1,7 +1,6 @@
-"use client";
 // lib/use-is-mobile.ts
 import { useEffect, useState } from "react";
-function useIsMobile2(breakpoint) {
+function useIsMobile(breakpoint) {
   const [isMobile, setIsMobile] = useState(undefined);
   useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
@@ -13,4 +12,4 @@ function useIsMobile2(breakpoint) {
   return !!isMobile;
 }
 
-export { useIsMobile2 };
+export { useIsMobile };

package/dist/shared/{components-pwayrkw9.js → components-chacnk61.js}

@@ -1,17 +1,16 @@
-"use client";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  spring2
-} from "./components-3ey0hzpb.js";
-import {
-  GOO_MATRIX2,
-  GOO_BLUR_RATIO2
-} from "./components-m06yq8wk.js";
+  GOO_MATRIX,
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // lib/goo-indicator.tsx
 import { animate, motion, useMotionValue } from "motion/react";
@@ -19,7 +18,7 @@ import { useId, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 var COVERAGE = "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 255 0";
 var NECK = 0.5;
-function union2(a, b) {
+function union(a, b) {
   if (!a)
     return b;
   const left = Math.min(a.left, b.left);
@@ -58,9 +57,9 @@ function toTarget(rect) {
 }
 function blurOf(el, rect) {
   const r = Number.parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
-  return Math.min(r, rect.width / 2, rect.height / 2) * GOO_BLUR_RATIO2;
+  return Math.min(r, rect.width / 2, rect.height / 2) * GOO_BLUR_RATIO;
 }
-function GooLayer2({ active, blur, box, fill, children }) {
+function GooLayer({ active, blur, box, fill, children }) {
   const id = `goo-${useId().replace(/:/g, "")}`;
   const flood = useRef(null);
   const probe = useRef(null);
@@ -95,7 +94,7 @@ function GooLayer2({ active, blur, box, fill, children }) {
             }),
             /* @__PURE__ */ jsx("feColorMatrix", {
               in: "blur",
-              values: GOO_MATRIX2,
+              values: GOO_MATRIX,
               result: "goo"
             }),
             /* @__PURE__ */ jsx("feFlood", {
@@ -122,7 +121,7 @@ function GooLayer2({ active, blur, box, fill, children }) {
     ]
   });
 }
-function GooIndicator2({
+function GooIndicator({
   rect,
   from,
   className,
@@ -130,7 +129,7 @@ function GooIndicator2({
   transition = spring2.moderate,
   opacity = 1
 }) {
-  const reduced = useReduceMotion2();
+  const reduced = useReduceMotion();
   const start = from ?? rect;
   const x = useMotionValue(start.left);
   const y = useMotionValue(start.top);
@@ -167,7 +166,7 @@ function GooIndicator2({
   const melting = trails.length > 0;
   const linger = travel ? { ...travel, delay: (travel.duration ?? 0) / 3 } : undefined;
   const shape = cn2("pointer-events-none absolute top-0 left-0", className);
-  const box = trails.reduce((all, trail) => union2(all, trail.from), union2(read(), rect));
+  const box = trails.reduce((all, trail) => union(all, trail.from), union(read(), rect));
   const drop = (trail) => setTrails((list) => list.filter((t) => t.id !== trail.id));
   return /* @__PURE__ */ jsxs(motion.div, {
     "aria-hidden": true,
@@ -190,7 +189,7 @@ function GooIndicator2({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs(GooLayer2, {
+      /* @__PURE__ */ jsxs(GooLayer, {
         active: melting,
         blur,
         box,
@@ -213,4 +212,5 @@ function GooIndicator2({
     ]
   });
 }
-export { union2, GooLayer2, GooIndicator2 };
+
+export { union, GooLayer, GooIndicator };

package/dist/shared/{components-71nbt03m.js → components-cv16mryv.js}

@@ -1,12 +1,7 @@
-"use client";
-import {
-  claimShapeRadius2
-} from "./components-gx4h5rbb.js";
-
 // lib/shape-context.tsx
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var shapeMap2 = {
+var shapeMap = {
   pill: {
     variant: "pill",
     item: "rounded-[20px]",
@@ -33,18 +28,12 @@ var shapeMap2 = {
   }
 };
 var ShapeContext = createContext(null);
-function useShape2() {
+function useShape() {
   const ctx = useContext(ShapeContext);
   if (!ctx)
-    return shapeMap2.rounded;
+    return shapeMap.rounded;
   return ctx.classes;
 }
-function useShapeContext2() {
-  const ctx = useContext(ShapeContext);
-  if (!ctx)
-    throw new Error("useShapeContext must be used within a ShapeProvider");
-  return ctx;
-}
 function ShapeProvider2({ children, defaultShape = "rounded" }) {
   const [shape, setShapeState] = useState(defaultShape);
   const transitionTimeoutRef = useRef(null);
@@ -60,22 +49,14 @@ function ShapeProvider2({ children, defaultShape = "rounded" }) {
   const setShape = useCallback((next) => {
     transitionShape(() => setShapeState(next));
   }, [transitionShape]);
-  const claimRef = useRef(null);
   useEffect(() => {
-    const radius = `${shapeMap2[shape].bgRadius}px`;
-    if (claimRef.current)
-      claimRef.current.update(radius);
-    else
-      claimRef.current = claimShapeRadius2(document.documentElement, radius);
+    document.documentElement.style.setProperty("--shape-input-radius", `${shapeMap[shape].bgRadius}px`);
   }, [shape]);
-  useEffect(() => () => {
-    claimRef.current?.release();
-    claimRef.current = null;
-  }, []);
-  const value = useMemo(() => ({ shape, setShape, classes: shapeMap2[shape] }), [shape, setShape]);
+  const value = useMemo(() => ({ shape, setShape, classes: shapeMap[shape] }), [shape, setShape]);
   return /* @__PURE__ */ jsx(ShapeContext.Provider, {
     value,
     children
   });
 }
-export { shapeMap2, useShape2, useShapeContext2, ShapeProvider2 };
+
+export { shapeMap, useShape, ShapeProvider2 };

package/dist/shared/{components-hgv6tygd.js → components-d6xtjht3.js}

@@ -1,44 +1,41 @@
-"use client";
-import {
-  spring2
-} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
   FluidHoverHighlight2
-} from "./components-dc5q749x.js";
+} from "./components-kvr7f9hy.js";
 import {
-  useIcon2
-} from "./components-jqpefjsn.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
-import {
-  surfaceClasses2
-} from "./components-vf45j12c.js";
+} from "./components-0sn7ypjw.js";
 import {
+  surfaceClasses2,
   SurfaceProvider2
-} from "./components-dhgk6mbt.js";
+} from "./components-zx6b6yby.js";
 import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
 import {
   Button2
-} from "./components-9sttq78t.js";
+} from "./components-b2wyq2cq.js";
 import {
   Tooltip2
-} from "./components-2krsc300.js";
+} from "./components-ng72k97e.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/AI/input-message/index.tsx
 import { AnimatePresence, motion, Reorder, useReducedMotion } from "motion/react";
@@ -83,7 +80,7 @@ async function renderPdfFirstPage(file, targetWidth) {
   return canvas.toDataURL("image/png");
 }
 function FileThumbnail2({ file, size, className }) {
-  const shape = useShape2();
+  const shape = useShape();
   const isImage = file.type.startsWith("image/");
   const isPdf = file.type === "application/pdf";
   const [imageUrl, setImageUrl] = useState(null);
@@ -197,7 +194,7 @@ var DEFAULT_ACCEPT = "image/png,image/jpeg,application/pdf";
 var NO_FILES = [];
 var NO_QUEUE = [];
 var FilePreviewTile = forwardRef(function FilePreviewTile({ file, onRemove, size }, ref) {
-  const XIcon = useIcon2("x");
+  const XIcon = useIcon("x");
   return /* @__PURE__ */ jsxs2(motion.div, {
     ref,
     layout: true,
@@ -232,8 +229,8 @@ var FilePreviewTile = forwardRef(function FilePreviewTile({ file, onRemove, size
   });
 });
 function QueuedRow({ item, index, total, reduceMotion, isTouch, onEdit, onRemove, onMove }) {
-  const XIcon = useIcon2("x");
-  const ImageIcon = useIcon2("image");
+  const XIcon = useIcon("x");
+  const ImageIcon = useIcon("image");
   const compactStep = useSize2().variant === "compact";
   const fileCount = item.files.length;
   const label = item.text || `${fileCount} attachment${fileCount === 1 ? "" : "s"}`;
@@ -299,8 +296,8 @@ function QueuedRow({ item, index, total, reduceMotion, isTouch, onEdit, onRemove
   });
 }
 function SuggestionRow({ text, index, active, keyHint, optionId, registerItem, onSelect }) {
-  const EnterIcon = useIcon2("corner-down-left");
-  const ArrowDownIcon = useIcon2("arrow-down");
+  const EnterIcon = useIcon("corner-down-left");
+  const ArrowDownIcon = useIcon("arrow-down");
   const compactStep = useSize2().variant === "compact";
   const ref = useRef(null);
   useRegisterFluidHoverItem2(registerItem, index, ref);
@@ -362,9 +359,9 @@ var InputMessage2 = forwardRef(({
   style,
   ...props
 }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   const compactStep = useSize2(size).variant === "compact";
-  const ArrowUpIcon = useIcon2("arrow-up");
+  const ArrowUpIcon = useIcon("arrow-up");
   const reduceMotion = useReducedMotion() ?? false;
   const isTouch = useIsTouch();
   const textareaRef = useRef(null);
@@ -379,15 +376,15 @@ var InputMessage2 = forwardRef(({
     ...restTextareaProps
   } = textareaProps ?? {};
   const valueControlled = valueProp !== undefined;
-  const [value, setValue] = useControllableState2(valueProp, defaultValue ?? "", onValueChange);
+  const [value, setValue] = useControllableState(valueProp, defaultValue ?? "", onValueChange);
   const filesControlled = filesProp !== undefined;
   const supportsFiles = onFilesChange !== undefined || defaultFiles !== undefined;
-  const [filesArr, setFiles] = useControllableState2(filesProp, defaultFiles ?? NO_FILES, onFilesChange);
+  const [filesArr, setFiles] = useControllableState(filesProp, defaultFiles ?? NO_FILES, onFilesChange);
   const statusEnabled = statusProp !== undefined || defaultStatus !== undefined;
-  const [statusValue, setStatus] = useControllableState2(statusProp, defaultStatus ?? "idle", onStatusChange);
+  const [statusValue, setStatus] = useControllableState(statusProp, defaultStatus ?? "idle", onStatusChange);
   const status = statusEnabled ? statusValue : undefined;
   const streaming = status === "streaming";
-  const [queueArr, setQueue] = useControllableState2(queueProp, defaultQueue ?? NO_QUEUE, onQueueChange);
+  const [queueArr, setQueue] = useControllableState(queueProp, defaultQueue ?? NO_QUEUE, onQueueChange);
   const queueRef = useRef(queueArr);
   queueRef.current = queueArr;
   const supportsQueue = statusEnabled && (onQueueChange !== undefined || defaultQueue !== undefined);
@@ -662,8 +659,6 @@ var InputMessage2 = forwardRef(({
     const target = e.target;
     if (target === textareaRef.current)
       return;
-    if (!e.currentTarget.contains(target))
-      return;
     if (target.closest('button, a, input, select, textarea, [contenteditable], [role="button"], [data-im-queue]')) {
       return;
     }