@moises.ai/design-system 3.11.20 → 3.11.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.11.20",
+  "version": "3.11.21",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/Sidebar/Sidebar.jsx

@@ -14,6 +14,26 @@ import {
 import { useMobileDrawer } from '../../utils/useMobileDrawer'
 import { MobileDrawerProvider } from '../../contexts/MobileDrawerContext'
 
+const DEFAULT_MOBILE_BREAKPOINT = 768
+
+const getMobileMediaQuery = (mobileBreakpoint) => {
+  if (mobileBreakpoint == null) {
+    return `(max-width: ${DEFAULT_MOBILE_BREAKPOINT}px)`
+  }
+
+  if (typeof mobileBreakpoint === 'number') {
+    return `(max-width: ${mobileBreakpoint}px)`
+  }
+
+  if (typeof mobileBreakpoint === 'string') {
+    const trimmed = mobileBreakpoint.trim()
+    if (!trimmed) return `(max-width: ${DEFAULT_MOBILE_BREAKPOINT}px)`
+    return trimmed.startsWith('(') ? trimmed : `(max-width: ${trimmed})`
+  }
+
+  return `(max-width: ${DEFAULT_MOBILE_BREAKPOINT}px)`
+}
+
 export const Sidebar = ({
   className,
   children,
@@ -23,9 +43,12 @@ export const Sidebar = ({
   onCollapsedChange,
   onLogoClick,
   tooltip = 'Expand menu',
+  mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT,
   ...props
 }) => {
-  const { isMobile, isOpen: mobileOpen, open, close } = useMobileDrawer()
+  const mobileMediaQuery = getMobileMediaQuery(mobileBreakpoint)
+  const { isMobile, isOpen: mobileOpen, open, close } =
+    useMobileDrawer(mobileMediaQuery)
   const [isHovered, setIsHovered] = useState(false)
   const [internalTemporarilyExpandedByDrag, setInternalTemporarilyExpandedByDrag] =
     useState(false)
@@ -159,6 +182,7 @@ export const Sidebar = ({
       <div
         className={classNames(styles.root, {
           [styles.rootCollapsed]: effectiveCollapsed,
+          [styles.rootMobile]: isMobile,
         })}
         {...props}
       >
@@ -184,8 +208,8 @@ export const Sidebar = ({
                   cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
                 }}
               >
-              <MoisesLogoIcon width={32} height={17} />
-              <MoisesIcon height={12.269} />
+                <MoisesLogoIcon width={32} height={17} />
+                <MoisesIcon height={12.269} />
               </Flex>
             </button>
 
@@ -240,35 +264,35 @@ export const Sidebar = ({
                       [styles.headerCollapsed]: effectiveCollapsed,
                     })}
                   >
-                  <button
-                    type="button"
-                    className={styles.logoButton}
-                    onClick={handleLogoClick}
-                    aria-label={desktopLogoAriaLabel}
-                  >
-                    <Flex
-                      align="center"
-                      gap="2"
-                      style={{
-                        cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
-                      }}
+                    <button
+                      type="button"
+                      className={styles.logoButton}
+                      onClick={handleLogoClick}
+                      aria-label={desktopLogoAriaLabel}
                     >
-                      {logoContent}
-                    </Flex>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleToggleCollapse}
-                    className={classNames(styles.toggleButton, {
-                      [styles.toggleButtonHidden]: effectiveCollapsed,
-                    })}
-                    aria-label="Collapse menu"
-                  >
-                    <SidebarLeftIcon width={16} height={16} />
-                  </button>
-                </Flex>
-              </div>
-            </Tooltip>
+                      <Flex
+                        align="center"
+                        gap="2"
+                        style={{
+                          cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
+                        }}
+                      >
+                        {logoContent}
+                      </Flex>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleToggleCollapse}
+                      className={classNames(styles.toggleButton, {
+                        [styles.toggleButtonHidden]: effectiveCollapsed,
+                      })}
+                      aria-label="Collapse menu"
+                    >
+                      <SidebarLeftIcon width={16} height={16} />
+                    </button>
+                  </Flex>
+                </div>
+              </Tooltip>
             </div>
           ) : (
             <div className={styles.headerWrapper}>
@@ -279,33 +303,33 @@ export const Sidebar = ({
                   [styles.headerCollapsed]: effectiveCollapsed,
                 })}
               >
-              <button
-                type="button"
-                className={styles.logoButton}
-                onClick={handleLogoClick}
-                aria-label={desktopLogoAriaLabel}
-              >
-                <Flex
-                  align="center"
-                  gap="2"
-                  style={{
-                    cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
-                  }}
+                <button
+                  type="button"
+                  className={styles.logoButton}
+                  onClick={handleLogoClick}
+                  aria-label={desktopLogoAriaLabel}
                 >
-                  {logoContent}
-                </Flex>
-              </button>
-              <button
-                type="button"
-                onClick={handleToggleCollapse}
-                className={classNames(styles.toggleButton, {
-                  [styles.toggleButtonHidden]: effectiveCollapsed,
-                })}
-                aria-label="Collapse menu"
-              >
-                <SidebarLeftIcon width={16} height={16} />
-              </button>
-            </Flex>
+                  <Flex
+                    align="center"
+                    gap="2"
+                    style={{
+                      cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
+                    }}
+                  >
+                    {logoContent}
+                  </Flex>
+                </button>
+                <button
+                  type="button"
+                  onClick={handleToggleCollapse}
+                  className={classNames(styles.toggleButton, {
+                    [styles.toggleButtonHidden]: effectiveCollapsed,
+                  })}
+                  aria-label="Collapse menu"
+                >
+                  <SidebarLeftIcon width={16} height={16} />
+                </button>
+              </Flex>
             </div>
           )}
           <Flex direction="column" className={styles.content}>

package/src/components/Sidebar/Sidebar.module.css

@@ -148,6 +148,106 @@
   color: var(--neutral-alpha-12);
 }
 
+.rootMobile {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  background: transparent;
+  border: none;
+}
+
+.rootMobile.rootCollapsed {
+  width: 0;
+  height: 0;
+}
+
+.rootMobile .desktopSidebar {
+  display: none;
+}
+
+.rootMobile .mobileTopBarWrapper {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  z-index: 1002;
+  background-color: var(--neutral-1);
+  border-bottom: 1px solid var(--neutral-3);
+}
+
+.rootMobile .mobileTopBar {
+  display: flex;
+  width: 100%;
+  border-bottom: none;
+}
+
+.rootMobile .mobileOverlay {
+  display: block;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease-out;
+}
+
+.rootMobile .mobileOverlayOpen {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.rootMobile .mobileDrawer {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 64px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  width: 100%;
+  height: calc(100vh - 64px);
+  height: calc(100dvh - 64px);
+  padding: 16px;
+  background-color: var(--neutral-1);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.rootMobile .mobileDrawerOpen {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity 200ms ease-out, visibility 0s linear 0s;
+}
+
+.rootMobile .mobileDrawerContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  transform: translateY(-12px);
+  opacity: 0;
+  transition: transform 240ms ease-out, opacity 240ms ease-out;
+  will-change: transform, opacity;
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+}
+
+.rootMobile .mobileDrawerContentOpen {
+  transform: translateY(0);
+  opacity: 1;
+}
+
 @media (max-width: 768px) {
   .root {
     position: absolute;