@spark-ui/components 17.2.5-beta.0 → 17.3.0

package/dist/select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/select/utils.ts","../../src/select/SelectContext.tsx","../../src/select/Select.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectValue.tsx","../../src/select/index.ts"],"sourcesContent":["import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n  const validChildren = Children.toArray(children).filter(isValidElement)\n\n  return validChildren.find(child => {\n    return getElementDisplayName(child)?.includes(name)\n  })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (\n      getElementDisplayName(child) === 'Select.Item' ||\n      getElementDisplayName(child) === 'Select.Placeholder'\n    ) {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: childProps.children,\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  ReactElement,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n  itemsMap: ItemsMap\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  itemsComponent: ReactElement | undefined\n  selectedItem: SelectItem | undefined\n  setValue: (value: string) => void\n  isControlled: boolean\n  onValueChange?: (value: string) => void\n  ariaLabel: string | undefined\n  setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n  fieldId: string\n  fieldLabelId: string | undefined\n  name: string | undefined\n  required: boolean\n  placeholder: string | undefined\n  setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n  /**\n   * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the select.\n   */\n  disabled?: boolean\n  /**\n   * Sets the select as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  itemsComponent: ReactElement | undefined\n  /**\n   * This attribute is used to specify the name of the control.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n   */\n  required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n  children,\n  defaultValue,\n  value: valueProp,\n  onValueChange,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n  itemsComponent,\n  name: nameProp,\n  required: requiredProp,\n}: SelectContextProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n  const [ariaLabel, setAriaLabel] = useState<string>()\n\n  // Computed state\n  const firstItem = itemsMap.entries().next()?.value?.[1]\n  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n  const isControlled = valueProp != null\n\n  // Derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state || stateProp\n\n  const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n  const fieldId = field.id || internalFieldID\n  const fieldLabelId = field.labelId\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n  const required = !!(field.isRequired ?? requiredProp)\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Select:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(itemsComponent)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  return (\n    <SelectContext.Provider\n      value={{\n        disabled,\n        readOnly,\n        itemsMap,\n        state,\n        itemsComponent,\n        selectedItem,\n        setValue,\n        isControlled,\n        onValueChange,\n        ariaLabel,\n        setAriaLabel,\n        fieldId,\n        fieldLabelId,\n        name,\n        required,\n        placeholder,\n        setPlaceholder,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  )\n}\n\nexport const useSelectContext = () => {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw Error('useSelectContext must be used within a Select provider')\n  }\n\n  return context\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const finder = findElement(children)\n  const trigger = finder('Trigger')\n  const items = finder('Items')\n\n  return (\n    <SelectProvider {...props} itemsComponent={items}>\n      {trigger}\n    </SelectProvider>\n  )\n}\n\nSelect.displayName = 'Select'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n  groupLabel: string\n  setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n  const [groupLabel, setGroupLabel] = useState('')\n\n  return (\n    <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n      {children}\n    </SelectGroupContext.Provider>\n  )\n}\n\nexport const useSelectGroupContext = () => {\n  const context = useContext(SelectGroupContext)\n\n  if (!context) {\n    throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <SelectGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </SelectGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { groupLabel } = useSelectGroupContext()\n\n  return (\n    <optgroup\n      data-spark-component=\"select-group\"\n      ref={forwardedRef}\n      className={cx(className)}\n      label={groupLabel}\n    >\n      {children}\n    </optgroup>\n  )\n}\n\nGroup.displayName = 'Select.Group'\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n  disabled?: boolean\n  value: string\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n  return (\n    <option\n      data-spark-component=\"select-item\"\n      ref={forwardedRef}\n      key={value}\n      value={value}\n      disabled={disabled}\n      // label\n    >\n      {children}\n    </option>\n  )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n  [\n    'absolute left-0 top-0 size-full rounded-lg opacity-0',\n    'min-h-sz-44',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline focus:ring-outline-high',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'cursor-not-allowed',\n      },\n      readOnly: {\n        true: 'cursor-default',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'hover:ring-outline-high',\n      },\n    ],\n  }\n)\n\nexport const Items = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n  const {\n    state,\n    disabled,\n    readOnly,\n    ariaLabel,\n    fieldLabelId,\n    isControlled,\n    onValueChange,\n    selectedItem,\n    setValue,\n    name,\n    required,\n    fieldId,\n  } = useSelectContext()\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    if (isControlled) {\n      event.preventDefault()\n      onValueChange?.(event.target.value)\n    } else {\n      setValue(event.target.value)\n    }\n  }\n\n  return (\n    <select\n      data-spark-component=\"select-items\"\n      ref={ref}\n      disabled={disabled || readOnly}\n      name={name}\n      required={required}\n      aria-labelledby={fieldLabelId}\n      {...(ariaLabel && { 'aria-label': ariaLabel })}\n      className={styles({ className, state, disabled, readOnly })}\n      value={selectedItem?.value}\n      onChange={handleChange}\n      id={fieldId}\n      {...rest}\n    >\n      {children}\n    </select>\n  )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n  const { setGroupLabel } = useSelectGroupContext()\n\n  useEffect(() => {\n    setGroupLabel(children)\n  }, [children])\n\n  return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n  disabled?: boolean\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n  disabled = false,\n  children,\n  ref: forwardedRef,\n}: PlaceholderProps) => {\n  const { setPlaceholder } = useSelectContext()\n\n  useEffect(() => {\n    setPlaceholder(children)\n  }, [children])\n\n  return (\n    <option\n      data-spark-component=\"select-placeholder\"\n      ref={forwardedRef}\n      key=\"placeholder\"\n      value=\"\"\n      disabled={disabled}\n    >\n      {children}\n    </option>\n  )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'relative flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-full px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus-within:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        false: 'focus-within:ring-2',\n      },\n      readOnly: {\n        true: '',\n      },\n    },\n    compoundVariants: [\n      {\n        readOnly: false,\n        disabled: false,\n        class: 'bg-surface text-on-surface',\n      },\n      {\n        readOnly: true,\n        class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n      },\n      {\n        disabled: true,\n        class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n      },\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n  useEffect(() => {\n    if (ariaLabel) {\n      setAriaLabel(ariaLabel)\n    }\n  }, [ariaLabel])\n\n  return (\n    <div\n      data-spark-component=\"select-trigger\"\n      ref={forwardedRef}\n      className={styles({ className, state, disabled, readOnly })}\n    >\n      <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n      <Icon className=\"ml-md shrink-0\" size=\"sm\">\n        <ArrowHorizontalDown />\n      </Icon>\n\n      {itemsComponent}\n    </div>\n  )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  /**\n   * Optional placeholder value for the trigger.\n   * If not specified, the value inside `Select.Placeholder` item will be used.\n   */\n  placeholder?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n  children,\n  className,\n  placeholder: customPlaceholder,\n  ref: forwardedRef,\n}: ValueProps) => {\n  const { selectedItem, placeholder, disabled } = useSelectContext()\n\n  const isPlaceholderSelected = selectedItem?.value == null\n  const valuePlaceholder = customPlaceholder || placeholder\n\n  return (\n    <span\n      role=\"presentation\"\n      data-spark-component=\"select-value\"\n      ref={forwardedRef}\n      className={cx('flex shrink items-center text-left', className)}\n    >\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n        )}\n      >\n        {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n      </span>\n    </span>\n  )\n}\n\nValue.displayName = 'Select.Value'\n","import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\nexport const Select: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  Placeholder: typeof Placeholder\n  Label: typeof Label\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  Placeholder,\n  Label,\n  Trigger,\n  Value,\n  LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n"],"mappings":";;;;;;;;AAKA,IAAa,KAAe,OAAyB,MAC7B,EAAS,QAAQ,EAAS,CAAC,OAAO,EAAe,CAElD,MAAK,MACjB,EAAsB,EAAM,EAAE,SAAS,EAAK,CACnD,EAGE,KAAyB,MACtB,IAAW,EAAQ,KAAuC,cAAc,IAG3E,KAAmB,GAAqB,IAAuB,EAAE,MACrE,EAAS,QAAQ,IAAU,MAAS;AAC7B,OAAe,EAAM,EAE1B;MACE,EAAsB,EAAM,KAAK,iBACjC,EAAsB,EAAM,KAAK,sBACjC;GACA,IAAM,IAAa,EAAM;AACzB,KAAO,KAAK;IACV,OAAO,EAAW;IAClB,UAAU,CAAC,CAAC,EAAW;IACvB,MAAM,EAAW;IAClB,CAAC;;AAGJ,EAAK,EAAM,MAAkC,YAC3C,EAAiB,EAAM,MAAkC,UAAU,EAAO;;EAE5E,EAEK,IAGI,KAAwB,MAAkC;CACrE,IAAM,oBAAmB,IAAI,KAAK;AAMlC,QAJA,EAAgB,EAAS,CAAC,SAAQ,MAAY;AAC5C,IAAO,IAAI,EAAS,OAAO,EAAS;GACpC,EAEK;GC2BH,IAAgB,EAAyC,KAAK,EAE9D,IAAY,WAEL,KAAkB,EAC7B,aACA,iBACA,OAAO,GACP,kBACA,UAAU,IAAe,IACzB,UAAU,IAAe,IACzB,OAAO,GACP,mBACA,MAAM,GACN,UAAU,QACc;CACxB,IAAM,CAAC,GAAO,KAAY,EAAiB,GAAW,GAAc,EAAc,EAC5E,CAAC,GAAa,KAAkB,EAA6B,KAAA,EAAU,EACvE,CAAC,GAAU,KAAe,EAAmB,EAAqB,EAAe,CAAC,EAClF,CAAC,GAAW,KAAgB,GAAkB,EAG9C,IAAY,EAAS,SAAS,CAAC,MAAM,EAAE,QAAQ,IAC/C,IAAe,OAAO,KAAU,WAAW,EAAS,IAAI,EAAM,GAAG,GACjE,IAAe,KAAa,MAG5B,IAAQ,GAAqB,EAC7B,IAAQ,EAAM,SAAS,GAEvB,IAAkB,GAAG,EAAU,SAAS,GAAO,IAC/C,IAAU,EAAM,MAAM,GACtB,IAAe,EAAM,SACrB,IAAW,EAAM,YAAY,GAC7B,IAAW,EAAM,YAAY,GAC7B,IAAO,EAAM,QAAQ,GACrB,IAAW,CAAC,EAAE,EAAM,cAAc;AAgCxC,QApBA,QAAgB;EACd,IAAM,IAAS,EAAqB,EAAe,EAE7C,IAAgB,CAAC,GAAG,EAAS,QAAQ,CAAC,EACtC,IAAW,CAAC,GAAG,EAAO,QAAQ,CAAC;AAWrC,GARE,EAAc,WAAW,EAAS,UAClC,EAAc,MAAM,GAAM,MAAU;GAClC,IAAM,IAAkB,EAAK,UAAU,EAAS,IAAQ,OAClD,IAAiB,EAAK,SAAS,EAAS,IAAQ;AAEtD,UAAO,KAAmB;IAC1B,KAGF,EAAY,EAAO;IAEpB,CAAC,EAAS,CAAC,EAGZ,kBAAC,EAAc,UAAf;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;EACsB,CAAA;GAIhB,UAAyB;CACpC,IAAM,IAAU,EAAW,EAAc;AAEzC,KAAI,CAAC,EACH,OAAM,MAAM,yDAAyD;AAGvE,QAAO;GC5KI,KAAU,EAAE,aAAU,GAAG,QAAyB;CAC7D,IAAM,IAAS,EAAY,EAAS,EAC9B,IAAU,EAAO,UAAU,EAC3B,IAAQ,EAAO,QAAQ;AAE7B,QACE,kBAAC,GAAD;EAAgB,GAAI;EAAO,gBAAgB;YACxC;EACc,CAAA;;AAIrB,EAAO,cAAc;;;ACRrB,IAAM,IAAqB,EAAyC,KAAK,EAE5D,KAAuB,EAAE,kBAAmC;CACvE,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAG;AAEhD,QACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;GAAE;GAAY;GAAe;EAC9D;EAC2B,CAAA;GAIrB,UAA8B;CACzC,IAAM,IAAU,EAAW,EAAmB;AAE9C,KAAI,CAAC,EACH,OAAM,MAAM,mEAAmE;AAGjF,QAAO;GCjBI,KAAS,EAAE,aAAU,KAAK,GAAc,GAAG,QAEpD,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;CAAc,KAAK;CAAc,GAAI;CAClC;CACY,CAAA,EACK,CAAA,EAIpB,KAAgB,EAAE,aAAU,cAAW,KAAK,QAA+B;CAC/E,IAAM,EAAE,kBAAe,GAAuB;AAE9C,QACE,kBAAC,YAAD;EACE,wBAAqB;EACrB,KAAK;EACL,WAAW,EAAG,EAAU;EACxB,OAAO;EAEN;EACQ,CAAA;;AAIf,EAAM,cAAc;;;AC3BpB,IAAa,KAAQ,EAAE,cAAW,IAAO,UAAO,aAAU,KAAK,QAE3D,kBAAC,UAAD;CACE,wBAAqB;CACrB,KAAK;CAEE;CACG;CAGT;CACM,EANF,EAME;AAIb,EAAK,cAAc;;;ACnBnB,IAAa,IAAS,EACpB;CACE;CACA;CAEA;CACD,EACD;CACE,UAAU;EACR,OAAO;GACL,WAAW;GACX,OAAO;GACP,OAAO;GACP,SAAS;GACV;EACD,UAAU,EACR,MAAM,sBACP;EACD,UAAU,EACR,MAAM,kBACP;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,OAAO,KAAA;EACP,OAAO;EACR,CACF;CACF,CACF,EAEY,KAAS,EACpB,aACA,cACA,QACA,GAAG,QACqD;CACxD,IAAM,EACJ,UACA,aACA,aACA,cACA,iBACA,iBACA,kBACA,iBACA,aACA,SACA,aACA,eACE,GAAkB,EAEhB,KAAgB,MAA0C;AAC9D,EAAI,KACF,EAAM,gBAAgB,EACtB,IAAgB,EAAM,OAAO,MAAM,IAEnC,EAAS,EAAM,OAAO,MAAM;;AAIhC,QACE,kBAAC,UAAD;EACE,wBAAqB;EAChB;EACL,UAAU,KAAY;EAChB;EACI;EACV,mBAAiB;EACjB,GAAK,KAAa,EAAE,cAAc,GAAW;EAC7C,WAAW,EAAO;GAAE;GAAW;GAAO;GAAU;GAAU,CAAC;EAC3D,OAAO,GAAc;EACrB,UAAU;EACV,IAAI;EACJ,GAAI;EAEH;EACM,CAAA;;AAIb,EAAM,cAAc;;;AC/EpB,IAAa,KAAS,EAAE,kBAA2B;CACjD,IAAM,EAAE,qBAAkB,GAAuB;AAMjD,QAJA,QAAgB;AACd,IAAc,EAAS;IACtB,CAAC,EAAS,CAAC,EAEP;;AAGT,EAAM,cAAc;;;ACdpB,IAAa,KAAe,EAAE,kBAE1B,kBAAC,GAAD;CAAM,MAAM;CAAM,WAAU;CACzB;CACI,CAAA;AAIX,EAAY,cAAc;;;ACF1B,IAAa,KAAe,EAC1B,cAAW,IACX,aACA,KAAK,QACiB;CACtB,IAAM,EAAE,sBAAmB,GAAkB;AAM7C,QAJA,QAAgB;AACd,IAAe,EAAS;IACvB,CAAC,EAAS,CAAC,EAGZ,kBAAC,UAAD;EACE,wBAAqB;EACrB,KAAK;EAEL,OAAM;EACI;EAET;EACM,EALH,cAKG;;AAIb,EAAY,cAAc;;;AChC1B,IAAa,IAAS,EACpB;CACE;CACA;CACA;CAEA;CACD,EACD;CACE,UAAU;EACR,OAAO;GACL,WAAW;GACX,OAAO;GACP,OAAO;GACP,SAAS;GACV;EACD,UAAU,EACR,OAAO,uBACR;EACD,UAAU,EACR,MAAM,IACP;EACF;CACD,kBAAkB;EAChB;GACE,UAAU;GACV,UAAU;GACV,OAAO;GACR;EACD;GACE,UAAU;GACV,OAAO;GACR;EACD;GACE,UAAU;GACV,OAAO,CAAC,6CAA6C,qBAAqB;GAC3E;EACD;GACE,UAAU;GACV,OAAO,KAAA;GACP,OAAO;GACR;EACF;CACF,CACF,EC5BY,KAAW,EACtB,cAAc,GACd,aACA,cACA,KAAK,QACa;CAClB,IAAM,EAAE,aAAU,aAAU,UAAO,iBAAc,sBAAmB,GAAkB;AAQtF,QANA,QAAgB;AACd,EAAI,KACF,EAAa,EAAU;IAExB,CAAC,EAAU,CAAC,EAGb,kBAAC,OAAD;EACE,wBAAqB;EACrB,KAAK;EACL,WAAW,EAAO;GAAE;GAAW;GAAO;GAAU;GAAU,CAAC;YAH7D;GAKE,kBAAC,QAAD;IAAM,WAAU;IAA0C;IAAgB,CAAA;GAE1E,kBAAC,GAAD;IAAM,WAAU;IAAiB,MAAK;cACpC,kBAAC,GAAD,EAAuB,CAAA;IAClB,CAAA;GAEN;GACG;;;AAIV,EAAQ,cAAc;;;ACjCtB,IAAa,KAAS,EACpB,aACA,cACA,aAAa,GACb,KAAK,QACW;CAChB,IAAM,EAAE,iBAAc,gBAAa,gBAAa,GAAkB,EAE5D,IAAwB,GAAc,SAAS,MAC/C,IAAmB,KAAqB;AAE9C,QACE,kBAAC,QAAD;EACE,MAAK;EACL,wBAAqB;EACrB,KAAK;EACL,WAAW,EAAG,sCAAsC,EAAU;YAE9D,kBAAC,QAAD;GACE,WAAW,EACT,+DACA,KAAyB,CAAC,KAAY,wBACvC;aAEA,IAAwB,IAAmB,KAAY,GAAc;GACjE,CAAA;EACF,CAAA;;AAIX,EAAM,cAAc;;;ACjCpB,IAAa,IAST,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAO,cAAc,UACrB,EAAM,cAAc,gBACpB,EAAM,cAAc,gBACpB,EAAK,cAAc,eACnB,EAAY,cAAc,sBAC1B,EAAM,cAAc,gBACpB,EAAQ,cAAc,kBACtB,EAAM,cAAc,gBACpB,EAAY,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/select/utils.ts","../../src/select/SelectContext.tsx","../../src/select/Select.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectValue.tsx","../../src/select/index.ts"],"sourcesContent":["import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n  const validChildren = Children.toArray(children).filter(isValidElement)\n\n  return validChildren.find(child => {\n    return getElementDisplayName(child)?.includes(name)\n  })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (\n      getElementDisplayName(child) === 'Select.Item' ||\n      getElementDisplayName(child) === 'Select.Placeholder'\n    ) {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: childProps.children,\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  ReactElement,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n  itemsMap: ItemsMap\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  itemsComponent: ReactElement | undefined\n  selectedItem: SelectItem | undefined\n  setValue: (value: string) => void\n  isControlled: boolean\n  onValueChange?: (value: string) => void\n  ariaLabel: string | undefined\n  setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n  fieldId: string\n  fieldLabelId: string | undefined\n  name: string | undefined\n  required: boolean\n  placeholder: string | undefined\n  setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n  /**\n   * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the select.\n   */\n  disabled?: boolean\n  /**\n   * Sets the select as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  itemsComponent: ReactElement | undefined\n  /**\n   * This attribute is used to specify the name of the control.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n   */\n  required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n  children,\n  defaultValue,\n  value: valueProp,\n  onValueChange,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n  itemsComponent,\n  name: nameProp,\n  required: requiredProp,\n}: SelectContextProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n  const [ariaLabel, setAriaLabel] = useState<string>()\n\n  // Computed state\n  const firstItem = itemsMap.entries().next()?.value?.[1]\n  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n  const isControlled = valueProp != null\n\n  // Derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state || stateProp\n\n  const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n  const fieldId = field.id || internalFieldID\n  const fieldLabelId = field.labelId\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n  const required = !!(field.isRequired ?? requiredProp)\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Select:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(itemsComponent)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  return (\n    <SelectContext.Provider\n      value={{\n        disabled,\n        readOnly,\n        itemsMap,\n        state,\n        itemsComponent,\n        selectedItem,\n        setValue,\n        isControlled,\n        onValueChange,\n        ariaLabel,\n        setAriaLabel,\n        fieldId,\n        fieldLabelId,\n        name,\n        required,\n        placeholder,\n        setPlaceholder,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  )\n}\n\nexport const useSelectContext = () => {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw Error('useSelectContext must be used within a Select provider')\n  }\n\n  return context\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const finder = findElement(children)\n  const trigger = finder('Trigger')\n  const items = finder('Items')\n\n  return (\n    <SelectProvider {...props} itemsComponent={items}>\n      {trigger}\n    </SelectProvider>\n  )\n}\n\nSelect.displayName = 'Select'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n  groupLabel: string\n  setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n  const [groupLabel, setGroupLabel] = useState('')\n\n  return (\n    <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n      {children}\n    </SelectGroupContext.Provider>\n  )\n}\n\nexport const useSelectGroupContext = () => {\n  const context = useContext(SelectGroupContext)\n\n  if (!context) {\n    throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <SelectGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </SelectGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { groupLabel } = useSelectGroupContext()\n\n  return (\n    <optgroup\n      data-spark-component=\"select-group\"\n      ref={forwardedRef}\n      className={cx(className)}\n      label={groupLabel}\n    >\n      {children}\n    </optgroup>\n  )\n}\n\nGroup.displayName = 'Select.Group'\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n  disabled?: boolean\n  value: string\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n  return (\n    <option\n      data-spark-component=\"select-item\"\n      ref={forwardedRef}\n      key={value}\n      value={value}\n      disabled={disabled}\n      // label\n    >\n      {children}\n    </option>\n  )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n  [\n    'absolute left-0 top-0 size-full rounded-lg opacity-0',\n    'min-h-sz-44',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline focus:ring-outline-high',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'cursor-not-allowed',\n      },\n      readOnly: {\n        true: 'cursor-default',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'hover:ring-outline-high',\n      },\n    ],\n  }\n)\n\nexport const Items = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n  const {\n    state,\n    disabled,\n    readOnly,\n    ariaLabel,\n    fieldLabelId,\n    isControlled,\n    onValueChange,\n    selectedItem,\n    setValue,\n    name,\n    required,\n    fieldId,\n  } = useSelectContext()\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    if (isControlled) {\n      event.preventDefault()\n      onValueChange?.(event.target.value)\n    } else {\n      setValue(event.target.value)\n    }\n  }\n\n  return (\n    <select\n      data-spark-component=\"select-items\"\n      ref={ref}\n      disabled={disabled || readOnly}\n      name={name}\n      required={required}\n      aria-labelledby={fieldLabelId}\n      {...(ariaLabel && { 'aria-label': ariaLabel })}\n      className={styles({ className, state, disabled, readOnly })}\n      value={selectedItem?.value}\n      onChange={handleChange}\n      id={fieldId}\n      {...rest}\n    >\n      {children}\n    </select>\n  )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n  const { setGroupLabel } = useSelectGroupContext()\n\n  useEffect(() => {\n    setGroupLabel(children)\n  }, [children])\n\n  return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n  disabled?: boolean\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n  disabled = false,\n  children,\n  ref: forwardedRef,\n}: PlaceholderProps) => {\n  const { setPlaceholder } = useSelectContext()\n\n  useEffect(() => {\n    setPlaceholder(children)\n  }, [children])\n\n  return (\n    <option\n      data-spark-component=\"select-placeholder\"\n      ref={forwardedRef}\n      key=\"placeholder\"\n      value=\"\"\n      disabled={disabled}\n    >\n      {children}\n    </option>\n  )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'relative flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-lg px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus-within:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        false: 'focus-within:ring-2',\n      },\n      readOnly: {\n        true: '',\n      },\n    },\n    compoundVariants: [\n      {\n        readOnly: false,\n        disabled: false,\n        class: 'bg-surface text-on-surface',\n      },\n      {\n        readOnly: true,\n        class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n      },\n      {\n        disabled: true,\n        class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n      },\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n  useEffect(() => {\n    if (ariaLabel) {\n      setAriaLabel(ariaLabel)\n    }\n  }, [ariaLabel])\n\n  return (\n    <div\n      data-spark-component=\"select-trigger\"\n      ref={forwardedRef}\n      className={styles({ className, state, disabled, readOnly })}\n    >\n      <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n      <Icon className=\"ml-md shrink-0\" size=\"sm\">\n        <ArrowHorizontalDown />\n      </Icon>\n\n      {itemsComponent}\n    </div>\n  )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  /**\n   * Optional placeholder value for the trigger.\n   * If not specified, the value inside `Select.Placeholder` item will be used.\n   */\n  placeholder?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n  children,\n  className,\n  placeholder: customPlaceholder,\n  ref: forwardedRef,\n}: ValueProps) => {\n  const { selectedItem, placeholder, disabled } = useSelectContext()\n\n  const isPlaceholderSelected = selectedItem?.value == null\n  const valuePlaceholder = customPlaceholder || placeholder\n\n  return (\n    <span\n      role=\"presentation\"\n      data-spark-component=\"select-value\"\n      ref={forwardedRef}\n      className={cx('flex shrink items-center text-left', className)}\n    >\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n        )}\n      >\n        {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n      </span>\n    </span>\n  )\n}\n\nValue.displayName = 'Select.Value'\n","import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\nexport const Select: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  Placeholder: typeof Placeholder\n  Label: typeof Label\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  Placeholder,\n  Label,\n  Trigger,\n  Value,\n  LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n"],"mappings":"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"}

