@yamada-ui/react 2.2.1-dev-20260412135527 → 2.2.1-dev-20260412142743

package/dist/cjs/components/autocomplete/autocomplete.cjs

@@ -3,6 +3,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
 const require_check_icon = require('../icon/icons/check-icon.cjs');
@@ -107,13 +108,11 @@ const AutocompleteRoot = withProvider((props) => {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverRoot, {
 						...mergedPopoverProps,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
-							className,
-							css,
 							colorScheme,
-							...getRootProps({
-								...groupItemProps,
-								...rootProps
-							}),
+							...require_props.mergeProps({
+								className,
+								css
+							}, getRootProps(groupItemProps), rootProps)(),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteField, {
 								...getFieldProps(varProps),
 								children: fieldChildren
@@ -138,10 +137,7 @@ const AutocompleteRoot = withProvider((props) => {
 		})
 	});
 }, "root")((props) => {
-	return {
-		...require_input.useInputPropsContext(),
-		...props
-	};
+	return require_props.mergeProps(require_input.useInputPropsContext(), props)();
 });
 const AutocompleteField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children, ...rest }) => {
 	const { getInputProps, inputProps } = useComponentContext();
@@ -162,10 +158,7 @@ const AutocompleteLabel = withContext("span", "label")(void 0, (props) => {
 });
 const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest }) => {
 	const { groupProps } = useComponentContext();
-	const { getGroupProps, getLabelProps } = require_hooks_use_combobox_index.useComboboxGroup({
-		...groupProps,
-		...rest
-	});
+	const { getGroupProps, getLabelProps } = require_hooks_use_combobox_index.useComboboxGroup(require_props.mergeProps(groupProps, rest)());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks_use_combobox_index.ComboboxGroupContext, {
 		value: (0, react.useMemo)(() => ({ getLabelProps }), [getLabelProps]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
@@ -179,10 +172,7 @@ const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest })
 }, "group")();
 const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) => {
 	const { optionProps: { icon, ...optionProps } = {} } = useComponentContext();
-	const { getIndicatorProps, getOptionProps } = require_use_autocomplete.useAutocompleteOption({
-		...optionProps,
-		...rest
-	});
+	const { getIndicatorProps, getOptionProps } = require_use_autocomplete.useAutocompleteOption(require_props.mergeProps(optionProps, rest)());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
 		...getOptionProps(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIndicator, {
@@ -194,8 +184,7 @@ const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) =
 const AutocompleteEmpty = withContext(({ children, icon, ...rest }) => {
 	const { emptyIcon, emptyProps } = useComponentContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
-		...emptyProps,
-		...rest,
+		...require_props.mergeProps(emptyProps, rest)(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIndicator, { children: icon ?? emptyIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_minus_icon.MinusIcon, {}) }), children]
 	});
 }, "empty")();

