jaci-ui 0.7.0 → 0.9.0

package/dist/components/select/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","names":["select","BaseSelect","withRecipeClassName","cx"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\nconst SelectAuxContext = createContext<{ clear: () => void; disabled: boolean } | null>(null);\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n  loading?: boolean;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  defaultValue,\n  disabled = false,\n  loading: _loading,\n  multiple,\n  onValueChange,\n  size = \"md\",\n  value: controlledValue,\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(\n    defaultValue ?? (multiple ? [] : null),\n  );\n  const value = controlledValue === undefined ? uncontrolledValue : controlledValue;\n  const clear = () => {\n    const nextValue = multiple ? [] : null;\n    if (controlledValue === undefined) setUncontrolledValue(nextValue);\n    onValueChange?.(nextValue as never, undefined as never);\n  };\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <SelectAuxContext.Provider value={{ clear, disabled }}>\n        <BaseSelect.Root\n          {...props}\n          disabled={disabled}\n          defaultValue={undefined}\n          multiple={multiple}\n          onValueChange={(nextValue, details) => {\n            if (controlledValue === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue, details);\n          }}\n          value={value as SelectRootProps<Value, Multiple>[\"value\"]}\n        />\n      </SelectAuxContext.Provider>\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const SelectPortal = BaseSelect.Portal;\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport interface SelectClearProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const SelectClear = forwardRef<HTMLButtonElement, SelectClearProps>(function SelectClear(\n  { children = \"×\", className, ...props },\n  ref,\n) {\n  const context = useContext(SelectAuxContext);\n  const styles = useSelectStyles();\n  return (\n    <button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      className={cx(styles.clear, className)}\n      data-slot=\"select-clear\"\n      disabled={props.disabled || context?.disabled}\n      onClick={(event) => {\n        context?.clear();\n        props.onClick?.(event);\n      }}\n      ref={ref}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nexport type SelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectEmpty = forwardRef<HTMLDivElement, SelectEmptyProps>(function SelectEmpty(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      className={cx(useSelectStyles().empty, className)}\n      data-slot=\"select-empty\"\n      ref={ref}\n    />\n  );\n});\nexport type SelectLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectLoading = forwardRef<HTMLDivElement, SelectLoadingProps>(function SelectLoading(\n  { children = \"Loading…\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().loading, className)}\n      data-slot=\"select-loading\"\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\nexport type SelectStatusProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectStatus = forwardRef<HTMLDivElement, SelectStatusProps>(function SelectStatus(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().status, className)}\n      data-slot=\"select-status\"\n      ref={ref}\n    />\n  );\n});\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n  Clear: SelectClear,\n  Empty: SelectEmpty,\n  Loading: SelectLoading,\n  Status: SelectStatus,\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.cjs","names":["select","BaseSelect","withRecipeClassName","useThemePortalProps","cx"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\nconst SelectAuxContext = createContext<{ clear: () => void; disabled: boolean } | null>(null);\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n  loading?: boolean;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  defaultValue,\n  disabled = false,\n  loading: _loading,\n  multiple,\n  onValueChange,\n  size = \"md\",\n  value: controlledValue,\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(\n    defaultValue ?? (multiple ? [] : null),\n  );\n  const value = controlledValue === undefined ? uncontrolledValue : controlledValue;\n  const clear = () => {\n    const nextValue = multiple ? [] : null;\n    if (controlledValue === undefined) setUncontrolledValue(nextValue);\n    onValueChange?.(nextValue as never, undefined as never);\n  };\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <SelectAuxContext.Provider value={{ clear, disabled }}>\n        <BaseSelect.Root\n          {...props}\n          disabled={disabled}\n          defaultValue={undefined}\n          multiple={multiple}\n          onValueChange={(nextValue, details) => {\n            if (controlledValue === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue, details);\n          }}\n          value={value as SelectRootProps<Value, Multiple>[\"value\"]}\n        />\n      </SelectAuxContext.Provider>\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport function SelectPortal(props: ComponentPropsWithoutRef<typeof BaseSelect.Portal>) {\n  return <BaseSelect.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport interface SelectClearProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const SelectClear = forwardRef<HTMLButtonElement, SelectClearProps>(function SelectClear(\n  { children = \"×\", className, ...props },\n  ref,\n) {\n  const context = useContext(SelectAuxContext);\n  const styles = useSelectStyles();\n  return (\n    <button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      className={cx(styles.clear, className)}\n      data-slot=\"select-clear\"\n      disabled={props.disabled || context?.disabled}\n      onClick={(event) => {\n        context?.clear();\n        props.onClick?.(event);\n      }}\n      ref={ref}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nexport type SelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectEmpty = forwardRef<HTMLDivElement, SelectEmptyProps>(function SelectEmpty(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      className={cx(useSelectStyles().empty, className)}\n      data-slot=\"select-empty\"\n      ref={ref}\n    />\n  );\n});\nexport type SelectLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectLoading = forwardRef<HTMLDivElement, SelectLoadingProps>(function SelectLoading(\n  { children = \"Loading…\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().loading, className)}\n      data-slot=\"select-loading\"\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\nexport type SelectStatusProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectStatus = forwardRef<HTMLDivElement, SelectStatusProps>(function SelectStatus(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().status, className)}\n      data-slot=\"select-status\"\n      ref={ref}\n    />\n  );\n});\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n  Clear: SelectClear,\n  Empty: SelectEmpty,\n  Loading: SelectLoading,\n  Status: SelectStatus,\n};\n"],"mappings":"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"}

