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

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

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

package/dist/cjs/hooks/use-combobox/index.cjs CHANGED Viewed

@@ -8,6 +8,7 @@ const require_effect = require("../../utils/effect.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_environment_provider = require("../../core/system/environment-provider.cjs");
+const require_props = require("../../core/components/props.cjs");
 const require_hooks_use_descendants_index = require("../use-descendants/index.cjs");
 const require_use_disclosure = require("../use-disclosure/use-disclosure.cjs");
 const require_use_popover = require("../../components/popover/use-popover.cjs");
@@ -257,7 +258,8 @@ const useCombobox = (props = {}) => {
 		if (open) return;
 		activeDescendant.current = null;
 	}, [open]);
-	const getTriggerProps = (0, react.useCallback)(({ ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props } = {}) => ({
+	const getTriggerProps = (0, react.useCallback)(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props } = {}) => require_props.mergeProps({
+		ref: triggerRef,
 		"aria-controls": open ? contentId : void 0,
 		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
 		"aria-expanded": open,
@@ -267,13 +269,11 @@ const useCombobox = (props = {}) => {
 		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
 		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
 		role: "combobox",
-		tabIndex: interactive ? 0 : -1,
-		...rest,
-		...props,
-		ref: require_ref.mergeRefs(ref, rest.ref, triggerRef),
-		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, rest.onClick, onClick),
-		onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props.onKeyDown, rest.onKeyDown, onKeyDown)
-	}), [
+		tabIndex: interactive ? 0 : -1
+	}, rest, props, {
+		onClick,
+		onKeyDown
+	})(), [
 		open,
 		contentId,
 		interactive,
@@ -314,12 +314,10 @@ const useCombobox = (props = {}) => {
 const useComboboxGroup = ({ "aria-labelledby": ariaLabelledbyProp, ...rest } = {}) => {
 	const labelId = (0, react.useId)();
 	return {
-		getGroupProps: (0, react.useCallback)(({ "aria-labelledby": ariaLabelledby, ...props } = {}) => ({
+		getGroupProps: (0, react.useCallback)(({ "aria-labelledby": ariaLabelledby, ...props } = {}) => require_props.mergeProps({
 			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby, labelId),
-			role: "group",
-			...rest,
-			...props
-		}), [
+			role: "group"
+		}, rest, props)(), [
 			ariaLabelledbyProp,
 			labelId,
 			rest
@@ -360,21 +358,21 @@ const useComboboxItem = ({ id, "aria-disabled": ariaDisabled, "data-disabled": d
 		onSelect,
 		value
 	]);
-	const getItemProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
+	const getItemProps = (0, react.useCallback)((props = {}) => require_props.mergeProps({
 		id,
+		ref: itemRef,
 		"aria-disabled": ariaDisabled ?? (0, require_utils_index.utils_exports.ariaAttr)(disabled),
 		"aria-selected": selected,
 		"data-disabled": dataDisabled ?? (0, require_utils_index.utils_exports.dataAttr)(disabled),
 		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
 		"data-value": value,
 		role: "option",
-		tabIndex: -1,
-		...rest,
-		...props,
-		ref: require_ref.mergeRefs(ref, rest.ref, itemRef, register),
-		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, rest.onClick, onClick),
-		onMouseMove: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseMove, rest.onMouseMove, onActive)
-	}), [
+		tabIndex: -1
+	}, rest, props, {
+		ref: register,
+		onClick,
+		onMouseMove: onActive
+	})(), [
 		id,
 		ariaDisabled,
 		disabled,
@@ -390,13 +388,7 @@ const useComboboxItem = ({ id, "aria-disabled": ariaDisabled, "data-disabled": d
 		descendants,
 		disabled,
 		selected,
-		getIndicatorProps: (0, react.useCallback)(({ style, ...props } = {}) => ({
-			style: {
-				opacity: selected ? 1 : 0,
-				...style
-			},
-			...props
-		}), [selected]),
+		getIndicatorProps: (0, react.useCallback)((props = {}) => require_props.mergeProps({ style: { opacity: selected ? 1 : 0 } }, props)(), [selected]),
 		getItemProps,
 		onActiveDescendant,
 		onClose

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":["getValidChildren","isSomeElement","findChild","createDescendants","createContext","usePopoverProps","useEnvironment","useDisclosure","isComposing","mergeRefs"],"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.cjs","names":["getValidChildren","isSomeElement","findChild","createDescendants","createContext","usePopoverProps","useEnvironment","useDisclosure","isComposing","mergeProps","mergeRefs"],"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 { onClick, 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, onClick, 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/esm/hooks/use-combobox/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { useUpdateEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
 import { useEnvironment } from "../../core/system/environment-provider.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createDescendants } from "../use-descendants/index.js";
 import { useDisclosure } from "../use-disclosure/use-disclosure.js";
 import { usePopoverProps } from "../../components/popover/use-popover.js";
@@ -254,7 +255,8 @@ const useCombobox = (props = {}) => {
 		if (open) return;
 		activeDescendant.current = null;
 	}, [open]);
-	const getTriggerProps = useCallback(({ ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props } = {}) => ({
+	const getTriggerProps = useCallback(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props } = {}) => mergeProps({
+		ref: triggerRef,
 		"aria-controls": open ? contentId : void 0,
 		"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
 		"aria-expanded": open,
@@ -264,13 +266,11 @@ const useCombobox = (props = {}) => {
 		"data-disabled": (0, utils_exports.dataAttr)(disabled),
 		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
 		role: "combobox",
-		tabIndex: interactive ? 0 : -1,
-		...rest,
-		...props,
-		ref: mergeRefs(ref, rest.ref, triggerRef),
-		onClick: (0, utils_exports.handlerAll)(props.onClick, rest.onClick, onClick),
-		onKeyDown: (0, utils_exports.handlerAll)(props.onKeyDown, rest.onKeyDown, onKeyDown)
-	}), [
+		tabIndex: interactive ? 0 : -1
+	}, rest, props, {
+		onClick,
+		onKeyDown
+	})(), [
 		open,
 		contentId,
 		interactive,
@@ -311,12 +311,10 @@ const useCombobox = (props = {}) => {
 const useComboboxGroup = ({ "aria-labelledby": ariaLabelledbyProp, ...rest } = {}) => {
 	const labelId = useId();
 	return {
-		getGroupProps: useCallback(({ "aria-labelledby": ariaLabelledby, ...props } = {}) => ({
+		getGroupProps: useCallback(({ "aria-labelledby": ariaLabelledby, ...props } = {}) => mergeProps({
 			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby, labelId),
-			role: "group",
-			...rest,
-			...props
-		}), [
+			role: "group"
+		}, rest, props)(), [
 			ariaLabelledbyProp,
 			labelId,
 			rest
@@ -357,21 +355,21 @@ const useComboboxItem = ({ id, "aria-disabled": ariaDisabled, "data-disabled": d
 		onSelect,
 		value
 	]);
-	const getItemProps = useCallback(({ ref, ...props } = {}) => ({
+	const getItemProps = useCallback((props = {}) => mergeProps({
 		id,
+		ref: itemRef,
 		"aria-disabled": ariaDisabled ?? (0, utils_exports.ariaAttr)(disabled),
 		"aria-selected": selected,
 		"data-disabled": dataDisabled ?? (0, utils_exports.dataAttr)(disabled),
 		"data-selected": (0, utils_exports.dataAttr)(selected),
 		"data-value": value,
 		role: "option",
-		tabIndex: -1,
-		...rest,
-		...props,
-		ref: mergeRefs(ref, rest.ref, itemRef, register),
-		onClick: (0, utils_exports.handlerAll)(props.onClick, rest.onClick, onClick),
-		onMouseMove: (0, utils_exports.handlerAll)(props.onMouseMove, rest.onMouseMove, onActive)
-	}), [
+		tabIndex: -1
+	}, rest, props, {
+		ref: register,
+		onClick,
+		onMouseMove: onActive
+	})(), [
 		id,
 		ariaDisabled,
 		disabled,
@@ -387,13 +385,7 @@ const useComboboxItem = ({ id, "aria-disabled": ariaDisabled, "data-disabled": d
 		descendants,
 		disabled,
 		selected,
-		getIndicatorProps: useCallback(({ style, ...props } = {}) => ({
-			style: {
-				opacity: selected ? 1 : 0,
-				...style
-			},
-			...props
-		}), [selected]),
+		getIndicatorProps: useCallback((props = {}) => mergeProps({ style: { opacity: selected ? 1 : 0 } }, props)(), [selected]),
 		getItemProps,
 		onActiveDescendant,
 		onClose

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 { onClick, 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, onClick, 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/autocomplete/autocomplete.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/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
   xs: {
     empty: {
       gap: "1.5";

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" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks", {
   /**
    * 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" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks">>>;
 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" | "prev" | "indicator" | "item" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "trigger" | "prev" | "indicator" | "item" | "indicators">>, {
   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" | "prev" | "indicator" | "item" | "indicators">>>;
 type CarouselStyle = typeof carouselStyle;
 //#endregion
 export { CarouselStyle, carouselStyle };

package/dist/types/components/chart/cartesian-chart.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/chart/cartesian-chart.style.d.ts
-declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
+declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
 type CartesianChartStyle = typeof cartesianChartStyle;
 //#endregion
 export { CartesianChartStyle, cartesianChartStyle };

package/dist/types/components/chart/polar-chart.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/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

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" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -213,7 +213,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>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -363,7 +363,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/checkbox-card/checkbox-card.style.d.ts
-declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

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/drawer/drawer.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/drawer/drawer.style.d.ts
-declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root" | "dragBar", {
+declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton" | "dragBar", {
   /**
    * The placement of the drawer.
    *
@@ -117,7 +117,7 @@ declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "ti
       rounded: "0";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root" | "dragBar">>>;
+}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton" | "dragBar">>>;
 type DrawerStyle = typeof drawerStyle;
 //#endregion
 export { DrawerStyle, drawerStyle };

package/dist/types/components/empty-state/empty-state.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/empty-state/empty-state.style.d.ts
-declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>, {
+declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>, {
   sm: {
     content: {
       gap: "xs";
@@ -47,7 +47,7 @@ declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "des
       fontSize: "xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>>;
 type EmptyState = typeof emptyState;
 //#endregion
 export { EmptyState, emptyState };

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/menu/menu.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/menu/menu.style.d.ts
-declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
+declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>, {
   sm: {
     command: {
       fontSize: "2xs";
@@ -86,7 +86,7 @@ declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "con
       px: "2";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>>;
 type MenuStyle = typeof menuStyle;
 //#endregion
 export { MenuStyle, menuStyle };

package/dist/types/components/modal/modal.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/modal/modal.style.d.ts
-declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root", {
+declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton", {
   /**
    * The placement of the modal.
    *
@@ -155,7 +155,7 @@ declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "tit
       p: "0";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton">>>;
 type ModalStyle = typeof modalStyle;
 //#endregion
 export { ModalStyle, modalStyle };

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" | "root" | "closeButton" | "item", CSSPropObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>>;
 type NoticeStyle = typeof noticeStyle;
 //#endregion
 export { NoticeStyle };

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" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -232,7 +232,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>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -409,7 +409,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio-card/radio-card.style.d.ts
-declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

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" | "indicator" | "item", {
   /**
    * 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" | "indicator" | "item">>>;
 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" | "indicator" | "item" | "description", {
   /**
    * The orientation of the steps.
    *

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tag/tag.style.d.ts
-declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "closeButton" | "root" | "endIcon" | "startIcon", {
+declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "root" | "closeButton" | "endIcon" | "startIcon", {
   /**
    * If `true`, the tag is full rounded. Else, it'll be slightly round.
    *

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" | "indicator" | "item" | "description" | "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" | "indicator" | "item" | "description" | "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" | "indicator" | "item", {
   /**
    * The shape of the component
    *

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.2.1-dev-20260511123053",
+  "version": "2.2.1-dev-20260511135752",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",
@@ -147,7 +147,7 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "sonner": "^2.0.7",
     "uqr": "^0.1.3",
-    "@yamada-ui/utils": "2.1.3-dev-20260511123053"
+    "@yamada-ui/utils": "2.1.3-dev-20260511135752"
   },
   "devDependencies": {
     "@babel/parser": "^7.29.2",