package/dist/cjs/components/autocomplete/autocomplete.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.cjs","names":["createSlotComponent","autocompleteStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useAutocomplete","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","AutocompleteContext","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","styled","useAutocompleteOption","CheckIcon","MinusIcon"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type {\n  ComboboxItem,\n  UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n  UseAutocompleteOptionProps,\n  UseAutocompleteProps,\n  UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  ComboboxContext,\n  ComboboxDescendantsContext,\n  ComboboxGroupContext,\n  createComboboxChildren,\n  createComboboxItem,\n  useComboboxGroup,\n  useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n  AutocompleteContext,\n  useAutocomplete,\n  useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n  extends\n    Pick<UseAutocompleteReturn, \"getInputProps\" | \"getSeparatorProps\">,\n    Pick<\n      AutocompleteRootProps,\n      \"emptyIcon\" | \"emptyProps\" | \"groupProps\" | \"inputProps\" | \"optionProps\"\n    > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"filter\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<AutocompleteStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the empty element.\n   */\n  emptyIcon?: ReactNode\n  /**\n   * The icon to be used in the autocomplete.\n   */\n  icon?: ReactNode\n  /**\n   * Props for content element.\n   */\n  contentProps?: AutocompleteContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for empty element.\n   */\n  emptyProps?: AutocompleteEmptyProps\n  /**\n   * Props for group element.\n   */\n  groupProps?: Omit<AutocompleteGroupProps, \"children\" | \"label\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for option element.\n   */\n  optionProps?: Omit<AutocompleteOptionProps, \"children\" | \"value\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: AutocompletePropsContext,\n  useComponentContext,\n  usePropsContext: useAutocompletePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  AutocompleteRootProps,\n  AutocompleteStyle,\n  ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see https://yamada-ui.com/docs/components/autocomplete\n */\nexport const AutocompleteRoot = withProvider(\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        emptyIcon,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        items: itemsProp,\n        contentProps,\n        elementProps,\n        emptyProps,\n        groupProps,\n        iconProps,\n        inputProps,\n        optionProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const items = useMemo<ComboboxItem[]>(() => {\n      if (itemsProp) return itemsProp\n\n      return createComboboxItem(children, {\n        Group: AutocompleteGroup,\n        Label: AutocompleteLabel,\n        Option: AutocompleteOption,\n      })\n    }, [itemsProp, children])\n    const {\n      children: fieldChildren,\n      descendants,\n      items: computedItems,\n      max,\n      value,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      getSeparatorProps,\n      popoverProps,\n      onActiveDescendant,\n      onClose,\n      onSelect,\n    } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const computedChildren = useMemo(\n      () =>\n        createComboboxChildren(computedItems, {\n          Empty: AutocompleteEmpty,\n          Group: AutocompleteGroup,\n          Option: AutocompleteOption,\n        }),\n      [computedItems],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const comboboxContext = useMemo(\n      () => ({ onActiveDescendant, onClose, onSelect }),\n      [onActiveDescendant, onClose, onSelect],\n    )\n    const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n    const componentContext = useMemo(\n      () => ({\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      }),\n      [\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      ],\n    )\n    const hasValue = isArray(value) ? !!value.length : !!value\n\n    return (\n      <ComboboxDescendantsContext value={descendants}>\n        <ComboboxContext value={comboboxContext}>\n          <AutocompleteContext value={autocompleteContext}>\n            <ComponentContext value={componentContext}>\n              <Popover.Root {...mergedPopoverProps}>\n                <InputGroup.Root\n                  className={className}\n                  css={css}\n                  colorScheme={colorScheme}\n                  {...getRootProps({ ...groupItemProps, ...rootProps })}\n                >\n                  <Popover.Trigger>\n                    <AutocompleteField {...getFieldProps(varProps)}>\n                      {fieldChildren}\n                    </AutocompleteField>\n                  </Popover.Trigger>\n\n                  <InputGroup.Element\n                    {...{ clickable: clearable && hasValue, ...elementProps }}\n                  >\n                    {clearable && hasValue ? (\n                      <AutocompleteIcon\n                        icon={clearIcon}\n                        {...getClearIconProps(iconProps)}\n                      />\n                    ) : (\n                      <AutocompleteIcon\n                        icon={icon}\n                        {...getIconProps(iconProps)}\n                      />\n                    )}\n                  </InputGroup.Element>\n                </InputGroup.Root>\n\n                <AutocompleteContent\n                  {...cast<AutocompleteContentProps>(\n                    getContentProps(cast<HTMLProps>(contentProps)),\n                  )}\n                >\n                  {computedChildren}\n                </AutocompleteContent>\n              </Popover.Root>\n            </ComponentContext>\n          </AutocompleteContext>\n        </ComboboxContext>\n      </ComboboxDescendantsContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n}) as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    ...rest,\n    children: (\n      <>\n        {children}\n        <AutocompleteInput {...getInputProps(inputProps)} />\n      </>\n    ),\n  }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n  \"div\",\n  \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n  children: icon || children || <ChevronDownIcon />,\n  ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n  \"span\",\n  \"label\",\n)(undefined, (props) => {\n  const { getLabelProps } = useComboboxGroupContext()\n\n  return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n  extends UseComboboxGroupProps, HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { groupProps } = useComponentContext()\n    const { getGroupProps, getLabelProps } = useComboboxGroup({\n      ...groupProps,\n      ...rest,\n    })\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <ComboboxGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? (\n            <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n          ) : null}\n          {children}\n        </styled.div>\n      </ComboboxGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps, HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n  ({ children, icon: iconProp, ...rest }) => {\n    const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n    const { getIndicatorProps, getOptionProps } = useAutocompleteOption({\n      ...optionProps,\n      ...rest,\n    })\n\n    return (\n      <styled.div {...getOptionProps()}>\n        <AutocompleteIndicator {...getIndicatorProps()}>\n          {iconProp ?? icon ?? <CheckIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n  ({ children, icon, ...rest }) => {\n    const { emptyIcon, emptyProps } = useComponentContext()\n\n    return (\n      <styled.div {...emptyProps} {...rest}>\n        <AutocompleteIndicator>\n          {icon ?? emptyIcon ?? <MinusIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"autocomplete.cjs","names":["createSlotComponent","autocompleteStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useAutocomplete","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","AutocompleteContext","mergeProps","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","styled","useAutocompleteOption","CheckIcon","MinusIcon"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type {\n  ComboboxItem,\n  UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n  UseAutocompleteOptionProps,\n  UseAutocompleteProps,\n  UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  ComboboxContext,\n  ComboboxDescendantsContext,\n  ComboboxGroupContext,\n  createComboboxChildren,\n  createComboboxItem,\n  useComboboxGroup,\n  useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n  AutocompleteContext,\n  useAutocomplete,\n  useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n  extends\n    Pick<UseAutocompleteReturn, \"getInputProps\" | \"getSeparatorProps\">,\n    Pick<\n      AutocompleteRootProps,\n      \"emptyIcon\" | \"emptyProps\" | \"groupProps\" | \"inputProps\" | \"optionProps\"\n    > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"filter\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<AutocompleteStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the empty element.\n   */\n  emptyIcon?: ReactNode\n  /**\n   * The icon to be used in the autocomplete.\n   */\n  icon?: ReactNode\n  /**\n   * Props for content element.\n   */\n  contentProps?: AutocompleteContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for empty element.\n   */\n  emptyProps?: AutocompleteEmptyProps\n  /**\n   * Props for group element.\n   */\n  groupProps?: Omit<AutocompleteGroupProps, \"children\" | \"label\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for option element.\n   */\n  optionProps?: Omit<AutocompleteOptionProps, \"children\" | \"value\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: AutocompletePropsContext,\n  useComponentContext,\n  usePropsContext: useAutocompletePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  AutocompleteRootProps,\n  AutocompleteStyle,\n  ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see https://yamada-ui.com/docs/components/autocomplete\n */\nexport const AutocompleteRoot = withProvider(\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        emptyIcon,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        items: itemsProp,\n        contentProps,\n        elementProps,\n        emptyProps,\n        groupProps,\n        iconProps,\n        inputProps,\n        optionProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const items = useMemo<ComboboxItem[]>(() => {\n      if (itemsProp) return itemsProp\n\n      return createComboboxItem(children, {\n        Group: AutocompleteGroup,\n        Label: AutocompleteLabel,\n        Option: AutocompleteOption,\n      })\n    }, [itemsProp, children])\n    const {\n      children: fieldChildren,\n      descendants,\n      items: computedItems,\n      max,\n      value,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      getSeparatorProps,\n      popoverProps,\n      onActiveDescendant,\n      onClose,\n      onSelect,\n    } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const computedChildren = useMemo(\n      () =>\n        createComboboxChildren(computedItems, {\n          Empty: AutocompleteEmpty,\n          Group: AutocompleteGroup,\n          Option: AutocompleteOption,\n        }),\n      [computedItems],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const comboboxContext = useMemo(\n      () => ({ onActiveDescendant, onClose, onSelect }),\n      [onActiveDescendant, onClose, onSelect],\n    )\n    const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n    const componentContext = useMemo(\n      () => ({\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      }),\n      [\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      ],\n    )\n    const hasValue = isArray(value) ? !!value.length : !!value\n\n    return (\n      <ComboboxDescendantsContext value={descendants}>\n        <ComboboxContext value={comboboxContext}>\n          <AutocompleteContext value={autocompleteContext}>\n            <ComponentContext value={componentContext}>\n              <Popover.Root {...mergedPopoverProps}>\n                <InputGroup.Root\n                  colorScheme={colorScheme}\n                  {...mergeProps(\n                    { className, css },\n                    getRootProps(groupItemProps),\n                    rootProps,\n                  )()}\n                >\n                  <Popover.Trigger>\n                    <AutocompleteField {...getFieldProps(varProps)}>\n                      {fieldChildren}\n                    </AutocompleteField>\n                  </Popover.Trigger>\n\n                  <InputGroup.Element\n                    {...{ clickable: clearable && hasValue, ...elementProps }}\n                  >\n                    {clearable && hasValue ? (\n                      <AutocompleteIcon\n                        icon={clearIcon}\n                        {...getClearIconProps(iconProps)}\n                      />\n                    ) : (\n                      <AutocompleteIcon\n                        icon={icon}\n                        {...getIconProps(iconProps)}\n                      />\n                    )}\n                  </InputGroup.Element>\n                </InputGroup.Root>\n\n                <AutocompleteContent\n                  {...cast<AutocompleteContentProps>(\n                    getContentProps(cast<HTMLProps>(contentProps)),\n                  )}\n                >\n                  {computedChildren}\n                </AutocompleteContent>\n              </Popover.Root>\n            </ComponentContext>\n          </AutocompleteContext>\n        </ComboboxContext>\n      </ComboboxDescendantsContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n}) as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    ...rest,\n    children: (\n      <>\n        {children}\n        <AutocompleteInput {...getInputProps(inputProps)} />\n      </>\n    ),\n  }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n  \"div\",\n  \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n  children: icon || children || <ChevronDownIcon />,\n  ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n  \"span\",\n  \"label\",\n)(undefined, (props) => {\n  const { getLabelProps } = useComboboxGroupContext()\n\n  return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n  extends UseComboboxGroupProps, HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { groupProps } = useComponentContext()\n    const { getGroupProps, getLabelProps } = useComboboxGroup(\n      mergeProps(groupProps, rest)(),\n    )\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <ComboboxGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? (\n            <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n          ) : null}\n          {children}\n        </styled.div>\n      </ComboboxGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps, HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n  ({ children, icon: iconProp, ...rest }) => {\n    const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n    const { getIndicatorProps, getOptionProps } = useAutocompleteOption(\n      mergeProps(optionProps, rest)(),\n    )\n\n    return (\n      <styled.div {...getOptionProps()}>\n        <AutocompleteIndicator {...getIndicatorProps()}>\n          {iconProp ?? icon ?? <CheckIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n  ({ children, icon, ...rest }) => {\n    const { emptyIcon, emptyProps } = useComponentContext()\n\n    return (\n      <styled.div {...mergeProps(emptyProps, rest)()}>\n        <AutocompleteIndicator>\n          {icon ?? emptyIcon ?? <MinusIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/data-list/data-list.cjs