package/dist/components/select/select.d.cts

@@ -27,7 +27,7 @@ type SelectIconProps = ComponentPropsWithoutRef<typeof Select.Icon>;
 /** A small chevron that rotates while the popup is open. */
 declare const SelectIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** Preserves Base UI's optional portal container and mount controls. */
-declare const SelectPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function SelectPortal(props: ComponentPropsWithoutRef<typeof Select.Portal>): import("react").JSX.Element;
 type SelectPositionerProps = ComponentPropsWithoutRef<typeof Select.Positioner>;
 declare const SelectPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type SelectPopupProps = ComponentPropsWithoutRef<typeof Select.Popup>;
@@ -69,7 +69,7 @@ declare const Select$1: {
   Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Value: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof SelectPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   List: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/select/select.d.ts

@@ -27,7 +27,7 @@ type SelectIconProps = ComponentPropsWithoutRef<typeof Select.Icon>;
 /** A small chevron that rotates while the popup is open. */
 declare const SelectIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** Preserves Base UI's optional portal container and mount controls. */
-declare const SelectPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function SelectPortal(props: ComponentPropsWithoutRef<typeof Select.Portal>): import("react").JSX.Element;
 type SelectPositionerProps = ComponentPropsWithoutRef<typeof Select.Positioner>;
 declare const SelectPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type SelectPopupProps = ComponentPropsWithoutRef<typeof Select.Popup>;
@@ -69,7 +69,7 @@ declare const Select$1: {
   Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Value: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof SelectPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   List: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/select/select.js

@@ -2,6 +2,7 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { withRecipeClassName } from "../base-ui.js";
 import { select } from "../../styled-system/recipes/select.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { createContext, forwardRef, useContext, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
@@ -80,7 +81,9 @@ const SelectIcon = forwardRef(function SelectIcon({ children = "⌄", className,
 	});
 });
 /** Preserves Base UI's optional portal container and mount controls. */
-const SelectPortal = Select.Portal;
+function SelectPortal(props) {
+	return /* @__PURE__ */ jsx(Select.Portal, { ...useThemePortalProps(props) });
+}
 const SelectPositioner = forwardRef(function SelectPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Select.Positioner, {
 		...props,

package/dist/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["SelectRoot","BaseSelect","Select"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\nconst SelectAuxContext = createContext<{ clear: () => void; disabled: boolean } | null>(null);\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n  loading?: boolean;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  defaultValue,\n  disabled = false,\n  loading: _loading,\n  multiple,\n  onValueChange,\n  size = \"md\",\n  value: controlledValue,\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(\n    defaultValue ?? (multiple ? [] : null),\n  );\n  const value = controlledValue === undefined ? uncontrolledValue : controlledValue;\n  const clear = () => {\n    const nextValue = multiple ? [] : null;\n    if (controlledValue === undefined) setUncontrolledValue(nextValue);\n    onValueChange?.(nextValue as never, undefined as never);\n  };\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <SelectAuxContext.Provider value={{ clear, disabled }}>\n        <BaseSelect.Root\n          {...props}\n          disabled={disabled}\n          defaultValue={undefined}\n          multiple={multiple}\n          onValueChange={(nextValue, details) => {\n            if (controlledValue === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue, details);\n          }}\n          value={value as SelectRootProps<Value, Multiple>[\"value\"]}\n        />\n      </SelectAuxContext.Provider>\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const SelectPortal = BaseSelect.Portal;\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport interface SelectClearProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const SelectClear = forwardRef<HTMLButtonElement, SelectClearProps>(function SelectClear(\n  { children = \"×\", className, ...props },\n  ref,\n) {\n  const context = useContext(SelectAuxContext);\n  const styles = useSelectStyles();\n  return (\n    <button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      className={cx(styles.clear, className)}\n      data-slot=\"select-clear\"\n      disabled={props.disabled || context?.disabled}\n      onClick={(event) => {\n        context?.clear();\n        props.onClick?.(event);\n      }}\n      ref={ref}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nexport type SelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectEmpty = forwardRef<HTMLDivElement, SelectEmptyProps>(function SelectEmpty(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      className={cx(useSelectStyles().empty, className)}\n      data-slot=\"select-empty\"\n      ref={ref}\n    />\n  );\n});\nexport type SelectLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectLoading = forwardRef<HTMLDivElement, SelectLoadingProps>(function SelectLoading(\n  { children = \"Loading…\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().loading, className)}\n      data-slot=\"select-loading\"\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\nexport type SelectStatusProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectStatus = forwardRef<HTMLDivElement, SelectStatusProps>(function SelectStatus(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().status, className)}\n      data-slot=\"select-status\"\n      ref={ref}\n    />\n  );\n});\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n  Clear: SelectClear,\n  Empty: SelectEmpty,\n  Loading: SelectLoading,\n  Status: SelectStatus,\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["SelectRoot","BaseSelect","Select"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\nconst SelectAuxContext = createContext<{ clear: () => void; disabled: boolean } | null>(null);\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n  loading?: boolean;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  defaultValue,\n  disabled = false,\n  loading: _loading,\n  multiple,\n  onValueChange,\n  size = \"md\",\n  value: controlledValue,\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(\n    defaultValue ?? (multiple ? [] : null),\n  );\n  const value = controlledValue === undefined ? uncontrolledValue : controlledValue;\n  const clear = () => {\n    const nextValue = multiple ? [] : null;\n    if (controlledValue === undefined) setUncontrolledValue(nextValue);\n    onValueChange?.(nextValue as never, undefined as never);\n  };\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <SelectAuxContext.Provider value={{ clear, disabled }}>\n        <BaseSelect.Root\n          {...props}\n          disabled={disabled}\n          defaultValue={undefined}\n          multiple={multiple}\n          onValueChange={(nextValue, details) => {\n            if (controlledValue === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue, details);\n          }}\n          value={value as SelectRootProps<Value, Multiple>[\"value\"]}\n        />\n      </SelectAuxContext.Provider>\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport function SelectPortal(props: ComponentPropsWithoutRef<typeof BaseSelect.Portal>) {\n  return <BaseSelect.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport interface SelectClearProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const SelectClear = forwardRef<HTMLButtonElement, SelectClearProps>(function SelectClear(\n  { children = \"×\", className, ...props },\n  ref,\n) {\n  const context = useContext(SelectAuxContext);\n  const styles = useSelectStyles();\n  return (\n    <button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      className={cx(styles.clear, className)}\n      data-slot=\"select-clear\"\n      disabled={props.disabled || context?.disabled}\n      onClick={(event) => {\n        context?.clear();\n        props.onClick?.(event);\n      }}\n      ref={ref}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nexport type SelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectEmpty = forwardRef<HTMLDivElement, SelectEmptyProps>(function SelectEmpty(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      className={cx(useSelectStyles().empty, className)}\n      data-slot=\"select-empty\"\n      ref={ref}\n    />\n  );\n});\nexport type SelectLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectLoading = forwardRef<HTMLDivElement, SelectLoadingProps>(function SelectLoading(\n  { children = \"Loading…\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().loading, className)}\n      data-slot=\"select-loading\"\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\nexport type SelectStatusProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectStatus = forwardRef<HTMLDivElement, SelectStatusProps>(function SelectStatus(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().status, className)}\n      data-slot=\"select-status\"\n      ref={ref}\n    />\n  );\n});\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n  Clear: SelectClear,\n  Empty: SelectEmpty,\n  Loading: SelectLoading,\n  Status: SelectStatus,\n};\n"],"mappings":";;;;;;;;;AAcA,MAAM,oBAAoB,cAA0B,IAAI;AACxD,MAAM,mBAAmB,cAA+D,IAAI;AAE5F,SAAS,kBAAkB;CACzB,OAAO,OAAO,EAAE,MAAM,WAAW,iBAAiB,EAAE,CAAC;AACvD;AAeA,SAAgBA,aAA0E,EACxF,cACA,WAAW,OACX,SAAS,UACT,UACA,eACA,OAAO,MACP,OAAO,iBACP,GAAG,SACgC;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,iBAAiB,WAAW,CAAC,IAAI,KACnC;CACA,MAAM,QAAQ,oBAAoB,KAAA,IAAY,oBAAoB;CAClE,MAAM,cAAc;EAClB,MAAM,YAAY,WAAW,CAAC,IAAI;EAClC,IAAI,oBAAoB,KAAA,GAAW,qBAAqB,SAAS;EACjE,gBAAgB,WAAoB,KAAA,CAAkB;CACxD;CACA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,iBAAiB,UAAlB;GAA2B,OAAO;IAAE;IAAO;GAAS;aAClD,oBAACC,OAAW,MAAZ;IACE,GAAI;IACM;IACV,cAAc,KAAA;IACJ;IACV,gBAAgB,WAAW,YAAY;KACrC,IAAI,oBAAoB,KAAA,GAAW,qBAAqB,SAAS;KACjE,gBAAgB,WAAW,OAAO;IACpC;IACO;GACR,CAAA;EACwB,CAAA;CACD,CAAA;AAEhC;;AAKA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,OAAW,OAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,OAAO,SAAS;EACjE,aAAU;CACX,CAAA;AAEL,CAAC;;AAKD,MAAa,gBAAgB,WAC3B,SAAS,cAAc,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACA,OAAW,SAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,SAAS,SAAS;EACnE,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;;AAKA,MAAa,cAAc,WAA8C,SAAS,YAChF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,OAAW,OAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,OAAO,SAAS;EACjE,aAAU;CACX,CAAA;AAEL,CAAC;;AAKD,MAAa,aAAa,WAA6C,SAAS,WAC9E,EAAE,WAAW,KAAK,WAAW,GAAG,SAChC,KACA;CACA,OACE,oBAACA,OAAW,MAAZ;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,MAAM,SAAS;EAChE,aAAU;EAET;CACc,CAAA;AAErB,CAAC;;AAGD,SAAgB,aAAa,OAA2D;CACtF,OAAO,oBAACA,OAAW,QAAZ,EAAmB,GAAI,oBAAoB,KAAK,EAAI,CAAA;AAC7D;AAIA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACA,OAAW,YAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,YAAY,SAAS;EACtE,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,OAAW,OAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,OAAO,SAAS;EACjE,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,OAAW,MAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,MAAM,SAAS;EAChE,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,aAAa,WAAyC,SAAS,WAC1E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,OAAW,MAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,MAAM,SAAS;EAChE,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,OAAW,UAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,UAAU,SAAS;EACpE,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,sBAAsB,WACjC,SAAS,oBAAoB,EAAE,WAAW,KAAK,WAAW,GAAG,SAAS,KAAK;CACzE,OACE,oBAACA,OAAW,eAAZ;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,eAAe,SAAS;EACzE,aAAU;EAET;CACuB,CAAA;AAE9B,CACF;AAIA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,OAAW,OAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,OAAO,SAAS;EACjE,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACA,OAAW,YAAZ;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,gBAAgB,CAAC,CAAC,YAAY,SAAS;EACtE,aAAU;CACX,CAAA;AAEL,CACF;AAWA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,cAAc,cAAc,GAAG,SAAS,KAAK;CACjF,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAW,GAAG,gBAAgB,CAAC,CAAC,WAAW,SAAS;EACpD,oBAAkB;EAClB,aAAU;CACX,CAAA;AAEL,CACF;AAKA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,WAAW,KAAK,WAAW,GAAG,SAChC,KACA;CACA,MAAM,UAAU,WAAW,gBAAgB;CAC3C,MAAM,SAAS,gBAAgB;CAC/B,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,cAAY,MAAM,iBAAiB;EACnC,WAAW,GAAG,OAAO,OAAO,SAAS;EACrC,aAAU;EACV,UAAU,MAAM,YAAY,SAAS;EACrC,UAAU,UAAU;GAClB,SAAS,MAAM;GACf,MAAM,UAAU,KAAK;EACvB;EACK;EACL,MAAK;EAEJ;CACK,CAAA;AAEZ,CAAC;AAGD,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,gBAAgB,CAAC,CAAC,OAAO,SAAS;EAChD,aAAU;EACL;CACN,CAAA;AAEL,CAAC;AAED,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,YAAY,WAAW,GAAG,SACvC,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,gBAAgB,CAAC,CAAC,SAAS,SAAS;EAClD,aAAU;EACL;EAEJ;CACE,CAAA;AAET,CAAC;AAED,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,gBAAgB,CAAC,CAAC,QAAQ,SAAS;EACjD,aAAU;EACL;CACN,CAAA;AAEL,CAAC;AAED,MAAaC,WAAS;CACpB,MAAMF;CACN,OAAO;CACP,SAAS;CACT,OAAO;CACP,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,eAAe;CACf,OAAO;CACP,YAAY;CACZ,WAAW;CACX,OAAO;CACP,OAAO;CACP,SAAS;CACT,QAAQ;AACV"}

package/dist/components/sidebar/sidebar.cjs

@@ -2,6 +2,7 @@
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_base_ui = require("../base-ui.cjs");
 const require_sidebar = require("../../styled-system/recipes/sidebar.cjs");
+const require_theme_scope = require("../../theme/theme-scope.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
@@ -45,6 +46,7 @@ const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, class
 		toggle
 	]);
 	const styles = require_sidebar.sidebar({ open });
+	const scopedPortalProps = require_theme_scope.useThemePortalProps({});
 	const surface = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 		...props,
 		ref,
@@ -67,23 +69,26 @@ const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, class
 				}
 				setOpen(nextOpen);
 			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
