npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260429111609 → 2.2.1-dev-20260501154625 - Mend

@yamada-ui/react 2.2.1-dev-20260429111609 → 2.2.1-dev-20260501154625

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/dist/cjs/components/color-picker/use-color-picker.cjs CHANGED Viewed

@@ -19,6 +19,7 @@ const useColorPicker = (props) => {
 	const { props: { id, ref, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyProp, allowInput = true, closeOnChange = false, defaultValue, disabled, fallbackValue = "#FFFFFF", format: formatProp, formatInput, openOnChange = true, openOnClick = true, openOnFocus = true, pattern, placeholder, placement = "end-start", readOnly, required, value: valueProp, onChange: onChangeProp, onInputChange: onInputChangeProp, ...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
 	const { interactive, open, getContentProps: getComboboxContentProps, getTriggerProps, popoverProps, onClose, onOpen } = require_hooks_use_combobox_index.useCombobox({
 		disabled,
+		matchWidth: false,
 		openOnClick: false,
 		openOnEnter: !allowInput,
 		openOnSpace: !allowInput,

package/dist/cjs/components/color-picker/use-color-picker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useControllableState","useEyeDropper","value","getRootProps: PropGetter","props","getFieldProps: PropGetter","mergeRefs","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n contains,\n convertColor,\n cx,\n focusTransfer,\n handlerAll,\n mergeRefs,\n runIfFn,\n runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n extends\n Omit<\n UseComboboxProps,\n \| \"closeOnSelect\"\n \| \"initialFocusValue\"\n \| \"onChange\"\n \| \"ref\"\n \| \"selectFocusRef\"\n \| \"selectOnSpace\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, allows input.\n \n @default true\n /\n allowInput?: boolean\n /\n If `true`, the color picker will be closed when the input value changes.\n \n @default false\n /\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n The initial value of the color picker.\n /\n defaultValue?: string\n /\n The fallback value of the color picker.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color picker.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n If `true`, the color picker will be opened when the input value changes.\n \n @default true\n /\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n If `true`, the color picker will be opened when the input is focused.\n \n @default false\n /\n openOnFocus?: boolean\n /\n The pattern used to check the input element.\n /\n pattern?: RegExp\n /\n The placeholder for color picker.\n /\n placeholder?: string\n /\n The value of the color picker.\n /\n value?: string\n /\n The function to format the input value.\n /\n formatInput?: (value: string) => string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when input value state changes.\n */\n onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n const { t } = useI18n(\"colorPicker\")\n const {\n props: {\n id,\n ref,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledbyProp,\n allowInput = true,\n closeOnChange = false,\n defaultValue,\n disabled,\n fallbackValue = \"#FFFFFF\",\n format: formatProp,\n formatInput,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n pattern,\n placeholder,\n placement = \"end-start\",\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const {\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getTriggerProps,\n popoverProps,\n onClose,\n onOpen,\n } = useCombobox({\n disabled,\n openOnClick: false,\n openOnEnter: !allowInput,\n openOnSpace: !allowInput,\n placement,\n readOnly,\n transferFocus: false,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const format =\n formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n const alpha = format.endsWith(\"a\")\n const fieldRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const focusByClickRef = useRef<boolean>(false)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n focusByClickRef.current = true\n\n if (allowInput) inputRef.current?.focus()\n\n if (openOnClick) onOpen()\n }, [allowInput, interactive, onOpen, openOnClick])\n\n const onMouseDown = useCallback(\n (ev: MouseEvent<HTMLDivElement \| HTMLInputElement>) => {\n if (!openOnFocus) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [openOnFocus],\n )\n\n const onFieldFocus = useCallback(() => {\n if (allowInput) return\n\n if (openOnFocus) onOpen()\n\n focusByClickRef.current = false\n }, [allowInput, onOpen, openOnFocus])\n\n const onInputFocus = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n ev.preventDefault()\n ev.stopPropagation()\n\n if (openOnFocus && !focusByClickRef.current) onOpen()\n\n focusByClickRef.current = false\n },\n [onOpen, openOnFocus],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n if (\n contains(fieldRef.current, ev.relatedTarget) \|\|\n contains(contentRef.current, ev.relatedTarget)\n ) {\n ev.preventDefault()\n } else {\n setValue((prev) => {\n if (!prev) return prev\n\n let value = convertColor(prev)(format)\n\n if (!value) return prev\n\n if (formatInput) value = formatInput(value)\n\n if (pattern) value = value.replace(pattern, \"\")\n\n return value\n })\n }\n },\n [format, formatInput, pattern, setValue],\n )\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!allowInput) return\n\n onInputChangeProp?.(ev)\n\n if (runIfFn(closeOnChange, ev)) {\n onClose()\n } else if (runIfFn(openOnChange, ev)) {\n onOpen()\n }\n\n let inputValue = ev.target.value\n\n if (formatInput) inputValue = formatInput(inputValue)\n\n if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n setValue(inputValue)\n },\n [\n allowInput,\n closeOnChange,\n formatInput,\n onClose,\n onInputChangeProp,\n onOpen,\n openOnChange,\n pattern,\n setValue,\n ],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) setValue(result.sRGBHex)\n }, [interactive, onOpenEyeDropper, setValue])\n\n useEffect(() => {\n if (!open) return\n\n return focusTransfer(\n contentRef.current,\n allowInput ? inputRef.current : fieldRef.current,\n )\n }, [allowInput, open])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n ...props,\n }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-haspopup\": \"dialog\",\n tabIndex: !allowInput ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFieldFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n\n [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id,\n ref: mergeRefs(props.ref, ref, inputRef),\n name,\n style: {\n ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n ...props.style,\n },\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n autoComplete: \"off\",\n disabled,\n placeholder,\n readOnly,\n required,\n tabIndex: allowInput ? 0 : -1,\n value,\n ...dataProps,\n ...props,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onFocus: handlerAll(props.onFocus, onInputFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n [\n allowInput,\n ariaLabel,\n ariaLabelledbyProp,\n dataProps,\n disabled,\n id,\n name,\n onBlur,\n onInputChange,\n onInputFocus,\n onMouseDown,\n placeholder,\n readOnly,\n ref,\n required,\n value,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getComboboxContentProps({\n ref: mergeRefs(ref, contentRef),\n role: \"dialog\",\n ...props,\n }),\n [getComboboxContentProps],\n )\n\n const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n (props = {}) => ({\n disabled,\n fallbackValue,\n format,\n readOnly,\n value,\n ...props,\n onChange: handlerAll(props.onChange, setValue),\n }),\n [disabled, fallbackValue, format, readOnly, value, setValue],\n )\n\n return {\n alpha,\n format,\n interactive,\n open,\n setValue,\n value,\n getContentProps,\n getEyeDropperProps,\n getFieldProps,\n getInputProps,\n getRootProps,\n getSelectorProps,\n popoverProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useControllableState","useEyeDropper","value","getRootProps: PropGetter","props","getFieldProps: PropGetter","mergeRefs","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n contains,\n convertColor,\n cx,\n focusTransfer,\n handlerAll,\n mergeRefs,\n runIfFn,\n runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n extends\n Omit<\n UseComboboxProps,\n \| \"closeOnSelect\"\n \| \"initialFocusValue\"\n \| \"onChange\"\n \| \"ref\"\n \| \"selectFocusRef\"\n \| \"selectOnSpace\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, allows input.\n \n @default true\n /\n allowInput?: boolean\n /\n If `true`, the color picker will be closed when the input value changes.\n \n @default false\n /\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n The initial value of the color picker.\n /\n defaultValue?: string\n /\n The fallback value of the color picker.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color picker.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n If `true`, the color picker will be opened when the input value changes.\n \n @default true\n /\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n If `true`, the color picker will be opened when the input is focused.\n \n @default false\n /\n openOnFocus?: boolean\n /\n The pattern used to check the input element.\n /\n pattern?: RegExp\n /\n The placeholder for color picker.\n /\n placeholder?: string\n /\n The value of the color picker.\n /\n value?: string\n /\n The function to format the input value.\n /\n formatInput?: (value: string) => string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when input value state changes.\n */\n onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n const { t } = useI18n(\"colorPicker\")\n const {\n props: {\n id,\n ref,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledbyProp,\n allowInput = true,\n closeOnChange = false,\n defaultValue,\n disabled,\n fallbackValue = \"#FFFFFF\",\n format: formatProp,\n formatInput,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n pattern,\n placeholder,\n placement = \"end-start\",\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const {\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getTriggerProps,\n popoverProps,\n onClose,\n onOpen,\n } = useCombobox({\n disabled,\n matchWidth: false,\n openOnClick: false,\n openOnEnter: !allowInput,\n openOnSpace: !allowInput,\n placement,\n readOnly,\n transferFocus: false,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const format =\n formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n const alpha = format.endsWith(\"a\")\n const fieldRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const focusByClickRef = useRef<boolean>(false)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n focusByClickRef.current = true\n\n if (allowInput) inputRef.current?.focus()\n\n if (openOnClick) onOpen()\n }, [allowInput, interactive, onOpen, openOnClick])\n\n const onMouseDown = useCallback(\n (ev: MouseEvent<HTMLDivElement \| HTMLInputElement>) => {\n if (!openOnFocus) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [openOnFocus],\n )\n\n const onFieldFocus = useCallback(() => {\n if (allowInput) return\n\n if (openOnFocus) onOpen()\n\n focusByClickRef.current = false\n }, [allowInput, onOpen, openOnFocus])\n\n const onInputFocus = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n ev.preventDefault()\n ev.stopPropagation()\n\n if (openOnFocus && !focusByClickRef.current) onOpen()\n\n focusByClickRef.current = false\n },\n [onOpen, openOnFocus],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n if (\n contains(fieldRef.current, ev.relatedTarget) \|\|\n contains(contentRef.current, ev.relatedTarget)\n ) {\n ev.preventDefault()\n } else {\n setValue((prev) => {\n if (!prev) return prev\n\n let value = convertColor(prev)(format)\n\n if (!value) return prev\n\n if (formatInput) value = formatInput(value)\n\n if (pattern) value = value.replace(pattern, \"\")\n\n return value\n })\n }\n },\n [format, formatInput, pattern, setValue],\n )\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!allowInput) return\n\n onInputChangeProp?.(ev)\n\n if (runIfFn(closeOnChange, ev)) {\n onClose()\n } else if (runIfFn(openOnChange, ev)) {\n onOpen()\n }\n\n let inputValue = ev.target.value\n\n if (formatInput) inputValue = formatInput(inputValue)\n\n if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n setValue(inputValue)\n },\n [\n allowInput,\n closeOnChange,\n formatInput,\n onClose,\n onInputChangeProp,\n onOpen,\n openOnChange,\n pattern,\n setValue,\n ],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) setValue(result.sRGBHex)\n }, [interactive, onOpenEyeDropper, setValue])\n\n useEffect(() => {\n if (!open) return\n\n return focusTransfer(\n contentRef.current,\n allowInput ? inputRef.current : fieldRef.current,\n )\n }, [allowInput, open])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n ...props,\n }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-haspopup\": \"dialog\",\n tabIndex: !allowInput ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFieldFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n\n [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id,\n ref: mergeRefs(props.ref, ref, inputRef),\n name,\n style: {\n ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n ...props.style,\n },\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n autoComplete: \"off\",\n disabled,\n placeholder,\n readOnly,\n required,\n tabIndex: allowInput ? 0 : -1,\n value,\n ...dataProps,\n ...props,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onFocus: handlerAll(props.onFocus, onInputFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n [\n allowInput,\n ariaLabel,\n ariaLabelledbyProp,\n dataProps,\n disabled,\n id,\n name,\n onBlur,\n onInputChange,\n onInputFocus,\n onMouseDown,\n placeholder,\n readOnly,\n ref,\n required,\n value,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getComboboxContentProps({\n ref: mergeRefs(ref, contentRef),\n role: \"dialog\",\n ...props,\n }),\n [getComboboxContentProps],\n )\n\n const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n (props = {}) => ({\n disabled,\n fallbackValue,\n format,\n readOnly,\n value,\n ...props,\n onChange: handlerAll(props.onChange, setValue),\n }),\n [disabled, fallbackValue, format, readOnly, value, setValue],\n )\n\n return {\n alpha,\n format,\n interactive,\n open,\n setValue,\n value,\n getContentProps,\n getEyeDropperProps,\n getFieldProps,\n getInputProps,\n getRootProps,\n getSelectorProps,\n popoverProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}

package/dist/esm/components/color-picker/use-color-picker.js CHANGED Viewed

@@ -18,6 +18,7 @@ const useColorPicker = (props) => {
 	const { props: { id, ref, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyProp, allowInput = true, closeOnChange = false, defaultValue, disabled, fallbackValue = "#FFFFFF", format: formatProp, formatInput, openOnChange = true, openOnClick = true, openOnFocus = true, pattern, placeholder, placement = "end-start", readOnly, required, value: valueProp, onChange: onChangeProp, onInputChange: onInputChangeProp, ...rest }, ariaProps, dataProps, eventProps } = useFieldProps(props);
 	const { interactive, open, getContentProps: getComboboxContentProps, getTriggerProps, popoverProps, onClose, onOpen } = useCombobox({
 		disabled,
+		matchWidth: false,
 		openOnClick: false,
 		openOnEnter: !allowInput,
 		openOnSpace: !allowInput,

package/dist/esm/components/color-picker/use-color-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-color-picker.js","names":["value","getRootProps: PropGetter","props","getFieldProps: PropGetter","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n contains,\n convertColor,\n cx,\n focusTransfer,\n handlerAll,\n mergeRefs,\n runIfFn,\n runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n extends\n Omit<\n UseComboboxProps,\n \| \"closeOnSelect\"\n \| \"initialFocusValue\"\n \| \"onChange\"\n \| \"ref\"\n \| \"selectFocusRef\"\n \| \"selectOnSpace\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, allows input.\n \n @default true\n /\n allowInput?: boolean\n /\n If `true`, the color picker will be closed when the input value changes.\n \n @default false\n /\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n The initial value of the color picker.\n /\n defaultValue?: string\n /\n The fallback value of the color picker.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color picker.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n If `true`, the color picker will be opened when the input value changes.\n \n @default true\n /\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n If `true`, the color picker will be opened when the input is focused.\n \n @default false\n /\n openOnFocus?: boolean\n /\n The pattern used to check the input element.\n /\n pattern?: RegExp\n /\n The placeholder for color picker.\n /\n placeholder?: string\n /\n The value of the color picker.\n /\n value?: string\n /\n The function to format the input value.\n /\n formatInput?: (value: string) => string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when input value state changes.\n */\n onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n const { t } = useI18n(\"colorPicker\")\n const {\n props: {\n id,\n ref,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledbyProp,\n allowInput = true,\n closeOnChange = false,\n defaultValue,\n disabled,\n fallbackValue = \"#FFFFFF\",\n format: formatProp,\n formatInput,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n pattern,\n placeholder,\n placement = \"end-start\",\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const {\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getTriggerProps,\n popoverProps,\n onClose,\n onOpen,\n } = useCombobox({\n disabled,\n openOnClick: false,\n openOnEnter: !allowInput,\n openOnSpace: !allowInput,\n placement,\n readOnly,\n transferFocus: false,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const format =\n formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n const alpha = format.endsWith(\"a\")\n const fieldRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const focusByClickRef = useRef<boolean>(false)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n focusByClickRef.current = true\n\n if (allowInput) inputRef.current?.focus()\n\n if (openOnClick) onOpen()\n }, [allowInput, interactive, onOpen, openOnClick])\n\n const onMouseDown = useCallback(\n (ev: MouseEvent<HTMLDivElement \| HTMLInputElement>) => {\n if (!openOnFocus) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [openOnFocus],\n )\n\n const onFieldFocus = useCallback(() => {\n if (allowInput) return\n\n if (openOnFocus) onOpen()\n\n focusByClickRef.current = false\n }, [allowInput, onOpen, openOnFocus])\n\n const onInputFocus = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n ev.preventDefault()\n ev.stopPropagation()\n\n if (openOnFocus && !focusByClickRef.current) onOpen()\n\n focusByClickRef.current = false\n },\n [onOpen, openOnFocus],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n if (\n contains(fieldRef.current, ev.relatedTarget) \|\|\n contains(contentRef.current, ev.relatedTarget)\n ) {\n ev.preventDefault()\n } else {\n setValue((prev) => {\n if (!prev) return prev\n\n let value = convertColor(prev)(format)\n\n if (!value) return prev\n\n if (formatInput) value = formatInput(value)\n\n if (pattern) value = value.replace(pattern, \"\")\n\n return value\n })\n }\n },\n [format, formatInput, pattern, setValue],\n )\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!allowInput) return\n\n onInputChangeProp?.(ev)\n\n if (runIfFn(closeOnChange, ev)) {\n onClose()\n } else if (runIfFn(openOnChange, ev)) {\n onOpen()\n }\n\n let inputValue = ev.target.value\n\n if (formatInput) inputValue = formatInput(inputValue)\n\n if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n setValue(inputValue)\n },\n [\n allowInput,\n closeOnChange,\n formatInput,\n onClose,\n onInputChangeProp,\n onOpen,\n openOnChange,\n pattern,\n setValue,\n ],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) setValue(result.sRGBHex)\n }, [interactive, onOpenEyeDropper, setValue])\n\n useEffect(() => {\n if (!open) return\n\n return focusTransfer(\n contentRef.current,\n allowInput ? inputRef.current : fieldRef.current,\n )\n }, [allowInput, open])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n ...props,\n }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-haspopup\": \"dialog\",\n tabIndex: !allowInput ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFieldFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n\n [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id,\n ref: mergeRefs(props.ref, ref, inputRef),\n name,\n style: {\n ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n ...props.style,\n },\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n autoComplete: \"off\",\n disabled,\n placeholder,\n readOnly,\n required,\n tabIndex: allowInput ? 0 : -1,\n value,\n ...dataProps,\n ...props,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onFocus: handlerAll(props.onFocus, onInputFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n [\n allowInput,\n ariaLabel,\n ariaLabelledbyProp,\n dataProps,\n disabled,\n id,\n name,\n onBlur,\n onInputChange,\n onInputFocus,\n onMouseDown,\n placeholder,\n readOnly,\n ref,\n required,\n value,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getComboboxContentProps({\n ref: mergeRefs(ref, contentRef),\n role: \"dialog\",\n ...props,\n }),\n [getComboboxContentProps],\n )\n\n const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n (props = {}) => ({\n disabled,\n fallbackValue,\n format,\n readOnly,\n value,\n ...props,\n onChange: handlerAll(props.onChange, setValue),\n }),\n [disabled, fallbackValue, format, readOnly, value, setValue],\n )\n\n return {\n alpha,\n format,\n interactive,\n open,\n setValue,\n value,\n getContentProps,\n getEyeDropperProps,\n getFieldProps,\n getInputProps,\n getRootProps,\n getSelectorProps,\n popoverProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-color-picker.js","names":["value","getRootProps: PropGetter","props","getFieldProps: PropGetter","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n contains,\n convertColor,\n cx,\n focusTransfer,\n handlerAll,\n mergeRefs,\n runIfFn,\n runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n extends\n Omit<\n UseComboboxProps,\n \| \"closeOnSelect\"\n \| \"initialFocusValue\"\n \| \"onChange\"\n \| \"ref\"\n \| \"selectFocusRef\"\n \| \"selectOnSpace\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, allows input.\n \n @default true\n /\n allowInput?: boolean\n /\n If `true`, the color picker will be closed when the input value changes.\n \n @default false\n /\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n The initial value of the color picker.\n /\n defaultValue?: string\n /\n The fallback value of the color picker.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color picker.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n If `true`, the color picker will be opened when the input value changes.\n \n @default true\n /\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n If `true`, the color picker will be opened when the input is focused.\n \n @default false\n /\n openOnFocus?: boolean\n /\n The pattern used to check the input element.\n /\n pattern?: RegExp\n /\n The placeholder for color picker.\n /\n placeholder?: string\n /\n The value of the color picker.\n /\n value?: string\n /\n The function to format the input value.\n /\n formatInput?: (value: string) => string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when input value state changes.\n */\n onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n const { t } = useI18n(\"colorPicker\")\n const {\n props: {\n id,\n ref,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledbyProp,\n allowInput = true,\n closeOnChange = false,\n defaultValue,\n disabled,\n fallbackValue = \"#FFFFFF\",\n format: formatProp,\n formatInput,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n pattern,\n placeholder,\n placement = \"end-start\",\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const {\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getTriggerProps,\n popoverProps,\n onClose,\n onOpen,\n } = useCombobox({\n disabled,\n matchWidth: false,\n openOnClick: false,\n openOnEnter: !allowInput,\n openOnSpace: !allowInput,\n placement,\n readOnly,\n transferFocus: false,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const format =\n formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n const alpha = format.endsWith(\"a\")\n const fieldRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const focusByClickRef = useRef<boolean>(false)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n useEyeDropper()\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n focusByClickRef.current = true\n\n if (allowInput) inputRef.current?.focus()\n\n if (openOnClick) onOpen()\n }, [allowInput, interactive, onOpen, openOnClick])\n\n const onMouseDown = useCallback(\n (ev: MouseEvent<HTMLDivElement \| HTMLInputElement>) => {\n if (!openOnFocus) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [openOnFocus],\n )\n\n const onFieldFocus = useCallback(() => {\n if (allowInput) return\n\n if (openOnFocus) onOpen()\n\n focusByClickRef.current = false\n }, [allowInput, onOpen, openOnFocus])\n\n const onInputFocus = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n ev.preventDefault()\n ev.stopPropagation()\n\n if (openOnFocus && !focusByClickRef.current) onOpen()\n\n focusByClickRef.current = false\n },\n [onOpen, openOnFocus],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n if (\n contains(fieldRef.current, ev.relatedTarget) \|\|\n contains(contentRef.current, ev.relatedTarget)\n ) {\n ev.preventDefault()\n } else {\n setValue((prev) => {\n if (!prev) return prev\n\n let value = convertColor(prev)(format)\n\n if (!value) return prev\n\n if (formatInput) value = formatInput(value)\n\n if (pattern) value = value.replace(pattern, \"\")\n\n return value\n })\n }\n },\n [format, formatInput, pattern, setValue],\n )\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!allowInput) return\n\n onInputChangeProp?.(ev)\n\n if (runIfFn(closeOnChange, ev)) {\n onClose()\n } else if (runIfFn(openOnChange, ev)) {\n onOpen()\n }\n\n let inputValue = ev.target.value\n\n if (formatInput) inputValue = formatInput(inputValue)\n\n if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n setValue(inputValue)\n },\n [\n allowInput,\n closeOnChange,\n formatInput,\n onClose,\n onInputChangeProp,\n onOpen,\n openOnChange,\n pattern,\n setValue,\n ],\n )\n\n const onEyeDropperClick = useCallback(async () => {\n if (!interactive) return\n\n const result = await onOpenEyeDropper()\n\n if (result?.sRGBHex) setValue(result.sRGBHex)\n }, [interactive, onOpenEyeDropper, setValue])\n\n useEffect(() => {\n if (!open) return\n\n return focusTransfer(\n contentRef.current,\n allowInput ? inputRef.current : fieldRef.current,\n )\n }, [allowInput, open])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n ...props,\n }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-haspopup\": \"dialog\",\n tabIndex: !allowInput ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFieldFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n\n [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id,\n ref: mergeRefs(props.ref, ref, inputRef),\n name,\n style: {\n ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n ...props.style,\n },\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n autoComplete: \"off\",\n disabled,\n placeholder,\n readOnly,\n required,\n tabIndex: allowInput ? 0 : -1,\n value,\n ...dataProps,\n ...props,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onFocus: handlerAll(props.onFocus, onInputFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n [\n allowInput,\n ariaLabel,\n ariaLabelledbyProp,\n dataProps,\n disabled,\n id,\n name,\n onBlur,\n onInputChange,\n onInputFocus,\n onMouseDown,\n placeholder,\n readOnly,\n ref,\n required,\n value,\n ],\n )\n\n const getEyeDropperProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Pick a color\"),\n hidden: !supportedEyeDropper,\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onEyeDropperClick),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, {\n Enter: onEyeDropperClick,\n Space: onEyeDropperClick,\n }),\n ),\n }),\n [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getComboboxContentProps({\n ref: mergeRefs(ref, contentRef),\n role: \"dialog\",\n ...props,\n }),\n [getComboboxContentProps],\n )\n\n const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n (props = {}) => ({\n disabled,\n fallbackValue,\n format,\n readOnly,\n value,\n ...props,\n onChange: handlerAll(props.onChange, setValue),\n }),\n [disabled, fallbackValue, format, readOnly, value, setValue],\n )\n\n return {\n alpha,\n format,\n interactive,\n open,\n setValue,\n value,\n getContentProps,\n getEyeDropperProps,\n getFieldProps,\n getInputProps,\n getRootProps,\n getSelectorProps,\n popoverProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}

package/dist/types/components/accordion/accordion.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import { CollapseProps } from "../collapse/collapse.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react973 from "react";
+import * as react112 from "react";
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -31,7 +31,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react973.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react112.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/accordion.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/accordion/use-accordion.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react961 from "react";
+import * as react88 from "react";
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react961.Context<{
+declare const AccordionDescendantsContext: react88.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react961.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react961.RefCallback<HTMLButtonElement>;
+    } | undefined) => react88.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react961.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react961.RefCallback<HTMLButtonElement>;
+      } | undefined) => react88.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react961.RefCallback<HTMLButtonElement>;
+    register: react88.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react961.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react961.RefCallback<HTMLButtonElement>;
+    } | undefined) => react88.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react961.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react88.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react961.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react88.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react961.RefCallback<HTMLButtonElement>;
+    } | undefined) => react88.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react961.Dispatch<react961.SetStateAction<number>>;
-  setIndex: react961.Dispatch<react961.SetStateAction<number | number[]>>;
+  setFocusedIndex: react88.Dispatch<react88.SetStateAction<number>>;
+  setIndex: react88.Dispatch<react88.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import { PortalProps } from "../portal/portal.js";
 import { UsePopupAnimationProps } from "../popover/popover.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react960 from "react";
+import * as react31 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 //#region src/components/action-bar/action-bar.d.ts
@@ -28,7 +28,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react960.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react31.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

package/dist/types/components/airy/airy.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react959 from "react";
+import * as react980 from "react";
 import { ReactNode } from "react";
 //#region src/components/airy/airy.d.ts
@@ -56,7 +56,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react959.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react980.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import { IconProps } from "../icon/icon.js";
 import { LoadingProps } from "../loading/loading.js";
 import { StatusScheme } from "../status/status.js";
 import "../../index.js";
-import * as react958 from "react";
+import * as react30 from "react";
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -17,7 +17,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react958.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react30.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alpha-slider/alpha-slider.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../../index.js";
-import * as react955 from "react";
+import * as react57 from "react";
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -37,7 +37,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react955.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react57.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react956 from "react";
+import * as react152 from "react";
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react956.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react152.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react954 from "react";
+import * as react68 from "react";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -66,7 +66,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react954.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react68.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "root" | "indicator" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "root" | "indicator" | "field" | "empty" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import { FieldProps } from "../field/field.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react948 from "react";
+import * as react69 from "react";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -26,7 +26,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react948.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react69.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -154,7 +154,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react948.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react69.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -164,8 +164,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react948.Dispatch<react948.SetStateAction<string>>;
-  setValue: react948.Dispatch<react948.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react69.Dispatch<react69.SetStateAction<string>>;
+  setValue: react69.Dispatch<react69.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

package/dist/types/components/avatar/avatar.d.ts CHANGED Viewed

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react942 from "react";
+import * as react41 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils11 from "@yamada-ui/utils";
+import * as _yamada_ui_utils2 from "@yamada-ui/utils";
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils11.Dict = _yamada_ui_utils11.Dict<any>>(el: H | react942.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils2.Dict = _yamada_ui_utils2.Dict<any>>(el: H | react41.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react942.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react942.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils11.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react41.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react41.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils2.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils11.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils2.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/avatar/use-avatar-group.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react945 from "react";
+import * as react44 from "react";
 //#region src/components/avatar/use-avatar-group.d.ts
 interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
   reverse,
   ...rest
 }?: UseAvatarGroupProps) => {
-  children: react945.ReactElement<any, string | react945.JSXElementConstructor<any>>[];
+  children: react44.ReactElement<any, string | react44.JSXElementConstructor<any>>[];
   excess: number;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/badge/badge.d.ts CHANGED Viewed

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BadgeStyle } from "./badge.style.js";
 import "../../index.js";
-import * as react947 from "react";
+import * as react56 from "react";
 //#region src/components/badge/badge.d.ts
 interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
-declare const BadgePropsContext: react947.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
+declare const BadgePropsContext: react56.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
 /**
  * `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
  *

package/dist/types/components/bleed/bleed.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { CSSProps } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react941 from "react";
+import * as react35 from "react";
 //#region src/components/bleed/bleed.d.ts
 interface BleedProps extends HTMLStyledProps {
@@ -31,7 +31,7 @@ interface BleedProps extends HTMLStyledProps {
    */
   inlineStart?: "full" | CSSProps["marginInlineStart"];
 }
-declare const BleedPropsContext: react941.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
+declare const BleedPropsContext: react35.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
 /**
  * `Bleed` is a component used to break an element from the boundaries of its container.
  *

package/dist/types/components/blockquote/blockquote.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BlockquoteStyle } from "./blockquote.style.js";
 import "../../index.js";
-import * as react957 from "react";
+import * as react67 from "react";
 import { ReactNode } from "react";
 //#region src/components/blockquote/blockquote.d.ts
@@ -29,7 +29,7 @@ interface BlockquoteRootProps extends Omit<HTMLStyledProps<"figure">, "cite">, T
    */
   contentProps?: HTMLStyledProps<"blockquote">;
 }
