@fragments-sdk/ui 0.13.0 → 0.14.0

package/dist/components/RadioGroup/index.js

@@ -17,7 +17,9 @@ function RadioItem({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
-  className
+  className,
+  controlClassName,
+  contentClassName
 }) {
   const size = React.useContext(RadioSizeContext);
   const id = React.useId();
@@ -26,7 +28,8 @@ function RadioItem({
   const radioClasses = [
     styles.radio,
     size === "sm" && styles.radioSm,
-    size === "lg" && styles.radioLg
+    size === "lg" && styles.radioLg,
+    controlClassName
   ].filter(Boolean).join(" ");
   const labelClasses = [
     styles.label,
@@ -67,7 +70,7 @@ function RadioItem({
             children: /* @__PURE__ */ jsx(RadioIndicator, { className: styles.indicator })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs("div", { className: [styles.content, contentClassName].filter(Boolean).join(" "), children: [
           /* @__PURE__ */ jsx("span", { id: labelId, className: labelClasses, children: label }),
           description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children: description })
         ] })
@@ -79,12 +82,15 @@ function RadioGroupRoot({
   value,
   defaultValue,
   onValueChange,
+  onChange,
   orientation = "vertical",
   disabled = false,
   name,
   label,
   error,
   size = "md",
+  wrapperClassName,
+  groupClassName,
   children,
   className,
   "aria-label": ariaLabel,
@@ -98,16 +104,18 @@ function RadioGroupRoot({
   const groupClasses = [
     styles.group,
     styles[orientation],
-    className
+    className,
+    groupClassName
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { ...htmlProps, className: styles.wrapper, children: [
+  const handleValueChange = onChange ?? onValueChange;
+  return /* @__PURE__ */ jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { ...htmlProps, className: [styles.wrapper, wrapperClassName].filter(Boolean).join(" "), children: [
     label && /* @__PURE__ */ jsx("span", { id: labelId, className: styles.groupLabel, children: label }),
     /* @__PURE__ */ jsx(
       RadioGroup$1,
       {
         value,
         defaultValue,
-        onValueChange,
+        onValueChange: handleValueChange,
         disabled,
         name,
         "aria-label": ariaLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Radio group for selecting one option from a set.\n * @see https://usefragments.com/components/radiogroup\n */\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={styles.content}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={styles.wrapper}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["BaseRadio.Root","BaseRadio.Indicator","BaseRadioGroup"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Radio group for selecting one option from a set.\n * @see https://usefragments.com/components/radiogroup\n */\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Alias for onValueChange */\n  onChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Class applied to the outer wrapper (label + group + error) */\n  wrapperClassName?: string;\n  /** Class applied to the inner radio group container */\n  groupClassName?: string;\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n  /** Class applied directly to the radio control */\n  controlClassName?: string;\n  /** Class applied to the item text content wrapper */\n  contentClassName?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n  controlClassName,\n  contentClassName,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n    controlClassName,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={[styles.content, contentClassName].filter(Boolean).join(' ')}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  onChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  wrapperClassName,\n  groupClassName,\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n    groupClassName,\n  ].filter(Boolean).join(' ');\n\n  const handleValueChange = onChange ?? onValueChange;\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={[styles.wrapper, wrapperClassName].filter(Boolean).join(' ')}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={handleValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["BaseRadio.Root","BaseRadio.Indicator","BaseRadioGroup"],"mappings":"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"}

package/dist/components/Select/Select.module.scss.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const trigger = "_trigger_19ioy_1";
-const value = "_value_19ioy_56";
-const placeholder = "_placeholder_19ioy_69";
-const icon = "_icon_19ioy_73";
-const positioner = "_positioner_19ioy_88";
-const popup = "_popup_19ioy_93";
-const item = "_item_19ioy_120";
-const itemIndicator = "_itemIndicator_19ioy_164";
-const group = "_group_19ioy_177";
-const groupLabel = "_groupLabel_19ioy_183";
+const trigger = "_trigger_n53ao_1";
+const value = "_value_n53ao_56";
+const placeholder = "_placeholder_n53ao_69";
+const icon = "_icon_n53ao_73";
+const positioner = "_positioner_n53ao_88";
+const popup = "_popup_n53ao_93";
+const item = "_item_n53ao_120";
+const itemIndicator = "_itemIndicator_n53ao_164";
+const group = "_group_n53ao_177";
+const groupLabel = "_groupLabel_n53ao_183";
 const styles = {
   trigger,
   value,

package/dist/components/Select/Select.module.scss.js

@@ -1,13 +1,13 @@
-const trigger = "_trigger_19ioy_1";
-const value = "_value_19ioy_56";
-const placeholder = "_placeholder_19ioy_69";
-const icon = "_icon_19ioy_73";
-const positioner = "_positioner_19ioy_88";
-const popup = "_popup_19ioy_93";
-const item = "_item_19ioy_120";
-const itemIndicator = "_itemIndicator_19ioy_164";
-const group = "_group_19ioy_177";
-const groupLabel = "_groupLabel_19ioy_183";
+const trigger = "_trigger_n53ao_1";
+const value = "_value_n53ao_56";
+const placeholder = "_placeholder_n53ao_69";
+const icon = "_icon_n53ao_73";
+const positioner = "_positioner_n53ao_88";
+const popup = "_popup_n53ao_93";
+const item = "_item_n53ao_120";
+const itemIndicator = "_itemIndicator_n53ao_164";
+const group = "_group_n53ao_177";
+const groupLabel = "_groupLabel_n53ao_183";
 const styles = {
   trigger,
   value,

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 }),
@@ -157,17 +173,14 @@ function SelectContent({
   ) });
 }
 function SelectItem({ children, value, disabled, className, ...htmlProps }) {
-  const { itemsRef, incrementItemsVersion } = React__namespace.useContext(SelectContext);
+  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);
-      incrementItemsVersion();
+      unregisterItem(value);
     };
-  }, [itemsRef, incrementItemsVersion, value, 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, {}) })

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 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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"}
+{"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;
@@ -54,7 +58,7 @@ export interface SelectGroupProps extends React.HTMLAttributes<HTMLElement> {
 export interface SelectGroupLabelProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
 }
-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, ...htmlProps }: SelectItemProps): import("react/jsx-runtime").JSX.Element;

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 }),
@@ -138,17 +154,14 @@ function SelectContent({
   ) });
 }
 function SelectItem({ children, value, disabled, className, ...htmlProps }) {
-  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);
+  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);
-      incrementItemsVersion();
+      unregisterItem(value);
     };
-  }, [itemsRef, incrementItemsVersion, value, 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, {}) })

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 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":";;;;AA6EA,SAAS,kBAAkB;AACzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEZ,UAAA,oBAAC,YAAA,EAAS,QAAO,iBAAA,CAAiB;AAAA,IAAA;AAAA,EAAA;AAGxC;AAEA,SAAS,YAAY;AACnB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEZ,UAAA,oBAAC,YAAA,EAAS,QAAO,iBAAA,CAAiB;AAAA,IAAA;AAAA,EAAA;AAGxC;AAeA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC5D,UAAU,EAAE,SAAS,oBAAI,MAAI;AAAA,EAC7B,cAAc;AAAA,EACd,uBAAuB,MAAM;AAAA,EAAC;AAChC,CAAC;AAMD,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AAEd,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM;AAAA,IAC9C,SAAS,gBAAgB;AAAA,EAAA;AAI3B,QAAM,WAAW,MAAM,OAA0C,oBAAI,KAAK;AAG1E,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,CAAC;AACxD,QAAM,wBAAwB,MAAM,YAAY,MAAM;AACpD,oBAAgB,CAAC,MAAM,IAAI,CAAC;AAAA,EAC9B,GAAG,CAAA,CAAE;AAGL,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,QAAW;AACvB,uBAAiB,KAAK;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAoB,MAAM;AAAA,IAC9B,CAAC,aAAiC;AAChC,UAAI,UAAU,QAAW;AAEvB,yBAAiB,QAAQ;AAAA,MAC3B;AACA,qDAAgB;AAAA,IAClB;AAAA,IACA,CAAC,OAAO,aAAa;AAAA,EAAA;AAGvB,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO;AAAA,MACL;AAAA,MACA,OAAO,UAAU,SAAY,QAAQ;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,aAAa,OAAO,eAAe,cAAc,qBAAqB;AAAA,EAAA;AAGzE,SACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,cAC7B,UAAA;AAAA,IAACA,SAAW;AAAA,IAAX;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAAS,cAAc,EAAE,UAAU,aAAa,WAAW,GAAG,aAAiC;AAC7F,QAAM,UAAU,MAAM,WAAW,aAAa;AAC9C,QAAM,kBAAkB,eAAe,QAAQ;AAE/C,QAAM,UAAU,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAIpE,QAAM,kBAAkB,QAAQ,SAAS,OACrC,QAAQ,SAAS,QAAQ,IAAI,QAAQ,KAAK,IAC1C;AAIa,UAAQ;AACzB,QAAM,iBAAiB,oBACrB,kBAAkB,oBAAC,UAAK,WAAW,OAAO,aAAc,UAAA,gBAAA,CAAgB,IAAU;AAGpF,SACE,oBAACA,SAAW,SAAX,EAAoB,GAAG,WAAW,WAAW,SAC3C,UAAA,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,OAAQ,UAAA,gBAAe;AAAA,IAC/C,oBAACA,SAAW,MAAX,EAAgB,WAAW,OAAO,MACjC,UAAA,oBAAC,iBAAA,CAAA,CAAgB,EAAA,CACnB;AAAA,EAAA,EAAA,CACF,EAAA,CAEJ;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,eAAe,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEvE,QAAM,aAAa,mBAAmB,OAClC,EAAE,0BAA0B,kBAAkB,KAAK,GAAG,UAAU,MAAA,IAChE,UAAU;AAEd,SACE,oBAACA,SAAW,QAAX,EACC,UAAA;AAAA,IAACA,SAAW;AAAA,IAAX;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,OAAO;AAAA,MAElB,UAAA,oBAACA,SAAW,OAAX,EAAkB,GAAG,WAAW,WAAW,cAAc,OAAO,YAC9D,SAAA,CACH;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,WAAW,EAAE,UAAU,OAAO,UAAU,WAAW,GAAG,aAA8B;AAC3F,QAAM,EAAE,UAAU,sBAAA,IAA0B,MAAM,WAAW,aAAa;AAC1E,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAGjE,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,SAAS;AACvB,UAAM,IAAI,OAAO,QAAQ;AAEzB,0BAAA;AACA,WAAO,MAAM;AACX,YAAM,OAAO,KAAK;AAClB,4BAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,uBAAuB,OAAO,QAAQ,CAAC;AAErD,SACE,qBAACA,SAAW,MAAX,EAAiB,GAAG,WAAW,OAAc,UAAoB,WAAW,SAC3E,UAAA;AAAA,IAAA,oBAACA,SAAW,UAAX,EAAqB,SAAA,CAAS;AAAA,IAC/B,oBAACA,SAAW,eAAX,EAAyB,WAAW,OAAO,eAC1C,UAAA,oBAAC,WAAA,CAAA,CAAU,EAAA,CACb;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,YAAY,EAAE,UAAU,WAAW,GAAG,aAA+B;AAC5E,QAAM,UAAU,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,SAAO,oBAACA,SAAW,OAAX,EAAkB,GAAG,WAAW,WAAW,SAAU,UAAS;AACxE;AAEA,SAAS,iBAAiB,EAAE,UAAU,WAAW,GAAG,aAAoC;AACtF,QAAM,UAAU,CAAC,OAAO,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACvE,SAAO,oBAACA,SAAW,YAAX,EAAuB,GAAG,WAAW,WAAW,SAAU,UAAS;AAC7E;AAMO,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AACd,CAAC;"}
+{"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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"}