@fragments-sdk/ui 0.12.0 → 0.14.0

package/dist/components/Select/index.cjs

@@ -58,9 +58,10 @@ function CheckIcon() {
   );
 }
 const SelectContext = React__namespace.createContext({
-  itemsRef: { current: /* @__PURE__ */ new Map() },
-  itemsVersion: 0,
-  incrementItemsVersion: () => {
+  items: /* @__PURE__ */ new Map(),
+  registerItem: () => {
+  },
+  unregisterItem: () => {
   }
 });
 function SelectRoot({
@@ -68,21 +69,36 @@ function SelectRoot({
   value,
   defaultValue,
   onValueChange,
+  onChange,
   open,
   defaultOpen,
   onOpenChange,
   disabled,
   required,
   name,
-  placeholder
+  placeholder,
+  options
 }) {
   const [internalValue, setInternalValue] = React__namespace.useState(
     value ?? defaultValue ?? null
   );
-  const itemsRef = React__namespace.useRef(/* @__PURE__ */ new Map());
-  const [itemsVersion, setItemsVersion] = React__namespace.useState(0);
-  const incrementItemsVersion = React__namespace.useCallback(() => {
-    setItemsVersion((v) => v + 1);
+  const [items, setItems] = React__namespace.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const registerItem = React__namespace.useCallback((itemValue, content) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.set(itemValue, content);
+      return next;
+    });
+  }, []);
+  const unregisterItem = React__namespace.useCallback((itemValue) => {
+    setItems((prev) => {
+      if (!prev.has(itemValue)) return prev;
+      const next = new Map(prev);
+      next.delete(itemValue);
+      return next;
+    });
   }, []);
   React__namespace.useEffect(() => {
     if (value !== void 0) {
@@ -91,22 +107,23 @@ function SelectRoot({
   }, [value]);
   const handleValueChange = React__namespace.useCallback(
     (newValue) => {
+      var _a;
       if (value === void 0) {
         setInternalValue(newValue);
       }
-      onValueChange == null ? void 0 : onValueChange(newValue);
+      (_a = onChange ?? onValueChange) == null ? void 0 : _a(newValue);
     },
-    [value, onValueChange]
+    [value, onChange, onValueChange]
   );
   const contextValue = React__namespace.useMemo(
     () => ({
       placeholder,
       value: value !== void 0 ? value : internalValue,
-      itemsRef,
-      itemsVersion,
-      incrementItemsVersion
+      items,
+      registerItem,
+      unregisterItem
     }),
-    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]
+    [placeholder, value, internalValue, items, registerItem, unregisterItem]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     select.Select.Root,
@@ -120,7 +137,7 @@ function SelectRoot({
       disabled,
       required,
       name,
-      children
+      children: children ?? (options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)))
     }
   ) });
 }
@@ -128,8 +145,7 @@ function SelectTrigger({ children, placeholder, className, ...htmlProps }) {
   const context = React__namespace.useContext(SelectContext);
   const placeholderText = placeholder ?? context.placeholder;
   const classes = [Select_module.default.trigger, className].filter(Boolean).join(" ");
-  const selectedContent = context.value != null ? context.itemsRef.current.get(context.value) : null;
-  context.itemsVersion;
+  const selectedContent = context.value != null ? context.items.get(context.value) : null;
   const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.placeholder, children: placeholderText }) : null);
   return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.value, children: displayContent }),
@@ -156,29 +172,27 @@ function SelectContent({
     }
   ) });
 }
-function SelectItem({ children, value, disabled, className }) {
-  const { itemsRef, incrementItemsVersion } = React__namespace.useContext(SelectContext);
+function SelectItem({ children, value, disabled, className, ...htmlProps }) {
+  const { registerItem, unregisterItem } = React__namespace.useContext(SelectContext);
   const classes = [Select_module.default.item, className].filter(Boolean).join(" ");
   React__namespace.useEffect(() => {
-    const items = itemsRef.current;
-    items.set(value, children);
-    incrementItemsVersion();
+    registerItem(value, children);
     return () => {
-      items.delete(value);
+      unregisterItem(value);
     };
-  }, [itemsRef, incrementItemsVersion, value, children]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Item, { value, disabled, className: classes, children: [
+  }, [registerItem, unregisterItem, value, children]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Item, { ...htmlProps, value, disabled, className: classes, children: [
     /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children }),
     /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: Select_module.default.itemIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
   ] });
 }
