@hyphen/hyphen-components 9.0.0-beta.1 → 9.1.0

package/dist/hyphen-components.esm.js

@@ -4254,13 +4254,14 @@ var ResponsiveProvider = ({
 };
 
 // src/components/Sidebar/Sidebar.tsx
-import React58, {
+import React59, {
   useCallback as useCallback4,
   useMemo as useMemo4,
-  useState as useState4,
-  useEffect as useEffect3,
+  useState as useState5,
+  useEffect as useEffect4,
   forwardRef as forwardRef15
 } from "react";
+import { useId } from "@radix-ui/react-id";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import classNames34 from "classnames";
 
@@ -4285,10 +4286,179 @@ function useIsMobile() {
 }
 
 // src/components/Sidebar/Sidebar.module.scss
-var Sidebar_module_default = { "rail": "rail__OwBtB", "group-data-": "group-data-__af4bi" };
+var Sidebar_module_default = { "rail": "rail__OwBtB", "group-data-": "group-data-__af4bi", "resizeDescription": "resizeDescription__Ou7UB" };
+
+// src/components/Sidebar/useSidebarResize.ts
+import React57, { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+function useSidebarResize({
+  resizable = false,
+  defaultWidth,
+  minWidth = 256,
+  maxWidth = 960,
+  widthStorageKey,
+  side,
+  isMobile,
+  expanded,
+  rootRef
+}) {
+  const initialWidth = defaultWidth ?? (side === "left" ? 256 : 384);
+  const [preferredWidth, setPreferredWidth] = useState4(initialWidth);
+  const [containerWidth, setContainerWidth] = useState4(Infinity);
+  const [dragging, setDragging] = useState4(false);
+  const gesture = useRef(null);
+  const suppressClick = useRef(false);
+  const currentWidth = useRef(preferredWidth);
+  const enabled = resizable && !isMobile && expanded;
+  const maximum = Math.max(0, Math.min(maxWidth, containerWidth * (2 / 3)));
+  const minimum = Math.min(Math.max(0, minWidth), maximum);
+  const clamp = (value) => Math.max(minimum, Math.min(maximum, value));
+  const width = clamp(preferredWidth);
+  const [settledWidth, setSettledWidth] = useState4(width);
+  useIsomorphicLayoutEffect(() => {
+    if (!resizable) return;
+    let savedWidth = initialWidth;
+    try {
+      const saved = widthStorageKey && localStorage.getItem(widthStorageKey);
+      if (saved && Number.isFinite(Number(saved)) && Number(saved) > 0) {
+        savedWidth = Number(saved);
+      }
+    } catch {
+    }
+    setPreferredWidth(savedWidth);
+  }, [resizable, initialWidth, widthStorageKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (!resizable || isMobile) return;
+    const container = rootRef.current?.closest("[data-sidebar-provider]");
+    if (!container) return;
+    const measure = () => setContainerWidth(container.getBoundingClientRect().width);
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [resizable, isMobile, rootRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (dragging || width === settledWidth) return;
+    rootRef.current?.getBoundingClientRect();
+    setSettledWidth(width);
+  }, [dragging, width, settledWidth, rootRef]);
+  useEffect3(() => {
+    if (!enabled) {
+      gesture.current = null;
+      setDragging(false);
+    }
+  }, [enabled]);
+  useEffect3(() => {
+    if (!dragging) return;
+    const { cursor, userSelect } = document.body.style;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.cursor = cursor;
+      document.body.style.userSelect = userSelect;
+    };
+  }, [dragging]);
+  const update = (next) => {
+    currentWidth.current = clamp(next);
+    setPreferredWidth(currentWidth.current);
+  };
+  const persist = () => {
+    if (!widthStorageKey) return;
+    try {
+      localStorage.setItem(widthStorageKey, String(currentWidth.current));
+    } catch {
+    }
+  };
+  const cancel = () => {
+    if (!gesture.current) return;
+    setPreferredWidth(gesture.current.preferred);
+    gesture.current = null;
+    setDragging(false);
+  };
+  const railProps = {
+    onPointerDown: (event) => {
+      suppressClick.current = false;
+      if (!enabled || event.button !== 0 || gesture.current) return;
+      gesture.current = {
+        id: event.pointerId,
+        x: event.clientX,
+        width,
+        preferred: preferredWidth,
+        moved: false
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    onPointerMove: (event) => {
+      const start = gesture.current;
+      if (!start || start.id !== event.pointerId) return;
+      const delta = event.clientX - start.x;
+      if (!start.moved && Math.abs(delta) < 4) return;
+      start.moved = true;
+      suppressClick.current = true;
+      setDragging(true);
+      update(start.width + (side === "left" ? delta : -delta));
+    },
+    onPointerUp: (event) => {
+      const start = gesture.current;
+      if (!start || start.id !== event.pointerId) return;
+      if (start.moved) {
+        update(
+          start.width + (side === "left" ? 1 : -1) * (event.clientX - start.x)
+        );
+        persist();
+      }
+      gesture.current = null;
+      setDragging(false);
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    },
+    onPointerCancel: cancel,
+    onLostPointerCapture: cancel,
+    onClickCapture: (event) => {
+      if (suppressClick.current && event.detail !== 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        suppressClick.current = false;
+      }
+    },
+    onKeyDown: (event) => {
+      const modified = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+      if (!enabled || modified) return;
+      let next;
+      switch (event.key) {
+        case "ArrowLeft":
+          next = width + (side === "left" ? -10 : 10);
+          break;
+        case "ArrowRight":
+          next = width + (side === "left" ? 10 : -10);
+          break;
+        case "Home":
+          next = minimum;
+          break;
+        case "End":
+          next = maximum;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      update(next);
+      persist();
+    }
+  };
+  return {
+    width,
+    animate: !dragging && width === settledWidth,
+    enabled,
+    railProps
+  };
+}
+var SidebarResizeContext = React57.createContext(null);
 
 // src/components/Tooltip/Tooltip.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 // src/components/Tooltip/Tooltip.module.scss
@@ -4300,7 +4470,7 @@ var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipPortal = TooltipPrimitive.Portal;
-var TooltipContent = React57.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React57.createElement(
+var TooltipContent = React58.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   TooltipPrimitive.Content,
   {
     ref,
@@ -4321,14 +4491,14 @@ var SIDEBAR_RIGHT_WIDTH = "24rem";
 var SIDEBAR_WIDTH_ICON = "44px";
 var SIDEBAR_KEYBOARD_SHORTCUT_LEFT = "[";
 var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = "]";
-var SidebarIsMobileContext = React58.createContext(null);
-var SidebarLeftContext = React58.createContext(
+var SidebarIsMobileContext = React59.createContext(null);
+var SidebarLeftContext = React59.createContext(
   null
 );
-var SidebarRightContext = React58.createContext(
+var SidebarRightContext = React59.createContext(
   null
 );
-var SidebarSideContext = React58.createContext("left");
+var SidebarSideContext = React59.createContext("left");
 var resolveSideValue = (value, side, fallback) => {
   if (typeof value === "boolean") {
     return value;
@@ -4381,14 +4551,14 @@ var useSidebarSideState = ({
   );
   const controlledOpen = resolveControlledOpen(openProp, side);
   const isControlled = typeof controlledOpen === "boolean";
-  const [uncontrolledOpen, setUncontrolledOpen] = useState4(
+  const [uncontrolledOpen, setUncontrolledOpen] = useState5(
     controlledOpen ?? initialDefaultOpen
   );
-  const [openMobile, setOpenMobile] = useState4(
+  const [openMobile, setOpenMobile] = useState5(
     () => isMobile ? false : controlledOpen ?? initialDefaultOpen
   );
   const open = controlledOpen ?? uncontrolledOpen;
-  useEffect3(() => {
+  useEffect4(() => {
     if (isMobile) {
       setOpenMobile(false);
     } else {
@@ -4432,13 +4602,13 @@ var useSidebarSideState = ({
   );
 };
 function useSidebar(sideOverride) {
-  const isMobile = React58.useContext(SidebarIsMobileContext);
+  const isMobile = React59.useContext(SidebarIsMobileContext);
   if (typeof isMobile !== "boolean") {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
-  const contextSide = React58.useContext(SidebarSideContext);
+  const contextSide = React59.useContext(SidebarSideContext);
   const side = sideOverride ?? contextSide;
-  const sideContext = React58.useContext(
+  const sideContext = React59.useContext(
     side === "left" ? SidebarLeftContext : SidebarRightContext
   );
   if (!sideContext) {
@@ -4462,9 +4632,9 @@ var SidebarProvider = forwardRef15(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const lastToggledSideRef = React58.useRef("left");
-    const leftToggleRef = React58.useRef(null);
-    const rightToggleRef = React58.useRef(null);
+    const lastToggledSideRef = React59.useRef("left");
+    const leftToggleRef = React59.useRef(null);
+    const rightToggleRef = React59.useRef(null);
     const leftState = useSidebarSideState({
       side: "left",
       isMobile,
@@ -4483,18 +4653,21 @@ var SidebarProvider = forwardRef15(
       storageKey,
       lastToggledSideRef
     });
-    useEffect3(() => {
+    useEffect4(() => {
       leftToggleRef.current = leftState.toggleSidebar;
     }, [leftState.toggleSidebar]);
-    useEffect3(() => {
+    useEffect4(() => {
       rightToggleRef.current = rightState.toggleSidebar;
     }, [rightState.toggleSidebar]);
-    useEffect3(() => {
+    useEffect4(() => {
       const handleKeyDown = (event) => {
         const target = event.target;
         if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable)) {
           return;
         }
+        if (event.metaKey || event.ctrlKey && !event.getModifierState("AltGraph")) {
+          return;
+        }
         const shortcutSide = event.key === SIDEBAR_KEYBOARD_SHORTCUT_LEFT ? "left" : event.key === SIDEBAR_KEYBOARD_SHORTCUT_RIGHT ? "right" : null;
         if (!shortcutSide) {
           return;
@@ -4506,7 +4679,7 @@ var SidebarProvider = forwardRef15(
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, []);
-    return /* @__PURE__ */ React58.createElement(SidebarIsMobileContext.Provider, { value: isMobile }, /* @__PURE__ */ React58.createElement(SidebarLeftContext.Provider, { value: leftState }, /* @__PURE__ */ React58.createElement(SidebarRightContext.Provider, { value: rightState }, /* @__PURE__ */ React58.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React59.createElement(SidebarIsMobileContext.Provider, { value: isMobile }, /* @__PURE__ */ React59.createElement(SidebarLeftContext.Provider, { value: leftState }, /* @__PURE__ */ React59.createElement(SidebarRightContext.Provider, { value: rightState }, /* @__PURE__ */ React59.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React59.createElement(
       "div",
       {
         style: {
@@ -4520,6 +4693,7 @@ var SidebarProvider = forwardRef15(
           className
         ),
         ref,
+        "data-sidebar-provider": "",
         ...props
       },
       children
@@ -4527,23 +4701,54 @@ var SidebarProvider = forwardRef15(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React58.forwardRef(
-  ({ side = "left", collapsible = "offcanvas", className, children, ...props }, ref) => {
+var Sidebar = React59.forwardRef(
+  ({
+    side = "left",
+    collapsible = "offcanvas",
+    className,
+    children,
+    resizable,
+    defaultWidth,
+    minWidth,
+    maxWidth,
+    widthStorageKey,
+    ...props
+  }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar(side);
-    const sidebarWidth = side === "right" ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
+    const rootRef = React59.useRef(null);
+    const setRootRef = React59.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const resize = useSidebarResize({
+      resizable,
+      defaultWidth,
+      minWidth,
+      maxWidth,
+      widthStorageKey,
+      side,
+      isMobile,
+      expanded: state === "expanded" || collapsible === "none",
+      rootRef
+    });
+    const sidebarWidth = resizable ? `${resize.width}px` : side === "right" ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
     if (isMobile) {
-      return /* @__PURE__ */ React58.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ React58.createElement(
+      return /* @__PURE__ */ React59.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ React59.createElement(SidebarResizeContext.Provider, { value: resize }, /* @__PURE__ */ React59.createElement(
         Drawer,
         {
           isOpen: openMobile,
           onDismiss: () => setOpenMobile(false),
           placement: side
         },
-        /* @__PURE__ */ React58.createElement(Box, { "data-sidebar": "sidebar", "data-mobile": "true", height: "100" }, children)
-      ));
+        /* @__PURE__ */ React59.createElement(Box, { "data-sidebar": "sidebar", "data-mobile": "true", height: "100" }, children)
+      )));
     }
     if (collapsible === "none") {
-      return /* @__PURE__ */ React58.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ React58.createElement(
+      return /* @__PURE__ */ React59.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ React59.createElement(SidebarResizeContext.Provider, { value: resize }, /* @__PURE__ */ React59.createElement(
         "div",
         {
           className: classNames34(
@@ -4552,18 +4757,19 @@ var Sidebar = React58.forwardRef(
           ),
           style: {
             "--sidebar-width": sidebarWidth,
-            width: "var(--sidebar-width)"
+            width: "var(--sidebar-width)",
+            ...resizable ? { position: "relative", flexShrink: 0 } : {}
           },
-          ref,
+          ref: setRootRef,
           ...props
         },
         children
-      ));
+      )));
     }
-    return /* @__PURE__ */ React58.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React59.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ React59.createElement(SidebarResizeContext.Provider, { value: resize }, /* @__PURE__ */ React59.createElement(
       Box,
       {
-        ref,
+        ref: setRootRef,
         background: "primary",
         display: { base: "none", desktop: "block" },
         color: "base",
@@ -4577,13 +4783,13 @@ var Sidebar = React58.forwardRef(
         "data-side": side,
         className: "group"
       },
-      /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React59.createElement(
         "div",
         {
           style: {
             animationTimingFunction: "var(--sidebar-transition-timing, linear)",
             transitionTimingFunction: "var(--sidebar-transition-timing, linear)",
-            transitionDuration: "var(--sidebar-transition-duration, 200ms)",
+            transitionDuration: resize.animate ? "var(--sidebar-transition-duration, 200ms)" : "0ms",
             animationDuration: "var(--sidebar-transition-duration, 200ms)",
             transitionProperty: "width",
             width: getSidebarWidth(state, collapsible),
@@ -4592,7 +4798,7 @@ var Sidebar = React58.forwardRef(
           className: classNames34("position-relative", className)
         }
       ),
-      /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React59.createElement(
         "div",
         {
           className: classNames34(
@@ -4606,7 +4812,7 @@ var Sidebar = React58.forwardRef(
             zIndex: "var(--size-z-index-drawer)",
             animationTimingFunction: "var(--sidebar-transition-timing, linear)",
             transitionTimingFunction: "var(--sidebar-transition-timing, linear)",
-            transitionDuration: "var(--sidebar-transition-duration, 200ms)",
+            transitionDuration: resize.animate ? "var(--sidebar-transition-duration, 200ms)" : "0ms",
             animationDuration: "var(--sidebar-transition-duration, 200ms)",
             transitionProperty: "left, right, width",
             width: state === "collapsed" && collapsible === "icon" ? "var(--sidebar-width-icon)" : "var(--sidebar-width)",
@@ -4614,7 +4820,7 @@ var Sidebar = React58.forwardRef(
           },
           ...props
         },
-        /* @__PURE__ */ React58.createElement(
+        /* @__PURE__ */ React59.createElement(
           "div",
           {
             "data-sidebar": "sidebar",
@@ -4628,13 +4834,13 @@ var Sidebar = React58.forwardRef(
           children
         )
       )
-    ));
+    )));
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React58.forwardRef(({ className, onClick, side, iconName = "dock-left", ...props }, ref) => {
+var SidebarTrigger = React59.forwardRef(({ className, onClick, side, iconName = "dock-left", ...props }, ref) => {
   const { toggleSidebar, side: contextSide } = useSidebar(side);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Button,
     {
       ref,
@@ -4659,8 +4865,8 @@ var SidebarTrigger = React58.forwardRef(({ className, onClick, side, iconName =
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarInset = React58.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React58.createElement(
+var SidebarInset = React59.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React59.createElement(
     "main",
     {
       ref,
@@ -4673,10 +4879,10 @@ var SidebarInset = React58.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarHeader = React58.forwardRef(({ className, ...props }, ref) => {
+var SidebarHeader = React59.forwardRef(({ className, ...props }, ref) => {
   const { state } = useSidebar();
   const isCollapsed = state === "collapsed";
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
       ref,
@@ -4691,8 +4897,8 @@ var SidebarHeader = React58.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React58.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React58.createElement(
+var SidebarFooter = React59.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
       ref,
@@ -4706,8 +4912,8 @@ var SidebarFooter = React58.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarContent = React58.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React58.createElement(
+var SidebarContent = React59.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
       ref,
@@ -4722,7 +4928,7 @@ var SidebarContent = React58.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarMenu = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React58.createElement(
+var SidebarMenu = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
   "ul",
   {
     ref,
@@ -4738,7 +4944,7 @@ var SidebarMenu = React58.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React58.createElement(
+var SidebarMenuItem = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
   "li",
   {
     ref,
@@ -4749,11 +4955,11 @@ var SidebarMenuItem = React58.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SidebarMenuItem.displayName = "SidebarMenuItem";
-var SidebarMenuButton = React58.forwardRef(
+var SidebarMenuButton = React59.forwardRef(
   ({ asChild = false, isActive = false, tooltip, className, ...props }, ref) => {
     const Comp = asChild ? Slot3 : "button";
     const { isMobile, state, side } = useSidebar();
-    const button = /* @__PURE__ */ React58.createElement(
+    const button = /* @__PURE__ */ React59.createElement(
       Comp,
       {
         ref,
@@ -4779,7 +4985,7 @@ var SidebarMenuButton = React58.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ React58.createElement(Tooltip, null, /* @__PURE__ */ React58.createElement(TooltipTrigger, { asChild: true }, button), /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React59.createElement(Tooltip, null, /* @__PURE__ */ React59.createElement(TooltipTrigger, { asChild: true }, button), /* @__PURE__ */ React59.createElement(
       TooltipContent,
       {
         side: side === "right" ? "left" : "right",
@@ -4791,8 +4997,8 @@ var SidebarMenuButton = React58.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarGroup = React58.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React58.createElement(
+var SidebarGroup = React59.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
       ref,
@@ -4806,8 +5012,8 @@ var SidebarGroup = React58.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React58.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React58.createElement(
+var SidebarGroupLabel = React59.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
       ref,
@@ -4821,7 +5027,7 @@ var SidebarGroupLabel = React58.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarMenuSub = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React58.createElement(
+var SidebarMenuSub = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
   "ul",
   {
     ref,
@@ -4837,11 +5043,11 @@ var SidebarMenuSub = React58.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React58.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React58.createElement("li", { ref, ...props }));
+var SidebarMenuSubItem = React59.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React59.createElement("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React58.forwardRef(({ asChild = false, isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = React59.forwardRef(({ asChild = false, isActive, className, ...props }, ref) => {
   const Comp = asChild ? Slot3 : "a";
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Comp,
     {
       ref,
@@ -4860,9 +5066,9 @@ var SidebarMenuSubButton = React58.forwardRef(({ asChild = false, isActive, clas
   );
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
-var SidebarMenuAction = React58.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarMenuAction = React59.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot3 : "button";
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Comp,
     {
       ref,
@@ -4880,25 +5086,30 @@ var SidebarMenuAction = React58.forwardRef(({ className, asChild = false, ...pro
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarRail = React58.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = React59.forwardRef(({ className, ...props }, ref) => {
   const { open, toggleSidebar, side } = useSidebar();
+  const resize = React59.useContext(SidebarResizeContext);
+  const descriptionId = useId();
   const shortcutLabel = side === "left" ? SIDEBAR_KEYBOARD_SHORTCUT_LEFT : SIDEBAR_KEYBOARD_SHORTCUT_RIGHT;
   const caretIcon = open ? side === "right" ? "caret-sm-right" : "caret-sm-left" : side === "right" ? "caret-sm-left" : "caret-sm-right";
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
     "button",
     {
       ref,
       "data-sidebar": "rail",
-      "aria-label": "Toggle Sidebar",
-      tabIndex: -1,
+      "data-resizable": resize?.enabled || void 0,
+      "aria-label": resize?.enabled ? `Resize or toggle ${side} sidebar` : "Toggle Sidebar",
+      "aria-describedby": resize?.enabled ? descriptionId : void 0,
+      tabIndex: resize?.enabled ? 0 : -1,
+      ...resize?.enabled ? resize.railProps : {},
       onClick: toggleSidebar,
-      title: `Toggle Sidebar ${shortcutLabel}`,
+      title: resize?.enabled ? `Drag to resize; click to toggle (${shortcutLabel})` : `Toggle Sidebar ${shortcutLabel}`,
       className: classNames34(
         Sidebar_module_default.rail,
         "hover-show-child background-color-transparent display-flex p-top-5xl p-left-xl p-right-0 justify-content-center position-absolute",
         {
-          "cursor-w-resize": open && side === "left" || !open && side === "right",
-          "cursor-e-resize": !open && side === "left" || open && side === "right"
+          "cursor-w-resize": !resize?.enabled && (open && side === "left" || !open && side === "right"),
+          "cursor-e-resize": !resize?.enabled && (!open && side === "left" || open && side === "right")
         },
         className
       ),
@@ -4907,12 +5118,13 @@ var SidebarRail = React58.forwardRef(({ className, ...props }, ref) => {
         bottom: "20px",
         right: side === "left" ? "-14px" : void 0,
         left: side === "right" ? "-18px" : void 0,
-        width: "10px"
+        width: "10px",
+        ...resize?.enabled ? { cursor: "col-resize", touchAction: "none" } : {}
       },
       type: "button",
       ...props
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement(
       Box,
       {
         radius: "xl",
@@ -4929,18 +5141,18 @@ var SidebarRail = React58.forwardRef(({ className, ...props }, ref) => {
         className: classNames34(
           "hover-child",
           {
-            "cursor-w-resize": open && side === "left" || !open && side === "right",
-            "cursor-e-resize": !open && side === "left" || open && side === "right"
+            "cursor-w-resize": !resize?.enabled && (open && side === "left" || !open && side === "right"),
+            "cursor-e-resize": !resize?.enabled && (!open && side === "left" || open && side === "right")
           },
           className
         )
       },
-      /* @__PURE__ */ React58.createElement(Icon, { name: caretIcon })
+      /* @__PURE__ */ React59.createElement(Icon, { name: caretIcon })
     )
-  );
+  ), resize?.enabled && /* @__PURE__ */ React59.createElement("span", { id: descriptionId, className: Sidebar_module_default.resizeDescription }, "Width ", Math.round(resize.width), " pixels. Use left and right arrows to resize, Home for minimum, End for maximum, and Enter or Space to toggle."));
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarMenuBadge = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React58.createElement(
+var SidebarMenuBadge = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
   "div",
   {
     ref,
@@ -4959,28 +5171,28 @@ var SidebarMenuBadge = React58.forwardRef(({ className, ...props }, ref) => /* @
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
 
 // src/components/Table/Table.tsx
-import React64 from "react";
+import React65 from "react";
 import classNames40 from "classnames";
 
 // src/components/Table/Table.module.scss
 var Table_module_default = { "container": "container__zReWp", "loading-mask": "loading-mask__gwG6j", "scroll-container": "scroll-container__79zJk", "table": "table__ojslm", "auto": "auto__bXEGP", "fixed": "fixed__zPdl3", "borderless": "borderless__AlDGM", "scrollable": "scrollable__HSxT1", "scrollable-x": "scrollable-x__aKmx8", "scrollable-y": "scrollable-y__8nNit", "table-bordered": "table-bordered__oTd6P", "full-height": "full-height__YPJfE" };
 
 // src/components/Table/TableBody/TableBody.tsx
-import React62 from "react";
+import React63 from "react";
 import classNames38 from "classnames";
 
 // src/components/Table/TableBody/TableBody.module.scss
 var TableBody_module_default = { "table-body": "table-body__cX0OQ", "striped": "striped__1Epqn", "hover": "hover__I3QF4" };
 
 // src/components/Table/common/TableRow/TableRow.tsx
-import React61 from "react";
+import React62 from "react";
 import classNames37 from "classnames";
 
 // src/components/Table/common/TableRow/TableRow.module.scss
 var TableRow_module_default = { "table-row": "table-row__BdHbx", "hoverable": "hoverable__Bdemq" };
 
 // src/components/Table/TableBody/TableBodyCell/TableBodyCell.tsx
-import React59 from "react";
+import React60 from "react";
 import classNames35 from "classnames";
 
 // src/components/Table/TableBody/TableBodyCell/TableBodyCell.module.scss
@@ -5013,7 +5225,7 @@ var TableBodyCell = ({
     },
     className
   );
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     Box,
     {
       as: columnIsSticky ? "th" : "td",
@@ -5031,7 +5243,7 @@ var TableBodyCell = ({
 var TableBodyCell_default = TableBodyCell;
 
 // src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.tsx
-import React60 from "react";
+import React61 from "react";
 import classNames36 from "classnames";
 
 // src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.module.scss
@@ -5058,7 +5270,7 @@ var TableHeaderCell = ({
   const renderIcon = () => {
     const renderArrows = () => {
       if (getSortDirection() === "ascending") {
-        return /* @__PURE__ */ React60.createElement(
+        return /* @__PURE__ */ React61.createElement(
           Icon,
           {
             name: "caret-sm-up",
@@ -5067,7 +5279,7 @@ var TableHeaderCell = ({
         );
       }
       if (getSortDirection() === "descending") {
-        return /* @__PURE__ */ React60.createElement(
+        return /* @__PURE__ */ React61.createElement(
           Icon,
           {
             name: "caret-sm-down",
@@ -5075,7 +5287,7 @@ var TableHeaderCell = ({
           }
         );
       }
-      return /* @__PURE__ */ React60.createElement(
+      return /* @__PURE__ */ React61.createElement(
         Box,
         {
           display: "inline-block",
@@ -5086,7 +5298,7 @@ var TableHeaderCell = ({
         }
       );
     };
-    return /* @__PURE__ */ React60.createElement("span", { className: TableHeaderCell_module_default["sort-icon"] }, renderArrows());
+    return /* @__PURE__ */ React61.createElement("span", { className: TableHeaderCell_module_default["sort-icon"] }, renderArrows());
   };
   const handleKeyPress = (event) => {
     if (!onSort || !isSortable) return;
@@ -5118,7 +5330,7 @@ var TableHeaderCell = ({
     },
     className
   );
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     Box,
     {
       as: "th",
@@ -5131,7 +5343,7 @@ var TableHeaderCell = ({
       onKeyDown: handleKeyPress,
       scope: "col"
     },
-    /* @__PURE__ */ React60.createElement("div", { className: TableHeaderCell_module_default.heading }, column.heading, isSortable && renderIcon())
+    /* @__PURE__ */ React61.createElement("div", { className: TableHeaderCell_module_default.heading }, column.heading, isSortable && renderIcon())
   );
 };
 
@@ -5164,7 +5376,7 @@ var TableRow = ({
       return true;
     }
     if (Array.isArray(value)) return value.every(isRenderableCell);
-    return React61.isValidElement(value);
+    return React62.isValidElement(value);
   };
   const renderCellContent = (column) => {
     if (column.render) {
@@ -5184,8 +5396,8 @@ var TableRow = ({
     }
     return void 0;
   };
-  return /* @__PURE__ */ React61.createElement("tr", { className: tableRowClasses }, Object.values(columns).map(
-    (column, columnIndex) => isTableHead ? /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement("tr", { className: tableRowClasses }, Object.values(columns).map(
+    (column, columnIndex) => isTableHead ? /* @__PURE__ */ React62.createElement(
       TableHeaderCell,
       {
         column,
@@ -5203,7 +5415,7 @@ var TableRow = ({
         hasStickyHeader,
         sticky: column.sticky
       }
-    ) : /* @__PURE__ */ React61.createElement(
+    ) : /* @__PURE__ */ React62.createElement(
       TableBodyCell_default,
       {
         align: column.align || align,
@@ -5250,7 +5462,7 @@ var TableBody = ({
     }
     return `row-index-${rowIndex}`;
   };
-  return /* @__PURE__ */ React62.createElement("tbody", { className: tableBodyClasses }, rows.map((row, rowIndex) => /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement("tbody", { className: tableBodyClasses }, rows.map((row, rowIndex) => /* @__PURE__ */ React63.createElement(
     TableRow,
     {
       columns,
@@ -5267,7 +5479,7 @@ var TableBody = ({
 };
 
 // src/components/Table/TableHead/TableHead.tsx
-import React63 from "react";
+import React64 from "react";
 import classNames39 from "classnames";
 var TableHead = ({
   columns,
@@ -5281,7 +5493,7 @@ var TableHead = ({
   truncateOverflow = false
 }) => {
   const tableHeadClasses = classNames39(className);
-  return /* @__PURE__ */ React63.createElement("thead", { className: tableHeadClasses }, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement("thead", { className: tableHeadClasses }, /* @__PURE__ */ React64.createElement(
     TableRow,
     {
       columns,
@@ -5335,13 +5547,13 @@ var Table = ({
     [Table_module_default.borderless]: isBorderless,
     [Table_module_default.compact]: isCompact
   });
-  return /* @__PURE__ */ React64.createElement("div", { className: containerClasses }, isLoading && /* @__PURE__ */ React64.createElement("div", { className: Table_module_default["loading-mask"] }, /* @__PURE__ */ React64.createElement(Spinner, { size: "xl" })), /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement("div", { className: containerClasses }, isLoading && /* @__PURE__ */ React65.createElement("div", { className: Table_module_default["loading-mask"] }, /* @__PURE__ */ React65.createElement(Spinner, { size: "xl" })), /* @__PURE__ */ React65.createElement(
     "div",
     {
       className: scrollContainerClasses,
       "data-testid": "tableContainerDiv-testid"
     },
-    /* @__PURE__ */ React64.createElement("table", { className: tableClasses }, /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React65.createElement("table", { className: tableClasses }, /* @__PURE__ */ React65.createElement(
       TableHead,
       {
         columns,
@@ -5353,7 +5565,7 @@ var Table = ({
         truncateOverflow,
         hasStickyHeader
       }
-    ), /* @__PURE__ */ React64.createElement(
+    ), /* @__PURE__ */ React65.createElement(
       TableBody,
       {
         rows,
@@ -5372,7 +5584,7 @@ var Table = ({
 };
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-import React65, { createContext as createContext4, useState as useState5, useEffect as useEffect4 } from "react";
+import React66, { createContext as createContext4, useState as useState6, useEffect as useEffect5 } from "react";
 var initialState = {
   theme: "system",
   setTheme: () => null
@@ -5384,10 +5596,10 @@ function ThemeProvider({
   storageKey = "hyphen-ui-theme",
   ...props
 }) {
-  const [theme, setTheme] = useState5(
+  const [theme, setTheme] = useState6(
     () => localStorage.getItem(storageKey) || defaultTheme
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
     if (theme === "system") {
@@ -5406,14 +5618,14 @@ function ThemeProvider({
     },
     isDarkMode
   };
-  return /* @__PURE__ */ React65.createElement(ThemeProviderContext.Provider, { ...props, value }, children);
+  return /* @__PURE__ */ React66.createElement(ThemeProviderContext.Provider, { ...props, value }, children);
 }
 
 // src/components/Toast/ToastContainer.tsx
-import React67 from "react";
+import React68 from "react";
 
 // src/components/Toast/ToastNotification.tsx
-import React66 from "react";
+import React67 from "react";
 import classNames41 from "classnames";
 
 // src/components/Toast/ToastNotification.module.scss
@@ -5446,12 +5658,12 @@ var renderToastIcon = (toast2) => {
     iconName = "c-warning";
     iconColor = "white";
   }
-  const icon = type !== "loading" ? /* @__PURE__ */ React66.createElement(Icon, { name: iconName, color: iconColor }) : /* @__PURE__ */ React66.createElement(Spinner, null);
-  return /* @__PURE__ */ React66.createElement(Box, { justifyContent: "center", height: "100" }, icon);
+  const icon = type !== "loading" ? /* @__PURE__ */ React67.createElement(Icon, { name: iconName, color: iconColor }) : /* @__PURE__ */ React67.createElement(Spinner, null);
+  return /* @__PURE__ */ React67.createElement(Box, { justifyContent: "center", height: "100" }, icon);
 };
 var renderDismissIcon = (toast2, onDismiss) => {
   if (!toast2.canDismiss) return;
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement(
     Box,
     {
       as: "button",
@@ -5466,12 +5678,12 @@ var renderDismissIcon = (toast2, onDismiss) => {
       onClick: onDismiss,
       "aria-label": "dismiss notification"
     },
-    /* @__PURE__ */ React66.createElement(Icon, { name: "remove" })
+    /* @__PURE__ */ React67.createElement(Icon, { name: "remove" })
   );
 };
-var ToastNotification = React66.memo(
+var ToastNotification = React67.memo(
   ({ toast: toast2, position = "top-center", style, children, onDismiss }) => {
-    const message = /* @__PURE__ */ React66.createElement(
+    const message = /* @__PURE__ */ React67.createElement(
       Box,
       {
         direction: "row",
@@ -5493,7 +5705,7 @@ var ToastNotification = React66.memo(
         [ToastNotification_module_default["toast-error"]]: toast2.type === "error"
       }
     );
-    return /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React67.createElement(
       Box,
       {
         alignItems: "center",
@@ -5510,16 +5722,16 @@ var ToastNotification = React66.memo(
       },
       typeof children === "function" ? children({
         message
-      }) : /* @__PURE__ */ React66.createElement(React66.Fragment, null, renderToastIcon(toast2), message, renderDismissIcon(toast2, onDismiss))
+      }) : /* @__PURE__ */ React67.createElement(React67.Fragment, null, renderToastIcon(toast2), message, renderDismissIcon(toast2, onDismiss))
     );
   }
 );
 
 // src/components/Toast/useToasts.ts
-import { useEffect as useEffect6, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5 } from "react";
 
 // src/components/Toast/Toast.store.ts
-import { useState as useState6, useEffect as useEffect5 } from "react";
+import { useState as useState7, useEffect as useEffect6 } from "react";
 var TOAST_LIMIT = 20;
 var toastTimeouts = /* @__PURE__ */ new Map();
 var addToDismissedQueue = (toastId) => {
@@ -5655,8 +5867,8 @@ var defaultTimeouts = {
   custom: 4e3
 };
 var useToastStore = (toastOptions = {}) => {
-  const [state, setState] = useState6(memoryState);
-  useEffect5(() => {
+  const [state, setState] = useState7(memoryState);
+  useEffect6(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -5743,7 +5955,7 @@ toast.async = function(promise, messages, opts) {
 // src/components/Toast/useToasts.ts
 var useToasts = (toastOptions) => {
   const { toasts, pausedAt } = useToastStore(toastOptions);
-  useEffect6(() => {
+  useEffect7(() => {
     if (pausedAt) {
       return;
     }
@@ -5847,7 +6059,7 @@ var renderNotification = (currentToast, children, containerPosition) => {
   if (children) {
     return children(currentToast);
   }
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     ToastNotification,
     {
       toast: currentToast,
@@ -5867,7 +6079,7 @@ var ToastContainer = ({
   ...restProps
 }) => {
   const { toasts, handlers } = useToasts(toastOptions);
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     Box,
     {
       style: {
@@ -5897,7 +6109,7 @@ var ToastContainer = ({
       const ref = t.height ? void 0 : createRectRef((rect) => {
         handlers.updateHeight(t.id, rect.height);
       });
-      return /* @__PURE__ */ React67.createElement(
+      return /* @__PURE__ */ React68.createElement(
         Box,
         {
           ref,
@@ -5915,7 +6127,7 @@ var ToastContainer = ({
 };
 
 // src/components/Toggle/Toggle.tsx
-import React68, { forwardRef as forwardRef16 } from "react";
+import React69, { forwardRef as forwardRef16 } from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 
 // src/components/Toggle/Toggle.module.scss
@@ -5923,7 +6135,7 @@ var Toggle_module_default = { "item": "item__PrPsJ", "outline": "outline__Lkabh"
 
 // src/components/Toggle/Toggle.tsx
 import classNames42 from "classnames";
-var Toggle = forwardRef16(({ className, variant = "default", children, ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var Toggle = forwardRef16(({ className, variant = "default", children, ...props }, ref) => /* @__PURE__ */ React69.createElement(
   TogglePrimitive.Root,
   {
     ref,
@@ -5940,12 +6152,12 @@ var Toggle = forwardRef16(({ className, variant = "default", children, ...props
 Toggle.displayName = "Toggle";
 
 // src/hooks/useBreakpoint/useBreakpoint.ts
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import React69 from "react";
+import React70 from "react";
 var useWindowSize = () => {
-  const { innerWidth, innerHeight, outerHeight, outerWidth, isCreated } = React69.useContext(ResponsiveContext);
+  const { innerWidth, innerHeight, outerHeight, outerWidth, isCreated } = React70.useContext(ResponsiveContext);
   if (isCreated) {
     return {
       innerHeight,
@@ -5961,7 +6173,7 @@ var useWindowSize = () => {
 var defaultBreakpoint = { name: "base", minWidth: 0 };
 var useBreakpoint = () => {
   const windowSize = useWindowSize();
-  const [breakpoint, setBreakpoint] = useState7({
+  const [breakpoint, setBreakpoint] = useState8({
     ...defaultBreakpoint
   });
   useIsomorphicLayoutEffect(() => {
@@ -5988,7 +6200,7 @@ var useBreakpoint = () => {
 };
 
 // src/hooks/useOpenClose/useOpenClose.tsx
-import { useCallback as useCallback5, useState as useState8 } from "react";
+import { useCallback as useCallback5, useState as useState9 } from "react";
 var useOpenClose = (props = {}) => {
   const {
     defaultIsOpen,
@@ -6002,7 +6214,7 @@ var useOpenClose = (props = {}) => {
   const closeCallback = useCallback5(() => {
     onCloseProp?.();
   }, [onCloseProp]);
-  const [isOpenState, setIsOpen] = useState8(defaultIsOpen || false);
+  const [isOpenState, setIsOpen] = useState9(defaultIsOpen || false);
   const isOpen = isOpenProp !== void 0 ? isOpenProp : isOpenState;
   const isControlled = isOpenProp !== void 0;
   const handleClose = useCallback5(() => {
@@ -6033,9 +6245,9 @@ var useOpenClose = (props = {}) => {
 };
 
 // src/hooks/useTheme/useTheme.ts
-import React70 from "react";
+import React71 from "react";
 var useTheme = () => {
-  const context = React70.useContext(ThemeProviderContext);
+  const context = React71.useContext(ThemeProviderContext);
   if (context === void 0)
     throw new Error(
       "useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider."