@hyphen/hyphen-components 7.2.0 → 7.3.1

package/dist/hyphen-components.esm.js

@@ -3854,7 +3854,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "className", "style", "children"],
   _excluded2 = ["side", "collapsible", "className", "children"],
-  _excluded3 = ["className", "onClick"],
+  _excluded3 = ["className", "onClick", "side", "iconName"],
   _excluded4 = ["className"],
   _excluded5 = ["className"],
   _excluded6 = ["className"],
@@ -3871,92 +3871,190 @@ var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "classNa
   _excluded15 = ["className"];
 var SIDEBAR_WIDTH = '16rem';
 var SIDEBAR_WIDTH_ICON = '44px';
-var SIDEBAR_KEYBOARD_SHORTCUT = '[';
-var SidebarContext = /*#__PURE__*/React__default.createContext(null);
-function useSidebar() {
-  var context = React__default.useContext(SidebarContext);
-  if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider.');
+var SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
+var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
+var SidebarIsMobileContext = /*#__PURE__*/React__default.createContext(null);
+var SidebarLeftContext = /*#__PURE__*/React__default.createContext(null);
+var SidebarRightContext = /*#__PURE__*/React__default.createContext(null);
+var SidebarSideContext = /*#__PURE__*/React__default.createContext('left');
+var resolveSideValue = function resolveSideValue(value, side, fallback) {
+  if (typeof value === 'boolean') {
+    return value;
   }
-  return context;
-}
-var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? true : _ref$defaultOpen,
-    openProp = _ref.open,
-    _ref$storageKey = _ref.storageKey,
-    storageKey = _ref$storageKey === void 0 ? 'sidebar_expanded' : _ref$storageKey,
-    setOpenProp = _ref.onOpenChange,
-    className = _ref.className,
-    style = _ref.style,
-    children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var isMobile = useIsMobile();
-  var _useState = useState(function () {
-      return isMobile ? false : openProp != null ? openProp : defaultOpen;
+  if (value && typeof value === 'object' && typeof value[side] === 'boolean') {
+    return value[side];
+  }
+  return fallback;
+};
+var resolveControlledOpen = function resolveControlledOpen(value, side) {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  if (value && typeof value === 'object' && typeof value[side] === 'boolean') {
+    return value[side];
+  }
+  return undefined;
+};
+var resolveStorageKey = function resolveStorageKey(storageKey, side) {
+  if (typeof storageKey === 'string') {
+    return side === 'left' ? storageKey : storageKey + "_right";
+  }
+  if (storageKey && typeof storageKey === 'object') {
+    var _storageKey$side;
+    return (_storageKey$side = storageKey[side]) != null ? _storageKey$side : side === 'left' ? 'sidebar_expanded' : 'sidebar_expanded_right';
+  }
+  return side === 'left' ? 'sidebar_expanded' : 'sidebar_expanded_right';
+};
+var getSidebarWidth = function getSidebarWidth(state, collapsible) {
+  return state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : state === 'collapsed' ? '0' : 'var(--sidebar-width)';
+};
+var getSidebarOffsetStyles = function getSidebarOffsetStyles(side, state, collapsible) {
+  var isVisible = state === 'expanded' || collapsible === 'icon';
+  return {
+    left: side === 'left' ? isVisible ? '0' : 'calc(var(--sidebar-width)*-1)' : undefined,
+    right: side === 'right' ? isVisible ? '0' : 'calc(var(--sidebar-width)*-1)' : undefined
+  };
+};
+var useSidebarSideState = function useSidebarSideState(_ref) {
+  var side = _ref.side,
+    isMobile = _ref.isMobile,
+    defaultOpen = _ref.defaultOpen,
+    openProp = _ref.openProp,
+    onOpenChange = _ref.onOpenChange,
+    storageKey = _ref.storageKey,
+    lastToggledSideRef = _ref.lastToggledSideRef;
+  var defaultFallback = typeof defaultOpen === 'boolean' ? defaultOpen : true;
+  var initialDefaultOpen = resolveSideValue(defaultOpen, side, defaultFallback);
+  var controlledOpen = resolveControlledOpen(openProp, side);
+  var isControlled = typeof controlledOpen === 'boolean';
+  var _useState = useState(controlledOpen != null ? controlledOpen : initialDefaultOpen),
+    uncontrolledOpen = _useState[0],
+    setUncontrolledOpen = _useState[1];
+  var _useState2 = useState(function () {
+      return isMobile ? false : controlledOpen != null ? controlledOpen : initialDefaultOpen;
     }),
-    openMobile = _useState[0],
-    setOpenMobile = _useState[1];
-  // Manages sidebar open state with a fallback to internal state when openProp is not provided
-  var _useState2 = useState(openProp != null ? openProp : defaultOpen),
-    _open = _useState2[0],
-    _setOpen = _useState2[1];
-  var open = openProp != null ? openProp : _open;
-  // Update open state when openProp or isMobile changes
+    openMobile = _useState2[0],
+    setOpenMobile = _useState2[1];
+  var open = controlledOpen != null ? controlledOpen : uncontrolledOpen;
   useEffect(function () {
     if (isMobile) {
-      setOpenMobile(false); // Always start closed on mobile
+      setOpenMobile(false);
     } else {
-      _setOpen(openProp != null ? openProp : defaultOpen); // Use desktop state
+      setUncontrolledOpen(controlledOpen != null ? controlledOpen : initialDefaultOpen);
     }
-  }, [isMobile, openProp, defaultOpen]);
+  }, [isMobile, controlledOpen, initialDefaultOpen]);
   var setOpen = useCallback(function (value) {
     var newOpenState = typeof value === 'function' ? value(open) : value;
-    if (newOpenState !== open) {
-      if (setOpenProp) {
-        setOpenProp(newOpenState);
-      } else {
-        _setOpen(newOpenState);
-      }
-      localStorage.setItem(storageKey, "" + newOpenState);
+    if (newOpenState === open) {
+      return;
     }
-  }, [setOpenProp, open, storageKey]);
-  // Toggle sidebar based on screen type
+    if (!isControlled) {
+      setUncontrolledOpen(newOpenState);
+    }
+    onOpenChange == null || onOpenChange(newOpenState, side);
+    var key = resolveStorageKey(storageKey, side);
+    localStorage.setItem(key, "" + newOpenState);
+  }, [open, isControlled, onOpenChange, side, storageKey]);
   var toggleSidebar = useCallback(function () {
-    isMobile ? setOpenMobile(function (open) {
-      return !open;
-    }) : setOpen(function (open) {
-      return !open;
+    lastToggledSideRef.current = side;
+    isMobile ? setOpenMobile(function (value) {
+      return !value;
+    }) : setOpen(function (value) {
+      return !value;
     });
-  }, [isMobile, setOpen, setOpenMobile]);
-  // Keydown event handler for toggling sidebar
-  useEffect(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT) {
-        event.preventDefault();
-        toggleSidebar();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return function () {
-      return window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [toggleSidebar]);
-  // Assign state for data attributes
+  }, [isMobile, setOpen, side, lastToggledSideRef]);
   var state = open ? 'expanded' : 'collapsed';
-  var contextValue = useMemo(function () {
+  return useMemo(function () {
     return {
       state: state,
       open: open,
       setOpen: setOpen,
-      isMobile: isMobile,
       openMobile: openMobile,
       setOpenMobile: setOpenMobile,
       toggleSidebar: toggleSidebar
     };
-  }, [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
-  return React__default.createElement(SidebarContext.Provider, {
-    value: contextValue
+  }, [state, open, setOpen, openMobile, setOpenMobile, toggleSidebar]);
+};
+function useSidebar(sideOverride) {
+  var isMobile = React__default.useContext(SidebarIsMobileContext);
+  if (typeof isMobile !== 'boolean') {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+  var contextSide = React__default.useContext(SidebarSideContext);
+  var side = sideOverride != null ? sideOverride : contextSide;
+  var sideContext = React__default.useContext(side === 'left' ? SidebarLeftContext : SidebarRightContext);
+  if (!sideContext) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+  return _extends({}, sideContext, {
+    isMobile: isMobile,
+    side: side
+  });
+}
+var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$defaultOpen = _ref2.defaultOpen,
+    defaultOpen = _ref2$defaultOpen === void 0 ? true : _ref2$defaultOpen,
+    openProp = _ref2.open,
+    _ref2$storageKey = _ref2.storageKey,
+    storageKey = _ref2$storageKey === void 0 ? 'sidebar_expanded' : _ref2$storageKey,
+    setOpenProp = _ref2.onOpenChange,
+    className = _ref2.className,
+    style = _ref2.style,
+    children = _ref2.children,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
+  var isMobile = useIsMobile();
+  var lastToggledSideRef = React__default.useRef('left');
+  var leftToggleRef = React__default.useRef(null);
+  var rightToggleRef = React__default.useRef(null);
+  var leftState = useSidebarSideState({
+    side: 'left',
+    isMobile: isMobile,
+    defaultOpen: defaultOpen,
+    openProp: openProp,
+    onOpenChange: setOpenProp,
+    storageKey: storageKey,
+    lastToggledSideRef: lastToggledSideRef
+  });
+  var rightState = useSidebarSideState({
+    side: 'right',
+    isMobile: isMobile,
+    defaultOpen: defaultOpen,
+    openProp: openProp,
+    onOpenChange: setOpenProp,
+    storageKey: storageKey,
+    lastToggledSideRef: lastToggledSideRef
+  });
+  useEffect(function () {
+    leftToggleRef.current = leftState.toggleSidebar;
+  }, [leftState.toggleSidebar]);
+  useEffect(function () {
+    rightToggleRef.current = rightState.toggleSidebar;
+  }, [rightState.toggleSidebar]);
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      var target = event.target;
+      if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable)) {
+        return;
+      }
+      var shortcutSide = event.key === SIDEBAR_KEYBOARD_SHORTCUT_LEFT ? 'left' : event.key === SIDEBAR_KEYBOARD_SHORTCUT_RIGHT ? 'right' : null;
+      if (!shortcutSide) {
+        return;
+      }
+      event.preventDefault();
+      var toggleSidebar = shortcutSide === 'left' ? leftToggleRef.current : rightToggleRef.current;
+      toggleSidebar == null || toggleSidebar();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+  return React__default.createElement(SidebarIsMobileContext.Provider, {
+    value: isMobile
+  }, React__default.createElement(SidebarLeftContext.Provider, {
+    value: leftState
+  }, React__default.createElement(SidebarRightContext.Provider, {
+    value: rightState
   }, React__default.createElement(TooltipProvider, {
     delayDuration: 0
   }, React__default.createElement("div", _extends({
@@ -3967,24 +4065,26 @@ var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, style),
     className: classNames('display-flex w-100 background-color-secondary', className),
     ref: ref
-  }, props), children)));
+  }, props), children)))));
 });
 SidebarProvider.displayName = 'SidebarProvider';
