feat: rewrite sidebar

packages/saas-ui-core/package.json

@@ -105,11 +105,10 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
+    "@ark-ui/react": "^4.2.0",
     "@chakra-ui/hooks": "^3.0.0-next.23",
-    "@chakra-ui/utils": "^3.0.0-next.23",
     "@react-aria/interactions": "^3.22.4",
     "@react-aria/utils": "^3.25.3",
-    "@saas-ui/react-utils": "workspace:*",
     "@saas-ui/theme": "workspace:*",
     "@zag-js/dom-event": "^0.75.0",
     "@zag-js/dom-utils": "^0.2.4"

packages/saas-ui-core/src/app-shell/app-shell.tsx

@@ -20,9 +20,7 @@ const {
 
 export { useAppShellStyles }
 
-export interface AppShellProps
-  extends HTMLSystemProps<'div'>,
-    SlotRecipeProps<'sui-app-shell'> {
+export interface AppShellProps extends HTMLSystemProps<'div'> {
   /**
    * The top header navigation
    */
@@ -45,12 +43,16 @@ export interface AppShellProps
   children: React.ReactNode
 }
 
+export interface AppShellRootProps
+  extends AppShellProps,
+    SlotRecipeProps<'appShell'> {}
+
 /**
  * The App Shell defines the main structure of your app.
  *
  * @see Docs https://saas-ui.dev/docs/components/layout/app-shell
  */
-export const AppShellRoot = withProvider<HTMLDivElement, AppShellProps>(
+export const AppShellRoot = withProvider<HTMLDivElement, AppShellRootProps>(
   'div',
   'root',
   { forwardAsChild: true },
@@ -71,7 +73,7 @@ export const AppShellMain = withContext<HTMLDivElement, AppShellMainProps>(
   { forwardAsChild: true },
 )
 
-export const AppShell = forwardRef<HTMLDivElement, AppShellProps>(
+export const AppShell = forwardRef<HTMLDivElement, AppShellRootProps>(
   (props, ref) => {
     const { header, sidebar, aside, footer, children, ...rootProps } = props
 

packages/saas-ui-core/src/preset.ts

@@ -16,16 +16,6 @@ const fluidFontSizes = {
   }),
 }
 
-console.log(
-  'fluid',
-  fluid({
-    property: 'fluid-text-size',
-    from: breakpointValues.sm,
-    to: breakpointValues['2xl'],
-    divider: 1,
-  }),
-)
-
 // 'fluid-text-size': {
 //   'min-max': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_2XL, divider: 1 }),
 //   'sm-md': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_MD, divider: 1 }),

packages/saas-ui-core/src/sidebar/index.ts

@@ -1,32 +1,3 @@
-export type {
-  SidebarOptions,
-  SidebarOverlayProps,
-  SidebarProps,
-  SidebarSectionProps,
-  SidebarToggleButtonProps,
-} from './sidebar-types'
-export {
-  Sidebar,
-  SidebarOverlay,
-  SidebarSection,
-  SidebarToggleButton,
-} from './sidebar'
-export { Nav } from './nav'
-export type { NavProps } from './nav'
-export { NavGroup, NavGroupContent, NavGroupTitle } from './nav-group'
-export type { NavGroupProps, NavGroupTitleProps } from './nav-group'
-export { NavItem, NavItemLabel } from './nav-item'
-export type { NavItemLabelProps, NavItemProps } from './nav-item'
-export {
-  NavGroupStylesProvider,
-  NavItemStylesProvider,
-  useNavGroupStyles,
-  useNavItemStyles,
-} from './nav-context'
-export { SidebarStylesProvider, useSidebarStyles } from './sidebar-context'
-export {
-  SidebarProvider,
-  useSidebarContext,
-  useSidebarToggleButton,
-} from './use-sidebar'
-export type { UseSidebarReturn } from './use-sidebar'
+export * as Sidebar from './namespace'
+
+export { useSidebar } from './sidebar.context'

packages/saas-ui-core/src/sidebar/namespace.ts

@@ -0,0 +1,11 @@
+export {
+  SidebarProvider as Provider,
+  SidebarRoot as Root,
+  SidebarTrigger as Trigger,
+  SidebarBackdrop as Backdrop,
+  SidebarSection as Section,
+  SidebarHeader as Header,
+  SidebarBody as Body,
+  SidebarFooter as Footer,
+  SidebarTrack as Track,
+} from './sidebar'

packages/saas-ui-core/src/sidebar/nav-item.tsx

@@ -1,22 +1,21 @@
 import * as React from 'react'
 
 import {
-  chakra,
-  forwardRef,
-  omitThemingProps,
   HTMLChakraProps,
-  ThemingProps,
   SystemProps,
-  useMultiStyleConfig,
+  ThemingProps,
   Tooltip,
   TooltipProps,
+  chakra,
+  forwardRef,
+  omitThemingProps,
+  useMultiStyleConfig,
 } from '@chakra-ui/react'
-
 import { cx, dataAttr } from '@chakra-ui/utils'
-import { useLink } from '../provider'
 
-import { useSidebarContext } from './use-sidebar'
+import { useLink } from '../provider'
 import { NavItemStylesProvider, useNavItemStyles } from './nav-context'
+import { useSidebarContext } from './sidebar.context'
 
 export interface NavItemLabelProps extends HTMLChakraProps<'span'> {}
 
@@ -33,7 +32,7 @@ export const NavItemLabel = forwardRef<NavItemLabelProps, 'span'>(
         {children}
       </chakra.span>
     )
-  }
+  },
 )
 
 NavItemLabel.displayName = 'NavItemLabel'

packages/saas-ui-core/src/sidebar/sidebar.context.tsx

@@ -0,0 +1,109 @@
+import { useCallback, useMemo, useState } from 'react'
+
+import {
+  UseDisclosureReturn,
+  createContext,
+  useBreakpointValue,
+  useDisclosure,
+} from '@chakra-ui/react'
+
+import type { HTMLSystemProps } from '#system'
+
+import { callAll } from '../utils/call-all.ts'
+import { getBreakpoints } from './sidebar-utils.ts'
+import type { SidebarProps } from './sidebar.types.ts'
+
+export interface UseSidebarReturn {
+  open: boolean
+  setOpen: (open: boolean) => void
+  toggle: () => void
+  isMobile?: boolean
+  openMobile?: boolean
+  setOpenMobile: (open: boolean) => void
+  breakpoints?: boolean
+}
+
+const [SidebarContextProvider, useSidebar] = createContext<UseSidebarReturn>({
+  name: 'SidebarProvider',
+  strict: true,
+})
+
+export interface SidebarProviderProps extends SidebarProps {
+  /**
+   * Define the breakpoint for the mobile nav. Use `false` to disable the mobile nav.
+   *
+   * @default "lg"
+   */
+  toggleBreakpoint?: false | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  /**
+   * Control the default visibility of the sidebar.
+   */
+  defaultOpen?: boolean
+  /**
+   * Control the visibility of the sidebar.
+   */
+  open?: boolean
+  /**
+   * Callback invoked when the sidebar is opened.
+   */
+  onOpenChange?: (open: boolean) => void
+  /**
+   * The content of the sidebar.
+   */
+  children: React.ReactNode
+}
+
+export function SidebarProvider(props: SidebarProviderProps) {
+  const { children, toggleBreakpoint, defaultOpen, open, onOpenChange } = props
+
+  const isMobile = useBreakpointValue(getBreakpoints(toggleBreakpoint), {
+    fallback: undefined,
+  })
+
+  const [openMobile, setOpenMobile] = useState(false)
+
+  const disclosure = useDisclosure({
+    defaultOpen: isMobile ? openMobile : defaultOpen,
+    open: isMobile ? openMobile : open,
+    onOpen: () => {
+      isMobile ? setOpenMobile(true) : onOpenChange?.(true)
+    },
+    onClose: () => (isMobile ? setOpenMobile(false) : onOpenChange?.(false)),
+  })
+
+  const context = useMemo(() => {
+    return {
+      open: disclosure.open,
+      setOpen: (open: boolean = true) =>
+        open ? disclosure.onOpen() : disclosure.onClose(),
+      toggle: disclosure.onToggle,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+    }
+  }, [disclosure, toggleBreakpoint, isMobile, openMobile])
+
+  return (
+    <SidebarContextProvider value={context}>{children}</SidebarContextProvider>
+  )
+}
+
+export { useSidebar }
+
+export const useSidebarTrigger = () => {
+  const context = useSidebar()
+
+  const getButtonProps = (props: HTMLSystemProps<'button'>) => {
+    return {
+      onClick: callAll(context?.toggle, props?.onClick),
+      'aria-label': context.open ? 'Close sidebar' : 'Open sidebar',
+      'data-state': context.open ? 'open' : 'closed',
+    }
+  }
+
+  return {
+    open: context?.open,
+    isMobile: context?.isMobile,
+    getButtonProps,
+  }
+}