@kushagradhawan/kookie-ui 0.1.15 → 0.1.17

package/dist/esm/components/sidebar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sidebar.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\n\nimport { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { ChevronDownIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\n\n\n// Import base menu styling and components\nimport { baseMenuItemPropDefs } from './_internal/base-menu.props.js';\nimport { Slot } from 'radix-ui';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\n// Context for sidebar state\ntype SidebarContextProps = {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  collapsible: 'icon' | 'offcanvas' | 'none';\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a Sidebar.Provider');\n  }\n  return context;\n}\n\n// Provider component\ninterface SidebarProviderProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n  ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, children, ...props }, forwardedRef) => {\n    // Internal state for uncontrolled mode\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n    \n    // Use controlled state if provided, otherwise internal state\n    const open = openProp ?? internalOpen;\n    \n    const setOpen = React.useCallback((value: boolean) => {\n      if (setOpenProp) {\n        setOpenProp(value); // Controlled mode\n      } else {\n        setInternalOpen(value); // Uncontrolled mode\n      }\n    }, [setOpenProp]);\n\n    return (\n      <div {...props} ref={forwardedRef}>\n        <SidebarContext.Provider value={{ open, setOpen, collapsible: 'icon' }}>\n          {children}\n        </SidebarContext.Provider>\n      </div>\n    );\n  }\n);\nSidebarProvider.displayName = 'Sidebar.Provider';\n\n// Root sidebar container\ntype SidebarRootOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ntype SidebarRootElement = HTMLDivElement;\ninterface SidebarRootProps\n  extends ComponentPropsWithout<'div', RemovedProps>,\n    SidebarRootOwnProps {}\n\nconst SidebarRoot = React.forwardRef<SidebarRootElement, SidebarRootProps>(\n  (props, forwardedRef) => {\n    const themeContext = useThemeContext();\n    const { open } = useSidebar();\n    \n    const {\n      size = sidebarPropDefs.size.default,\n      variant = sidebarPropDefs.variant.default,\n      side = sidebarPropDefs.side.default,\n      collapsible = sidebarPropDefs.collapsible.default,\n      floating: _floating = sidebarPropDefs.floating.default,\n      color,\n      highContrast = sidebarPropDefs.highContrast.default,\n    } = props;\n\n    const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n    const resolvedColor = color || themeContext.accentColor;\n\n    return (\n      <div\n        {...rootProps}\n        ref={forwardedRef}\n        data-accent-color={resolvedColor}\n        data-state={open ? 'expanded' : 'collapsed'}\n        data-side={side}\n        data-collapsible={collapsible}\n        className={classNames(\n          'rt-SidebarRoot',\n          className\n        )}\n      >\n        <Theme asChild>\n          <div \n            className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${size}`)}\n            data-accent-color={resolvedColor}\n            data-high-contrast={highContrast || undefined}\n          >\n            {children}\n          </div>\n        </Theme>\n      </div>\n    );\n  }\n);\nSidebarRoot.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ntype SidebarContentElement = HTMLDivElement;\ninterface SidebarContentProps extends ComponentPropsWithout<'div', RemovedProps> {}\n\nconst SidebarContent = React.forwardRef<SidebarContentElement, SidebarContentProps>(\n  ({ className, children, ...props }, forwardedRef) => (\n    <ScrollArea type=\"auto\">\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-SidebarContent', 'rt-BaseMenuContent', className)}\n      >\n        {children}\n      </div>\n    </ScrollArea>\n  )\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ntype SidebarHeaderElement = HTMLDivElement;\ninterface SidebarHeaderProps extends ComponentPropsWithout<'div', RemovedProps> {}\n\nconst SidebarHeader = React.forwardRef<SidebarHeaderElement, SidebarHeaderProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarHeader', 'rt-BaseMenuContent', className)}\n    />\n  )\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ntype SidebarFooterElement = HTMLDivElement;\ninterface SidebarFooterProps extends ComponentPropsWithout<'div', RemovedProps> {}\n\nconst SidebarFooter = React.forwardRef<SidebarFooterElement, SidebarFooterProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarFooter', 'rt-BaseMenuContent', className)}\n    />\n  )\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\ntype SidebarTriggerElement = React.ElementRef<typeof IconButton>;\ninterface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, RemovedProps> {}\n\nconst SidebarTrigger = React.forwardRef<SidebarTriggerElement, SidebarTriggerProps>(\n  ({ onClick, ...props }, forwardedRef) => {\n    const { setOpen, open } = useSidebar();\n    \n    return (\n      <IconButton\n        {...props}\n        ref={forwardedRef}\n        variant=\"ghost\"\n        onClick={(event) => {\n          onClick?.(event);\n          setOpen(!open);\n        }}\n      >\n        <ChevronDownIcon />\n      </IconButton>\n    );\n  }\n);\nSidebarTrigger.displayName = 'Sidebar.Trigger';\n\n// Main content area (pushes to make room for sidebar)\ntype SidebarInsetElement = HTMLDivElement;\ninterface SidebarInsetProps extends ComponentPropsWithout<'main', RemovedProps> {}\n\nconst SidebarInset = React.forwardRef<SidebarInsetElement, SidebarInsetProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <main\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarInset', className)}\n    />\n  )\n);\nSidebarInset.displayName = 'Sidebar.Inset';\n\n// Create sidebar-specific menu components that don't require DropdownMenu context\ninterface SidebarLabelProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarLabel = React.forwardRef<HTMLDivElement, SidebarLabelProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames('rt-BaseMenuLabel', className)}\n      {...props}\n    />\n  )\n);\nSidebarLabel.displayName = 'Sidebar.Label';\n\ntype SidebarItemOwnProps = GetPropDefTypes<typeof baseMenuItemPropDefs>;\ninterface SidebarItemProps \n  extends ComponentPropsWithout<'div', RemovedProps>,\n    SidebarItemOwnProps {}\n\nconst SidebarItem = React.forwardRef<HTMLDivElement, SidebarItemProps>(\n  (props, ref) => {\n    const {\n      className,\n      children,\n      color = baseMenuItemPropDefs.color.default,\n      shortcut,\n      asChild = false,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...itemProps\n    } = props;\n    \n    const [highlighted, setHighlighted] = React.useState(false);\n    \n    const handleMouseEnter = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      setHighlighted(true);\n      onMouseEnter?.(e);\n    }, [onMouseEnter]);\n    \n    const handleMouseLeave = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      setHighlighted(false);\n      onMouseLeave?.(e);\n    }, [onMouseLeave]);\n    \n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n      setHighlighted(true);\n      onFocus?.(e);\n    }, [onFocus]);\n    \n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n      setHighlighted(false);\n      onBlur?.(e);\n    }, [onBlur]);\n    \n    if (asChild) {\n      return (\n        <Slot.Root\n          ref={ref}\n          data-accent-color={color}\n          data-highlighted={highlighted || undefined}\n          className={classNames('rt-reset', 'rt-BaseMenuItem', className)}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...itemProps}\n        >\n          {children}\n        </Slot.Root>\n      );\n    }\n    \n    return (\n      <div\n        ref={ref}\n        data-accent-color={color}\n        data-highlighted={highlighted || undefined}\n        className={classNames('rt-reset', 'rt-BaseMenuItem', className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={0}\n        role=\"menuitem\"\n        {...itemProps}\n      >\n        <Slot.Slottable>{children}</Slot.Slottable>\n        {shortcut && <div className=\"rt-BaseMenuShortcut\">{shortcut}</div>}\n      </div>\n    );\n  }\n);\nSidebarItem.displayName = 'Sidebar.Item';\n\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames('rt-BaseMenuGroup', className)}\n      {...props}\n    />\n  )\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarSeparator = React.forwardRef<HTMLDivElement, SidebarSeparatorProps>(\n  ({ className, ..._props }, ref) => (\n    <Separator\n      ref={ref}\n      className={classNames('rt-BaseMenuSeparator', className)}\n    />\n  )\n);\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Sidebar checkbox item with proper prop filtering\ninterface SidebarCheckboxItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  color?: string;\n  shortcut?: string;\n}\n\nconst SidebarCheckboxItem = React.forwardRef<HTMLDivElement, SidebarCheckboxItemProps>(\n  ({ \n    className, \n    checked, \n    onCheckedChange, \n    children, \n    color, \n    shortcut, \n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    onClick,\n    ...props \n  }, ref) => {\n    const [highlighted, setHighlighted] = React.useState(false);\n    \n    const handleMouseEnter = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      setHighlighted(true);\n      onMouseEnter?.(e);\n    }, [onMouseEnter]);\n    \n    const handleMouseLeave = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      setHighlighted(false);\n      onMouseLeave?.(e);\n    }, [onMouseLeave]);\n    \n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n      setHighlighted(true);\n      onFocus?.(e);\n    }, [onFocus]);\n    \n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n      setHighlighted(false);\n      onBlur?.(e);\n    }, [onBlur]);\n    \n    const handleClick = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      onCheckedChange?.(!checked);\n      onClick?.(e);\n    }, [checked, onCheckedChange, onClick]);\n    \n    return (\n      <div\n        ref={ref}\n        data-accent-color={color}\n        data-highlighted={highlighted || undefined}\n        className={classNames(\n          'rt-reset',\n          'rt-BaseMenuItem',\n          'rt-BaseMenuCheckboxItem',\n          className\n        )}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleClick(e as any);\n          }\n        }}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={0}\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        {...props}\n      >\n        <Slot.Slottable>{children}</Slot.Slottable>\n        {checked && <div className=\"rt-BaseMenuItemIndicator\">\u2713</div>}\n        {shortcut && <div className=\"rt-BaseMenuShortcut\">{shortcut}</div>}\n      </div>\n    );\n  }\n);\nSidebarCheckboxItem.displayName = 'Sidebar.CheckboxItem';\n\n// Sidebar radio group with proper prop filtering  \ninterface SidebarRadioGroupProps extends React.ComponentPropsWithoutRef<'div'> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst SidebarRadioGroup = React.forwardRef<HTMLDivElement, SidebarRadioGroupProps>(\n  ({ className, value, onValueChange, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames('rt-BaseMenuGroup', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\nSidebarRadioGroup.displayName = 'Sidebar.RadioGroup';\n\n// Sidebar radio item with proper prop filtering\ninterface SidebarRadioItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  value?: string;\n  color?: string;\n  shortcut?: string;\n}\n\nconst SidebarRadioItem = React.forwardRef<HTMLDivElement, SidebarRadioItemProps>(\n  ({ \n    className, \n    value, \n    children, \n    color, \n    shortcut, \n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...props \n  }, ref) => {\n    const [highlighted, setHighlighted] = React.useState(false);\n    \n    const handleMouseEnter = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      setHighlighted(true);\n      onMouseEnter?.(e);\n    }, [onMouseEnter]);\n    \n    const handleMouseLeave = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      setHighlighted(false);\n      onMouseLeave?.(e);\n    }, [onMouseLeave]);\n    \n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n      setHighlighted(true);\n      onFocus?.(e);\n    }, [onFocus]);\n    \n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n      setHighlighted(false);\n      onBlur?.(e);\n    }, [onBlur]);\n    \n    return (\n      <div\n        ref={ref}\n        data-accent-color={color}\n        data-highlighted={highlighted || undefined}\n        className={classNames('rt-reset', 'rt-BaseMenuItem', className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={0}\n        role=\"menuitemradio\"\n        aria-checked={false}\n        {...props}\n      >\n        <Slot.Slottable>{children}</Slot.Slottable>\n        {shortcut && <div className=\"rt-BaseMenuShortcut\">{shortcut}</div>}\n      </div>\n    );\n  }\n);\nSidebarRadioItem.displayName = 'Sidebar.RadioItem';\n\n// Export all components\nexport {\n  SidebarProvider as Provider,\n  SidebarRoot as Root,\n  SidebarContent as Content,\n  SidebarHeader as Header,\n  SidebarFooter as Footer,\n  SidebarTrigger as Trigger,\n  SidebarInset as Inset,\n  // Re-export DropdownMenu components as sidebar menu components\n  SidebarLabel as Label,\n  SidebarItem as Item,\n  SidebarGroup as Group,\n  SidebarSeparator as Separator,\n  SidebarCheckboxItem as CheckboxItem,\n  SidebarRadioGroup as RadioGroup,\n  SidebarRadioItem as RadioItem,\n  // Export hook\n  useSidebar,\n};\n\nexport type {\n  SidebarProviderProps as ProviderProps,\n  SidebarRootProps as RootProps,\n  SidebarContentProps as ContentProps,\n  SidebarHeaderProps as HeaderProps,\n  SidebarFooterProps as FooterProps,\n  SidebarTriggerProps as TriggerProps,\n  SidebarInsetProps as InsetProps,\n}; "],
-  "mappings": "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",
-  "names": ["React", "classNames", "sidebarPropDefs", "IconButton", "ScrollArea", "Separator", "Theme", "useThemeContext", "ChevronDownIcon", "extractProps", "baseMenuItemPropDefs", "Slot", "SidebarContext", "useSidebar", "context", "SidebarProvider", "defaultOpen", "openProp", "setOpenProp", "children", "props", "forwardedRef", "internalOpen", "setInternalOpen", "open", "setOpen", "value", "SidebarRoot", "themeContext", "size", "variant", "side", "collapsible", "_floating", "color", "highContrast", "className", "rootProps", "resolvedColor", "SidebarContent", "SidebarHeader", "SidebarFooter", "SidebarTrigger", "onClick", "event", "SidebarInset", "SidebarLabel", "ref", "SidebarItem", "shortcut", "asChild", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "itemProps", "highlighted", "setHighlighted", "handleMouseEnter", "e", "handleMouseLeave", "handleFocus", "handleBlur", "SidebarGroup", "SidebarSeparator", "_props", "SidebarCheckboxItem", "checked", "onCheckedChange", "handleClick", "SidebarRadioGroup", "onValueChange", "SidebarRadioItem"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props';\nimport { Theme, useThemeContext } from './theme';\nimport { IconButton } from './icon-button';\nimport { ScrollArea } from './scroll-area';\nimport { Separator } from './separator';\nimport { ChevronDownIcon, ThickChevronRightIcon } from './icons';\nimport { extractProps } from '../helpers/extract-props';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props';\nimport type { GetPropDefTypes } from '../props/prop-def';\n\n// Sidebar context for state management\ntype SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  side: 'left' | 'right';\n  type: 'sidebar' | 'floating';\n  variant: 'soft' | 'surface' | 'ghost';\n  menuVariant: 'solid' | 'soft';\n  collapsible: 'offcanvas' | 'icon' | 'none';\n  size: '1' | '2';\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\n// Hook to detect mobile (simplified version)\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState(false);\n  \n  React.useEffect(() => {\n    const checkIsMobile = () => {\n      setIsMobile(window.innerWidth < 768);\n    };\n    \n    checkIsMobile();\n    window.addEventListener('resize', checkIsMobile);\n    return () => window.removeEventListener('resize', checkIsMobile);\n  }, []);\n  \n  return isMobile;\n}\n\n// Provider component\ninterface SidebarProviderProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  side?: 'left' | 'right';\n}\n\nconst SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n  ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, side = 'left', className, children, ...props }, forwardedRef) => {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = React.useState(false);\n    \n    // Internal state for uncontrolled mode\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n    \n    // Use controlled state if provided, otherwise internal state\n    const open = openProp ?? internalOpen;\n    \n    const setOpen = React.useCallback((value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        setInternalOpen(openState);\n      }\n    }, [setOpenProp, open]);\n\n    // Helper to toggle the sidebar\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // State for data attributes\n    const state = open ? 'expanded' : 'collapsed';\n    \n    const contextValue = React.useMemo<Partial<SidebarContextProps>>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        side,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, side]\n    );\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-SidebarProvider', className)}\n        data-state={state}\n        data-side={side}\n      >\n        <SidebarContext.Provider value={contextValue as SidebarContextProps}>\n          {children}\n        </SidebarContext.Provider>\n      </div>\n    );\n  }\n);\nSidebarProvider.displayName = 'Sidebar.Provider';\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(\n  (props, forwardedRef) => {\n    const themeContext = useThemeContext();\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    const {\n      size = sidebarPropDefs.size.default,\n      variant = sidebarPropDefs.variant.default,\n      menuVariant = sidebarPropDefs.menuVariant.default,\n      type = sidebarPropDefs.type.default,\n      side = sidebarPropDefs.side.default,\n      collapsible = sidebarPropDefs.collapsible.default,\n      color,\n      highContrast = sidebarPropDefs.highContrast.default,\n      asChild,\n    } = props;\n\n    const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n    const { asChild: _, ...safeRootProps } = rootProps; // Remove asChild from DOM props\n    const resolvedColor = color || themeContext.accentColor;\n\n    // Update context with current props - we'll pass the resolved values\n    const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n    const context = React.useContext(SidebarContext);\n    if (context) {\n      context.side = side;\n      context.type = type;\n      context.variant = variant;\n      context.menuVariant = menuVariant;\n      context.collapsible = collapsible;\n      context.size = resolvedSize;\n    }\n\n    if (collapsible === 'none') {\n      return (\n        <div\n          {...safeRootProps}\n          ref={forwardedRef}\n          data-accent-color={resolvedColor}\n          data-state={state}\n          data-side={side}\n          data-type={type}\n          data-collapsible={collapsible}\n          className={classNames('rt-SidebarRoot', `rt-r-size-${size}`, className)}\n        >\n          <Theme>\n            <div \n              className={classNames('rt-SidebarContainer', `rt-variant-${variant}`)}\n              data-accent-color={resolvedColor}\n              data-high-contrast={highContrast || undefined}\n              data-side={side}\n            >\n              {children}\n            </div>\n          </Theme>\n        </div>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <div\n          {...safeRootProps}\n          ref={forwardedRef}\n          data-accent-color={resolvedColor}\n          data-state={openMobile ? 'open' : 'closed'}\n          data-side={side}\n          data-type={type}\n          data-collapsible={collapsible}\n          className={classNames('rt-SidebarRoot', 'rt-SidebarRoot--mobile', className)}\n        >\n          <Theme>\n            <div \n              className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${size}`)}\n              data-accent-color={resolvedColor}\n              data-high-contrast={highContrast || undefined}\n              data-side={side}\n            >\n              {children}\n            </div>\n          </Theme>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        {...safeRootProps}\n        ref={forwardedRef}\n        data-accent-color={resolvedColor}\n        data-state={state}\n        data-side={side}\n        data-type={type}\n        data-collapsible={collapsible}\n        className={classNames('rt-SidebarRoot', className)}\n      >\n        <Theme>\n          <div \n            className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${size}`)}\n            data-accent-color={resolvedColor}\n            data-high-contrast={highContrast || undefined}\n            data-side={side}\n          >\n            {children}\n          </div>\n        </Theme>\n      </div>\n    );\n  }\n);\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n    \n    return (\n      <ScrollArea type=\"auto\">\n        <div\n          {...props}\n          ref={forwardedRef}\n          className={classNames(\n            'rt-SidebarContent', \n            `rt-r-size-${size}`,\n            `rt-menu-variant-${menuVariant}`,\n            className\n          )}\n        >\n          {children}\n        </div>\n      </ScrollArea>\n    );\n  }\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n    \n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarHeader',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarHeader--container': asContainer,\n          },\n          className\n        )}\n      />\n    );\n  }\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n    \n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarFooter',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarFooter--container': asContainer,\n          },\n          className\n        )}\n      />\n    );\n  }\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\ninterface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, RemovedProps> {}\n\nconst SidebarTrigger = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  SidebarTriggerProps\n>(({ onClick, children, ...props }, forwardedRef) => {\n  const { toggleSidebar } = useSidebar();\n  \n  return (\n    <IconButton\n      {...props}\n      ref={forwardedRef}\n      variant=\"ghost\"\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n    >\n      {children || <ChevronDownIcon />}\n    </IconButton>\n  );\n});\nSidebarTrigger.displayName = 'Sidebar.Trigger';\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n  React.ComponentRef<typeof Separator>,\n  SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n  <Separator\n    {...props}\n    ref={forwardedRef}\n    className={classNames('rt-SidebarSeparator', className)}\n  />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <ul\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarMenu', className)}\n    />\n  )\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <li\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarMenuItem', className)}\n    />\n  )\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n  asChild?: boolean;\n  isActive?: boolean;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  ({ asChild = false, isActive = false, className, onMouseEnter, onMouseLeave, ...props }, forwardedRef) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n    const Comp = asChild ? Slot : 'button';\n    \n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-reset',\n          'rt-SidebarMenuButton',\n          className\n        )}\n        data-active={isActive || undefined}\n        data-highlighted={isHighlighted || undefined}\n        onMouseEnter={(event) => {\n          setIsHighlighted(true);\n          onMouseEnter?.(event);\n        }}\n        onMouseLeave={(event) => {\n          setIsHighlighted(false);\n          onMouseLeave?.(event);\n        }}\n      />\n    );\n  }\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n  ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} ref={forwardedRef}>\n        <Accordion.Root\n          type=\"single\"\n          collapsible\n          defaultValue={defaultOpen ? 'item' : undefined}\n        >\n          <Accordion.Item value=\"item\">\n            {children}\n          </Accordion.Item>\n        </Accordion.Root>\n      </div>\n    );\n  }\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n  asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof Accordion.Trigger>,\n  SidebarMenuSubTriggerProps\n>(({ asChild = false, className, children, onMouseEnter, onMouseLeave, ...props }, forwardedRef) => {\n  const [isHighlighted, setIsHighlighted] = React.useState(false);\n  \n  return (\n    <Accordion.Header asChild>\n      <div>\n        <Accordion.Trigger\n          {...props}\n          ref={forwardedRef}\n          asChild={asChild}\n          className={classNames(\n            'rt-reset',\n            'rt-SidebarMenuButton',\n            'rt-SidebarMenuSubTrigger',\n            className\n          )}\n          data-highlighted={isHighlighted || undefined}\n          onMouseEnter={(event) => {\n            setIsHighlighted(true);\n            onMouseEnter?.(event);\n          }}\n          onMouseLeave={(event) => {\n            setIsHighlighted(false);\n            onMouseLeave?.(event);\n          }}\n        >\n          {asChild ? (\n            children\n          ) : (\n            <>\n              {children}\n              <ThickChevronRightIcon \n                className={classNames(\n                  'rt-BaseMenuSubTriggerIcon',\n                  'rt-SidebarMenuSubTriggerIcon'\n                )}\n              />\n            </>\n          )}\n        </Accordion.Trigger>\n      </div>\n    </Accordion.Header>\n  );\n});\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof Accordion.Content>,\n  SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n  return (\n    <Accordion.Content\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarMenuSubContent', className)}\n    >\n      <div className=\"rt-SidebarMenuSubList\">\n        {children}\n      </div>\n    </Accordion.Content>\n  );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarGroup', className)}\n    />\n  )\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n  ({ asChild = false, className, ...props }, forwardedRef) => {\n    const Comp = asChild ? Slot : 'div';\n    \n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-SidebarGroupLabel', className)}\n      />\n    );\n  }\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarGroupContent', className)}\n    />\n  )\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n  SidebarProvider as Provider,\n  Sidebar as Root,\n  SidebarContent as Content,\n  SidebarHeader as Header,\n  SidebarFooter as Footer,\n  SidebarTrigger as Trigger,\n  SidebarSeparator as Separator,\n  SidebarMenu as Menu,\n  SidebarMenuItem as MenuItem,\n  SidebarMenuButton as MenuButton,\n  SidebarMenuSub as MenuSub,\n  SidebarMenuSubTrigger as MenuSubTrigger,\n  SidebarMenuSubContent as MenuSubContent,\n  SidebarGroup as Group,\n  SidebarGroupLabel as GroupLabel,\n  SidebarGroupContent as GroupContent,\n  // Export hook\n  useSidebar,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n * \n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n *   <Logo />\n *   <span>App Name</span>\n * </Sidebar.Header>\n * \n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n *   <Logo />\n *   <Sidebar.MenuButton>\n *     <SettingsIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n * \n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n *   <div className=\"rt-flex rt-items-center rt-gap-2\">\n *     <Logo />\n *     <span>App Name</span>\n *   </div>\n *   <Sidebar.MenuButton>\n *     <UserAvatar />\n *     <span>John Doe</span>\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n * \n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n *   <Sidebar.MenuButton>\n *     <UserIcon />\n *     <span>Settings</span>\n *     <ChevronUpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n * \n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n *   <span>v1.0.0</span>\n *   <Sidebar.MenuButton>\n *     <HelpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n * \n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n  SidebarProviderProps as ProviderProps,\n  SidebarProps as RootProps,\n  SidebarContentProps as ContentProps,\n  SidebarHeaderProps as HeaderProps,\n  SidebarFooterProps as FooterProps,\n  SidebarTriggerProps as TriggerProps,\n}; "],
+  "mappings": "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",
+  "names": ["React", "classNames", "Slot", "Accordion", "sidebarPropDefs", "Theme", "useThemeContext", "IconButton", "ScrollArea", "Separator", "ChevronDownIcon", "ThickChevronRightIcon", "extractProps", "SidebarContext", "useSidebar", "context", "useIsMobile", "isMobile", "setIsMobile", "checkIsMobile", "SidebarProvider", "defaultOpen", "openProp", "setOpenProp", "side", "className", "children", "props", "forwardedRef", "openMobile", "setOpenMobile", "internalOpen", "setInternalOpen", "open", "setOpen", "value", "openState", "toggleSidebar", "state", "contextValue", "Sidebar", "themeContext", "size", "variant", "menuVariant", "type", "collapsible", "color", "highContrast", "asChild", "rootProps", "_", "safeRootProps", "resolvedColor", "resolvedSize", "SidebarContent", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarTrigger", "onClick", "event", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "isActive", "onMouseEnter", "onMouseLeave", "isHighlighted", "setIsHighlighted", "SidebarMenuSub", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
 }

package/dist/esm/components/sidebar.props.d.ts

@@ -8,21 +8,33 @@ declare const sidebarPropDefs: {
     color: {
         type: "enum";
         values: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];
-        default: "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky";
+        default: ("gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky") | undefined;
     };
     size: {
         type: "enum";
         className: string;
-        values: readonly ["1", "2", "3"];
+        values: readonly ["1", "2"];
         default: "2";
         responsive: true;
     };
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "surface", "ghost"];
+        values: readonly ["soft", "surface", "ghost"];
         default: "surface";
     };
+    menuVariant: {
+        type: "enum";
+        className: string;
+        values: readonly ["solid", "soft"];
+        default: "soft";
+    };
+    type: {
+        type: "enum";
+        className: string;
+        values: readonly ["sidebar", "floating"];
+        default: "sidebar";
+    };
     side: {
         type: "enum";
         className: string;
@@ -32,13 +44,8 @@ declare const sidebarPropDefs: {
     collapsible: {
         type: "enum";
         className: string;
-        values: readonly ["icon", "offcanvas", "none"];
-        default: "icon";
-    };
-    floating: {
-        type: "boolean";
-        className: string;
-        default: false;
+        values: readonly ["offcanvas", "icon", "none"];
+        default: "offcanvas";
     };
     asChild: {
         type: "boolean";

package/dist/esm/components/sidebar.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.props.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar.props.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,uBAAuB,IAAI,sBAAsB,EACjD,oBAAoB,IAAI,mBAAmB,EAC3C,4BAA4B,IAAI,2BAA2B,EAC3D,yBAAyB,IAAI,wBAAwB,GACtD,MAAM,gCAAgC,CAAC;AAQxC,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAepB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"sidebar.props.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar.props.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,uBAAuB,IAAI,sBAAsB,EACjD,oBAAoB,IAAI,mBAAmB,EAC3C,4BAA4B,IAAI,2BAA2B,EAC3D,yBAAyB,IAAI,wBAAwB,GACtD,MAAM,gCAAgC,CAAC;AAUxC,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBpB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/esm/components/sidebar.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as e}from"../props/as-child.prop.js";import{accentColorPropDef as s}from"../props/color.prop.js";import{highContrastPropDef as o}from"../props/high-contrast.prop.js";import{baseMenuContentPropDefs as u,baseMenuItemPropDefs as b,baseMenuCheckboxItemPropDefs as d,baseMenuRadioItemPropDefs as D}from"./_internal/base-menu.props.js";const a=["1","2","3"],t=["classic","surface","ghost"],r=["left","right"],f=["icon","offcanvas","none"],p={...e,size:{type:"enum",className:"rt-r-size",values:a,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},side:{type:"enum",className:"rt-side",values:r,default:"left"},collapsible:{type:"enum",className:"rt-collapsible",values:f,default:"icon"},floating:{type:"boolean",className:"rt-floating",default:!1},...s,...o};export{d as sidebarCheckboxItemPropDefs,u as sidebarContentPropDefs,b as sidebarItemPropDefs,p as sidebarPropDefs,D as sidebarRadioItemPropDefs};
+import{asChildPropDef as e}from"../props/as-child.prop";import{colorPropDef as s}from"../props/color.prop";import{highContrastPropDef as a}from"../props/high-contrast.prop";import{baseMenuContentPropDefs as b,baseMenuItemPropDefs as D,baseMenuCheckboxItemPropDefs as P,baseMenuRadioItemPropDefs as y}from"./_internal/base-menu.props.js";const t=["1","2"],o=["soft","surface","ghost"],r=["solid","soft"],n=["sidebar","floating"],p=["left","right"],f=["offcanvas","icon","none"],i={...e,size:{type:"enum",className:"rt-r-size",values:t,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:o,default:"surface"},menuVariant:{type:"enum",className:"rt-menu-variant",values:r,default:"soft"},type:{type:"enum",className:"rt-type",values:n,default:"sidebar"},side:{type:"enum",className:"rt-side",values:p,default:"left"},collapsible:{type:"enum",className:"rt-collapsible",values:f,default:"offcanvas"},...s,...a};export{P as sidebarCheckboxItemPropDefs,b as sidebarContentPropDefs,D as sidebarItemPropDefs,i as sidebarPropDefs,y as sidebarRadioItemPropDefs};
 //# sourceMappingURL=sidebar.props.js.map

package/dist/esm/components/sidebar.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sidebar.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\n// Re-export base menu props for sidebar menu components\nexport {\n  baseMenuContentPropDefs as sidebarContentPropDefs,\n  baseMenuItemPropDefs as sidebarItemPropDefs,\n  baseMenuCheckboxItemPropDefs as sidebarCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs as sidebarRadioItemPropDefs,\n} from './_internal/base-menu.props.js';\n\n// Sidebar container props\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'surface', 'ghost'] as const;\nconst sides = ['left', 'right'] as const;\nconst collapsibleModes = ['icon', 'offcanvas', 'none'] as const;\n\nconst sidebarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  side: { type: 'enum', className: 'rt-side', values: sides, default: 'left' },\n  collapsible: { type: 'enum', className: 'rt-collapsible', values: collapsibleModes, default: 'icon' },\n  floating: { type: 'boolean', className: 'rt-floating', default: false },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  side: PropDef<(typeof sides)[number]>;\n  collapsible: PropDef<(typeof collapsibleModes)[number]>;\n  floating: PropDef<boolean>;\n};\n\nexport { sidebarPropDefs }; "],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,sBAAAC,MAA0B,yBACnC,OAAS,uBAAAC,MAA2B,iCAKpC,OAC6B,2BAA3BC,EACwB,wBAAxBC,EACgC,gCAAhCC,EAC6B,6BAA7BC,MACK,iCAGP,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,OAAO,EACzCC,EAAQ,CAAC,OAAQ,OAAO,EACxBC,EAAmB,CAAC,OAAQ,YAAa,MAAM,EAE/CC,EAAkB,CACtB,GAAGX,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,MAAO,EAC3E,YAAa,CAAE,KAAM,OAAQ,UAAW,iBAAkB,OAAQC,EAAkB,QAAS,MAAO,EACpG,SAAU,CAAE,KAAM,UAAW,UAAW,cAAe,QAAS,EAAM,EACtE,GAAGT,EACH,GAAGC,CACL",
-  "names": ["asChildPropDef", "accentColorPropDef", "highContrastPropDef", "baseMenuContentPropDefs", "baseMenuItemPropDefs", "baseMenuCheckboxItemPropDefs", "baseMenuRadioItemPropDefs", "sizes", "variants", "sides", "collapsibleModes", "sidebarPropDefs"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop';\nimport { colorPropDef } from '../props/color.prop';\nimport { highContrastPropDef } from '../props/high-contrast.prop';\n\nimport type { PropDef } from '../props/prop-def';\n\n// Re-export base menu props for sidebar menu components\nexport {\n  baseMenuContentPropDefs as sidebarContentPropDefs,\n  baseMenuItemPropDefs as sidebarItemPropDefs,\n  baseMenuCheckboxItemPropDefs as sidebarCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs as sidebarRadioItemPropDefs,\n} from './_internal/base-menu.props.js';\n\n// Sidebar container props\nconst sizes = ['1', '2'] as const;\nconst variants = ['soft', 'surface', 'ghost'] as const;\nconst menuVariants = ['solid', 'soft'] as const;\nconst types = ['sidebar', 'floating'] as const;\nconst sides = ['left', 'right'] as const;\nconst collapsibleModes = ['offcanvas', 'icon', 'none'] as const;\n\nconst sidebarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  menuVariant: { type: 'enum', className: 'rt-menu-variant', values: menuVariants, default: 'soft' },\n  type: { type: 'enum', className: 'rt-type', values: types, default: 'sidebar' },\n  side: { type: 'enum', className: 'rt-side', values: sides, default: 'left' },\n  collapsible: { type: 'enum', className: 'rt-collapsible', values: collapsibleModes, default: 'offcanvas' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  menuVariant: PropDef<(typeof menuVariants)[number]>;\n  type: PropDef<(typeof types)[number]>;\n  side: PropDef<(typeof sides)[number]>;\n  collapsible: PropDef<(typeof collapsibleModes)[number]>;\n};\n\nexport { sidebarPropDefs }; "],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,yBAC/B,OAAS,gBAAAC,MAAoB,sBAC7B,OAAS,uBAAAC,MAA2B,8BAKpC,OAC6B,2BAA3BC,EACwB,wBAAxBC,EACgC,gCAAhCC,EAC6B,6BAA7BC,MACK,iCAGP,MAAMC,EAAQ,CAAC,IAAK,GAAG,EACjBC,EAAW,CAAC,OAAQ,UAAW,OAAO,EACtCC,EAAe,CAAC,QAAS,MAAM,EAC/BC,EAAQ,CAAC,UAAW,UAAU,EAC9BC,EAAQ,CAAC,OAAQ,OAAO,EACxBC,EAAmB,CAAC,YAAa,OAAQ,MAAM,EAE/CC,EAAkB,CACtB,GAAGb,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,YAAa,CAAE,KAAM,OAAQ,UAAW,kBAAmB,OAAQC,EAAc,QAAS,MAAO,EACjG,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,SAAU,EAC9E,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,MAAO,EAC3E,YAAa,CAAE,KAAM,OAAQ,UAAW,iBAAkB,OAAQC,EAAkB,QAAS,WAAY,EACzG,GAAGX,EACH,GAAGC,CACL",
+  "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "baseMenuContentPropDefs", "baseMenuItemPropDefs", "baseMenuCheckboxItemPropDefs", "baseMenuRadioItemPropDefs", "sizes", "variants", "menuVariants", "types", "sides", "collapsibleModes", "sidebarPropDefs"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/src/components/_internal/base-button.css

@@ -27,18 +27,11 @@
     cursor: wait;
   }
 
-  /* Scale animation on press for all button variants */
-  &:where(:active:not([data-disabled], [data-state='open'])) {
-    transform: scale(0.98);
-  }
+  /* Removed scale animation on press - keeping transition for other effects */
 
-  /* Reduced motion support for transforms */
+  /* Reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     transition: none;
-
-    &:where(:active:not([data-disabled], [data-state='open'])) {
-      transform: none;
-    }
   }
 
   height: var(--base-button-height);

package/src/components/_internal/base-menu.css

@@ -123,8 +123,8 @@
 
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--space-4);
-          height: var(--space-4);
+          width: calc(var(--space-3) * 1.175);
+          height: calc(var(--space-3) * 1.175);
           flex-shrink: 0;
         }
       }

package/src/components/button.css

@@ -31,8 +31,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
       }
 
       &:where(:not(.rt-variant-ghost)) {

package/src/components/dropdown-menu.tsx

@@ -12,7 +12,7 @@ import {
   dropdownMenuRadioItemPropDefs,
 } from './dropdown-menu.props.js';
 import { Theme, useThemeContext } from './theme.js';
-import { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon } from './icons.js';
+import { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 
@@ -205,7 +205,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     >
       {children}
       <DropdownMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator">
-        <ThickCheckIcon className="rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon" />
+        <ThickDotIcon className="rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
     </DropdownMenuPrimitive.RadioItem>
   );

package/src/components/icon-button.css

@@ -16,8 +16,8 @@
     &:where(.rt-r-size-1) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
       }
     }
     &:where(.rt-r-size-2) {

package/src/components/icons.tsx

@@ -88,5 +88,22 @@ const ThickChevronRightIcon = React.forwardRef<IconElement, IconProps>((props, f
 });
 ThickChevronRightIcon.displayName = 'ThickChevronRightIcon';
 
-export { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon };
+const ThickDotIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg
+      width="9"
+      height="9"
+      viewBox="0 0 9 9"
+      fill="currentcolor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <circle cx="4.5" cy="4.5" r="2" />
+    </svg>
+  );
+});
+ThickDotIcon.displayName = 'ThickDotIcon';
+
+export { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon, ThickDotIcon };
 export type { IconProps };

package/src/components/image.tsx

@@ -28,6 +28,10 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
    * Shows a skeleton placeholder while loading instead of a blank space.
    */
   showSkeleton?: boolean;
+  /**
+   * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.
+   */
+  fadeIn?: boolean;
   /**
    * Callback fired when the image successfully loads.
    */
@@ -63,6 +67,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     src,
     placeholder,
     showSkeleton = false,
+    fadeIn = true,
     onLoad: userOnLoad,
     onError: userOnError,
     children: _children, // Extract children to exclude from imgProps
@@ -73,6 +78,9 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   const [imageLoaded, setImageLoaded] = React.useState(false);
   const [imageError, setImageError] = React.useState(false);
   const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);
+  
+  // Ref to check if image is already loaded (for cached images)
+  const imgRef = React.useRef<HTMLImageElement>(null);
 
   // Handle image load - moved to top to avoid conditional hook call
   const handleLoad = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
@@ -90,6 +98,16 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     userOnError?.(event);
   }, [userOnError]);
 
+  // Check if image is already loaded (for cached images)
+  React.useEffect(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalWidth > 0) {
+      setImageLoaded(true);
+      setImageError(false);
+      setShowPlaceholder(false);
+    }
+  }, [src]);
+
   // Validate required props
   if (!src) {
     console.warn('Image component: src prop is required');
@@ -146,8 +164,8 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       loading={loading}
       style={{
         ...style,
-        opacity: imageLoaded ? 1 : 0,
-        transition: 'opacity 0.3s ease-out',
+        opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
       }}
       className={classNames(
         'rt-reset',
@@ -160,7 +178,14 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       onLoad={handleLoad}
       onError={handleError}
       {...imgProps}
-      ref={forwardedRef}
+      ref={(node) => {
+        imgRef.current = node;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      }}
     />
   );
 
@@ -224,8 +249,8 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
                 ...style, 
                 position: 'relative', 
                 zIndex: 1,
-                opacity: imageLoaded ? 1 : 0,
-                transition: 'opacity 0.3s ease-out',
+                opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
               }}
               className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
               alt={alt}
@@ -233,7 +258,14 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
               onLoad={handleLoad}
               onError={handleError}
               {...imgProps}
-              ref={forwardedRef}
+              ref={(node) => {
+                imgRef.current = node;
+                if (typeof forwardedRef === 'function') {
+                  forwardedRef(node);
+                } else if (forwardedRef) {
+                  forwardedRef.current = node;
+                }
+              }}
             />
           </>
         ),
@@ -290,8 +322,8 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
             ...style, 
             position: 'relative', 
             zIndex: 1,
-            opacity: imageLoaded ? 1 : 0,
-            transition: 'opacity 0.3s ease-out',
+            opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
           }}
           className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
           alt={alt}
@@ -299,7 +331,14 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
           onLoad={handleLoad}
           onError={handleError}
           {...imgProps}
-          ref={forwardedRef}
+          ref={(node) => {
+            imgRef.current = node;
+            if (typeof forwardedRef === 'function') {
+              forwardedRef(node);
+            } else if (forwardedRef) {
+              forwardedRef.current = node;
+            }
+          }}
         />
       </div>
     );