-var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
-  var _ref2$side = _ref2.side,
-    side = _ref2$side === void 0 ? 'left' : _ref2$side,
-    _ref2$collapsible = _ref2.collapsible,
-    collapsible = _ref2$collapsible === void 0 ? 'offcanvas' : _ref2$collapsible,
-    className = _ref2.className,
-    children = _ref2.children,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  var _useSidebar = useSidebar(),
+var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
+  var _ref3$side = _ref3.side,
+    side = _ref3$side === void 0 ? 'left' : _ref3$side,
+    _ref3$collapsible = _ref3.collapsible,
+    collapsible = _ref3$collapsible === void 0 ? 'offcanvas' : _ref3$collapsible,
+    className = _ref3.className,
+    children = _ref3.children,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var _useSidebar = useSidebar(side),
     isMobile = _useSidebar.isMobile,
     state = _useSidebar.state,
     openMobile = _useSidebar.openMobile,
     setOpenMobile = _useSidebar.setOpenMobile;
   if (isMobile) {
-    return React__default.createElement(Drawer, {
+    return React__default.createElement(SidebarSideContext.Provider, {
+      value: side
+    }, React__default.createElement(Drawer, {
       isOpen: openMobile,
       onDismiss: function onDismiss() {
         return setOpenMobile(false);
@@ -3994,18 +4094,22 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
       "data-sidebar": "sidebar",
       "data-mobile": "true",
       height: "100"
-    }, children));
+    }, children)));
   }
   if (collapsible === 'none') {
-    return React__default.createElement("div", _extends({
+    return React__default.createElement(SidebarSideContext.Provider, {
+      value: side
+    }, React__default.createElement("div", _extends({
       className: classNames('group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base', className),
       style: {
         width: 'var(--sidebar-width)'
       },
       ref: ref
-    }, props), children);
+    }, props), children));
   }
