@justanarthur/modo-ui 0.1.0 → 0.3.0

package/dist/shared/{components-s3yfvfkr.js → components-gc5vtq2f.js}

@@ -1,30 +1,30 @@
 import {
-  slotRender
-} from "./components-5vxtcp88.js";
+  MorphSurface
+} from "./components-0q0sqfh4.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
-  SurfaceProvider,
-  useSurface
-} from "./components-csxz9f52.js";
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
-  MorphSurface
-} from "./components-jxgznftn.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  useControllableState
-} from "./components-dg0w8g5p.js";
+  slotRender
+} from "./components-3ky44908.js";
 import {
-  inPlaceOffset,
-  opensInPlace,
-  useMorph,
-  useMorphOrigin
-} from "./components-7nww01w4.js";
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 
 // components/overlays/popover/index.tsx
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
@@ -37,7 +37,7 @@ import {
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var PopoverContext = createContext({ open: false, origin: { current: {} } });
-var PopoverTrigger = forwardRef(({ render, asChild, children, ...props }, ref) => {
+var PopoverTrigger2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
   const el = slotRender(render, asChild, children);
   return el ? /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
     ref,
@@ -49,8 +49,8 @@ var PopoverTrigger = forwardRef(({ render, asChild, children, ...props }, ref) =
     children
   });
 });
-PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverClose = forwardRef(({ render, asChild, children, ...props }, ref) => {
+PopoverTrigger2.displayName = "PopoverTrigger";
+var PopoverClose2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
   const el = slotRender(render, asChild, children);
   return el ? /* @__PURE__ */ jsx(PopoverPrimitive.Close, {
     ref,
@@ -62,8 +62,8 @@ var PopoverClose = forwardRef(({ render, asChild, children, ...props }, ref) =>
     children
   });
 });
-PopoverClose.displayName = "PopoverClose";
-var PopoverContent = forwardRef(({
+PopoverClose2.displayName = "PopoverClose";
+var PopoverContent2 = forwardRef(({
   side = "bottom",
   align,
   sideOffset = 12,
@@ -81,7 +81,7 @@ var PopoverContent = forwardRef(({
   const inPlace = opensInPlace({ effect, hideSource });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   const shape = useShape();
-  const level = Math.min(useSurface() + 2, 8);
+  const level = Math.min(useSurface2() + 2, 8);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
     container: container ?? undefined,
     children: /* @__PURE__ */ jsx(PopoverPrimitive.Positioner, {
@@ -93,14 +93,14 @@ var PopoverContent = forwardRef(({
         ref: morph.popupRef,
         className: "relative outline-none",
         ...props,
-        children: /* @__PURE__ */ jsx(SurfaceProvider, {
+        children: /* @__PURE__ */ jsx(SurfaceProvider2, {
           value: level,
           children: /* @__PURE__ */ jsx(MorphSurface, {
             morph,
             bg: SURFACE_BG[level],
             shadow: SURFACE_SHADOW[3],
             radius: shape.container,
-            className: cn("flex w-max max-w-[min(92vw,20rem)] flex-col gap-1 p-4", className),
+            className: cn2("flex w-max max-w-[min(92vw,20rem)] flex-col gap-1 p-4", className),
             children
           })
         })
@@ -108,20 +108,20 @@ var PopoverContent = forwardRef(({
     })
   });
 });
-PopoverContent.displayName = "PopoverContent";
-var PopoverTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Title, {
+PopoverContent2.displayName = "PopoverContent";
+var PopoverTitle2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Title, {
   ref,
-  className: cn("text-subtitle weight-semibold text-foreground", className),
+  className: cn2("text-subtitle weight-semibold text-foreground", className),
   ...props
 }));
-PopoverTitle.displayName = "PopoverTitle";
-var PopoverDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Description, {
+PopoverTitle2.displayName = "PopoverTitle";
+var PopoverDescription2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Description, {
   ref,
-  className: cn("text-caption text-muted-foreground", className),
+  className: cn2("text-caption text-muted-foreground", className),
   ...props
 }));
-PopoverDescription.displayName = "PopoverDescription";
-function Popover({ open, defaultOpen = false, onOpenChange, modal = false, children }) {
+PopoverDescription2.displayName = "PopoverDescription";
+function Popover2({ open, defaultOpen = false, onOpenChange, modal = false, children }) {
   const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
   const { origin, capture } = useMorphOrigin();
   const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
@@ -139,11 +139,11 @@ function Popover({ open, defaultOpen = false, onOpenChange, modal = false, child
     })
   });
 }
-Popover.Trigger = PopoverTrigger;
-Popover.Content = PopoverContent;
-Popover.Title = PopoverTitle;
-Popover.Description = PopoverDescription;
-Popover.Close = PopoverClose;
-var popover_default = Popover;
+Popover2.Trigger = PopoverTrigger2;
+Popover2.Content = PopoverContent2;
+Popover2.Title = PopoverTitle2;
+Popover2.Description = PopoverDescription2;
+Popover2.Close = PopoverClose2;
+var popover_default = Popover2;
 
-export { PopoverTrigger, PopoverClose, PopoverContent, PopoverTitle, PopoverDescription, Popover, popover_default };
+export { PopoverTrigger2, PopoverClose2, PopoverContent2, PopoverTitle2, PopoverDescription2, Popover2, popover_default };

package/dist/shared/components-gf5s6ap9.js

@@ -0,0 +1,42 @@
+import {
+  DialogTrigger2,
+  DialogClose2,
+  DialogContent2,
+  DialogHeader2,
+  DialogFooter2,
+  DialogTitle2,
+  DialogDescription2,
+  DialogState2
+} from "./components-zfnmn5d4.js";
+
+// components/overlays/alert-dialog/index.tsx
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var AlertDialogContent2 = forwardRef(({ showCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsx(DialogContent2, {
+  ref,
+  showCloseButton,
+  ...props
+}));
+AlertDialogContent2.displayName = "AlertDialogContent";
+function AlertDialog2({ children, open, defaultOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx(DialogState2, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: (root) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, {
+      ...root,
+      children
+    })
+  });
+}
+AlertDialog2.Trigger = DialogTrigger2;
+AlertDialog2.Content = AlertDialogContent2;
+AlertDialog2.Header = DialogHeader2;
+AlertDialog2.Footer = DialogFooter2;
+AlertDialog2.Title = DialogTitle2;
+AlertDialog2.Description = DialogDescription2;
+AlertDialog2.Close = DialogClose2;
+var alert_dialog_default = AlertDialog2;
+
+export { AlertDialogContent2, AlertDialog2, alert_dialog_default };

package/dist/shared/{components-7cqq1sqy.js → components-gvr9w41t.js}

@@ -1,26 +1,26 @@
 import {
-  fieldIconClasses,
-  fieldVariants
-} from "./components-de8xsm9y.js";
-import {
-  SizeProvider
-} from "./components-vb033rns.js";
-import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
+  fieldVariants,
+  fieldIconClasses
+} from "./components-mhd39z7x.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
   useControllableState
-} from "./components-dg0w8g5p.js";
+} from "./components-n7mjr357.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  SizeProvider2
+} from "./components-jjw69c4c.js";
 
 // components/inputs/input/index.tsx
 import { Field } from "@base-ui/react/field";
@@ -40,7 +40,7 @@ function useInputGroup() {
   return ctx;
 }
 var FieldStateContext = createContext(null);
-var Input = forwardRef(({
+var Input2 = forwardRef(({
   icon: Icon,
   value: valueProp,
   defaultValue = "",
@@ -55,7 +55,7 @@ var Input = forwardRef(({
   const inputRef = useRef(null);
   const field = useContext(FieldStateContext);
   const shape = useShape();
-  const sizeClasses = useSize(size);
+  const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsxs("div", {
     onMouseDown: (e) => {
@@ -67,7 +67,7 @@ var Input = forwardRef(({
     "data-active": field?.active || undefined,
     "data-invalid": invalid || undefined,
     "data-disabled": disabled || undefined,
-    className: cn(fieldVariants(), "flex items-center", sizeClasses.gap, shape.input, compact ? "px-2" : "px-2.5", sizeClasses.control, className),
+    className: cn2(fieldVariants(), "flex items-center", sizeClasses.gap, shape.input, compact ? "px-2" : "px-2.5", sizeClasses.control, className),
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,
@@ -88,19 +88,19 @@ var Input = forwardRef(({
         onChange: (e) => onChange(e.target.value),
         disabled,
         "aria-invalid": invalid || undefined,
-        className: cn("w-full rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
+        className: cn2("w-full rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
         ...props
       })
     ]
   });
 });
-Input.displayName = "Input";
-var Label = forwardRef(({ children, invalid, size, className, ...props }, ref) => {
-  const sizeClasses = useSize(size);
+Input2.displayName = "Input";
+var Label2 = forwardRef(({ children, invalid, size, className, ...props }, ref) => {
+  const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsxs("label", {
     ref,
-    className: cn("inline-grid", sizeClasses.text, "data-[disabled]:opacity-50", compact ? "pl-2" : "pl-2.5", className),
+    className: cn2("inline-grid", sizeClasses.text, "data-[disabled]:opacity-50", compact ? "pl-2" : "pl-2.5", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx("span", {
@@ -109,16 +109,16 @@ var Label = forwardRef(({ children, invalid, size, className, ...props }, ref) =
         children
       }),
       /* @__PURE__ */ jsx("span", {
-        className: cn("col-start-1 row-start-1", invalid ? "text-destructive" : "text-muted-foreground", "weight-normal"),
+        className: cn2("col-start-1 row-start-1", invalid ? "text-destructive" : "text-muted-foreground", "weight-normal"),
         children
       })
     ]
   });
 });
-Label.displayName = "Label";
-var InputGroup = forwardRef(({ children, size, className, ...props }, ref) => {
+Label2.displayName = "Label";
+var InputGroup2 = forwardRef(({ children, size, className, ...props }, ref) => {
   const containerRef = useRef(null);
-  const { activeIndex, handlers, registerItem } = useFluidHover(containerRef);
+  const { activeIndex, handlers, registerItem } = useFluidHover2(containerRef);
   const contextValue = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
   const group = /* @__PURE__ */ jsx(InputGroupContext.Provider, {
     value: contextValue,
@@ -133,23 +133,23 @@ var InputGroup = forwardRef(({ children, size, className, ...props }, ref) => {
       onMouseEnter: handlers.onMouseEnter,
       onMouseMove: handlers.onMouseMove,
       onMouseLeave: handlers.onMouseLeave,
-      className: cn("relative flex flex-col gap-3 w-72 max-w-full", className),
+      className: cn2("relative flex flex-col gap-3 w-72 max-w-full", className),
       ...props,
       children
     })
   });
-  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
     size,
     children: group
   }) : group;
 });
-InputGroup.displayName = "InputGroup";
+InputGroup2.displayName = "InputGroup";
 var InputField = forwardRef(({ label, labelHidden, index, error, disabled, className, ...props }, ref) => {
   const internalRef = useRef(null);
   const { registerItem, activeIndex } = useInputGroup();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
-  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
   const fieldState = useMemo(() => ({ active: activeIndex === index }), [activeIndex, index]);
   return /* @__PURE__ */ jsxs(Field.Root, {
     ref: (node) => {
@@ -161,10 +161,10 @@ var InputField = forwardRef(({ label, labelHidden, index, error, disabled, class
     },
     invalid: !!error,
     disabled,
-    className: cn("flex flex-col gap-1 cursor-text", disabled && "pointer-events-none", className),
+    className: cn2("flex flex-col gap-1 cursor-text", disabled && "pointer-events-none", className),
     children: [
       /* @__PURE__ */ jsx(Field.Label, {
-        render: /* @__PURE__ */ jsx(Label, {
+        render: /* @__PURE__ */ jsx(Label2, {
           invalid: !!error,
           className: labelHidden ? "sr-only" : undefined,
           children: label
@@ -172,7 +172,7 @@ var InputField = forwardRef(({ label, labelHidden, index, error, disabled, class
       }),
       /* @__PURE__ */ jsx(FieldStateContext.Provider, {
         value: fieldState,
-        children: /* @__PURE__ */ jsx(Input, {
+        children: /* @__PURE__ */ jsx(Input2, {
           invalid: !!error,
           disabled,
           ...props
@@ -180,14 +180,14 @@ var InputField = forwardRef(({ label, labelHidden, index, error, disabled, class
       }),
       error && /* @__PURE__ */ jsx(Field.Error, {
         match: true,
-        className: cn("text-destructive", compact ? "text-caption-compact pl-2" : "text-caption pl-2.5", "weight-medium"),
+        className: cn2("text-destructive", compact ? "text-caption-compact pl-2" : "text-caption pl-2.5", "weight-medium"),
         children: error
       })
     ]
   });
 });
 InputField.displayName = "InputField";
-Object.assign(InputGroup, { Field: InputField });
-var input_default = Input;
+Object.assign(InputGroup2, { Field: InputField });
+var input_default = Input2;
 
-export { Input, Label, InputGroup, input_default };
+export { Input2, Label2, InputGroup2, input_default };

package/dist/shared/{components-x2xyckd5.js → components-gz8zf3ec.js}

@@ -1,22 +1,22 @@
 import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  useShape
-} from "./components-7zp99w5d.js";
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
 import {
-  useReduceMotion
-} from "./components-nnnd2xef.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
 
 // lib/date-locale.ts
 import { isValid, parse } from "date-fns";
@@ -78,7 +78,7 @@ function ScrollColumn({
   const centred = useRef(false);
   const reduceMotion = useReduceMotion();
   const horizontal = orientation === "horizontal";
-  const hover = useFluidHover(containerRef, { axis: horizontal ? "x" : "y" });
+  const hover = useFluidHover2(containerRef, { axis: horizontal ? "x" : "y" });
   const shape = useShape();
   const axis = useRef(horizontal);
   useEffect(() => {
@@ -133,16 +133,16 @@ function ScrollColumn({
     onPointerLeave: () => {
       pointerInside.current = false;
     },
-    className: cn("scrollbar-hide [--scroll-fade-size:24px]", horizontal ? "overflow-x-auto overflow-y-hidden scroll-fade-x" : "overflow-y-auto overflow-x-hidden scroll-fade", className),
+    className: cn2("scrollbar-hide [--scroll-fade-size:24px]", horizontal ? "overflow-x-auto overflow-y-hidden scroll-fade-x" : "overflow-y-auto overflow-x-hidden scroll-fade", className),
     children: /* @__PURE__ */ jsxs("div", {
       ref: containerRef,
       onMouseMove: hover.handlers.onMouseMove,
       onMouseEnter: hover.handlers.onMouseEnter,
       onMouseLeave: hover.handlers.onMouseLeave,
       onClick: hover.handlers.onClick,
-      className: cn("relative flex p-1", horizontal ? "w-max flex-row" : "flex-col"),
+      className: cn2("relative flex p-1", horizontal ? "w-max flex-row" : "flex-col"),
       children: [
-        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
           hover,
           className: shape.bg
         }),
@@ -171,9 +171,9 @@ function ScrollColumnItem({
   onSelect
 }) {
   const ref = useRef(null);
-  useRegisterFluidHoverItem(registerItem, index, ref);
+  useRegisterFluidHoverItem2(registerItem, index, ref);
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   return /* @__PURE__ */ jsxs("button", {
     ref,
     type: "button",
@@ -184,7 +184,7 @@ function ScrollColumnItem({
     "data-value": option.value,
     "data-fluid-hover-index": index,
     onClick: onSelect,
-    className: cn("relative z-[1] flex shrink-0 items-center justify-center px-2 tabular-nums whitespace-nowrap outline-none", "transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", sizeClasses.segmentItem, sizeClasses.text, shape.item, band && !selected && "bg-accent/20 dark:bg-accent/12", selected && "bg-active", band && band !== "single" && "rounded-none", band === "start" && (horizontal ? "rounded-s-lg" : "rounded-t-lg"), band === "end" && (horizontal ? "rounded-e-lg" : "rounded-b-lg"), selected ? "text-foreground weight-semibold" : band ? "text-foreground" : "text-muted-foreground"),
+    className: cn2("relative z-[1] flex shrink-0 items-center justify-center px-2 tabular-nums whitespace-nowrap outline-none", "transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", sizeClasses.segmentItem, sizeClasses.text, shape.item, band && !selected && "bg-accent/20 dark:bg-accent/12", selected && "bg-active", band && band !== "single" && "rounded-none", band === "start" && (horizontal ? "rounded-s-lg" : "rounded-t-lg"), band === "end" && (horizontal ? "rounded-e-lg" : "rounded-b-lg"), selected ? "text-foreground weight-semibold" : band ? "text-foreground" : "text-muted-foreground"),
     children: [
       selected && /* @__PURE__ */ jsx("span", {
         "aria-hidden": true,

package/dist/shared/{components-ed7cmssr.js → components-hawvy2qz.js}

@@ -1,9 +1,9 @@
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  cn2
+} from "./components-ezxhrmer.js";
 
 // primitives/scroll-area/index.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
@@ -39,7 +39,7 @@ function useTouchPrimary() {
 // primitives/scroll-area/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var ScrollAreaContext = createContext(false);
-var ScrollArea = forwardRef(({ className, children, viewportClassName, orientation = "vertical", ...props }, ref) => {
+var ScrollArea2 = forwardRef(({ className, children, viewportClassName, orientation = "vertical", ...props }, ref) => {
   const isTouch = useTouchPrimary();
   return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, {
     value: isTouch,
@@ -48,31 +48,31 @@ var ScrollArea = forwardRef(({ className, children, viewportClassName, orientati
       role: "group",
       "data-slot": "scroll-area",
       "aria-roledescription": "scroll area",
-      className: cn("relative overflow-hidden", className),
+      className: cn2("relative overflow-hidden", className),
       ...props,
       children: /* @__PURE__ */ jsx("div", {
         "data-slot": "scroll-area-viewport",
-        className: cn("size-full rounded-[inherit]", orientation === "vertical" && "overflow-y-auto", orientation === "horizontal" && "overflow-x-auto", orientation === "both" && "overflow-auto", viewportClassName),
+        className: cn2("size-full rounded-[inherit]", orientation === "vertical" && "overflow-y-auto", orientation === "horizontal" && "overflow-x-auto", orientation === "both" && "overflow-auto", viewportClassName),
         tabIndex: 0,
         children
       })
     }) : /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
       ref,
       "data-slot": "scroll-area",
-      className: cn("relative overflow-hidden", className),
+      className: cn2("relative overflow-hidden", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
           "data-slot": "scroll-area-viewport",
-          className: cn("size-full rounded-[inherit]", viewportClassName),
+          className: cn2("size-full rounded-[inherit]", viewportClassName),
           children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Content, {
             children
           })
         }),
-        orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, {
+        orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar2, {
           orientation: "vertical"
         }),
-        orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, {
+        orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar2, {
           orientation: "horizontal"
         }),
         orientation === "both" && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
@@ -80,8 +80,8 @@ var ScrollArea = forwardRef(({ className, children, viewportClassName, orientati
     })
   });
 });
-ScrollArea.displayName = "ScrollArea";
-var ScrollBar = forwardRef(({ className, orientation = "vertical", ...props }, ref) => {
+ScrollArea2.displayName = "ScrollArea";
+var ScrollBar2 = forwardRef(({ className, orientation = "vertical", ...props }, ref) => {
   const isTouch = useContext(ScrollAreaContext);
   const shape = useShape();
   if (isTouch)
@@ -90,16 +90,16 @@ var ScrollBar = forwardRef(({ className, orientation = "vertical", ...props }, r
     ref,
     orientation,
     "data-slot": "scroll-area-scrollbar",
-    className: cn("group/scrollbar absolute z-20 flex touch-none select-none", "opacity-0 transition-opacity duration-moderate-exit ease-out delay-moderate", "data-[hovering]:duration-moderate data-[scrolling]:duration-moderate", "data-[hovering]:opacity-100 data-[scrolling]:opacity-100", "data-[hovering]:delay-0 data-[scrolling]:delay-0", orientation === "vertical" && "top-0 right-0 h-full w-2.5", orientation === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col", className),
+    className: cn2("group/scrollbar absolute z-20 flex touch-none select-none", "opacity-0 transition-opacity duration-moderate-exit ease-out delay-moderate", "data-[hovering]:duration-moderate data-[scrolling]:duration-moderate", "data-[hovering]:opacity-100 data-[scrolling]:opacity-100", "data-[hovering]:delay-0 data-[scrolling]:delay-0", orientation === "vertical" && "top-0 right-0 h-full w-2.5", orientation === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col", className),
     ...props,
     children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, {
       "data-slot": "scroll-area-thumb",
-      className: cn("relative bg-overlay/8 transition-[background-color,width,height] duration-moderate ease-in-out", "group-hover/scrollbar:bg-overlay/12 active:!bg-overlay/16", shape.bg, orientation === "vertical" && "mx-auto my-1 w-1 -translate-x-0.5 h-[var(--scroll-area-thumb-height)] group-hover/scrollbar:w-1.5", orientation === "horizontal" && "my-auto mx-1 h-1 -translate-y-0.5 w-[var(--scroll-area-thumb-width)] group-hover/scrollbar:h-1.5")
+      className: cn2("relative bg-overlay/8 transition-[background-color,width,height] duration-moderate ease-in-out", "group-hover/scrollbar:bg-overlay/12 active:!bg-overlay/16", shape.bg, orientation === "vertical" && "mx-auto my-1 w-1 -translate-x-0.5 h-[var(--scroll-area-thumb-height)] group-hover/scrollbar:w-1.5", orientation === "horizontal" && "my-auto mx-1 h-1 -translate-y-0.5 w-[var(--scroll-area-thumb-width)] group-hover/scrollbar:h-1.5")
     })
   });
 });
-ScrollBar.displayName = "ScrollBar";
-Object.assign(ScrollArea, { Bar: ScrollBar });
-var scroll_area_default = ScrollArea;
+ScrollBar2.displayName = "ScrollBar";
+Object.assign(ScrollArea2, { Bar: ScrollBar2 });
+var scroll_area_default = ScrollArea2;
 
-export { ScrollArea, ScrollBar, scroll_area_default };
+export { ScrollArea2, ScrollBar2, scroll_area_default };