-function SelectGroup({ children, className }) {
+function SelectGroup({ children, className, ...htmlProps }) {
   const classes = [Select_module.default.group, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Group, { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Group, { ...htmlProps, className: classes, children });
 }
-function SelectGroupLabel({ children, className }) {
+function SelectGroupLabel({ children, className, ...htmlProps }) {
   const classes = [Select_module.default.groupLabel, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { ...htmlProps, className: classes, children });
 }
 const Select = Object.assign(SelectRoot, {
   Trigger: SelectTrigger,

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\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 {\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  /** Alias for onValueChange */\n  onChange?: (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  /** Convenience API for simple selects (renders Select.Item entries when children are omitted) */\n  options?: SelectOption[];\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  items: Map<SelectValue, React.ReactNode>;\n  registerItem: (value: SelectValue, content: React.ReactNode) => void;\n  unregisterItem: (value: SelectValue) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  items: new Map(),\n  registerItem: () => {},\n  unregisterItem: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  onChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n  options,\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 [items, setItems] = React.useState<Map<SelectValue, React.ReactNode>>(\n    () => new Map()\n  );\n  const registerItem = React.useCallback((itemValue: SelectValue, content: React.ReactNode) => {\n    setItems((prev) => {\n      const next = new Map(prev);\n      next.set(itemValue, content);\n      return next;\n    });\n  }, []);\n  const unregisterItem = React.useCallback((itemValue: SelectValue) => {\n    setItems((prev) => {\n      if (!prev.has(itemValue)) return prev;\n      const next = new Map(prev);\n      next.delete(itemValue);\n      return next;\n    });\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      (onChange ?? onValueChange)?.(newValue);\n    },\n    [value, onChange, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      items,\n      registerItem,\n      unregisterItem,\n    }),\n    [placeholder, value, internalValue, items, registerItem, unregisterItem]\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 ?? options?.map((option) => (\n          <SelectItem key={option.value} value={option.value} disabled={option.disabled}>\n            {option.label}\n          </SelectItem>\n        ))}\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  const selectedContent = context.value != null\n    ? context.items.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\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 { registerItem, unregisterItem } = 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    registerItem(value, children);\n    return () => {\n      unregisterItem(value);\n    };\n  }, [registerItem, unregisterItem, 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

@@ -10,13 +10,15 @@ export interface SelectOption {
  * @see https://usefragments.com/components/select
  */
 export interface SelectProps {
-    children: React.ReactNode;
+    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;
+    /** Alias for onValueChange */
+    onChange?: (value: SelectValue | null) => void;
     /** Controlled open state */
     open?: boolean;
     /** Default open state */
@@ -31,6 +33,8 @@ export interface SelectProps {
     name?: string;
     /** Placeholder text when no value is selected */
     placeholder?: string;
+    /** Convenience API for simple selects (renders Select.Item entries when children are omitted) */
+    options?: SelectOption[];
 }
 export interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children?: React.ReactNode;
@@ -43,26 +47,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 SelectRoot({ children, value, defaultValue, onValueChange, onChange, open, defaultOpen, onOpenChange, disabled, required, name, placeholder, options, }: 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

@@ -39,9 +39,10 @@ function CheckIcon() {
   );
 }
 const SelectContext = React.createContext({
-  itemsRef: { current: /* @__PURE__ */ new Map() },
-  itemsVersion: 0,
-  incrementItemsVersion: () => {
+  items: /* @__PURE__ */ new Map(),
+  registerItem: () => {
+  },
+  unregisterItem: () => {
   }
 });
 function SelectRoot({
@@ -49,21 +50,36 @@ function SelectRoot({
   value,
   defaultValue,
   onValueChange,
+  onChange,
   open,
   defaultOpen,
   onOpenChange,
   disabled,
   required,
   name,
-  placeholder
+  placeholder,
+  options
 }) {
   const [internalValue, setInternalValue] = React.useState(
     value ?? defaultValue ?? null
   );
-  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
-  const [itemsVersion, setItemsVersion] = React.useState(0);
-  const incrementItemsVersion = React.useCallback(() => {
-    setItemsVersion((v) => v + 1);
+  const [items, setItems] = React.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const registerItem = React.useCallback((itemValue, content) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.set(itemValue, content);
+      return next;
+    });
+  }, []);
+  const unregisterItem = React.useCallback((itemValue) => {
+    setItems((prev) => {
+      if (!prev.has(itemValue)) return prev;
+      const next = new Map(prev);
+      next.delete(itemValue);
+      return next;
+    });
   }, []);
   React.useEffect(() => {
     if (value !== void 0) {
@@ -72,22 +88,23 @@ function SelectRoot({
   }, [value]);
   const handleValueChange = React.useCallback(
     (newValue) => {
+      var _a;
       if (value === void 0) {
         setInternalValue(newValue);
       }
-      onValueChange == null ? void 0 : onValueChange(newValue);
+      (_a = onChange ?? onValueChange) == null ? void 0 : _a(newValue);
     },
-    [value, onValueChange]
+    [value, onChange, onValueChange]
   );
   const contextValue = React.useMemo(
     () => ({
       placeholder,
       value: value !== void 0 ? value : internalValue,
-      itemsRef,
-      itemsVersion,
-      incrementItemsVersion
+      items,
+      registerItem,
+      unregisterItem
     }),
-    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]
+    [placeholder, value, internalValue, items, registerItem, unregisterItem]
   );
   return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     Select$1.Root,
@@ -101,7 +118,7 @@ function SelectRoot({
       disabled,
       required,
       name,
-      children
+      children: children ?? (options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)))
     }
   ) });
 }
@@ -109,8 +126,7 @@ function SelectTrigger({ children, placeholder, className, ...htmlProps }) {
   const context = React.useContext(SelectContext);
   const placeholderText = placeholder ?? context.placeholder;
   const classes = [styles.trigger, className].filter(Boolean).join(" ");
-  const selectedContent = context.value != null ? context.itemsRef.current.get(context.value) : null;
-  context.itemsVersion;
+  const selectedContent = context.value != null ? context.items.get(context.value) : null;
   const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsx("span", { className: styles.placeholder, children: placeholderText }) : null);
   return /* @__PURE__ */ jsx(Select$1.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: styles.value, children: displayContent }),
@@ -137,29 +153,27 @@ function SelectContent({
     }
   ) });
 }
-function SelectItem({ children, value, disabled, className }) {
-  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);
+function SelectItem({ children, value, disabled, className, ...htmlProps }) {
+  const { registerItem, unregisterItem } = React.useContext(SelectContext);
   const classes = [styles.item, className].filter(Boolean).join(" ");
   React.useEffect(() => {
-    const items = itemsRef.current;
-    items.set(value, children);
-    incrementItemsVersion();
+    registerItem(value, children);
     return () => {
-      items.delete(value);
+      unregisterItem(value);
     };
-  }, [itemsRef, incrementItemsVersion, value, children]);
-  return /* @__PURE__ */ jsxs(Select$1.Item, { value, disabled, className: classes, children: [
+  }, [registerItem, unregisterItem, value, 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\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 {\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  /** Alias for onValueChange */\n  onChange?: (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  /** Convenience API for simple selects (renders Select.Item entries when children are omitted) */\n  options?: SelectOption[];\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  items: Map<SelectValue, React.ReactNode>;\n  registerItem: (value: SelectValue, content: React.ReactNode) => void;\n  unregisterItem: (value: SelectValue) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  items: new Map(),\n  registerItem: () => {},\n  unregisterItem: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  onChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n  options,\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 [items, setItems] = React.useState<Map<SelectValue, React.ReactNode>>(\n    () => new Map()\n  );\n  const registerItem = React.useCallback((itemValue: SelectValue, content: React.ReactNode) => {\n    setItems((prev) => {\n      const next = new Map(prev);\n      next.set(itemValue, content);\n      return next;\n    });\n  }, []);\n  const unregisterItem = React.useCallback((itemValue: SelectValue) => {\n    setItems((prev) => {\n      if (!prev.has(itemValue)) return prev;\n      const next = new Map(prev);\n      next.delete(itemValue);\n      return next;\n    });\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      (onChange ?? onValueChange)?.(newValue);\n    },\n    [value, onChange, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      items,\n      registerItem,\n      unregisterItem,\n    }),\n    [placeholder, value, internalValue, items, registerItem, unregisterItem]\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 ?? options?.map((option) => (\n          <SelectItem key={option.value} value={option.value} disabled={option.disabled}>\n            {option.label}\n          </SelectItem>\n        ))}\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  const selectedContent = context.value != null\n    ? context.items.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\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 { registerItem, unregisterItem } = 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    registerItem(value, children);\n    return () => {\n      unregisterItem(value);\n    };\n  }, [registerItem, unregisterItem, 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/Sidebar.module.scss.cjs

@@ -1,47 +1,47 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1owm0_1";
-const mobile = "_mobile_1owm0_14";
-const collapsed = "_collapsed_1owm0_20";
-const header = "_header_1owm0_23";
-const nav = "_nav_1owm0_27";
-const sectionLabel = "_sectionLabel_1owm0_30";
-const itemLabel = "_itemLabel_1owm0_41";
-const itemBadge = "_itemBadge_1owm0_42";
-const itemChevron = "_itemChevron_1owm0_43";
-const item = "_item_1owm0_41";
-const itemIcon = "_itemIcon_1owm0_51";
-const footer = "_footer_1owm0_54";
-const collapseToggle = "_collapseToggle_1owm0_58";
-const collapsedNoIcons = "_collapsedNoIcons_1owm0_62";
-const collapseToggleFloating = "_collapseToggleFloating_1owm0_71";
-const positionRight = "_positionRight_1owm0_85";
-const navScrollArea = "_navScrollArea_1owm0_112";
-const section = "_section_1owm0_30";
-const sectionHeader = "_sectionHeader_1owm0_121";
-const sectionTrigger = "_sectionTrigger_1owm0_128";
-const sectionActionWrapper = "_sectionActionWrapper_1owm0_144";
-const sectionAction = "_sectionAction_1owm0_144";
-const sectionList = "_sectionList_1owm0_190";
-const sectionCollapsible = "_sectionCollapsible_1owm0_196";
-const itemWrapper = "_itemWrapper_1owm0_209";
-const itemDisabled = "_itemDisabled_1owm0_253";
-const itemActive = "_itemActive_1owm0_262";
-const itemExpanded = "_itemExpanded_1owm0_342";
-const submenu = "_submenu_1owm0_346";
-const submenuWrapper = "_submenuWrapper_1owm0_356";
-const subItemWrapper = "_subItemWrapper_1owm0_364";
-const subItem = "_subItem_1owm0_364";
-const subItemDisabled = "_subItemDisabled_1owm0_421";
-const subItemActive = "_subItemActive_1owm0_430";
-const trigger = "_trigger_1owm0_452";
-const overlay = "_overlay_1owm0_493";
-const offcanvasCollapsed = "_offcanvasCollapsed_1owm0_563";
-const rail = "_rail_1owm0_570";
-const railCollapsed = "_railCollapsed_1owm0_638";
-const menuSkeleton = "_menuSkeleton_1owm0_642";
-const skeletonItem = "_skeletonItem_1owm0_649";
-const skeletonLabel = "_skeletonLabel_1owm0_657";
+const root = "_root_1kyk4_1";
+const mobile = "_mobile_1kyk4_14";
+const collapsed = "_collapsed_1kyk4_20";
+const header = "_header_1kyk4_23";
+const nav = "_nav_1kyk4_27";
+const sectionLabel = "_sectionLabel_1kyk4_30";
+const itemLabel = "_itemLabel_1kyk4_41";
+const itemBadge = "_itemBadge_1kyk4_42";
+const itemChevron = "_itemChevron_1kyk4_43";
+const item = "_item_1kyk4_41";
+const itemIcon = "_itemIcon_1kyk4_51";
+const footer = "_footer_1kyk4_54";
+const collapseToggle = "_collapseToggle_1kyk4_58";
+const collapsedNoIcons = "_collapsedNoIcons_1kyk4_62";
+const collapseToggleFloating = "_collapseToggleFloating_1kyk4_71";
+const positionRight = "_positionRight_1kyk4_85";
+const navScrollArea = "_navScrollArea_1kyk4_112";
+const section = "_section_1kyk4_30";
+const sectionHeader = "_sectionHeader_1kyk4_121";
+const sectionTrigger = "_sectionTrigger_1kyk4_128";
+const sectionActionWrapper = "_sectionActionWrapper_1kyk4_144";
+const sectionAction = "_sectionAction_1kyk4_144";
+const sectionList = "_sectionList_1kyk4_190";
+const sectionCollapsible = "_sectionCollapsible_1kyk4_196";
+const itemWrapper = "_itemWrapper_1kyk4_209";
+const itemDisabled = "_itemDisabled_1kyk4_253";
+const itemActive = "_itemActive_1kyk4_262";
+const itemExpanded = "_itemExpanded_1kyk4_342";
+const submenu = "_submenu_1kyk4_346";
+const submenuWrapper = "_submenuWrapper_1kyk4_356";
+const subItemWrapper = "_subItemWrapper_1kyk4_364";
+const subItem = "_subItem_1kyk4_364";
+const subItemDisabled = "_subItemDisabled_1kyk4_421";
+const subItemActive = "_subItemActive_1kyk4_430";
+const trigger = "_trigger_1kyk4_452";
+const overlay = "_overlay_1kyk4_493";
+const offcanvasCollapsed = "_offcanvasCollapsed_1kyk4_563";
+const rail = "_rail_1kyk4_570";
+const railCollapsed = "_railCollapsed_1kyk4_638";
+const menuSkeleton = "_menuSkeleton_1kyk4_642";
+const skeletonItem = "_skeletonItem_1kyk4_649";
+const skeletonLabel = "_skeletonLabel_1kyk4_657";
 const styles = {
   root,
   mobile,