-  return React__default.createElement(Box, {
+  return React__default.createElement(SidebarSideContext.Provider, {
+    value: side
+  }, React__default.createElement(Box, {
     ref: ref,
     background: "primary",
     display: {
@@ -4015,6 +4119,9 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
     color: "base",
     fontSize: "sm",
     position: "relative",
+    style: side === 'right' && collapsible === 'offcanvas' ? {
+      overflowX: 'hidden'
+    } : undefined,
     "data-state": state,
     "data-collapsible": collapsible,
     "data-side": side,
@@ -4026,14 +4133,13 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
       transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
       animationDuration: 'var(--sidebar-transition-duration, 200ms)',
       transitionProperty: 'width',
-      width: state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : state === 'collapsed' ? '0' : 'var(--sidebar-width)',
+      width: getSidebarWidth(state, collapsible),
       height: '100svh'
     },
     className: classNames('position-relative', className)
   }), React__default.createElement("div", _extends({
     className: classNames('position-absolute display-none display-flex-desktop ', className),
-    style: {
-      left: state === 'expanded' || collapsible === 'icon' ? '0' : 'calc(var(--sidebar-width)*-1)',
+    style: _extends({}, getSidebarOffsetStyles(side, state, collapsible), {
       top: '0',
       bottom: '0',
       zIndex: 'var(--size-z-index-drawer)',
@@ -4044,46 +4150,55 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
       transitionProperty: 'left, right, width',
       width: state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : 'var(--sidebar-width)',
       height: '100svh'
-    }
+    })
   }, props), React__default.createElement("div", {
     "data-sidebar": "sidebar",
-    className: "display-flex h-100 w-100 flex-direction-column background-color-secondary font-color-base"
-  }, children)));
+    className: classNames('display-flex h-100 w-100 flex-direction-column background-color-secondary font-color-base', {
+      'p-right-lg-desktop': side === 'right'
+    })
+  }, children))));
 });
 Sidebar.displayName = 'Sidebar';