@@ -4,6 +4,7 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_children = require('../../utils/children.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
 const require_data_list_style = require('./data-list.style.cjs');
@@ -64,21 +65,17 @@ const DataListItem = withContext(({ children, description, term, descriptionProp
 		...rest,
 		children: [
 			!(0, require_utils_index.utils_exports.isEmpty)(customTerms) ? customTerms : (0, require_utils_index.utils_exports.isArray)(term) ? term.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTerm, {
-				...termProps,
-				...customTermProps,
+				...require_props.mergeProps(termProps, customTermProps)(),
 				children: item
 			}, index)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTerm, {
-				...termProps,
-				...customTermProps,
+				...require_props.mergeProps(termProps, customTermProps)(),
 				children: term
 			}),
 			!(0, require_utils_index.utils_exports.isEmpty)(customDescriptions) ? customDescriptions : (0, require_utils_index.utils_exports.isArray)(description) ? description.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListDescription, {
-				...descriptionProps,
-				...customDescriptionProps,
+				...require_props.mergeProps(descriptionProps, customDescriptionProps)(),
 				children: item
 			}, index)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListDescription, {
-				...descriptionProps,
-				...customDescriptionProps,
+				...require_props.mergeProps(descriptionProps, customDescriptionProps)(),
 				children: description
 			}),
 			omittedChildren

package/dist/cjs/components/data-list/data-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-list.cjs","names":["createSlotComponent","dataListStyle","col","pickChildren","getValidChildren","styled","customTerms","customDescriptions","omitChildren"],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm key={index} {...termProps} {...customTermProps}>\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...termProps} {...customTermProps}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...descriptionProps}\n              {...customDescriptionProps}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...descriptionProps}\n            {...customDescriptionProps}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,aACAC,sCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,EAAE,EAAE,kBAAkB,WAAW,GAAG,WAAW;CACzE,MAAM,+BAAoB;EACxB,IAAIC,QAAM;AAEV,MAAI,SAIF,CAFsBC,8BADAC,kCAAiB,SAAS,EACE,aAAa,CAEjD,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiBD,8BADDC,kCAAiB,MAAM,SAAS,EAGpD,cACA,oBACD;AAED,WAAM,KAAK,IAAIF,OAAK,eAAe,OAAO;IAC1C;MAEF,OAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,mDAAY,KAAK,GAAG,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,mDACQ,YAAY,GAClB,YAAY,SACZ;AAEN,WAAM,KAAK,IAAIA,OAAK,YAAY,iBAAiB;IACjD;AAGJ,SAAOA;IACN,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,4CAEF,MAAM,KAAK,OAAO,UAAU,2CAAC,gBAAyB,GAAI,SAAX,MAAoB,CAAC,EACtE,CAAC,MAAM,CACR;AASD,QACE,2CAAC;EAAiB,iCARX;GACL;GACA;GACD,GACD,CAAC,kBAAkB,UAAU,CAC9B;YAIG,2CAACG,uBAAO;GAAG,OAAO;IAAE,SAAS;IAAK,GAAG;IAAO;GAAE,GAAI;aAC/C,YAAY;IACH;GACK;GAGvB,OACD,EAAE;AAqBH,MAAa,eAAe,aACzB,EACC,UACA,aACA,MACA,kBAAkB,wBAClB,WAAW,iBACX,GAAG,WACC;CACJ,MAAM,EAAE,kBAAkB,cAAc,qBAAqB;CAE7D,MAAM,CAAC,iBAAiB,aAAa,+CAAoC;EACvE,MAAM,gBAAgBD,kCAAiB,SAAS;AAEhD,qDAAY,cAAc,CAAE,QAAO,CAAC,SAAS;EAE7C,MAAME,gBAAcH,8BAAa,eAAe,aAAa;EAC7D,MAAMI,uBAAqBJ,8BACzB,eACA,oBACD;AAOD,SAAO;GANiBK,8BACtB,eACA,cACA,oBACD;GAEwBF;GAAaC;GAAmB;IACxD,CAAC,SAAS,CAAC;AAEd,QACE,4CAACF,uBAAO;EAAI,GAAI;;GACb,gDAAS,YAAY,GACpB,6DACU,KAAK,GACf,KAAK,KAAK,MAAM,UACd,2CAAC;IAAyB,GAAI;IAAW,GAAI;cAC1C;MADgB,MAEJ,CACf,GAEF,2CAAC;IAAa,GAAI;IAAW,GAAI;cAC9B;KACY;GAGhB,gDAAS,mBAAmB,GAC3B,oEACU,YAAY,GACtB,YAAY,KAAK,MAAM,UACrB,2CAAC;IAEC,GAAI;IACJ,GAAI;cAEH;MAJI,MAKe,CACtB,GAEF,2CAAC;IACC,GAAI;IACJ,GAAI;cAEH;KACmB;GAGvB;;GACU;GAGjB,OACD,EAAE;AAIH,MAAa,eAAe,YAAqC,MAAM,OAAO,EAAE;AAIhF,MAAa,sBAAsB,YACjC,MACA,cACD,EAAE"}
+{"version":3,"file":"data-list.cjs","names":["createSlotComponent","dataListStyle","col","pickChildren","getValidChildren","styled","customTerms","customDescriptions","omitChildren","mergeProps"],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm\n              key={index}\n              {...mergeProps(termProps, customTermProps)()}\n            >\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...mergeProps(descriptionProps, customDescriptionProps)()}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...mergeProps(descriptionProps, customDescriptionProps)()}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAuCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,aACAC,sCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,EAAE,EAAE,kBAAkB,WAAW,GAAG,WAAW;CACzE,MAAM,+BAAoB;EACxB,IAAIC,QAAM;AAEV,MAAI,SAIF,CAFsBC,8BADAC,kCAAiB,SAAS,EACE,aAAa,CAEjD,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiBD,8BADDC,kCAAiB,MAAM,SAAS,EAGpD,cACA,oBACD;AAED,WAAM,KAAK,IAAIF,OAAK,eAAe,OAAO;IAC1C;MAEF,OAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,mDAAY,KAAK,GAAG,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,mDACQ,YAAY,GAClB,YAAY,SACZ;AAEN,WAAM,KAAK,IAAIA,OAAK,YAAY,iBAAiB;IACjD;AAGJ,SAAOA;IACN,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,4CAEF,MAAM,KAAK,OAAO,UAAU,2CAAC,gBAAyB,GAAI,SAAX,MAAoB,CAAC,EACtE,CAAC,MAAM,CACR;AASD,QACE,2CAAC;EAAiB,iCARX;GACL;GACA;GACD,GACD,CAAC,kBAAkB,UAAU,CAC9B;YAIG,2CAACG,uBAAO;GAAG,OAAO;IAAE,SAAS;IAAK,GAAG;IAAO;GAAE,GAAI;aAC/C,YAAY;IACH;GACK;GAGvB,OACD,EAAE;AAqBH,MAAa,eAAe,aACzB,EACC,UACA,aACA,MACA,kBAAkB,wBAClB,WAAW,iBACX,GAAG,WACC;CACJ,MAAM,EAAE,kBAAkB,cAAc,qBAAqB;CAE7D,MAAM,CAAC,iBAAiB,aAAa,+CAAoC;EACvE,MAAM,gBAAgBD,kCAAiB,SAAS;AAEhD,qDAAY,cAAc,CAAE,QAAO,CAAC,SAAS;EAE7C,MAAME,gBAAcH,8BAAa,eAAe,aAAa;EAC7D,MAAMI,uBAAqBJ,8BACzB,eACA,oBACD;AAOD,SAAO;GANiBK,8BACtB,eACA,cACA,oBACD;GAEwBF;GAAaC;GAAmB;IACxD,CAAC,SAAS,CAAC;AAEd,QACE,4CAACF,uBAAO;EAAI,GAAI;;GACb,gDAAS,YAAY,GACpB,6DACU,KAAK,GACf,KAAK,KAAK,MAAM,UACd,2CAAC;IAEC,GAAII,yBAAW,WAAW,gBAAgB,EAAE;cAE3C;MAHI,MAIQ,CACf,GAEF,2CAAC;IAAa,GAAIA,yBAAW,WAAW,gBAAgB,EAAE;cACvD;KACY;GAGhB,gDAAS,mBAAmB,GAC3B,oEACU,YAAY,GACtB,YAAY,KAAK,MAAM,UACrB,2CAAC;IAEC,GAAIA,yBAAW,kBAAkB,uBAAuB,EAAE;cAEzD;MAHI,MAIe,CACtB,GAEF,2CAAC;IACC,GAAIA,yBAAW,kBAAkB,uBAAuB,EAAE;cAEzD;KACmB;GAGvB;;GACU;GAGjB,OACD,EAAE;AAIH,MAAa,eAAe,YAAqC,MAAM,OAAO,EAAE;AAIhF,MAAa,sBAAsB,YACjC,MACA,cACD,EAAE"}

