@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/MultiSelect/MultiSelectBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectBase.js","names":[],"sources":["../../src/components/MultiSelect/MultiSelectBase.tsx"],"sourcesContent":["import { CheckmarkIcon, ChevronDownIcon, CloseIcon, SearchIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport * as Popover from '@radix-ui/react-popover'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport { EmptyState, ErrorMessage, getAriaProps, getDropdownSurfaceClasses, getDropdownWidthStyles, getErrorMessageId, getTriggerClasses, LoadingState, WarningMessage, useFormFieldId, type BaseFormFieldProps, type DropdownWidth, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState, type ButtonHTMLAttributes, type ChangeEvent, type CSSProperties, type KeyboardEvent, type Ref } from 'react'\n\nexport type MultiSelectState = Exclude<FormFieldState, 'disabled'>\n\nexport interface MultiSelectOption {\n  disabled?: boolean\n  group?: string\n  label: string\n  value: string\n}\n\nexport interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  clearAllLabel?: string\n  closeOnSelect?: boolean\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string\n  label?: string\n  loadingMessage?: string\n  maxCount?: number\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  name?: string\n  defaultValue?: string[]\n  onChange?: (value: string[]) => void\n  options: MultiSelectOption[]\n  placeholder?: string\n  required?: boolean\n  searchPlaceholder?: string\n  showClearAll?: boolean\n  showSearch?: boolean\n  showSelectAll?: boolean\n  selectAllLabel?: string\n  sortAlphabetically?: boolean\n  state?: MultiSelectState\n  value?: string[]\n  warningMessage?: BaseFormFieldProps['errorMessage']\n  'aria-label'?: string\n  'aria-describedby'?: string\n}\n\nconst ICON_SIZE = 'h-4 w-4'\n\nconst getDropdownClasses = (): string => {\n  return cn(\n    'max-h-80 z-50 overflow-hidden',\n    getDropdownSurfaceClasses(),\n    'motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in',\n    'motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0',\n    'motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95',\n    'motion-safe:data-[side=bottom]:slide-in-from-top-2',\n    'motion-safe:data-[side=top]:slide-in-from-bottom-2',\n    'origin-(--radix-popover-content-transform-origin)',\n  )\n}\n\ntype FocusableItem = { type: 'search' } | { type: 'select-all' } | { type: 'option'; index: number; value: string } | { type: 'clear-all' }\n\nconst useKeyboardNavigation = (\n  options: MultiSelectOption[],\n  onClearAll: () => void,\n  onClose: () => void,\n  onSelect: (value: string) => void,\n  onSelectAll: () => void,\n  searchInputRef: React.RefObject<HTMLInputElement | null>,\n  showSearch: boolean,\n  showSelectAll: boolean,\n  showClearAll: boolean,\n) => {\n  const [focusedIndex, setFocusedIndex] = useState(-1)\n\n  // Build a flat list of all focusable items\n  const focusableItems = useMemo((): FocusableItem[] => {\n    const items: FocusableItem[] = []\n\n    if (showSearch) {\n      items.push({ type: 'search' })\n    }\n\n    if (showSelectAll) {\n      items.push({ type: 'select-all' })\n    }\n\n    options.forEach((option, index) => {\n      if (!option.disabled) {\n        items.push({ type: 'option', index, value: option.value })\n      }\n    })\n\n    if (showClearAll) {\n      items.push({ type: 'clear-all' })\n    }\n\n    return items\n  }, [options, showSearch, showSelectAll, showClearAll])\n\n  // Focus the appropriate element when focusedIndex changes\n  const focusCurrentItem = useCallback(\n    (index: number) => {\n      if (index < 0 || index >= focusableItems.length) return\n      const item = focusableItems[index]\n      if (item.type === 'search') {\n        searchInputRef.current?.focus()\n      }\n    },\n    [focusableItems, searchInputRef],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const currentItem = focusedIndex >= 0 && focusedIndex < focusableItems.length ? focusableItems[focusedIndex] : null\n\n      // Don't prevent default for space in search input (allow typing spaces)\n      if (event.key === ' ' && currentItem?.type === 'search') {\n        return\n      }\n\n      // Don't prevent default for Enter in search input (allow form submission behavior)\n      if (event.key === 'Enter' && currentItem?.type === 'search') {\n        return\n      }\n\n      const keyHandlers: Record<string, () => void> = {\n        ArrowDown: () => {\n          event.preventDefault()\n          const newIndex = Math.min(focusedIndex + 1, focusableItems.length - 1)\n          setFocusedIndex(newIndex)\n          focusCurrentItem(newIndex)\n        },\n        ArrowUp: () => {\n          event.preventDefault()\n          const newIndex = Math.max(focusedIndex - 1, 0)\n          setFocusedIndex(newIndex)\n          focusCurrentItem(newIndex)\n        },\n        Tab: () => {\n          // Allow Tab to cycle through focusable items\n          if (event.shiftKey) {\n            if (focusedIndex <= 0) {\n              // At start, close dropdown and return to trigger\n              onClose()\n            } else {\n              event.preventDefault()\n              const newIndex = focusedIndex - 1\n              setFocusedIndex(newIndex)\n              focusCurrentItem(newIndex)\n            }\n          } else {\n            if (focusedIndex >= focusableItems.length - 1) {\n              // At end, close dropdown and move to next element\n              onClose()\n            } else {\n              event.preventDefault()\n              const newIndex = focusedIndex + 1\n              setFocusedIndex(newIndex)\n              focusCurrentItem(newIndex)\n            }\n          }\n        },\n        Enter: () => {\n          event.preventDefault()\n          if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {\n            const item = focusableItems[focusedIndex]\n            if (item.type === 'select-all') {\n              onSelectAll()\n            } else if (item.type === 'clear-all') {\n              onClearAll()\n            } else if (item.type === 'option') {\n              onSelect(item.value)\n            }\n          }\n        },\n        ' ': () => {\n          event.preventDefault()\n          if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {\n            const item = focusableItems[focusedIndex]\n            if (item.type === 'select-all') {\n              onSelectAll()\n            } else if (item.type === 'clear-all') {\n              onClearAll()\n            } else if (item.type === 'option') {\n              onSelect(item.value)\n            }\n          }\n        },\n        Escape: () => {\n          event.preventDefault()\n          onClose()\n        },\n      }\n\n      const handler = keyHandlers[event.key]\n      if (handler) {\n        handler()\n      }\n    },\n    [focusableItems, focusedIndex, onSelect, onSelectAll, onClearAll, onClose, focusCurrentItem],\n  )\n\n  // Get the option index for visual focus styling (accounting for select-all offset)\n  const getOptionFocusIndex = useCallback(\n    (optionIndex: number): boolean => {\n      if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n      const item = focusableItems[focusedIndex]\n      return item.type === 'option' && item.index === optionIndex\n    },\n    [focusedIndex, focusableItems],\n  )\n\n  const isSearchFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'search'\n  }, [focusedIndex, focusableItems])\n\n  const isSelectAllFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'select-all'\n  }, [focusedIndex, focusableItems])\n\n  const isClearAllFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'clear-all'\n  }, [focusedIndex, focusableItems])\n\n  const focusedOptionValue = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return null\n    const item = focusableItems[focusedIndex]\n    return item.type === 'option' ? item.value : null\n  }, [focusedIndex, focusableItems])\n\n  return {\n    focusedIndex,\n    setFocusedIndex,\n    handleKeyDown,\n    getOptionFocusIndex,\n    isSearchFocused,\n    isSelectAllFocused,\n    isClearAllFocused,\n    focusedOptionValue,\n  }\n}\n\nexport const MultiSelectBase = ({\n  className,\n  clearAllLabel = 'Clear all',\n  closeOnSelect = false,\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found',\n  errorMessage,\n  defaultValue = [],\n  disabled,\n  id,\n  label,\n  loadingMessage = 'Loading options…',\n  messageReserveLines = 1,\n  messageReserveSpace = true,\n  maxCount = 3,\n  name,\n  onChange,\n  options = [],\n  placeholder = 'Select options',\n  ref,\n  searchPlaceholder = 'Search options…',\n  selectAllLabel = 'Select all',\n  showClearAll = true,\n  showSearch = true,\n  showSelectAll = true,\n  sortAlphabetically = false,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: MultiSelectBaseProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const generatedId = useId()\n  const fallbackName = name ?? `multiselect-${generatedId}`\n  const multiSelectId = useFormFieldId(id, fallbackName)\n  const listboxId = `${multiSelectId}-listbox`\n  const errorMessageId = getErrorMessageId(multiSelectId)\n  const warningMessageId = `${multiSelectId}-warning`\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n\n  const [isOpen, setIsOpen] = useState(false)\n  const { dropdownShiftStyle, setDropdownElement } = useAutoDropdownHorizontalShift(isOpen)\n  const [searchValue, setSearchValue] = useState('')\n  const [value, setValue] = useUncontrolledState<string[]>({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  })\n\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const isDisabled = Boolean(disabled)\n  const isLoading = state === 'loading'\n  const ariaProps = getAriaProps(state, ariaDescribedBy, props.required, messageId)\n  const { dropdownOverflowStyle, dropdownWidthMode, resolvedDropdownWidth } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: 'var(--radix-popover-trigger-width)',\n  })\n\n  const filteredOptions = useMemo(() => {\n    let filtered = options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))\n\n    if (sortAlphabetically) {\n      filtered = [...filtered].sort((a, b) => a.label.localeCompare(b.label))\n    }\n\n    return filtered\n  }, [options, searchValue, sortAlphabetically])\n\n  const groupedOptions = useMemo(() => {\n    const groups: Record<string, MultiSelectOption[]> = {}\n    const ungrouped: MultiSelectOption[] = []\n\n    filteredOptions.forEach((option) => {\n      if (option.group) {\n        if (!groups[option.group]) {\n          groups[option.group] = []\n        }\n        groups[option.group].push(option)\n      } else {\n        ungrouped.push(option)\n      }\n    })\n\n    return { groups, ungrouped, hasGroups: Object.keys(groups).length > 0 }\n  }, [filteredOptions])\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      const option = options.find((o) => o.value === optionValue)\n      if (option?.disabled) return\n\n      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]\n\n      setValue(newValue)\n\n      if (closeOnSelect) {\n        setIsOpen(false)\n      }\n    },\n    [closeOnSelect, options, setValue, value],\n  )\n\n  const handleSelectAll = useCallback(() => {\n    const allValues = options.filter((o) => !o.disabled).map((o) => o.value)\n    const isAllSelected = allValues.every((v) => value.includes(v))\n\n    if (isAllSelected) {\n      setValue([])\n    } else {\n      setValue(allValues)\n    }\n  }, [options, setValue, value])\n\n  const handleClearAll = useCallback(() => {\n    setValue([])\n  }, [setValue])\n\n  // Check if all non-disabled options are selected\n  const allSelectableValues = useMemo(() => options.filter((o) => !o.disabled).map((o) => o.value), [options])\n  const isAllSelected = allSelectableValues.length > 0 && allSelectableValues.every((v) => value.includes(v))\n\n  const { focusedOptionValue, getOptionFocusIndex, handleKeyDown, isSelectAllFocused, setFocusedIndex } = useKeyboardNavigation(\n    filteredOptions,\n    handleClearAll,\n    () => setIsOpen(false),\n    toggleOption,\n    handleSelectAll,\n    searchInputRef,\n    showSearch,\n    showSelectAll,\n    false, // No separate clear-all button in dropdown\n  )\n\n  // Set initial focus index when dropdown opens/closes\n  useEffect(() => {\n    if (isOpen) {\n      setFocusedIndex(0)\n    } else {\n      setFocusedIndex(-1)\n    }\n  }, [isOpen, setFocusedIndex])\n\n  const handleSearchChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    setSearchValue(e.target.value)\n  }, [])\n\n  const renderSelectedItems = () => {\n    if (value.length === 0) {\n      return <span className='min-h-8 flex items-center text-input-text-placeholder'>{placeholder}</span>\n    }\n\n    const displayedValues = value.slice(0, maxCount)\n    const remainingCount = value.length - maxCount\n\n    return (\n      <div className='gap-1 flex flex-wrap items-center overflow-hidden'>\n        {displayedValues.map((val) => {\n          const option = options.find((o) => o.value === val)\n          if (!option) return null\n\n          return (\n            <span className='gap-1 px-2 py-1 rounded-md text-xs max-w-48 inline-flex items-center bg-input-bg--selected text-input-text' key={val}>\n              <span className='truncate'>{option.label}</span>\n              <span\n                aria-hidden='true'\n                className='hover:text-danger rounded-sm cursor-pointer'\n                data-testid='spectral-multiselect-remove-item-button'\n                onClick={(e) => {\n                  e.preventDefault()\n                  e.stopPropagation()\n                  toggleOption(val)\n                }}\n                onPointerDown={(e) => {\n                  e.stopPropagation()\n                }}\n              >\n                <CloseIcon size={12} />\n              </span>\n            </span>\n          )\n        })}\n        {remainingCount > 0 && <span className='text-input-text-secondary text-xs py-1 flex items-center tabular-nums'>+{remainingCount} more</span>}\n      </div>\n    )\n  }\n\n  const renderOption = (option: MultiSelectOption, index: number) => {\n    const isSelected = value.includes(option.value)\n    const isFocused = getOptionFocusIndex(index)\n    const optionId = `${listboxId}-option-${option.value}`\n\n    return (\n      <button\n        aria-selected={isSelected}\n        className={cn(\n          'my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm flex w-full items-center text-left hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n          isFocused && 'bg-input-bg--hover',\n          isSelected && 'font-medium text-input-text',\n        )}\n        disabled={option.disabled}\n        id={optionId}\n        key={option.value}\n        onClick={() => toggleOption(option.value)}\n        role='option'\n        type='button'\n      >\n        <div data-testid='spectral-multiselect-selected-indicator' className={cn('w-4 h-4 rounded flex items-center justify-center border border-input-border', isSelected && 'bg-primary border-primary')}>\n          {isSelected && <CheckmarkIcon size={12} />}\n        </div>\n        <span>{option.label}</span>\n      </button>\n    )\n  }\n\n  const getCSSCustomProperties = () => ({\n    '--multiselect-border-radius': '0.5rem',\n    '--multiselect-trigger-height': '3rem',\n    '--multiselect-dropdown-max-height': '20rem',\n  })\n\n  return (\n    <div className='w-full' data-testid='spectral-multiselect-root'>\n      {label && (\n        <Label className={cn('mb-2 block text-text-primary', isDisabled && 'text-text-secondary')} data-testid='spectral-multiselect-label' htmlFor={multiSelectId}>\n          {label}\n        </Label>\n      )}\n      <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n        <div className='relative' data-testid='spectral-multiselect-wrapper' onKeyDown={isOpen ? handleKeyDown : undefined} role='none'>\n          <Popover.Trigger asChild>\n            <button\n              aria-activedescendant={isOpen && focusedOptionValue ? `${listboxId}-option-${focusedOptionValue}` : undefined}\n              aria-controls={isOpen ? listboxId : undefined}\n              aria-expanded={isOpen}\n              aria-label={ariaLabel ?? label}\n              className={cn(getTriggerClasses(isOpen, state, className), 'max-h-22 py-2 text-sm')}\n              data-state={state}\n              data-testid='spectral-multiselect-trigger'\n              disabled={isDisabled}\n              id={multiSelectId}\n              name={name}\n              ref={ref}\n              role='combobox'\n              style={getCSSCustomProperties() as CSSProperties}\n              type='button'\n              {...ariaProps}\n              {...props}\n            >\n              <div className='min-w-0 flex-1 overflow-hidden' data-testid='spectral-multiselect-selected-items'>\n                {renderSelectedItems()}\n              </div>\n              <div className='gap-2 ml-2 flex shrink-0 items-center'>\n                <ChevronDownIcon className={cn('text-input-icon transition-transform duration-200', isOpen && 'rotate-180')} size={20} />\n              </div>\n            </button>\n          </Popover.Trigger>\n          {showClearAll && value.length > 0 && (\n            <button\n              aria-label='Clear all selections'\n              className='right-10 text-input-icon hover:text-input-icon--hover rounded-sm absolute top-1/2 z-10 -translate-y-1/2 cursor-pointer focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50'\n              data-testid='spectral-multiselect-clear-all-button'\n              disabled={isDisabled}\n              onClick={(e) => {\n                e.stopPropagation()\n                handleClearAll()\n                document.getElementById(multiSelectId)?.focus()\n              }}\n              type='button'\n            >\n              <CloseIcon size={12} />\n            </button>\n          )}\n\n          <Popover.Portal>\n            <Popover.Content\n              align='start'\n              avoidCollisions\n              className={getDropdownClasses()}\n              collisionPadding={10}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-multiselect-dropdown'\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (showSearch) {\n                  searchInputRef.current?.focus()\n                }\n              }}\n              side='bottom'\n              sideOffset={4}\n              ref={setDropdownElement}\n              style={{\n                width: resolvedDropdownWidth,\n                ...(dropdownWidth === 'trigger' ? {} : dropdownOverflowStyle),\n                ...dropdownShiftStyle,\n              }}\n            >\n              <div className='p-1'>\n                {showSearch && (\n                  <div className='mb-2 relative'>\n                    <SearchIcon className={cn(ICON_SIZE, 'left-3 text-input-icon absolute top-1/2 -translate-y-1/2')} />\n                    <input\n                      aria-label='Search options'\n                      className='pl-9 pr-3 py-2 text-sm rounded-md focus-visible:ring-black w-full border border-input-border bg-input-bg focus-visible:border-input-border--focus focus-visible:ring-1 focus-visible:outline-none'\n                      data-testid='spectral-multiselect-search-input'\n                      onChange={handleSearchChange}\n                      placeholder={searchPlaceholder}\n                      ref={searchInputRef}\n                      type='text'\n                      value={searchValue}\n                    />\n                  </div>\n                )}\n\n                <div className='max-h-64 overflow-y-auto' id={listboxId} role='listbox' aria-multiselectable='true'>\n                  {isLoading ? (\n                    <LoadingState className='text-sm' message={loadingMessage} data-testid='spectral-multiselect-loading' />\n                  ) : filteredOptions.length === 0 ? (\n                    <EmptyState className='text-sm' data-testid='spectral-multiselect-empty-message' message={emptyMessage} />\n                  ) : (\n                    <>\n                      {showSelectAll && (\n                        <div className='mb-1'>\n                          <button\n                            className={cn(\n                              'my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none',\n                              isSelectAllFocused && 'bg-input-bg--hover',\n                            )}\n                            data-testid='spectral-multiselect-select-all-button'\n                            onClick={handleSelectAll}\n                            type='button'\n                          >\n                            {isAllSelected ? clearAllLabel : selectAllLabel}\n                          </button>\n                          <div className='mx-3 my-1 h-px bg-input-border' />\n                        </div>\n                      )}\n\n                      {groupedOptions.ungrouped.length > 0 && <div className='mb-1'>{groupedOptions.ungrouped.map((option, index) => renderOption(option, index))}</div>}\n\n                      {Object.entries(groupedOptions.groups).map(([groupName, groupOptions]) => (\n                        <div key={groupName} className='mb-1' data-testid='spectral-multiselect-group'>\n                          {(groupedOptions.ungrouped.length > 0 || Object.keys(groupedOptions.groups).indexOf(groupName) > 0) && <div className='mx-3 my-1 h-px bg-input-border' />}\n                          <div data-testid='spectral-multiselect-group-name' className='px-3 py-1 text-xs font-semibold text-input-text-secondary tracking-wide uppercase'>\n                            {groupName}\n                          </div>\n                          {groupOptions.map((option, _index) => renderOption(option, filteredOptions.indexOf(option)))}\n                        </div>\n                      ))}\n                    </>\n                  )}\n                </div>\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </div>\n      </Popover.Root>\n\n      <ErrorMessage dataTestId='spectral-multiselect-error-message' id={errorMessageId} message={state === 'error' ? errorMessage : null} messageReserveLines={messageReserveLines} messageReserveSpace={messageReserveSpace} />\n      <WarningMessage dataTestId='spectral-multiselect-warning-message' id={warningMessageId} message={state === 'warning' ? warningMessage : null} messageReserveLines={messageReserveLines} messageReserveSpace={messageReserveSpace} />\n    </div>\n  )\n}\nMultiSelectBase.displayName = 'MultiSelectBase'\n"],"mappings":"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"}

package/dist/MultiSelect.d.ts

@@ -1,25 +1,42 @@
-import { Ref } from 'react';
-import { MultiSelectBaseProps } from './MultiSelectBase';
-export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'defaultValue' | 'onChange' | 'options' | 'value'> {
-    defaultValue?: string[];
-    emptyText?: string;
-    loading?: boolean;
-    onChange?: (value: string[]) => void;
-    onSearchChange?: (search: string) => void;
-    onValueChange?: (value: string[]) => void;
-    options: {
-        disabled?: boolean;
-        group?: string;
-        label: string;
-        value: string;
-    }[];
-    sortAlphabetically?: boolean;
-    value?: string[];
+'use client';
+import { MultiSelectBaseProps } from "./MultiSelect/MultiSelectBase.js";
+import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/MultiSelect/MultiSelect.d.ts
+interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'defaultValue' | 'onChange' | 'options' | 'value'> {
+  defaultValue?: string[];
+  emptyText?: string;
+  loading?: boolean;
+  onChange?: (value: string[]) => void;
+  onSearchChange?: (search: string) => void;
+  onValueChange?: (value: string[]) => void;
+  options: {
+    disabled?: boolean;
+    group?: string;
+    label: string;
+    value: string;
+  }[];
+  sortAlphabetically?: boolean;
+  value?: string[];
 }
-export declare const MultiSelect: {
-    ({ emptyText, loading, onChange, onValueChange, options, defaultValue, ref, state, value, ...props }: MultiSelectProps & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function MultiSelect({
+  emptyText,
+  loading,
+  onChange,
+  onValueChange,
+  options,
+  defaultValue,
+  ref,
+  state,
+  value,
+  ...props
+}: MultiSelectProps & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace MultiSelect {
+  var displayName: string;
+}
+//#endregion
+export { MultiSelect, MultiSelectProps };
 //# sourceMappingURL=MultiSelect.d.ts.map

package/dist/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","names":[],"sources":["../src/components/MultiSelect/MultiSelect.tsx"],"mappings":";;;;;;UAGiB,gBAAA,SAAyB,IAAA,CAAK,oBAAA;EAC7C,YAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA,IAAY,KAAA;EACZ,cAAA,IAAkB,MAAA;EAClB,aAAA,IAAiB,KAAA;EACjB,OAAA;IACE,QAAA;IACA,KAAA;IACA,KAAA;IACA,KAAA;EAAA;EAEF,kBAAA;EACA,KAAA;AAAA;AAAA;EAIA,SAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,OAAA;EACA,YAAA;EACA,GAAA;EACA,KAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,gBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/MultiSelect.js

@@ -1,31 +1,36 @@
-'use client'
-import './styles/main.css'
-import { MultiSelectBase as e } from "./MultiSelect/MultiSelectBase.js";
+'use client';
+import { MultiSelectBase } from "./MultiSelect/MultiSelectBase.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/components/MultiSelect/MultiSelect.tsx
-var n = ({ emptyText: n = "No matches found.", loading: r = !1, onChange: i, onValueChange: a, options: o, defaultValue: s, ref: c, state: l, value: u, ...d }) => {
-	let f = o.map((e) => ({
-		disabled: e.disabled ?? !1,
-		group: e.group,
-		label: e.label,
-		value: e.value
-	})), p = r ? "loading" : l;
-	return /* @__PURE__ */ t(e, {
-		"data-disabled": d.disabled,
-		defaultValue: s,
-		disabled: d.disabled,
-		emptyMessage: n,
-		onChange: (e) => {
-			a?.(e), i?.(e);
-		},
-		options: f,
-		ref: c,
-		state: p,
-		value: u,
-		...d
+const MultiSelect = ({ emptyText = "No matches found.", loading = false, onChange, onValueChange, options, defaultValue, ref, state, value, ...props }) => {
+	const baseOptions = options.map((option) => ({
+		disabled: option.disabled ?? false,
+		group: option.group,
+		label: option.label,
+		value: option.value
+	}));
+	const derivedState = loading ? "loading" : state;
+	const handleChange = (nextValue) => {
+		onValueChange?.(nextValue);
+		onChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsx(MultiSelectBase, {
+		"data-disabled": props.disabled,
+		defaultValue,
+		disabled: props.disabled,
+		emptyMessage: emptyText,
+		onChange: handleChange,
+		options: baseOptions,
+		ref,
+		state: derivedState,
+		value,
+		...props
 	});
 };
-n.displayName = "MultiSelect";
+MultiSelect.displayName = "MultiSelect";
+
 //#endregion
-export { n as MultiSelect };
+export { MultiSelect };
+//# sourceMappingURL=MultiSelect.js.map

package/dist/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","names":[],"sources":["../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { type Ref } from 'react'\nimport { MultiSelectBase, type MultiSelectBaseProps, type MultiSelectOption } from './MultiSelectBase'\n\nexport interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'defaultValue' | 'onChange' | 'options' | 'value'> {\n  defaultValue?: string[]\n  emptyText?: string\n  loading?: boolean\n  onChange?: (value: string[]) => void\n  onSearchChange?: (search: string) => void\n  onValueChange?: (value: string[]) => void\n  options: {\n    disabled?: boolean\n    group?: string\n    label: string\n    value: string\n  }[]\n  sortAlphabetically?: boolean\n  value?: string[]\n}\n\nexport const MultiSelect = ({\n  emptyText = 'No matches found.',\n  loading = false,\n  onChange,\n  onValueChange,\n  options,\n  defaultValue,\n  ref,\n  state,\n  value,\n  ...props\n}: MultiSelectProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const baseOptions: MultiSelectOption[] = options.map((option) => ({\n    disabled: option.disabled ?? false,\n    group: option.group,\n    label: option.label,\n    value: option.value,\n  }))\n\n  const derivedState = loading ? 'loading' : state\n\n  const handleChange = (nextValue: string[]) => {\n    onValueChange?.(nextValue)\n    onChange?.(nextValue)\n  }\n\n  return <MultiSelectBase data-disabled={props.disabled} defaultValue={defaultValue} disabled={props.disabled} emptyMessage={emptyText} onChange={handleChange} options={baseOptions} ref={ref} state={derivedState} value={value} {...props} />\n}\nMultiSelect.displayName = 'MultiSelect'\n"],"mappings":";;;;;;AAoBA,MAAa,eAAe,EAC1B,YAAY,qBACZ,UAAU,OACV,UACA,eACA,SACA,cACA,KACA,OACA,OACA,GAAG,YAGC;CACJ,MAAM,cAAmC,QAAQ,KAAK,YAAY;EAChE,UAAU,OAAO,YAAY;EAC7B,OAAO,OAAO;EACd,OAAO,OAAO;EACd,OAAO,OAAO;EACf,EAAE;CAEH,MAAM,eAAe,UAAU,YAAY;CAE3C,MAAM,gBAAgB,cAAwB;AAC5C,kBAAgB,UAAU;AAC1B,aAAW,UAAU;;AAGvB,QAAO,oBAAC,iBAAD;EAAiB,iBAAe,MAAM;EAAwB;EAAc,UAAU,MAAM;EAAU,cAAc;EAAW,UAAU;EAAc,SAAS;EAAkB;EAAK,OAAO;EAAqB;EAAO,GAAI;EAAS;;AAEhP,YAAY,cAAc"}

package/dist/Popover.d.ts

@@ -1,10 +1,30 @@
-import { ComponentPropsWithoutRef } from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-export type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-    width?: number | string;
+'use client';
+import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+//#region src/components/Popover/Popover.d.ts
+type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+  width?: number | string;
 };
-export declare const Popover: ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
-export declare const PopoverTrigger: ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
-export declare const PopoverContent: ({ align, className, collisionPadding, side, sideOffset, width, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const PopoverAnchor: ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>) => import("react/jsx-runtime").JSX.Element;
+declare const Popover: ({
+  ...props
+}: ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => _$react_jsx_runtime0.JSX.Element;
+declare const PopoverTrigger: ({
+  ...props
+}: ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>) => _$react_jsx_runtime0.JSX.Element;
+declare const PopoverContent: ({
+  align,
+  className,
+  collisionPadding,
+  side,
+  sideOffset,
+  width,
+  ...props
+}: PopoverContentProps) => _$react_jsx_runtime0.JSX.Element;
+declare const PopoverAnchor: ({
+  ...props
+}: ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger };
 //# sourceMappingURL=Popover.d.ts.map

package/dist/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","names":[],"sources":["../src/components/Popover/Popover.tsx"],"mappings":";;;;;;KAIY,mBAAA,GAAsB,wBAAA,QAAgC,gBAAA,CAAiB,OAAA;EACjF,KAAA;AAAA;AAAA,cAGW,OAAA;EAAA,GAAO;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,IAAA,MAAK,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAI/E,cAAA;EAAA,GAAc;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIzF,cAAA;EAAc,KAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,IAAA;EAAA,UAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAAuH,mBAAA,KAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cA6BxJ,aAAA;EAAA,GAAa;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,MAAA,MAAO,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Popover.js

@@ -1,31 +1,44 @@
-'use client'
-import './styles/main.css'
-import { t as e } from "./twUtils-BpqlKSeB.js";
-import { a as t, i as n, n as r, r as i, t as a } from "./dist-B9w6c9RC.js";
+'use client';
+import { cn } from "./utils/twUtils.js";
 import "react";
-import { jsx as o } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
 //#region src/components/Popover/Popover.tsx
-var s = ({ ...e }) => /* @__PURE__ */ o(n, {
-	"data-slot": "popover",
-	"data-testid": "spectral-popover",
-	...e
-}), c = ({ ...e }) => /* @__PURE__ */ o(t, {
-	"data-slot": "popover-trigger",
-	"data-testid": "spectral-popover-trigger",
-	...e
-}), l = ({ align: t = "center", className: n, collisionPadding: a = 8, side: s = "bottom", sideOffset: c = 4, width: l = "w-fit", ...u }) => /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(r, {
-	align: t,
-	collisionPadding: a,
-	"data-slot": "popover-content",
-	"data-testid": "spectral-popover-content",
-	side: s,
-	sideOffset: c,
-	className: e("bg-popover-bg text-popover-text motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:animate-in", "motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "z-50 h-fit motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "rounded-lg p-4 max-h-(--radix-popover-content-available-height) origin-[--radix-popover-content-transform-origin] border-none", "shadow-md w-(--popover-width) overflow-x-hidden overflow-y-auto outline-none", n),
-	style: { "--popover-width": typeof l == "number" ? `${l}px` : l === "w-fit" ? "320px" : l },
-	...u
-}) }), u = ({ ...e }) => /* @__PURE__ */ o(a, {
-	"data-slot": "popover-anchor",
-	...e
-});
+const Popover = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+		"data-slot": "popover",
+		"data-testid": "spectral-popover",
+		...props
+	});
+};
+const PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		"data-slot": "popover-trigger",
+		"data-testid": "spectral-popover-trigger",
+		...props
+	});
+};
+const PopoverContent = ({ align = "center", className, collisionPadding = 8, side = "bottom", sideOffset = 4, width = "w-fit", ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		align,
+		collisionPadding,
+		"data-slot": "popover-content",
+		"data-testid": "spectral-popover-content",
+		side,
+		sideOffset,
+		className: cn("bg-popover-bg text-popover-text motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:animate-in", "motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "z-50 h-fit motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "rounded-lg p-4 max-h-(--radix-popover-content-available-height) origin-[--radix-popover-content-transform-origin] border-none", "shadow-md w-(--popover-width) overflow-x-hidden overflow-y-auto outline-none", className),
+		style: { "--popover-width": typeof width === "number" ? `${width}px` : width === "w-fit" ? "320px" : width },
+		...props
+	}) });
+};
+const PopoverAnchor = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
+		"data-slot": "popover-anchor",
+		...props
+	});
+};
+
 //#endregion