-var SidebarTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
-  var className = _ref3.className,
-    _onClick = _ref3.onClick,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  var _useSidebar2 = useSidebar(),
-    toggleSidebar = _useSidebar2.toggleSidebar;
+var SidebarTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+    _onClick = _ref4.onClick,
+    side = _ref4.side,
+    _ref4$iconName = _ref4.iconName,
+    iconName = _ref4$iconName === void 0 ? 'dock-left' : _ref4$iconName,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+  var _useSidebar2 = useSidebar(side),
+    toggleSidebar = _useSidebar2.toggleSidebar,
+    contextSide = _useSidebar2.side;
   return React__default.createElement(Button, _extends({
     ref: ref,
     "data-sidebar": "trigger",
     variant: "tertiary",
     size: "sm",
-    iconPrefix: "dock-left",
-    className: classNames('m-left-sm m-left-0-tablet', className),
+    iconPrefix: iconName,
+    className: classNames({
+      'm-left-sm m-left-0-tablet': contextSide === 'left',
+      'm-right-sm m-right-0-tablet': contextSide === 'right'
+    }, className),
     onClick: function onClick(event) {
       _onClick == null || _onClick(event);
       toggleSidebar();
     },
-    "aria-label": "toggle sidebar"
+    "aria-label": "Toggle " + contextSide + " sidebar"
   }, props));
 });
 SidebarTrigger.displayName = 'SidebarTrigger';
