@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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"],"names":["findElement","children","name","Children","isValidElement","child","getElementDisplayName","element","getOrderedItems","result","childProps","getItemsFromChildren","newMap","itemData","SelectContext","createContext","ID_PREFIX","SelectProvider","defaultValue","valueProp","onValueChange","disabledProp","readOnlyProp","stateProp","itemsComponent","nameProp","requiredProp","value","setValue","useCombinedState","placeholder","setPlaceholder","useState","itemsMap","setItemsMap","ariaLabel","setAriaLabel","firstItem","selectedItem","isControlled","field","useFormFieldControl","state","internalFieldID","useId","fieldId","fieldLabelId","disabled","readOnly","required","useEffect","previousItems","newItems","item","index","hasUpdatedValue","hasUpdatedText","jsx","useSelectContext","context","useContext","Select","props","finder","trigger","items","SelectGroupContext","SelectGroupProvider","groupLabel","setGroupLabel","useSelectGroupContext","Group","forwardedRef","GroupContent","className","cx","Item","styles","cva","Items","ref","rest","handleChange","event","Label","LeadingIcon","Icon","Placeholder","Trigger","jsxs","ArrowHorizontalDown","Value","customPlaceholder","isPlaceholderSelected","valuePlaceholder","Root"],"mappings":"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"}
+{"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/skeleton/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),h=require("../VisuallyHidden-CB6Nx76j.js"),r=require("class-variance-authority"),S=r.cva([],{variants:{isAnimated:{true:["[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]","[mask-size:200%_100%]","animate-standalone-shimmer motion-reduce:animate-none!"],false:[]}},defaultVariants:{isAnimated:!0}}),p=({isAnimated:e=!0,label:a,className:t,children:n,ref:s,...g})=>l.jsxs("div",{ref:s,"data-spark-component":"skeleton",role:"presentation",className:S({isAnimated:e,className:t}),...g,children:[n,a&&l.jsx(h.VisuallyHidden,{children:a})]});p.displayName="Skeleton";const y=r.cva(["bg-neutral/dim-4","min-h-lg min-w-lg"],{variants:{shape:{line:["w-full [&:last-child:not(:first-child)]:w-5/6","rounded-lg"],rectangle:["rounded-sm"],circle:["flex-none","rounded-full"]}},defaultVariants:{shape:"rectangle"}}),f=r.cva(["flex flex-col","w-full"],{variants:{gap:{sm:"gap-sm",md:"gap-md",lg:"gap-lg",xl:"gap-xl","2xl":"gap-2xl","3xl":"gap-3xl"}},defaultVariants:{gap:"md"}}),i=e=>typeof e=="number"?`${e}px`:e,c=({shape:e,className:a,ref:t,...n})=>l.jsx("div",{ref:t,"aria-hidden":"true",className:y({shape:e,className:a}),...n}),o=({width:e="100%",height:a,...t})=>l.jsx(c,{style:{"--skeleton-rect-width":i(e),"--skeleton-rect-height":i(a)},className:"h-(--skeleton-rect-height) w-(--skeleton-rect-width)",...t,shape:"rectangle","data-shape":"rectangle"}),d=({size:e,...a})=>l.jsx(c,{style:{"--skeleton-circle-size":i(e)},className:"size-(--skeleton-circle-size)",...a,shape:"circle","data-shape":"circle"}),m=({lines:e=1,gap:a,className:t,...n})=>{const s=a||"md";return l.jsx("div",{className:f({gap:s,className:t}),"aria-hidden":"true",children:[...new Array(e)].map((g,k)=>l.jsx(c,{...n,shape:"line","data-shape":"line"},`line_${k}`))})};o.displayName="Skeleton.Rectangle";d.displayName="Skeleton.Circle";m.displayName="Skeleton.Line";const u=Object.assign(p,{Circle:d,Line:m,Rectangle:o});u.displayName="Skeleton";m.displayName="Skeleton.Line";d.displayName="Skeleton.Circle";o.displayName="Skeleton.Rectangle";exports.Skeleton=u;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=(0,t.cva)([],{variants:{isAnimated:{true:[`[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]`,`[mask-size:200%_100%]`,`animate-standalone-shimmer motion-reduce:animate-none!`],false:[]}},defaultVariants:{isAnimated:!0}}),i=({isAnimated:t=!0,label:i,className:a,children:o,ref:s,...c})=>(0,n.jsxs)(`div`,{ref:s,"data-spark-component":`skeleton`,role:`presentation`,className:r({isAnimated:t,className:a}),...c,children:[o,i&&(0,n.jsx)(e.VisuallyHidden,{children:i})]});i.displayName=`Skeleton`;var a=(0,t.cva)([`bg-neutral/dim-4`,`min-h-lg min-w-lg`],{variants:{shape:{line:[`w-full [&:last-child:not(:first-child)]:w-5/6`,`rounded-lg`],rectangle:[`rounded-sm`],circle:[`flex-none`,`rounded-full`]}},defaultVariants:{shape:`rectangle`}}),o=(0,t.cva)([`flex flex-col`,`w-full`],{variants:{gap:{sm:`gap-sm`,md:`gap-md`,lg:`gap-lg`,xl:`gap-xl`,"2xl":`gap-2xl`,"3xl":`gap-3xl`}},defaultVariants:{gap:`md`}}),s=e=>typeof e==`number`?`${e}px`:e,c=({shape:e,className:t,ref:r,...i})=>(0,n.jsx)(`div`,{ref:r,"aria-hidden":`true`,className:a({shape:e,className:t}),...i}),l=({width:e=`100%`,height:t,...r})=>(0,n.jsx)(c,{style:{"--skeleton-rect-width":s(e),"--skeleton-rect-height":s(t)},className:`h-(--skeleton-rect-height) w-(--skeleton-rect-width)`,...r,shape:`rectangle`,"data-shape":`rectangle`}),u=({size:e,...t})=>(0,n.jsx)(c,{style:{"--skeleton-circle-size":s(e)},className:`size-(--skeleton-circle-size)`,...t,shape:`circle`,"data-shape":`circle`}),d=({lines:e=1,gap:t,className:r,...i})=>(0,n.jsx)(`div`,{className:o({gap:t||`md`,className:r}),"aria-hidden":`true`,children:[...Array(e)].map((e,t)=>(0,n.jsx)(c,{...i,shape:`line`,"data-shape":`line`},`line_${t}`))});l.displayName=`Skeleton.Rectangle`,u.displayName=`Skeleton.Circle`,d.displayName=`Skeleton.Line`;var f=Object.assign(i,{Circle:u,Line:d,Rectangle:l});f.displayName=`Skeleton`,d.displayName=`Skeleton.Line`,u.displayName=`Skeleton.Circle`,l.displayName=`Skeleton.Rectangle`,exports.Skeleton=f;
+//# sourceMappingURL=index.js.map

package/dist/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"names":["skeletonStyles","cva","Skeleton","isAnimated","label","className","children","forwardedRef","rest","jsxs","jsx","VisuallyHidden","skeletonItemStyles","skeletonLineStyles","getSizeValue","size","SkeletonItem","shape","SkeletonRectangle","width","height","SkeletonCircle","SkeletonLine","lines","gapProp","gap","_","index","Root","Circle","Line","Rectangle"],"mappings":"sMAEaA,EAAiBC,EAAAA,IAAI,GAAI,CACpC,SAAU,CACR,WAAY,CACV,KAAM,CACJ,4EACA,wBACA,wDAAA,EAEF,MAAO,CAAA,CAAC,CACV,EAEF,gBAAiB,CACf,WAAY,EAAA,CAEhB,CAAC,ECCYC,EAAW,CAAC,CACvB,WAAAC,EAAa,GACb,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAKC,EACL,GAAGC,CACL,IACEC,EAAAA,KAAC,MAAA,CACC,IAAKF,EACL,uBAAqB,WACrB,KAAK,eACL,UAAWP,EAAe,CAAE,WAAAG,EAAY,UAAAE,EAAW,EAClD,GAAGG,EAEH,SAAA,CAAAF,EAEAF,GAASM,EAAAA,IAACC,EAAAA,eAAA,CAAgB,SAAAP,CAAA,CAAM,CAAA,CAAA,CACnC,EAGFF,EAAS,YAAc,WCpChB,MAAMU,EAAqBX,EAAAA,IAAI,CAAC,mBAAoB,mBAAmB,EAAG,CAC/E,SAAU,CACR,MAAO,CACL,KAAM,CAAC,gDAAiD,YAAY,EACpE,UAAW,CAAC,YAAY,EACxB,OAAQ,CAAC,YAAa,cAAc,CAAA,CACtC,EAEF,gBAAiB,CACf,MAAO,WAAA,CAEX,CAAC,EAEYY,EAAqBZ,EAAAA,IAAI,CAAC,gBAAiB,QAAQ,EAAG,CACjE,SAAU,CACR,IAAK,CACH,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,MAAO,UACP,MAAO,SAAA,CACT,EAEF,gBAAiB,CACf,IAAK,IAAA,CAET,CAAC,ECNKa,EAAgBC,GAChB,OAAOA,GAAS,SAAiB,GAAGA,CAAI,KAErCA,EAGHC,EAAe,CAAC,CAAE,MAAAC,EAAO,UAAAZ,EAAW,IAAKE,EAAc,GAAGC,KAE5DE,EAAAA,IAAC,MAAA,CACC,IAAKH,EACL,cAAY,OACZ,UAAWK,EAAmB,CAAE,MAAAK,EAAO,UAAAZ,EAAW,EACjD,GAAGG,CAAA,CAAA,EAKGU,EAAoB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,OAAAC,EAAQ,GAAGZ,KAE3DE,EAAAA,IAACM,EAAA,CACC,MACE,CACE,wBAAyBF,EAAaK,CAAK,EAC3C,yBAA0BL,EAAaM,CAAM,CAAA,EAGjD,UAAU,uDACT,GAAGZ,EACJ,MAAM,YACN,aAAW,WAAA,CAAA,EAKJa,EAAiB,CAAC,CAAE,KAAAN,EAAM,GAAGP,KACxCE,EAAAA,IAACM,EAAA,CACC,MAAO,CAAE,yBAA0BF,EAAaC,CAAI,CAAA,EACpD,UAAU,gCACT,GAAGP,EACJ,MAAM,SACN,aAAW,QAAA,CACb,EAGWc,EAAe,CAAC,CAC3B,MAAAC,EAAQ,EACR,IAAKC,EACL,UAAAnB,EACA,GAAGG,CACL,IAAyB,CACvB,MAAMiB,EAAMD,GAAW,KAEvB,OACEd,EAAAA,IAAC,MAAA,CAAI,UAAWG,EAAmB,CAAE,IAAAY,EAAK,UAAApB,CAAA,CAAW,EAAG,cAAY,OACjE,SAAA,CAAC,GAAG,IAAI,MAAMkB,CAAK,CAAC,EAAE,IAAI,CAACG,EAAGC,IAC7BjB,EAAAA,IAACM,GAAoC,GAAGR,EAAM,MAAM,OAAO,aAAW,MAAA,EAAnD,QAAQmB,CAAK,EAA6C,CAC9E,EACH,CAEJ,EAEAT,EAAkB,YAAc,qBAChCG,EAAe,YAAc,kBAC7BC,EAAa,YAAc,gBC/EpB,MAAMpB,EAIT,OAAO,OAAO0B,EAAM,CAAA,OACtBC,EAAA,KACAC,EAAA,UACAC,CACF,CAAC,EAED7B,EAAS,YAAc,WACvB4B,EAAK,YAAc,gBACnBD,EAAO,YAAc,kBACrBE,EAAU,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":"2NAEA,IAAa,GAAA,EAAA,EAAA,KAAqB,EAAE,CAAE,CACpC,SAAU,CACR,WAAY,CACV,KAAM,CACJ,4EACA,wBACA,yDACD,CACD,MAAO,EAAE,CACV,CACF,CACD,gBAAiB,CACf,WAAY,GACb,CACF,CAAC,CCCW,GAAY,CACvB,aAAa,GACb,QACA,YACA,WACA,IAAK,EACL,GAAG,MAEH,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,uBAAqB,WACrB,KAAK,eACL,UAAW,EAAe,CAAE,aAAY,YAAW,CAAC,CACpD,GAAI,WALN,CAOG,EAEA,IAAS,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,SAAiB,EAAuB,CAAA,CAC9C,GAGR,EAAS,YAAc,WCpCvB,IAAa,GAAA,EAAA,EAAA,KAAyB,CAAC,mBAAoB,oBAAoB,CAAE,CAC/E,SAAU,CACR,MAAO,CACL,KAAM,CAAC,gDAAiD,aAAa,CACrE,UAAW,CAAC,aAAa,CACzB,OAAQ,CAAC,YAAa,eAAe,CACtC,CACF,CACD,gBAAiB,CACf,MAAO,YACR,CACF,CAAC,CAEW,GAAA,EAAA,EAAA,KAAyB,CAAC,gBAAiB,SAAS,CAAE,CACjE,SAAU,CACR,IAAK,CACH,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,MAAO,UACP,MAAO,UACR,CACF,CACD,gBAAiB,CACf,IAAK,KACN,CACF,CAAC,CCNI,EAAgB,GAChB,OAAO,GAAS,SAAiB,GAAG,EAAK,IAEtC,EAGH,GAAgB,CAAE,QAAO,YAAW,IAAK,EAAc,GAAG,MAE5D,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,cAAY,OACZ,UAAW,EAAmB,CAAE,QAAO,YAAW,CAAC,CACnD,GAAI,EACJ,CAAA,CAIO,GAAqB,CAAE,QAAQ,OAAQ,SAAQ,GAAG,MAE3D,EAAA,EAAA,KAAC,EAAD,CACE,MACE,CACE,wBAAyB,EAAa,EAAM,CAC5C,yBAA0B,EAAa,EAAO,CAC/C,CAEH,UAAU,uDACV,GAAI,EACJ,MAAM,YACN,aAAW,YACX,CAAA,CAIO,GAAkB,CAAE,OAAM,GAAG,MACxC,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,CAAE,yBAA0B,EAAa,EAAK,CAAE,CACvD,UAAU,gCACV,GAAI,EACJ,MAAM,SACN,aAAW,SACX,CAAA,CAGS,GAAgB,CAC3B,QAAQ,EACR,IAAK,EACL,YACA,GAAG,MAKD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAmB,CAAE,IAH3B,GAAW,KAGqB,YAAW,CAAC,CAAE,cAAY,gBACjE,CAAC,GAAO,MAAM,EAAM,CAAC,CAAC,KAAK,EAAG,KAC7B,EAAA,EAAA,KAAC,EAAD,CAAoC,GAAI,EAAM,MAAM,OAAO,aAAW,OAAS,CAA5D,QAAQ,IAAoD,CAC/E,CACE,CAAA,CAIV,EAAkB,YAAc,qBAChC,EAAe,YAAc,kBAC7B,EAAa,YAAc,gBC/E3B,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,OAAA,EACA,KAAA,EACA,UAAA,EACD,CAAC,CAEF,EAAS,YAAc,WACvB,EAAK,YAAc,gBACnB,EAAO,YAAc,kBACrB,EAAU,YAAc"}

