@mantine/core 9.6.2 → 9.7.0

package/esm/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["useId"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport { getOptionByLabel } from '../Combobox/get-options-lockup/get-option-by-label';\nimport { isExternalInputChange } from '../Combobox/is-external-input-change/is-external-input-change';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    floatingHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        floatingHeight={floatingHeight}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\n        >\n          <InputBase\n            id={_id}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              if (isExternalInputChange(event)) {\n                if (!readOnly) {\n                  const externalOption = getOptionByLabel(optionsLockup, event.currentTarget.value);\n\n                  if (externalOption && `${externalOption.value}` !== `${_value}`) {\n                    setValue(externalOption.value as any, externalOption);\n                    !controlled && handleSearchChange(externalOption.label);\n                  }\n                }\n\n                return;\n              }\n\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              !!searchable && combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Select.mjs","names":["useId"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport { getOptionByLabel } from '../Combobox/get-options-lockup/get-option-by-label';\nimport { isExternalInputChange } from '../Combobox/is-external-input-change/is-external-input-change';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    floatingHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        floatingHeight={floatingHeight}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\n        >\n          <InputBase\n            id={_id}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              if (isExternalInputChange(event)) {\n                if (!readOnly) {\n                  const externalOption = getOptionByLabel(optionsLockup, event.currentTarget.value);\n\n                  if (externalOption && `${externalOption.value}` !== `${_value}`) {\n                    setValue(externalOption.value as any, externalOption);\n                    !controlled && handleSearchChange(externalOption.label);\n                  }\n                }\n\n                return;\n              }\n\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":"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"}

package/esm/components/Slider/Thumb/Thumb.mjs