-export { s as Popover, u as PopoverAnchor, l as PopoverContent, c as PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=Popover.js.map

package/dist/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type CSSProperties } from 'react'\n\nexport type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  width?: number | string\n}\n\nexport const Popover = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => {\n  return <PopoverPrimitive.Root data-slot='popover' data-testid='spectral-popover' {...props} />\n}\n\nexport const PopoverTrigger = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>) => {\n  return <PopoverPrimitive.Trigger data-slot='popover-trigger' data-testid='spectral-popover-trigger' {...props} />\n}\n\nexport const PopoverContent = ({ align = 'center', className, collisionPadding = 8, side = 'bottom', sideOffset = 4, width = 'w-fit', ...props }: PopoverContentProps) => {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        collisionPadding={collisionPadding}\n        data-slot='popover-content'\n        data-testid='spectral-popover-content'\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover-bg text-popover-text motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:animate-in',\n          'motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95',\n          'z-50 h-fit motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n          'rounded-lg p-4 max-h-(--radix-popover-content-available-height) origin-[--radix-popover-content-transform-origin] border-none',\n          'shadow-md w-(--popover-width) overflow-x-hidden overflow-y-auto outline-none',\n          className,\n        )}\n        style={\n          {\n            '--popover-width': typeof width === 'number' ? `${width}px` : width === 'w-fit' ? '320px' : width,\n          } as CSSProperties\n        }\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport const PopoverAnchor = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>) => {\n  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />\n}\n"],"mappings":";;;;;;;AAQA,MAAa,WAAW,EAAE,GAAG,YAAoE;AAC/F,QAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,eAAY;EAAmB,GAAI;EAAS;;AAGhG,MAAa,kBAAkB,EAAE,GAAG,YAAuE;AACzG,QAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,eAAY;EAA2B,GAAI;EAAS;;AAGnH,MAAa,kBAAkB,EAAE,QAAQ,UAAU,WAAW,mBAAmB,GAAG,OAAO,UAAU,aAAa,GAAG,QAAQ,SAAS,GAAG,YAAiC;AACxK,QACE,oBAAC,iBAAiB,QAAlB,YACE,oBAAC,iBAAiB,SAAlB;EACS;EACW;EAClB,aAAU;EACV,eAAY;EACN;EACM;EACZ,WAAW,GACT,mKACA,mLACA,uKACA,iIACA,gFACA,UACD;EACD,OACE,EACE,mBAAmB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM,UAAU,UAAU,UAAU,OAC7F;EAEH,GAAI;EACJ,GACsB;;AAI9B,MAAa,iBAAiB,EAAE,GAAG,YAAsE;AACvG,QAAO,oBAAC,iBAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS"}