-				className: require_cx.cx(styles.backdrop),
-				"data-jaci-component": "sidebar",
-				"data-slot": "sidebar-backdrop"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
-				className: require_cx.cx(styles.viewport),
-				"data-slot": "sidebar-viewport",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
-					"aria-label": props["aria-label"] ?? "Sidebar navigation",
-					className: require_cx.cx(styles.popup),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, {
+				...scopedPortalProps,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+					className: require_cx.cx(styles.backdrop),
 					"data-jaci-component": "sidebar",
-					"data-slot": "sidebar-popup",
-					finalFocus: restoreFocus,
-					initialFocus: true,
-					children: surface
-				})
-			})] })
+					"data-slot": "sidebar-backdrop"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+					className: require_cx.cx(styles.viewport),
+					"data-slot": "sidebar-viewport",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+						"aria-label": props["aria-label"] ?? "Sidebar navigation",
+						className: require_cx.cx(styles.popup),
+						"data-jaci-component": "sidebar",
+						"data-slot": "sidebar-popup",
+						finalFocus: restoreFocus,
+						initialFocus: true,
+						children: surface
+					})
+				})]
+			})
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContext.Provider, {
@@ -91,7 +96,9 @@ const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, class
 		children: surface
 	});
 });
-const SidebarPortal = _base_ui_react_dialog.Dialog.Portal;
+function SidebarPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const SidebarBackdrop = (0, react.forwardRef)(function SidebarBackdrop({ className, ...props }, ref) {
 	const { open } = useSidebar();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {

package/dist/components/sidebar/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.cjs","names":["sidebar","cx","BaseDialog","withRecipeClassName"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport const SidebarPortal: typeof BaseDialog.Portal = BaseDialog.Portal;\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.cjs","names":["sidebar","useThemePortalProps","cx","BaseDialog","withRecipeClassName"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n  const scopedPortalProps = useThemePortalProps({});\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal {...scopedPortalProps}>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport function SidebarPortal(props: SidebarPortalProps) {\n  return <BaseDialog.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAM,kBAAA,GAAA,MAAA,cAAA,CAA2D,IAAI;;;;;;AAOrE,SAAgB,aAAa;CAC3B,MAAM,WAAA,GAAA,MAAA,WAAA,CAAqB,cAAc;CAEzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,0DAA0D;CAG5E,OAAO;AACT;AAEA,SAAS,mBAAmB;CAC1B,MAAM,EAAE,SAAS,WAAW;CAC5B,OAAOA,gBAAAA,QAAQ,EAAE,KAAK,CAAC;AACzB;;;;AAyBA,MAAa,eAAA,GAAA,MAAA,WAAA,CAAwD,SAAS,YAC5E,EACE,UACA,WACA,gBAAgB,MAChB,sBAAsB,MACtB,cAAc,MACd,QAAQ,MACR,OAAO,UACP,cACA,MAAM,gBACN,eAAe,MACf,GAAG,SAEL,KACA;CACA,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,SAAA,CAAgC,WAAW;CACpE,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,OAAO,kBAAkB;CAE/B,MAAM,WAAA,GAAA,MAAA,YAAA,EACH,aAAsB;EACrB,IAAI,CAAC,cACH,oBAAoB,QAAQ;EAG9B,eAAe,QAAQ;CACzB,GACA,CAAC,cAAc,YAAY,CAC7B;CAEA,MAAM,UAAA,GAAA,MAAA,YAAA,OAA2B;EAC/B,QAAQ,CAAC,IAAI;CACf,GAAG,CAAC,MAAM,OAAO,CAAC;CAElB,MAAM,WAAA,GAAA,MAAA,QAAA,QACG;EAAE;EAAM;EAAS;CAAO,IAC/B;EAAC;EAAM;EAAS;CAAM,CACxB;CACA,MAAM,SAASA,gBAAAA,QAAQ,EAAE,KAAK,CAAC;CAC/B,MAAM,oBAAoBC,oBAAAA,oBAAoB,CAAC,CAAC;CAEhD,MAAM,UACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,uBAAoB;EACpB,aAAW;EACX,aAAU;EACV,cAAY,OAAO,SAAS;EAE3B;CACI,CAAA;CAGT,IAAI,SAAS,WACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAe,UAAhB;EAAyB,OAAO;YAC9B,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAW,MAAZ;GACQ;GACC;GACP,eAAe,UAAU,YAAY;IACnC,IACE,CAAC,aACC,CAAC,iBAAiB,QAAQ,WAAW,gBACpC,CAAC,uBAAuB,QAAQ,WAAW,kBAC9C;KACA,QAAQ,OAAO;KACf;IACF;IACA,QAAQ,QAAQ;GAClB;aAEA,iBAAA,GAAA,kBAAA,KAAA,CAACA,sBAAAA,OAAW,QAAZ;IAAmB,GAAI;cAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,UAAZ;KACE,WAAWD,WAAAA,GAAG,OAAO,QAAQ;KAC7B,uBAAoB;KACpB,aAAU;IACX,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAW,UAAZ;KAAqB,WAAWD,WAAAA,GAAG,OAAO,QAAQ;KAAG,aAAU;eAC7D,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAW,OAAZ;MACE,cAAY,MAAM,iBAAiB;MACnC,WAAWD,WAAAA,GAAG,OAAO,KAAK;MAC1B,uBAAoB;MACpB,aAAU;MACV,YAAY;MACZ,cAAA;gBAEC;KACe,CAAA;IACC,CAAA,CACJ;;EACJ,CAAA;CACM,CAAA;CAI7B,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAe,UAAhB;EAAyB,OAAO;YAAU;CAAiC,CAAA;AACpF,CAAC;AAGD,SAAgB,cAAc,OAA2B;CACvD,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAW,QAAZ,EAAmB,GAAIF,oBAAAA,oBAAoB,KAAK,EAAI,CAAA;AAC7D;AAGA,MAAa,mBAAA,GAAA,MAAA,WAAA,CACX,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,MAAM,EAAE,SAAS,WAAW;CAC5B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,sBAAAA,OAAW,UAAZ;EACE,GAAI;EACJ,WAAWC,gBAAAA,oBAAoBJ,gBAAAA,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,SAAS;EACpE,aAAU;EACL;CACN,CAAA;AAEL,CACF;;;;AAOA,MAAa,iBAAA,GAAA,MAAA,WAAA,CACX,SAAS,cACP,EAAE,cAAc,WAAW,UAAU,WAAW,SAAS,OAAO,UAAU,GAAG,SAC7E,KACA;CACA,MAAM,EAAE,MAAM,WAAW,WAAW;CACpC,MAAM,SAAS,iBAAiB;CAEhC,MAAM,eAAe,UAAyC;EAC5D,UAAU,KAAK;EAEf,IAAI,CAAC,MAAM,kBACT,OAAO;CAEX;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACJ,iBAAe;EACf,cAAY,cAAc,OAAO,qBAAqB;EACtD,WAAWE,WAAAA,GAAG,OAAO,QAAQ,SAAS;EACtC,aAAU;EACV,SAAS;EACJ;EACC;YAEL,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,eAAY;aAAQ,OAAO,MAAM;EAAU,CAAA;CACxD,CAAA;AAEZ,CACF;AAIA,MAAa,iBAAA,GAAA,MAAA,WAAA,CAA4D,SAAS,cAChF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAG,OAAO,QAAQ,SAAS;EACtC,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,kBAAA,GAAA,MAAA,WAAA,CAA8D,SAAS,eAClF,EAAE,cAAc,WAAW,WAAW,GAAG,SACzC,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,cAAY,aAAa;EACpB;EACL,WAAWA,WAAAA,GAAG,OAAO,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,iBAAA,GAAA,MAAA,WAAA,CAA4D,SAAS,cAChF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAG,OAAO,QAAQ,SAAS;EACtC,aAAU;CACX,CAAA;AAEL,CAAC;;;;;;AAYD,MAAa,eAAA,GAAA,MAAA,WAAA,CAA8D,SAAS,YAClF,EAAE,gBAAgB,aAAa,SAAS,OAAO,WAAW,GAAG,SAC7D,KACA;CACA,MAAM,EAAE,SAAS,WAAW;CAC5B,MAAM,SAASF,gBAAAA,QAAQ;EAAE;EAAQ;CAAK,CAAC;CAEvC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,GAAI;EACJ,gBAAc,gBAAgB,SAAS,SAAS,KAAA;EAC3C;EACL,WAAWE,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,eAAa,UAAU,KAAA;EACvB,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA8D,SAAS,aAClF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,GAAI;EAAY;EAAK,WAAWA,WAAAA,GAAG,OAAO,OAAO,SAAS;EAAG,aAAU;CAAiB,CAAA;AAElG,CAAC;AAED,MAAa,UAAU;CACrB,MAAM;CACN,QAAQ;CACR,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;AACT"}

package/dist/components/sidebar/sidebar.d.cts

@@ -38,6 +38,8 @@ interface SidebarRootProps extends ComponentPropsWithoutRef<"aside"> {
  * The sidebar container. It supports both controlled and uncontrolled state.
  */
 declare const SidebarRoot: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
+type SidebarPortalProps = ComponentPropsWithoutRef<typeof Dialog.Portal>;
+declare function SidebarPortal(props: SidebarPortalProps): import("react").JSX.Element;
 type SidebarToggleProps = ComponentPropsWithoutRef<"button">;
 /**
  * A floating, accessible control that expands or collapses the sidebar.
@@ -63,7 +65,7 @@ type SidebarLabelProps = ComponentPropsWithoutRef<"span">;
 declare const SidebarLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare const Sidebar: {
   Root: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof SidebarPortal;
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -73,5 +75,5 @@ declare const Sidebar: {
   Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
+export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarPortal, SidebarPortalProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
 //# sourceMappingURL=sidebar.d.cts.map

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

@@ -38,6 +38,8 @@ interface SidebarRootProps extends ComponentPropsWithoutRef<"aside"> {
  * The sidebar container. It supports both controlled and uncontrolled state.
  */
 declare const SidebarRoot: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
+type SidebarPortalProps = ComponentPropsWithoutRef<typeof Dialog.Portal>;
+declare function SidebarPortal(props: SidebarPortalProps): import("react").JSX.Element;
 type SidebarToggleProps = ComponentPropsWithoutRef<"button">;
 /**
  * A floating, accessible control that expands or collapses the sidebar.
@@ -63,7 +65,7 @@ type SidebarLabelProps = ComponentPropsWithoutRef<"span">;
 declare const SidebarLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare const Sidebar: {
   Root: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof SidebarPortal;
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -73,5 +75,5 @@ declare const Sidebar: {
   Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
+export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarPortal, SidebarPortalProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/components/sidebar/sidebar.js

@@ -2,6 +2,7 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { withRecipeClassName } from "../base-ui.js";
 import { sidebar } from "../../styled-system/recipes/sidebar.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
@@ -45,6 +46,7 @@ const SidebarRoot = forwardRef(function SidebarRoot({ children, className, close
 		toggle
 	]);
 	const styles = sidebar({ open });
+	const scopedPortalProps = useThemePortalProps({});
 	const surface = /* @__PURE__ */ jsx("aside", {
 		...props,
 		ref,
@@ -67,23 +69,26 @@ const SidebarRoot = forwardRef(function SidebarRoot({ children, className, close
 				}
 				setOpen(nextOpen);
 			},
-			children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
-				className: cx(styles.backdrop),
-				"data-jaci-component": "sidebar",
-				"data-slot": "sidebar-backdrop"
-			}), /* @__PURE__ */ jsx(Dialog.Viewport, {
-				className: cx(styles.viewport),
-				"data-slot": "sidebar-viewport",
-				children: /* @__PURE__ */ jsx(Dialog.Popup, {
-					"aria-label": props["aria-label"] ?? "Sidebar navigation",
-					className: cx(styles.popup),
+			children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+				...scopedPortalProps,
+				children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+					className: cx(styles.backdrop),
 					"data-jaci-component": "sidebar",
-					"data-slot": "sidebar-popup",
-					finalFocus: restoreFocus,
-					initialFocus: true,
-					children: surface
-				})
-			})] })
+					"data-slot": "sidebar-backdrop"
+				}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+					className: cx(styles.viewport),
+					"data-slot": "sidebar-viewport",
+					children: /* @__PURE__ */ jsx(Dialog.Popup, {
+						"aria-label": props["aria-label"] ?? "Sidebar navigation",
+						className: cx(styles.popup),
+						"data-jaci-component": "sidebar",
+						"data-slot": "sidebar-popup",
+						finalFocus: restoreFocus,
+						initialFocus: true,
+						children: surface
+					})
+				})]
+			})
 		})
 	});
 	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
