@tutti-os/ui-system 0.0.164 → 0.0.166

package/dist/{chunk-ZMX4VTUF.js → chunk-7RACG2FX.js}

@@ -15,7 +15,7 @@ import {
   SuccessFilledIcon,
   WarningFilledIcon,
   WarningLinedIcon
-} from "./chunk-A3EZ2O7X.js";
+} from "./chunk-LD3MNTUQ.js";
 import {
   cn
 } from "./chunk-DGPY4WP3.js";
@@ -2919,9 +2919,442 @@ function Spinner({
   );
 }
 
+// src/components/sortable/sortable.tsx
+import {
+  closestCenter,
+  closestCorners,
+  DndContext,
+  DragOverlay,
+  defaultDropAnimationSideEffects,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  restrictToHorizontalAxis,
+  restrictToParentElement,
+  restrictToVerticalAxis
+} from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Slot as SlotPrimitive } from "radix-ui";
+import * as React10 from "react";
+import * as ReactDOM from "react-dom";
+
+// src/lib/compose-refs.ts
+import * as React9 from "react";
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React9.useCallback(composeRefs(...refs), refs);
+}
+
+// src/components/sortable/sortable.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var orientationConfig = {
+  vertical: {
+    modifiers: [restrictToVerticalAxis, restrictToParentElement],
+    strategy: verticalListSortingStrategy,
+    collisionDetection: closestCenter
+  },
+  horizontal: {
+    modifiers: [restrictToHorizontalAxis, restrictToParentElement],
+    strategy: horizontalListSortingStrategy,
+    collisionDetection: closestCenter
+  },
+  mixed: {
+    modifiers: [restrictToParentElement],
+    strategy: void 0,
+    collisionDetection: closestCorners
+  }
+};
+var ROOT_NAME = "Sortable";
+var CONTENT_NAME = "SortableContent";
+var ITEM_NAME = "SortableItem";
+var ITEM_HANDLE_NAME = "SortableItemHandle";
+var OVERLAY_NAME = "SortableOverlay";
+var SortableRootContext = React10.createContext(null);
+function useSortableContext(consumerName) {
+  const context = React10.useContext(SortableRootContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function Sortable(props) {
+  const {
+    value,
+    onValueChange,
+    collisionDetection,
+    modifiers,
+    strategy,
+    onMove,
+    orientation = "vertical",
+    flatCursor = false,
+    getItemValue: getItemValueProp,
+    accessibility,
+    ...sortableProps
+  } = props;
+  const id = React10.useId();
+  const [activeId, setActiveId] = React10.useState(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: { distance: 6 }
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: { delay: 180, tolerance: 5 }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const config = React10.useMemo(
+    () => orientationConfig[orientation],
+    [orientation]
+  );
+  const getItemValue = React10.useCallback(
+    (item) => {
+      if (typeof item === "object" && !getItemValueProp) {
+        throw new Error(
+          "`getItemValue` is required when using array of objects"
+        );
+      }
+      return getItemValueProp ? getItemValueProp(item) : item;
+    },
+    [getItemValueProp]
+  );
+  const items = React10.useMemo(() => {
+    return value.map((item) => getItemValue(item));
+  }, [value, getItemValue]);
+  const onDragStart = React10.useCallback(
+    (event) => {
+      sortableProps.onDragStart?.(event);
+      setActiveId(event.active.id);
+    },
+    [sortableProps.onDragStart]
+  );
+  const onDragEnd = React10.useCallback(
+    (event) => {
+      sortableProps.onDragEnd?.(event);
+      const { active, over } = event;
+      if (over && active.id !== over?.id) {
+        const activeIndex = value.findIndex(
+          (item) => getItemValue(item) === active.id
+        );
+        const overIndex = value.findIndex(
+          (item) => getItemValue(item) === over.id
+        );
+        if (activeIndex < 0 || overIndex < 0) {
+          setActiveId(null);
+          return;
+        }
+        if (onMove) {
+          onMove({ ...event, activeIndex, overIndex });
+        } else {
+          onValueChange?.(arrayMove(value, activeIndex, overIndex));
+        }
+      }
+      setActiveId(null);
+    },
+    [value, onValueChange, onMove, getItemValue, sortableProps.onDragEnd]
+  );
+  const onDragCancel = React10.useCallback(
+    (event) => {
+      sortableProps.onDragCancel?.(event);
+      setActiveId(null);
+    },
+    [sortableProps.onDragCancel]
+  );
+  const contextValue = React10.useMemo(
+    () => ({
+      id,
+      items,
+      modifiers: modifiers ?? config.modifiers,
+      strategy: strategy ?? config.strategy,
+      activeId,
+      setActiveId,
+      getItemValue,
+      flatCursor
+    }),
+    [
+      id,
+      items,
+      modifiers,
+      strategy,
+      config.modifiers,
+      config.strategy,
+      activeId,
+      getItemValue,
+      flatCursor
+    ]
+  );
+  return /* @__PURE__ */ jsx27(
+    SortableRootContext.Provider,
+    {
+      value: contextValue,
+      children: /* @__PURE__ */ jsx27(
+        DndContext,
+        {
+          collisionDetection: collisionDetection ?? config.collisionDetection,
+          modifiers: modifiers ?? config.modifiers,
+          sensors,
+          ...sortableProps,
+          id,
+          onDragStart,
+          onDragEnd,
+          onDragCancel,
+          accessibility
+        }
+      )
+    }
+  );
+}
+var SortableContentContext = React10.createContext(false);
+function SortableContent(props) {
+  const {
+    strategy: strategyProp,
+    asChild,
+    withoutSlot,
+    children,
+    ref,
+    ...contentProps
+  } = props;
+  const context = useSortableContext(CONTENT_NAME);
+  const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
+  return /* @__PURE__ */ jsx27(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx27(
+    SortableContext,
+    {
+      items: context.items,
+      strategy: strategyProp ?? context.strategy,
+      children: withoutSlot ? children : /* @__PURE__ */ jsx27(
+        ContentPrimitive,
+        {
+          "data-slot": "sortable-content",
+          ...contentProps,
+          ref,
+          children
+        }
+      )
+    }
+  ) });
+}
+var SortableItemContext = React10.createContext(null);
+function useSortableItemContext(consumerName) {
+  const context = React10.useContext(SortableItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+function SortableItem(props) {
+  const {
+    value,
+    style,
+    asHandle,
+    asChild,
+    disabled,
+    className,
+    ref,
+    ...itemProps
+  } = props;
+  const inSortableContent = React10.useContext(SortableContentContext);
+  const inSortableOverlay = React10.useContext(SortableOverlayContext);
+  if (!inSortableContent && !inSortableOverlay) {
+    throw new Error(
+      `\`${ITEM_NAME}\` must be used within \`${CONTENT_NAME}\` or \`${OVERLAY_NAME}\``
+    );
+  }
+  if (value === "") {
+    throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
+  }
+  const context = useSortableContext(ITEM_NAME);
+  const id = React10.useId();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: value, disabled });
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (disabled) return;
+    setNodeRef(node);
+    if (asHandle) setActivatorNodeRef(node);
+  });
+  const composedStyle = React10.useMemo(() => {
+    return {
+      transform: CSS.Translate.toString(transform),
+      transition: prefersReducedMotion ? void 0 : transition,
+      ...style
+    };
+  }, [prefersReducedMotion, transform, transition, style]);
+  const itemContext = React10.useMemo(
+    () => ({
+      id,
+      attributes,
+      listeners,
+      setActivatorNodeRef,
+      isDragging,
+      disabled
+    }),
+    [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
+  );
+  const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
+  return /* @__PURE__ */ jsx27(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx27(
+    ItemPrimitive,
+    {
+      id,
+      "data-disabled": disabled,
+      "data-dragging": isDragging ? "" : void 0,
+      "data-slot": "sortable-item",
+      ...itemProps,
+      ...asHandle && !disabled ? attributes : {},
+      ...asHandle && !disabled ? listeners : {},
+      ref: composedRef,
+      style: composedStyle,
+      className: cn(
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        {
+          "touch-none select-none": asHandle,
+          "cursor-default": context.flatCursor,
+          "data-dragging:cursor-grabbing": !context.flatCursor,
+          "cursor-grab": !isDragging && asHandle && !context.flatCursor,
+          "opacity-50": isDragging,
+          "pointer-events-none opacity-50": disabled
+        },
+        className
+      )
+    }
+  ) });
+}
+function SortableItemHandle(props) {
+  const { asChild, disabled, className, ref, ...itemHandleProps } = props;
+  const context = useSortableContext(ITEM_HANDLE_NAME);
+  const itemContext = useSortableItemContext(ITEM_HANDLE_NAME);
+  const isDisabled = Boolean(itemContext.disabled || disabled);
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (isDisabled) return;
+    itemContext.setActivatorNodeRef(node);
+  });
+  const HandlePrimitive = asChild ? SlotPrimitive.Slot : "button";
+  return /* @__PURE__ */ jsx27(
+    HandlePrimitive,
+    {
+      type: "button",
+      "aria-controls": itemContext.id,
+      "data-disabled": isDisabled,
+      "data-dragging": itemContext.isDragging ? "" : void 0,
+      "data-slot": "sortable-item-handle",
+      ...itemHandleProps,
+      ...isDisabled ? {} : itemContext.attributes,
+      ...isDisabled ? {} : itemContext.listeners,
+      ref: composedRef,
+      className: cn(
+        "select-none disabled:pointer-events-none disabled:opacity-50",
+        context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing",
+        className
+      ),
+      disabled: isDisabled
+    }
+  );
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React10.useState(
+    () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
+  );
+  React10.useEffect(() => {
+    const query = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!query) return;
+    const update = () => setReduced(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  return reduced;
+}
+var SortableOverlayContext = React10.createContext(false);
+var defaultDropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+function SortableOverlay(props) {
+  const {
+    container: containerProp,
+    children,
+    dropAnimation: callerDropAnimation,
+    ...overlayProps
+  } = props;
+  const context = useSortableContext(OVERLAY_NAME);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [mounted, setMounted] = React10.useState(false);
+  React10.useLayoutEffect(() => setMounted(true), []);
+  const container = containerProp ?? (mounted ? globalThis.document?.body : null);
+  if (!container) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx27(
+      DragOverlay,
+      {
+        modifiers: context.modifiers,
+        className: cn(!context.flatCursor && "cursor-grabbing"),
+        ...overlayProps,
+        dropAnimation: prefersReducedMotion ? null : callerDropAnimation === void 0 ? defaultDropAnimation : callerDropAnimation,
+        children: /* @__PURE__ */ jsx27(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
+      }
+    ),
+    container
+  );
+}
+
 // src/components/status-dot/status-dot.tsx
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var statusDotVariants = cva4("inline-flex shrink-0 rounded-full", {
   variants: {
     tone: {
@@ -2955,7 +3388,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -2973,7 +3406,7 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Switch({
   className,
   disabled,
@@ -2981,7 +3414,7 @@ function Switch({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -2994,12 +3427,12 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx29(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
           className: "pointer-events-none inline-flex items-center justify-center rounded-full bg-[var(--white-stationary)] ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px] group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0",
-          children: loading ? /* @__PURE__ */ jsx28(
+          children: loading ? /* @__PURE__ */ jsx29(
             LoadingIcon,
             {
               "aria-hidden": "true",
@@ -3013,9 +3446,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "textarea",
     {
       "data-slot": "textarea",
@@ -3029,18 +3462,18 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/toast/toast.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var toastDefaultDurationMs = 3e3;
 function ToastProvider({
   duration = toastDefaultDurationMs,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(ToastPrimitive.Provider, { duration, ...props });
+  return /* @__PURE__ */ jsx31(ToastPrimitive.Provider, { duration, ...props });
 }
-var ToastVisualContext = React9.createContext(null);
+var ToastVisualContext = React11.createContext(null);
 var toastStatusIconByVariant = {
   destructive: FailedFilledIcon,
   success: SuccessFilledIcon
@@ -3064,7 +3497,7 @@ function formatToastText(children) {
   if (typeof children === "string") {
     return stripToastTrailingSentencePunctuation(children);
   }
-  const flatChildren = React9.Children.toArray(children);
+  const flatChildren = React11.Children.toArray(children);
   if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
     return stripToastTrailingSentencePunctuation(flatChildren[0]);
   }
@@ -3096,7 +3529,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -3113,7 +3546,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx30(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx30("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+      children: /* @__PURE__ */ jsx31(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx31("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
     }
   );
 }
@@ -3122,7 +3555,7 @@ function ToastTitle({
   children,
   ...props
 }) {
-  const toastVisual = React9.useContext(ToastVisualContext);
+  const toastVisual = React11.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
   return /* @__PURE__ */ jsxs13(
     ToastPrimitive.Title,
@@ -3134,7 +3567,7 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx30(
+        toastVisual?.busy ? /* @__PURE__ */ jsx31(
           Spinner,
           {
             className: "shrink-0 text-current",
@@ -3142,8 +3575,8 @@ function ToastTitle({
             strokeWidth: 2,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx30(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx30("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+        ) : StatusIcon ? /* @__PURE__ */ jsx31(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx31("span", { className: "min-w-0 break-words", children: formatToastText(children) })
       ]
     }
   );
@@ -3152,7 +3585,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -3168,7 +3601,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -3177,7 +3610,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx30(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx31(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -3186,7 +3619,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -3201,8 +3634,8 @@ function ToastViewport({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState6 } from "react";
-import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState7 } from "react";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -3220,12 +3653,12 @@ function UnderlineTabs({
   const viewportRef = useRef4(null);
   const rowRef = useRef4(null);
   const buttonRefs = useRef4({});
-  const [indicatorStyle, setIndicatorStyle] = useState6({ left: 0, width: 0 });
-  const [overflow, setOverflow] = useState6({
+  const [indicatorStyle, setIndicatorStyle] = useState7({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState7({
     canScrollLeft: false,
     canScrollRight: false
   });
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const row = rowRef.current;
     const button = buttonRefs.current[value];
     if (!row || !button) {
@@ -3242,7 +3675,7 @@ function UnderlineTabs({
       (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
     );
   }, [tabs, value]);
-  useEffect5(() => {
+  useEffect6(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -3297,7 +3730,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "div",
           {
             ref: viewportRef,
@@ -3342,14 +3775,14 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx31("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx31("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
+                          /* @__PURE__ */ jsx32("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx32("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
                         ]
                       },
                       tab.value
                     );
                   }),
-                  /* @__PURE__ */ jsx31(
+                  /* @__PURE__ */ jsx32(
                     "div",
                     {
                       "aria-hidden": true,
@@ -3366,7 +3799,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -3377,10 +3810,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx31(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx32(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -3391,7 +3824,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx31(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx32(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -3400,9 +3833,9 @@ function UnderlineTabs({
 }
 
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
-import * as React10 from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
 var MENU_BOUNDARY_PADDING = 8;
 function clampMenuCoordinate(origin, size, viewportExtent, padding) {
@@ -3514,7 +3947,7 @@ function assignRef(ref, value) {
 function callHandler(handler, event) {
   handler?.(event);
 }
-var ViewportMenuSurface = React10.forwardRef(function ViewportMenuSurface2({
+var ViewportMenuSurface = React12.forwardRef(function ViewportMenuSurface2({
   open,
   placement,
   children,
@@ -3530,16 +3963,16 @@ var ViewportMenuSurface = React10.forwardRef(function ViewportMenuSurface2({
   className,
   ...rest
 }, forwardedRef) {
-  const surfaceRef = React10.useRef(null);
-  const [measuredSize, setMeasuredSize] = React10.useState(null);
-  const setRefs2 = React10.useCallback(
+  const surfaceRef = React12.useRef(null);
+  const [measuredSize, setMeasuredSize] = React12.useState(null);
+  const setRefs2 = React12.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
     },
     [forwardedRef]
   );
-  React10.useLayoutEffect(() => {
+  React12.useLayoutEffect(() => {
     if (!open) {
       setMeasuredSize(null);
       return;
@@ -3563,7 +3996,7 @@ var ViewportMenuSurface = React10.forwardRef(function ViewportMenuSurface2({
     observer.observe(element);
     return () => observer.disconnect();
   }, [open, placement]);
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (!open) {
       return;
     }
@@ -3620,7 +4053,7 @@ var ViewportMenuSurface = React10.forwardRef(function ViewportMenuSurface2({
     onDismiss,
     open
   ]);
-  const resolvedPlacement = React10.useMemo(() => {
+  const resolvedPlacement = React12.useMemo(() => {
     if (placement.type === "absolute") {
       const boundary2 = resolveMenuBoundaryFromPoint(
         placement.boundaryPoint ?? {
@@ -3671,8 +4104,8 @@ var ViewportMenuSurface = React10.forwardRef(function ViewportMenuSurface2({
     return null;
   }
   const portalTarget = resolvedPlacement.portalTarget ?? document.body;
-  return createPortal2(
-    /* @__PURE__ */ jsx32(
+  return createPortal3(
+    /* @__PURE__ */ jsx33(
       MenuSurface,
       {
         ...rest,
@@ -3811,6 +4244,11 @@ export {
   toast,
   Toaster,
   Spinner,
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableItemHandle,
+  SortableOverlay,
   statusDotVariants,
   StatusDot,
   Switch,
@@ -3825,4 +4263,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-ZMX4VTUF.js.map
+//# sourceMappingURL=chunk-7RACG2FX.js.map