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

package/dist/shared/components-c9yr4ed1.js

@@ -0,0 +1,44 @@
+// components/badge/variants.ts
+import { cva } from "class-variance-authority";
+var badgeColors2 = {
+  gray: "var(--badge-gray)",
+  red: "var(--badge-red)",
+  orange: "var(--badge-orange)",
+  amber: "var(--badge-amber)",
+  yellow: "var(--badge-yellow)",
+  lime: "var(--badge-lime)",
+  green: "var(--badge-green)",
+  emerald: "var(--badge-emerald)",
+  teal: "var(--badge-teal)",
+  cyan: "var(--badge-cyan)",
+  blue: "var(--badge-blue)",
+  indigo: "var(--badge-indigo)",
+  violet: "var(--badge-violet)",
+  purple: "var(--badge-purple)",
+  fuchsia: "var(--badge-fuchsia)",
+  pink: "var(--badge-pink)",
+  rose: "var(--badge-rose)"
+};
+var badgeVariants2 = cva("inline-flex items-center weight-medium whitespace-nowrap", {
+  variants: {
+    variant: {
+      solid: "",
+      dot: "border border-border text-foreground",
+      outline: "border border-border text-foreground"
+    },
+    size: {
+      default: "h-6 px-2.5 text-caption gap-1.5",
+      compact: "h-5 px-2 text-caption-compact gap-1"
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "default"
+  }
+});
+var legacySizeAliases3 = {
+  sm: "compact",
+  md: "default",
+  lg: "default"
+};
+export { badgeColors2, badgeVariants2, legacySizeAliases3 };

package/dist/shared/components-d3shbwqq.js

@@ -0,0 +1,95 @@
+"use client";
+import {
+  useReduceMotion2
+} from "./components-de99ykt7.js";
+import {
+  useSize2
+} from "./components-h83az0bz.js";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+
+// components/progress/index.tsx
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { motion } from "motion/react";
+import {
+  forwardRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SPINNER_BOX = { default: "size-9", compact: "size-7" };
+var CAPTION = { default: "text-caption", compact: "text-caption-compact" };
+var Spinner2 = forwardRef(({ size: sizeProp, label = "Loading", className, ...props }, ref) => {
+  const size = useSize2(sizeProp);
+  const reduced = useReduceMotion2();
+  return /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+    ref,
+    value: null,
+    "aria-label": label,
+    render: /* @__PURE__ */ jsx("span", {}),
+    ...props,
+    className: cn2("inline-flex shrink-0 text-current", SPINNER_BOX[size.variant], className),
+    children: /* @__PURE__ */ jsx("svg", {
+      className: "size-full",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", {
+        d: "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z",
+        stroke: "currentColor",
+        strokeWidth: "1.125",
+        strokeLinecap: "round",
+        pathLength: "100",
+        className: reduced ? "progress-breathe" : "progress-spin"
+      })
+    })
+  });
+});
+Spinner2.displayName = "Spinner";
+var Progress2 = forwardRef(({ value = null, min = 0, max = 100, label, showValue = false, format, size: sizeProp, className, ...props }, ref) => {
+  const size = useSize2(sizeProp);
+  const reduced = useReduceMotion2();
+  const share = value === null ? null : Math.min(Math.max((value - min) / (max - min), 0), 1);
+  const { exit: _exit, ...enter } = spring2.moderate;
+  return /* @__PURE__ */ jsxs(ProgressPrimitive.Root, {
+    ref,
+    value,
+    min,
+    max,
+    format,
+    ...props,
+    className: cn2("flex w-full flex-col gap-2", className),
+    children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", {
+        className: cn2("flex items-baseline justify-between gap-3", CAPTION[size.variant]),
+        children: [
+          label && /* @__PURE__ */ jsx(ProgressPrimitive.Label, {
+            className: "min-w-0 truncate text-foreground",
+            children: label
+          }),
+          showValue && value !== null && /* @__PURE__ */ jsx(ProgressPrimitive.Value, {
+            className: "ml-auto shrink-0 tabular-nums text-muted-foreground"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(ProgressPrimitive.Track, {
+        className: "relative h-1 w-full overflow-hidden rounded-full bg-progress-track",
+        children: share === null ? /* @__PURE__ */ jsx("span", {
+          className: cn2("absolute inset-y-0 left-0 rounded-full bg-foreground", reduced ? "w-full progress-breathe" : "w-2/5 progress-sweep")
+        }) : /* @__PURE__ */ jsx(motion.span, {
+          className: "absolute inset-0 rounded-full bg-foreground",
+          initial: false,
+          animate: { x: `${(share - 1) * 100}%` },
+          transition: reduced ? { duration: 0 } : enter
+        })
+      })
+    ]
+  });
+});
+Progress2.displayName = "Progress";
+Object.assign(Progress2, { Spinner: Spinner2 });
+var progress_default = Progress2;
+
+export { Spinner2, Progress2, progress_default };

package/dist/shared/{components-jjw69c4c.js → components-dcc02hs2.js}

@@ -1,7 +1,10 @@
+"use client";
 import {
-  sizeMap2,
-  SizeContext
-} from "./components-0sn7ypjw.js";
+  sizeMap2
+} from "./components-34txk9rj.js";
+import {
+  SizeContext2
+} from "./components-h83az0bz.js";
 
 // primitives/sizes/index.tsx
 import { useCallback, useMemo, useState } from "react";
@@ -20,7 +23,7 @@ function SizeProvider2({
     setInternalSize(next);
   }, [isControlled]);
   const value = useMemo(() => ({ size: resolved, setSize, classes: sizeMap2[resolved] }), [resolved, setSize]);
-  return /* @__PURE__ */ jsx(SizeContext.Provider, {
+  return /* @__PURE__ */ jsx(SizeContext2.Provider, {
     value,
     children
   });

package/dist/shared/{components-men63rwj.js → components-de99ykt7.js}

@@ -1,9 +1,10 @@
+"use client";
 // lib/reduced-motion.ts
 import { useReducedMotion, useReducedMotionConfig } from "motion/react";
-function useReduceMotion() {
+function useReduceMotion2() {
   const os = useReducedMotion() ?? false;
   const config = useReducedMotionConfig() ?? false;
   return os || config;
 }
 
-export { useReduceMotion };
+export { useReduceMotion2 };

package/dist/shared/components-dhgk6mbt.js

@@ -0,0 +1,16 @@
+"use client";
+// lib/surface-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var SurfaceContext = createContext(1);
+function useSurface2() {
+  return useContext(SurfaceContext);
+}
+function SurfaceProvider2({ value, children }) {
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, {
+    value: Math.max(1, Math.min(8, value)),
+    children
+  });
+}
+
+export { useSurface2, SurfaceProvider2 };

package/dist/shared/components-drxrtnp2.js

@@ -0,0 +1,25 @@
+"use client";
+// lib/use-touch-primary.tsx
+import { useEffect, useState } from "react";
+function useTouchPrimary2() {
+  const [isTouchPrimary, setIsTouchPrimary] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    const controller = new AbortController;
+    const { signal } = controller;
+    const handleTouch = () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
+      setIsTouchPrimary(hasTouch && prefersTouch);
+    };
+    const mq = window.matchMedia("(pointer: coarse)");
+    mq.addEventListener("change", handleTouch, { signal });
+    window.addEventListener("pointerdown", handleTouch, { signal });
+    handleTouch();
+    return () => controller.abort();
+  }, []);
+  return isTouchPrimary;
+}
+
+export { useTouchPrimary2 };