-var SidebarInset = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
-  var className = _ref4.className,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+var SidebarInset = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
   return React__default.createElement("main", _extends({
     ref: ref,
     className: classNames('display-flex flex-auto flex-direction-column g-lg align-items-flex-start p-h-0 p-top-lg p-bottom-0 p-lg-tablet background-color-secondary', className)
   }, props));
 });
 SidebarInset.displayName = 'SidebarInset';
-var SidebarHeader = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
-  var className = _ref5.className,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+var SidebarHeader = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
+  var className = _ref6.className,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
   var _useSidebar3 = useSidebar(),
     state = _useSidebar3.state;
   var isCollapsed = state === 'collapsed';
@@ -4096,9 +4211,9 @@ var SidebarHeader = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref)
   }, props));
 });
 SidebarHeader.displayName = 'SidebarHeader';
-var SidebarFooter = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
-  var className = _ref6.className,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+var SidebarFooter = /*#__PURE__*/React__default.forwardRef(function (_ref7, ref) {
+  var className = _ref7.className,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
   return React__default.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "footer",
@@ -4106,9 +4221,9 @@ var SidebarFooter = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref)
   }, props));
 });
 SidebarFooter.displayName = 'SidebarFooter';
-var SidebarContent = /*#__PURE__*/React__default.forwardRef(function (_ref7, ref) {
-  var className = _ref7.className,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+var SidebarContent = /*#__PURE__*/React__default.forwardRef(function (_ref8, ref) {
+  var className = _ref8.className,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded7);
   return React__default.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "content",
@@ -4120,9 +4235,9 @@ var SidebarContent = /*#__PURE__*/React__default.forwardRef(function (_ref7, ref
   }, props));
 });
 SidebarContent.displayName = 'SidebarContent';
