@fragments-sdk/ui 0.11.1 → 0.13.0

package/dist/components/Select/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport styles from './Select.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type SelectValue = string;\n\nexport interface SelectOption {\n  value: SelectValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  children: React.ReactNode;\n  value?: SelectValue | null;\n  defaultValue?: SelectValue;\n  onValueChange?: (value: SelectValue | null) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n}\n\nexport interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */\n  maxVisibleItems?: number;\n}\n\nexport interface SelectItemProps {\n  children: React.ReactNode;\n  value: SelectValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface SelectGroupProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface SelectGroupLabelProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Context for Select state\n// ============================================\n\ninterface SelectContextValue {\n  placeholder?: string;\n  value?: SelectValue | null;\n  itemsRef: React.MutableRefObject<Map<SelectValue, React.ReactNode>>;\n  // Version counter to trigger re-renders when items register\n  itemsVersion: number;\n  incrementItemsVersion: () => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  itemsRef: { current: new Map() },\n  itemsVersion: 0,\n  incrementItemsVersion: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n}: SelectProps) {\n  // Track current value for controlled and uncontrolled modes\n  const [internalValue, setInternalValue] = React.useState<SelectValue | null | undefined>(\n    value ?? defaultValue ?? null\n  );\n\n  // Registry for item children - allows trigger to render selected item's content\n  const itemsRef = React.useRef<Map<SelectValue, React.ReactNode>>(new Map());\n\n  // Version counter to trigger trigger re-render when items register\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const incrementItemsVersion = React.useCallback(() => {\n    setItemsVersion((v) => v + 1);\n  }, []);\n\n  // Sync internal value with controlled value\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  const handleValueChange = React.useCallback(\n    (newValue: SelectValue | null) => {\n      if (value === undefined) {\n        // Uncontrolled mode\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      itemsRef,\n      itemsVersion,\n      incrementItemsVersion,\n    }),\n    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <BaseSelect.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n      >\n        {children}\n      </BaseSelect.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps) {\n  const context = React.useContext(SelectContext);\n  const placeholderText = placeholder ?? context.placeholder;\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Get the selected item's children from the registry\n  // Note: itemsVersion in context ensures we re-render when items register\n  const selectedContent = context.value != null\n    ? context.itemsRef.current.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\n   \n  const _version = context.itemsVersion; // Force dependency on itemsVersion for re-render\n  const displayContent = selectedContent ?? (\n    placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null\n  );\n\n  return (\n    <BaseSelect.Trigger {...htmlProps} className={classes}>\n      {children ?? (\n        <>\n          <span className={styles.value}>{displayContent}</span>\n          <BaseSelect.Icon className={styles.icon}>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </>\n      )}\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectContent({\n  children,\n  className,\n  sideOffset = 4,\n  align = 'start',\n  maxVisibleItems,\n  ...htmlProps\n}: SelectContentProps) {\n  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');\n\n  const popupStyle = maxVisibleItems != null\n    ? { '--fui-select-max-items': maxVisibleItems + 0.5, ...htmlProps.style } as React.CSSProperties\n    : htmlProps.style;\n\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        className={styles.positioner}\n      >\n        <BaseSelect.Popup {...htmlProps} className={popupClasses} style={popupStyle}>\n          {children}\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nfunction SelectItem({ children, value, disabled, className }: SelectItemProps) {\n  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  // Register this item's children in the registry so the trigger can display them\n  React.useEffect(() => {\n    const items = itemsRef.current;\n    items.set(value, children);\n    // Trigger re-render of trigger to show the registered content\n    incrementItemsVersion();\n    return () => {\n      items.delete(value);\n    };\n  }, [itemsRef, incrementItemsVersion, value, children]);\n\n  return (\n    <BaseSelect.Item value={value} disabled={disabled} className={classes}>\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles.itemIndicator}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectGroup({ children, className }: SelectGroupProps) {\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n  return <BaseSelect.Group className={classes}>{children}</BaseSelect.Group>;\n}\n\nfunction SelectGroupLabel({ children, className }: SelectGroupLabelProps) {\n  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');\n  return <BaseSelect.GroupLabel className={classes}>{children}</BaseSelect.GroupLabel>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n});\n\n// Re-export individual components\nexport {\n  SelectRoot,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectGroupLabel,\n};\n"],"names":["jsx","React","BaseSelect","styles","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport styles from './Select.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type SelectValue = string;\n\nexport interface SelectOption {\n  value: SelectValue;\n  label: string;\n  disabled?: boolean;\n}\n\n/**\n * Select dropdown for choosing from a list of options.\n * @see https://usefragments.com/components/select\n */\nexport interface SelectProps {\n  children: React.ReactNode;\n  /** Controlled selected value */\n  value?: SelectValue | null;\n  /** Default value for uncontrolled usage */\n  defaultValue?: SelectValue;\n  /** Called when selection changes */\n  onValueChange?: (value: SelectValue | null) => void;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the select is non-interactive */\n  disabled?: boolean;\n  /** Whether a selection is required */\n  required?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text when no value is selected */\n  placeholder?: string;\n}\n\nexport interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */\n  maxVisibleItems?: number;\n}\n\nexport interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n  value: SelectValue;\n  disabled?: boolean;\n}\n\nexport interface SelectGroupProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport interface SelectGroupLabelProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Context for Select state\n// ============================================\n\ninterface SelectContextValue {\n  placeholder?: string;\n  value?: SelectValue | null;\n  itemsRef: React.MutableRefObject<Map<SelectValue, React.ReactNode>>;\n  // Version counter to trigger re-renders when items register\n  itemsVersion: number;\n  incrementItemsVersion: () => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  itemsRef: { current: new Map() },\n  itemsVersion: 0,\n  incrementItemsVersion: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n}: SelectProps) {\n  // Track current value for controlled and uncontrolled modes\n  const [internalValue, setInternalValue] = React.useState<SelectValue | null | undefined>(\n    value ?? defaultValue ?? null\n  );\n\n  // Registry for item children - allows trigger to render selected item's content\n  const itemsRef = React.useRef<Map<SelectValue, React.ReactNode>>(new Map());\n\n  // Version counter to trigger trigger re-render when items register\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const incrementItemsVersion = React.useCallback(() => {\n    setItemsVersion((v) => v + 1);\n  }, []);\n\n  // Sync internal value with controlled value\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  const handleValueChange = React.useCallback(\n    (newValue: SelectValue | null) => {\n      if (value === undefined) {\n        // Uncontrolled mode\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      itemsRef,\n      itemsVersion,\n      incrementItemsVersion,\n    }),\n    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <BaseSelect.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n      >\n        {children}\n      </BaseSelect.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps) {\n  const context = React.useContext(SelectContext);\n  const placeholderText = placeholder ?? context.placeholder;\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Get the selected item's children from the registry\n  // Note: itemsVersion in context ensures we re-render when items register\n  const selectedContent = context.value != null\n    ? context.itemsRef.current.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\n   \n  const _version = context.itemsVersion; // Force dependency on itemsVersion for re-render\n  const displayContent = selectedContent ?? (\n    placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null\n  );\n\n  return (\n    <BaseSelect.Trigger {...htmlProps} className={classes}>\n      {children ?? (\n        <>\n          <span className={styles.value}>{displayContent}</span>\n          <BaseSelect.Icon className={styles.icon}>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </>\n      )}\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectContent({\n  children,\n  className,\n  sideOffset = 4,\n  align = 'start',\n  maxVisibleItems,\n  ...htmlProps\n}: SelectContentProps) {\n  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');\n\n  const popupStyle = maxVisibleItems != null\n    ? { '--fui-select-max-items': maxVisibleItems + 0.5, ...htmlProps.style } as React.CSSProperties\n    : htmlProps.style;\n\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        className={styles.positioner}\n      >\n        <BaseSelect.Popup {...htmlProps} className={popupClasses} style={popupStyle}>\n          {children}\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nfunction SelectItem({ children, value, disabled, className, ...htmlProps }: SelectItemProps) {\n  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  // Register this item's children in the registry so the trigger can display them\n  React.useEffect(() => {\n    const items = itemsRef.current;\n    items.set(value, children);\n    // Trigger re-render of trigger to show the registered content\n    incrementItemsVersion();\n    return () => {\n      items.delete(value);\n      incrementItemsVersion();\n    };\n  }, [itemsRef, incrementItemsVersion, value, children]);\n\n  return (\n    <BaseSelect.Item {...htmlProps} value={value} disabled={disabled} className={classes}>\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles.itemIndicator}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectGroup({ children, className, ...htmlProps }: SelectGroupProps) {\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n  return <BaseSelect.Group {...htmlProps} className={classes}>{children}</BaseSelect.Group>;\n}\n\nfunction SelectGroupLabel({ children, className, ...htmlProps }: SelectGroupLabelProps) {\n  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');\n  return <BaseSelect.GroupLabel {...htmlProps} className={classes}>{children}</BaseSelect.GroupLabel>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n});\n\n// Re-export individual components\nexport {\n  SelectRoot,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectGroupLabel,\n};\n"],"names":["jsx","React","BaseSelect","styles","jsxs","Fragment"],"mappings":"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"}

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

