@tutti-os/ui-system 0.0.221 → 0.0.223

package/dist/{chunk-BHO2ZGYJ.js → chunk-FQWIOPDU.js}

@@ -3124,10 +3124,126 @@ function SectionTabs({
   );
 }
 
+// src/components/segment-bar/segment-bar.tsx
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState8 } from "react";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+function SegmentBar({
+  segments,
+  value,
+  onValueChange,
+  ariaLabel,
+  className,
+  testId
+}) {
+  const containerRef = useRef4(null);
+  const buttonRefs = useRef4({});
+  const [indicator, setIndicator] = useState8({
+    left: 0,
+    width: 0,
+    ready: false
+  });
+  useLayoutEffect2(() => {
+    const button = buttonRefs.current[value];
+    if (!button) {
+      setIndicator(
+        (current) => current.ready ? current : { ...current, ready: false }
+      );
+      return;
+    }
+    const next = {
+      left: button.offsetLeft,
+      width: button.offsetWidth,
+      ready: true
+    };
+    setIndicator(
+      (current) => current.left === next.left && current.width === next.width && current.ready === next.ready ? current : next
+    );
+  }, [segments, value]);
+  useEffect5(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const sync = () => {
+      const button = buttonRefs.current[value];
+      if (!button) {
+        return;
+      }
+      setIndicator(
+        (current) => current.left === button.offsetLeft && current.width === button.offsetWidth ? current : {
+          left: button.offsetLeft,
+          width: button.offsetWidth,
+          ready: true
+        }
+      );
+    };
+    const observer = new ResizeObserver(sync);
+    observer.observe(container);
+    for (const key of Object.keys(buttonRefs.current)) {
+      const node = buttonRefs.current[key];
+      if (node) {
+        observer.observe(node);
+      }
+    }
+    return () => observer.disconnect();
+  }, [segments, value]);
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "relative inline-flex h-8 shrink-0 items-center gap-0.5 rounded-md bg-[var(--transparency-block)] p-0.5",
+        className
+      ),
+      "data-slot": "segment-bar",
+      "data-testid": testId,
+      ref: containerRef,
+      role: "tablist",
+      children: [
+        indicator.ready ? /* @__PURE__ */ jsx26(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-0.5 bottom-0.5 rounded-[5px] bg-[var(--background-board-card)] transition-[left,width] duration-150 ease-out",
+            "data-slot": "segment-bar-indicator",
+            style: { left: indicator.left, width: indicator.width }
+          }
+        ) : null,
+        segments.map((segment) => {
+          const isActive = value === segment.value;
+          return /* @__PURE__ */ jsx26(
+            "button",
+            {
+              "aria-selected": isActive,
+              className: cn(
+                "relative z-[1] inline-flex h-7 shrink-0 items-center justify-center whitespace-nowrap rounded-[5px] px-2.5 text-[12px] font-semibold leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
+                isActive ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+              ),
+              "data-active": isActive ? "true" : "false",
+              "data-slot": "segment-bar-segment",
+              "data-testid": segment.testId,
+              ref: (node) => {
+                if (node) {
+                  buttonRefs.current[segment.value] = node;
+                }
+              },
+              role: "tab",
+              type: "button",
+              onClick: () => onValueChange(segment.value),
+              children: segment.label
+            },
+            segment.value
+          );
+        })
+      ]
+    }
+  );
+}
+
 // src/components/shortcut-badge/shortcut-badge.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function ShortcutBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "kbd",
     {
       "data-slot": "shortcut-badge",
@@ -3143,7 +3259,7 @@ function ShortcutBadge({ className, ...props }) {
 // src/components/slider/slider.tsx
 import * as React10 from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function Slider({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -3159,7 +3275,7 @@ function Slider({
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min],
     [defaultValue, min, value]
   );
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     SliderPrimitive.Root,
     {
       "data-slot": "slider",
@@ -3173,12 +3289,12 @@ function Slider({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           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__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -3187,7 +3303,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx27(
+        Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx28(
           SliderPrimitive.Thumb,
           {
             "aria-disabled": props.disabled || void 0,
@@ -3208,9 +3324,9 @@ import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Toaster({ toastOptions, style, ...props }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     SonnerToaster,
     {
       closeButton: true,
@@ -3219,11 +3335,11 @@ function Toaster({ toastOptions, style, ...props }) {
       position: "top-right",
       visibleToasts: 4,
       icons: {
-        error: /* @__PURE__ */ jsx28(FailedFilledIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx28(WarningLinedIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx28(LoadingIcon, { className: "size-4 animate-spin" }),
-        success: /* @__PURE__ */ jsx28(SuccessFilledIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx28(WarningFilledIcon, { className: "size-4" })
+        error: /* @__PURE__ */ jsx29(FailedFilledIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx29(WarningLinedIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx29(LoadingIcon, { className: "size-4 animate-spin" }),
+        success: /* @__PURE__ */ jsx29(SuccessFilledIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx29(WarningFilledIcon, { className: "size-4" })
       },
       style: {
         "--normal-bg": "var(--background-fronted)",
@@ -3252,7 +3368,7 @@ function Toaster({ toastOptions, style, ...props }) {
 }
 
 // src/components/spinner/spinner.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Spinner({
   className,
   size = 16,
@@ -3261,7 +3377,7 @@ function Spinner({
   testId,
   trackColor
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     LoadingIcon,
     {
       "data-slot": "spinner",
@@ -3349,7 +3465,7 @@ function useComposedRefs(...refs) {
 }
 
 // src/components/sortable/sortable.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var orientationConfig = {
   vertical: {
     modifiers: [restrictToVerticalAxis, restrictToParentElement],
@@ -3487,11 +3603,11 @@ function Sortable(props) {
       flatCursor
     ]
   );
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     SortableRootContext.Provider,
     {
       value: contextValue,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         DndContext,
         {
           collisionDetection: collisionDetection ?? config.collisionDetection,
@@ -3520,12 +3636,12 @@ function SortableContent(props) {
   } = props;
   const context = useSortableContext(CONTENT_NAME);
   const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx30(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx31(
     SortableContext,
     {
       items: context.items,
       strategy: strategyProp ?? context.strategy,
-      children: withoutSlot ? children : /* @__PURE__ */ jsx30(
+      children: withoutSlot ? children : /* @__PURE__ */ jsx31(
         ContentPrimitive,
         {
           "data-slot": "sortable-content",
@@ -3602,7 +3718,7 @@ function SortableItem(props) {
     [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
   );
   const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx30(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx31(
     ItemPrimitive,
     {
       id,
@@ -3639,7 +3755,7 @@ function SortableItemHandle(props) {
     itemContext.setActivatorNodeRef(node);
   });
   const HandlePrimitive = asChild ? SlotPrimitive.Slot : "button";
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     HandlePrimitive,
     {
       type: "button",
@@ -3698,14 +3814,14 @@ function SortableOverlay(props) {
   const container = containerProp ?? (mounted ? globalThis.document?.body : null);
   if (!container) return null;
   return ReactDOM.createPortal(
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       DragOverlay,
       {
         modifiers: context.modifiers,
         className: cn(!context.flatCursor && "cursor-grabbing"),
         ...overlayProps,
         dropAnimation: prefersReducedMotion ? null : callerDropAnimation === void 0 ? defaultDropAnimation : callerDropAnimation,
-        children: /* @__PURE__ */ jsx30(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
+        children: /* @__PURE__ */ jsx31(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
       }
     ),
     container
@@ -3714,7 +3830,7 @@ function SortableOverlay(props) {
 
 // src/components/status-dot/status-dot.tsx
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var statusDotVariants = cva4("inline-flex shrink-0 rounded-full", {
   variants: {
     tone: {
@@ -3748,7 +3864,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -3766,7 +3882,7 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Switch({
   className,
   disabled,
@@ -3774,7 +3890,7 @@ function Switch({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -3787,12 +3903,12 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx33(
         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__ */ jsx32(
+          children: loading ? /* @__PURE__ */ jsx33(
             LoadingIcon,
             {
               "aria-hidden": "true",
@@ -3806,9 +3922,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "textarea",
     {
       "data-slot": "textarea",
@@ -3825,13 +3941,13 @@ function Textarea({ className, ...props }) {
 import * as React13 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
 var toastDefaultDurationMs = 3e3;
 function ToastProvider({
   duration = toastDefaultDurationMs,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(ToastPrimitive.Provider, { duration, ...props });
+  return /* @__PURE__ */ jsx35(ToastPrimitive.Provider, { duration, ...props });
 }
 var ToastVisualContext = React13.createContext(null);
 var toastStatusIconByVariant = {
@@ -3889,7 +4005,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -3906,7 +4022,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx34(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx34("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+      children: /* @__PURE__ */ jsx35(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx35("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
     }
   );
 }
@@ -3917,7 +4033,7 @@ function ToastTitle({
 }) {
   const toastVisual = React13.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
@@ -3927,7 +4043,7 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx34(
+        toastVisual?.busy ? /* @__PURE__ */ jsx35(
           Spinner,
           {
             className: "shrink-0 text-current",
@@ -3935,8 +4051,8 @@ function ToastTitle({
             strokeWidth: 2,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx34(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx34("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+        ) : StatusIcon ? /* @__PURE__ */ jsx35(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx35("span", { className: "min-w-0 break-words", children: formatToastText(children) })
       ]
     }
   );
@@ -3945,7 +4061,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -3961,7 +4077,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -3970,7 +4086,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx34(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx35(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -3979,7 +4095,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -3994,8 +4110,8 @@ function ToastViewport({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState9 } from "react";
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect4, useRef as useRef5, useState as useState10 } from "react";
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -4010,15 +4126,15 @@ function UnderlineTabs({
   scrollRightTestId,
   preventMouseDownDefault = false
 }) {
-  const viewportRef = useRef4(null);
-  const rowRef = useRef4(null);
-  const buttonRefs = useRef4({});
-  const [indicatorStyle, setIndicatorStyle] = useState9({ left: 0, width: 0 });
-  const [overflow, setOverflow] = useState9({
+  const viewportRef = useRef5(null);
+  const rowRef = useRef5(null);
+  const buttonRefs = useRef5({});
+  const [indicatorStyle, setIndicatorStyle] = useState10({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState10({
     canScrollLeft: false,
     canScrollRight: false
   });
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     const row = rowRef.current;
     const button = buttonRefs.current[value];
     if (!row || !button) {
@@ -4035,7 +4151,7 @@ function UnderlineTabs({
       (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
     );
   }, [tabs, value]);
-  useEffect6(() => {
+  useEffect7(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -4078,7 +4194,7 @@ function UnderlineTabs({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       "aria-label": ariaLabel,
@@ -4090,7 +4206,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "div",
           {
             ref: viewportRef,
@@ -4104,7 +4220,7 @@ function UnderlineTabs({
             "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
             "data-slot": "underline-tabs-viewport",
             "data-testid": viewportTestId,
-            children: /* @__PURE__ */ jsxs17(
+            children: /* @__PURE__ */ jsxs18(
               "div",
               {
                 ref: rowRef,
@@ -4112,7 +4228,7 @@ function UnderlineTabs({
                 children: [
                   tabs.map((tab) => {
                     const isActive = value === tab.value;
-                    return /* @__PURE__ */ jsxs17(
+                    return /* @__PURE__ */ jsxs18(
                       "button",
                       {
                         ref: (element) => {
@@ -4135,14 +4251,14 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx35("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx35("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
+                          /* @__PURE__ */ jsx36("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx36("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
                         ]
                       },
                       tab.value
                     );
                   }),
-                  /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsx36(
                     "div",
                     {
                       "aria-hidden": true,
@@ -4159,7 +4275,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -4170,10 +4286,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx35(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx36(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -4184,7 +4300,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx35(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx36(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -4195,7 +4311,7 @@ function UnderlineTabs({
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
 import * as React14 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
 var MENU_BOUNDARY_PADDING = 8;
 function clampMenuCoordinate(origin, size, viewportExtent, padding) {
@@ -4465,7 +4581,7 @@ var ViewportMenuSurface = React14.forwardRef(function ViewportMenuSurface2({
   }
   const portalTarget = resolvedPlacement.portalTarget ?? document.body;
   return createPortal3(
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       MenuSurface,
       {
         ...rest,
@@ -4602,6 +4718,7 @@ export {
   SelectScrollDownButton,
   Separator2 as Separator,
   SectionTabs,
+  SegmentBar,
   ShortcutBadge,
   Slider,
   toast,
@@ -4626,4 +4743,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-BHO2ZGYJ.js.map
+//# sourceMappingURL=chunk-FQWIOPDU.js.map