-var SidebarMenu = /*#__PURE__*/React__default.forwardRef(function (_ref8, ref) {
-  var className = _ref8.className,
-    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+var SidebarMenu = /*#__PURE__*/React__default.forwardRef(function (_ref9, ref) {
+  var className = _ref9.className,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded8);
   return React__default.createElement("ul", _extends({
     ref: ref,
     "data-sidebar": "menu",
@@ -4133,9 +4248,9 @@ var SidebarMenu = /*#__PURE__*/React__default.forwardRef(function (_ref8, ref) {
   }, props));
 });
 SidebarMenu.displayName = 'SidebarMenu';
-var SidebarMenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref9, ref) {
-  var className = _ref9.className,
-    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+var SidebarMenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref0, ref) {
+  var className = _ref0.className,
+    props = _objectWithoutPropertiesLoose(_ref0, _excluded9);
   return React__default.createElement("li", _extends({
     ref: ref,
     "data-sidebar": "menu-item",
@@ -4146,18 +4261,19 @@ var SidebarMenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref9, re
   }, props));
 });
 SidebarMenuItem.displayName = 'SidebarMenuItem';
-var SidebarMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref0, ref) {
-  var _ref0$asChild = _ref0.asChild,
-    asChild = _ref0$asChild === void 0 ? false : _ref0$asChild,
-    _ref0$isActive = _ref0.isActive,
-    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
-    tooltip = _ref0.tooltip,
-    className = _ref0.className,
-    props = _objectWithoutPropertiesLoose(_ref0, _excluded0);
+var SidebarMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref1, ref) {
+  var _ref1$asChild = _ref1.asChild,
+    asChild = _ref1$asChild === void 0 ? false : _ref1$asChild,
+    _ref1$isActive = _ref1.isActive,
+    isActive = _ref1$isActive === void 0 ? false : _ref1$isActive,
+    tooltip = _ref1.tooltip,
+    className = _ref1.className,
+    props = _objectWithoutPropertiesLoose(_ref1, _excluded0);
   var Comp = asChild ? Slot : 'button';
   var _useSidebar4 = useSidebar(),
     isMobile = _useSidebar4.isMobile,
-    state = _useSidebar4.state;
+    state = _useSidebar4.state,
+    side = _useSidebar4.side;
   var button = React__default.createElement(Comp, _extends({
     ref: ref,
     "data-sidebar": "menu-button",
@@ -4178,15 +4294,15 @@ var SidebarMenuButton = /*#__PURE__*/React__default.forwardRef(function (_ref0,
   return React__default.createElement(Tooltip, null, React__default.createElement(TooltipTrigger, {
     asChild: true
   }, button), React__default.createElement(TooltipContent, _extends({
-    side: "right",
+    side: side === 'right' ? 'left' : 'right',
     align: "center",
     hidden: state !== 'collapsed' || isMobile
   }, tooltip)));
 });
 SidebarMenuButton.displayName = 'SidebarMenuButton';
-var SidebarGroup = /*#__PURE__*/React__default.forwardRef(function (_ref1, ref) {
-  var className = _ref1.className,
-    props = _objectWithoutPropertiesLoose(_ref1, _excluded1);
+var SidebarGroup = /*#__PURE__*/React__default.forwardRef(function (_ref10, ref) {
+  var className = _ref10.className,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded1);
   return React__default.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "group",
@@ -4194,9 +4310,9 @@ var SidebarGroup = /*#__PURE__*/React__default.forwardRef(function (_ref1, ref)
   }, props));
 });
 SidebarGroup.displayName = 'SidebarGroup';
-var SidebarGroupLabel = /*#__PURE__*/React__default.forwardRef(function (_ref10, ref) {
-  var className = _ref10.className,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+var SidebarGroupLabel = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
+  var className = _ref11.className,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded10);
   return React__default.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "group-label",
@@ -4204,9 +4320,9 @@ var SidebarGroupLabel = /*#__PURE__*/React__default.forwardRef(function (_ref10,
   }, props));
 });
 SidebarGroupLabel.displayName = 'SidebarGroupLabel';
-var SidebarMenuSub = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
-  var className = _ref11.className,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
+var SidebarMenuSub = /*#__PURE__*/React__default.forwardRef(function (_ref12, ref) {
+  var className = _ref12.className,
+    props = _objectWithoutPropertiesLoose(_ref12, _excluded11);
   return React__default.createElement("ul", _extends({
     ref: ref,
     "data-sidebar": "menu-sub",
@@ -4217,19 +4333,19 @@ var SidebarMenuSub = /*#__PURE__*/React__default.forwardRef(function (_ref11, re
   }, props));
 });
 SidebarMenuSub.displayName = 'SidebarMenuSub';
-var SidebarMenuSubItem = /*#__PURE__*/React__default.forwardRef(function (_ref12, ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref12), _ref12));
+var SidebarMenuSubItem = /*#__PURE__*/React__default.forwardRef(function (_ref13, ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref13), _ref13));
   return React__default.createElement("li", _extends({
     ref: ref
   }, props));
 });
 SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