@@ -5,17 +5,31 @@ export interface SelectOption {
     label: string;
     disabled?: boolean;
 }
+/**
+ * Select dropdown for choosing from a list of options.
+ * @see https://usefragments.com/components/select
+ */
 export interface SelectProps {
     children: React.ReactNode;
+    /** Controlled selected value */
     value?: SelectValue | null;
+    /** Default value for uncontrolled usage */
     defaultValue?: SelectValue;
+    /** Called when selection changes */
     onValueChange?: (value: SelectValue | null) => void;
+    /** Controlled open state */
     open?: boolean;
+    /** Default open state */
     defaultOpen?: boolean;
+    /** Called when open state changes */
     onOpenChange?: (open: boolean) => void;
+    /** Whether the select is non-interactive */
     disabled?: boolean;
+    /** Whether a selection is required */
     required?: boolean;
+    /** Form field name */
     name?: string;
+    /** Placeholder text when no value is selected */
     placeholder?: string;
 }
 export interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -29,26 +43,23 @@ export interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement>
     /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */
     maxVisibleItems?: number;
 }
-export interface SelectItemProps {
+export interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     children: React.ReactNode;
     value: SelectValue;
     disabled?: boolean;
-    className?: string;
 }
-export interface SelectGroupProps {
+export interface SelectGroupProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
-    className?: string;
 }
