{"version":3,"file":"sidebar-group.cjs","sources":["../../../components/sidebar/sidebar-group.tsx"],"sourcesContent":["'use client';\n\nimport { Accordion as AccordionPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode, useCallback, useState } from 'react';\nimport { ChevronDownIcon } from '~/icons';\nimport { Flex } from '../flex';\nimport styles from './sidebar.module.css';\nimport { SidebarLeadingVisual } from './sidebar-leading-visual';\nimport { useSidebarSafe } from './sidebar-root';\nimport { SidebarTrailingVisual } from './sidebar-trailing-visual';\n\nexport interface SidebarNavigationGroupProps extends ComponentProps<'section'> {\n  label: string;\n  /**\n   * Renders the group as an accordion whose items can be shown or hidden.\n   * Unlike `collapsible` on the Sidebar root, this does not affect the\n   * sidebar's own collapse behavior.\n   */\n  collapsible?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  /** @deprecated Every key here has an equivalent `[data-slot]` — see the Slots table in the Sidebar docs. */\n  classNames?: {\n    /** @deprecated Use `[data-slot=\"sidebar-group-header\"]` instead. */\n    header?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-group-items\"]` instead. */\n    items?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-group-label\"]` instead. */\n    label?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-leading-icon\"]` instead. */\n    icon?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-group-trigger\"]` instead. */\n    trigger?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-group-chevron\"]` instead. */\n    chevron?: string;\n    /** @deprecated Use `[data-slot=\"sidebar-trailing-icon\"]` instead. */\n    trailingIcon?: string;\n  };\n}\n\nexport function SidebarNavigationGroup({\n  className,\n  label,\n  collapsible = false,\n  open: providedOpen,\n  defaultOpen = true,\n  onOpenChange,\n  leadingIcon,\n  trailingIcon,\n  classNames,\n  children,\n  ...props\n}: SidebarNavigationGroupProps) {\n  const { isCollapsed } = useSidebarSafe();\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = isCollapsed || (providedOpen ?? internalOpen);\n\n  const handleOpenChange = useCallback(\n    (value: unknown[]) => {\n      if (isCollapsed) return;\n      const nextOpen = value.length > 0;\n      setInternalOpen(nextOpen);\n      onOpenChange?.(nextOpen);\n    },\n    [isCollapsed, onOpenChange]\n  );\n\n  const labelContent = (\n    <>\n      <SidebarLeadingVisual\n        leadingIcon={leadingIcon}\n        className={classNames?.icon}\n        render={<span />}\n      />\n      <span\n        className={cx(styles['nav-group-label'], classNames?.label)}\n        data-slot='sidebar-group-label'\n      >\n        {label}\n      </span>\n    </>\n  );\n\n  const items = (\n    <Flex\n      direction='column'\n      className={cx(styles['nav-group-items'], classNames?.items)}\n      role='list'\n      data-slot='sidebar-group-items'\n    >\n      {children}\n    </Flex>\n  );\n\n  return (\n    <section\n      className={cx(styles['nav-group'], className)}\n      // listitem (not the section's implicit region) so groups are valid\n      // children of Sidebar.Main's list, mirroring ul > li > ul nesting.\n      role='listitem'\n      aria-label={label}\n      data-slot='sidebar-group'\n      {...props}\n    >\n      {collapsible ? (\n        <AccordionPrimitive.Root\n          className={styles['nav-group-accordion']}\n          multiple\n          value={isOpen ? [true] : []}\n          onValueChange={handleOpenChange}\n        >\n          <AccordionPrimitive.Item\n            value={true}\n            className={styles['nav-group-accordion-item']}\n          >\n            <AccordionPrimitive.Header\n              className={cx(styles['nav-group-header'], classNames?.header)}\n              data-slot='sidebar-group-header'\n            >\n              <AccordionPrimitive.Trigger\n                className={cx(styles['nav-group-trigger'], classNames?.trigger)}\n                data-slot='sidebar-group-trigger'\n              >\n                {labelContent}\n                <ChevronDownIcon\n                  className={cx(\n                    styles['nav-group-chevron'],\n                    classNames?.chevron\n                  )}\n                  aria-hidden='true'\n                  data-slot='sidebar-group-chevron'\n                />\n              </AccordionPrimitive.Trigger>\n              <SidebarTrailingVisual\n                trailingIcon={trailingIcon}\n                className={classNames?.trailingIcon}\n              />\n            </AccordionPrimitive.Header>\n            <AccordionPrimitive.Panel\n              className={styles['nav-group-panel']}\n              data-slot='sidebar-group-panel'\n            >\n              {items}\n            </AccordionPrimitive.Panel>\n          </AccordionPrimitive.Item>\n        </AccordionPrimitive.Root>\n      ) : (\n        <>\n          <Flex\n            align='center'\n            gap={3}\n            className={cx(\n              styles['nav-group-header'],\n              trailingIcon && styles['nav-group-header-with-trailing'],\n              classNames?.header\n            )}\n            data-slot='sidebar-group-header'\n          >\n            {labelContent}\n            <SidebarTrailingVisual\n              trailingIcon={trailingIcon}\n              className={classNames?.trailingIcon}\n            />\n          </Flex>\n          {items}\n        </>\n      )}\n    </section>\n  );\n}\n\nSidebarNavigationGroup.displayName = 'Sidebar.Group';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4CgB;AAad;;;AAIA;AAEI;;AACA;;AAEA;AACF;AAIF;AAgBA;AAWA;;;;AA2EF;AAEA;;"}