npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260511123053 → 2.2.1-dev-20260511160829 - Mend

@yamada-ui/react 2.2.1-dev-20260511123053 → 2.2.1-dev-20260511160829

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 (42) hide show

package/dist/esm/hooks/use-combobox/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["createContext"],"sources":["../../../../src/hooks/use-combobox/index.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n JSXElementConstructor,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n RefObject,\n} from \"react\"\nimport type { UsePopoverProps } from \"../../components/popover\"\nimport type { HTMLProps, PropGetter, SimpleDirection } from \"../../core\"\nimport type { Descendant } from \"../use-descendants\"\nimport type { UseDisclosureProps } from \"../use-disclosure\"\nimport { useCallback, useId, useMemo, useRef } from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { usePopoverProps } from \"../../components/popover\"\nimport { useEnvironment } from \"../../core\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n findChild,\n getValidChildren,\n handlerAll,\n isComposing,\n isSomeElement,\n isUndefined,\n mergeRefs,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\nimport { createDescendants } from \"../use-descendants\"\nimport { useDisclosure } from \"../use-disclosure\"\n\ninterface ComboboxSharedItem extends Omit<HTMLProps, \"children\" \| \"value\"> {\n label: ReactNode\n}\n\nexport interface ComboboxItemWithValue extends ComboboxSharedItem {\n query?: string\n value?: string\n}\n\nexport interface ComboboxItemWithItems extends ComboboxSharedItem {\n items: ComboboxItemWithValue[]\n}\n\nexport type ComboboxItem = ComboboxItemWithItems \| ComboboxItemWithValue\n\nexport interface CreateComboboxItemOptions {\n Group: JSXElementConstructor<any>\n Label: JSXElementConstructor<any>\n Option: JSXElementConstructor<any>\n}\n\nexport const createComboboxItem = (\n children: ReactNode,\n { Group, Label, Option }: CreateComboboxItemOptions,\n) => {\n const validChildren = getValidChildren(children)\n\n return validChildren\n .filter(\n ({ type }) => isSomeElement(type, Option) \|\| isSomeElement(type, Group),\n )\n .map(({ type, props }) => {\n if (isSomeElement(type, Option)) {\n return { ...props, label: props.children }\n } else {\n const validChildren = getValidChildren(props.children)\n const label = findChild(validChildren, Label)\n\n return {\n ...props,\n items: validChildren\n .filter(({ type }) => isSomeElement(type, Option))\n .map(({ props }) => ({ ...props, label: props.children })),\n label: label?.props.children ?? props.label,\n }\n }\n })\n}\n\nexport interface CreateComboboxChildrenOptions {\n Group: JSXElementConstructor<any>\n Option: JSXElementConstructor<any>\n Empty?: JSXElementConstructor<any>\n}\n\nexport const createComboboxChildren = (\n items: ComboboxItem[],\n { Empty, Group, Option }: CreateComboboxChildrenOptions,\n) => {\n return items.map((item, index) => {\n if (\"data-empty\" in item && Empty) {\n const { label, ...rest } = item\n\n return (\n <Empty key={index} {...rest}>\n {label}\n </Empty>\n )\n } else if (\"items\" in item) {\n const { items, label, ...rest } = item\n\n return (\n <Group key={index} label={label} {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <Option key={index} {...rest}>\n {label}\n </Option>\n ))}\n </Group>\n )\n } else {\n const { label, ...rest } = item\n\n return (\n <Option key={index} {...rest}>\n {label}\n </Option>\n )\n }\n })\n}\n\nexport interface ComboboxDescendantProps {\n id: string\n closeOnSelect?: boolean\n value?: string\n}\nexport type ComboboxDescendant = Descendant<\n HTMLDivElement,\n ComboboxDescendantProps\n>\n\nconst {\n DescendantsContext: ComboboxDescendantsContext,\n useDescendant: useComboboxDescendant,\n useDescendantRegister: useComboboxDescendantRegister,\n useDescendants: useComboboxDescendants,\n} = createDescendants<HTMLDivElement, ComboboxDescendantProps>()\n\nexport {\n ComboboxDescendantsContext,\n useComboboxDescendant,\n useComboboxDescendantRegister,\n useComboboxDescendants,\n}\n\ninterface ComboboxContext extends Pick<\n UseComboboxReturn,\n \"onActiveDescendant\" \| \"onClose\" \| \"onSelect\"\n> {}\n\nconst [ComboboxContext, useComboboxContext] = createContext<ComboboxContext>({\n name: \"ComboboxContext\",\n})\n\ninterface ComboboxGroupContext extends Pick<\n UseComboboxGroupReturn,\n \"getLabelProps\"\n> {}\n\nconst [ComboboxGroupContext, useComboboxGroupContext] =\n createContext<ComboboxGroupContext>({\n name: \"ComboboxGroupContext\",\n })\n\nexport {\n ComboboxContext,\n ComboboxGroupContext,\n useComboboxContext,\n useComboboxGroupContext,\n}\n\nexport interface UseComboboxProps\n extends\n Omit<HTMLProps, \"onChange\">,\n Omit<UseDisclosureProps, \"timing\">,\n Omit<\n UsePopoverProps,\n \"autoFocus\" \| \"initialFocusRef\" \| \"modal\" \| \"transform\" \| \"updateRef\"\n > {\n /*\n If `true`, the list element will be closed when value is selected.\n \n @default true\n /\n closeOnSelect?: boolean\n /\n If `true`, the combobox will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The value to focus on when the combobox is opened.\n /\n initialFocusValue?: string\n /\n If `true`, the combobox will be opened when click on the field.\n \n @default true\n /\n openOnClick?: boolean\n /\n If `true`, the combobox will be opened when enter is pressed.\n \n @default true\n /\n openOnEnter?: boolean\n /\n If `true`, the combobox will be opened when space is pressed.\n \n @default true\n /\n openOnSpace?: boolean\n /\n If `true`, the combobox will be readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The `ref` of the element that should receive focus when selected.\n /\n selectFocusRef?: RefObject<HTMLElement \| null>\n /\n If `true`, the item will be selected when space is pressed.\n \n @default true\n /\n selectOnSpace?: boolean\n /\n The callback invoked when value is selected.\n /\n onChange?: (value: string) => void\n}\n\nexport const useCombobox = (props: UseComboboxProps = {}) => {\n const [\n { matchWidth = true, ...popoverProps },\n {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledbyProp,\n closeOnSelect: closeOnSelectProp = true,\n defaultOpen,\n disabled,\n initialFocusValue,\n open: openProp,\n openOnClick = true,\n openOnEnter = true,\n openOnSpace = true,\n readOnly,\n selectFocusRef,\n selectOnSpace = true,\n onChange: onChangeProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n ...rest\n },\n ] = usePopoverProps(props, [\n \"disabled\",\n \"open\",\n \"defaultOpen\",\n \"onOpen\",\n \"onClose\",\n \"openOnClick\",\n ])\n const { getWindow } = useEnvironment()\n const interactive = !(readOnly \|\| disabled)\n const triggerRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const contentId = useId()\n const descendants = useComboboxDescendants()\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const activeDescendant = useRef<ComboboxDescendant \| null>(null)\n const mergedPopoverProps = useMemo<UsePopoverProps>(\n () => ({\n autoFocus: false,\n matchWidth,\n openOnClick: false,\n ...popoverProps,\n disabled: !interactive,\n open,\n onClose,\n onOpen,\n }),\n [interactive, matchWidth, onClose, onOpen, open, popoverProps],\n )\n\n const onSelect = useCallback(\n (value?: string, closeOnSelect = closeOnSelectProp) => {\n const ref = selectFocusRef ?? triggerRef\n\n ref.current?.focus()\n\n if (!interactive \|\| isUndefined(value)) return\n\n onChangeProp?.(value)\n\n if (!closeOnSelect) return\n\n onClose()\n },\n [closeOnSelectProp, interactive, onChangeProp, onClose, selectFocusRef],\n )\n\n const onScrollIntoView = useCallback(\n (descendant?: ComboboxDescendant, block: SimpleDirection = \"start\") => {\n if (!contentRef.current \|\| !descendant) return\n\n const style = getWindow()?.getComputedStyle(contentRef.current)\n const padding =\n block === \"start\" ? style?.paddingBlockStart : style?.paddingBlockEnd\n const value = parseInt(padding ?? \"0px\")\n\n scrollIntoView(descendant.node, {\n behavior: (actions) =>\n actions.forEach(({ el, top }) => {\n el.scrollTop = block === \"start\" ? top - value : top + value\n }),\n block,\n boundary: contentRef.current,\n inline: \"nearest\",\n scrollMode: \"if-needed\",\n })\n },\n [getWindow],\n )\n\n const onActiveDescendant = useCallback(\n (descendant?: ComboboxDescendant) => {\n if (!triggerRef.current \|\| !descendant \|\| disabled) return\n\n triggerRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n activeDescendant.current = descendant\n\n descendants.active(descendant)\n },\n [descendants, disabled],\n )\n\n const onOpenWithActiveDescendant = useCallback(\n (\n getFallbackDescendant: () => ComboboxDescendant \| undefined,\n block: SimpleDirection = \"start\",\n ) => {\n onOpen()\n\n setTimeout(() => {\n if (!initialFocusValue) {\n const descendant = getFallbackDescendant()\n\n onActiveDescendant(descendant)\n onScrollIntoView(descendant, block)\n } else {\n const values = descendants.values()\n const descendant =\n values.find(({ value }) => initialFocusValue === value) ??\n getFallbackDescendant()\n\n onActiveDescendant(descendant)\n onScrollIntoView(descendant, block)\n }\n })\n },\n [\n descendants,\n initialFocusValue,\n onActiveDescendant,\n onOpen,\n onScrollIntoView,\n ],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n\n if (!open) {\n if (openOnClick)\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else {\n onClose()\n }\n },\n [\n descendants,\n disabled,\n onClose,\n onOpenWithActiveDescendant,\n open,\n openOnClick,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (disabled \|\| isComposing(ev)) return\n\n runKeyAction(\n ev,\n {\n ArrowDown: (ev) => {\n ev.preventDefault()\n\n if (!open) {\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else if (activeDescendant.current) {\n const descendant = descendants.enabledNextValue(\n activeDescendant.current,\n )\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(\n descendant,\n descendant?.recurred ? \"start\" : \"end\",\n )\n } else {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant)\n }\n },\n ArrowUp: (ev) => {\n ev.preventDefault()\n\n if (!open) {\n onOpenWithActiveDescendant(descendants.enabledLastValue, \"end\")\n } else if (activeDescendant.current) {\n const descendant = descendants.enabledPrevValue(\n activeDescendant.current,\n )\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(\n descendant,\n descendant?.recurred ? \"end\" : \"start\",\n )\n } else {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant, \"end\")\n }\n },\n End: (ev) => {\n ev.preventDefault()\n\n if (!open) return\n\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant, \"end\")\n },\n Enter: (ev) => {\n if (!open) {\n if (!openOnEnter) return\n\n ev.preventDefault()\n\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else {\n if (!activeDescendant.current) return\n\n ev.preventDefault()\n\n const { closeOnSelect, value } = activeDescendant.current\n\n onSelect(value, closeOnSelect)\n }\n },\n Home: (ev) => {\n if (!open) return\n\n ev.preventDefault()\n\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant)\n },\n Space: (ev) => {\n if (!open) {\n if (!openOnSpace) return\n\n ev.preventDefault()\n\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else {\n if (!activeDescendant.current \|\| !selectOnSpace) return\n\n ev.preventDefault()\n\n const { closeOnSelect, value } = activeDescendant.current\n\n onSelect(value, closeOnSelect)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [\n disabled,\n open,\n onOpenWithActiveDescendant,\n descendants,\n onActiveDescendant,\n onScrollIntoView,\n openOnEnter,\n onSelect,\n openOnSpace,\n selectOnSpace,\n ],\n )\n\n useUpdateEffect(() => {\n if (open) return\n\n activeDescendant.current = null\n }, [open])\n\n const getTriggerProps: PropGetter = useCallback(\n ({\n ref,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => ({\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"listbox\",\n \"aria-label\": ariaLabel \|\| ariaLabelProp,\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"combobox\",\n tabIndex: interactive ? 0 : -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, triggerRef),\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n }),\n [\n open,\n contentId,\n interactive,\n ariaLabelledbyProp,\n disabled,\n readOnly,\n ariaLabelProp,\n rest,\n onClick,\n onKeyDown,\n ],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: contentId,\n role: \"listbox\",\n ...props,\n ref: mergeRefs(ref, contentRef),\n onKeyDown: handlerAll(props.onKeyDown),\n }),\n [contentId],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({ role: \"separator\", ...props }),\n [],\n )\n\n return {\n activeDescendant,\n descendants,\n interactive,\n open,\n getContentProps,\n getSeparatorProps,\n getTriggerProps,\n popoverProps: mergedPopoverProps,\n onActiveDescendant,\n onClose,\n onOpen,\n onOpenWithActiveDescendant,\n onScrollIntoView,\n onSelect,\n }\n}\n\nexport type UseComboboxReturn = ReturnType<typeof useCombobox>\n\nexport interface UseComboboxGroupProps extends HTMLProps {}\n\nexport const useComboboxGroup = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n ...rest\n}: UseComboboxGroupProps = {}) => {\n const labelId = useId()\n\n const getGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n role: \"group\",\n ...rest,\n ...props,\n }),\n [ariaLabelledbyProp, labelId, rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({ id: labelId, role: \"presentation\", ...props }),\n [labelId],\n )\n\n return { getGroupProps, getLabelProps }\n}\n\nexport type UseComboboxGroupReturn = ReturnType<typeof useComboboxGroup>\n\nexport interface UseComboboxItemProps extends HTMLProps {\n /\n If `true`, the item will be closed when selected.\n /\n closeOnSelect?: boolean\n /\n If `true`, the item will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, the item will be selected.\n /\n selected?: boolean\n /\n The value of the item.\n */\n value?: string\n}\n\nexport const useComboboxItem = ({\n id,\n \"aria-disabled\": ariaDisabled,\n \"data-disabled\": dataDisabled,\n closeOnSelect,\n disabled = false,\n selected = false,\n value,\n ...rest\n}: UseComboboxItemProps = {}) => {\n const uuid = useId()\n const itemRef = useRef<HTMLDivElement>(null)\n const { onActiveDescendant, onClose, onSelect } = useComboboxContext()\n\n id ??= uuid\n\n const { descendants, register } = useComboboxDescendant({\n id,\n closeOnSelect,\n disabled,\n value,\n })\n\n const onActive = useCallback(() => {\n if (disabled) return\n\n const current = descendants.value(itemRef.current)\n\n onActiveDescendant(current)\n }, [descendants, disabled, onActiveDescendant])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n if (disabled) return\n\n onSelect(value, closeOnSelect)\n },\n [closeOnSelect, disabled, onSelect, value],\n )\n\n const getItemProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n \"aria-selected\": selected,\n \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n \"data-selected\": dataAttr(selected),\n \"data-value\": value,\n role: \"option\",\n tabIndex: -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, itemRef, register),\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, onActive),\n }),\n [\n id,\n ariaDisabled,\n disabled,\n selected,\n dataDisabled,\n value,\n rest,\n register,\n onClick,\n onActive,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n style: { opacity: selected ? 1 : 0, ...style },\n ...props,\n }),\n [selected],\n )\n\n return {\n descendants,\n disabled,\n selected,\n getIndicatorProps,\n getItemProps,\n onActiveDescendant,\n onClose,\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["createContext"],"sources":["../../../../src/hooks/use-combobox/index.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n JSXElementConstructor,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n RefObject,\n} from \"react\"\nimport type { UsePopoverProps } from \"../../components/popover\"\nimport type { HTMLProps, PropGetter, SimpleDirection } from \"../../core\"\nimport type { Descendant } from \"../use-descendants\"\nimport type { UseDisclosureProps } from \"../use-disclosure\"\nimport { useCallback, useId, useMemo, useRef } from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { usePopoverProps } from \"../../components/popover\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n findChild,\n getValidChildren,\n handlerAll,\n isComposing,\n isSomeElement,\n isUndefined,\n mergeRefs,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\nimport { createDescendants } from \"../use-descendants\"\nimport { useDisclosure } from \"../use-disclosure\"\n\ninterface ComboboxSharedItem extends Omit<HTMLProps, \"children\" \| \"value\"> {\n label: ReactNode\n}\n\nexport interface ComboboxItemWithValue extends ComboboxSharedItem {\n query?: string\n value?: string\n}\n\nexport interface ComboboxItemWithItems extends ComboboxSharedItem {\n items: ComboboxItemWithValue[]\n}\n\nexport type ComboboxItem = ComboboxItemWithItems \| ComboboxItemWithValue\n\nexport interface CreateComboboxItemOptions {\n Group: JSXElementConstructor<any>\n Label: JSXElementConstructor<any>\n Option: JSXElementConstructor<any>\n}\n\nexport const createComboboxItem = (\n children: ReactNode,\n { Group, Label, Option }: CreateComboboxItemOptions,\n) => {\n const validChildren = getValidChildren(children)\n\n return validChildren\n .filter(\n ({ type }) => isSomeElement(type, Option) \|\| isSomeElement(type, Group),\n )\n .map(({ type, props }) => {\n if (isSomeElement(type, Option)) {\n return { ...props, label: props.children }\n } else {\n const validChildren = getValidChildren(props.children)\n const label = findChild(validChildren, Label)\n\n return {\n ...props,\n items: validChildren\n .filter(({ type }) => isSomeElement(type, Option))\n .map(({ props }) => ({ ...props, label: props.children })),\n label: label?.props.children ?? props.label,\n }\n }\n })\n}\n\nexport interface CreateComboboxChildrenOptions {\n Group: JSXElementConstructor<any>\n Option: JSXElementConstructor<any>\n Empty?: JSXElementConstructor<any>\n}\n\nexport const createComboboxChildren = (\n items: ComboboxItem[],\n { Empty, Group, Option }: CreateComboboxChildrenOptions,\n) => {\n return items.map((item, index) => {\n if (\"data-empty\" in item && Empty) {\n const { label, ...rest } = item\n\n return (\n <Empty key={index} {...rest}>\n {label}\n </Empty>\n )\n } else if (\"items\" in item) {\n const { items, label, ...rest } = item\n\n return (\n <Group key={index} label={label} {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <Option key={index} {...rest}>\n {label}\n </Option>\n ))}\n </Group>\n )\n } else {\n const { label, ...rest } = item\n\n return (\n <Option key={index} {...rest}>\n {label}\n </Option>\n )\n }\n })\n}\n\nexport interface ComboboxDescendantProps {\n id: string\n closeOnSelect?: boolean\n value?: string\n}\nexport type ComboboxDescendant = Descendant<\n HTMLDivElement,\n ComboboxDescendantProps\n>\n\nconst {\n DescendantsContext: ComboboxDescendantsContext,\n useDescendant: useComboboxDescendant,\n useDescendantRegister: useComboboxDescendantRegister,\n useDescendants: useComboboxDescendants,\n} = createDescendants<HTMLDivElement, ComboboxDescendantProps>()\n\nexport {\n ComboboxDescendantsContext,\n useComboboxDescendant,\n useComboboxDescendantRegister,\n useComboboxDescendants,\n}\n\ninterface ComboboxContext extends Pick<\n UseComboboxReturn,\n \"onActiveDescendant\" \| \"onClose\" \| \"onSelect\"\n> {}\n\nconst [ComboboxContext, useComboboxContext] = createContext<ComboboxContext>({\n name: \"ComboboxContext\",\n})\n\ninterface ComboboxGroupContext extends Pick<\n UseComboboxGroupReturn,\n \"getLabelProps\"\n> {}\n\nconst [ComboboxGroupContext, useComboboxGroupContext] =\n createContext<ComboboxGroupContext>({\n name: \"ComboboxGroupContext\",\n })\n\nexport {\n ComboboxContext,\n ComboboxGroupContext,\n useComboboxContext,\n useComboboxGroupContext,\n}\n\nexport interface UseComboboxProps\n extends\n Omit<HTMLProps, \"onChange\">,\n Omit<UseDisclosureProps, \"timing\">,\n Omit<\n UsePopoverProps,\n \"autoFocus\" \| \"initialFocusRef\" \| \"modal\" \| \"transform\" \| \"updateRef\"\n > {\n /*\n If `true`, the list element will be closed when value is selected.\n \n @default true\n /\n closeOnSelect?: boolean\n /\n If `true`, the combobox will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The value to focus on when the combobox is opened.\n /\n initialFocusValue?: string\n /\n If `true`, the combobox will be opened when click on the field.\n \n @default true\n /\n openOnClick?: boolean\n /\n If `true`, the combobox will be opened when enter is pressed.\n \n @default true\n /\n openOnEnter?: boolean\n /\n If `true`, the combobox will be opened when space is pressed.\n \n @default true\n /\n openOnSpace?: boolean\n /\n If `true`, the combobox will be readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The `ref` of the element that should receive focus when selected.\n /\n selectFocusRef?: RefObject<HTMLElement \| null>\n /\n If `true`, the item will be selected when space is pressed.\n \n @default true\n /\n selectOnSpace?: boolean\n /\n The callback invoked when value is selected.\n /\n onChange?: (value: string) => void\n}\n\nexport const useCombobox = (props: UseComboboxProps = {}) => {\n const [\n { matchWidth = true, ...popoverProps },\n {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledbyProp,\n closeOnSelect: closeOnSelectProp = true,\n defaultOpen,\n disabled,\n initialFocusValue,\n open: openProp,\n openOnClick = true,\n openOnEnter = true,\n openOnSpace = true,\n readOnly,\n selectFocusRef,\n selectOnSpace = true,\n onChange: onChangeProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n ...rest\n },\n ] = usePopoverProps(props, [\n \"disabled\",\n \"open\",\n \"defaultOpen\",\n \"onOpen\",\n \"onClose\",\n \"openOnClick\",\n ])\n const { getWindow } = useEnvironment()\n const interactive = !(readOnly \|\| disabled)\n const triggerRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const contentId = useId()\n const descendants = useComboboxDescendants()\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const activeDescendant = useRef<ComboboxDescendant \| null>(null)\n const mergedPopoverProps = useMemo<UsePopoverProps>(\n () => ({\n autoFocus: false,\n matchWidth,\n openOnClick: false,\n ...popoverProps,\n disabled: !interactive,\n open,\n onClose,\n onOpen,\n }),\n [interactive, matchWidth, onClose, onOpen, open, popoverProps],\n )\n\n const onSelect = useCallback(\n (value?: string, closeOnSelect = closeOnSelectProp) => {\n const ref = selectFocusRef ?? triggerRef\n\n ref.current?.focus()\n\n if (!interactive \|\| isUndefined(value)) return\n\n onChangeProp?.(value)\n\n if (!closeOnSelect) return\n\n onClose()\n },\n [closeOnSelectProp, interactive, onChangeProp, onClose, selectFocusRef],\n )\n\n const onScrollIntoView = useCallback(\n (descendant?: ComboboxDescendant, block: SimpleDirection = \"start\") => {\n if (!contentRef.current \|\| !descendant) return\n\n const style = getWindow()?.getComputedStyle(contentRef.current)\n const padding =\n block === \"start\" ? style?.paddingBlockStart : style?.paddingBlockEnd\n const value = parseInt(padding ?? \"0px\")\n\n scrollIntoView(descendant.node, {\n behavior: (actions) =>\n actions.forEach(({ el, top }) => {\n el.scrollTop = block === \"start\" ? top - value : top + value\n }),\n block,\n boundary: contentRef.current,\n inline: \"nearest\",\n scrollMode: \"if-needed\",\n })\n },\n [getWindow],\n )\n\n const onActiveDescendant = useCallback(\n (descendant?: ComboboxDescendant) => {\n if (!triggerRef.current \|\| !descendant \|\| disabled) return\n\n triggerRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n activeDescendant.current = descendant\n\n descendants.active(descendant)\n },\n [descendants, disabled],\n )\n\n const onOpenWithActiveDescendant = useCallback(\n (\n getFallbackDescendant: () => ComboboxDescendant \| undefined,\n block: SimpleDirection = \"start\",\n ) => {\n onOpen()\n\n setTimeout(() => {\n if (!initialFocusValue) {\n const descendant = getFallbackDescendant()\n\n onActiveDescendant(descendant)\n onScrollIntoView(descendant, block)\n } else {\n const values = descendants.values()\n const descendant =\n values.find(({ value }) => initialFocusValue === value) ??\n getFallbackDescendant()\n\n onActiveDescendant(descendant)\n onScrollIntoView(descendant, block)\n }\n })\n },\n [\n descendants,\n initialFocusValue,\n onActiveDescendant,\n onOpen,\n onScrollIntoView,\n ],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n\n if (!open) {\n if (openOnClick)\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else {\n onClose()\n }\n },\n [\n descendants,\n disabled,\n onClose,\n onOpenWithActiveDescendant,\n open,\n openOnClick,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (disabled \|\| isComposing(ev)) return\n\n runKeyAction(\n ev,\n {\n ArrowDown: (ev) => {\n ev.preventDefault()\n\n if (!open) {\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else if (activeDescendant.current) {\n const descendant = descendants.enabledNextValue(\n activeDescendant.current,\n )\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(\n descendant,\n descendant?.recurred ? \"start\" : \"end\",\n )\n } else {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant)\n }\n },\n ArrowUp: (ev) => {\n ev.preventDefault()\n\n if (!open) {\n onOpenWithActiveDescendant(descendants.enabledLastValue, \"end\")\n } else if (activeDescendant.current) {\n const descendant = descendants.enabledPrevValue(\n activeDescendant.current,\n )\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(\n descendant,\n descendant?.recurred ? \"end\" : \"start\",\n )\n } else {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant, \"end\")\n }\n },\n End: (ev) => {\n ev.preventDefault()\n\n if (!open) return\n\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant, \"end\")\n },\n Enter: (ev) => {\n if (!open) {\n if (!openOnEnter) return\n\n ev.preventDefault()\n\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else {\n if (!activeDescendant.current) return\n\n ev.preventDefault()\n\n const { closeOnSelect, value } = activeDescendant.current\n\n onSelect(value, closeOnSelect)\n }\n },\n Home: (ev) => {\n if (!open) return\n\n ev.preventDefault()\n\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n\n onScrollIntoView(descendant)\n },\n Space: (ev) => {\n if (!open) {\n if (!openOnSpace) return\n\n ev.preventDefault()\n\n onOpenWithActiveDescendant(descendants.enabledFirstValue)\n } else {\n if (!activeDescendant.current \|\| !selectOnSpace) return\n\n ev.preventDefault()\n\n const { closeOnSelect, value } = activeDescendant.current\n\n onSelect(value, closeOnSelect)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [\n disabled,\n open,\n onOpenWithActiveDescendant,\n descendants,\n onActiveDescendant,\n onScrollIntoView,\n openOnEnter,\n onSelect,\n openOnSpace,\n selectOnSpace,\n ],\n )\n\n useUpdateEffect(() => {\n if (open) return\n\n activeDescendant.current = null\n }, [open])\n\n const getTriggerProps: PropGetter = useCallback(\n ({\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => ({\n ...mergeProps(\n {\n ref: triggerRef,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"listbox\",\n \"aria-label\": ariaLabel \|\| ariaLabelProp,\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"combobox\",\n tabIndex: interactive ? 0 : -1,\n },\n rest,\n props,\n )({ mergeEvent: false }),\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n }),\n [\n open,\n contentId,\n interactive,\n ariaLabelledbyProp,\n disabled,\n readOnly,\n ariaLabelProp,\n rest,\n onClick,\n onKeyDown,\n ],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: contentId,\n role: \"listbox\",\n ...props,\n ref: mergeRefs(ref, contentRef),\n onKeyDown: handlerAll(props.onKeyDown),\n }),\n [contentId],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({ role: \"separator\", ...props }),\n [],\n )\n\n return {\n activeDescendant,\n descendants,\n interactive,\n open,\n getContentProps,\n getSeparatorProps,\n getTriggerProps,\n popoverProps: mergedPopoverProps,\n onActiveDescendant,\n onClose,\n onOpen,\n onOpenWithActiveDescendant,\n onScrollIntoView,\n onSelect,\n }\n}\n\nexport type UseComboboxReturn = ReturnType<typeof useCombobox>\n\nexport interface UseComboboxGroupProps extends HTMLProps {}\n\nexport const useComboboxGroup = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n ...rest\n}: UseComboboxGroupProps = {}) => {\n const labelId = useId()\n\n const getGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n mergeProps(\n {\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n role: \"group\",\n },\n rest,\n props,\n )(),\n [ariaLabelledbyProp, labelId, rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({ id: labelId, role: \"presentation\", ...props }),\n [labelId],\n )\n\n return { getGroupProps, getLabelProps }\n}\n\nexport type UseComboboxGroupReturn = ReturnType<typeof useComboboxGroup>\n\nexport interface UseComboboxItemProps extends HTMLProps {\n /\n If `true`, the item will be closed when selected.\n /\n closeOnSelect?: boolean\n /\n If `true`, the item will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, the item will be selected.\n /\n selected?: boolean\n /\n The value of the item.\n */\n value?: string\n}\n\nexport const useComboboxItem = ({\n id,\n \"aria-disabled\": ariaDisabled,\n \"data-disabled\": dataDisabled,\n closeOnSelect,\n disabled = false,\n selected = false,\n value,\n ...rest\n}: UseComboboxItemProps = {}) => {\n const uuid = useId()\n const itemRef = useRef<HTMLDivElement>(null)\n const { onActiveDescendant, onClose, onSelect } = useComboboxContext()\n\n id ??= uuid\n\n const { descendants, register } = useComboboxDescendant({\n id,\n closeOnSelect,\n disabled,\n value,\n })\n\n const onActive = useCallback(() => {\n if (disabled) return\n\n const current = descendants.value(itemRef.current)\n\n onActiveDescendant(current)\n }, [descendants, disabled, onActiveDescendant])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n if (disabled) return\n\n onSelect(value, closeOnSelect)\n },\n [closeOnSelect, disabled, onSelect, value],\n )\n\n const getItemProps: PropGetter = useCallback(\n (props = {}) => ({\n ...mergeProps(\n {\n id,\n ref: itemRef,\n \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n \"aria-selected\": selected,\n \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n \"data-selected\": dataAttr(selected),\n \"data-value\": value,\n role: \"option\",\n tabIndex: -1,\n },\n rest,\n props,\n { ref: register },\n )({ mergeEvent: false }),\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, onActive),\n }),\n [\n id,\n ariaDisabled,\n disabled,\n selected,\n dataDisabled,\n value,\n rest,\n register,\n onClick,\n onActive,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps({ style: { opacity: selected ? 1 : 0 } }, props)(),\n [selected],\n )\n\n return {\n descendants,\n disabled,\n selected,\n getIndicatorProps,\n getItemProps,\n onActiveDescendant,\n onClose,\n }\n}\n"],"mappings":"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"}

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

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

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