package/dist/RadioButton.d.ts

@@ -1,17 +1,38 @@
-import { AsChildProp } from './primitives/slot';
-import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
-export interface RadioButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'type'> {
-    checked?: boolean;
-    children: ReactNode;
-    expanded?: boolean;
-    isKeptActive?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    onSelect?: (checked: boolean) => void;
+'use client';
+import { AsChildProp } from "./primitives/slot.js";
+import { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/RadioButton/RadioButton.d.ts
+interface RadioButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'type'> {
+  checked?: boolean;
+  children: ReactNode;
+  expanded?: boolean;
+  isKeptActive?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  onSelect?: (checked: boolean) => void;
+  variant?: 'default' | 'outline';
 }
-export declare const RadioButton: {
-    ({ asChild, checked, children, className, disabled, expanded, isKeptActive, onCheckedChange, onClick, onSelect, ref, ...rest }: RadioButtonProps & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function RadioButton({
+  asChild,
+  checked,
+  children,
+  className,
+  disabled,
+  expanded,
+  isKeptActive,
+  onCheckedChange,
+  onClick,
+  onSelect,
+  ref,
+  variant,
+  ...rest
+}: RadioButtonProps & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace RadioButton {
+  var displayName: string;
+}
+//#endregion
+export { RadioButton, RadioButtonProps };
 //# sourceMappingURL=RadioButton.d.ts.map

package/dist/RadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"mappings":";;;;;;UAIiB,gBAAA,SAAyB,WAAA,EAAa,IAAA,CAAK,oBAAA,CAAqB,iBAAA;EAC/E,OAAA;EACA,QAAA,EAAU,SAAA;EACV,QAAA;EACA,YAAA;EACA,eAAA,IAAmB,OAAA;EACnB,QAAA,IAAY,OAAA;EACZ,OAAA;AAAA;AAAA;EAIA,OAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EACA,YAAA;EACA,eAAA;EACA,OAAA;EACA,QAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,gBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/RadioButton.js

@@ -1,34 +1,42 @@
-'use client'
-import './styles/main.css'
-import { t as e } from "./twUtils-BpqlKSeB.js";
-import { Slot as t } from "./primitives/slot.js";
+'use client';
+import { cn } from "./utils/twUtils.js";
+import { Slot } from "./primitives/slot.js";
 import "react";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/components/RadioButton/RadioButton.tsx
-var r = ({ asChild: r = !1, checked: i = !1, children: a, className: o, disabled: s = !1, expanded: c = !1, isKeptActive: l = !1, onCheckedChange: u, onClick: d, onSelect: f, ref: p, ...m }) => {
-	let h = (e) => {
-		d?.(e), !(e.defaultPrevented || s) && (u?.(!0), f?.(!0));
-	}, g = {
-		...m,
-		className: e("gap-2 rounded-md text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4 inline-flex items-center justify-center border border-toggle-border bg-toggle-bg text-toggle-text shadow-none transition-colors outline-none hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:ring-[3px] active:border-toggle-border--active active:bg-toggle-bg--active active:text-toggle-text--active disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", c && "w-full", l && "data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active", o),
-		disabled: s,
-		onClick: h,
+const RadioButton = ({ asChild = false, checked = false, children, className, disabled = false, expanded = false, isKeptActive = false, onCheckedChange, onClick, onSelect, ref, variant = "default", ...rest }) => {
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || disabled) return;
+		onCheckedChange?.(true);
+		onSelect?.(true);
+	};
+	const baseProps = {
+		...rest,
+		className: cn(`gap-2 rounded-md text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4 inline-flex items-center justify-center border border-toggle-border bg-toggle-bg text-toggle-text shadow-none transition-colors outline-none hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:ring-[3px] active:border-toggle-border--active active:bg-toggle-bg--active active:text-toggle-text--active disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`, "data-[variant=outline]:[--color-toggle-border:var(--color-toggle-outline-border)]", expanded && "w-full", isKeptActive && "data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active", className),
+		disabled,
+		onClick: handleClick,
 		role: "radio",
-		"aria-checked": i,
-		"data-state": i ? "on" : "off",
-		"data-testid": "spectral-radio-button"
+		"aria-checked": checked,
+		"data-state": checked ? "on" : "off",
+		"data-testid": "spectral-radio-button",
+		"data-variant": variant
 	};
-	return r ? /* @__PURE__ */ n(t, {
-		ref: p,
-		...g,
-		children: a
-	}) : /* @__PURE__ */ n("button", {
-		ref: p,
-		...g,
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		...baseProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		...baseProps,
 		type: "button",
-		children: a
+		children
 	});
 };
-r.displayName = "RadioButton";
+RadioButton.displayName = "RadioButton";
+
 //#endregion
-export { r as RadioButton };
+export { RadioButton };
+//# sourceMappingURL=RadioButton.js.map

package/dist/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react'\n\nexport interface RadioButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'type'> {\n  checked?: boolean\n  children: ReactNode\n  expanded?: boolean\n  isKeptActive?: boolean\n  onCheckedChange?: (checked: boolean) => void\n  onSelect?: (checked: boolean) => void\n  variant?: 'default' | 'outline'\n}\n\nexport const RadioButton = ({\n  asChild = false,\n  checked = false,\n  children,\n  className,\n  disabled = false,\n  expanded = false,\n  isKeptActive = false,\n  onCheckedChange,\n  onClick,\n  onSelect,\n  ref,\n  variant = 'default',\n  ...rest\n}: RadioButtonProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (event.defaultPrevented || disabled) return\n\n    onCheckedChange?.(true)\n    onSelect?.(true)\n  }\n\n  const baseProps = {\n    ...rest,\n    className: cn(\n      `gap-2 rounded-md text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4 inline-flex items-center justify-center border border-toggle-border bg-toggle-bg text-toggle-text shadow-none transition-colors outline-none hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:ring-[3px] active:border-toggle-border--active active:bg-toggle-bg--active active:text-toggle-text--active disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n      'data-[variant=outline]:[--color-toggle-border:var(--color-toggle-outline-border)]',\n      expanded && 'w-full',\n      isKeptActive && 'data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active',\n      className,\n    ),\n    disabled,\n    onClick: handleClick,\n    role: 'radio',\n    'aria-checked': checked,\n    'data-state': checked ? 'on' : 'off',\n    'data-testid': 'spectral-radio-button',\n    'data-variant': variant,\n  }\n\n  if (asChild) {\n    return (\n      <Slot ref={ref as Ref<HTMLElement>} {...baseProps}>\n        {children}\n      </Slot>\n    )\n  }\n\n  return (\n    <button ref={ref} {...baseProps} type='button'>\n      {children}\n    </button>\n  )\n}\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;;;;AAcA,MAAa,eAAe,EAC1B,UAAU,OACV,UAAU,OACV,UACA,WACA,WAAW,OACX,WAAW,OACX,eAAe,OACf,iBACA,SACA,UACA,KACA,UAAU,WACV,GAAG,WAGC;CACJ,MAAM,eAAe,UAAyC;AAC5D,YAAU,MAAM;AAChB,MAAI,MAAM,oBAAoB,SAAU;AAExC,oBAAkB,KAAK;AACvB,aAAW,KAAK;;CAGlB,MAAM,YAAY;EAChB,GAAG;EACH,WAAW,GACT,8sBACA,qFACA,YAAY,UACZ,gBAAgB,8HAChB,UACD;EACD;EACA,SAAS;EACT,MAAM;EACN,gBAAgB;EAChB,cAAc,UAAU,OAAO;EAC/B,eAAe;EACf,gBAAgB;EACjB;AAED,KAAI,QACF,QACE,oBAAC,MAAD;EAAW;EAAyB,GAAI;EACrC;EACI;AAIX,QACE,oBAAC,UAAD;EAAa;EAAK,GAAI;EAAW,MAAK;EACnC;EACM;;AAGb,YAAY,cAAc"}

package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts

@@ -1,26 +1,53 @@
-import { AsChildProp } from '../primitives/slot';
-import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
-export interface RadioButtonGroupProps {
-    asChild?: boolean;
-    children: ReactNode;
-    className?: string;
-    expanded?: boolean;
-    isKeptActive?: boolean;
-    onValueChange?: (value: string) => void;
-    value?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
+'use client';
+import { AsChildProp } from "../primitives/slot.js";
+import { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/RadioButtonGroup/RadioButtonGroupBase.d.ts
+interface RadioButtonGroupProps {
+  asChild?: boolean;
+  children: ReactNode;
+  className?: string;
+  expanded?: boolean;
+  isKeptActive?: boolean;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  variant?: 'default' | 'outline';
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 }
-export interface RadioButtonGroupItemProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onSelect' | 'type'> {
-    children: ReactNode;
-    onSelect?: (value: string) => void;
-    value: string;
+interface RadioButtonGroupItemProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onSelect' | 'type'> {
+  children: ReactNode;
+  onSelect?: (value: string) => void;
+  value: string;
 }
-export declare const RadioButtonGroupBase: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, expanded, isKeptActive, onValueChange, value }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RadioButtonGroupItem: {
-    ({ asChild, children, className, disabled, onClick, onSelect, ref, value, ...rest }: RadioButtonGroupItemProps & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const RadioButtonGroupBase: ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  children,
+  className,
+  expanded,
+  isKeptActive,
+  onValueChange,
+  value,
+  variant
+}: RadioButtonGroupProps) => _$react_jsx_runtime0.JSX.Element;
+declare function RadioButtonGroupItem({
+  asChild,
+  children,
+  className,
+  disabled,
+  onClick,
+  onSelect,
+  ref,
+  value,
+  ...rest
+}: RadioButtonGroupItemProps & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace RadioButtonGroupItem {
+  var displayName: string;
+}
+//#endregion
+export { RadioButtonGroupBase, RadioButtonGroupItem, RadioButtonGroupItemProps, RadioButtonGroupProps };
 //# sourceMappingURL=RadioButtonGroupBase.d.ts.map

package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroupBase.d.ts","names":[],"sources":["../../src/components/RadioButtonGroup/RadioButtonGroupBase.tsx"],"mappings":";;;;;;UAciB,qBAAA;EACf,OAAA;EACA,QAAA,EAAU,SAAA;EACV,SAAA;EACA,QAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,KAAA;EACA,OAAA;EACA,YAAA;EACA,iBAAA;AAAA;AAAA,UAGe,yBAAA,SAAkC,WAAA,EAAa,IAAA,CAAK,oBAAA,CAAqB,iBAAA;EACxF,QAAA,EAAU,SAAA;EACV,QAAA,IAAY,KAAA;EACZ,KAAA;AAAA;AAAA,cAGW,oBAAA;EAAA,cAAoB,SAAA;EAAA,mBAAA,cAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,YAAA;EAAA,aAAA;EAAA,KAAA;EAAA;AAAA,GAA4K,qBAAA,KAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;EAwBhO,OAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA;EACA,OAAA;EACA,QAAA;EACA,GAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,yBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}