package/dist/shared/{components-6p8tfcd6.js → components-ds9fqat9.js}

@@ -1,22 +1,25 @@
+"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 {
-  useControllableState
-} from "./components-n7mjr357.js";
+  dividedColumns2,
+  ScrollColumn2
+} from "./components-1k0wv53d.js";
+import {
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   PickerShell,
   PickerInput
-} from "./components-s5ngg32c.js";
+} from "./components-paa08427.js";
 import {
   pad
-} from "./components-mjthm1kf.js";
+} from "./components-egy4tyjt.js";
 
 // components/inputs/date-time/duration-picker/index.tsx
 import { formatDuration } from "date-fns";
@@ -29,7 +32,7 @@ function DurationPicker2({
   onValueChange,
   maxHours = 99,
   minuteStep = 1,
-  locale = defaultLocale,
+  locale = defaultLocale2,
   placeholder,
   disabled,
   variant,
@@ -45,8 +48,8 @@ function DurationPicker2({
   tier,
   className
 }) {
-  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
-  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const [value, setValue] = useControllableState2(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
   const input = useRef(null);
   const hours = value?.hours ?? 0;
   const minutes = value?.minutes ?? 0;
@@ -97,17 +100,17 @@ function DurationPicker2({
     tier,
     className,
     children: /* @__PURE__ */ jsxs("div", {
-      className: cn2(dividedColumns, "h-56"),
+      className: cn2(dividedColumns2, "h-56"),
       children: [
-        /* @__PURE__ */ jsx(ScrollColumn, {
-          label: fieldLabel(locale, "hour"),
+        /* @__PURE__ */ jsx(ScrollColumn2, {
+          label: fieldLabel2(locale, "hour"),
           options: hourOptions,
           value: value ? hours : null,
           onValueChange: (h) => setValue({ hours: h, minutes }),
           className: "min-w-0 flex-1"
         }),
-        /* @__PURE__ */ jsx(ScrollColumn, {
-          label: fieldLabel(locale, "minute"),
+        /* @__PURE__ */ jsx(ScrollColumn2, {
+          label: fieldLabel2(locale, "minute"),
           options: minuteOptions,
           value: value ? minutes : null,
           onValueChange: (m) => setValue({ hours, minutes: m }),

package/dist/shared/{components-mjthm1kf.js → components-egy4tyjt.js}

@@ -1,10 +1,13 @@
+"use client";
 import {
-  fieldLabel,
-  ScrollColumn
-} from "./components-gz8zf3ec.js";
+  fieldLabel2
+} from "./components-559tf7yb.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  ScrollColumn2
+} from "./components-1k0wv53d.js";
 
 // components/inputs/date-time/time-columns.tsx
 import { format } from "date-fns";
@@ -35,16 +38,16 @@ function TimeColumns({
   const width = (fixed) => !vertical ? "w-full" : fill ? "min-w-0 flex-1" : cn2("shrink-0", fixed);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsx(ScrollColumn, {
-        label: fieldLabel(locale, "hour"),
+      /* @__PURE__ */ jsx(ScrollColumn2, {
+        label: fieldLabel2(locale, "hour"),
         options: hourOptions,
         value: hours,
         onValueChange: (h) => onValueChange({ hours: h, minutes }),
         orientation,
         className: width(twelve ? "w-15" : "w-12")
       }),
-      /* @__PURE__ */ jsx(ScrollColumn, {
-        label: fieldLabel(locale, "minute"),
+      /* @__PURE__ */ jsx(ScrollColumn2, {
+        label: fieldLabel2(locale, "minute"),
         options: minuteOptions,
         value: hours === null ? null : minutes,
         onValueChange: (m) => onValueChange({ hours: hours ?? 0, minutes: m }),

package/dist/shared/components-f0xfpkhh.js

@@ -0,0 +1,82 @@
+// components/button/variants.ts
+import { cva } from "class-variance-authority";
+var SURFACED = ["primary", "secondary", "tertiary", "outline", "ghost", "destructive", "success"];
+var surfaceVariants = {
+  primary: "[--btn-bg:var(--foreground)] hover:[--btn-bg:color-mix(in_oklab,var(--foreground)_90%,var(--background))] active:[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)]",
+  secondary: "[--btn-bg:var(--accent)] hover:[--btn-bg:color-mix(in_oklab,var(--accent)_80%,var(--background))] active:[--btn-bg:var(--accent)] bg-[var(--btn-bg)]",
+  tertiary: "shadow-[inset_0_0_0_1px_var(--border)] hover:bg-hover active:bg-active",
+  outline: "shadow-[inset_0_0_0_1px_var(--border)] hover:bg-hover active:bg-active",
+  ghost: "hover:bg-hover active:bg-active",
+  destructive: "bg-destructive-wash hover:bg-destructive-wash-hover active:bg-destructive-wash-active",
+  success: "bg-success-wash hover:bg-success-wash-hover active:bg-success-wash-active"
+};
+var buttonRecipe = cva([
+  "group relative isolate inline-flex items-center justify-center outline-none cursor-pointer",
+  "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",
+      outline: "text-foreground",
+      ghost: "text-muted-foreground hover:text-foreground",
+      destructive: "text-destructive-strong",
+      success: "text-success-strong",
+      link: "text-foreground underline underline-offset-4 decoration-transparent hover:decoration-current"
+    },
+    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: "" },
+    surface: {
+      true: [
+        "rounded-lg",
+        "aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+        "[&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast hover:[&_svg]:stroke-[2]"
+      ],
+      false: ""
+    }
+  },
+  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" },
+    { variant: "link", size: ["default", "compact"], className: "px-0" },
+    { variant: "link", className: "transition-[color,opacity,text-decoration-color]" },
+    { variant: SURFACED, surface: false, className: "transition-[color,opacity]" },
+    {
+      variant: SURFACED,
+      surface: true,
+      className: "no-underline transition-[color,opacity,background-color,box-shadow]"
+    },
+    ...SURFACED.map((variant) => ({ variant, surface: true, className: surfaceVariants[variant] })),
+    { surface: true, size: "default", className: "[&_svg]:size-4" },
+    { surface: true, size: "compact", className: "[&_svg]:size-3.5" }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "default",
+    surface: false
+  }
+});
+var legacySizeAliases2 = {
+  xs: "compact",
+  sm: "compact",
+  md: "default",
+  lg: "default",
+  "icon-sm": "icon-compact",
+  "icon-lg": "icon"
+};
+function buttonVariants2({ size, ...options } = {}) {
+  const canonical = size ? legacySizeAliases2[size] ?? size : size;
+  return buttonRecipe({ ...options, size: canonical });
+}
+export { legacySizeAliases2, buttonVariants2 };

package/dist/shared/components-f7h57m6t.js

@@ -0,0 +1,59 @@
+// components/inputs/file-dropzone/variants.ts
+var UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte"];
+function formatFileSize2(bytes, locale) {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1000 && unit < UNITS.length - 1) {
+    value /= 1000;
+    unit++;
+  }
+  return new Intl.NumberFormat(locale, {
+    style: "unit",
+    unit: UNITS[unit],
+    unitDisplay: "short",
+    maximumFractionDigits: unit === 0 ? 0 : 1
+  }).format(value);
+}
+function rules(accept) {
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+}
+function matches(rule, name, type) {
+  if (rule.startsWith("."))
+    return name.endsWith(rule);
+  if (rule.endsWith("/*"))
+    return type.startsWith(rule.slice(0, -1));
+  return type === rule;
+}
+function acceptsFile2(file, accept) {
+  if (!accept)
+    return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return rules(accept).some((rule) => matches(rule, name, type));
+}
+function dragVerdict2(types, accept, limit) {
+  const list = accept ? rules(accept) : [];
+  const unsure = !list.length || list.some((rule) => rule.startsWith("."));
+  const passing = types.filter((type) => unsure || !type || list.some((rule) => matches(rule, "", type.toLowerCase())));
+  if (!passing.length || limit < 1)
+    return "reject";
+  return passing.length === types.length && types.length <= limit ? "accept" : "partial";
+}
+function sortFiles2(files, { accept, maxSize, maxFiles, multiple }) {
+  const accepted = [];
+  const rejected = [];
+  const limit = multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1;
+  for (const file of files) {
+    if (!acceptsFile2(file, accept))
+      rejected.push({ file, reason: "type" });
+    else if (maxSize != null && file.size > maxSize)
+      rejected.push({ file, reason: "size" });
+    else if (accepted.length >= limit)
+      rejected.push({ file, reason: "count" });
+    else
+      accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+
+export { formatFileSize2, acceptsFile2, dragVerdict2, sortFiles2 };

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

@@ -1,41 +1,44 @@
+"use client";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
 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 {
+  surfaceClasses2
+} from "./components-vf45j12c.js";
 import {
-  surfaceClasses2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.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";
+} from "./components-dcc02hs2.js";
 import {
   Button2
-} from "./components-b2wyq2cq.js";
+} from "./components-7d4r7hh1.js";
 import {
   Tooltip2
-} from "./components-ng72k97e.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-q03cktx8.js";
 
 // components/AI/input-message/index.tsx
 import { AnimatePresence, motion, Reorder, useReducedMotion } from "motion/react";
@@ -80,7 +83,7 @@ async function renderPdfFirstPage(file, targetWidth) {
   return canvas.toDataURL("image/png");
 }
 function FileThumbnail2({ file, size, className }) {
-  const shape = useShape();
+  const shape = useShape2();
   const isImage = file.type.startsWith("image/");
   const isPdf = file.type === "application/pdf";
   const [imageUrl, setImageUrl] = useState(null);
@@ -194,7 +197,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 = useIcon("x");
+  const XIcon = useIcon2("x");
   return /* @__PURE__ */ jsxs2(motion.div, {
     ref,
     layout: true,
@@ -229,8 +232,8 @@ var FilePreviewTile = forwardRef(function FilePreviewTile({ file, onRemove, size
   });
 });
 function QueuedRow({ item, index, total, reduceMotion, isTouch, onEdit, onRemove, onMove }) {
-  const XIcon = useIcon("x");
-  const ImageIcon = useIcon("image");
+  const XIcon = useIcon2("x");
+  const ImageIcon = useIcon2("image");
   const compactStep = useSize2().variant === "compact";
   const fileCount = item.files.length;
   const label = item.text || `${fileCount} attachment${fileCount === 1 ? "" : "s"}`;
@@ -296,8 +299,8 @@ function QueuedRow({ item, index, total, reduceMotion, isTouch, onEdit, onRemove
   });
 }
 function SuggestionRow({ text, index, active, keyHint, optionId, registerItem, onSelect }) {
-  const EnterIcon = useIcon("corner-down-left");
-  const ArrowDownIcon = useIcon("arrow-down");
+  const EnterIcon = useIcon2("corner-down-left");
+  const ArrowDownIcon = useIcon2("arrow-down");
   const compactStep = useSize2().variant === "compact";
   const ref = useRef(null);
   useRegisterFluidHoverItem2(registerItem, index, ref);
@@ -359,9 +362,9 @@ var InputMessage2 = forwardRef(({
   style,
   ...props
 }, ref) => {
-  const shape = useShape();
+  const shape = useShape2();
   const compactStep = useSize2(size).variant === "compact";
-  const ArrowUpIcon = useIcon("arrow-up");
+  const ArrowUpIcon = useIcon2("arrow-up");
   const reduceMotion = useReducedMotion() ?? false;
   const isTouch = useIsTouch();
   const textareaRef = useRef(null);
@@ -376,15 +379,15 @@ var InputMessage2 = forwardRef(({
     ...restTextareaProps
   } = textareaProps ?? {};
   const valueControlled = valueProp !== undefined;
-  const [value, setValue] = useControllableState(valueProp, defaultValue ?? "", onValueChange);
+  const [value, setValue] = useControllableState2(valueProp, defaultValue ?? "", onValueChange);
   const filesControlled = filesProp !== undefined;
   const supportsFiles = onFilesChange !== undefined || defaultFiles !== undefined;
-  const [filesArr, setFiles] = useControllableState(filesProp, defaultFiles ?? NO_FILES, onFilesChange);
+  const [filesArr, setFiles] = useControllableState2(filesProp, defaultFiles ?? NO_FILES, onFilesChange);
   const statusEnabled = statusProp !== undefined || defaultStatus !== undefined;
-  const [statusValue, setStatus] = useControllableState(statusProp, defaultStatus ?? "idle", onStatusChange);
+  const [statusValue, setStatus] = useControllableState2(statusProp, defaultStatus ?? "idle", onStatusChange);
   const status = statusEnabled ? statusValue : undefined;
   const streaming = status === "streaming";
-  const [queueArr, setQueue] = useControllableState(queueProp, defaultQueue ?? NO_QUEUE, onQueueChange);
+  const [queueArr, setQueue] = useControllableState2(queueProp, defaultQueue ?? NO_QUEUE, onQueueChange);
   const queueRef = useRef(queueArr);
   queueRef.current = queueArr;
   const supportsQueue = statusEnabled && (onQueueChange !== undefined || defaultQueue !== undefined);