package/dist/esm/components/autocomplete/autocomplete.js

@@ -2,6 +2,7 @@
 
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { CheckIcon } from "../icon/icons/check-icon.js";
@@ -106,13 +107,11 @@ const AutocompleteRoot = withProvider((props) => {
 					children: /* @__PURE__ */ jsxs(PopoverRoot, {
 						...mergedPopoverProps,
 						children: [/* @__PURE__ */ jsxs(InputGroupRoot, {
-							className,
-							css,
 							colorScheme,
-							...getRootProps({
-								...groupItemProps,
-								...rootProps
-							}),
+							...mergeProps({
+								className,
+								css
+							}, getRootProps(groupItemProps), rootProps)(),
 							children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(AutocompleteField, {
 								...getFieldProps(varProps),
 								children: fieldChildren
@@ -137,10 +136,7 @@ const AutocompleteRoot = withProvider((props) => {
 		})
 	});
 }, "root")((props) => {
-	return {
-		...useInputPropsContext(),
-		...props
-	};
+	return mergeProps(useInputPropsContext(), props)();
 });
 const AutocompleteField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children, ...rest }) => {
 	const { getInputProps, inputProps } = useComponentContext();
@@ -161,10 +157,7 @@ const AutocompleteLabel = withContext("span", "label")(void 0, (props) => {
 });
 const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest }) => {
 	const { groupProps } = useComponentContext();
-	const { getGroupProps, getLabelProps } = useComboboxGroup({
-		...groupProps,
-		...rest
-	});
+	const { getGroupProps, getLabelProps } = useComboboxGroup(mergeProps(groupProps, rest)());
 	return /* @__PURE__ */ jsx(ComboboxGroupContext, {
 		value: useMemo(() => ({ getLabelProps }), [getLabelProps]),
 		children: /* @__PURE__ */ jsxs(styled.div, {
@@ -178,10 +171,7 @@ const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest })
 }, "group")();
 const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) => {
 	const { optionProps: { icon, ...optionProps } = {} } = useComponentContext();
-	const { getIndicatorProps, getOptionProps } = useAutocompleteOption({
-		...optionProps,
-		...rest
-	});
+	const { getIndicatorProps, getOptionProps } = useAutocompleteOption(mergeProps(optionProps, rest)());
 	return /* @__PURE__ */ jsxs(styled.div, {
 		...getOptionProps(),
 		children: [/* @__PURE__ */ jsx(AutocompleteIndicator, {
@@ -193,8 +183,7 @@ const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) =
 const AutocompleteEmpty = withContext(({ children, icon, ...rest }) => {
 	const { emptyIcon, emptyProps } = useComponentContext();
 	return /* @__PURE__ */ jsxs(styled.div, {
-		...emptyProps,
-		...rest,
+		...mergeProps(emptyProps, rest)(),
 		children: [/* @__PURE__ */ jsx(AutocompleteIndicator, { children: icon ?? emptyIcon ?? /* @__PURE__ */ jsx(MinusIcon, {}) }), children]
 	});
 }, "empty")();

package/dist/esm/components/autocomplete/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Popover.Content"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type {\n  ComboboxItem,\n  UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n  UseAutocompleteOptionProps,\n  UseAutocompleteProps,\n  UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  ComboboxContext,\n  ComboboxDescendantsContext,\n  ComboboxGroupContext,\n  createComboboxChildren,\n  createComboboxItem,\n  useComboboxGroup,\n  useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n  AutocompleteContext,\n  useAutocomplete,\n  useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n  extends\n    Pick<UseAutocompleteReturn, \"getInputProps\" | \"getSeparatorProps\">,\n    Pick<\n      AutocompleteRootProps,\n      \"emptyIcon\" | \"emptyProps\" | \"groupProps\" | \"inputProps\" | \"optionProps\"\n    > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"filter\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<AutocompleteStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the empty element.\n   */\n  emptyIcon?: ReactNode\n  /**\n   * The icon to be used in the autocomplete.\n   */\n  icon?: ReactNode\n  /**\n   * Props for content element.\n   */\n  contentProps?: AutocompleteContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for empty element.\n   */\n  emptyProps?: AutocompleteEmptyProps\n  /**\n   * Props for group element.\n   */\n  groupProps?: Omit<AutocompleteGroupProps, \"children\" | \"label\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for option element.\n   */\n  optionProps?: Omit<AutocompleteOptionProps, \"children\" | \"value\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: AutocompletePropsContext,\n  useComponentContext,\n  usePropsContext: useAutocompletePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  AutocompleteRootProps,\n  AutocompleteStyle,\n  ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see https://yamada-ui.com/docs/components/autocomplete\n */\nexport const AutocompleteRoot = withProvider(\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        emptyIcon,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        items: itemsProp,\n        contentProps,\n        elementProps,\n        emptyProps,\n        groupProps,\n        iconProps,\n        inputProps,\n        optionProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const items = useMemo<ComboboxItem[]>(() => {\n      if (itemsProp) return itemsProp\n\n      return createComboboxItem(children, {\n        Group: AutocompleteGroup,\n        Label: AutocompleteLabel,\n        Option: AutocompleteOption,\n      })\n    }, [itemsProp, children])\n    const {\n      children: fieldChildren,\n      descendants,\n      items: computedItems,\n      max,\n      value,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      getSeparatorProps,\n      popoverProps,\n      onActiveDescendant,\n      onClose,\n      onSelect,\n    } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const computedChildren = useMemo(\n      () =>\n        createComboboxChildren(computedItems, {\n          Empty: AutocompleteEmpty,\n          Group: AutocompleteGroup,\n          Option: AutocompleteOption,\n        }),\n      [computedItems],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const comboboxContext = useMemo(\n      () => ({ onActiveDescendant, onClose, onSelect }),\n      [onActiveDescendant, onClose, onSelect],\n    )\n    const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n    const componentContext = useMemo(\n      () => ({\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      }),\n      [\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      ],\n    )\n    const hasValue = isArray(value) ? !!value.length : !!value\n\n    return (\n      <ComboboxDescendantsContext value={descendants}>\n        <ComboboxContext value={comboboxContext}>\n          <AutocompleteContext value={autocompleteContext}>\n            <ComponentContext value={componentContext}>\n              <Popover.Root {...mergedPopoverProps}>\n                <InputGroup.Root\n                  className={className}\n                  css={css}\n                  colorScheme={colorScheme}\n                  {...getRootProps({ ...groupItemProps, ...rootProps })}\n                >\n                  <Popover.Trigger>\n                    <AutocompleteField {...getFieldProps(varProps)}>\n                      {fieldChildren}\n                    </AutocompleteField>\n                  </Popover.Trigger>\n\n                  <InputGroup.Element\n                    {...{ clickable: clearable && hasValue, ...elementProps }}\n                  >\n                    {clearable && hasValue ? (\n                      <AutocompleteIcon\n                        icon={clearIcon}\n                        {...getClearIconProps(iconProps)}\n                      />\n                    ) : (\n                      <AutocompleteIcon\n                        icon={icon}\n                        {...getIconProps(iconProps)}\n                      />\n                    )}\n                  </InputGroup.Element>\n                </InputGroup.Root>\n\n                <AutocompleteContent\n                  {...cast<AutocompleteContentProps>(\n                    getContentProps(cast<HTMLProps>(contentProps)),\n                  )}\n                >\n                  {computedChildren}\n                </AutocompleteContent>\n              </Popover.Root>\n            </ComponentContext>\n          </AutocompleteContext>\n        </ComboboxContext>\n      </ComboboxDescendantsContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n}) as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    ...rest,\n    children: (\n      <>\n        {children}\n        <AutocompleteInput {...getInputProps(inputProps)} />\n      </>\n    ),\n  }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n  \"div\",\n  \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n  children: icon || children || <ChevronDownIcon />,\n  ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n  \"span\",\n  \"label\",\n)(undefined, (props) => {\n  const { getLabelProps } = useComboboxGroupContext()\n\n  return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n  extends UseComboboxGroupProps, HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { groupProps } = useComponentContext()\n    const { getGroupProps, getLabelProps } = useComboboxGroup({\n      ...groupProps,\n      ...rest,\n    })\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <ComboboxGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? (\n            <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n          ) : null}\n          {children}\n        </styled.div>\n      </ComboboxGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps, HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n  ({ children, icon: iconProp, ...rest }) => {\n    const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n    const { getIndicatorProps, getOptionProps } = useAutocompleteOption({\n      ...optionProps,\n      ...rest,\n    })\n\n    return (\n      <styled.div {...getOptionProps()}>\n        <AutocompleteIndicator {...getIndicatorProps()}>\n          {iconProp ?? icon ?? <CheckIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n  ({ children, icon, ...rest }) => {\n    const { emptyIcon, emptyProps } = useComponentContext()\n\n    return (\n      <styled.div {...emptyProps} {...rest}>\n        <AutocompleteIndicator>\n          {icon ?? emptyIcon ?? <MinusIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"autocomplete.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Popover.Content"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type {\n  ComboboxItem,\n  UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n  UseAutocompleteOptionProps,\n  UseAutocompleteProps,\n  UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  ComboboxContext,\n  ComboboxDescendantsContext,\n  ComboboxGroupContext,\n  createComboboxChildren,\n  createComboboxItem,\n  useComboboxGroup,\n  useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n  AutocompleteContext,\n  useAutocomplete,\n  useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n  extends\n    Pick<UseAutocompleteReturn, \"getInputProps\" | \"getSeparatorProps\">,\n    Pick<\n      AutocompleteRootProps,\n      \"emptyIcon\" | \"emptyProps\" | \"groupProps\" | \"inputProps\" | \"optionProps\"\n    > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"filter\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<AutocompleteStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the empty element.\n   */\n  emptyIcon?: ReactNode\n  /**\n   * The icon to be used in the autocomplete.\n   */\n  icon?: ReactNode\n  /**\n   * Props for content element.\n   */\n  contentProps?: AutocompleteContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for empty element.\n   */\n  emptyProps?: AutocompleteEmptyProps\n  /**\n   * Props for group element.\n   */\n  groupProps?: Omit<AutocompleteGroupProps, \"children\" | \"label\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for option element.\n   */\n  optionProps?: Omit<AutocompleteOptionProps, \"children\" | \"value\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: AutocompletePropsContext,\n  useComponentContext,\n  usePropsContext: useAutocompletePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  AutocompleteRootProps,\n  AutocompleteStyle,\n  ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see https://yamada-ui.com/docs/components/autocomplete\n */\nexport const AutocompleteRoot = withProvider(\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        emptyIcon,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        items: itemsProp,\n        contentProps,\n        elementProps,\n        emptyProps,\n        groupProps,\n        iconProps,\n        inputProps,\n        optionProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const items = useMemo<ComboboxItem[]>(() => {\n      if (itemsProp) return itemsProp\n\n      return createComboboxItem(children, {\n        Group: AutocompleteGroup,\n        Label: AutocompleteLabel,\n        Option: AutocompleteOption,\n      })\n    }, [itemsProp, children])\n    const {\n      children: fieldChildren,\n      descendants,\n      items: computedItems,\n      max,\n      value,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      getSeparatorProps,\n      popoverProps,\n      onActiveDescendant,\n      onClose,\n      onSelect,\n    } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const computedChildren = useMemo(\n      () =>\n        createComboboxChildren(computedItems, {\n          Empty: AutocompleteEmpty,\n          Group: AutocompleteGroup,\n          Option: AutocompleteOption,\n        }),\n      [computedItems],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const comboboxContext = useMemo(\n      () => ({ onActiveDescendant, onClose, onSelect }),\n      [onActiveDescendant, onClose, onSelect],\n    )\n    const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n    const componentContext = useMemo(\n      () => ({\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      }),\n      [\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      ],\n    )\n    const hasValue = isArray(value) ? !!value.length : !!value\n\n    return (\n      <ComboboxDescendantsContext value={descendants}>\n        <ComboboxContext value={comboboxContext}>\n          <AutocompleteContext value={autocompleteContext}>\n            <ComponentContext value={componentContext}>\n              <Popover.Root {...mergedPopoverProps}>\n                <InputGroup.Root\n                  colorScheme={colorScheme}\n                  {...mergeProps(\n                    { className, css },\n                    getRootProps(groupItemProps),\n                    rootProps,\n                  )()}\n                >\n                  <Popover.Trigger>\n                    <AutocompleteField {...getFieldProps(varProps)}>\n                      {fieldChildren}\n                    </AutocompleteField>\n                  </Popover.Trigger>\n\n                  <InputGroup.Element\n                    {...{ clickable: clearable && hasValue, ...elementProps }}\n                  >\n                    {clearable && hasValue ? (\n                      <AutocompleteIcon\n                        icon={clearIcon}\n                        {...getClearIconProps(iconProps)}\n                      />\n                    ) : (\n                      <AutocompleteIcon\n                        icon={icon}\n                        {...getIconProps(iconProps)}\n                      />\n                    )}\n                  </InputGroup.Element>\n                </InputGroup.Root>\n\n                <AutocompleteContent\n                  {...cast<AutocompleteContentProps>(\n                    getContentProps(cast<HTMLProps>(contentProps)),\n                  )}\n                >\n                  {computedChildren}\n                </AutocompleteContent>\n              </Popover.Root>\n            </ComponentContext>\n          </AutocompleteContext>\n        </ComboboxContext>\n      </ComboboxDescendantsContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n}) as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    ...rest,\n    children: (\n      <>\n        {children}\n        <AutocompleteInput {...getInputProps(inputProps)} />\n      </>\n    ),\n  }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n  \"div\",\n  \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n  children: icon || children || <ChevronDownIcon />,\n  ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n  \"span\",\n  \"label\",\n)(undefined, (props) => {\n  const { getLabelProps } = useComboboxGroupContext()\n\n  return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n  extends UseComboboxGroupProps, HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { groupProps } = useComponentContext()\n    const { getGroupProps, getLabelProps } = useComboboxGroup(\n      mergeProps(groupProps, rest)(),\n    )\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <ComboboxGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? (\n            <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n          ) : null}\n          {children}\n        </styled.div>\n      </ComboboxGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps, HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n  ({ children, icon: iconProp, ...rest }) => {\n    const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n    const { getIndicatorProps, getOptionProps } = useAutocompleteOption(\n      mergeProps(optionProps, rest)(),\n    )\n\n    return (\n      <styled.div {...getOptionProps()}>\n        <AutocompleteIndicator {...getIndicatorProps()}>\n          {iconProp ?? icon ?? <CheckIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n  ({ children, icon, ...rest }) => {\n    const { emptyIcon, emptyProps } = useComponentContext()\n\n    return (\n      <styled.div {...mergeProps(emptyProps, rest)()}>\n        <AutocompleteIndicator>\n          {icon ?? emptyIcon ?? <MinusIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n"],"mappings":"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"}

package/dist/esm/components/data-list/data-list.js

@@ -3,6 +3,7 @@
 import { getValidChildren, omitChildren, pickChildren } from "../../utils/children.js";
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { dataListStyle } from "./data-list.style.js";
@@ -63,21 +64,17 @@ const DataListItem = withContext(({ children, description, term, descriptionProp
 		...rest,
 		children: [
 			!(0, utils_exports.isEmpty)(customTerms) ? customTerms : (0, utils_exports.isArray)(term) ? term.map((item, index) => /* @__PURE__ */ jsx(DataListTerm, {
-				...termProps,
-				...customTermProps,
+				...mergeProps(termProps, customTermProps)(),
 				children: item
 			}, index)) : /* @__PURE__ */ jsx(DataListTerm, {
-				...termProps,
-				...customTermProps,
+				...mergeProps(termProps, customTermProps)(),
 				children: term
 			}),
 			!(0, utils_exports.isEmpty)(customDescriptions) ? customDescriptions : (0, utils_exports.isArray)(description) ? description.map((item, index) => /* @__PURE__ */ jsx(DataListDescription, {
-				...descriptionProps,
-				...customDescriptionProps,
+				...mergeProps(descriptionProps, customDescriptionProps)(),
 				children: item
 			}, index)) : /* @__PURE__ */ jsx(DataListDescription, {
-				...descriptionProps,
-				...customDescriptionProps,
+				...mergeProps(descriptionProps, customDescriptionProps)(),
 				children: description
 			}),
 			omittedChildren

package/dist/esm/components/data-list/data-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-list.js","names":["col","customTerms","customDescriptions"],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm key={index} {...termProps} {...customTermProps}>\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...termProps} {...customTermProps}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...descriptionProps}\n              {...customDescriptionProps}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...descriptionProps}\n            {...customDescriptionProps}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,aACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,EAAE,EAAE,kBAAkB,WAAW,GAAG,WAAW;CACzE,MAAM,MAAM,cAAc;EACxB,IAAIA,QAAM;AAEV,MAAI,SAIF,CAFsB,aADA,iBAAiB,SAAS,EACE,aAAa,CAEjD,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiB,aADD,iBAAiB,MAAM,SAAS,EAGpD,cACA,oBACD;AAED,WAAM,KAAK,IAAIA,OAAK,eAAe,OAAO;IAC1C;MAEF,OAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,+BAAY,KAAK,GAAG,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,+BACQ,YAAY,GAClB,YAAY,SACZ;AAEN,WAAM,KAAK,IAAIA,OAAK,YAAY,iBAAiB;IACjD;AAGJ,SAAOA;IACN,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,mBAAmB,cAErB,MAAM,KAAK,OAAO,UAAU,oBAAC,gBAAyB,GAAI,SAAX,MAAoB,CAAC,EACtE,CAAC,MAAM,CACR;AASD,QACE,oBAAC;EAAiB,OATJ,eACP;GACL;GACA;GACD,GACD,CAAC,kBAAkB,UAAU,CAC9B;YAIG,oBAAC,OAAO;GAAG,OAAO;IAAE,SAAS;IAAK,GAAG;IAAO;GAAE,GAAI;aAC/C,YAAY;IACH;GACK;GAGvB,OACD,EAAE;AAqBH,MAAa,eAAe,aACzB,EACC,UACA,aACA,MACA,kBAAkB,wBAClB,WAAW,iBACX,GAAG,WACC;CACJ,MAAM,EAAE,kBAAkB,cAAc,qBAAqB;CAE7D,MAAM,CAAC,iBAAiB,aAAa,sBAAsB,cAAc;EACvE,MAAM,gBAAgB,iBAAiB,SAAS;AAEhD,iCAAY,cAAc,CAAE,QAAO,CAAC,SAAS;EAE7C,MAAMC,gBAAc,aAAa,eAAe,aAAa;EAC7D,MAAMC,uBAAqB,aACzB,eACA,oBACD;AAOD,SAAO;GANiB,aACtB,eACA,cACA,oBACD;GAEwBD;GAAaC;GAAmB;IACxD,CAAC,SAAS,CAAC;AAEd,QACE,qBAAC,OAAO;EAAI,GAAI;;GACb,4BAAS,YAAY,GACpB,yCACU,KAAK,GACf,KAAK,KAAK,MAAM,UACd,oBAAC;IAAyB,GAAI;IAAW,GAAI;cAC1C;MADgB,MAEJ,CACf,GAEF,oBAAC;IAAa,GAAI;IAAW,GAAI;cAC9B;KACY;GAGhB,4BAAS,mBAAmB,GAC3B,gDACU,YAAY,GACtB,YAAY,KAAK,MAAM,UACrB,oBAAC;IAEC,GAAI;IACJ,GAAI;cAEH;MAJI,MAKe,CACtB,GAEF,oBAAC;IACC,GAAI;IACJ,GAAI;cAEH;KACmB;GAGvB;;GACU;GAGjB,OACD,EAAE;AAIH,MAAa,eAAe,YAAqC,MAAM,OAAO,EAAE;AAIhF,MAAa,sBAAsB,YACjC,MACA,cACD,EAAE"}
+{"version":3,"file":"data-list.js","names":["col","customTerms","customDescriptions"],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm\n              key={index}\n              {...mergeProps(termProps, customTermProps)()}\n            >\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...mergeProps(descriptionProps, customDescriptionProps)()}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...mergeProps(descriptionProps, customDescriptionProps)()}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,aACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,EAAE,EAAE,kBAAkB,WAAW,GAAG,WAAW;CACzE,MAAM,MAAM,cAAc;EACxB,IAAIA,QAAM;AAEV,MAAI,SAIF,CAFsB,aADA,iBAAiB,SAAS,EACE,aAAa,CAEjD,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiB,aADD,iBAAiB,MAAM,SAAS,EAGpD,cACA,oBACD;AAED,WAAM,KAAK,IAAIA,OAAK,eAAe,OAAO;IAC1C;MAEF,OAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,+BAAY,KAAK,GAAG,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,+BACQ,YAAY,GAClB,YAAY,SACZ;AAEN,WAAM,KAAK,IAAIA,OAAK,YAAY,iBAAiB;IACjD;AAGJ,SAAOA;IACN,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,mBAAmB,cAErB,MAAM,KAAK,OAAO,UAAU,oBAAC,gBAAyB,GAAI,SAAX,MAAoB,CAAC,EACtE,CAAC,MAAM,CACR;AASD,QACE,oBAAC;EAAiB,OATJ,eACP;GACL;GACA;GACD,GACD,CAAC,kBAAkB,UAAU,CAC9B;YAIG,oBAAC,OAAO;GAAG,OAAO;IAAE,SAAS;IAAK,GAAG;IAAO;GAAE,GAAI;aAC/C,YAAY;IACH;GACK;GAGvB,OACD,EAAE;AAqBH,MAAa,eAAe,aACzB,EACC,UACA,aACA,MACA,kBAAkB,wBAClB,WAAW,iBACX,GAAG,WACC;CACJ,MAAM,EAAE,kBAAkB,cAAc,qBAAqB;CAE7D,MAAM,CAAC,iBAAiB,aAAa,sBAAsB,cAAc;EACvE,MAAM,gBAAgB,iBAAiB,SAAS;AAEhD,iCAAY,cAAc,CAAE,QAAO,CAAC,SAAS;EAE7C,MAAMC,gBAAc,aAAa,eAAe,aAAa;EAC7D,MAAMC,uBAAqB,aACzB,eACA,oBACD;AAOD,SAAO;GANiB,aACtB,eACA,cACA,oBACD;GAEwBD;GAAaC;GAAmB;IACxD,CAAC,SAAS,CAAC;AAEd,QACE,qBAAC,OAAO;EAAI,GAAI;;GACb,4BAAS,YAAY,GACpB,yCACU,KAAK,GACf,KAAK,KAAK,MAAM,UACd,oBAAC;IAEC,GAAI,WAAW,WAAW,gBAAgB,EAAE;cAE3C;MAHI,MAIQ,CACf,GAEF,oBAAC;IAAa,GAAI,WAAW,WAAW,gBAAgB,EAAE;cACvD;KACY;GAGhB,4BAAS,mBAAmB,GAC3B,gDACU,YAAY,GACtB,YAAY,KAAK,MAAM,UACrB,oBAAC;IAEC,GAAI,WAAW,kBAAkB,uBAAuB,EAAE;cAEzD;MAHI,MAIe,CACtB,GAEF,oBAAC;IACC,GAAI,WAAW,kBAAkB,uBAAuB,EAAE;cAEzD;KACmB;GAGvB;;GACU;GAGjB,OACD,EAAE;AAIH,MAAa,eAAe,YAAqC,MAAM,OAAO,EAAE;AAIhF,MAAa,sBAAsB,YACjC,MACA,cACD,EAAE"}

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

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

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

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

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

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

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

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