-var SidebarMenuSubButton = /*#__PURE__*/React__default.forwardRef(function (_ref13, ref) {
-  var _ref13$asChild = _ref13.asChild,
-    asChild = _ref13$asChild === void 0 ? false : _ref13$asChild,
-    isActive = _ref13.isActive,
-    className = _ref13.className,
-    props = _objectWithoutPropertiesLoose(_ref13, _excluded12);
+var SidebarMenuSubButton = /*#__PURE__*/React__default.forwardRef(function (_ref14, ref) {
+  var _ref14$asChild = _ref14.asChild,
+    asChild = _ref14$asChild === void 0 ? false : _ref14$asChild,
+    isActive = _ref14.isActive,
+    className = _ref14.className,
+    props = _objectWithoutPropertiesLoose(_ref14, _excluded12);
   var Comp = asChild ? Slot : 'a';
   return React__default.createElement(Comp, _extends({
     ref: ref,
@@ -4242,11 +4358,11 @@ var SidebarMenuSubButton = /*#__PURE__*/React__default.forwardRef(function (_ref
   }, props));
 });
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
-var SidebarMenuAction = /*#__PURE__*/React__default.forwardRef(function (_ref14, ref) {
-  var className = _ref14.className,
-    _ref14$asChild = _ref14.asChild,
-    asChild = _ref14$asChild === void 0 ? false : _ref14$asChild,
-    props = _objectWithoutPropertiesLoose(_ref14, _excluded13);
+var SidebarMenuAction = /*#__PURE__*/React__default.forwardRef(function (_ref15, ref) {
+  var className = _ref15.className,
+    _ref15$asChild = _ref15.asChild,
+    asChild = _ref15$asChild === void 0 ? false : _ref15$asChild,
+    props = _objectWithoutPropertiesLoose(_ref15, _excluded13);
   var Comp = asChild ? Slot : 'button';
   return React__default.createElement(Comp, _extends({
     ref: ref,
@@ -4259,28 +4375,31 @@ var SidebarMenuAction = /*#__PURE__*/React__default.forwardRef(function (_ref14,
   }, props));
 });
 SidebarMenuAction.displayName = 'SidebarMenuAction';
-var SidebarRail = /*#__PURE__*/React__default.forwardRef(function (_ref15, ref) {
-  var className = _ref15.className,
-    props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
+var SidebarRail = /*#__PURE__*/React__default.forwardRef(function (_ref16, ref) {
+  var className = _ref16.className,
+    props = _objectWithoutPropertiesLoose(_ref16, _excluded14);
   var _useSidebar5 = useSidebar(),
     open = _useSidebar5.open,
-    toggleSidebar = _useSidebar5.toggleSidebar;
-  var caretIcon = open ? 'caret-sm-left' : 'caret-sm-right';
+    toggleSidebar = _useSidebar5.toggleSidebar,
+    side = _useSidebar5.side;
+  var shortcutLabel = side === 'left' ? SIDEBAR_KEYBOARD_SHORTCUT_LEFT : SIDEBAR_KEYBOARD_SHORTCUT_RIGHT;
+  var caretIcon = open ? side === 'right' ? 'caret-sm-right' : 'caret-sm-left' : side === 'right' ? 'caret-sm-left' : 'caret-sm-right';
   return React__default.createElement("button", _extends({
     ref: ref,
     "data-sidebar": "rail",
     "aria-label": "Toggle Sidebar",
     tabIndex: -1,
     onClick: toggleSidebar,
-    title: "Toggle Sidebar [",
+    title: "Toggle Sidebar " + shortcutLabel,
     className: classNames(styles$8.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,
-      'cursor-e-resize': !open
+      'cursor-w-resize': open && side === 'left' || !open && side === 'right',
+      'cursor-e-resize': !open && side === 'left' || open && side === 'right'
     }, className),
     style: {
       top: '20px',
       bottom: '20px',
-      right: '-14px',
+      right: side === 'left' ? '-14px' : undefined,
+      left: side === 'right' ? '-14px' : undefined,
       width: '10px'
     }
   }, props), React__default.createElement(Box, {
@@ -4296,17 +4415,17 @@ var SidebarRail = /*#__PURE__*/React__default.forwardRef(function (_ref15, ref)
     alignItems: "center",
     justifyContent: "center",
     className: classNames('hover-child', {
-      'cursor-w-resize': open,
-      'cursor-e-resize': !open
+      'cursor-w-resize': open && side === 'left' || !open && side === 'right',
+      'cursor-e-resize': !open && side === 'left' || open && side === 'right'
     }, className)
   }, React__default.createElement(Icon, {
     name: caretIcon
   })));
 });
 SidebarRail.displayName = 'SidebarRail';
-var SidebarMenuBadge = /*#__PURE__*/React__default.forwardRef(function (_ref16, ref) {
-  var className = _ref16.className,
-    props = _objectWithoutPropertiesLoose(_ref16, _excluded15);
+var SidebarMenuBadge = /*#__PURE__*/React__default.forwardRef(function (_ref17, ref) {
+  var className = _ref17.className,
+    props = _objectWithoutPropertiesLoose(_ref17, _excluded15);
   return React__default.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "menu-badge",