package/dist/skeleton/index.mjs

@@ -1,115 +1,93 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
-import { V as u } from "../VisuallyHidden-DjlV0-CW.mjs";
-import { cva as i } from "class-variance-authority";
-const f = i([], {
-  variants: {
-    isAnimated: {
-      true: [
-        "[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]",
-        "[mask-size:200%_100%]",
-        "animate-standalone-shimmer motion-reduce:animate-none!"
-      ],
-      false: []
-    }
-  },
-  defaultVariants: {
-    isAnimated: !0
-  }
-}), g = ({
-  isAnimated: e = !0,
-  label: a,
-  className: t,
-  children: n,
-  ref: m,
-  ...p
-}) => /* @__PURE__ */ h(
-  "div",
-  {
-    ref: m,
-    "data-spark-component": "skeleton",
-    role: "presentation",
-    className: f({ isAnimated: e, className: t }),
-    ...p,
-    children: [
-      n,
-      a && /* @__PURE__ */ l(u, { children: a })
-    ]
-  }
-);
-g.displayName = "Skeleton";
-const S = i(["bg-neutral/dim-4", "min-h-lg min-w-lg"], {
-  variants: {
-    shape: {
-      line: ["w-full [&:last-child:not(:first-child)]:w-5/6", "rounded-lg"],
-      rectangle: ["rounded-sm"],
-      circle: ["flex-none", "rounded-full"]
-    }
-  },
-  defaultVariants: {
-    shape: "rectangle"
-  }
-}), y = i(["flex flex-col", "w-full"], {
-  variants: {
-    gap: {
-      sm: "gap-sm",
-      md: "gap-md",
-      lg: "gap-lg",
-      xl: "gap-xl",
-      "2xl": "gap-2xl",
-      "3xl": "gap-3xl"
-    }
-  },
-  defaultVariants: {
-    gap: "md"
-  }
-}), s = (e) => typeof e == "number" ? `${e}px` : e, r = ({ shape: e, className: a, ref: t, ...n }) => /* @__PURE__ */ l(
-  "div",
-  {
-    ref: t,
-    "aria-hidden": "true",
-    className: S({ shape: e, className: a }),
-    ...n
-  }
-), o = ({ width: e = "100%", height: a, ...t }) => /* @__PURE__ */ l(
-  r,
-  {
-    style: {
-      "--skeleton-rect-width": s(e),
-      "--skeleton-rect-height": s(a)
-    },
-    className: "h-(--skeleton-rect-height) w-(--skeleton-rect-width)",
-    ...t,
-    shape: "rectangle",
-    "data-shape": "rectangle"
-  }
-), c = ({ size: e, ...a }) => /* @__PURE__ */ l(
-  r,
-  {
-    style: { "--skeleton-circle-size": s(e) },
-    className: "size-(--skeleton-circle-size)",
-    ...a,
-    shape: "circle",
-    "data-shape": "circle"
-  }
-), d = ({
-  lines: e = 1,
-  gap: a,
-  className: t,
-  ...n
-}) => /* @__PURE__ */ l("div", { className: y({ gap: a || "md", className: t }), "aria-hidden": "true", children: [...new Array(e)].map((p, k) => /* @__PURE__ */ l(r, { ...n, shape: "line", "data-shape": "line" }, `line_${k}`)) });
-o.displayName = "Skeleton.Rectangle";
-c.displayName = "Skeleton.Circle";
-d.displayName = "Skeleton.Line";
-const x = Object.assign(g, {
-  Circle: c,
-  Line: d,
-  Rectangle: o
+import { VisuallyHidden as e } from "../visually-hidden/index.mjs";
+import { cva as t } from "class-variance-authority";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/skeleton/Skeleton.styles.ts
+var i = t([], {
+	variants: { isAnimated: {
+		true: [
+			"[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]",
+			"[mask-size:200%_100%]",
+			"animate-standalone-shimmer motion-reduce:animate-none!"
+		],
+		false: []
+	} },
+	defaultVariants: { isAnimated: !0 }
+}), a = ({ isAnimated: t = !0, label: a, className: o, children: s, ref: c, ...l }) => /* @__PURE__ */ r("div", {
+	ref: c,
+	"data-spark-component": "skeleton",
+	role: "presentation",
+	className: i({
+		isAnimated: t,
+		className: o
+	}),
+	...l,
+	children: [s, a && /* @__PURE__ */ n(e, { children: a })]
 });
-x.displayName = "Skeleton";
-d.displayName = "Skeleton.Line";
-c.displayName = "Skeleton.Circle";
-o.displayName = "Skeleton.Rectangle";
-export {
-  x as Skeleton
-};
-//# sourceMappingURL=index.mjs.map
+a.displayName = "Skeleton";
+//#endregion
+//#region src/skeleton/SkeletonItem.styles.ts
+var o = t(["bg-neutral/dim-4", "min-h-lg min-w-lg"], {
+	variants: { shape: {
+		line: ["w-full [&:last-child:not(:first-child)]:w-5/6", "rounded-lg"],
+		rectangle: ["rounded-sm"],
+		circle: ["flex-none", "rounded-full"]
+	} },
+	defaultVariants: { shape: "rectangle" }
+}), s = t(["flex flex-col", "w-full"], {
+	variants: { gap: {
+		sm: "gap-sm",
+		md: "gap-md",
+		lg: "gap-lg",
+		xl: "gap-xl",
+		"2xl": "gap-2xl",
+		"3xl": "gap-3xl"
+	} },
+	defaultVariants: { gap: "md" }
+}), c = (e) => typeof e == "number" ? `${e}px` : e, l = ({ shape: e, className: t, ref: r, ...i }) => /* @__PURE__ */ n("div", {
+	ref: r,
+	"aria-hidden": "true",
+	className: o({
+		shape: e,
+		className: t
+	}),
+	...i
+}), u = ({ width: e = "100%", height: t, ...r }) => /* @__PURE__ */ n(l, {
+	style: {
+		"--skeleton-rect-width": c(e),
+		"--skeleton-rect-height": c(t)
+	},
+	className: "h-(--skeleton-rect-height) w-(--skeleton-rect-width)",
+	...r,
+	shape: "rectangle",
+	"data-shape": "rectangle"
+}), d = ({ size: e, ...t }) => /* @__PURE__ */ n(l, {
+	style: { "--skeleton-circle-size": c(e) },
+	className: "size-(--skeleton-circle-size)",
+	...t,
+	shape: "circle",
+	"data-shape": "circle"
+}), f = ({ lines: e = 1, gap: t, className: r, ...i }) => /* @__PURE__ */ n("div", {
+	className: s({
+		gap: t || "md",
+		className: r
+	}),
+	"aria-hidden": "true",
+	children: [...Array(e)].map((e, t) => /* @__PURE__ */ n(l, {
+		...i,
+		shape: "line",
+		"data-shape": "line"
+	}, `line_${t}`))
+});
+u.displayName = "Skeleton.Rectangle", d.displayName = "Skeleton.Circle", f.displayName = "Skeleton.Line";
+//#endregion
+//#region src/skeleton/index.ts
+var p = Object.assign(a, {
+	Circle: d,
+	Line: f,
+	Rectangle: u
+});
+p.displayName = "Skeleton", f.displayName = "Skeleton.Line", d.displayName = "Skeleton.Circle", u.displayName = "Skeleton.Rectangle";
+//#endregion
+export { p as Skeleton };
+
+//# sourceMappingURL=index.mjs.map

package/dist/skeleton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"names":["skeletonStyles","cva","Skeleton","isAnimated","label","className","children","forwardedRef","rest","jsxs","jsx","VisuallyHidden","skeletonItemStyles","skeletonLineStyles","getSizeValue","size","SkeletonItem","shape","SkeletonRectangle","width","height","SkeletonCircle","SkeletonLine","lines","gapProp","_","index","Root","Circle","Line","Rectangle"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":";;;;AAEA,IAAa,IAAiB,EAAI,EAAE,EAAE;CACpC,UAAU,EACR,YAAY;EACV,MAAM;GACJ;GACA;GACA;GACD;EACD,OAAO,EAAE;EACV,EACF;CACD,iBAAiB,EACf,YAAY,IACb;CACF,CAAC,ECCW,KAAY,EACvB,gBAAa,IACb,UACA,cACA,aACA,KAAK,GACL,GAAG,QAEH,kBAAC,OAAD;CACE,KAAK;CACL,wBAAqB;CACrB,MAAK;CACL,WAAW,EAAe;EAAE;EAAY;EAAW,CAAC;CACpD,GAAI;WALN,CAOG,GAEA,KAAS,kBAAC,GAAD,EAAA,UAAiB,GAAuB,CAAA,CAC9C;;AAGR,EAAS,cAAc;;;ACpCvB,IAAa,IAAqB,EAAI,CAAC,oBAAoB,oBAAoB,EAAE;CAC/E,UAAU,EACR,OAAO;EACL,MAAM,CAAC,iDAAiD,aAAa;EACrE,WAAW,CAAC,aAAa;EACzB,QAAQ,CAAC,aAAa,eAAe;EACtC,EACF;CACD,iBAAiB,EACf,OAAO,aACR;CACF,CAAC,EAEW,IAAqB,EAAI,CAAC,iBAAiB,SAAS,EAAE;CACjE,UAAU,EACR,KAAK;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,OAAO;EACR,EACF;CACD,iBAAiB,EACf,KAAK,MACN;CACF,CAAC,ECNI,KAAgB,MAChB,OAAO,KAAS,WAAiB,GAAG,EAAK,MAEtC,GAGH,KAAgB,EAAE,UAAO,cAAW,KAAK,GAAc,GAAG,QAE5D,kBAAC,OAAD;CACE,KAAK;CACL,eAAY;CACZ,WAAW,EAAmB;EAAE;EAAO;EAAW,CAAC;CACnD,GAAI;CACJ,CAAA,EAIO,KAAqB,EAAE,WAAQ,QAAQ,WAAQ,GAAG,QAE3D,kBAAC,GAAD;CACE,OACE;EACE,yBAAyB,EAAa,EAAM;EAC5C,0BAA0B,EAAa,EAAO;EAC/C;CAEH,WAAU;CACV,GAAI;CACJ,OAAM;CACN,cAAW;CACX,CAAA,EAIO,KAAkB,EAAE,SAAM,GAAG,QACxC,kBAAC,GAAD;CACE,OAAO,EAAE,0BAA0B,EAAa,EAAK,EAAE;CACvD,WAAU;CACV,GAAI;CACJ,OAAM;CACN,cAAW;CACX,CAAA,EAGS,KAAgB,EAC3B,WAAQ,GACR,KAAK,GACL,cACA,GAAG,QAKD,kBAAC,OAAD;CAAK,WAAW,EAAmB;EAAE,KAH3B,KAAW;EAGqB;EAAW,CAAC;CAAE,eAAY;WACjE,CAAC,GAAO,MAAM,EAAM,CAAC,CAAC,KAAK,GAAG,MAC7B,kBAAC,GAAD;EAAoC,GAAI;EAAM,OAAM;EAAO,cAAW;EAAS,EAA5D,QAAQ,IAAoD,CAC/E;CACE,CAAA;AAIV,EAAkB,cAAc,sBAChC,EAAe,cAAc,mBAC7B,EAAa,cAAc;;;AC/E3B,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,QAAA;CACA,MAAA;CACA,WAAA;CACD,CAAC;AAEF,EAAS,cAAc,YACvB,EAAK,cAAc,iBACnB,EAAO,cAAc,mBACrB,EAAU,cAAc"}

package/dist/slider/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),N=require("@base-ui/react/slider"),X=require("@spark-ui/components/form-field"),t=require("react"),S=require("class-variance-authority"),M=require("@spark-ui/hooks/use-merge-refs"),H=require("../FormFieldRequiredIndicator-CHfcoT2y.js"),J=require("../label/index.js"),K=require("../Slot-DQ8z2zsy.js"),Q=S.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"]),$=t.createContext({}),C=()=>t.useContext($),B=({intent:r="support",children:e,className:a,ref:n,value:o,defaultValue:d,disabled:f,readOnly:v,name:s,onValueChange:c,onValueCommit:m,min:b=0,max:p=100,...h})=>{const l=X.useFormFieldControl(),x=l.disabled??f,g=l.readOnly??v,y=l.name??s,[I,R]=t.useState(l.labelId),[V,T]=t.useState(0),k=t.useRef(null),_=t.useRef(null),D=t.useCallback(u=>{R(u)},[]),G=t.useCallback(()=>(T(u=>u+1),()=>T(u=>u-1)),[]);return i.jsx($.Provider,{value:{intent:r,min:b,max:p,fieldLabelId:l.labelId||I,fieldId:l.id,onLabelId:D,hasValueInThumb:V>0,registerValueInThumb:G,controlRef:k,thumbRef:_},children:i.jsx(N.Slider.Root,{ref:n,"data-spark-component":"slider",className:Q({className:a}),orientation:"horizontal",disabled:x||g,thumbAlignment:"edge",name:y,"aria-describedby":l.description,"aria-invalid":l.isInvalid,"aria-disabled":x||g?!0:void 0,value:o!==void 0?[o]:void 0,defaultValue:d!==void 0?[d]:void 0,onValueChange:c?u=>{const j=Array.isArray(u)?u[0]??0:u;c(j)}:void 0,onValueCommitted:m?u=>{const j=Array.isArray(u)?u[0]??0:u;m(j)}:void 0,min:b,max:p,...h,children:e})})};B.displayName="Slider";const z=({className:r,ref:e,...a})=>{const{hasValueInThumb:n,controlRef:o}=C(),d=M.useMergeRefs(o,e);return i.jsx(N.Slider.Control,{"data-spark-component":"slider-control",ref:d,className:S.cx("min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center",n&&"mt-xl",r),...a})};z.displayName="Slider.Control";const U=S.cva(["relative grow h-sz-4 bg-on-background/dim-4 rounded-sm"]),Y=S.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"}}),q=({className:r,ref:e,...a})=>{const{intent:n}=C();return i.jsx(N.Slider.Indicator,{"data-spark-component":"slider-indicator",ref:e,className:Y({intent:n,className:r}),...a})};q.displayName="Slider.Indicator";const Z=":slider-label",F=({htmlFor:r,id:e,className:a,children:n,requiredIndicator:o=i.jsx(H.FormFieldRequiredIndicator,{}),asChild:d,ref:f,...v})=>{const s=X.useFormFieldControl(),{fieldLabelId:c,fieldId:m,onLabelId:b}=C(),p=t.useId(),h=`${Z}-${p}`,l=e||c||s.labelId||h,x=d?void 0:r||m||s.id,g=s.disabled,y=s.isRequired,I=t.useRef(null),R=M.useMergeRefs(f,I);return t.useEffect(()=>{b&&!c&&!s.labelId&&b(l)},[b,c,s.labelId,l]),i.jsx(J.Label,{ref:R,id:l,"data-spark-component":"slider-label",htmlFor:x,className:S.cx(g?"text-on-surface/dim-3 pointer-events-none":void 0,a),asChild:d,...v,children:i.jsxs(i.Fragment,{children:[i.jsx(K.Slottable,{children:n}),y&&o]})})};F.displayName="Slider.Label";const L=t.forwardRef(({className:r,children:e},a)=>{const{max:n=100}=C(),o=e?e(n):n;return i.jsx("div",{"data-spark-component":"slider-max-value",ref:a,className:S.cx("text-on-surface/dim-1 text-body-2 col-start-2 text-right",r),children:o})});L.displayName="Slider.MaxValue";const w=t.forwardRef(({className:r,children:e},a)=>{const{min:n=0}=C(),o=e?e(n):n;return i.jsx("div",{"data-spark-component":"slider-min-value",ref:a,className:S.cx("text-on-surface/dim-1 text-body-2 col-start-1 text-left",r),children:o})});w.displayName="Slider.MinValue";const P=t.createContext(null),ee=()=>t.useContext(P),te=S.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"}}),A=({className:r,ref:e,children:a,...n})=>{const{intent:o,fieldLabelId:d,fieldId:f,thumbRef:v}=C(),s=t.useRef(null),c=M.useMergeRefs(v,e??s);return i.jsx(P.Provider,{value:{isInsideThumb:!0},children:i.jsx(N.Slider.Thumb,{"data-spark-component":"slider-thumb",ref:c,id:f,className:te({intent:o,className:r}),"aria-labelledby":d,...n,children:a})})};A.displayName="Slider.Thumb";const O=({className:r,ref:e,...a})=>i.jsx(N.Slider.Track,{"data-spark-component":"slider-track",ref:e,className:U({className:r}),...a});O.displayName="Slider.Track";function re(r,e,a,n){const[o,d]=t.useState(0),[f,v]=t.useState(!1);return t.useLayoutEffect(()=>{const s=r.current,c=e.current,m=a.current;if(!s||!c||!m){d(0),f||requestAnimationFrame(()=>v(!0));return}let b=!1;const p=()=>{if(b)return;const l=s.getBoundingClientRect(),x=c.getBoundingClientRect(),g=m.scrollWidth;if(g===0){requestAnimationFrame(p);return}const y=x.left-l.left+x.width/2,I=g/2,R=l.width-g/2,T=Math.max(I,Math.min(R,y))-y;d(k=>k!==T?T:k)};p();const h=new ResizeObserver(p);return h.observe(s),h.observe(m),()=>{b=!0,h.disconnect()}},[r,e,a,n,f]),o}const E=({className:r,children:e,ref:a,...n})=>{const{registerValueInThumb:o,controlRef:d,thumbRef:f}=C(),s=ee()!==null,c=t.useRef(null),m=M.useMergeRefs(c,a),[b,p]=t.useState(0),h=re(d,f,c,b);t.useEffect(()=>{if(s)return o()},[s,o]);const l=S.cx(s?"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",r),x=t.useCallback((y,I)=>{const R=y[0]??String(I[0]??""),V=I[0]??0;return p(V),typeof e=="function"?e(R,V):R},[e]),g=s?{transform:`translate(calc(0% + ${h}px), 0)`}:void 0;return i.jsx(N.Slider.Value,{"data-spark-component":"slider-value",ref:m,className:l,style:g,...n,children:x})};E.displayName="Slider.Value";const W=Object.assign(B,{Control:z,Indicator:q,Label:F,MaxValue:L,MinValue:w,Thumb:A,Track:O,Value:E});W.displayName="Slider";z.displayName="Slider.Control";q.displayName="Slider.Indicator";F.displayName="Slider.Label";L.displayName="Slider.MaxValue";w.displayName="Slider.MinValue";A.displayName="Slider.Thumb";O.displayName="Slider.Track";E.displayName="Slider.Value";exports.Slider=W;
-//# sourceMappingURL=index.js.map
+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;
+//# sourceMappingURL=index.js.map