@@ -5,12 +5,13 @@ import { useSliderContext } from "../Slider.context.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Slider/Thumb/Thumb.tsx
-function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", ref }) {
+function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", className, style, ref, ...others }) {
 	const { getStyles } = useSliderContext();
 	const [focused, setFocused] = useState(false);
 	const isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover && isHovered;
 	const valueText = typeof thumbValueText === "function" ? thumbValueText(value) : thumbValueText;
 	return /* @__PURE__ */ jsxs(Box, {
+		...others,
 		tabIndex: disabled ? -1 : 0,
 		role: "slider",
 		"aria-label": thumbLabel,
@@ -22,7 +23,11 @@ function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyD
 		"aria-orientation": orientation,
 		ref,
 		__vars: { "--slider-thumb-offset": `${position}%` },
-		...getStyles("thumb", { focusable: true }),
+		...getStyles("thumb", {
+			focusable: true,
+			className,
+			style
+		}),
 		mod: {
 			dragging,
 			disabled

package/esm/components/Slider/Thumb/Thumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.mjs","names":[],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  label: React.ReactNode;\n  thumbValueText?: string | ((value: number) => string);\n  onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onMouseDown?: (event: any) => void;\n  labelTransitionProps: TransitionOverride | undefined;\n  labelAlwaysOn: boolean | undefined;\n  thumbLabel: string | undefined;\n  showLabelOnHover: boolean | undefined;\n  isHovered?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean | undefined;\n  orientation?: 'horizontal' | 'vertical';\n  className?: string | undefined;\n  style?: React.CSSProperties;\n}\n\nexport function Thumb({\n  max,\n  min,\n  value,\n  position,\n  label,\n  dragging,\n  onMouseDown,\n  onKeyDownCapture,\n  labelTransitionProps,\n  labelAlwaysOn,\n  thumbLabel,\n  thumbValueText,\n  onFocus,\n  onBlur,\n  showLabelOnHover,\n  isHovered,\n  children = null,\n  disabled,\n  orientation = 'horizontal',\n  ref,\n}: ThumbProps) {\n  const { getStyles } = useSliderContext();\n\n  const [focused, setFocused] = useState(false);\n\n  const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n  const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n  return (\n    <Box<'div'>\n      tabIndex={disabled ? -1 : 0}\n      role=\"slider\"\n      aria-label={thumbLabel}\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      aria-disabled={disabled}\n      aria-orientation={orientation}\n      ref={ref}\n      __vars={{ '--slider-thumb-offset': `${position}%` }}\n      {...getStyles('thumb', { focusable: true })}\n      mod={{ dragging, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        typeof onFocus === 'function' && onFocus(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        typeof onBlur === 'function' && onBlur(event);\n      }}\n      onTouchStart={onMouseDown}\n      onMouseDown={onMouseDown}\n      onKeyDownCapture={onKeyDownCapture}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {children}\n      <Transition\n        mounted={label != null && !!isVisible}\n        transition=\"fade\"\n        duration={0}\n        {...labelTransitionProps}\n      >\n        {(transitionStyles) => (\n          <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n        )}\n      </Transition>\n    </Box>\n  );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,OACa;CACb,MAAM,EAAE,cAAc,iBAAiB;CAEvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,qBAAC,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS,EAAE,WAAW,KAAK,CAAC;EAC1C,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;EAzB5C,UAAA,CA2BG,UACD,oBAAC,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;GAEF,WAAA,qBACA,oBAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;IAAI,UAAA;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Thumb.mjs","names":[],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  label: React.ReactNode;\n  thumbValueText?: string | ((value: number) => string);\n  onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onMouseDown?: (event: any) => void;\n  labelTransitionProps: TransitionOverride | undefined;\n  labelAlwaysOn: boolean | undefined;\n  thumbLabel: string | undefined;\n  showLabelOnHover: boolean | undefined;\n  isHovered?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean | undefined;\n  orientation?: 'horizontal' | 'vertical';\n  className?: string | undefined;\n  style?: React.CSSProperties;\n}\n\nexport function Thumb({\n  max,\n  min,\n  value,\n  position,\n  label,\n  dragging,\n  onMouseDown,\n  onKeyDownCapture,\n  labelTransitionProps,\n  labelAlwaysOn,\n  thumbLabel,\n  thumbValueText,\n  onFocus,\n  onBlur,\n  showLabelOnHover,\n  isHovered,\n  children = null,\n  disabled,\n  orientation = 'horizontal',\n  className,\n  style,\n  ref,\n  ...others\n}: ThumbProps) {\n  const { getStyles } = useSliderContext();\n\n  const [focused, setFocused] = useState(false);\n\n  const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n  const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n  return (\n    <Box<'div'>\n      {...others}\n      tabIndex={disabled ? -1 : 0}\n      role=\"slider\"\n      aria-label={thumbLabel}\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      aria-disabled={disabled}\n      aria-orientation={orientation}\n      ref={ref}\n      __vars={{ '--slider-thumb-offset': `${position}%` }}\n      {...getStyles('thumb', { focusable: true, className, style })}\n      mod={{ dragging, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        typeof onFocus === 'function' && onFocus(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        typeof onBlur === 'function' && onBlur(event);\n      }}\n      onTouchStart={onMouseDown}\n      onMouseDown={onMouseDown}\n      onKeyDownCapture={onKeyDownCapture}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {children}\n      <Transition\n        mounted={label != null && !!isVisible}\n        transition=\"fade\"\n        duration={0}\n        {...labelTransitionProps}\n      >\n        {(transitionStyles) => (\n          <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n        )}\n      </Transition>\n    </Box>\n  );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,WACA,OACA,KACA,GAAG,UACU;CACb,MAAM,EAAE,cAAc,iBAAiB;CAEvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,qBAAC,KAAD;EACE,GAAI;EACJ,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS;GAAE,WAAW;GAAM;GAAW;EAAM,CAAC;EAC5D,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;EA1B5C,UAAA,CA4BG,UACD,oBAAC,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;GAEF,WAAA,qBACA,oBAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;IAAI,UAAA;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}

package/esm/components/Table/Table.mjs

@@ -12,6 +12,7 @@ import Table_module_default from "./Table.module.mjs";
 import { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr } from "./Table.components.mjs";
 import { TableDataRenderer } from "./TableDataRenderer.mjs";
 import { TableScrollContainer } from "./TableScrollContainer.mjs";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Table/Table.tsx
 const defaultProps = {
@@ -43,18 +44,30 @@ const Table = factory((_props) => {
 		attributes,
 		rootSelector: "table",
 		vars,
-		varsResolver
+		varsResolver,
+		stable: true
 	});
+	const stripedValue = striped === true ? "odd" : striped || void 0;
+	const resolvedCaptionSide = captionSide || "bottom";
+	const contextValue = useMemo(() => ({
+		getStyles,
+		stickyHeader,
+		striped: stripedValue,
+		highlightOnHover,
+		withColumnBorders,
+		withRowBorders,
+		captionSide: resolvedCaptionSide
+	}), [
+		getStyles,
+		stickyHeader,
+		stripedValue,
+		highlightOnHover,
+		withColumnBorders,
+		withRowBorders,
+		resolvedCaptionSide
+	]);
 	return /* @__PURE__ */ jsx(TableProvider, {
-		value: {
-			getStyles,
-			stickyHeader,
-			striped: striped === true ? "odd" : striped || void 0,
-			highlightOnHover,
-			withColumnBorders,
-			withRowBorders,
-			captionSide: captionSide || "bottom"
-		},
+		value: contextValue,
 		children: /* @__PURE__ */ jsx(Box, {
 			component: "table",
 			mod: [{

package/esm/components/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["classes"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  TableCaption,\n  TableTbody,\n  TableTd,\n  TableTfoot,\n  TableTh,\n  TableThead,\n  TableTr,\n  type TableCaptionProps,\n  type TableTbodyProps,\n  type TableTdProps,\n  type TableThProps,\n  type TableTrProps,\n  type TableTheadProps,\n  type TableTfootProps,\n} from './Table.components';\nimport { TableProvider, type TableContextValue } from './Table.context';\nimport { TableDataRenderer } from './TableDataRenderer';\nimport { TableScrollContainer, type TableScrollContainerProps } from './TableScrollContainer';\nimport classes from './Table.module.css';\nexport type TableVariant = 'default' | 'vertical';\n\nexport type TableStylesNames =\n  | 'table'\n  | 'thead'\n  | 'tbody'\n  | 'tfoot'\n  | 'tr'\n  | 'th'\n  | 'td'\n  | 'caption';\n\nexport type TableCssVariables = {\n  table:\n    | '--table-layout'\n    | '--table-border-color'\n    | '--table-caption-side'\n    | '--table-horizontal-spacing'\n    | '--table-vertical-spacing'\n    | '--table-striped-color'\n    | '--table-highlight-on-hover-color'\n    | '--table-sticky-header-offset';\n};\n\nexport interface TableData {\n  head?: React.ReactNode[];\n  body?: React.ReactNode[][];\n  foot?: React.ReactNode[];\n  caption?: string;\n}\n\nexport interface TableProps extends BoxProps, StylesApiProps<TableFactory>, ElementProps<'table'> {\n  /** Value of `table-layout` style @default auto */\n  layout?: React.CSSProperties['tableLayout'];\n\n  /** Side of the `Table.Caption` @default bottom */\n  captionSide?: 'top' | 'bottom';\n\n  /** Color of table borders, key of `theme.colors` or any valid CSS color */\n  borderColor?: MantineColor;\n\n  /** If set, the table has the outer border @default false */\n  withTableBorder?: boolean;\n\n  /** If set, the table has borders between columns @default false */\n  withColumnBorders?: boolean;\n\n  /** If set, the table has borders between rows @default true */\n  withRowBorders?: boolean;\n\n  /** Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n  horizontalSpacing?: MantineSpacing;\n\n  /** Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n  verticalSpacing?: MantineSpacing;\n\n  /** If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used @default false  */\n  striped?: boolean | 'odd' | 'even';\n\n  /** Background color of striped rows, key of `theme.colors` or any valid CSS color */\n  stripedColor?: MantineColor;\n\n  /** If set, table rows background changes to `highlightOnHoverColor` when hovered @default false */\n  highlightOnHover?: boolean;\n\n  /** Background color of table rows when hovered, key of `theme.colors` or any valid CSS color */\n  highlightOnHoverColor?: MantineColor;\n\n  /** Data used to generate table, ignored if `children` prop is set */\n  data?: TableData;\n\n  /** If set, `Table.Thead` is sticky @default false */\n  stickyHeader?: boolean;\n\n  /** Offset from top at which `Table.Thead` should become sticky @default 0 */\n  stickyHeaderOffset?: number | string;\n\n  /** If set, `font-variant-numeric: tabular-nums` style is applied @default false */\n  tabularNums?: boolean;\n}\n\nexport type TableFactory = Factory<{\n  props: TableProps;\n  ref: HTMLTableElement;\n  stylesNames: TableStylesNames;\n  vars: TableCssVariables;\n  variant: TableVariant;\n  staticComponents: {\n    Thead: typeof TableThead;\n    Tbody: typeof TableTbody;\n    Tfoot: typeof TableTfoot;\n    Td: typeof TableTd;\n    Th: typeof TableTh;\n    Tr: typeof TableTr;\n    Caption: typeof TableCaption;\n    ScrollContainer: typeof TableScrollContainer;\n    DataRenderer: typeof TableDataRenderer;\n  };\n}>;\n\nconst defaultProps = {\n  withRowBorders: true,\n  verticalSpacing: 7,\n} satisfies Partial<TableProps>;\n\nconst varsResolver = createVarsResolver<TableFactory>(\n  (\n    theme,\n    {\n      layout,\n      captionSide,\n      horizontalSpacing,\n      verticalSpacing,\n      borderColor,\n      stripedColor,\n      highlightOnHoverColor,\n      striped,\n      highlightOnHover,\n      stickyHeaderOffset,\n      stickyHeader,\n    }\n  ) => ({\n    table: {\n      '--table-layout': layout,\n      '--table-caption-side': captionSide,\n      '--table-horizontal-spacing': getSpacing(horizontalSpacing),\n      '--table-vertical-spacing': getSpacing(verticalSpacing),\n      '--table-border-color': borderColor ? getThemeColor(borderColor, theme) : undefined,\n      '--table-striped-color':\n        striped && stripedColor ? getThemeColor(stripedColor, theme) : undefined,\n      '--table-highlight-on-hover-color':\n        highlightOnHover && highlightOnHoverColor\n          ? getThemeColor(highlightOnHoverColor, theme)\n          : undefined,\n      '--table-sticky-header-offset': stickyHeader ? rem(stickyHeaderOffset) : undefined,\n    },\n  })\n);\n\nexport const Table = factory<TableFactory>((_props) => {\n  const props = useProps('Table', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    horizontalSpacing,\n    verticalSpacing,\n    captionSide,\n    stripedColor,\n    highlightOnHoverColor,\n    striped,\n    highlightOnHover,\n    withColumnBorders,\n    withRowBorders,\n    withTableBorder,\n    borderColor,\n    layout,\n    data,\n    children,\n    stickyHeader,\n    stickyHeaderOffset,\n    mod,\n    tabularNums,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TableFactory>({\n    name: 'Table',\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'table',\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <TableProvider\n      value={{\n        getStyles,\n        stickyHeader,\n        striped: striped === true ? 'odd' : striped || undefined,\n        highlightOnHover,\n        withColumnBorders,\n        withRowBorders,\n        captionSide: captionSide || 'bottom',\n      }}\n    >\n      <Box\n        component=\"table\"\n        mod={[{ withTableBorder, tabularNums }, mod]}\n        {...getStyles('table')}\n        {...others}\n      >\n        {children || (!!data && <TableDataRenderer data={data} />)}\n      </Box>\n    </TableProvider>\n  );\n});\n\nTable.classes = classes;\nTable.varsResolver = varsResolver;\nTable.displayName = '@mantine/core/Table';\nTable.Td = TableTd;\nTable.Th = TableTh;\nTable.Tr = TableTr;\nTable.Thead = TableThead;\nTable.Tbody = TableTbody;\nTable.Tfoot = TableTfoot;\nTable.Caption = TableCaption;\nTable.ScrollContainer = TableScrollContainer;\nTable.DataRenderer = TableDataRenderer;\n\nexport namespace Table {\n  export type Props = TableProps;\n  export type StylesNames = TableStylesNames;\n  export type CssVariables = TableCssVariables;\n  export type Factory = TableFactory;\n  export type Data = TableData;\n  export type ContextValue = TableContextValue;\n\n  export namespace Caption {\n    export type Props = TableCaptionProps;\n  }\n\n  export namespace Tbody {\n    export type Props = TableTbodyProps;\n  }\n\n  export namespace Td {\n    export type Props = TableTdProps;\n  }\n\n  export namespace Th {\n    export type Props = TableThProps;\n  }\n\n  export namespace Tr {\n    export type Props = TableTrProps;\n  }\n\n  export namespace Thead {\n    export type Props = TableTheadProps;\n  }\n\n  export namespace Tfoot {\n    export type Props = TableTfootProps;\n  }\n\n  export namespace ScrollContainer {\n    export type Props = TableScrollContainerProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwIA,MAAM,eAAe;CACnB,gBAAgB;CAChB,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAEjB,OACA,EACE,QACA,aACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,oBACA,oBAEE,EACJ,OAAO;CACL,kBAAkB;CAClB,wBAAwB;CACxB,8BAA8B,WAAW,iBAAiB;CAC1D,4BAA4B,WAAW,eAAe;CACtD,wBAAwB,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,yBACE,WAAW,eAAe,cAAc,cAAc,KAAK,IAAI,KAAA;CACjE,oCACE,oBAAoB,wBAChB,cAAc,uBAAuB,KAAK,IAC1C,KAAA;CACN,gCAAgC,eAAe,IAAI,kBAAkB,IAAI,KAAA;AAC3E,EACF,EACF;AAEA,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,mBACA,gBACA,iBACA,aACA,QACA,MACA,UACA,cACA,oBACA,KACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,OACE,oBAAC,eAAD;EACE,OAAO;GACL;GACA;GACA,SAAS,YAAY,OAAO,QAAQ,WAAW,KAAA;GAC/C;GACA;GACA;GACA,aAAa,eAAe;EAC9B;EAEA,UAAA,oBAAC,KAAD;GACE,WAAU;GACV,KAAK,CAAC;IAAE;IAAiB;GAAY,GAAG,GAAG;GAC3C,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH,UAAA,YAAa,CAAC,CAAC,QAAQ,oBAAC,mBAAD,EAAyB,KAAO,CAAA;EACrD,CAAA;CACQ,CAAA;AAEnB,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,KAAK;AACX,MAAM,KAAK;AACX,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,UAAU;AAChB,MAAM,kBAAkB;AACxB,MAAM,eAAe"}
+{"version":3,"file":"Table.mjs","names":["classes"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  TableCaption,\n  TableTbody,\n  TableTd,\n  TableTfoot,\n  TableTh,\n  TableThead,\n  TableTr,\n  type TableCaptionProps,\n  type TableTbodyProps,\n  type TableTdProps,\n  type TableThProps,\n  type TableTrProps,\n  type TableTheadProps,\n  type TableTfootProps,\n} from './Table.components';\nimport { TableProvider, type TableContextValue } from './Table.context';\nimport { TableDataRenderer } from './TableDataRenderer';\nimport { TableScrollContainer, type TableScrollContainerProps } from './TableScrollContainer';\nimport classes from './Table.module.css';\nexport type TableVariant = 'default' | 'vertical';\n\nexport type TableStylesNames =\n  | 'table'\n  | 'thead'\n  | 'tbody'\n  | 'tfoot'\n  | 'tr'\n  | 'th'\n  | 'td'\n  | 'caption';\n\nexport type TableCssVariables = {\n  table:\n    | '--table-layout'\n    | '--table-border-color'\n    | '--table-caption-side'\n    | '--table-horizontal-spacing'\n    | '--table-vertical-spacing'\n    | '--table-striped-color'\n    | '--table-highlight-on-hover-color'\n    | '--table-sticky-header-offset';\n};\n\nexport interface TableData {\n  head?: React.ReactNode[];\n  body?: React.ReactNode[][];\n  foot?: React.ReactNode[];\n  caption?: string;\n}\n\nexport interface TableProps extends BoxProps, StylesApiProps<TableFactory>, ElementProps<'table'> {\n  /** Value of `table-layout` style @default auto */\n  layout?: React.CSSProperties['tableLayout'];\n\n  /** Side of the `Table.Caption` @default bottom */\n  captionSide?: 'top' | 'bottom';\n\n  /** Color of table borders, key of `theme.colors` or any valid CSS color */\n  borderColor?: MantineColor;\n\n  /** If set, the table has the outer border @default false */\n  withTableBorder?: boolean;\n\n  /** If set, the table has borders between columns @default false */\n  withColumnBorders?: boolean;\n\n  /** If set, the table has borders between rows @default true */\n  withRowBorders?: boolean;\n\n  /** Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n  horizontalSpacing?: MantineSpacing;\n\n  /** Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n  verticalSpacing?: MantineSpacing;\n\n  /** If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used @default false  */\n  striped?: boolean | 'odd' | 'even';\n\n  /** Background color of striped rows, key of `theme.colors` or any valid CSS color */\n  stripedColor?: MantineColor;\n\n  /** If set, table rows background changes to `highlightOnHoverColor` when hovered @default false */\n  highlightOnHover?: boolean;\n\n  /** Background color of table rows when hovered, key of `theme.colors` or any valid CSS color */\n  highlightOnHoverColor?: MantineColor;\n\n  /** Data used to generate table, ignored if `children` prop is set */\n  data?: TableData;\n\n  /** If set, `Table.Thead` is sticky @default false */\n  stickyHeader?: boolean;\n\n  /** Offset from top at which `Table.Thead` should become sticky @default 0 */\n  stickyHeaderOffset?: number | string;\n\n  /** If set, `font-variant-numeric: tabular-nums` style is applied @default false */\n  tabularNums?: boolean;\n}\n\nexport type TableFactory = Factory<{\n  props: TableProps;\n  ref: HTMLTableElement;\n  stylesNames: TableStylesNames;\n  vars: TableCssVariables;\n  variant: TableVariant;\n  staticComponents: {\n    Thead: typeof TableThead;\n    Tbody: typeof TableTbody;\n    Tfoot: typeof TableTfoot;\n    Td: typeof TableTd;\n    Th: typeof TableTh;\n    Tr: typeof TableTr;\n    Caption: typeof TableCaption;\n    ScrollContainer: typeof TableScrollContainer;\n    DataRenderer: typeof TableDataRenderer;\n  };\n}>;\n\nconst defaultProps = {\n  withRowBorders: true,\n  verticalSpacing: 7,\n} satisfies Partial<TableProps>;\n\nconst varsResolver = createVarsResolver<TableFactory>(\n  (\n    theme,\n    {\n      layout,\n      captionSide,\n      horizontalSpacing,\n      verticalSpacing,\n      borderColor,\n      stripedColor,\n      highlightOnHoverColor,\n      striped,\n      highlightOnHover,\n      stickyHeaderOffset,\n      stickyHeader,\n    }\n  ) => ({\n    table: {\n      '--table-layout': layout,\n      '--table-caption-side': captionSide,\n      '--table-horizontal-spacing': getSpacing(horizontalSpacing),\n      '--table-vertical-spacing': getSpacing(verticalSpacing),\n      '--table-border-color': borderColor ? getThemeColor(borderColor, theme) : undefined,\n      '--table-striped-color':\n        striped && stripedColor ? getThemeColor(stripedColor, theme) : undefined,\n      '--table-highlight-on-hover-color':\n        highlightOnHover && highlightOnHoverColor\n          ? getThemeColor(highlightOnHoverColor, theme)\n          : undefined,\n      '--table-sticky-header-offset': stickyHeader ? rem(stickyHeaderOffset) : undefined,\n    },\n  })\n);\n\nexport const Table = factory<TableFactory>((_props) => {\n  const props = useProps('Table', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    horizontalSpacing,\n    verticalSpacing,\n    captionSide,\n    stripedColor,\n    highlightOnHoverColor,\n    striped,\n    highlightOnHover,\n    withColumnBorders,\n    withRowBorders,\n    withTableBorder,\n    borderColor,\n    layout,\n    data,\n    children,\n    stickyHeader,\n    stickyHeaderOffset,\n    mod,\n    tabularNums,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TableFactory>({\n    name: 'Table',\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'table',\n    vars,\n    varsResolver,\n    stable: true,\n  });\n\n  const stripedValue = striped === true ? 'odd' : striped || undefined;\n  const resolvedCaptionSide = captionSide || 'bottom';\n\n  const contextValue = useMemo<TableContextValue>(\n    () => ({\n      getStyles,\n      stickyHeader,\n      striped: stripedValue,\n      highlightOnHover,\n      withColumnBorders,\n      withRowBorders,\n      captionSide: resolvedCaptionSide,\n    }),\n    [\n      getStyles,\n      stickyHeader,\n      stripedValue,\n      highlightOnHover,\n      withColumnBorders,\n      withRowBorders,\n      resolvedCaptionSide,\n    ]\n  );\n\n  return (\n    <TableProvider value={contextValue}>\n      <Box\n        component=\"table\"\n        mod={[{ withTableBorder, tabularNums }, mod]}\n        {...getStyles('table')}\n        {...others}\n      >\n        {children || (!!data && <TableDataRenderer data={data} />)}\n      </Box>\n    </TableProvider>\n  );\n});\n\nTable.classes = classes;\nTable.varsResolver = varsResolver;\nTable.displayName = '@mantine/core/Table';\nTable.Td = TableTd;\nTable.Th = TableTh;\nTable.Tr = TableTr;\nTable.Thead = TableThead;\nTable.Tbody = TableTbody;\nTable.Tfoot = TableTfoot;\nTable.Caption = TableCaption;\nTable.ScrollContainer = TableScrollContainer;\nTable.DataRenderer = TableDataRenderer;\n\nexport namespace Table {\n  export type Props = TableProps;\n  export type StylesNames = TableStylesNames;\n  export type CssVariables = TableCssVariables;\n  export type Factory = TableFactory;\n  export type Data = TableData;\n  export type ContextValue = TableContextValue;\n\n  export namespace Caption {\n    export type Props = TableCaptionProps;\n  }\n\n  export namespace Tbody {\n    export type Props = TableTbodyProps;\n  }\n\n  export namespace Td {\n    export type Props = TableTdProps;\n  }\n\n  export namespace Th {\n    export type Props = TableThProps;\n  }\n\n  export namespace Tr {\n    export type Props = TableTrProps;\n  }\n\n  export namespace Thead {\n    export type Props = TableTheadProps;\n  }\n\n  export namespace Tfoot {\n    export type Props = TableTfootProps;\n  }\n\n  export namespace ScrollContainer {\n    export type Props = TableScrollContainerProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyIA,MAAM,eAAe;CACnB,gBAAgB;CAChB,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAEjB,OACA,EACE,QACA,aACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,oBACA,oBAEE,EACJ,OAAO;CACL,kBAAkB;CAClB,wBAAwB;CACxB,8BAA8B,WAAW,iBAAiB;CAC1D,4BAA4B,WAAW,eAAe;CACtD,wBAAwB,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,yBACE,WAAW,eAAe,cAAc,cAAc,KAAK,IAAI,KAAA;CACjE,oCACE,oBAAoB,wBAChB,cAAc,uBAAuB,KAAK,IAC1C,KAAA;CACN,gCAAgC,eAAe,IAAI,kBAAkB,IAAI,KAAA;AAC3E,EACF,EACF;AAEA,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,mBACA,gBACA,iBACA,aACA,QACA,MACA,UACA,cACA,oBACA,KACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACA,QAAQ;CACV,CAAC;CAED,MAAM,eAAe,YAAY,OAAO,QAAQ,WAAW,KAAA;CAC3D,MAAM,sBAAsB,eAAe;CAE3C,MAAM,eAAe,eACZ;EACL;EACA;EACA,SAAS;EACT;EACA;EACA;EACA,aAAa;CACf,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,eAAD;EAAe,OAAO;EACpB,UAAA,oBAAC,KAAD;GACE,WAAU;GACV,KAAK,CAAC;IAAE;IAAiB;GAAY,GAAG,GAAG;GAC3C,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH,UAAA,YAAa,CAAC,CAAC,QAAQ,oBAAC,mBAAD,EAAyB,KAAO,CAAA;EACrD,CAAA;CACQ,CAAA;AAEnB,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,KAAK;AACX,MAAM,KAAK;AACX,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,UAAU;AAChB,MAAM,kBAAkB;AACxB,MAAM,eAAe"}

package/esm/components/Toggle/Toggle.mjs

@@ -0,0 +1,80 @@
+"use client";
+import { getRadius, getSize } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { polymorphicFactory } from "../../core/factory/polymorphic-factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
+import Toggle_module_default from "./Toggle.module.mjs";
+import { useUncontrolled } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toggle/Toggle.tsx
+const defaultProps = { variant: "filled" };
+const varsResolver = createVarsResolver((theme, { size, radius, color, variant, autoContrast }) => {
+	const activeColors = theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: variant || "filled",
+		autoContrast
+	});
+	return { root: {
+		"--toggle-size": size !== void 0 ? getSize(size, "toggle-size") : void 0,
+		"--toggle-radius": radius !== void 0 ? getRadius(radius) : void 0,
+		"--toggle-active-bg": color || variant ? activeColors.background : void 0,
+		"--toggle-active-hover": color || variant ? activeColors.hover : void 0,
+		"--toggle-active-color": color || variant ? activeColors.color : void 0
+	} };
+});
+const Toggle = polymorphicFactory((_props) => {
+	const props = useProps("Toggle", defaultProps, _props);
+	const { className, style, classNames, styles, unstyled, vars, active, defaultActive, onActiveChange, disabled, size, radius, autoWidth, color, autoContrast, children, component, onClick, tabIndex, attributes, ...others } = props;
+	const [_active, handleActiveChange] = useUncontrolled({
+		value: active,
+		defaultValue: defaultActive,
+		finalValue: false,
+		onChange: onActiveChange
+	});
+	const getStyles = useStyles({
+		name: "Toggle",
+		classes: Toggle_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		component: component || "button",
+		type: !component || component === "button" ? "button" : void 0,
+		...others,
+		...getStyles("root", { focusable: true }),
+		"data-active": _active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled,
+		"aria-disabled": disabled || void 0,
+		"aria-pressed": _active,
+		tabIndex: disabled ? -1 : tabIndex,
+		size,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			handleActiveChange(!_active);
+			onClick?.(event);
+		},
+		children
+	});
+});
+Toggle.classes = Toggle_module_default;
+Toggle.varsResolver = varsResolver;
+Toggle.displayName = "@mantine/core/Toggle";
+//#endregion
+export { Toggle };
+
+//# sourceMappingURL=Toggle.mjs.map

package/esm/components/Toggle/Toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.mjs","names":["classes"],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Toggle.module.css';\n\nexport type ToggleStylesNames = 'root';\nexport type ToggleVariant = 'light' | 'filled';\n\nexport type ToggleCssVariables = {\n  root:\n    | '--toggle-size'\n    | '--toggle-radius'\n    | '--toggle-active-bg'\n    | '--toggle-active-hover'\n    | '--toggle-active-color';\n};\n\nexport interface ToggleProps\n  extends BoxProps, StylesApiProps<ToggleFactory>, ElementProps<'button'> {\n  /** Controlled active state */\n  active?: boolean;\n\n  /** Uncontrolled default active state */\n  defaultActive?: boolean;\n\n  /** Called when active state changes */\n  onActiveChange?: (active: boolean) => void;\n\n  /** If set, the toggle is disabled */\n  disabled?: boolean;\n\n  /** Controls toggle height and min-width, `'md'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */\n  radius?: MantineRadius;\n\n  /** If set, the toggle width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */\n  color?: MantineColor;\n\n  /** Determines whether icon color with filled variant should be changed based on the given `color` prop */\n  autoContrast?: boolean;\n}\n\nexport type ToggleFactory = PolymorphicFactory<{\n  props: ToggleProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ToggleStylesNames;\n  vars: ToggleCssVariables;\n  variant: ToggleVariant;\n}>;\n\nconst defaultProps = {\n  variant: 'filled',\n} satisfies Partial<ToggleProps>;\n\nconst varsResolver = createVarsResolver<ToggleFactory>(\n  (theme, { size, radius, color, variant, autoContrast }) => {\n    const activeColors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--toggle-size': size !== undefined ? getSize(size, 'toggle-size') : undefined,\n        '--toggle-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--toggle-active-bg': color || variant ? activeColors.background : undefined,\n        '--toggle-active-hover': color || variant ? activeColors.hover : undefined,\n        '--toggle-active-color': color || variant ? activeColors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Toggle = polymorphicFactory<ToggleFactory>((_props) => {\n  const props = useProps('Toggle', defaultProps, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    active,\n    defaultActive,\n    onActiveChange,\n    disabled,\n    size,\n    radius,\n    autoWidth,\n    color,\n    autoContrast,\n    children,\n    component,\n    onClick,\n    tabIndex,\n    attributes,\n    ...others\n  } = props as typeof props & { component?: any };\n\n  const [_active, handleActiveChange] = useUncontrolled({\n    value: active,\n    defaultValue: defaultActive,\n    finalValue: false,\n    onChange: onActiveChange,\n  });\n\n  const getStyles = useStyles<ToggleFactory>({\n    name: 'Toggle',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      component={component || 'button'}\n      type={!component || component === 'button' ? 'button' : undefined}\n      {...others}\n      {...getStyles('root', { focusable: true })}\n      data-active={_active || undefined}\n      data-disabled={disabled || undefined}\n      data-auto-width={autoWidth || undefined}\n      disabled={disabled}\n      aria-disabled={disabled || undefined}\n      aria-pressed={_active}\n      tabIndex={disabled ? -1 : tabIndex}\n      size={size}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault();\n          return;\n        }\n        handleActiveChange(!_active);\n        onClick?.(event);\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToggle.classes = classes;\nToggle.varsResolver = varsResolver;\nToggle.displayName = '@mantine/core/Toggle';\n"],"mappings":";;;;;;;;;;;AAsEA,MAAM,eAAe,EACnB,SAAS,SACX;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,SAAS,mBAAmB;CACzD,MAAM,eAAe,MAAM,qBAAqB;EAC9C,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,iBAAiB,SAAS,KAAA,IAAY,QAAQ,MAAM,aAAa,IAAI,KAAA;EACrE,mBAAmB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;EAC9D,sBAAsB,SAAS,UAAU,aAAa,aAAa,KAAA;EACnE,yBAAyB,SAAS,UAAU,aAAa,QAAQ,KAAA;EACjE,yBAAyB,SAAS,UAAU,aAAa,QAAQ,KAAA;CACnE,EACF;AACF,CACF;AAEA,MAAa,SAAS,oBAAmC,WAAW;CAClE,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,QACA,eACA,gBACA,UACA,MACA,QACA,WACA,OACA,cACA,UACA,WACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,CAAC,SAAS,sBAAsB,gBAAgB;EACpD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EACE,WAAW,aAAa;EACxB,MAAM,CAAC,aAAa,cAAc,WAAW,WAAW,KAAA;EACxD,GAAI;EACJ,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,eAAa,WAAW,KAAA;EACxB,iBAAe,YAAY,KAAA;EAC3B,mBAAiB,aAAa,KAAA;EACpB;EACV,iBAAe,YAAY,KAAA;EAC3B,gBAAc;EACd,UAAU,WAAW,KAAK;EACpB;EACN,UAAU,UAA+C;GACvD,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GACA,mBAAmB,CAAC,OAAO;GAC3B,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

package/esm/components/Toggle/Toggle.module.mjs

@@ -0,0 +1,7 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toggle/Toggle.module.css
+var Toggle_module_default = { "root": "m_ba2e839b" };
+//#endregion
+export { Toggle_module_default as default };
+
+//# sourceMappingURL=Toggle.module.mjs.map

package/esm/components/Toggle/Toggle.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.mjs","names":[],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".root {\n  --toggle-size-xs: 22px;\n  --toggle-size-sm: 26px;\n  --toggle-size-md: 30px;\n  --toggle-size-lg: 36px;\n  --toggle-size-xl: 42px;\n\n  --toggle-size: var(--toggle-size-md);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid;\n  border-radius: var(--toggle-radius, var(--mantine-radius-default));\n  cursor: pointer;\n  appearance: none;\n  text-decoration: none;\n  line-height: 1;\n  user-select: none;\n  font-size: var(--mantine-font-size-xs);\n  width: var(--toggle-size);\n  min-width: var(--toggle-size);\n  height: var(--toggle-size);\n  padding: calc(var(--toggle-size) / 5);\n  font-weight: var(--mantine-font-weight-medium);\n\n  &:where([data-auto-width]) {\n    width: auto;\n    padding: 0 calc(var(--toggle-size) / 4);\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-1);\n  }\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--toggle-active-bg, var(--mantine-primary-color-light));\n    color: var(--toggle-active-color, var(--mantine-primary-color-light-color));\n    border-color: transparent;\n\n    @mixin hover {\n      &:where(:not([data-disabled])) {\n        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));\n      }\n    }\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n    background-color: var(--mantine-color-disabled);\n    border-color: transparent;\n  }\n\n  &:where([data-disabled][data-active]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-4);\n      color: var(--mantine-color-gray-6);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n      color: var(--mantine-color-dark-2);\n    }\n  }\n}\n"],"mappings":""}

package/esm/components/Toolbar/Toolbar.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createSafeContext } from "../../core/utils/create-safe-context/create-safe-context.mjs";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.context.ts
+const [ToolbarProvider, useToolbarContext] = createSafeContext("Toolbar component was not found in tree");
+//#endregion
+export { ToolbarProvider, useToolbarContext };
+
+//# sourceMappingURL=Toolbar.context.mjs.map

package/esm/components/Toolbar/Toolbar.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.context.mjs","names":[],"sources":["../../../src/components/Toolbar/Toolbar.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { ToolbarFactory } from './Toolbar';\n\nexport interface ToolbarContextValue {\n  getStyles: GetStylesApi<ToolbarFactory>;\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport const [ToolbarProvider, useToolbarContext] = createSafeContext<ToolbarContextValue>(\n  'Toolbar component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,iBAAiB,qBAAqB,kBAClD,yCACF"}

package/esm/components/Toolbar/Toolbar.mjs

@@ -0,0 +1,107 @@
+"use client";
+import { getRadius, getSize } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
+import { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
+import { ToolbarProvider } from "./Toolbar.context.mjs";
+import Toolbar_module_default from "./Toolbar.module.mjs";
+import { ToolbarDivider } from "./ToolbarDivider/ToolbarDivider.mjs";
+import { ToolbarGroup } from "./ToolbarGroup/ToolbarGroup.mjs";
+import { ToolbarToggle } from "./ToolbarToggle/ToolbarToggle.mjs";
+import { ToolbarToggleGroup } from "./ToolbarToggleGroup/ToolbarToggleGroup.mjs";
+import { ToolbarToggleItem } from "./ToolbarToggleItem/ToolbarToggleItem.mjs";
+import { useToolbarNavigation } from "./use-toolbar-navigation.mjs";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.tsx
+const defaultProps = {
+	orientation: "horizontal",
+	loop: true,
+	withBorder: true,
+	variant: "filled"
+};
+const varsResolver = createVarsResolver((theme, { size, radius, color, variant, autoContrast }) => {
+	const activeColors = theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: variant || "filled",
+		autoContrast
+	});
+	return {
+		root: {
+			"--toolbar-toggle-size": size !== void 0 ? getSize(size, "toolbar-toggle-size") : void 0,
+			"--toolbar-padding": size !== void 0 ? getSize(size, "toolbar-padding") : void 0,
+			"--toolbar-gap": size !== void 0 ? getSize(size, "toolbar-gap") : void 0,
+			"--toolbar-radius": radius !== void 0 ? getRadius(radius) : void 0
+		},
+		toggle: {
+			"--toolbar-toggle-active-bg": activeColors.background,
+			"--toolbar-toggle-active-hover": activeColors.hover,
+			"--toolbar-toggle-active-color": activeColors.color
+		}
+	};
+});
+const Toolbar = factory((_props) => {
+	const props = useProps("Toolbar", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, orientation, loop, size, radius, withBorder, color, autoContrast, variant, children, attributes, onKeyDown, onFocus, ref, ...others } = props;
+	const { dir } = useDirection();
+	const getStyles = useStyles({
+		name: "Toolbar",
+		classes: Toolbar_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const { toolbarRef, handleKeyDown, handleItemFocus } = useToolbarNavigation({
+		orientation,
+		loop,
+		dir
+	});
+	const mergedRef = useMergedRef(toolbarRef, ref);
+	return /* @__PURE__ */ jsx(ToolbarProvider, {
+		value: {
+			getStyles,
+			orientation
+		},
+		children: /* @__PURE__ */ jsx(Box, {
+			ref: mergedRef,
+			role: "toolbar",
+			"aria-orientation": orientation,
+			...getStyles("root"),
+			"data-orientation": orientation,
+			"data-with-border": withBorder || void 0,
+			variant,
+			size,
+			...others,
+			onKeyDown: (event) => {
+				handleKeyDown(event);
+				onKeyDown?.(event);
+			},
+			onFocus: (event) => {
+				handleItemFocus(event);
+				onFocus?.(event);
+			},
+			children
+		})
+	});
+});
+Toolbar.classes = Toolbar_module_default;
+Toolbar.displayName = "@mantine/core/Toolbar";
+Toolbar.Group = ToolbarGroup;
+Toolbar.Toggle = ToolbarToggle;
+Toolbar.ToggleGroup = ToolbarToggleGroup;
+Toolbar.ToggleItem = ToolbarToggleItem;
+Toolbar.Divider = ToolbarDivider;
+//#endregion
+export { Toolbar };
+
+//# sourceMappingURL=Toolbar.mjs.map

package/esm/components/Toolbar/Toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.mjs","names":["classes"],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ToggleVariant } from '../Toggle';\nimport { ToolbarProvider } from './Toolbar.context';\nimport { ToolbarDivider, ToolbarDividerStylesNames } from './ToolbarDivider/ToolbarDivider';\nimport { ToolbarGroup, ToolbarGroupStylesNames } from './ToolbarGroup/ToolbarGroup';\nimport { ToolbarToggle, ToolbarToggleStylesNames } from './ToolbarToggle/ToolbarToggle';\nimport { ToolbarToggleGroup } from './ToolbarToggleGroup/ToolbarToggleGroup';\nimport {\n  ToolbarToggleItem,\n  ToolbarToggleItemStylesNames,\n} from './ToolbarToggleItem/ToolbarToggleItem';\nimport { useToolbarNavigation } from './use-toolbar-navigation';\nimport classes from './Toolbar.module.css';\n\nexport type ToolbarStylesNames =\n  | 'root'\n  | ToolbarGroupStylesNames\n  | ToolbarToggleStylesNames\n  | ToolbarToggleItemStylesNames\n  | ToolbarDividerStylesNames;\n\nexport type ToolbarCssVariables = {\n  root: '--toolbar-toggle-size' | '--toolbar-padding' | '--toolbar-gap' | '--toolbar-radius';\n  toggle:\n    | '--toolbar-toggle-active-bg'\n    | '--toolbar-toggle-active-hover'\n    | '--toolbar-toggle-active-color';\n};\n\nexport interface ToolbarProps\n  extends BoxProps, StylesApiProps<ToolbarFactory>, ElementProps<'div'> {\n  /** Toolbar orientation, `'horizontal'` by default */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Whether arrow key navigation wraps from last to first item, `true` by default */\n  loop?: boolean;\n\n  /** Controls size of toggle components, padding, and gap, `'md'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, propagated to all children, `theme.defaultRadius` by default */\n  radius?: MantineRadius;\n\n  /** Determines whether the toolbar has a border, `true` by default */\n  withBorder?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, controls color of child toggle components */\n  color?: MantineColor;\n\n  /** Determines whether icon color with filled variant should be changed based on the given `color` prop */\n  autoContrast?: boolean;\n\n  /** Toolbar content */\n  children: React.ReactNode;\n}\n\nexport type ToolbarFactory = Factory<{\n  props: ToolbarProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarStylesNames;\n  vars: ToolbarCssVariables;\n  variant: ToggleVariant;\n  staticComponents: {\n    Group: typeof ToolbarGroup;\n    Toggle: typeof ToolbarToggle;\n    ToggleGroup: typeof ToolbarToggleGroup;\n    ToggleItem: typeof ToolbarToggleItem;\n    Divider: typeof ToolbarDivider;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  loop: true,\n  withBorder: true,\n  variant: 'filled',\n} satisfies Partial<ToolbarProps>;\n\nconst varsResolver = createVarsResolver<ToolbarFactory>(\n  (theme, { size, radius, color, variant, autoContrast }) => {\n    const activeColors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--toolbar-toggle-size':\n          size !== undefined ? getSize(size, 'toolbar-toggle-size') : undefined,\n        '--toolbar-padding': size !== undefined ? getSize(size, 'toolbar-padding') : undefined,\n        '--toolbar-gap': size !== undefined ? getSize(size, 'toolbar-gap') : undefined,\n        '--toolbar-radius': radius !== undefined ? getRadius(radius) : undefined,\n      },\n      toggle: {\n        '--toolbar-toggle-active-bg': activeColors.background,\n        '--toolbar-toggle-active-hover': activeColors.hover,\n        '--toolbar-toggle-active-color': activeColors.color,\n      },\n    };\n  }\n);\n\nexport const Toolbar = factory<ToolbarFactory>((_props) => {\n  const props = useProps('Toolbar', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    orientation,\n    loop,\n    size,\n    radius,\n    withBorder,\n    color,\n    autoContrast,\n    variant,\n    children,\n    attributes,\n    onKeyDown,\n    onFocus,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<ToolbarFactory>({\n    name: 'Toolbar',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { toolbarRef, handleKeyDown, handleItemFocus } = useToolbarNavigation({\n    orientation: orientation!,\n    loop: loop!,\n    dir,\n  });\n\n  const mergedRef = useMergedRef(toolbarRef, ref);\n\n  return (\n    <ToolbarProvider value={{ getStyles, orientation: orientation! }}>\n      <Box\n        ref={mergedRef}\n        role=\"toolbar\"\n        aria-orientation={orientation}\n        {...getStyles('root')}\n        data-orientation={orientation}\n        data-with-border={withBorder || undefined}\n        variant={variant}\n        size={size}\n        {...others}\n        onKeyDown={(event) => {\n          handleKeyDown(event);\n          onKeyDown?.(event);\n        }}\n        onFocus={(event) => {\n          handleItemFocus(event);\n          onFocus?.(event);\n        }}\n      >\n        {children}\n      </Box>\n    </ToolbarProvider>\n  );\n});\n\nToolbar.classes = classes;\nToolbar.displayName = '@mantine/core/Toolbar';\nToolbar.Group = ToolbarGroup;\nToolbar.Toggle = ToolbarToggle;\nToolbar.ToggleGroup = ToolbarToggleGroup;\nToolbar.ToggleItem = ToolbarToggleItem;\nToolbar.Divider = ToolbarDivider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwFA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,YAAY;CACZ,SAAS;AACX;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,SAAS,mBAAmB;CACzD,MAAM,eAAe,MAAM,qBAAqB;EAC9C,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO;EACL,MAAM;GACJ,yBACE,SAAS,KAAA,IAAY,QAAQ,MAAM,qBAAqB,IAAI,KAAA;GAC9D,qBAAqB,SAAS,KAAA,IAAY,QAAQ,MAAM,iBAAiB,IAAI,KAAA;GAC7E,iBAAiB,SAAS,KAAA,IAAY,QAAQ,MAAM,aAAa,IAAI,KAAA;GACrE,oBAAoB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;EACjE;EACA,QAAQ;GACN,8BAA8B,aAAa;GAC3C,iCAAiC,aAAa;GAC9C,iCAAiC,aAAa;EAChD;CACF;AACF,CACF;AAEA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,aACA,MACA,MACA,QACA,YACA,OACA,cACA,SACA,UACA,YACA,WACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,eAAe,oBAAoB,qBAAqB;EAC7D;EACP;EACN;CACF,CAAC;CAED,MAAM,YAAY,aAAa,YAAY,GAAG;CAE9C,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAwB;EAAa;EAC7D,UAAA,oBAAC,KAAD;GACE,KAAK;GACL,MAAK;GACL,oBAAkB;GAClB,GAAI,UAAU,MAAM;GACpB,oBAAkB;GAClB,oBAAkB,cAAc,KAAA;GACvB;GACH;GACN,GAAI;GACJ,YAAY,UAAU;IACpB,cAAc,KAAK;IACnB,YAAY,KAAK;GACnB;GACA,UAAU,UAAU;IAClB,gBAAgB,KAAK;IACrB,UAAU,KAAK;GACjB;GAEC;EACE,CAAA;CACU,CAAA;AAErB,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,cAAc;AACtB,QAAQ,QAAQ;AAChB,QAAQ,SAAS;AACjB,QAAQ,cAAc;AACtB,QAAQ,aAAa;AACrB,QAAQ,UAAU"}

package/esm/components/Toolbar/Toolbar.module.mjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.module.css
+var Toolbar_module_default = {
+	"root": "m_a2d26014",
+	"group": "m_b6dffd8d",
+	"toggle": "m_3b209606",
+	"divider": "m_d1258ea7"
+};
+//#endregion
+export { Toolbar_module_default as default };
+
+//# sourceMappingURL=Toolbar.module.mjs.map

package/esm/components/Toolbar/Toolbar.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.module.mjs","names":[],"sources":["../../../src/components/Toolbar/Toolbar.module.css"],"sourcesContent":[".root {\n  --toolbar-toggle-size-xs: 22px;\n  --toolbar-toggle-size-sm: 26px;\n  --toolbar-toggle-size-md: 30px;\n  --toolbar-toggle-size-lg: 36px;\n  --toolbar-toggle-size-xl: 42px;\n\n  --toolbar-padding-xs: 4px;\n  --toolbar-padding-sm: 5px;\n  --toolbar-padding-md: 6px;\n  --toolbar-padding-lg: 8px;\n  --toolbar-padding-xl: 12px;\n\n  --toolbar-gap-xs: calc(var(--mantine-spacing-xs) / 2);\n  --toolbar-gap-sm: var(--mantine-spacing-xs);\n  --toolbar-gap-md: var(--mantine-spacing-sm);\n  --toolbar-gap-lg: var(--mantine-spacing-sm);\n  --toolbar-gap-xl: var(--mantine-spacing-md);\n\n  --toolbar-toggle-size: var(--toolbar-toggle-size-md);\n  --toolbar-padding: var(--toolbar-padding-md);\n  --toolbar-gap: var(--toolbar-gap-md);\n  --_tr: var(--toolbar-radius, var(--mantine-radius-default));\n  --toolbar-toggle-radius: max(calc(var(--_tr) - var(--toolbar-padding)), min(var(--_tr), 2px));\n\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--toolbar-gap);\n  background-color: var(--mantine-color-body);\n  border-radius: var(--toolbar-radius, var(--mantine-radius-default));\n  padding: var(--toolbar-padding);\n\n  &:where([data-with-border]) {\n    border: 1px solid;\n\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-4);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n    align-items: stretch;\n    width: fit-content;\n  }\n}\n\n.group {\n  display: flex;\n  background-color: var(--mantine-color-body);\n\n  & :where([data-toolbar-toggle]) {\n    &:focus-visible {\n      position: relative;\n      z-index: 1;\n    }\n\n    &:not(:only-child):first-child {\n      border-end-end-radius: 0;\n      border-start-end-radius: 0;\n      border-inline-end-width: calc(1px / 2);\n    }\n\n    &:not(:only-child):last-child {\n      border-end-start-radius: 0;\n      border-start-start-radius: 0;\n      border-inline-start-width: calc(1px / 2);\n    }\n\n    &:not(:only-child):not(:first-child):not(:last-child) {\n      border-radius: 0;\n      border-inline-width: calc(1px / 2);\n    }\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n\n    & :where([data-toolbar-toggle]) {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-start-end-radius: var(--toolbar-toggle-radius);\n        border-inline-end-width: 1px;\n        border-bottom-width: calc(1px / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-end-start-radius: var(--toolbar-toggle-radius);\n        border-inline-start-width: 1px;\n        border-top-width: calc(1px / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: 1px;\n        border-bottom-width: calc(1px / 2);\n        border-top-width: calc(1px / 2);\n      }\n    }\n  }\n}\n\n.toggle {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--toolbar-toggle-radius);\n  cursor: pointer;\n  appearance: none;\n  text-decoration: none;\n  line-height: 1;\n  user-select: none;\n  font-size: var(--mantine-font-size-xs);\n  width: var(--toolbar-toggle-size);\n  min-width: var(--toolbar-toggle-size);\n  height: var(--toolbar-toggle-size);\n  padding: calc(var(--toolbar-toggle-size) / 5);\n  border: 1px solid;\n  font-weight: var(--mantine-font-weight-medium);\n\n  &:where([data-auto-width]) {\n    width: auto;\n    padding: 0 calc(var(--toolbar-toggle-size) / 4);\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-1);\n  }\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--toolbar-toggle-active-bg, var(--mantine-primary-color-light));\n    color: var(--toolbar-toggle-active-color, var(--mantine-primary-color-light-color));\n    border-color: transparent;\n\n    @mixin hover {\n      &:where(:not([data-disabled])) {\n        background-color: var(\n          --toolbar-toggle-active-hover,\n          var(--mantine-primary-color-light-hover)\n        );\n      }\n    }\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n    background-color: var(--mantine-color-disabled);\n    border-color: transparent;\n  }\n\n  &:where([data-disabled][data-active]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-4);\n      color: var(--mantine-color-gray-6);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n      color: var(--mantine-color-dark-2);\n    }\n  }\n}\n\n.divider {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-orientation='horizontal']) {\n    width: 1px;\n    align-self: stretch;\n  }\n\n  &:where([data-orientation='vertical']) {\n    height: 1px;\n    align-self: stretch;\n  }\n}\n"],"mappings":""}