-declare const BlockquotePropsContext: react957.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
+declare const BlockquotePropsContext: react67.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
 /**
  * `Blockquote` is a component that represents a blockquote. By default, it renders a `blockquote` element.
  *

package/dist/types/components/breadcrumb/breadcrumb.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { BreadcrumbStyle } from "./breadcrumb.style.js";
 import { UseBreadcrumbProps } from "./use-breadcrumb.js";
 import "../../index.js";
-import * as react940 from "react";
+import * as react26 from "react";
 import { ReactElement } from "react";
 //#region src/components/breadcrumb/breadcrumb.d.ts
@@ -40,7 +40,7 @@ interface BreadcrumbRootProps extends HTMLStyledProps<"nav">, ThemeProps<Breadcr
    */
   separatorProps?: BreadcrumbSeparatorProps;
 }
-declare const BreadcrumbPropsContext: react940.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
+declare const BreadcrumbPropsContext: react26.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
 /**
  * `Breadcrumb` is a component that helps users understand the hierarchy of a website.
  *

package/dist/types/components/breadcrumb/breadcrumb.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/breadcrumb/breadcrumb.style.d.ts
-declare const breadcrumbStyle: ComponentSlotStyle<"link" | "ellipsis" | "separator" | "list" | "root" | "item", CSSPropObject<CSSSlotObject<"link" | "ellipsis" | "separator" | "list" | "root" | "item">>, {
+declare const breadcrumbStyle: ComponentSlotStyle<"link" | "ellipsis" | "separator" | "list" | "item" | "root", CSSPropObject<CSSSlotObject<"link" | "ellipsis" | "separator" | "list" | "item" | "root">>, {
   sm: {
     list: {
       fontSize: "sm";

package/dist/types/components/breadcrumb/use-breadcrumb.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ReactNodeOrFunction } from "../../utils/index.types.js";
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react937 from "react";
+import * as react27 from "react";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/breadcrumb/use-breadcrumb.d.ts
@@ -46,7 +46,7 @@ declare const useBreadcrumb: ({
   startBoundaries,
   ...rest
 }?: UseBreadcrumbProps) => {
-  children: (string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react937.ReactPortal | ReactElement<unknown, string | react937.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | ReactElement<any, string | react937.JSXElementConstructor<any>> | null | undefined)[];
+  children: (string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react27.ReactPortal | ReactElement<unknown, string | react27.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | ReactElement<any, string | react27.JSXElementConstructor<any>> | null | undefined)[];
   getEllipsisProps: PropGetter<"svg", undefined, undefined>;
   getLinkProps: PropGetter<"a", {
     currentPage?: boolean;