-export interface SelectGroupLabelProps {
+export interface SelectGroupLabelProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
-    className?: string;
 }
 declare function SelectRoot({ children, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, disabled, required, name, placeholder, }: SelectProps): import("react/jsx-runtime").JSX.Element;
 declare function SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function SelectContent({ children, className, sideOffset, align, maxVisibleItems, ...htmlProps }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
-declare function SelectItem({ children, value, disabled, className }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
-declare function SelectGroup({ children, className }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
-declare function SelectGroupLabel({ children, className }: SelectGroupLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ children, value, disabled, className, ...htmlProps }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ children, className, ...htmlProps }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroupLabel({ children, className, ...htmlProps }: SelectGroupLabelProps): import("react/jsx-runtime").JSX.Element;
 export declare const Select: typeof SelectRoot & {
     Trigger: typeof SelectTrigger;
     Content: typeof SelectContent;

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/index.js

@@ -137,7 +137,7 @@ function SelectContent({
     }
   ) });
 }
-function SelectItem({ children, value, disabled, className }) {
+function SelectItem({ children, value, disabled, className, ...htmlProps }) {
   const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);
   const classes = [styles.item, className].filter(Boolean).join(" ");
   React.useEffect(() => {
@@ -146,20 +146,21 @@ function SelectItem({ children, value, disabled, className }) {
     incrementItemsVersion();
     return () => {
       items.delete(value);
+      incrementItemsVersion();
     };
   }, [itemsRef, incrementItemsVersion, value, children]);
-  return /* @__PURE__ */ jsxs(Select$1.Item, { value, disabled, className: classes, children: [
+  return /* @__PURE__ */ jsxs(Select$1.Item, { ...htmlProps, value, disabled, className: classes, children: [
     /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
     /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ jsx(CheckIcon, {}) })
   ] });
 }
-function SelectGroup({ children, className }) {
+function SelectGroup({ children, className, ...htmlProps }) {
   const classes = [styles.group, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(Select$1.Group, { className: classes, children });
+  return /* @__PURE__ */ jsx(Select$1.Group, { ...htmlProps, className: classes, children });
 }
-function SelectGroupLabel({ children, className }) {
+function SelectGroupLabel({ children, className, ...htmlProps }) {
   const classes = [styles.groupLabel, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(Select$1.GroupLabel, { className: classes, children });
+  return /* @__PURE__ */ jsx(Select$1.GroupLabel, { ...htmlProps, className: classes, children });
 }
 const Select = Object.assign(SelectRoot, {
   Trigger: SelectTrigger,

package/dist/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport styles from './Select.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type SelectValue = string;\n\nexport interface SelectOption {\n  value: SelectValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  children: React.ReactNode;\n  value?: SelectValue | null;\n  defaultValue?: SelectValue;\n  onValueChange?: (value: SelectValue | null) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n}\n\nexport interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */\n  maxVisibleItems?: number;\n}\n\nexport interface SelectItemProps {\n  children: React.ReactNode;\n  value: SelectValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface SelectGroupProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface SelectGroupLabelProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Context for Select state\n// ============================================\n\ninterface SelectContextValue {\n  placeholder?: string;\n  value?: SelectValue | null;\n  itemsRef: React.MutableRefObject<Map<SelectValue, React.ReactNode>>;\n  // Version counter to trigger re-renders when items register\n  itemsVersion: number;\n  incrementItemsVersion: () => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  itemsRef: { current: new Map() },\n  itemsVersion: 0,\n  incrementItemsVersion: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n}: SelectProps) {\n  // Track current value for controlled and uncontrolled modes\n  const [internalValue, setInternalValue] = React.useState<SelectValue | null | undefined>(\n    value ?? defaultValue ?? null\n  );\n\n  // Registry for item children - allows trigger to render selected item's content\n  const itemsRef = React.useRef<Map<SelectValue, React.ReactNode>>(new Map());\n\n  // Version counter to trigger trigger re-render when items register\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const incrementItemsVersion = React.useCallback(() => {\n    setItemsVersion((v) => v + 1);\n  }, []);\n\n  // Sync internal value with controlled value\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  const handleValueChange = React.useCallback(\n    (newValue: SelectValue | null) => {\n      if (value === undefined) {\n        // Uncontrolled mode\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      itemsRef,\n      itemsVersion,\n      incrementItemsVersion,\n    }),\n    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <BaseSelect.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n      >\n        {children}\n      </BaseSelect.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps) {\n  const context = React.useContext(SelectContext);\n  const placeholderText = placeholder ?? context.placeholder;\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Get the selected item's children from the registry\n  // Note: itemsVersion in context ensures we re-render when items register\n  const selectedContent = context.value != null\n    ? context.itemsRef.current.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\n   \n  const _version = context.itemsVersion; // Force dependency on itemsVersion for re-render\n  const displayContent = selectedContent ?? (\n    placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null\n  );\n\n  return (\n    <BaseSelect.Trigger {...htmlProps} className={classes}>\n      {children ?? (\n        <>\n          <span className={styles.value}>{displayContent}</span>\n          <BaseSelect.Icon className={styles.icon}>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </>\n      )}\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectContent({\n  children,\n  className,\n  sideOffset = 4,\n  align = 'start',\n  maxVisibleItems,\n  ...htmlProps\n}: SelectContentProps) {\n  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');\n\n  const popupStyle = maxVisibleItems != null\n    ? { '--fui-select-max-items': maxVisibleItems + 0.5, ...htmlProps.style } as React.CSSProperties\n    : htmlProps.style;\n\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        className={styles.positioner}\n      >\n        <BaseSelect.Popup {...htmlProps} className={popupClasses} style={popupStyle}>\n          {children}\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nfunction SelectItem({ children, value, disabled, className }: SelectItemProps) {\n  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  // Register this item's children in the registry so the trigger can display them\n  React.useEffect(() => {\n    const items = itemsRef.current;\n    items.set(value, children);\n    // Trigger re-render of trigger to show the registered content\n    incrementItemsVersion();\n    return () => {\n      items.delete(value);\n    };\n  }, [itemsRef, incrementItemsVersion, value, children]);\n\n  return (\n    <BaseSelect.Item value={value} disabled={disabled} className={classes}>\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles.itemIndicator}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectGroup({ children, className }: SelectGroupProps) {\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n  return <BaseSelect.Group className={classes}>{children}</BaseSelect.Group>;\n}\n\nfunction SelectGroupLabel({ children, className }: SelectGroupLabelProps) {\n  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');\n  return <BaseSelect.GroupLabel className={classes}>{children}</BaseSelect.GroupLabel>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n});\n\n// Re-export individual components\nexport {\n  SelectRoot,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectGroupLabel,\n};\n"],"names":["BaseSelect"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport styles from './Select.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type SelectValue = string;\n\nexport interface SelectOption {\n  value: SelectValue;\n  label: string;\n  disabled?: boolean;\n}\n\n/**\n * Select dropdown for choosing from a list of options.\n * @see https://usefragments.com/components/select\n */\nexport interface SelectProps {\n  children: React.ReactNode;\n  /** Controlled selected value */\n  value?: SelectValue | null;\n  /** Default value for uncontrolled usage */\n  defaultValue?: SelectValue;\n  /** Called when selection changes */\n  onValueChange?: (value: SelectValue | null) => void;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the select is non-interactive */\n  disabled?: boolean;\n  /** Whether a selection is required */\n  required?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text when no value is selected */\n  placeholder?: string;\n}\n\nexport interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */\n  maxVisibleItems?: number;\n}\n\nexport interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n  value: SelectValue;\n  disabled?: boolean;\n}\n\nexport interface SelectGroupProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport interface SelectGroupLabelProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Context for Select state\n// ============================================\n\ninterface SelectContextValue {\n  placeholder?: string;\n  value?: SelectValue | null;\n  itemsRef: React.MutableRefObject<Map<SelectValue, React.ReactNode>>;\n  // Version counter to trigger re-renders when items register\n  itemsVersion: number;\n  incrementItemsVersion: () => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  itemsRef: { current: new Map() },\n  itemsVersion: 0,\n  incrementItemsVersion: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n}: SelectProps) {\n  // Track current value for controlled and uncontrolled modes\n  const [internalValue, setInternalValue] = React.useState<SelectValue | null | undefined>(\n    value ?? defaultValue ?? null\n  );\n\n  // Registry for item children - allows trigger to render selected item's content\n  const itemsRef = React.useRef<Map<SelectValue, React.ReactNode>>(new Map());\n\n  // Version counter to trigger trigger re-render when items register\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const incrementItemsVersion = React.useCallback(() => {\n    setItemsVersion((v) => v + 1);\n  }, []);\n\n  // Sync internal value with controlled value\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  const handleValueChange = React.useCallback(\n    (newValue: SelectValue | null) => {\n      if (value === undefined) {\n        // Uncontrolled mode\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      itemsRef,\n      itemsVersion,\n      incrementItemsVersion,\n    }),\n    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <BaseSelect.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n      >\n        {children}\n      </BaseSelect.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps) {\n  const context = React.useContext(SelectContext);\n  const placeholderText = placeholder ?? context.placeholder;\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Get the selected item's children from the registry\n  // Note: itemsVersion in context ensures we re-render when items register\n  const selectedContent = context.value != null\n    ? context.itemsRef.current.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\n   \n  const _version = context.itemsVersion; // Force dependency on itemsVersion for re-render\n  const displayContent = selectedContent ?? (\n    placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null\n  );\n\n  return (\n    <BaseSelect.Trigger {...htmlProps} className={classes}>\n      {children ?? (\n        <>\n          <span className={styles.value}>{displayContent}</span>\n          <BaseSelect.Icon className={styles.icon}>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </>\n      )}\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectContent({\n  children,\n  className,\n  sideOffset = 4,\n  align = 'start',\n  maxVisibleItems,\n  ...htmlProps\n}: SelectContentProps) {\n  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');\n\n  const popupStyle = maxVisibleItems != null\n    ? { '--fui-select-max-items': maxVisibleItems + 0.5, ...htmlProps.style } as React.CSSProperties\n    : htmlProps.style;\n\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        className={styles.positioner}\n      >\n        <BaseSelect.Popup {...htmlProps} className={popupClasses} style={popupStyle}>\n          {children}\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nfunction SelectItem({ children, value, disabled, className, ...htmlProps }: SelectItemProps) {\n  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  // Register this item's children in the registry so the trigger can display them\n  React.useEffect(() => {\n    const items = itemsRef.current;\n    items.set(value, children);\n    // Trigger re-render of trigger to show the registered content\n    incrementItemsVersion();\n    return () => {\n      items.delete(value);\n      incrementItemsVersion();\n    };\n  }, [itemsRef, incrementItemsVersion, value, children]);\n\n  return (\n    <BaseSelect.Item {...htmlProps} value={value} disabled={disabled} className={classes}>\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles.itemIndicator}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectGroup({ children, className, ...htmlProps }: SelectGroupProps) {\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n  return <BaseSelect.Group {...htmlProps} className={classes}>{children}</BaseSelect.Group>;\n}\n\nfunction SelectGroupLabel({ children, className, ...htmlProps }: SelectGroupLabelProps) {\n  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');\n  return <BaseSelect.GroupLabel {...htmlProps} className={classes}>{children}</BaseSelect.GroupLabel>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n});\n\n// Re-export individual components\nexport {\n  SelectRoot,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectGroupLabel,\n};\n"],"names":["BaseSelect"],"mappings":"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"}

package/dist/components/Sidebar/index.cjs

@@ -26,6 +26,13 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
 function MenuIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -370,16 +377,26 @@ function SidebarRoot({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: content });
 }
-function SidebarHeader({ children, collapsedContent, className }) {
+function SidebarHeader({
+  children,
+  collapsedContent,
+  className,
+  ...htmlProps
+}) {
   const { collapsed, isMobile } = useSidebarContext();
   const isCollapsed = collapsed && !isMobile;
   const classes = [Sidebar_module.default.header, className].filter(Boolean).join(" ");
   const content = isCollapsed && collapsedContent ? collapsedContent : children;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children: content });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children: content });
 }
-function SidebarNav({ children, "aria-label": ariaLabel = "Main navigation", className }) {
+function SidebarNav({
+  children,
+  "aria-label": ariaLabel = "Main navigation",
+  className,
+  ...htmlProps
+}) {
   const classes = [Sidebar_module.default.nav, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: classes, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.ScrollArea, { orientation: "vertical", showFades: true, className: Sidebar_module.default.navScrollArea, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ...htmlProps, className: classes, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.ScrollArea, { orientation: "vertical", showFades: true, className: Sidebar_module.default.navScrollArea, children }) });
 }
 function SidebarSection({
   children,
@@ -387,7 +404,8 @@ function SidebarSection({
   action,
   collapsible: isCollapsibleProp = false,
   defaultOpen = true,
-  className
+  className,
+  ...htmlProps
 }) {
   const { collapsed, isMobile } = useSidebarContext();
   const classes = [
@@ -398,7 +416,7 @@ function SidebarSection({
   const showAction = action && (!collapsed || isMobile);
   const isCollapsible = isCollapsibleProp && showLabel;
   if (!isCollapsible) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, role: "group", "aria-label": label, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, role: "group", "aria-label": label, children: [
       (showLabel || showAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sidebar_module.default.sectionHeader, children: [
         showLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.sectionLabel, children: label }),
         showAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.sectionActionWrapper, children: action })
@@ -406,7 +424,7 @@ function SidebarSection({
       /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Sidebar_module.default.sectionList, children })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, role: "group", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Collapsible, { defaultOpen, className: Sidebar_module.default.sectionCollapsible, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, role: "group", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Collapsible, { defaultOpen, className: Sidebar_module.default.sectionCollapsible, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sidebar_module.default.sectionHeader, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         index$1.Collapsible.Trigger,
@@ -425,15 +443,17 @@ function SidebarSectionAction({
   children,
   onClick,
   "aria-label": ariaLabel,
-  className
+  className,
+  ...htmlProps
 }) {
   const classes = [Sidebar_module.default.sectionAction, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
+      ...htmlProps,
       className: classes,
-      onClick,
+      onClick: (event) => onClick == null ? void 0 : onClick(event),
       "aria-label": ariaLabel,
       children
     }
@@ -506,11 +526,16 @@ function SidebarItem({
   };
   let itemElement;
   if (asChild && React__namespace.isValidElement(children)) {
+    const childProps = children.props;
     itemElement = React__namespace.cloneElement(children, {
       ...itemProps,
       ...rest,
+      onClick: composeEventHandlers(
+        childProps.onClick,
+        (event) => handleClick(event)
+      ),
       // Merge classNames
-      className: [classes, children.props.className].filter(Boolean).join(" "),
+      className: [classes, childProps.className].filter(Boolean).join(" "),
       children: itemContent
     });
   } else if (href) {
@@ -564,11 +589,17 @@ function SidebarSubItem({
 function SidebarSubmenu({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("li", { className: Sidebar_module.default.submenuWrapper, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Sidebar_module.default.submenu, children }) });
 }
-function SidebarFooter({ children, className }) {
+function SidebarFooter({ children, className, ...htmlProps }) {
   const classes = [Sidebar_module.default.footer, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
 }
-function SidebarTrigger({ children, "aria-label": ariaLabel = "Toggle navigation", className }) {
+function SidebarTrigger({
+  children,
+  "aria-label": ariaLabel = "Toggle navigation",
+  className,
+  onClick,
+  ...htmlProps
+}) {
   const { open, setOpen, isMobile, sidebarId } = useSidebarContext();
   if (!isMobile) {
     return null;
@@ -577,9 +608,10 @@ function SidebarTrigger({ children, "aria-label": ariaLabel = "Toggle navigation
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
+      ...htmlProps,
       type: "button",
       className: classes,
-      onClick: () => setOpen(!open),
+      onClick: composeEventHandlers(onClick, () => setOpen(!open)),
       "aria-label": ariaLabel,
       "aria-expanded": open,
       "aria-controls": sidebarId,
@@ -587,7 +619,7 @@ function SidebarTrigger({ children, "aria-label": ariaLabel = "Toggle navigation
     }
   );
 }
-function SidebarOverlay({ className }) {
+function SidebarOverlay({ className, onClick, ...htmlProps }) {
   const { open, setOpen, isMobile } = useSidebarContext();
   if (!isMobile || !open) {
     return null;
@@ -596,14 +628,20 @@ function SidebarOverlay({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ...htmlProps,
       className: classes,
-      onClick: () => setOpen(false),
+      onClick: composeEventHandlers(onClick, () => setOpen(false)),
       "aria-hidden": "true",
       "data-state": open ? "open" : "closed"
     }
   );
 }
-function SidebarCollapseToggle({ "aria-label": ariaLabel, className }) {
+function SidebarCollapseToggle({
+  "aria-label": ariaLabel,
+  className,
+  onClick,
+  ...htmlProps
+}) {
   const { collapsed, setCollapsed, isMobile, collapsible, hasIcons } = useSidebarContext();
   if (isMobile || collapsible === "none") {
     return null;
@@ -618,15 +656,22 @@ function SidebarCollapseToggle({ "aria-label": ariaLabel, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
+      ...htmlProps,
       type: "button",
       className: classes,
-      onClick: () => setCollapsed(!collapsed),
+      onClick: composeEventHandlers(onClick, () => setCollapsed(!collapsed)),
       "aria-label": label,
       children: /* @__PURE__ */ jsxRuntime.jsx(CollapsePanelIcon, {})
     }
   );
 }
-function SidebarRail({ className }) {
+function SidebarRail({
+  className,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+  ...htmlProps
+}) {
   const { collapsed, setCollapsed, isMobile, collapsible } = useSidebarContext();
   if (isMobile || collapsible === "none") {
     return null;
@@ -639,24 +684,26 @@ function SidebarRail({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
+      ...htmlProps,
       type: "button",
       className: classes,
-      onClick: () => setCollapsed(!collapsed),
-      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-      title: collapsed ? "Expand sidebar" : "Collapse sidebar"
+      onClick: composeEventHandlers(onClick, () => setCollapsed(!collapsed)),
+      "aria-label": ariaLabel ?? (collapsed ? "Expand sidebar" : "Collapse sidebar"),
+      title: title ?? (collapsed ? "Expand sidebar" : "Collapse sidebar")
     }
   );
 }
 function SidebarMenuSkeleton({
   count = 5,
   showIcon = true,
-  className
+  className,
+  ...htmlProps
 }) {
   const { collapsed, isMobile } = useSidebarContext();
   const isCollapsed = collapsed && !isMobile;
   const classes = [Sidebar_module.default.menuSkeleton, className].filter(Boolean).join(" ");
   const labelWidths = ["64%", "72%", "68%", "79%", "74%", "66%", "83%", "70%"];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, "aria-hidden": "true", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sidebar_module.default.skeletonItem, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, "aria-hidden": "true", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sidebar_module.default.skeletonItem, children: [
     showIcon && /* @__PURE__ */ jsxRuntime.jsx(index.Skeleton, { variant: "avatar", size: "sm" }),
     !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
       index.Skeleton,