@mvn-ui/react 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -5,7 +5,7 @@ import React49__default, { createContext, forwardRef, useRef, useState, useEffec
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { Loader2Icon, XIcon, EyeOffIcon, EyeIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, MinusIcon, CircleIcon, X, InboxIcon, ChevronRightIcon, ChevronsUpDownIcon, PanelLeftIcon, CalendarIcon, ArrowLeft, ArrowRight, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown, Star, RotateCcw, MoreHorizontalIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, GripVerticalIcon, FileDown, SearchIcon, TextAlignJustify, Scaling, Pin, ListFilter, Minus, Plus } from 'lucide-react';
+import { Loader2Icon, XIcon, EyeOffIcon, EyeIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, MinusIcon, CircleIcon, X, InboxIcon, ChevronRightIcon, ChevronsUpDownIcon, CalendarIcon, ArrowLeft, ArrowRight, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown, Star, RotateCcw, MoreHorizontalIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, GripVerticalIcon, PanelLeftIcon, FileDown, SearchIcon, TextAlignJustify, Scaling, Pin, ListFilter, Minus, Plus } from 'lucide-react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -795,7 +795,28 @@ Textarea.displayName = "Textarea";
 
 // src/components/ui/select/index.tsx
 init_utils();
-var Select = SelectPrimitive.Root;
+var Select = React49.forwardRef(
+  ({ children, value, onValueChange, ...props }, _ref) => {
+    const [internalValue, setInternalValue] = React49.useState(value ?? "");
+    React49.useEffect(() => {
+      setInternalValue(value ?? "");
+    }, [value]);
+    const handleValueChange = (newValue) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsx(
+      SelectPrimitive.Root,
+      {
+        value: internalValue,
+        onValueChange: handleValueChange,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Select.displayName = "Select";
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 var triggerVariants = cva(
@@ -1157,7 +1178,7 @@ var toggleGroupVariants = cva(
   }
 );
 var toggleGroupItemVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm hover:bg-surface-3 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border-b border-line-strong font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:border-primary data-[state=on]:text-primary hover:bg-surface-3 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       size: {
@@ -1172,15 +1193,7 @@ var toggleGroupItemVariants = cva(
   }
 );
 var ToggleGroup = React49.forwardRef(
-  ({
-    className,
-    size,
-    items,
-    itemClassName,
-    renderItem,
-    children,
-    ...props
-  }, ref) => {
+  ({ className, size, items, itemClassName, renderItem, children, ...props }, ref) => {
     const defaultRenderItem = React49.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         ToggleGroupPrimitive.Item,
@@ -1273,21 +1286,18 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/components/ui/input-group/index.tsx
 init_utils();
-var inputGroupVariants = cva(
-  "flex items-stretch w-full",
-  {
-    variants: {
-      size: {
-        sm: "h-8 text-sm",
-        default: "h-10 text-[0.9375rem]",
-        lg: "h-12 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "default"
+var inputGroupVariants = cva("flex items-stretch w-full", {
+  variants: {
+    size: {
+      sm: "h-8 text-sm",
+      default: "h-10 text-[0.9375rem]",
+      lg: "h-12 text-base"
     }
+  },
+  defaultVariants: {
+    size: "default"
   }
-);
+});
 var InputGroup = React49.forwardRef(
   ({
     className,
@@ -1329,9 +1339,8 @@ var InputGroup = React49.forwardRef(
               return React49.cloneElement(child, {
                 className: cn(
                   child.props.className,
-                  leftAddon && "rounded-l-none border-l-0",
-                  rightAddon && "rounded-r-none border-r-0",
-                  (leftElement || rightElement) && "rounded-none"
+                  (leftAddon || leftElement) && "rounded-l-none border-l-0",
+                  (rightAddon || rightElement) && "rounded-r-none border-r-0"
                 )
               });
             }
@@ -1459,7 +1468,7 @@ function deleteValueByPath(obj, path) {
 
 // src/components/ui/form/form-instance.ts
 var externalMounts = /* @__PURE__ */ new WeakMap();
-function createFormInstance() {
+function createFormInstance(name) {
   const store = {
     values: {},
     errors: {}
@@ -1484,7 +1493,10 @@ function createFormInstance() {
     };
     subscribers.forEach((fn) => fn && fn(snapshot));
     fieldMeta.forEach((meta) => meta.onStoreChange && meta.onStoreChange());
-    if (ext) ext.forEach((handler) => handler.onStoreChange && handler.onStoreChange());
+    if (ext)
+      ext.forEach(
+        (handler) => handler.onStoreChange && handler.onStoreChange()
+      );
   }
   function scheduleNotify() {
     if (pendingNotify) return;
@@ -1515,8 +1527,8 @@ function createFormInstance() {
       if (options && options.clone === false) return store.values;
       return cloneDeep(store.values);
     },
-    getFieldValue(name) {
-      const path = toNamePath(name);
+    getFieldValue(name2) {
+      const path = toNamePath(name2);
       return getValueByPath(store.values, path);
     },
     setFieldsValue(vals, options) {
@@ -1582,24 +1594,27 @@ function createFormInstance() {
         instance.validateFields(names).catch((validationError) => {
           if (validationError && validationError.errorFields) {
             mounts.forEach((handler) => {
-              if (handler.onFieldsChange) handler.onFieldsChange(validationError.errorFields);
+              if (handler.onFieldsChange)
+                handler.onFieldsChange(validationError.errorFields);
             });
             try {
               const ext = externalMounts.get(instance);
               if (ext) {
                 ext.forEach((handler) => {
-                  if (handler.onFieldsChange) handler.onFieldsChange(validationError.errorFields);
+                  if (handler.onFieldsChange)
+                    handler.onFieldsChange(validationError.errorFields);
                 });
               }
             } catch (error) {
             }
-            if (instance.onFieldsChange) instance.onFieldsChange(validationError.errorFields);
+            if (instance.onFieldsChange)
+              instance.onFieldsChange(validationError.errorFields);
           }
         });
       }
     },
-    setFieldValue(name, value) {
-      const path = toNamePath(name);
+    setFieldValue(name2, value) {
+      const path = toNamePath(name2);
       setValueByPath(store.values, path, value);
       const key = namePathToString(path);
       delete store.errors[key];
@@ -1724,16 +1739,21 @@ function createFormInstance() {
         return Promise.resolve({ ...store.values });
       });
     },
-    submit() {
-      instance.validateFields().then(() => {
+    async submit() {
+      try {
+        await instance.validateFields();
         mounts.forEach((handler) => handler.onSubmit && handler.onSubmit());
         try {
           const ext = externalMounts.get(instance);
-          if (ext) ext.forEach((handler) => handler.onSubmit && handler.onSubmit());
+          if (ext)
+            ext.forEach(
+              (external_handler) => external_handler.onSubmit && external_handler.onSubmit()
+            );
         } catch (error) {
         }
-      }).catch(() => {
-      });
+      } catch (validate_error) {
+        return await Promise.reject(validate_error);
+      }
     },
     resetFields(names) {
       let changed = false;
@@ -1747,8 +1767,8 @@ function createFormInstance() {
         scheduleNotify();
         return;
       }
-      names.forEach((name) => {
-        const path = toNamePath(name);
+      names.forEach((name2) => {
+        const path = toNamePath(name2);
         const key = namePathToString(path);
         if (getValueByPath(store.values, path) !== void 0) {
           changed = true;
@@ -1762,8 +1782,8 @@ function createFormInstance() {
       if (changed) version += 1;
       scheduleNotify();
     },
-    getFieldError(name) {
-      const path = toNamePath(name);
+    getFieldError(name2) {
+      const path = toNamePath(name2);
       const key = namePathToString(path);
       return store.errors[key] || [];
     },
@@ -1773,8 +1793,8 @@ function createFormInstance() {
         return { name: meta.namePath, errors: store.errors[key] || [] };
       });
     },
-    registerField(name, meta) {
-      const path = toNamePath(name);
+    registerField(name2, meta) {
+      const path = toNamePath(name2);
       const key = namePathToString(path);
       fieldMeta.set(key, {
         namePath: path,
@@ -1785,8 +1805,8 @@ function createFormInstance() {
         getValueFromEvent: meta.getValueFromEvent
       });
     },
-    unregisterField(name) {
-      const path = toNamePath(name);
+    unregisterField(name2) {
+      const path = toNamePath(name2);
       const key = namePathToString(path);
       fieldMeta.delete(key);
       if (!preserveOnUnmount) {
@@ -1810,15 +1830,15 @@ function createFormInstance() {
       return () => subscribers.delete(fn);
     },
     INTERNAL: {
-      name: void 0,
+      name,
       itemRef: (nameArr) => (node) => {
         const key = namePathToString(nameArr);
         if (node) itemsRef[key] = node;
         else delete itemsRef[key];
       }
     },
-    getFieldInstance(name) {
-      const key = namePathToString(toNamePath(name));
+    getFieldInstance(name2) {
+      const key = namePathToString(toNamePath(name2));
       return itemsRef[key];
     }
   };
@@ -1827,16 +1847,19 @@ function createFormInstance() {
     instance.preserveOnUnmount = preserveOnUnmount;
   };
   instance.preserveOnUnmount = preserveOnUnmount;
+  if (name && instance.INTERNAL) instance.INTERNAL.name = name;
   return instance;
 }
 
 // src/components/ui/form/form-context.tsx
 var FormContext = createContext(null);
-function useForm() {
+function useForm(name) {
   const ref = useRef();
   if (!ref.current) {
-    const instance = createFormInstance();
+    const instance = createFormInstance(name);
     ref.current = instance;
+  } else if (name && ref.current.INTERNAL) {
+    ref.current.INTERNAL.name = name;
   }
   return ref.current;
 }
@@ -1998,7 +2021,7 @@ var Form = forwardRef(function Form2(props, ref) {
     };
     let unregisterMount;
     if (form.registerMount) {
-      const mountId = Math.random().toString(36).slice(2);
+      const mountId = form.INTERNAL?.name ?? Math.random().toString(36).slice(2);
       if (preserve !== void 0) {
         if (form.setPreserve) form.setPreserve(!!preserve);
         else form.preserveOnUnmount = !!preserve;
@@ -2010,7 +2033,7 @@ var Form = forwardRef(function Form2(props, ref) {
         map = /* @__PURE__ */ new Map();
         externalMounts.set(form, map);
       }
-      const mountId = Math.random().toString(36).slice(2);
+      const mountId = form.INTERNAL?.name ?? Math.random().toString(36).slice(2);
       map.set(mountId, mountHandlers);
       if (preserve !== void 0) {
         if (form.setPreserve) form.setPreserve(!!preserve);
@@ -2085,7 +2108,7 @@ var FormItem = (props) => {
   const requiredIndicator = requiredMark === void 0 ? /* @__PURE__ */ jsx("span", { className: "text-destructive mr-1", "aria-hidden": "true", children: "*" }) : /* @__PURE__ */ jsx("span", { className: "mr-1", "aria-hidden": "true", children: requiredMark });
   if (!children || !React49__default.isValidElement(children)) return null;
   const childProps = {};
-  if (fieldValue !== void 0) childProps[valuePropName] = fieldValue;
+  childProps[valuePropName] = fieldValue;
   const childClass = children.props.className;
   if (childClass || props.className) {
     childProps.className = [childClass, props.className].filter(Boolean).join(" ");
@@ -4291,13 +4314,20 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/ui/tabs/index.tsx
 init_utils();
-var Tabs = TabsPrimitive.Root;
+var TabsContext = React49.createContext({
+  destroyInactiveTabs: true
+});
+var Tabs = React49.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
+Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "flex items-stretch gap-0 text-muted-foreground",
+      "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-border",
+      "data-[orientation=vertical]:w-56 data-[orientation=vertical]:border-r data-[orientation=vertical]:border-border",
+      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shrink-0",
       className
     ),
     ...props
@@ -4309,27 +4339,34 @@ var TabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-4 py-2 text-sm font-medium ring-offset-background transition-all",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
+      "inline-flex min-w-0 items-center justify-center whitespace-nowrap text-sm font-medium",
+      "transition-all duration-150 text-muted-foreground hover:text-primary",
       "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "p-4 rounded-md border bg-card",
+      "data-[orientation=horizontal]:flex-1 data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3 data-[orientation=horizontal]:border-b-2 data-[orientation=horizontal]:border-border",
+      "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-border",
+      "data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:bg-muted/60 data-[state=active]:border-primary",
+      "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
       className
     ),
     ...props
   }
 ));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React49.forwardRef(({ className, ...props }, ref) => {
+  const { destroyInactiveTabs } = React49.useContext(TabsContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      forceMount: destroyInactiveTabs ? void 0 : true,
+      className: cn(
+        "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=inactive]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+});
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 function SimpleTabs({
   items,
@@ -4340,10 +4377,12 @@ function SimpleTabs({
   tabsListClassName,
   tabsTriggerClassName,
   tabsContentClassName,
-  orientation = "horizontal"
+  orientation = "horizontal",
+  destroyInactiveTabs = true
 }) {
-  const defaultTabsListClassName = orientation === "vertical" ? "flex-col h-auto w-auto p-2 mr-4" : "mb-4";
-  const defaultTabsContentClassName = orientation === "vertical" ? "mt-0 ml-4" : "";
+  const defaultTabsListClassName = orientation === "vertical" ? "bg-background/60 p-2" : "w-full";
+  const defaultTabsContentClassName = orientation === "vertical" ? "ml-0 flex-1 min-w-0" : "w-full";
+  const rootLayoutClassName = orientation === "vertical" ? "flex flex-row w-full max-w-full items-start gap-6" : "flex w-full flex-col gap-6";
   return /* @__PURE__ */ jsxs(
     Tabs,
     {
@@ -4351,20 +4390,15 @@ function SimpleTabs({
       value,
       onValueChange,
       orientation,
-      className: cn(
-        orientation === "vertical" ? "flex flex-row" : "",
-        className
-      ),
+      destroyInactiveTabs,
+      className: cn(rootLayoutClassName, className),
       children: [
         /* @__PURE__ */ jsx(TabsList, { className: cn(defaultTabsListClassName, tabsListClassName), children: items.map((item) => /* @__PURE__ */ jsx(
           TabsTrigger,
           {
             value: item.value,
             disabled: item.disabled,
-            className: cn(
-              orientation === "vertical" && "mb-1 w-full justify-start",
-              tabsTriggerClassName
-            ),
+            className: cn(tabsTriggerClassName),
             children: item.label
           },
           item.value
@@ -4667,6 +4701,8 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/ui/sidebar/index.tsx
 init_utils();
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
@@ -4678,395 +4714,601 @@ function useSidebar() {
   }
   return context;
 }
-var SidebarProvider = React49.forwardRef(
-  ({
-    defaultOpen = true,
-    open: openProp,
-    onOpenChange: setOpenProp,
-    className,
-    style,
-    children,
-    ...props
-  }, ref) => {
-    const [openMobile, setOpenMobile] = React49.useState(false);
-    const [_open, _setOpen] = React49.useState(defaultOpen);
-    const open = openProp ?? _open;
-    const setOpen = React49.useCallback(
-      (value) => {
-        const openState = typeof value === "function" ? value(open) : value;
-        if (setOpenProp) {
-          setOpenProp(openState);
-        } else {
-          _setOpen(openState);
-        }
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const [_open, _setOpen] = React49.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React49.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React49.useCallback(() => {
+    return setOpen((open2) => !open2);
+  }, [setOpen]);
+  React49.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React49.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      toggleSidebar
+    }),
+    [state, open, setOpen, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
       },
-      [setOpenProp, open]
-    );
-    const [isMobile, setIsMobile] = React49.useState(false);
-    React49.useEffect(() => {
-      const checkMobile = () => {
-        setIsMobile(window.innerWidth < 768);
-      };
-      checkMobile();
-      window.addEventListener("resize", checkMobile);
-      return () => window.removeEventListener("resize", checkMobile);
-    }, []);
-    const toggleSidebar = React49.useCallback(() => {
-      return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-    }, [isMobile, setOpen, setOpenMobile]);
-    React49.useEffect(() => {
-      const handleKeyDown = (event) => {
-        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-          event.preventDefault();
-          toggleSidebar();
-        }
-      };
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar]);
-    const state = open ? "expanded" : "collapsed";
-    const contextValue = React49.useMemo(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    );
-    return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      className: cn(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-full w-full",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { state } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
-          "--sidebar-width": SIDEBAR_WIDTH,
-          "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-          ...style
-        },
+        "data-slot": "sidebar",
         className: cn(
-          "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-surface-1",
+          "bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
           className
         ),
-        ref,
         ...props,
         children
       }
-    ) });
+    );
   }
-);
-SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React49.forwardRef(
-  ({
-    side = "left",
-    variant = "sidebar",
-    collapsible = "offcanvas",
-    className,
-    children,
-    ...props
-  }, ref) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-    if (collapsible === "none") {
-      return /* @__PURE__ */ jsx(
+  const isCollapsed = state === "collapsed";
+  const isIconMode = collapsible === "icon";
+  const isCollapsedIcon = isCollapsed && isIconMode;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block relative",
+      "data-state": state,
+      "data-collapsible": isCollapsed ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: /* @__PURE__ */ jsx(
         "div",
         {
+          "data-slot": "sidebar-container",
           className: cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-surface-1 text-foreground border-r border-line-soft",
+            "relative z-10 h-full transition-[width] duration-200 ease-linear flex flex-col",
+            // Width handling
+            isCollapsed && collapsible === "offcanvas" && "w-0 overflow-hidden",
+            isCollapsedIcon && "w-[var(--sidebar-width-icon)]",
+            !isCollapsed && "w-[var(--sidebar-width)]",
+            // Border/padding for variants
+            variant === "floating" || variant === "inset" ? "p-2" : "border-r border-sidebar-border",
             className
           ),
-          ref,
           ...props,
-          children
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-sidebar": "sidebar",
+              "data-slot": "sidebar-inner",
+              "data-collapsible": isCollapsedIcon ? "icon" : void 0,
+              className: cn(
+                "bg-sidebar flex h-full w-full flex-col",
+                variant === "floating" && "rounded-lg border border-sidebar-border shadow-sm",
+                // When in icon mode, center content and add consistent padding
+                isCollapsedIcon && "overflow-hidden items-center py-2"
+              ),
+              children
+            }
+          )
         }
-      );
-    }
-    if (isMobile) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        openMobile && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "fixed inset-0 z-40 bg-overlay-heavy",
-            onClick: () => setOpenMobile(false)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref,
-            className: cn(
-              "fixed inset-y-0 z-50 hidden w-[--sidebar-width] flex-col bg-surface-1 text-foreground border-r border-line-soft transition-transform duration-200",
-              side === "left" ? "left-0" : "right-0",
-              openMobile && "flex translate-x-0",
-              !openMobile && (side === "left" ? "-translate-x-full" : "translate-x-full"),
-              className
-            ),
-            ...props,
-            children
-          }
-        )
-      ] });
+      )
     }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-state": state,
-        "data-collapsible": collapsible,
-        "data-variant": variant,
-        "data-side": side,
-        className: cn(
-          "group/sidebar relative flex h-full w-[--sidebar-width] flex-col bg-surface-1 text-foreground border-r border-line-soft transition-all duration-200",
-          state === "collapsed" && collapsible === "icon" && "w-[--sidebar-width-icon]",
-          variant === "floating" && "m-2 rounded-lg border border-line-soft shadow-md",
-          variant === "inset" && "m-2 mr-0 rounded-l-lg border border-line-soft shadow-sm",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React49.forwardRef(({ className, onClick, ...props }, ref) => {
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      ref,
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
       variant: "ghost",
       size: "icon",
-      className: cn("h-9 w-9", className),
+      className: cn("size-7", className),
       onClick: (event) => {
         onClick?.(event);
         toggleSidebar();
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(PanelLeftIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(PanelLeftIcon, {}),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React49.forwardRef(({ className, ...props }, ref) => {
+}
+function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsx(
     "button",
     {
-      ref,
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
       "aria-label": "Toggle Sidebar",
       tabIndex: -1,
       onClick: toggleSidebar,
       title: "Toggle Sidebar",
       className: cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-line-strong group-data-[side=left]:right-0 group-data-[side=right]:left-0 [[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-2 [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 sm:flex",
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
       ),
       ...props
     }
   );
-});
-SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "main",
-      {
-        ref,
-        className: cn(
-          "relative flex min-h-svh flex-1 flex-col bg-background peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-r-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-line-soft md:peer-data-[variant=inset]:shadow-sm",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-SidebarInset.displayName = "SidebarInset";
-var SidebarHeader = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2 p-4 border-b border-line-soft", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2 p-4 border-t border-line-soft", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarFooter.displayName = "SidebarFooter";
-var SidebarContent = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-1 flex-col gap-4 overflow-auto p-4", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React49.forwardRef(({ className, ...props }, ref) => {
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "sidebar-input",
+      "data-sidebar": "input",
+      className: cn("bg-background h-8 w-full shadow-none", className),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
       className: cn(
-        "px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+        "flex flex-col gap-2 p-2",
+        isCollapsed && "items-center",
         className
       ),
       ...props
     }
   );
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupContent = React49.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1", className), ...props });
-});
-SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "ul",
-      {
-        ref,
-        className: cn("flex flex-col gap-1", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("li", { ref, className: cn("list-none", className), ...props });
+}
+function SidebarFooter({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn(
+        "flex flex-col gap-2 p-2 mt-auto",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator5,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: cn("bg-sidebar-border mx-2 w-auto", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn(
+        "relative flex w-full min-w-0 flex-col p-2",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        isCollapsed && "h-0 opacity-0 overflow-hidden -mt-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2 p-2",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonStyle = cn(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-all duration-150",
+  "hover:bg-muted focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+  "data-[active=true]:bg-muted data-[active=true]:text-primary [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
 );
-SidebarMenuItem.displayName = "SidebarMenuItem";
-var sidebarMenuButtonVariants = cva(
-  "group/menu-button flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-2 active:bg-surface-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "text-foreground hover:text-foreground",
-        outline: "border border-line-soft bg-background shadow-sm hover:bg-surface-2"
-      },
-      size: {
-        default: "h-10",
-        sm: "h-8 text-xs",
-        lg: "h-12"
-      },
-      isActive: {
-        true: "bg-surface-2 text-foreground font-semibold"
-      }
+var sidebarMenuButtonVariants = cva(sidebarMenuButtonStyle, {
+  variants: {
+    variant: {
+      default: "hover:bg-muted hover:text-foreground",
+      outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-muted hover:text-foreground hover:shadow-[0_0_0_1px_hsl(var(--border))]"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+    size: {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm"
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
   }
-);
-var SidebarMenuButton = React49.forwardRef(
-  ({
-    asChild = false,
-    isActive = false,
-    variant,
-    size,
-    className,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? "span" : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(sidebarMenuButtonVariants({ variant, size, isActive }), className),
-        ...props
-      }
-    );
+});
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(
+        sidebarMenuButtonVariants({ variant, size }),
+        // When collapsed in icon mode, make button square and center icon
+        isCollapsed && "w-8 h-8 p-2 justify-center [&>span]:hidden [&>:not(svg)]:hidden [&>svg:not(:first-child)]:hidden",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+  if (!isCollapsed || !tooltip) {
+    return button;
+  }
+  return /* @__PURE__ */ jsx(SimpleTooltip, { content: tooltip, side: "right", delayDuration: 0, children: button });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React49.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    "button",
+    Comp,
     {
-      ref,
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
       className: cn(
-        "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-surface-2 hover:text-foreground",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
         className
       ),
       ...props
     }
   );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuSub = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "ul",
-      {
-        ref,
-        className: cn("ml-3 flex flex-col gap-1 border-l border-line-soft pl-3", className),
-        ...props
-      }
-    );
+}
+function SidebarMenuBadge({
+  className,
+  ...props
+}) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("li", { ref, className: cn("list-none", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const width = React49.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "size-4 rounded-md",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": width
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React49.forwardRef(({ className, isActive, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    "button",
+    "ul",
     {
-      ref,
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
       className: cn(
-        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-surface-2 active:bg-surface-3",
-        isActive && "bg-surface-2 font-medium",
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-2 border-l p-2",
         className
       ),
       ...props
     }
   );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+}
+function SidebarMenuSubItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-muted hover:text-foreground active:bg-muted [&>svg]:text-muted-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden ",
+        "transition-all duration-150 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-muted data-[active=true]:text-primary",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/ui/table/index.tsx
 init_utils();
@@ -6577,7 +6819,7 @@ function SimpleTable({
   manualFiltering = false,
   lazyLoadIndicatorType = "overlay",
   maxHeight = 500,
-  maxWidth = 900,
+  maxWidth,
   maxRecords,
   loadingText,
   pagingPosition = "right",
@@ -10261,6 +10503,6 @@ var TypographyGroup = {
 // src/index.ts
 init_utils();
 
-export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getInitials, inputGroupVariants, inputVariants, itemVariants, labelVariants, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, urlRule, useCarousel, useForm, useSidebar, useToast, useWatch };
+export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getInitials, inputGroupVariants, inputVariants, itemVariants, labelVariants, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, urlRule, useCarousel, useForm, useSidebar, useToast, useWatch };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map