@@ -91,7 +96,9 @@ const SidebarRoot = forwardRef(function SidebarRoot({ children, className, close
 		children: surface
 	});
 });
-const SidebarPortal = Dialog.Portal;
+function SidebarPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { ...useThemePortalProps(props) });
+}
 const SidebarBackdrop = forwardRef(function SidebarBackdrop({ className, ...props }, ref) {
 	const { open } = useSidebar();
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":["BaseDialog"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport const SidebarPortal: typeof BaseDialog.Portal = BaseDialog.Portal;\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":";;;;;;;;AAmBA,MAAM,iBAAiB,cAA0C,IAAI;;;;;;AAOrE,SAAgB,aAAa;CAC3B,MAAM,UAAU,WAAW,cAAc;CAEzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,0DAA0D;CAG5E,OAAO;AACT;AAEA,SAAS,mBAAmB;CAC1B,MAAM,EAAE,SAAS,WAAW;CAC5B,OAAO,QAAQ,EAAE,KAAK,CAAC;AACzB;;;;AAyBA,MAAa,cAAc,WAA0C,SAAS,YAC5E,EACE,UACA,WACA,gBAAgB,MAChB,sBAAsB,MACtB,cAAc,MACd,QAAQ,MACR,OAAO,UACP,cACA,MAAM,gBACN,eAAe,MACf,GAAG,SAEL,KACA;CACA,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,OAAO,kBAAkB;CAE/B,MAAM,UAAU,aACb,aAAsB;EACrB,IAAI,CAAC,cACH,oBAAoB,QAAQ;EAG9B,eAAe,QAAQ;CACzB,GACA,CAAC,cAAc,YAAY,CAC7B;CAEA,MAAM,SAAS,kBAAkB;EAC/B,QAAQ,CAAC,IAAI;CACf,GAAG,CAAC,MAAM,OAAO,CAAC;CAElB,MAAM,UAAU,eACP;EAAE;EAAM;EAAS;CAAO,IAC/B;EAAC;EAAM;EAAS;CAAM,CACxB;CACA,MAAM,SAAS,QAAQ,EAAE,KAAK,CAAC;CAE/B,MAAM,UACJ,oBAAC,SAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,uBAAoB;EACpB,aAAW;EACX,aAAU;EACV,cAAY,OAAO,SAAS;EAE3B;CACI,CAAA;CAGT,IAAI,SAAS,WACX,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;YAC9B,oBAACA,OAAW,MAAZ;GACQ;GACC;GACP,eAAe,UAAU,YAAY;IACnC,IACE,CAAC,aACC,CAAC,iBAAiB,QAAQ,WAAW,gBACpC,CAAC,uBAAuB,QAAQ,WAAW,kBAC9C;KACA,QAAQ,OAAO;KACf;IACF;IACA,QAAQ,QAAQ;GAClB;aAEA,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ;IACE,WAAW,GAAG,OAAO,QAAQ;IAC7B,uBAAoB;IACpB,aAAU;GACX,CAAA,GACD,oBAACA,OAAW,UAAZ;IAAqB,WAAW,GAAG,OAAO,QAAQ;IAAG,aAAU;cAC7D,oBAACA,OAAW,OAAZ;KACE,cAAY,MAAM,iBAAiB;KACnC,WAAW,GAAG,OAAO,KAAK;KAC1B,uBAAoB;KACpB,aAAU;KACV,YAAY;KACZ,cAAA;eAEC;IACe,CAAA;GACC,CAAA,CACJ,EAAA,CAAA;EACJ,CAAA;CACM,CAAA;CAI7B,OAAO,oBAAC,eAAe,UAAhB;EAAyB,OAAO;YAAU;CAAiC,CAAA;AACpF,CAAC;AAGD,MAAa,gBAA0CA,OAAW;AAGlE,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,MAAM,EAAE,SAAS,WAAW;CAC5B,OACE,oBAACA,OAAW,UAAZ;EACE,GAAI;EACJ,WAAW,oBAAoB,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,SAAS;EACpE,aAAU;EACL;CACN,CAAA;AAEL,CACF;;;;AAOA,MAAa,gBAAgB,WAC3B,SAAS,cACP,EAAE,cAAc,WAAW,UAAU,WAAW,SAAS,OAAO,UAAU,GAAG,SAC7E,KACA;CACA,MAAM,EAAE,MAAM,WAAW,WAAW;CACpC,MAAM,SAAS,iBAAiB;CAEhC,MAAM,eAAe,UAAyC;EAC5D,UAAU,KAAK;EAEf,IAAI,CAAC,MAAM,kBACT,OAAO;CAEX;CAEA,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,iBAAe;EACf,cAAY,cAAc,OAAO,qBAAqB;EACtD,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,aAAU;EACV,SAAS;EACJ;EACC;YAEL,YAAY,oBAAC,QAAD;GAAM,eAAY;aAAQ,OAAO,MAAM;EAAU,CAAA;CACxD,CAAA;AAEZ,CACF;AAIA,MAAa,gBAAgB,WAA4C,SAAS,cAChF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,iBAAiB,WAA6C,SAAS,eAClF,EAAE,cAAc,WAAW,WAAW,GAAG,SACzC,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,cAAY,aAAa;EACpB;EACL,WAAW,GAAG,OAAO,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,gBAAgB,WAA4C,SAAS,cAChF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,aAAU;CACX,CAAA;AAEL,CAAC;;;;;;AAYD,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,gBAAgB,aAAa,SAAS,OAAO,WAAW,GAAG,SAC7D,KACA;CACA,MAAM,EAAE,SAAS,WAAW;CAC5B,MAAM,SAAS,QAAQ;EAAE;EAAQ;CAAK,CAAC;CAEvC,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,gBAAc,gBAAgB,SAAS,SAAS,KAAA;EAC3C;EACL,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,eAAa,UAAU,KAAA;EACvB,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,eAAe,WAA+C,SAAS,aAClF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,iBAAiB;CAEhC,OACE,oBAAC,QAAD;EAAM,GAAI;EAAY;EAAK,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,aAAU;CAAiB,CAAA;AAElG,CAAC;AAED,MAAa,UAAU;CACrB,MAAM;CACN,QAAQ;CACR,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;AACT"}
+{"version":3,"file":"sidebar.js","names":["BaseDialog"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n  const scopedPortalProps = useThemePortalProps({});\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal {...scopedPortalProps}>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport function SidebarPortal(props: SidebarPortalProps) {\n  return <BaseDialog.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}

package/dist/components/spacer/index.d.cts

@@ -0,0 +1,2 @@
+import { Spacer, SpacerProps } from "./spacer.cjs";
+export { Spacer, type SpacerProps };

package/dist/components/spacer/index.d.ts

@@ -0,0 +1,2 @@
+import { Spacer, SpacerProps } from "./spacer.js";
+export { Spacer, type SpacerProps };