package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarDivider/ToolbarDivider.tsx
+const defaultProps = {};
+const ToolbarDivider = factory((_props) => {
+	const { classNames, className, style, styles, vars, "aria-orientation": ariaOrientation, ...others } = useProps("ToolbarDivider", defaultProps, _props);
+	const ctx = useToolbarContext();
+	return /* @__PURE__ */ jsx(Box, {
+		...others,
+		role: "separator",
+		"aria-orientation": ariaOrientation ?? (ctx.orientation === "horizontal" ? "vertical" : "horizontal"),
+		...ctx.getStyles("divider", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		"data-orientation": ctx.orientation
+	});
+});
+ToolbarDivider.classes = Toolbar_module_default;
+ToolbarDivider.displayName = "@mantine/core/ToolbarDivider";
+//#endregion
+export { ToolbarDivider };
+
+//# sourceMappingURL=ToolbarDivider.mjs.map

package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDivider.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarDividerStylesNames = 'divider';\n\nexport interface ToolbarDividerProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarDividerFactory>, ElementProps<'div'> {}\n\nexport type ToolbarDividerFactory = Factory<{\n  props: ToolbarDividerProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarDividerStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarDividerProps> = {};\n\nexport const ToolbarDivider = factory<ToolbarDividerFactory>((_props) => {\n  const props = useProps('ToolbarDivider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    'aria-orientation': ariaOrientation,\n    ...others\n  } = props;\n  const ctx = useToolbarContext();\n\n  return (\n    <Box\n      {...others}\n      role=\"separator\"\n      aria-orientation={\n        ariaOrientation ?? (ctx.orientation === 'horizontal' ? 'vertical' : 'horizontal')\n      }\n      {...ctx.getStyles('divider', { className, classNames, style, styles })}\n      data-orientation={ctx.orientation}\n    />\n  );\n});\n\nToolbarDivider.classes = classes;\nToolbarDivider.displayName = '@mantine/core/ToolbarDivider';\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAA6C,CAAC;AAEpD,MAAa,iBAAiB,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,oBAAoB,iBACpB,GAAG,WARS,SAAS,kBAAkB,cAAc,MAS/C;CACR,MAAM,MAAM,kBAAkB;CAE9B,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,MAAK;EACL,oBACE,oBAAoB,IAAI,gBAAgB,eAAe,aAAa;EAEtE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACrE,oBAAkB,IAAI;CACvB,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}

package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarGroup/ToolbarGroup.tsx
+const defaultProps = {};
+const ToolbarGroup = factory((_props) => {
+	const { classNames, className, style, styles, vars, children, ...others } = useProps("ToolbarGroup", defaultProps, _props);
+	const ctx = useToolbarContext();
+	return /* @__PURE__ */ jsx(Box, {
+		...others,
+		role: "group",
+		...ctx.getStyles("group", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		"data-orientation": ctx.orientation,
+		children
+	});
+});
+ToolbarGroup.classes = Toolbar_module_default;
+ToolbarGroup.displayName = "@mantine/core/ToolbarGroup";
+//#endregion
+export { ToolbarGroup };
+
+//# sourceMappingURL=ToolbarGroup.mjs.map

package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarGroupStylesNames = 'group';\n\nexport interface ToolbarGroupProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarGroupFactory>, ElementProps<'div'> {}\n\nexport type ToolbarGroupFactory = Factory<{\n  props: ToolbarGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarGroupStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarGroupProps> = {};\n\nexport const ToolbarGroup = factory<ToolbarGroupFactory>((_props) => {\n  const props = useProps('ToolbarGroup', defaultProps, _props);\n  const { classNames, className, style, styles, vars, children, ...others } = props;\n  const ctx = useToolbarContext();\n\n  return (\n    <Box\n      {...others}\n      role=\"group\"\n      {...ctx.getStyles('group', { className, classNames, style, styles })}\n      data-orientation={ctx.orientation}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToolbarGroup.classes = classes;\nToolbarGroup.displayName = '@mantine/core/ToolbarGroup';\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAA2C,CAAC;AAElD,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,GAAG,WADnD,SAAS,gBAAgB,cAAc,MAC2B;CAChF,MAAM,MAAM,kBAAkB;CAE9B,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,MAAK;EACL,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,oBAAkB,IAAI;EAErB;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}