@@ -23,7 +23,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -146,7 +146,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: _$react.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: _$react.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -269,7 +269,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _$_yamada_ui_utils0.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _$_yamada_ui_utils0.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/avatar/avatar.style.d.ts
-declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
   /**
    * The shape of the component
    *

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

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

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/calendar/calendar.style.d.ts
-declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "prev" | "root" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks", {
+declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "control" | "months" | "years" | "weeks" | "prev", {
   /**
    * If `true`, the calendar will be fixed rows.
    *
@@ -73,7 +73,7 @@ declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "
       "--font-size": "fontSizes.xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "prev" | "root" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks">>>;
+}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "control" | "months" | "years" | "weeks" | "prev">>>;
 type CalendarStyle = typeof calendarStyle;
 //#endregion
 export { CalendarStyle, calendarStyle };

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/carousel/carousel.style.d.ts
-declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "prev" | "item" | "root" | "trigger" | "indicator" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "prev" | "item" | "root" | "trigger" | "indicator" | "indicators">>, {
+declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "trigger" | "item" | "indicator" | "indicators" | "prev", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "trigger" | "item" | "indicator" | "indicators" | "prev">>, {
   sm: {
     root: {
       h: "sm";
@@ -17,7 +17,7 @@ declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "prev" | "item
       h: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"list" | "next" | "prev" | "item" | "root" | "trigger" | "indicator" | "indicators">>>;
+}, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "trigger" | "item" | "indicator" | "indicators" | "prev">>>;
 type CarouselStyle = typeof carouselStyle;
 //#endregion
 export { CarouselStyle, carouselStyle };

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

@@ -37,7 +37,7 @@ interface CheckboxProps<Y extends string = string> extends Merge<HTMLStyledProps
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {

package/dist/types/components/checkbox-card/checkbox-card.d.ts CHANGED Viewed

@@ -63,7 +63,7 @@ interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLSty
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/color-picker/color-picker.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/color-picker/color-picker.style.d.ts
-declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "colorSwatch" | "root" | "field" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "colorSwatch" | "root" | "field" | "eyeDropper">>, {
+declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "root" | "colorSwatch" | "field" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "root" | "colorSwatch" | "field" | "eyeDropper">>, {
   xs: {
     field: {
       fontSize: "1em";

package/dist/types/components/color-selector/color-selector.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/color-selector/color-selector.style.d.ts
-declare const colorSelectorStyle: ComponentSlotStyle<"hueSlider" | "saturationSlider" | "root" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem", {
+declare const colorSelectorStyle: ComponentSlotStyle<"root" | "hueSlider" | "saturationSlider" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem", {
   /**
    * The shape of the thumb and color swatch.
    *
@@ -22,7 +22,7 @@ declare const colorSelectorStyle: ComponentSlotStyle<"hueSlider" | "saturationSl
   md: {};
   lg: {};
   xl: {};
-}, CSSModifierObject<CSSSlotObject<"hueSlider" | "saturationSlider" | "root" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem">>>;
+}, CSSModifierObject<CSSSlotObject<"root" | "hueSlider" | "saturationSlider" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem">>>;
 type ColorSelectorStyle = typeof colorSelectorStyle;
 //#endregion
 export { ColorSelectorStyle, colorSelectorStyle };

package/dist/types/components/data-list/data-list.style.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/data-list/data-list.style.d.ts
-declare const dataListStyle: ComponentSlotStyle<"term" | "item" | "root" | "description", {
+declare const dataListStyle: ComponentSlotStyle<"term" | "root" | "item" | "description", {
   /**
    * The orientation of the data list.
    *

package/dist/types/components/file-input/file-input.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/file-input/file-input.style.d.ts
-declare const fileInputStyle: ComponentSlotStyle<"tag" | "root", CSSPropObject<CSSSlotObject<"tag" | "root">>, {
+declare const fileInputStyle: ComponentSlotStyle<"root" | "tag", CSSPropObject<CSSSlotObject<"root" | "tag">>, {
   xs: {
     root: {
       "&:has(~ [data-input-element])"?: {

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

@@ -82,7 +82,7 @@ declare const Flip: Component<({
   onChange,
   onClick: onClickProp,
   ...rest
-}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
+}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
 //#endregion
 export { Flip, FlipProps, FlipPropsContext, useFlipPropsContext };
 //# sourceMappingURL=flip.d.ts.map

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/flip/flip.style.d.ts
-declare const flipStyle: ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>;
+declare const flipStyle: ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>;
 type FlipStyle = typeof flipStyle;
 //#endregion
 export { FlipStyle, flipStyle };

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

@@ -8,11 +8,11 @@ import * as _$_yamada_ui_utils0 from "@yamada-ui/utils";
 //#region src/components/icon/icon.d.ts
 interface IconProps extends HTMLStyledProps<"svg">, ThemeProps<IconStyle> {}
-declare const component: <D extends As | "fragment" = "div", H extends _$_yamada_ui_utils0.Dict = IconProps>(el: D | _$react.FC<H>, {
+declare const component: <D extends "fragment" | As = "div", H extends _$_yamada_ui_utils0.Dict = IconProps>(el: D | _$react.FC<H>, {
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => D extends "fragment" ? _$react.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>, IconPropsContext: _$react.Context<Partial<IconProps> | undefined>, useIconPropsContext: () => Partial<IconProps> | undefined, withContext: <D extends As | "fragment" = "div", H extends IconProps = IconProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
+  }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => D extends "fragment" ? _$react.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>, IconPropsContext: _$react.Context<Partial<IconProps> | undefined>, useIconPropsContext: () => Partial<IconProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends IconProps = IconProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
     name,
     className,
     withContext,

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/list/list.style.d.ts
-declare const listStyle: ComponentSlotStyle<"icon" | "item" | "root", {
+declare const listStyle: ComponentSlotStyle<"icon" | "root" | "item", {
   styleType: {
     circle: {
       root: {
@@ -35,7 +35,7 @@ declare const listStyle: ComponentSlotStyle<"icon" | "item" | "root", {
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>>;
 type ListStyle = typeof listStyle;
 //#endregion
 export { ListStyle, listStyle };

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

@@ -17,7 +17,7 @@ interface LoadingProps extends WithoutThemeProps<IconProps>, ThemeProps<LoadingS
    */
   secondaryColor?: CSSProps["color"];
 }
