@tutti-os/ui-system 0.0.190 → 0.0.192

package/dist/{chunk-S74ESIMT.js → chunk-OW6744SQ.js}

@@ -3044,14 +3044,77 @@ function ShortcutBadge({ className, ...props }) {
   );
 }
 
+// src/components/slider/slider.tsx
+import * as React10 from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+function Slider({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  thumbAriaLabels,
+  ...props
+}) {
+  const values = React10.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min],
+    [defaultValue, min, value]
+  );
+  return /* @__PURE__ */ jsxs14(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx26(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: "relative grow overflow-hidden rounded-full bg-[var(--transparency-block)] data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+            children: /* @__PURE__ */ jsx26(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: "absolute bg-[var(--tutti-purple)] select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+              }
+            )
+          }
+        ),
+        Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx26(
+          SliderPrimitive.Thumb,
+          {
+            "aria-disabled": props.disabled || void 0,
+            "aria-label": thumbAriaLabels?.[index] ?? (values.length === 1 ? ariaLabel : void 0),
+            "aria-labelledby": values.length === 1 ? ariaLabelledBy : void 0,
+            "data-slot": "slider-thumb",
+            className: "relative block size-3 shrink-0 rounded-full border border-[var(--tutti-purple)] bg-[var(--background-fronted)] shadow-none transition-[box-shadow] outline-none select-none after:absolute after:-inset-2 hover:ring-3 hover:ring-[color-mix(in_srgb,var(--tutti-purple)_20%,transparent)] focus-visible:ring-3 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] data-disabled:pointer-events-none data-disabled:hover:ring-0"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+
 // src/components/sonner/sonner.tsx
 import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Toaster({ toastOptions, style, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     SonnerToaster,
     {
       closeButton: true,
@@ -3060,11 +3123,11 @@ function Toaster({ toastOptions, style, ...props }) {
       position: "top-right",
       visibleToasts: 4,
       icons: {
-        error: /* @__PURE__ */ jsx26(FailedFilledIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx26(WarningLinedIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx26(LoadingIcon, { className: "size-4 animate-spin" }),
-        success: /* @__PURE__ */ jsx26(SuccessFilledIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx26(WarningFilledIcon, { className: "size-4" })
+        error: /* @__PURE__ */ jsx27(FailedFilledIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx27(WarningLinedIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx27(LoadingIcon, { className: "size-4 animate-spin" }),
+        success: /* @__PURE__ */ jsx27(SuccessFilledIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx27(WarningFilledIcon, { className: "size-4" })
       },
       style: {
         "--normal-bg": "var(--background-fronted)",
@@ -3093,7 +3156,7 @@ function Toaster({ toastOptions, style, ...props }) {
 }
 
 // src/components/spinner/spinner.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function Spinner({
   className,
   size = 16,
@@ -3102,7 +3165,7 @@ function Spinner({
   testId,
   trackColor
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     LoadingIcon,
     {
       "data-slot": "spinner",
@@ -3148,11 +3211,11 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Slot as SlotPrimitive } from "radix-ui";
-import * as React11 from "react";
+import * as React12 from "react";
 import * as ReactDOM from "react-dom";
 
 // src/lib/compose-refs.ts
-import * as React10 from "react";
+import * as React11 from "react";
 function setRef(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -3186,11 +3249,11 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React10.useCallback(composeRefs(...refs), refs);
+  return React11.useCallback(composeRefs(...refs), refs);
 }
 
 // src/components/sortable/sortable.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var orientationConfig = {
   vertical: {
     modifiers: [restrictToVerticalAxis, restrictToParentElement],
@@ -3213,9 +3276,9 @@ var CONTENT_NAME = "SortableContent";
 var ITEM_NAME = "SortableItem";
 var ITEM_HANDLE_NAME = "SortableItemHandle";
 var OVERLAY_NAME = "SortableOverlay";
-var SortableRootContext = React11.createContext(null);
+var SortableRootContext = React12.createContext(null);
 function useSortableContext(consumerName) {
-  const context = React11.useContext(SortableRootContext);
+  const context = React12.useContext(SortableRootContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
   }
@@ -3235,8 +3298,8 @@ function Sortable(props) {
     accessibility,
     ...sortableProps
   } = props;
-  const id = React11.useId();
-  const [activeId, setActiveId] = React11.useState(null);
+  const id = React12.useId();
+  const [activeId, setActiveId] = React12.useState(null);
   const sensors = useSensors(
     useSensor(MouseSensor, {
       activationConstraint: { distance: 6 }
@@ -3248,11 +3311,11 @@ function Sortable(props) {
       coordinateGetter: sortableKeyboardCoordinates
     })
   );
-  const config = React11.useMemo(
+  const config = React12.useMemo(
     () => orientationConfig[orientation],
     [orientation]
   );
-  const getItemValue = React11.useCallback(
+  const getItemValue = React12.useCallback(
     (item) => {
       if (typeof item === "object" && !getItemValueProp) {
         throw new Error(
@@ -3263,17 +3326,17 @@ function Sortable(props) {
     },
     [getItemValueProp]
   );
-  const items = React11.useMemo(() => {
+  const items = React12.useMemo(() => {
     return value.map((item) => getItemValue(item));
   }, [value, getItemValue]);
-  const onDragStart = React11.useCallback(
+  const onDragStart = React12.useCallback(
     (event) => {
       sortableProps.onDragStart?.(event);
       setActiveId(event.active.id);
     },
     [sortableProps.onDragStart]
   );
-  const onDragEnd = React11.useCallback(
+  const onDragEnd = React12.useCallback(
     (event) => {
       sortableProps.onDragEnd?.(event);
       const { active, over } = event;
@@ -3298,14 +3361,14 @@ function Sortable(props) {
     },
     [value, onValueChange, onMove, getItemValue, sortableProps.onDragEnd]
   );
-  const onDragCancel = React11.useCallback(
+  const onDragCancel = React12.useCallback(
     (event) => {
       sortableProps.onDragCancel?.(event);
       setActiveId(null);
     },
     [sortableProps.onDragCancel]
   );
-  const contextValue = React11.useMemo(
+  const contextValue = React12.useMemo(
     () => ({
       id,
       items,
@@ -3328,11 +3391,11 @@ function Sortable(props) {
       flatCursor
     ]
   );
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     SortableRootContext.Provider,
     {
       value: contextValue,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx29(
         DndContext,
         {
           collisionDetection: collisionDetection ?? config.collisionDetection,
@@ -3349,7 +3412,7 @@ function Sortable(props) {
     }
   );
 }
-var SortableContentContext = React11.createContext(false);
+var SortableContentContext = React12.createContext(false);
 function SortableContent(props) {
   const {
     strategy: strategyProp,
@@ -3361,12 +3424,12 @@ function SortableContent(props) {
   } = props;
   const context = useSortableContext(CONTENT_NAME);
   const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx28(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx29(
     SortableContext,
     {
       items: context.items,
       strategy: strategyProp ?? context.strategy,
-      children: withoutSlot ? children : /* @__PURE__ */ jsx28(
+      children: withoutSlot ? children : /* @__PURE__ */ jsx29(
         ContentPrimitive,
         {
           "data-slot": "sortable-content",
@@ -3378,9 +3441,9 @@ function SortableContent(props) {
     }
   ) });
 }
-var SortableItemContext = React11.createContext(null);
+var SortableItemContext = React12.createContext(null);
 function useSortableItemContext(consumerName) {
-  const context = React11.useContext(SortableItemContext);
+  const context = React12.useContext(SortableItemContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
   }
@@ -3397,8 +3460,8 @@ function SortableItem(props) {
     ref,
     ...itemProps
   } = props;
-  const inSortableContent = React11.useContext(SortableContentContext);
-  const inSortableOverlay = React11.useContext(SortableOverlayContext);
+  const inSortableContent = React12.useContext(SortableContentContext);
+  const inSortableOverlay = React12.useContext(SortableOverlayContext);
   if (!inSortableContent && !inSortableOverlay) {
     throw new Error(
       `\`${ITEM_NAME}\` must be used within \`${CONTENT_NAME}\` or \`${OVERLAY_NAME}\``
@@ -3408,7 +3471,7 @@ function SortableItem(props) {
     throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
   }
   const context = useSortableContext(ITEM_NAME);
-  const id = React11.useId();
+  const id = React12.useId();
   const {
     attributes,
     listeners,
@@ -3424,14 +3487,14 @@ function SortableItem(props) {
     setNodeRef(node);
     if (asHandle) setActivatorNodeRef(node);
   });
-  const composedStyle = React11.useMemo(() => {
+  const composedStyle = React12.useMemo(() => {
     return {
       transform: CSS.Translate.toString(transform),
       transition: prefersReducedMotion ? void 0 : transition,
       ...style
     };
   }, [prefersReducedMotion, transform, transition, style]);
-  const itemContext = React11.useMemo(
+  const itemContext = React12.useMemo(
     () => ({
       id,
       attributes,
@@ -3443,7 +3506,7 @@ function SortableItem(props) {
     [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
   );
   const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx28(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx29(
     ItemPrimitive,
     {
       id,
@@ -3480,7 +3543,7 @@ function SortableItemHandle(props) {
     itemContext.setActivatorNodeRef(node);
   });
   const HandlePrimitive = asChild ? SlotPrimitive.Slot : "button";
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     HandlePrimitive,
     {
       type: "button",
@@ -3502,10 +3565,10 @@ function SortableItemHandle(props) {
   );
 }
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React11.useState(
+  const [reduced, setReduced] = React12.useState(
     () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const query = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)");
     if (!query) return;
     const update = () => setReduced(query.matches);
@@ -3515,7 +3578,7 @@ function usePrefersReducedMotion() {
   }, []);
   return reduced;
 }
-var SortableOverlayContext = React11.createContext(false);
+var SortableOverlayContext = React12.createContext(false);
 var defaultDropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -3534,19 +3597,19 @@ function SortableOverlay(props) {
   } = props;
   const context = useSortableContext(OVERLAY_NAME);
   const prefersReducedMotion = usePrefersReducedMotion();
-  const [mounted, setMounted] = React11.useState(false);
-  React11.useLayoutEffect(() => setMounted(true), []);
+  const [mounted, setMounted] = React12.useState(false);
+  React12.useLayoutEffect(() => setMounted(true), []);
   const container = containerProp ?? (mounted ? globalThis.document?.body : null);
   if (!container) return null;
   return ReactDOM.createPortal(
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(
       DragOverlay,
       {
         modifiers: context.modifiers,
         className: cn(!context.flatCursor && "cursor-grabbing"),
         ...overlayProps,
         dropAnimation: prefersReducedMotion ? null : callerDropAnimation === void 0 ? defaultDropAnimation : callerDropAnimation,
-        children: /* @__PURE__ */ jsx28(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
+        children: /* @__PURE__ */ jsx29(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
       }
     ),
     container
@@ -3555,7 +3618,7 @@ function SortableOverlay(props) {
 
 // src/components/status-dot/status-dot.tsx
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var statusDotVariants = cva4("inline-flex shrink-0 rounded-full", {
   variants: {
     tone: {
@@ -3589,7 +3652,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -3607,7 +3670,7 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Switch({
   className,
   disabled,
@@ -3615,7 +3678,7 @@ function Switch({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -3628,12 +3691,12 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         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__ */ jsx30(
+          children: loading ? /* @__PURE__ */ jsx31(
             LoadingIcon,
             {
               "aria-hidden": "true",
@@ -3647,9 +3710,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "textarea",
     {
       "data-slot": "textarea",
@@ -3663,18 +3726,18 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/toast/toast.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var toastDefaultDurationMs = 3e3;
 function ToastProvider({
   duration = toastDefaultDurationMs,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(ToastPrimitive.Provider, { duration, ...props });
+  return /* @__PURE__ */ jsx33(ToastPrimitive.Provider, { duration, ...props });
 }
-var ToastVisualContext = React12.createContext(null);
+var ToastVisualContext = React13.createContext(null);
 var toastStatusIconByVariant = {
   destructive: FailedFilledIcon,
   success: SuccessFilledIcon
@@ -3698,7 +3761,7 @@ function formatToastText(children) {
   if (typeof children === "string") {
     return stripToastTrailingSentencePunctuation(children);
   }
-  const flatChildren = React12.Children.toArray(children);
+  const flatChildren = React13.Children.toArray(children);
   if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
     return stripToastTrailingSentencePunctuation(flatChildren[0]);
   }
@@ -3730,7 +3793,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -3747,7 +3810,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx32(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx32("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+      children: /* @__PURE__ */ jsx33(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx33("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
     }
   );
 }
@@ -3756,9 +3819,9 @@ function ToastTitle({
   children,
   ...props
 }) {
-  const toastVisual = React12.useContext(ToastVisualContext);
+  const toastVisual = React13.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
@@ -3768,7 +3831,7 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx32(
+        toastVisual?.busy ? /* @__PURE__ */ jsx33(
           Spinner,
           {
             className: "shrink-0 text-current",
@@ -3776,8 +3839,8 @@ function ToastTitle({
             strokeWidth: 2,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx32(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx32("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+        ) : StatusIcon ? /* @__PURE__ */ jsx33(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx33("span", { className: "min-w-0 break-words", children: formatToastText(children) })
       ]
     }
   );
@@ -3786,7 +3849,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -3802,7 +3865,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -3811,7 +3874,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx32(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx33(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -3820,7 +3883,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -3836,7 +3899,7 @@ function ToastViewport({
 
 // src/components/underline-tabs/underline-tabs.tsx
 import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState8 } from "react";
-import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -3919,7 +3982,7 @@ function UnderlineTabs({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       "aria-label": ariaLabel,
@@ -3931,7 +3994,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             ref: viewportRef,
@@ -3945,7 +4008,7 @@ function UnderlineTabs({
             "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
             "data-slot": "underline-tabs-viewport",
             "data-testid": viewportTestId,
-            children: /* @__PURE__ */ jsxs15(
+            children: /* @__PURE__ */ jsxs16(
               "div",
               {
                 ref: rowRef,
@@ -3953,7 +4016,7 @@ function UnderlineTabs({
                 children: [
                   tabs.map((tab) => {
                     const isActive = value === tab.value;
-                    return /* @__PURE__ */ jsxs15(
+                    return /* @__PURE__ */ jsxs16(
                       "button",
                       {
                         ref: (element) => {
@@ -3976,14 +4039,14 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx33("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx33("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
+                          /* @__PURE__ */ jsx34("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx34("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
                         ]
                       },
                       tab.value
                     );
                   }),
-                  /* @__PURE__ */ jsx33(
+                  /* @__PURE__ */ jsx34(
                     "div",
                     {
                       "aria-hidden": true,
@@ -4000,7 +4063,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -4011,10 +4074,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx33(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx34(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -4025,7 +4088,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx33(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx34(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -4034,9 +4097,9 @@ function UnderlineTabs({
 }
 
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
 var MENU_BOUNDARY_PADDING = 8;
 function clampMenuCoordinate(origin, size, viewportExtent, padding) {
@@ -4148,7 +4211,7 @@ function assignRef(ref, value) {
 function callHandler(handler, event) {
   handler?.(event);
 }
-var ViewportMenuSurface = React13.forwardRef(function ViewportMenuSurface2({
+var ViewportMenuSurface = React14.forwardRef(function ViewportMenuSurface2({
   open,
   placement,
   children,
@@ -4164,16 +4227,16 @@ var ViewportMenuSurface = React13.forwardRef(function ViewportMenuSurface2({
   className,
   ...rest
 }, forwardedRef) {
-  const surfaceRef = React13.useRef(null);
-  const [measuredSize, setMeasuredSize] = React13.useState(null);
-  const setRefs2 = React13.useCallback(
+  const surfaceRef = React14.useRef(null);
+  const [measuredSize, setMeasuredSize] = React14.useState(null);
+  const setRefs2 = React14.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
     },
     [forwardedRef]
   );
-  React13.useLayoutEffect(() => {
+  React14.useLayoutEffect(() => {
     if (!open) {
       setMeasuredSize(null);
       return;
@@ -4197,7 +4260,7 @@ var ViewportMenuSurface = React13.forwardRef(function ViewportMenuSurface2({
     observer.observe(element);
     return () => observer.disconnect();
   }, [open, placement]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (!open) {
       return;
     }
@@ -4254,7 +4317,7 @@ var ViewportMenuSurface = React13.forwardRef(function ViewportMenuSurface2({
     onDismiss,
     open
   ]);
-  const resolvedPlacement = React13.useMemo(() => {
+  const resolvedPlacement = React14.useMemo(() => {
     if (placement.type === "absolute") {
       const boundary2 = resolveMenuBoundaryFromPoint(
         placement.boundaryPoint ?? {
@@ -4306,7 +4369,7 @@ var ViewportMenuSurface = React13.forwardRef(function ViewportMenuSurface2({
   }
   const portalTarget = resolvedPlacement.portalTarget ?? document.body;
   return createPortal3(
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       MenuSurface,
       {
         ...rest,
@@ -4443,6 +4506,7 @@ export {
   Separator2 as Separator,
   SectionTabs,
   ShortcutBadge,
+  Slider,
   toast,
   Toaster,
   Spinner,
@@ -4465,4 +4529,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-S74ESIMT.js.map
+//# sourceMappingURL=chunk-OW6744SQ.js.map