package/dist/slider/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../label-DU0p0d-f.js`),n=require(`../FormFieldRequiredIndicator-CtgkvPZo.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@base-ui/react/slider`);var l=(0,r.cva)([`grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative`,`touch-none select-none`,`data-disabled:cursor-not-allowed data-disabled:opacity-dim-3`]),u=(0,i.createContext)({}),d=()=>(0,i.useContext)(u),f=({intent:e=`support`,children:t,className:n,ref:r,value:o,defaultValue:d,disabled:f,readOnly:p,name:m,onValueChange:h,onValueCommit:g,min:_=0,max:v=100,...y})=>{let b=(0,s.useFormFieldControl)(),x=b.disabled??f,S=b.readOnly??p,C=b.name??m,[w,T]=(0,i.useState)(b.labelId),[E,D]=(0,i.useState)(0),O=(0,i.useRef)(null),k=(0,i.useRef)(null),A=(0,i.useCallback)(e=>{T(e)},[]),j=(0,i.useCallback)(()=>(D(e=>e+1),()=>D(e=>e-1)),[]);return(0,a.jsx)(u.Provider,{value:{intent:e,min:_,max:v,fieldLabelId:b.labelId||w,fieldId:b.id,onLabelId:A,hasValueInThumb:E>0,registerValueInThumb:j,controlRef:O,thumbRef:k},children:(0,a.jsx)(c.Slider.Root,{ref:r,"data-spark-component":`slider`,className:l({className:n}),orientation:`horizontal`,disabled:x||S,thumbAlignment:`edge`,name:C,"aria-describedby":b.description,"aria-invalid":b.isInvalid,"aria-disabled":x||S?!0:void 0,value:o===void 0?void 0:[o],defaultValue:d===void 0?void 0:[d],onValueChange:h?e=>{h(Array.isArray(e)?e[0]??0:e)}:void 0,onValueCommitted:g?e=>{g(Array.isArray(e)?e[0]??0:e)}:void 0,min:_,max:v,...y,children:t})})};f.displayName=`Slider`;var p=({className:e,ref:t,...n})=>{let{hasValueInThumb:i,controlRef:s}=d(),l=(0,o.useMergeRefs)(s,t);return(0,a.jsx)(c.Slider.Control,{"data-spark-component":`slider-control`,ref:l,className:(0,r.cx)(`min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center`,i&&`mt-xl`,e),...n})};p.displayName=`Slider.Control`;var m=(0,r.cva)([`relative grow h-sz-4 bg-on-background/dim-4 rounded-sm`]),h=(0,r.cva)([`absolute h-full rounded-sm`,`transition-none`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],accent:[`bg-accent`],info:[`bg-info`],neutral:[`bg-neutral`],success:[`bg-success`],alert:[`bg-alert`],error:[`bg-error`]}},defaultVariants:{intent:`support`}}),g=({className:e,ref:t,...n})=>{let{intent:r}=d();return(0,a.jsx)(c.Slider.Indicator,{"data-spark-component":`slider-indicator`,ref:t,className:h({intent:r,className:e}),...n})};g.displayName=`Slider.Indicator`;var _=`:slider-label`,v=({htmlFor:c,id:l,className:u,children:f,requiredIndicator:p=(0,a.jsx)(n.t,{}),asChild:m,ref:h,...g})=>{let v=(0,s.useFormFieldControl)(),{fieldLabelId:y,fieldId:b,onLabelId:x}=d(),S=`${_}-${(0,i.useId)()}`,C=l||y||v.labelId||S,w=m?void 0:c||b||v.id,T=v.disabled,E=v.isRequired,D=(0,o.useMergeRefs)(h,(0,i.useRef)(null));return(0,i.useEffect)(()=>{x&&!y&&!v.labelId&&x(C)},[x,y,v.labelId,C]),(0,a.jsx)(t.t,{ref:D,id:C,"data-spark-component":`slider-label`,htmlFor:w,className:(0,r.cx)(T?`text-on-surface/dim-3 pointer-events-none`:void 0,u),asChild:m,...g,children:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.Slottable,{children:f}),E&&p]})})};v.displayName=`Slider.Label`;var y=(0,i.forwardRef)(({className:e,children:t},n)=>{let{max:i=100}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-max-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-2 text-right`,e),children:o})});y.displayName=`Slider.MaxValue`;var b=(0,i.forwardRef)(({className:e,children:t},n)=>{let{min:i=0}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-min-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-1 text-left`,e),children:o})});b.displayName=`Slider.MinValue`;var x=(0,r.cva)([`relative block size-sz-24 rounded-full cursor-pointer`,`outline-hidden`,`has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus`,`data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden`,`after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:size-sz-24 after:rounded-full`,`before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2`,`before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75`,`hover:before:size-sz-32 data-dragging:before:size-sz-32`],{variants:{intent:{main:[`after:bg-main`,`before:bg-main-container before:border-main`],support:[`after:bg-support`,`before:bg-support-container before:border-support`],accent:[`after:bg-accent`,`before:bg-accent-container before:border-accent`],info:[`after:bg-info`,`before:bg-info-container before:border-info`],neutral:[`after:bg-neutral`,`before:bg-neutral-container before:border-neutral`],success:[`after:bg-success`,`before:bg-success-container before:border-success`],alert:[`after:bg-alert`,`before:bg-alert-container before:border-alert`],error:[`after:bg-error`,`before:bg-error-container before:border-error`]}},defaultVariants:{intent:`support`}}),S=(0,i.createContext)(null),C=()=>(0,i.useContext)(S),w=({className:e,ref:t,children:n,...r})=>{let{intent:s,fieldLabelId:l,fieldId:u,thumbRef:f}=d(),p=(0,i.useRef)(null),m=(0,o.useMergeRefs)(f,t??p);return(0,a.jsx)(S.Provider,{value:{isInsideThumb:!0},children:(0,a.jsx)(c.Slider.Thumb,{"data-spark-component":`slider-thumb`,ref:m,id:u,className:x({intent:s,className:e}),"aria-labelledby":l,...r,children:n})})};w.displayName=`Slider.Thumb`;var T=({className:e,ref:t,...n})=>(0,a.jsx)(c.Slider.Track,{"data-spark-component":`slider-track`,ref:t,className:m({className:e}),...n});T.displayName=`Slider.Track`;function E(e,t,n,r){let[a,o]=(0,i.useState)(0),[s,c]=(0,i.useState)(!1);return(0,i.useLayoutEffect)(()=>{let r=e.current,i=t.current,a=n.current;if(!r||!i||!a){o(0),s||requestAnimationFrame(()=>c(!0));return}let l=!1,u=()=>{if(l)return;let e=r.getBoundingClientRect(),t=i.getBoundingClientRect(),n=a.scrollWidth;if(n===0){requestAnimationFrame(u);return}let s=t.left-e.left+t.width/2,c=n/2,d=e.width-n/2,f=Math.max(c,Math.min(d,s))-s;o(e=>e===f?e:f)};u();let d=new ResizeObserver(u);return d.observe(r),d.observe(a),()=>{l=!0,d.disconnect()}},[e,t,n,r,s]),a}var D=({className:e,children:t,ref:n,...s})=>{let{registerValueInThumb:l,controlRef:u,thumbRef:f}=d(),p=C()!==null,m=(0,i.useRef)(null),h=(0,o.useMergeRefs)(m,n),[g,_]=(0,i.useState)(0),v=E(u,f,m,g);(0,i.useEffect)(()=>{if(p)return l()},[p,l]);let y=(0,r.cx)(p?`absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap`:`default:text-body-1 col-start-2 text-right default:font-bold`,e),b=(0,i.useCallback)((e,n)=>{let r=e[0]??String(n[0]??``),i=n[0]??0;return _(i),typeof t==`function`?t(r,i):r},[t]),x=p?{transform:`translate(calc(0% + ${v}px), 0)`}:void 0;return(0,a.jsx)(c.Slider.Value,{"data-spark-component":`slider-value`,ref:h,className:y,style:x,...s,children:b})};D.displayName=`Slider.Value`;var O=Object.assign(f,{Control:p,Indicator:g,Label:v,MaxValue:y,MinValue:b,Thumb:w,Track:T,Value:D});O.displayName=`Slider`,p.displayName=`Slider.Control`,g.displayName=`Slider.Indicator`,v.displayName=`Slider.Label`,y.displayName=`Slider.MaxValue`,b.displayName=`Slider.MinValue`,w.displayName=`Slider.Thumb`,T.displayName=`Slider.Track`,D.displayName=`Slider.Value`,exports.Slider=O;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../label-BCSEss4U.js`),n=require(`../FormFieldRequiredIndicator-CEB8Ez-q.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@base-ui/react/slider`);var l=(0,r.cva)([`grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative`,`touch-none select-none`,`data-disabled:cursor-not-allowed data-disabled:opacity-dim-3`]),u=(0,i.createContext)({}),d=()=>(0,i.useContext)(u),f=({intent:e=`support`,children:t,className:n,ref:r,value:o,defaultValue:d,disabled:f,readOnly:p,name:m,onValueChange:h,onValueCommit:g,min:_=0,max:v=100,...y})=>{let b=(0,s.useFormFieldControl)(),x=b.disabled??f,S=b.readOnly??p,C=b.name??m,[w,T]=(0,i.useState)(b.labelId),[E,D]=(0,i.useState)(0),O=(0,i.useRef)(null),k=(0,i.useRef)(null),A=(0,i.useCallback)(e=>{T(e)},[]),j=(0,i.useCallback)(()=>(D(e=>e+1),()=>D(e=>e-1)),[]);return(0,a.jsx)(u.Provider,{value:{intent:e,min:_,max:v,fieldLabelId:b.labelId||w,fieldId:b.id,onLabelId:A,hasValueInThumb:E>0,registerValueInThumb:j,controlRef:O,thumbRef:k},children:(0,a.jsx)(c.Slider.Root,{ref:r,"data-spark-component":`slider`,className:l({className:n}),orientation:`horizontal`,disabled:x||S,thumbAlignment:`edge`,name:C,"aria-describedby":b.description,"aria-invalid":b.isInvalid,"aria-disabled":x||S?!0:void 0,value:o===void 0?void 0:[o],defaultValue:d===void 0?void 0:[d],onValueChange:h?e=>{h(Array.isArray(e)?e[0]??0:e)}:void 0,onValueCommitted:g?e=>{g(Array.isArray(e)?e[0]??0:e)}:void 0,min:_,max:v,...y,children:t})})};f.displayName=`Slider`;var p=({className:e,ref:t,...n})=>{let{hasValueInThumb:i,controlRef:s}=d(),l=(0,o.useMergeRefs)(s,t);return(0,a.jsx)(c.Slider.Control,{"data-spark-component":`slider-control`,ref:l,className:(0,r.cx)(`min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center`,i&&`mt-xl`,e),...n})};p.displayName=`Slider.Control`;var m=(0,r.cva)([`relative grow h-sz-4 bg-on-background/dim-4 rounded-sm`]),h=(0,r.cva)([`absolute h-full rounded-sm`,`transition-none`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],accent:[`bg-accent`],info:[`bg-info`],neutral:[`bg-neutral`],success:[`bg-success`],alert:[`bg-alert`],error:[`bg-error`]}},defaultVariants:{intent:`support`}}),g=({className:e,ref:t,...n})=>{let{intent:r}=d();return(0,a.jsx)(c.Slider.Indicator,{"data-spark-component":`slider-indicator`,ref:t,className:h({intent:r,className:e}),...n})};g.displayName=`Slider.Indicator`;var _=`:slider-label`,v=({htmlFor:c,id:l,className:u,children:f,requiredIndicator:p=(0,a.jsx)(n.t,{}),asChild:m,ref:h,...g})=>{let v=(0,s.useFormFieldControl)(),{fieldLabelId:y,fieldId:b,onLabelId:x}=d(),S=`${_}-${(0,i.useId)()}`,C=l||y||v.labelId||S,w=m?void 0:c||b||v.id,T=v.disabled,E=v.isRequired,D=(0,o.useMergeRefs)(h,(0,i.useRef)(null));return(0,i.useEffect)(()=>{x&&!y&&!v.labelId&&x(C)},[x,y,v.labelId,C]),(0,a.jsx)(t.t,{ref:D,id:C,"data-spark-component":`slider-label`,htmlFor:w,className:(0,r.cx)(T?`text-on-surface/dim-3 pointer-events-none`:void 0,u),asChild:m,...g,children:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.Slottable,{children:f}),E&&p]})})};v.displayName=`Slider.Label`;var y=(0,i.forwardRef)(({className:e,children:t},n)=>{let{max:i=100}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-max-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-2 text-right`,e),children:o})});y.displayName=`Slider.MaxValue`;var b=(0,i.forwardRef)(({className:e,children:t},n)=>{let{min:i=0}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-min-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-1 text-left`,e),children:o})});b.displayName=`Slider.MinValue`;var x=(0,r.cva)([`relative block size-sz-24 rounded-full cursor-pointer`,`outline-hidden`,`has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus`,`data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden`,`after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:size-sz-24 after:rounded-full`,`before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2`,`before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75`,`hover:before:size-sz-32 data-dragging:before:size-sz-32`],{variants:{intent:{main:[`after:bg-main`,`before:bg-main-container before:border-main`],support:[`after:bg-support`,`before:bg-support-container before:border-support`],accent:[`after:bg-accent`,`before:bg-accent-container before:border-accent`],info:[`after:bg-info`,`before:bg-info-container before:border-info`],neutral:[`after:bg-neutral`,`before:bg-neutral-container before:border-neutral`],success:[`after:bg-success`,`before:bg-success-container before:border-success`],alert:[`after:bg-alert`,`before:bg-alert-container before:border-alert`],error:[`after:bg-error`,`before:bg-error-container before:border-error`]}},defaultVariants:{intent:`support`}}),S=(0,i.createContext)(null),C=()=>(0,i.useContext)(S),w=({className:e,ref:t,children:n,...r})=>{let{intent:s,fieldLabelId:l,fieldId:u,thumbRef:f}=d(),p=(0,i.useRef)(null),m=(0,o.useMergeRefs)(f,t??p);return(0,a.jsx)(S.Provider,{value:{isInsideThumb:!0},children:(0,a.jsx)(c.Slider.Thumb,{"data-spark-component":`slider-thumb`,ref:m,id:u,className:x({intent:s,className:e}),"aria-labelledby":l,...r,children:n})})};w.displayName=`Slider.Thumb`;var T=({className:e,ref:t,...n})=>(0,a.jsx)(c.Slider.Track,{"data-spark-component":`slider-track`,ref:t,className:m({className:e}),...n});T.displayName=`Slider.Track`;function E(e,t,n,r){let[a,o]=(0,i.useState)(0),[s,c]=(0,i.useState)(!1);return(0,i.useLayoutEffect)(()=>{let r=e.current,i=t.current,a=n.current;if(!r||!i||!a){o(0),s||requestAnimationFrame(()=>c(!0));return}let l=!1,u=()=>{if(l)return;let e=r.getBoundingClientRect(),t=i.getBoundingClientRect(),n=a.scrollWidth;if(n===0){requestAnimationFrame(u);return}let s=t.left-e.left+t.width/2,c=n/2,d=e.width-n/2,f=Math.max(c,Math.min(d,s))-s;o(e=>e===f?e:f)};u();let d=new ResizeObserver(u);return d.observe(r),d.observe(a),()=>{l=!0,d.disconnect()}},[e,t,n,r,s]),a}var D=({className:e,children:t,ref:n,...s})=>{let{registerValueInThumb:l,controlRef:u,thumbRef:f}=d(),p=C()!==null,m=(0,i.useRef)(null),h=(0,o.useMergeRefs)(m,n),[g,_]=(0,i.useState)(0),v=E(u,f,m,g);(0,i.useEffect)(()=>{if(p)return l()},[p,l]);let y=(0,r.cx)(p?`absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap`:`default:text-body-1 col-start-2 text-right default:font-bold`,e),b=(0,i.useCallback)((e,n)=>{let r=e[0]??String(n[0]??``),i=n[0]??0;return _(i),typeof t==`function`?t(r,i):r},[t]),x=p?{transform:`translate(calc(0% + ${v}px), 0)`}:void 0;return(0,a.jsx)(c.Slider.Value,{"data-spark-component":`slider-value`,ref:h,className:y,style:x,...s,children:b})};D.displayName=`Slider.Value`;var O=Object.assign(f,{Control:p,Indicator:g,Label:v,MaxValue:y,MinValue:b,Thumb:w,Track:T,Value:D});O.displayName=`Slider`,p.displayName=`Slider.Control`,g.displayName=`Slider.Indicator`,v.displayName=`Slider.Label`,y.displayName=`Slider.MaxValue`,b.displayName=`Slider.MinValue`,w.displayName=`Slider.Thumb`,T.displayName=`Slider.Track`,D.displayName=`Slider.Value`,exports.Slider=O;
 //# sourceMappingURL=index.js.map