-declare const LoadingPropsContext: _$react.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends As | "fragment" = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
+declare const LoadingPropsContext: _$react.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
     name,
     className,
     withContext,

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/native-accordion/native-accordion.style.d.ts
-declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", {
+declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", {
   /**
    * If `true`, animate the accordion items when they are expanded or collapsed.
    *
@@ -31,7 +31,7 @@ declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "ico
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/notice/notice.style.d.ts
-declare const noticeStyle: ComponentSlotStyle<"content" | "closeButton" | "item" | "root", CSSPropObject<CSSSlotObject<"content" | "closeButton" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "item" | "root">>>;
+declare const noticeStyle: ComponentSlotStyle<"content" | "closeButton" | "root" | "item", CSSPropObject<CSSSlotObject<"content" | "closeButton" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "root" | "item">>>;
 type NoticeStyle = typeof noticeStyle;
 //#endregion
 export { NoticeStyle };

package/dist/types/components/number-input/number-input.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/number-input/number-input.style.d.ts
-declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "decrement" | "increment" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "decrement" | "increment" | "control">>, {
+declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "control" | "decrement" | "increment", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "control" | "decrement" | "increment">>, {
   xs: {
     control: {
       boxSize: "calc({--height} - {spaces.2})";

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/pagination/pagination.style.d.ts
-declare const paginationStyle: ComponentSlotStyle<"text" | "item" | "root", CSSPropObject<CSSSlotObject<"text" | "item" | "root">>, {
+declare const paginationStyle: ComponentSlotStyle<"text" | "root" | "item", CSSPropObject<CSSSlotObject<"text" | "root" | "item">>, {
   xs: {
     item: {
       fontSize: "{font-size}";

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

@@ -29,7 +29,7 @@ interface RadioProps<Y extends string = string> extends Merge<HTMLStyledProps<"l
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {

package/dist/types/components/radio-card/radio-card.d.ts CHANGED Viewed

@@ -55,7 +55,7 @@ interface RadioCardRootProps<Y extends string = string> extends Merge<HTMLStyled
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/rating/rating.style.d.ts
-declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"group" | "icon" | "item" | "root">>, {
+declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"group" | "icon" | "root" | "item">>, {
   xs: {
     icon: {
       fontSize: "md";
@@ -27,7 +27,7 @@ declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root"
       fontSize: "3xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "root" | "item">>>;
 type RatingStyle = typeof ratingStyle;
 //#endregion
 export { RatingStyle, ratingStyle };

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/reorder/reorder.style.d.ts
-declare const reorderStyle: ComponentSlotStyle<"item" | "root" | "trigger", {
+declare const reorderStyle: ComponentSlotStyle<"root" | "trigger" | "item", {
   /**
    * The orientation of the reorder.
    *

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/resizable/resizable.style.d.ts
-declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "trigger", {
+declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "trigger" | "item", {
   /**
    * The orientation of the resizable.
    *
@@ -19,7 +19,7 @@ declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "tri
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root" | "trigger">>, {
+}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "trigger" | "item">>, {
   border: {
     icon: {
       bg: "colorScheme.muted";

package/dist/types/components/segmented-control/segmented-control.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/segmented-control/segmented-control.style.d.ts
-declare const segmentedControlStyle: ComponentSlotStyle<"item" | "root" | "indicator", {
+declare const segmentedControlStyle: ComponentSlotStyle<"root" | "item" | "indicator", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -113,7 +113,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"item" | "root" | "indic
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"item" | "root" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"root" | "item" | "indicator">>>;
 type SegmentedControlStyle = typeof segmentedControlStyle;
 //#endregion
 export { SegmentedControlStyle, segmentedControlStyle };

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/steps/steps.style.d.ts
-declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "item" | "root" | "description" | "indicator", {
+declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "item" | "description" | "indicator", {
   /**
    * The orientation of the steps.
    *

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

@@ -69,7 +69,7 @@ declare const TimelineRoot: Component<({
   index,
   items,
   ...rest
-}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector", {
+}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "item" | "description" | "indicator" | "connector", {
   align: {
     center: {
       content: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/timeline/timeline.style.d.ts
-declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "item" | "description" | "indicator" | "connector", {
   /**
    * The alignment of the timeline.
    *

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

@@ -12,7 +12,7 @@ import * as _$_yamada_ui_utils0 from "@yamada-ui/utils";
 //#region src/components/toggle/toggle.d.ts
 interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
-declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tree/tree.style.d.ts
-declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "item" | "root" | "indicator", {
+declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "item" | "indicator", {
   /**
    * The shape of the component
    *

package/dist/types/providers/i18n-provider/i18n-provider.d.ts CHANGED Viewed

@@ -134,7 +134,7 @@ declare const I18nContext: _$react.Context<I18nContext<{
   readonly toggle: {
     readonly "Toggle button": "Toggle button";
   };
-}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "closeButton.Close" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "stat.Decreased by" | "stat.Increased by" | "tag.Close tag">>;
+}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "closeButton.Close" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "stat.Decreased by" | "stat.Increased by" | "tag.Close tag">>;
 interface I18nProviderProps {
   children?: ReactNode;
   /**