package/dist/slider/index.mjs

@@ -1,6 +1,6 @@
 import { Slottable as e } from "../slot/index.mjs";
-import { t } from "../label-BqRlrca0.mjs";
-import { t as n } from "../FormFieldRequiredIndicator-DOGQ_HxO.mjs";
+import { t } from "../label-DDBRKLUX.mjs";
+import { t as n } from "../FormFieldRequiredIndicator-CzdpinIz.mjs";
 import { cva as r, cx as i } from "class-variance-authority";
 import { createContext as a, forwardRef as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f, useState as p } from "react";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";

package/dist/src/button/Button.d.ts

@@ -18,9 +18,15 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'd
      * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**
      */
     loadingText?: string;
+    /**
+     * When true, the button is non-interactive and has disabled styling but stays focusable (uses
+     * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to
+     * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).
+     */
+    ariaDisabled?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 export declare const Button: {
-    ({ children, design, disabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, underline, ref, ...others }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, design, disabled, ariaDisabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, underline, ref, ...others }: ButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/src/table/ResizableTableContainer.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { ResizableTableContainer as AriaResizableTableContainer } from 'react-aria-components';
+export interface ResizableTableContainerProps extends Omit<ComponentProps<typeof AriaResizableTableContainer>, 'className'> {
+    className?: string;
+}
+export declare function ResizableTableContainer({ className, children, ...props }: ResizableTableContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ResizableTableContainer {
+    var displayName: string;
+}

package/dist/src/table/Table.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { TableProps as AriaTableProps } from 'react-aria-components';
+import { ResizableTableContainerProps } from './ResizableTableContainer';
+export interface TableProps extends Omit<AriaTableProps, 'className'>, Pick<ResizableTableContainerProps, 'onResizeStart' | 'onResize' | 'onResizeEnd'> {
+    className?: string;
+    onKeyDownCapture?: React.KeyboardEventHandler<Element>;
+    /** When true (default), columns can be resized. Pass onResizeStart, onResize, onResizeEnd to react to resize events. */
+    allowsResizing?: boolean;
+    /** Max height of the scroll container (number in px or CSS value). Applied so vertical and horizontal scrollbars share the same container. */
+    maxHeight?: number | string;
+    /** For BulkBar: total number of items (e.g. for "Select all X items"). */
+    totalCount?: number;
+    /** When true, BulkBar shows "Clear all" and "Select all" buttons. */
+    hasMultiplePages?: boolean;
+    /**
+     * Called when user clicks "Clear all" in BulkBar.
+     * Useful with pagination selection models (e.g. `useTablePagination`) where clearing only the
+     * current page would be incorrect.
+     */
+    onClearSelection?: () => void;
+    /** Called when user clicks "Select all" in BulkBar. */
+    onSelectAll?: () => void;
+}
+export interface TableRootWrapperProps extends TableProps {
+    children: ReactNode;
+}
+export declare function TableRootWrapper({ children, className, selectedKeys, onSelectionChange, totalCount, hasMultiplePages, onClearSelection: onClearSelectionProp, onSelectAll, allowsResizing, maxHeight, onResizeStart, onResize, onResizeEnd, onKeyDownCapture, sortDescriptor, onSortChange, ...restProps }: TableRootWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableRootWrapper {
+    var displayName: string;
+}
+export declare const TableRoot: {
+    ({ className, onKeyDownCapture, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface TableGridProps {
+    /** Required for accessibility. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function TableGrid({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className: gridClassName, children, }: TableGridProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableGrid {
+    var displayName: string;
+}

package/dist/src/table/Table.styles.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const columnStyles: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const columnHeaderContentStyles: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const tableBodyStyles: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const cellStyles: (props?: ({
+    checkbox?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Spacer row: 16px (md) visual gap between header and first data row. Use as first child of tbody. */
+export declare const tableBodySpacerRowStyles: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ColumnStylesProps = VariantProps<typeof columnStyles>;
+export type CellStylesProps = VariantProps<typeof cellStyles>;

package/dist/src/table/TableBody.d.ts

@@ -0,0 +1,8 @@
+import { TableBodyProps as AriaTableBodyProps } from 'react-aria-components';
+export interface TableBodyProps<T extends object = object> extends Omit<AriaTableBodyProps<T>, 'className'> {
+    className?: string;
+}
+export declare function TableBody<T extends object>({ className, renderEmptyState, ...props }: TableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableBody {
+    var displayName: string;
+}

package/dist/src/table/TableBulkBar.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button';
+export interface TableBulkBarProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function TableBulkBarRoot({ children, className }: TableBulkBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableBulkBarRoot {
+    var displayName: string;
+}
+declare function TableBulkBarSelectedCount({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace TableBulkBarSelectedCount {
+    var displayName: string;
+}
+type BulkBarButtonProps = Omit<ButtonProps, 'onClick'>;
+declare function TableBulkBarClearButton({ className, children, ...props }: BulkBarButtonProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace TableBulkBarClearButton {
+    var displayName: string;
+}
+declare function TableBulkBarSelectAllButton({ className, children, ...props }: BulkBarButtonProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace TableBulkBarSelectAllButton {
+    var displayName: string;
+}
+export declare const TableBulkBar: typeof TableBulkBarRoot;
+export { TableBulkBarSelectedCount, TableBulkBarClearButton, TableBulkBarSelectAllButton };

package/dist/src/table/TableCell.d.ts

@@ -0,0 +1,10 @@
+import { CellProps as AriaCellProps } from 'react-aria-components';
+export interface CellProps extends Omit<AriaCellProps, 'className'> {
+    className?: string;
+    /** When true, cell uses same width + padding as the TableSelectionCheckbox header column. */
+    checkbox?: boolean;
+}
+export declare function Cell({ className, checkbox, onClick, onPointerDown, ...props }: CellProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Cell {
+    var displayName: string;
+}

package/dist/src/table/TableColumn.d.ts

@@ -0,0 +1,12 @@
+import { ColumnProps as AriaColumnProps } from 'react-aria-components';
+export interface ColumnProps extends Omit<AriaColumnProps, 'className'> {
+    className?: string;
+    children?: AriaColumnProps['children'];
+    label: string;
+    /** When false, the column cannot be resized. When true or omitted, the column can be resized when the Table has allowsResizing. */
+    allowsResizing?: boolean;
+}
+export declare function Column({ className, label, children, allowsResizing, minWidth, ...props }: ColumnProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Column {
+    var displayName: string;
+}

package/dist/src/table/TableContext.d.ts

@@ -0,0 +1,28 @@
+import { Selection, SortDescriptor } from 'react-aria-components';
+import { ResizableTableContainerProps } from './ResizableTableContainer';
+export interface TableResizableContextValue {
+    isResizable: boolean;
+}
+export declare const TableResizableContext: import('react').Context<TableResizableContextValue>;
+export declare function useTableResizableContext(): TableResizableContextValue;
+/** Values provided by Table (root) and consumed by Table.Grid and Table.BulkBar. */
+export interface TableContextValue extends Pick<ResizableTableContainerProps, 'onResizeStart' | 'onResize' | 'onResizeEnd'> {
+    selectionMode?: 'none' | 'single' | 'multiple';
+    selectionBehavior?: 'toggle' | 'replace';
+    selectedKeys?: Selection;
+    onSelectionChange?: (keys: Selection) => void;
+    totalCount?: number;
+    hasMultiplePages?: boolean;
+    onSelectAll?: () => void;
+    selectedCount: number;
+    onClearSelection: () => void;
+    allowsResizing?: boolean;
+    maxHeight?: number | string;
+    onKeyDownCapture?: React.KeyboardEventHandler<Element>;
+    sortDescriptor?: SortDescriptor;
+    onSortChange?: (descriptor: SortDescriptor) => void;
+    className?: string;
+    [key: string]: unknown;
+}
+export declare const TableContext: import('react').Context<TableContextValue>;
+export declare function useTableContext(): TableContextValue;

package/dist/src/table/TableHeader.d.ts

@@ -0,0 +1,10 @@
+import { TableHeaderProps as AriaTableHeaderProps } from 'react-aria-components';
+export interface TableHeaderProps<T extends object = object> extends Omit<AriaTableHeaderProps<T>, 'className'> {
+    className?: string;
+    /** When true (default), the header row is sticky with z-raised and top-0. */
+    sticky?: boolean;
+}
+export declare function TableHeader<T extends object>({ className, columns, children, sticky, ...props }: TableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableHeader {
+    var displayName: string;
+}

package/dist/src/table/TableHeaderSelectionCheckbox.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Header "select all" checkbox that bases its checked/indeterminate state only
+ * on the currently visible (rendered) rows. So when the user changes page in a
+ * paginated table, the header shows unchecked instead of indeterminate when no
+ * visible row is selected.
+ *
+ * Renders the Checkbox directly and calls selectionManager.toggleSelectAll() so
+ * we fully control the displayed state instead of overriding React Aria's context.
+ */
+export declare function TableHeaderSelectionCheckbox(): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableHeaderSelectionCheckbox {
+    var displayName: string;
+}

package/dist/src/table/TableRow.d.ts

@@ -0,0 +1,8 @@
+import { RowProps as AriaRowProps } from 'react-aria-components';
+export interface RowProps<T extends object = object> extends Omit<AriaRowProps<T>, 'className'> {
+    className?: string;
+}
+export declare function Row<T extends object>({ id, columns, children, className, ...props }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Row {
+    var displayName: string;
+}

package/dist/src/table/TableSelectionCheckbox.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Adapter that receives table selection state from React Aria's CheckboxContext
+ * and renders Spark Checkbox. Used for row selection and "select all" in table header.
+ */
+export declare const TableSelectionCheckbox: import('react').ForwardRefExoticComponent<Omit<import('../checkbox/CheckboxInput').CheckboxInputProps & Pick<import('../checkbox/CheckboxGroupContext').CheckboxGroupContextState, "reverse"> & {
+    ref?: import('react').Ref<HTMLButtonElement>;
+}, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/table/index.d.mts

@@ -0,0 +1,31 @@
+import { TableGrid, TableRootWrapper } from './Table';
+import { TableBody } from './TableBody';
+import { TableBulkBar, TableBulkBarClearButton, TableBulkBarSelectAllButton, TableBulkBarSelectedCount } from './TableBulkBar';
+import { Cell } from './TableCell';
+import { Column } from './TableColumn';
+import { TableHeader } from './TableHeader';
+import { Row } from './TableRow';
+export declare const TableWithSubcomponents: typeof TableRootWrapper & {
+    Grid: typeof TableGrid;
+    Header: typeof TableHeader;
+    Column: typeof Column;
+    Body: typeof TableBody;
+    Row: typeof Row;
+    Cell: typeof Cell;
+    BulkBar: typeof TableBulkBar;
+    BulkBarSelectedCount: typeof TableBulkBarSelectedCount;
+    BulkBarClearButton: typeof TableBulkBarClearButton;
+    BulkBarSelectAllButton: typeof TableBulkBarSelectAllButton;
+};
+export { TableWithSubcomponents as Table };
+export { useTableSort } from './useTableSort';
+export { useTablePagination } from './useTablePagination';
+export type { SortDescriptor } from 'react-aria-components';
+export type { UseTableSortOptions } from './useTableSort';
+export type { UseTablePaginationOptions, UseTablePaginationResult } from './useTablePagination';
+export { type TableGridProps, type TableProps, type TableRootWrapperProps } from './Table';
+export { type TableHeaderProps } from './TableHeader';
+export { type ColumnProps } from './TableColumn';
+export { type TableBodyProps } from './TableBody';
+export { type RowProps } from './TableRow';
+export { type CellProps } from './TableCell';

package/dist/src/table/index.d.ts

@@ -0,0 +1,31 @@
+import { TableGrid, TableRootWrapper } from './Table';
+import { TableBody } from './TableBody';
+import { TableBulkBar, TableBulkBarClearButton, TableBulkBarSelectAllButton, TableBulkBarSelectedCount } from './TableBulkBar';
+import { Cell } from './TableCell';
+import { Column } from './TableColumn';
+import { TableHeader } from './TableHeader';
+import { Row } from './TableRow';
+export declare const TableWithSubcomponents: typeof TableRootWrapper & {
+    Grid: typeof TableGrid;
+    Header: typeof TableHeader;
+    Column: typeof Column;
+    Body: typeof TableBody;
+    Row: typeof Row;
+    Cell: typeof Cell;
+    BulkBar: typeof TableBulkBar;
+    BulkBarSelectedCount: typeof TableBulkBarSelectedCount;
+    BulkBarClearButton: typeof TableBulkBarClearButton;
+    BulkBarSelectAllButton: typeof TableBulkBarSelectAllButton;
+};
+export { TableWithSubcomponents as Table };
+export { useTableSort } from './useTableSort';
+export { useTablePagination } from './useTablePagination';
+export type { SortDescriptor } from 'react-aria-components';
+export type { UseTableSortOptions } from './useTableSort';
+export type { UseTablePaginationOptions, UseTablePaginationResult } from './useTablePagination';
+export { type TableGridProps, type TableProps, type TableRootWrapperProps } from './Table';
+export { type TableHeaderProps } from './TableHeader';
+export { type ColumnProps } from './TableColumn';
+export { type TableBodyProps } from './TableBody';
+export { type RowProps } from './TableRow';
+export { type CellProps } from './TableCell';

package/dist/src/table/table-utils.d.ts

@@ -0,0 +1,2 @@
+export declare function isInteractiveElement(element: EventTarget | null): element is Element;
+export declare function isColumnResizerElement(element: EventTarget | null): element is Element;

package/dist/src/table/useTablePagination.d.ts

@@ -0,0 +1,76 @@
+import { Key, Selection } from 'react-aria-components';
+export interface UseTablePaginationOptions<T> {
+    /** Number of items per page. */
+    pageSize: number;
+    /** Initial page index (1-based). Defaults to 1. */
+    initialPage?: number;
+    /**
+     * Function to extract a stable key from each item.
+     * Defaults to `item.id` if present.
+     */
+    getId?: (item: T) => Key;
+}
+export interface UseTablePaginationResult<T> {
+    /** Current page (1-based). */
+    page: number;
+    /** Update the current page manually. */
+    setPage: (page: number) => void;
+    /** Items sliced to the current page. */
+    pageItems: T[];
+    /** Total number of items. */
+    totalItems: number;
+    /** Total number of pages (at least 1). */
+    totalPages: number;
+    /** All item keys across all pages. */
+    allKeys: Set<Key>;
+    /**
+     * Selection state across all pages.
+     * Pass to Table (root) as `selectedKeys`.
+     */
+    selectedKeys: Set<Key>;
+    /**
+     * Selection change handler that keeps selection across pages.
+     * Pass to Table (root) as `onSelectionChange`.
+     */
+    onSelectionChange: (keys: Selection) => void;
+    /**
+     * Convenience handler matching Pagination's `onPageChange` signature:
+     * `onPageChange={({ page }) => ...}`.
+     */
+    onPageChange: (details: {
+        page: number;
+    }) => void;
+    /** Clear selection across all pages. */
+    clearSelection: () => void;
+}
+/**
+ * Hook to manage simple client-side pagination and multi-page selection for Table.
+ * It slices the full item list to the current page, tracks page state, and merges
+ * selection across pages so that rows selected on previous pages remain selected.
+ *
+ * @example
+ * const { page, pageItems, totalItems, allKeys, selectedKeys, onSelectionChange, onPageChange } =
+ *   useTablePagination(allItems, { pageSize: 10 })
+ *
+ * return (
+ *   <Table
+ *     selectionMode="multiple"
+ *     selectedKeys={selectedKeys}
+ *     onSelectionChange={onSelectionChange}
+ *     totalCount={totalItems}
+ *     hasMultiplePages={totalItems > 10}
+ *     onSelectAll={() => onSelectionChange(allKeys)}
+ *   >
+ *     <Table.BulkBar>...</Table.BulkBar>
+ *     <Table.Grid aria-label="Items">
+ *       <Table.Body>
+ *         {pageItems.map(item => (
+ *           <Table.Row key={item.id} id={item.id}>...</Table.Row>
+ *         ))}
+ *       </Table.Body>
+ *     </Table.Grid>
+ *     <Pagination page={page} pageSize={10} count={totalItems} onPageChange={onPageChange} />
+ *   </Table>
+ * )
+ */
+export declare function useTablePagination<T>(items: T[], options: UseTablePaginationOptions<T>): UseTablePaginationResult<T>;

package/dist/src/table/useTableSort.d.ts

@@ -0,0 +1,38 @@
+import { SortDescriptor } from 'react-aria-components';
+export interface UseTableSortOptions<T extends object> {
+    /** Initial sort column and direction. */
+    initialSort?: {
+        column: keyof T;
+        direction: 'ascending' | 'descending';
+    };
+    /**
+     * Custom compare function. If not provided, a default comparator is used:
+     * - numbers: numeric comparison
+     * - other: localeCompare on string representation
+     */
+    compare?: (a: T, b: T, column: keyof T, direction: 'ascending' | 'descending') => number;
+}
+/**
+ * Hook to manage table sort state and derive sorted items from a list.
+ * Use with Table's sortDescriptor and onSortChange props.
+ *
+ * @example
+ * const { sortDescriptor, onSortChange, setSortDescriptor, sortedItems } = useTableSort(rows, {
+ *   initialSort: { column: 'name', direction: 'ascending' },
+ * })
+ * return (
+ *   <>
+ *     <Button onClick={() => setSortDescriptor({ column: 'name', direction: 'ascending' })}>Reset sort</Button>
+ *     <Table sortDescriptor={sortDescriptor} onSortChange={onSortChange}>
+ *       ...
+ *     </Table>
+ *   </>
+ * )
+ */
+export declare function useTableSort<T extends object>(items: T[], options?: UseTableSortOptions<T>): {
+    sortDescriptor: SortDescriptor;
+    onSortChange: (descriptor: SortDescriptor) => void;
+    /** Set sort from outside the table (e.g. a "Reset sort" button). */
+    setSortDescriptor: (descriptor: SortDescriptor) => void;
+    sortedItems: T[];
+};

package/dist/src/toast/Toast.styles.d.ts

@@ -3,8 +3,4 @@ export declare const toastStyles: (props?: ({
     design?: "filled" | "tinted" | null | undefined;
     intent?: "main" | "alert" | "error" | "support" | "accent" | "success" | "info" | "neutral" | "surface" | "surfaceInverse" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const snackbarItemVariantContent: (props?: ({
-    actionOnNewline?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ToastVariantProps = VariantProps<typeof toastStyles>;
-export type SnackbarItemVariantContentProps = VariantProps<typeof snackbarItemVariantContent>;

package/dist/stepper/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-D1Lg6gvI.js`),n=require(`../input-C8JGTQf_.js`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/icons/Minus`),c=require(`@react-aria/numberfield`),l=require(`@react-stately/numberfield`),u=require(`@react-aria/button`),d=require(`@spark-ui/icons/Plus`);var f=({inputRef:e,locale:t=`fr`,...n})=>{let r=(0,l.useNumberFieldState)({...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required,locale:t}),{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}=(0,c.useNumberField)({isWheelDisabled:!1,...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required},r,e);return{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}},p=(0,r.createContext)(null),m=({children:e,formatOptions:t,minValue:a,maxValue:s,ref:c,...l})=>{let u=(0,r.useRef)(null),{groupProps:d,inputProps:m,incrementButtonProps:h,decrementButtonProps:g}=f({...l,...`value`in l&&{value:l.value??NaN},onChange:l.onValueChange,formatOptions:t,minValue:a,maxValue:s,inputRef:u}),_=(0,o.useFormFieldControl)(),v=!!_.id,y={...h,...v&&{"aria-controls":_.id}},b={...g,...v&&{"aria-controls":_.id}},x={...m,...v&&{id:_.id,required:_.isRequired,"aria-invalid":_.isInvalid?!0:void 0}},{onValueChange:S,...C}=l;return(0,i.jsx)(p.Provider,{value:{incrementButtonProps:y,decrementButtonProps:b,inputProps:x,inputRef:u},children:(0,i.jsx)(n.t,{...C,...d,"data-spark-component":`stepper`,ref:c,children:e})})};m.displayName=`Stepper`;var h=()=>{let e=(0,r.useContext)(p);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},g=({children:a,design:o=`ghost`,intent:s=`neutral`,className:c,ref:l,...f})=>{let p=(0,r.useRef)(null),m=l&&typeof l!=`function`?l:p,{incrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.TrailingAddon,{asChild:!0,"data-spark-component":`stepper-increment-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:s,className:c,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(d.Plus,{})})})})},_=({children:a,design:o=`ghost`,intent:c=`neutral`,className:l,ref:d,...f})=>{let p=(0,r.useRef)(null),m=d&&typeof d!=`function`?d:p,{decrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.LeadingAddon,{asChild:!0,"data-spark-component":`stepper-decrement-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:c,className:l,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(s.Minus,{})})})})},v=Object.assign(g,{id:`TrailingAddon`}),y=Object.assign(_,{id:`LeadingAddon`});g.displayName=`Stepper.DecrementButton`,_.displayName=`Stepper.DecrementButton`;var b=({ref:e,...t})=>{let{inputRef:r,inputProps:o}=h(),s=(0,a.useMergeRefs)(e,r),{className:c=``,...l}=t;return(0,i.jsx)(n.n,{ref:s,...l,...o,className:`min-w-sz-56 text-center ${c}`})},x=Object.assign(b,{id:`Input`});b.displayName=`Stepper.Input`;var S=Object.assign(m,{IncrementButton:v,DecrementButton:y,Input:x});S.displayName=`Stepper`,v.displayName=`Stepper.IncrementButton`,y.displayName=`Stepper.DecrementButton`,x.displayName=`Stepper.Input`,exports.Stepper=S;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`),n=require(`../input-BUSYZ_VO.js`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/icons/Minus`),c=require(`@react-aria/numberfield`),l=require(`@react-stately/numberfield`),u=require(`@react-aria/button`),d=require(`@spark-ui/icons/Plus`);var f=({inputRef:e,locale:t=`fr`,...n})=>{let r=(0,l.useNumberFieldState)({...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required,locale:t}),{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}=(0,c.useNumberField)({isWheelDisabled:!1,...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required},r,e);return{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}},p=(0,r.createContext)(null),m=({children:e,formatOptions:t,minValue:a,maxValue:s,ref:c,...l})=>{let u=(0,r.useRef)(null),{groupProps:d,inputProps:m,incrementButtonProps:h,decrementButtonProps:g}=f({...l,...`value`in l&&{value:l.value??NaN},onChange:l.onValueChange,formatOptions:t,minValue:a,maxValue:s,inputRef:u}),_=(0,o.useFormFieldControl)(),v=!!_.id,y={...h,...v&&{"aria-controls":_.id}},b={...g,...v&&{"aria-controls":_.id}},x={...m,...v&&{id:_.id,required:_.isRequired,"aria-invalid":_.isInvalid?!0:void 0}},{onValueChange:S,...C}=l;return(0,i.jsx)(p.Provider,{value:{incrementButtonProps:y,decrementButtonProps:b,inputProps:x,inputRef:u},children:(0,i.jsx)(n.t,{...C,...d,"data-spark-component":`stepper`,ref:c,children:e})})};m.displayName=`Stepper`;var h=()=>{let e=(0,r.useContext)(p);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},g=({children:a,design:o=`ghost`,intent:s=`neutral`,className:c,ref:l,...f})=>{let p=(0,r.useRef)(null),m=l&&typeof l!=`function`?l:p,{incrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.TrailingAddon,{asChild:!0,"data-spark-component":`stepper-increment-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:s,className:c,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(d.Plus,{})})})})},_=({children:a,design:o=`ghost`,intent:c=`neutral`,className:l,ref:d,...f})=>{let p=(0,r.useRef)(null),m=d&&typeof d!=`function`?d:p,{decrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.LeadingAddon,{asChild:!0,"data-spark-component":`stepper-decrement-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:c,className:l,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(s.Minus,{})})})})},v=Object.assign(g,{id:`TrailingAddon`}),y=Object.assign(_,{id:`LeadingAddon`});g.displayName=`Stepper.DecrementButton`,_.displayName=`Stepper.DecrementButton`;var b=({ref:e,...t})=>{let{inputRef:r,inputProps:o}=h(),s=(0,a.useMergeRefs)(e,r),{className:c=``,...l}=t;return(0,i.jsx)(n.n,{ref:s,...l,...o,className:`min-w-sz-56 text-center ${c}`})},x=Object.assign(b,{id:`Input`});b.displayName=`Stepper.Input`;var S=Object.assign(m,{IncrementButton:v,DecrementButton:y,Input:x});S.displayName=`Stepper`,v.displayName=`Stepper.IncrementButton`,y.displayName=`Stepper.DecrementButton`,x.displayName=`Stepper.Input`,exports.Stepper=S;
 //# sourceMappingURL=index.js.map