@yamada-ui/react 2.1.8-dev-20260409035719 → 2.2.0-dev-20260409110358

package/dist/esm/components/alpha-slider/alpha-slider.js

@@ -3,8 +3,8 @@
 import { utils_exports } from "../../utils/index.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
-import { alphaSliderStyle } from "./alpha-slider.style.js";
 import { useValue } from "../../hooks/use-value/index.js";
+import { alphaSliderStyle } from "./alpha-slider.style.js";
 import { checkersProps } from "../color-swatch/color-swatch.js";
 import "../color-swatch/index.js";
 import { HueSliderOverlay, HueSliderRoot, HueSliderThumb, HueSliderTrack } from "../hue-slider/hue-slider.js";

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

@@ -9,10 +9,10 @@ import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
 import { MinusIcon } from "../icon/icons/minus-icon.js";
 import { XIcon } from "../icon/icons/x-icon.js";
 import "../icon/index.js";
+import { PopoverContent, PopoverRoot, PopoverTrigger, usePopoverStyleProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { useGroupItemProps } from "../group/use-group.js";
 import "../group/index.js";
-import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
-import "../popover/index.js";
 import { useInputBorder } from "../input/use-input-border.js";
 import { useInputPropsContext } from "../input/input.js";
 import { InputElement } from "../input/input-element.js";
@@ -33,6 +33,7 @@ const { ComponentContext, PropsContext: AutocompletePropsContext, useComponentCo
 */
 const AutocompleteRoot = withProvider((props) => {
 	const [groupItemProps, { className, css, colorScheme, animationScheme = "block-start", children, clearable = true, clearIcon = /* @__PURE__ */ jsx(XIcon, {}), duration, emptyIcon, errorBorderColor, focusBorderColor, icon, items: itemsProp, contentProps, elementProps, emptyProps, groupProps, iconProps, inputProps, optionProps, rootProps, ...rest }] = useGroupItemProps(props);
+	const popoverStyleProps = usePopoverStyleProps(rest);
 	const { children: fieldChildren, descendants, items: computedItems, max, value, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, getSeparatorProps, popoverProps, onActiveDescendant, onClose, onSelect } = useAutocomplete({
 		items: useMemo(() => {
 			if (itemsProp) return itemsProp;
@@ -42,7 +43,8 @@ const AutocompleteRoot = withProvider((props) => {
 				Option: AutocompleteOption
 			});
 		}, [itemsProp, children]),
-		...rest
+		...rest,
+		...popoverStyleProps
 	});
 	const mergedPopoverProps = useMemo(() => ({
 		animationScheme,

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 { UseInputBorderProps } from \"../input\"\nimport type { PopupAnimationProps } 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 } 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    UseAutocompleteProps<Multiple>,\n    PopupAnimationProps,\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 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 })\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, 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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"}

package/dist/esm/components/chart/use-chart.js

@@ -10,10 +10,26 @@ const PLACEMENT_MAP = {
 		align: "right",
 		verticalAlign: "middle"
 	},
+	"center-end-end": {
+		align: "right",
+		verticalAlign: "bottom"
+	},
+	"center-end-start": {
+		align: "right",
+		verticalAlign: "top"
+	},
 	"center-start": {
 		align: "left",
 		verticalAlign: "middle"
 	},
+	"center-start-end": {
+		align: "left",
+		verticalAlign: "bottom"
+	},
+	"center-start-start": {
+		align: "left",
+		verticalAlign: "top"
+	},
 	end: {
 		align: "center",
 		verticalAlign: "bottom"

package/dist/esm/components/chart/use-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chart.js","names":["PLACEMENT_MAP: {\n  [key in Direction]: {\n    align: LegendProps[\"align\"]\n    verticalAlign: LegendProps[\"verticalAlign\"]\n  }\n}","createContext","getRootProps: PropGetter","getLegendProps: PropGetter<LegendProps>","getRootProps: PropGetter<TooltipProps<Y, M>>","getRootProps: PropGetter<\"text\">"],"sources":["../../../../src/components/chart/use-chart.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  LabelListProps,\n  LabelProps,\n  LegendProps,\n  TooltipProps,\n} from \"recharts\"\nimport type {\n  Direction,\n  HTMLProps,\n  PropGetter,\n  RequiredPropGetter,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport { useCallback, useState } from \"react\"\nimport { createContext, dataAttr, handlerAll, isUndefined } from \"../../utils\"\n\nconst PLACEMENT_MAP: {\n  [key in Direction]: {\n    align: LegendProps[\"align\"]\n    verticalAlign: LegendProps[\"verticalAlign\"]\n  }\n} = {\n  \"center-end\": { align: \"right\", verticalAlign: \"middle\" },\n  \"center-start\": { align: \"left\", verticalAlign: \"middle\" },\n  end: { align: \"center\", verticalAlign: \"bottom\" },\n  \"end-center\": { align: \"center\", verticalAlign: \"bottom\" },\n  \"end-end\": { align: \"right\", verticalAlign: \"bottom\" },\n  \"end-start\": { align: \"left\", verticalAlign: \"bottom\" },\n  start: { align: \"center\", verticalAlign: \"top\" },\n  \"start-center\": { align: \"center\", verticalAlign: \"top\" },\n  \"start-end\": { align: \"right\", verticalAlign: \"top\" },\n  \"start-start\": { align: \"left\", verticalAlign: \"top\" },\n}\n\ninterface ChartContext extends UseChartReturn {}\n\nconst [ChartContext, useChartContext] = createContext<ChartContext>({\n  name: \"ChartContext\",\n})\n\nexport { ChartContext, useChartContext }\n\nexport const useChart = () => {\n  const [highlightedDataKey, setHighlightedDataKey] = useState<\n    number | string | undefined\n  >(undefined)\n\n  const onHighlight = useCallback((dataKey?: number | string) => {\n    setHighlightedDataKey(dataKey)\n  }, [])\n\n  return { highlightedDataKey, onHighlight }\n}\n\nexport type UseChartReturn = ReturnType<typeof useChart>\n\nexport interface UseChartLegendProps extends Merge<\n  HTMLProps,\n  Pick<\n    LegendProps,\n    | \"align\"\n    | \"content\"\n    | \"formatter\"\n    | \"itemSorter\"\n    | \"layout\"\n    | \"onBBoxUpdate\"\n    | \"onClick\"\n    | \"onMouseEnter\"\n    | \"onMouseLeave\"\n    | \"payloadUniqBy\"\n    | \"portal\"\n    | \"verticalAlign\"\n  >\n> {\n  /**\n   * The placement of the legend.\n   *\n   * @default 'start-end'\n   */\n  placement?: Direction\n}\n\nexport const useChartLegend = ({\n  placement = \"start-end\",\n  align = PLACEMENT_MAP[placement].align,\n  content,\n  formatter,\n  itemSorter,\n  layout = placement.startsWith(\"center\") ? \"vertical\" : \"horizontal\",\n  payloadUniqBy,\n  portal,\n  verticalAlign = PLACEMENT_MAP[placement].verticalAlign,\n  onBBoxUpdate,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: UseChartLegendProps = {}) => {\n  const { highlightedDataKey, onHighlight } = useChartContext()\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getLegendProps: PropGetter<LegendProps> = useCallback(\n    (props) => ({\n      align,\n      content,\n      formatter,\n      itemSorter,\n      layout,\n      payloadUniqBy,\n      portal,\n      verticalAlign,\n      onBBoxUpdate,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      ...props,\n    }),\n    [\n      align,\n      content,\n      formatter,\n      itemSorter,\n      layout,\n      onBBoxUpdate,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      payloadUniqBy,\n      portal,\n      verticalAlign,\n    ],\n  )\n\n  const getLegendContentProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-align\": align,\n      \"data-orientation\": layout,\n      \"data-vertical-align\": verticalAlign,\n      ...props,\n    }),\n    [align, layout, verticalAlign],\n  )\n\n  const getLegendItemProps: RequiredPropGetter<\n    \"div\",\n    { dataKey?: number | string }\n  > = useCallback(\n    ({ dataKey, ...props }) => ({\n      ...props,\n      \"data-active\": dataAttr(\n        !isUndefined(highlightedDataKey) && highlightedDataKey === dataKey,\n      ),\n      \"data-inactive\": dataAttr(\n        !isUndefined(highlightedDataKey) && highlightedDataKey !== dataKey,\n      ),\n      onMouseEnter: handlerAll(props.onMouseEnter, () => onHighlight(dataKey)),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => onHighlight()),\n    }),\n    [highlightedDataKey, onHighlight],\n  )\n\n  return {\n    getLegendContentProps,\n    getLegendItemProps,\n    getLegendProps,\n    getRootProps,\n  }\n}\n\nexport type UseChartLegendReturn = ReturnType<typeof useChartLegend>\n\nexport interface UseChartTooltipProps<\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n> extends Merge<\n  HTMLProps,\n  Omit<\n    TooltipProps<Y, M>,\n    | \"contentStyle\"\n    | \"itemStyle\"\n    | \"labelClassName\"\n    | \"labelStyle\"\n    | \"separator\"\n    | \"wrapperClassName\"\n    | \"wrapperStyle\"\n  >\n> {}\n\nexport const useChartTooltip = <\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n>({\n  active,\n  allowEscapeViewBox,\n  animationDuration = 0,\n  animationEasing,\n  axisId,\n  content,\n  cursor,\n  defaultIndex,\n  filterNull,\n  formatter,\n  includeHidden,\n  isAnimationActive = (animationDuration || 0) > 0,\n  itemSorter,\n  labelFormatter,\n  offset,\n  payloadUniqBy,\n  portal,\n  position,\n  reverseDirection,\n  shared,\n  trigger,\n  useTranslate3d,\n  ...rest\n}: UseChartTooltipProps<Y, M> = {}) => {\n  const getRootProps: PropGetter<TooltipProps<Y, M>> = useCallback(\n    (props) => ({\n      active,\n      allowEscapeViewBox,\n      animationDuration,\n      animationEasing,\n      axisId,\n      content,\n      cursor,\n      defaultIndex,\n      filterNull,\n      formatter,\n      includeHidden,\n      isAnimationActive,\n      itemSorter,\n      labelFormatter,\n      offset,\n      payloadUniqBy,\n      portal,\n      position,\n      reverseDirection,\n      shared,\n      trigger,\n      useTranslate3d,\n      ...props,\n    }),\n    [\n      active,\n      allowEscapeViewBox,\n      animationDuration,\n      animationEasing,\n      axisId,\n      content,\n      cursor,\n      defaultIndex,\n      filterNull,\n      formatter,\n      includeHidden,\n      isAnimationActive,\n      itemSorter,\n      labelFormatter,\n      offset,\n      payloadUniqBy,\n      portal,\n      position,\n      reverseDirection,\n      shared,\n      trigger,\n      useTranslate3d,\n    ],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...props,\n    }),\n    [rest],\n  )\n\n  return { getContentProps, getRootProps }\n}\n\nexport type UseChartTooltipReturn<\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n> = ReturnType<typeof useChartTooltip<Y, M>>\n\nexport interface UseChartLabelListProps extends Merge<\n  HTMLProps<\"text\">,\n  Pick<\n    LabelListProps,\n    | \"angle\"\n    | \"clockWise\"\n    | \"content\"\n    | \"dataKey\"\n    | \"formatter\"\n    | \"offset\"\n    | \"position\"\n    | \"textBreakAll\"\n    | \"valueAccessor\"\n    | \"zIndex\"\n  >\n> {}\n\nexport const useChartLabelList = ({\n  angle,\n  clockWise,\n  content,\n  dataKey,\n  formatter,\n  offset = 12,\n  position = \"top\",\n  textBreakAll,\n  valueAccessor,\n  zIndex,\n  ...rest\n}: UseChartLabelListProps = {}) => {\n  const getRootProps: PropGetter<\"text\"> = useCallback(\n    (props) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getLabelListProps: PropGetter<LabelListProps> = useCallback(\n    (props) => ({\n      angle,\n      clockWise,\n      content,\n      dataKey,\n      fill: \"\",\n      formatter,\n      offset,\n      position,\n      textBreakAll,\n      valueAccessor,\n      zIndex,\n      ...props,\n    }),\n    [\n      angle,\n      clockWise,\n      content,\n      dataKey,\n      formatter,\n      offset,\n      position,\n      textBreakAll,\n      valueAccessor,\n      zIndex,\n    ],\n  )\n\n  return { getLabelListProps, getRootProps }\n}\n\nexport type UseChartLabelListReturn = ReturnType<typeof useChartLabelList>\n\nexport interface UseChartLabelProps extends Merge<\n  HTMLProps<\"text\">,\n  Pick<\n    LabelProps,\n    | \"angle\"\n    | \"children\"\n    | \"content\"\n    | \"formatter\"\n    | \"labelRef\"\n    | \"offset\"\n    | \"parentViewBox\"\n    | \"position\"\n    | \"value\"\n    | \"viewBox\"\n    | \"zIndex\"\n  >\n> {}\n\nexport const useChartLabel = ({\n  angle,\n  children,\n  content,\n  formatter,\n  labelRef,\n  offset,\n  parentViewBox,\n  position,\n  value,\n  viewBox,\n  zIndex,\n  ...rest\n}: UseChartLabelProps = {}) => {\n  const getRootProps: PropGetter<\"text\"> = useCallback(\n    (props) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getLabelProps: PropGetter<LabelProps> = useCallback(\n    (props) => ({\n      angle,\n      children,\n      content,\n      fill: \"\",\n      formatter,\n      labelRef,\n      offset,\n      parentViewBox,\n      position,\n      value,\n      viewBox,\n      zIndex,\n      ...props,\n    }),\n    [\n      angle,\n      children,\n      content,\n      formatter,\n      labelRef,\n      offset,\n      parentViewBox,\n      position,\n      value,\n      viewBox,\n      zIndex,\n    ],\n  )\n\n  return { getLabelProps, getRootProps }\n}\n\nexport type UseChartLabelReturn = ReturnType<typeof useChartLabel>\n"],"mappings":";;;;;;;AAkBA,MAAMA,gBAKF;CACF,cAAc;EAAE,OAAO;EAAS,eAAe;EAAU;CACzD,gBAAgB;EAAE,OAAO;EAAQ,eAAe;EAAU;CAC1D,KAAK;EAAE,OAAO;EAAU,eAAe;EAAU;CACjD,cAAc;EAAE,OAAO;EAAU,eAAe;EAAU;CAC1D,WAAW;EAAE,OAAO;EAAS,eAAe;EAAU;CACtD,aAAa;EAAE,OAAO;EAAQ,eAAe;EAAU;CACvD,OAAO;EAAE,OAAO;EAAU,eAAe;EAAO;CAChD,gBAAgB;EAAE,OAAO;EAAU,eAAe;EAAO;CACzD,aAAa;EAAE,OAAO;EAAS,eAAe;EAAO;CACrD,eAAe;EAAE,OAAO;EAAQ,eAAe;EAAO;CACvD;AAID,MAAM,CAAC,cAAc,mBAAmBC,gBAA4B,EAClE,MAAM,gBACP,CAAC;AAIF,MAAa,iBAAiB;CAC5B,MAAM,CAAC,oBAAoB,yBAAyB,SAElD,OAAU;AAMZ,QAAO;EAAE;EAAoB,aAJT,aAAa,YAA8B;AAC7D,yBAAsB,QAAQ;KAC7B,EAAE,CAAC;EAEoC;;AA+B5C,MAAa,kBAAkB,EAC7B,YAAY,aACZ,QAAQ,cAAc,WAAW,OACjC,SACA,WACA,YACA,SAAS,UAAU,WAAW,SAAS,GAAG,aAAa,cACvD,eACA,QACA,gBAAgB,cAAc,WAAW,eACzC,cACA,SACA,cACA,cACA,GAAG,SACoB,EAAE,KAAK;CAC9B,MAAM,EAAE,oBAAoB,gBAAgB,iBAAiB;CAE7D,MAAMC,eAA2B,aAC9B,WAAW;EAAE,GAAG;EAAM,GAAG;EAAO,GACjC,CAAC,KAAK,CACP;CAED,MAAMC,iBAA0C,aAC7C,WAAW;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AA8BD,QAAO;EACL,uBA7BwC,aACvC,WAAW;GACV,cAAc;GACd,oBAAoB;GACpB,uBAAuB;GACvB,GAAG;GACJ,GACD;GAAC;GAAO;GAAQ;GAAc,CAC/B;EAsBC,oBAjBE,aACD,EAAE,SAAS,GAAG,aAAa;GAC1B,GAAG;GACH,2CACE,gCAAa,mBAAmB,IAAI,uBAAuB,QAC5D;GACD,6CACE,gCAAa,mBAAmB,IAAI,uBAAuB,QAC5D;GACD,4CAAyB,MAAM,oBAAoB,YAAY,QAAQ,CAAC;GACxE,4CAAyB,MAAM,oBAAoB,aAAa,CAAC;GAClE,GACD,CAAC,oBAAoB,YAAY,CAClC;EAKC;EACA;EACD;;AAsBH,MAAa,mBAGX,EACA,QACA,oBACA,oBAAoB,GACpB,iBACA,QACA,SACA,QACA,cACA,YACA,WACA,eACA,qBAAqB,qBAAqB,KAAK,GAC/C,YACA,gBACA,QACA,eACA,QACA,UACA,kBACA,QACA,SACA,gBACA,GAAG,SAC2B,EAAE,KAAK;CACrC,MAAMC,eAA+C,aAClD,WAAW;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAUD,QAAO;EAAE,iBAR2B,aACjC,WAAW;GACV,GAAG;GACH,GAAG;GACJ,GACD,CAAC,KAAK,CACP;EAEyB;EAAc;;AAyB1C,MAAa,qBAAqB,EAChC,OACA,WACA,SACA,SACA,WACA,SAAS,IACT,WAAW,OACX,cACA,eACA,QACA,GAAG,SACuB,EAAE,KAAK;CACjC,MAAMC,eAAmC,aACtC,WAAW;EAAE,GAAG;EAAM,GAAG;EAAO,GACjC,CAAC,KAAK,CACP;AA+BD,QAAO;EAAE,mBA7B6C,aACnD,WAAW;GACV;GACA;GACA;GACA;GACA,MAAM;GACN;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAE2B;EAAc;;AAuB5C,MAAa,iBAAiB,EAC5B,OACA,UACA,SACA,WACA,UACA,QACA,eACA,UACA,OACA,SACA,QACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAMA,eAAmC,aACtC,WAAW;EAAE,GAAG;EAAM,GAAG;EAAO,GACjC,CAAC,KAAK,CACP;AAiCD,QAAO;EAAE,eA/BqC,aAC3C,WAAW;GACV;GACA;GACA;GACA,MAAM;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAEuB;EAAc"}
+{"version":3,"file":"use-chart.js","names":["PLACEMENT_MAP: {\n  [key in Direction]: {\n    align: LegendProps[\"align\"]\n    verticalAlign: LegendProps[\"verticalAlign\"]\n  }\n}","createContext","getRootProps: PropGetter","getLegendProps: PropGetter<LegendProps>","getRootProps: PropGetter<TooltipProps<Y, M>>","getRootProps: PropGetter<\"text\">"],"sources":["../../../../src/components/chart/use-chart.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  LabelListProps,\n  LabelProps,\n  LegendProps,\n  TooltipProps,\n} from \"recharts\"\nimport type {\n  Direction,\n  HTMLProps,\n  PropGetter,\n  RequiredPropGetter,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport { useCallback, useState } from \"react\"\nimport { createContext, dataAttr, handlerAll, isUndefined } from \"../../utils\"\n\nconst PLACEMENT_MAP: {\n  [key in Direction]: {\n    align: LegendProps[\"align\"]\n    verticalAlign: LegendProps[\"verticalAlign\"]\n  }\n} = {\n  \"center-end\": { align: \"right\", verticalAlign: \"middle\" },\n  \"center-end-end\": { align: \"right\", verticalAlign: \"bottom\" },\n  \"center-end-start\": { align: \"right\", verticalAlign: \"top\" },\n  \"center-start\": { align: \"left\", verticalAlign: \"middle\" },\n  \"center-start-end\": { align: \"left\", verticalAlign: \"bottom\" },\n  \"center-start-start\": { align: \"left\", verticalAlign: \"top\" },\n  end: { align: \"center\", verticalAlign: \"bottom\" },\n  \"end-center\": { align: \"center\", verticalAlign: \"bottom\" },\n  \"end-end\": { align: \"right\", verticalAlign: \"bottom\" },\n  \"end-start\": { align: \"left\", verticalAlign: \"bottom\" },\n  start: { align: \"center\", verticalAlign: \"top\" },\n  \"start-center\": { align: \"center\", verticalAlign: \"top\" },\n  \"start-end\": { align: \"right\", verticalAlign: \"top\" },\n  \"start-start\": { align: \"left\", verticalAlign: \"top\" },\n}\n\ninterface ChartContext extends UseChartReturn {}\n\nconst [ChartContext, useChartContext] = createContext<ChartContext>({\n  name: \"ChartContext\",\n})\n\nexport { ChartContext, useChartContext }\n\nexport const useChart = () => {\n  const [highlightedDataKey, setHighlightedDataKey] = useState<\n    number | string | undefined\n  >(undefined)\n\n  const onHighlight = useCallback((dataKey?: number | string) => {\n    setHighlightedDataKey(dataKey)\n  }, [])\n\n  return { highlightedDataKey, onHighlight }\n}\n\nexport type UseChartReturn = ReturnType<typeof useChart>\n\nexport interface UseChartLegendProps extends Merge<\n  HTMLProps,\n  Pick<\n    LegendProps,\n    | \"align\"\n    | \"content\"\n    | \"formatter\"\n    | \"itemSorter\"\n    | \"layout\"\n    | \"onBBoxUpdate\"\n    | \"onClick\"\n    | \"onMouseEnter\"\n    | \"onMouseLeave\"\n    | \"payloadUniqBy\"\n    | \"portal\"\n    | \"verticalAlign\"\n  >\n> {\n  /**\n   * The placement of the legend.\n   *\n   * @default 'start-end'\n   */\n  placement?: Direction\n}\n\nexport const useChartLegend = ({\n  placement = \"start-end\",\n  align = PLACEMENT_MAP[placement].align,\n  content,\n  formatter,\n  itemSorter,\n  layout = placement.startsWith(\"center\") ? \"vertical\" : \"horizontal\",\n  payloadUniqBy,\n  portal,\n  verticalAlign = PLACEMENT_MAP[placement].verticalAlign,\n  onBBoxUpdate,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: UseChartLegendProps = {}) => {\n  const { highlightedDataKey, onHighlight } = useChartContext()\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getLegendProps: PropGetter<LegendProps> = useCallback(\n    (props) => ({\n      align,\n      content,\n      formatter,\n      itemSorter,\n      layout,\n      payloadUniqBy,\n      portal,\n      verticalAlign,\n      onBBoxUpdate,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      ...props,\n    }),\n    [\n      align,\n      content,\n      formatter,\n      itemSorter,\n      layout,\n      onBBoxUpdate,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      payloadUniqBy,\n      portal,\n      verticalAlign,\n    ],\n  )\n\n  const getLegendContentProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-align\": align,\n      \"data-orientation\": layout,\n      \"data-vertical-align\": verticalAlign,\n      ...props,\n    }),\n    [align, layout, verticalAlign],\n  )\n\n  const getLegendItemProps: RequiredPropGetter<\n    \"div\",\n    { dataKey?: number | string }\n  > = useCallback(\n    ({ dataKey, ...props }) => ({\n      ...props,\n      \"data-active\": dataAttr(\n        !isUndefined(highlightedDataKey) && highlightedDataKey === dataKey,\n      ),\n      \"data-inactive\": dataAttr(\n        !isUndefined(highlightedDataKey) && highlightedDataKey !== dataKey,\n      ),\n      onMouseEnter: handlerAll(props.onMouseEnter, () => onHighlight(dataKey)),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => onHighlight()),\n    }),\n    [highlightedDataKey, onHighlight],\n  )\n\n  return {\n    getLegendContentProps,\n    getLegendItemProps,\n    getLegendProps,\n    getRootProps,\n  }\n}\n\nexport type UseChartLegendReturn = ReturnType<typeof useChartLegend>\n\nexport interface UseChartTooltipProps<\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n> extends Merge<\n  HTMLProps,\n  Omit<\n    TooltipProps<Y, M>,\n    | \"contentStyle\"\n    | \"itemStyle\"\n    | \"labelClassName\"\n    | \"labelStyle\"\n    | \"separator\"\n    | \"wrapperClassName\"\n    | \"wrapperStyle\"\n  >\n> {}\n\nexport const useChartTooltip = <\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n>({\n  active,\n  allowEscapeViewBox,\n  animationDuration = 0,\n  animationEasing,\n  axisId,\n  content,\n  cursor,\n  defaultIndex,\n  filterNull,\n  formatter,\n  includeHidden,\n  isAnimationActive = (animationDuration || 0) > 0,\n  itemSorter,\n  labelFormatter,\n  offset,\n  payloadUniqBy,\n  portal,\n  position,\n  reverseDirection,\n  shared,\n  trigger,\n  useTranslate3d,\n  ...rest\n}: UseChartTooltipProps<Y, M> = {}) => {\n  const getRootProps: PropGetter<TooltipProps<Y, M>> = useCallback(\n    (props) => ({\n      active,\n      allowEscapeViewBox,\n      animationDuration,\n      animationEasing,\n      axisId,\n      content,\n      cursor,\n      defaultIndex,\n      filterNull,\n      formatter,\n      includeHidden,\n      isAnimationActive,\n      itemSorter,\n      labelFormatter,\n      offset,\n      payloadUniqBy,\n      portal,\n      position,\n      reverseDirection,\n      shared,\n      trigger,\n      useTranslate3d,\n      ...props,\n    }),\n    [\n      active,\n      allowEscapeViewBox,\n      animationDuration,\n      animationEasing,\n      axisId,\n      content,\n      cursor,\n      defaultIndex,\n      filterNull,\n      formatter,\n      includeHidden,\n      isAnimationActive,\n      itemSorter,\n      labelFormatter,\n      offset,\n      payloadUniqBy,\n      portal,\n      position,\n      reverseDirection,\n      shared,\n      trigger,\n      useTranslate3d,\n    ],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...props,\n    }),\n    [rest],\n  )\n\n  return { getContentProps, getRootProps }\n}\n\nexport type UseChartTooltipReturn<\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n> = ReturnType<typeof useChartTooltip<Y, M>>\n\nexport interface UseChartLabelListProps extends Merge<\n  HTMLProps<\"text\">,\n  Pick<\n    LabelListProps,\n    | \"angle\"\n    | \"clockWise\"\n    | \"content\"\n    | \"dataKey\"\n    | \"formatter\"\n    | \"offset\"\n    | \"position\"\n    | \"textBreakAll\"\n    | \"valueAccessor\"\n    | \"zIndex\"\n  >\n> {}\n\nexport const useChartLabelList = ({\n  angle,\n  clockWise,\n  content,\n  dataKey,\n  formatter,\n  offset = 12,\n  position = \"top\",\n  textBreakAll,\n  valueAccessor,\n  zIndex,\n  ...rest\n}: UseChartLabelListProps = {}) => {\n  const getRootProps: PropGetter<\"text\"> = useCallback(\n    (props) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getLabelListProps: PropGetter<LabelListProps> = useCallback(\n    (props) => ({\n      angle,\n      clockWise,\n      content,\n      dataKey,\n      fill: \"\",\n      formatter,\n      offset,\n      position,\n      textBreakAll,\n      valueAccessor,\n      zIndex,\n      ...props,\n    }),\n    [\n      angle,\n      clockWise,\n      content,\n      dataKey,\n      formatter,\n      offset,\n      position,\n      textBreakAll,\n      valueAccessor,\n      zIndex,\n    ],\n  )\n\n  return { getLabelListProps, getRootProps }\n}\n\nexport type UseChartLabelListReturn = ReturnType<typeof useChartLabelList>\n\nexport interface UseChartLabelProps extends Merge<\n  HTMLProps<\"text\">,\n  Pick<\n    LabelProps,\n    | \"angle\"\n    | \"children\"\n    | \"content\"\n    | \"formatter\"\n    | \"labelRef\"\n    | \"offset\"\n    | \"parentViewBox\"\n    | \"position\"\n    | \"value\"\n    | \"viewBox\"\n    | \"zIndex\"\n  >\n> {}\n\nexport const useChartLabel = ({\n  angle,\n  children,\n  content,\n  formatter,\n  labelRef,\n  offset,\n  parentViewBox,\n  position,\n  value,\n  viewBox,\n  zIndex,\n  ...rest\n}: UseChartLabelProps = {}) => {\n  const getRootProps: PropGetter<\"text\"> = useCallback(\n    (props) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getLabelProps: PropGetter<LabelProps> = useCallback(\n    (props) => ({\n      angle,\n      children,\n      content,\n      fill: \"\",\n      formatter,\n      labelRef,\n      offset,\n      parentViewBox,\n      position,\n      value,\n      viewBox,\n      zIndex,\n      ...props,\n    }),\n    [\n      angle,\n      children,\n      content,\n      formatter,\n      labelRef,\n      offset,\n      parentViewBox,\n      position,\n      value,\n      viewBox,\n      zIndex,\n    ],\n  )\n\n  return { getLabelProps, getRootProps }\n}\n\nexport type UseChartLabelReturn = ReturnType<typeof useChartLabel>\n"],"mappings":";;;;;;;AAkBA,MAAMA,gBAKF;CACF,cAAc;EAAE,OAAO;EAAS,eAAe;EAAU;CACzD,kBAAkB;EAAE,OAAO;EAAS,eAAe;EAAU;CAC7D,oBAAoB;EAAE,OAAO;EAAS,eAAe;EAAO;CAC5D,gBAAgB;EAAE,OAAO;EAAQ,eAAe;EAAU;CAC1D,oBAAoB;EAAE,OAAO;EAAQ,eAAe;EAAU;CAC9D,sBAAsB;EAAE,OAAO;EAAQ,eAAe;EAAO;CAC7D,KAAK;EAAE,OAAO;EAAU,eAAe;EAAU;CACjD,cAAc;EAAE,OAAO;EAAU,eAAe;EAAU;CAC1D,WAAW;EAAE,OAAO;EAAS,eAAe;EAAU;CACtD,aAAa;EAAE,OAAO;EAAQ,eAAe;EAAU;CACvD,OAAO;EAAE,OAAO;EAAU,eAAe;EAAO;CAChD,gBAAgB;EAAE,OAAO;EAAU,eAAe;EAAO;CACzD,aAAa;EAAE,OAAO;EAAS,eAAe;EAAO;CACrD,eAAe;EAAE,OAAO;EAAQ,eAAe;EAAO;CACvD;AAID,MAAM,CAAC,cAAc,mBAAmBC,gBAA4B,EAClE,MAAM,gBACP,CAAC;AAIF,MAAa,iBAAiB;CAC5B,MAAM,CAAC,oBAAoB,yBAAyB,SAElD,OAAU;AAMZ,QAAO;EAAE;EAAoB,aAJT,aAAa,YAA8B;AAC7D,yBAAsB,QAAQ;KAC7B,EAAE,CAAC;EAEoC;;AA+B5C,MAAa,kBAAkB,EAC7B,YAAY,aACZ,QAAQ,cAAc,WAAW,OACjC,SACA,WACA,YACA,SAAS,UAAU,WAAW,SAAS,GAAG,aAAa,cACvD,eACA,QACA,gBAAgB,cAAc,WAAW,eACzC,cACA,SACA,cACA,cACA,GAAG,SACoB,EAAE,KAAK;CAC9B,MAAM,EAAE,oBAAoB,gBAAgB,iBAAiB;CAE7D,MAAMC,eAA2B,aAC9B,WAAW;EAAE,GAAG;EAAM,GAAG;EAAO,GACjC,CAAC,KAAK,CACP;CAED,MAAMC,iBAA0C,aAC7C,WAAW;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AA8BD,QAAO;EACL,uBA7BwC,aACvC,WAAW;GACV,cAAc;GACd,oBAAoB;GACpB,uBAAuB;GACvB,GAAG;GACJ,GACD;GAAC;GAAO;GAAQ;GAAc,CAC/B;EAsBC,oBAjBE,aACD,EAAE,SAAS,GAAG,aAAa;GAC1B,GAAG;GACH,2CACE,gCAAa,mBAAmB,IAAI,uBAAuB,QAC5D;GACD,6CACE,gCAAa,mBAAmB,IAAI,uBAAuB,QAC5D;GACD,4CAAyB,MAAM,oBAAoB,YAAY,QAAQ,CAAC;GACxE,4CAAyB,MAAM,oBAAoB,aAAa,CAAC;GAClE,GACD,CAAC,oBAAoB,YAAY,CAClC;EAKC;EACA;EACD;;AAsBH,MAAa,mBAGX,EACA,QACA,oBACA,oBAAoB,GACpB,iBACA,QACA,SACA,QACA,cACA,YACA,WACA,eACA,qBAAqB,qBAAqB,KAAK,GAC/C,YACA,gBACA,QACA,eACA,QACA,UACA,kBACA,QACA,SACA,gBACA,GAAG,SAC2B,EAAE,KAAK;CACrC,MAAMC,eAA+C,aAClD,WAAW;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAUD,QAAO;EAAE,iBAR2B,aACjC,WAAW;GACV,GAAG;GACH,GAAG;GACJ,GACD,CAAC,KAAK,CACP;EAEyB;EAAc;;AAyB1C,MAAa,qBAAqB,EAChC,OACA,WACA,SACA,SACA,WACA,SAAS,IACT,WAAW,OACX,cACA,eACA,QACA,GAAG,SACuB,EAAE,KAAK;CACjC,MAAMC,eAAmC,aACtC,WAAW;EAAE,GAAG;EAAM,GAAG;EAAO,GACjC,CAAC,KAAK,CACP;AA+BD,QAAO;EAAE,mBA7B6C,aACnD,WAAW;GACV;GACA;GACA;GACA;GACA,MAAM;GACN;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAE2B;EAAc;;AAuB5C,MAAa,iBAAiB,EAC5B,OACA,UACA,SACA,WACA,UACA,QACA,eACA,UACA,OACA,SACA,QACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAMA,eAAmC,aACtC,WAAW;EAAE,GAAG;EAAM,GAAG;EAAO,GACjC,CAAC,KAAK,CACP;AAiCD,QAAO;EAAE,eA/BqC,aAC3C,WAAW;GACV;GACA;GACA;GACA,MAAM;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAEuB;EAAc"}

package/dist/esm/components/color-picker/color-picker.js

@@ -5,12 +5,12 @@ import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { PipetteIcon } from "../icon/icons/pipette-icon.js";
 import "../icon/index.js";
+import { PopoverContent, PopoverRoot, PopoverTrigger, usePopoverStyleProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { ColorSwatch } from "../color-swatch/color-swatch.js";
 import "../color-swatch/index.js";
 import { useGroupItemProps } from "../group/use-group.js";
 import "../group/index.js";
-import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
-import "../popover/index.js";
 import { useInputBorder } from "../input/use-input-border.js";
 import { useInputPropsContext } from "../input/input.js";
 import { InputElement } from "../input/input-element.js";
@@ -32,7 +32,11 @@ const { ComponentContext, PropsContext: ColorPickerPropsContext, useComponentCon
 */
 const ColorPicker = withProvider((props) => {
 	const [groupItemProps, { className, css, colorScheme, size, animationScheme = "block-start", colorSwatches, colorSwatchGroupColumns, colorSwatchGroupLabel, duration, errorBorderColor, focusBorderColor, withColorSwatch = true, withEyeDropper = true, alphaSliderProps, colorSwatchGroupLabelProps, colorSwatchGroupProps, colorSwatchItemProps, colorSwatchProps, contentProps, elementProps, endElementProps, eyeDropperProps, fieldProps, hueSliderProps, inputProps, rootProps, saturationSliderProps, selectorProps, startElementProps, ...rest }] = useGroupItemProps(props);
-	const { value, getContentProps, getEyeDropperProps, getFieldProps, getInputProps, getRootProps, getSelectorProps, popoverProps } = useColorPicker(rest);
+	const popoverStyleProps = usePopoverStyleProps(rest);
+	const { value, getContentProps, getEyeDropperProps, getFieldProps, getInputProps, getRootProps, getSelectorProps, popoverProps } = useColorPicker({
+		...rest,
+		...popoverStyleProps
+	});
 	const mergedPopoverProps = useMemo(() => ({
 		animationScheme,
 		duration,

package/dist/esm/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","names":["Popover.Root","InputGroup.Root","InputGroup.Element","Popover.Trigger","ColorSelector.Root","Popover.Content"],"sources":["../../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type {\n  Direction,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { PopupAnimationProps } from \"../popover\"\nimport type { ColorPickerStyle } from \"./color-picker.style\"\nimport type {\n  UseColorPickerProps,\n  UseColorPickerReturn,\n} from \"./use-color-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { ColorSelector } from \"../color-selector\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { useGroupItemProps } from \"../group\"\nimport { PipetteIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover } from \"../popover\"\nimport { colorPickerStyle } from \"./color-picker.style\"\nimport { useColorPicker } from \"./use-color-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<ColorPickerProps, \"inputProps\">,\n    Pick<\n      UseColorPickerReturn,\n      \"getEyeDropperProps\" | \"getInputProps\" | \"value\"\n    > {}\n\nexport interface ColorPickerProps\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\">,\n    UseColorPickerProps,\n    PopupAnimationProps,\n    Pick<\n      ColorSelector.RootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupColumns\"\n      | \"colorSwatchGroupLabel\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n    >,\n    ThemeProps<ColorPickerStyle>,\n    UseInputBorderProps {\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Direction\n  /**\n   * If `true`, the color swatch component will be displayed.\n   *\n   * @default true\n   */\n  withColorSwatch?: boolean\n  /**\n   * If `true`, the eye dropper component will be displayed.\n   *\n   * @default true\n   */\n  withEyeDropper?: boolean\n  /**\n   * Props for the color swatch component.\n   */\n  colorSwatchProps?: ColorPickerColorSwatchProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: ColorPickerContentProps\n  /**\n   * The props for the input element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the end element.\n   */\n  endElementProps?: InputGroup.ElementProps\n  /**\n   * Props for the eye dropper component.\n   */\n  eyeDropperProps?: ColorPickerEyeDropperProps\n  /**\n   * The props for the field component.\n   */\n  fieldProps?: ColorPickerFieldProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n  /**\n   * Props for the selector component.\n   */\n  selectorProps?: ColorSelector.RootProps\n  /**\n   * The props for the start element.\n   */\n  startElementProps?: InputGroup.ElementProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorPickerPropsContext,\n  useComponentContext,\n  usePropsContext: useColorPickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorPickerProps, ColorPickerStyle, ComponentContext>(\n  \"color-picker\",\n  colorPickerStyle,\n)\n\nexport { ColorPickerPropsContext, useColorPickerPropsContext }\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see https://yamada-ui.com/docs/components/color-picker\n */\nexport const ColorPicker = withProvider<\"input\", ColorPickerProps, \"size\">(\n  (props) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        colorSwatches,\n        colorSwatchGroupColumns,\n        colorSwatchGroupLabel,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        withColorSwatch = true,\n        withEyeDropper = true,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        colorSwatchProps,\n        contentProps,\n        elementProps,\n        endElementProps,\n        eyeDropperProps,\n        fieldProps,\n        hueSliderProps,\n        inputProps,\n        rootProps,\n        saturationSliderProps,\n        selectorProps,\n        startElementProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const {\n      value,\n      getContentProps,\n      getEyeDropperProps,\n      getFieldProps,\n      getInputProps,\n      getRootProps,\n      getSelectorProps,\n      popoverProps,\n    } = useColorPicker(rest)\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const componentContext = useMemo(\n      () => ({ value, getEyeDropperProps, getInputProps, inputProps }),\n      [getEyeDropperProps, getInputProps, inputProps, value],\n    )\n\n    return (\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            {withColorSwatch ? (\n              <InputGroup.Element {...elementProps} {...startElementProps}>\n                <ColorPickerColorSwatch {...colorSwatchProps} />\n              </InputGroup.Element>\n            ) : null}\n\n            <Popover.Trigger>\n              <ColorPickerField\n                {...getFieldProps({ ...varProps, ...fieldProps })}\n              />\n            </Popover.Trigger>\n\n            {withEyeDropper ? (\n              <InputGroup.Element\n                clickable\n                {...elementProps}\n                {...endElementProps}\n              >\n                <ColorPickerEyeDropper\n                  {...getEyeDropperProps(eyeDropperProps)}\n                />\n              </InputGroup.Element>\n            ) : null}\n          </InputGroup.Root>\n\n          <ColorPickerContent\n            {...cast<ColorPickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <ColorSelector.Root\n              size={size}\n              {...getSelectorProps({\n                colorSwatches,\n                colorSwatchGroupColumns,\n                colorSwatchGroupLabel,\n                alphaSliderProps,\n                colorSwatchGroupLabelProps,\n                colorSwatchGroupProps,\n                colorSwatchItemProps,\n                hueSliderProps,\n                saturationSliderProps,\n                ...selectorProps,\n              })}\n            />\n          </ColorPickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface ColorPickerFieldProps extends HTMLStyledProps {}\n\nconst ColorPickerField = withContext<\"div\", ColorPickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, (props) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    children: <ColorPickerInput {...getInputProps(inputProps)} />,\n    ...props,\n  }\n})\n\ninterface ColorPickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst ColorPickerInput = withContext<\"input\", ColorPickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface ColorPickerColorSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerColorSwatch = withContext<\"div\", ColorPickerColorSwatchProps>(\n  ColorSwatch,\n  \"colorSwatch\",\n)(undefined, (props) => {\n  const { value } = useComponentContext()\n\n  return { variant: \"circle\", color: value, ...props }\n})\n\ninterface ColorPickerEyeDropperProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst ColorPickerEyeDropper = withContext<\"div\", ColorPickerEyeDropperProps>(\n  \"div\",\n  \"eyeDropper\",\n)(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\ninterface ColorPickerContentProps extends Popover.ContentProps {}\n\nconst ColorPickerContent = withContext<\"div\", ColorPickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoHA,MAAM,EACJ,kBACA,cAAc,yBACd,qBACA,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,iBACD;;;;;;AASD,MAAa,cAAc,cACxB,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,MACA,kBAAkB,eAClB,eACA,yBACA,uBACA,UACA,kBACA,kBACA,kBAAkB,MAClB,iBAAiB,MACjB,kBACA,4BACA,uBACA,sBACA,kBACA,cACA,cACA,iBACA,iBACA,YACA,gBACA,YACA,WACA,uBACA,eACA,mBACA,GAAG,UAEH,kBAAkB,MAAM;CAC5B,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACE,eAAe,KAAK;CACxB,MAAM,qBAAqB,eAClB;EACL;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAiB;EAAU;EAAa,CAC1C;CACD,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;AAMvE,QACE,oBAAC;EAAiB,OANK,eAChB;GAAE;GAAO;GAAoB;GAAe;GAAY,GAC/D;GAAC;GAAoB;GAAe;GAAY;GAAM,CACvD;YAIG,qBAACA;GAAa,GAAI;cAChB,qBAACC;IACY;IACN;IACQ;IACb,GAAI,aAAa;KAAE,GAAG;KAAgB,GAAG;KAAW,CAAC;;KAEpD,kBACC,oBAACC;MAAmB,GAAI;MAAc,GAAI;gBACxC,oBAAC,0BAAuB,GAAI,mBAAoB;OAC7B,GACnB;KAEJ,oBAACC,4BACC,oBAAC,oBACC,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;MAAY,CAAC,GACjD,GACc;KAEjB,iBACC,oBAACD;MACC;MACA,GAAI;MACJ,GAAI;gBAEJ,oBAAC,yBACC,GAAI,mBAAmB,gBAAgB,GACvC;OACiB,GACnB;;KACY,EAElB,oBAAC;IACC,2BACE,wCAAgC,aAAa,CAAC,CAC/C;cAED,oBAACE;KACO;KACN,GAAI,iBAAiB;MACnB;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,GAAG;MACJ,CAAC;MACF;KACiB;IACR;GACE;GAGvB,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE,UAAU;AAGX,QAAO;EAAE,GAFO,sBAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,mBAAmB,YACvB,OACA,QACD,CAAC,EAAE,wBAAwB,IAAI,GAAG,UAAU;CAC3C,MAAM,EAAE,eAAe,eAAe,qBAAqB;AAE3D,QAAO;EACL,UAAU,oBAAC,oBAAiB,GAAI,cAAc,WAAW,GAAI;EAC7D,GAAG;EACJ;EACD;AAIF,MAAM,mBAAmB,YACvB,SACA,QACD,EAAE;AAIH,MAAM,yBAAyB,YAC7B,aACA,cACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,UAAU,qBAAqB;AAEvC,QAAO;EAAE,SAAS;EAAU,OAAO;EAAO,GAAG;EAAO;EACpD;AAMF,MAAM,wBAAwB,YAC5B,OACA,aACD,CAAC,SAAY,EAAE,UAAU,MAAM,GAAG,WAAW;CAC5C,MAAM,EAAE,uBAAuB,qBAAqB;AAEpD,QAAO,mBAAmB;EACxB,UAAU,QAAQ,YAAY,oBAAC,gBAAc;EAC7C,GAAG;EACJ,CAAC;EACF;AAIF,MAAM,qBAAqB,YACzBC,gBACA,UACD,EAAE"}
+{"version":3,"file":"color-picker.js","names":["Popover.Root","InputGroup.Root","InputGroup.Element","Popover.Trigger","ColorSelector.Root","Popover.Content"],"sources":["../../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { ColorPickerStyle } from \"./color-picker.style\"\nimport type {\n  UseColorPickerProps,\n  UseColorPickerReturn,\n} from \"./use-color-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { ColorSelector } from \"../color-selector\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { useGroupItemProps } from \"../group\"\nimport { PipetteIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { colorPickerStyle } from \"./color-picker.style\"\nimport { useColorPicker } from \"./use-color-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<ColorPickerProps, \"inputProps\">,\n    Pick<\n      UseColorPickerReturn,\n      \"getEyeDropperProps\" | \"getInputProps\" | \"value\"\n    > {}\n\nexport interface ColorPickerProps\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\">,\n    Merge<UseColorPickerProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    Pick<\n      ColorSelector.RootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupColumns\"\n      | \"colorSwatchGroupLabel\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n    >,\n    ThemeProps<ColorPickerStyle>,\n    UseInputBorderProps {\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * If `true`, the color swatch component will be displayed.\n   *\n   * @default true\n   */\n  withColorSwatch?: boolean\n  /**\n   * If `true`, the eye dropper component will be displayed.\n   *\n   * @default true\n   */\n  withEyeDropper?: boolean\n  /**\n   * Props for the color swatch component.\n   */\n  colorSwatchProps?: ColorPickerColorSwatchProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: ColorPickerContentProps\n  /**\n   * The props for the input element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the end element.\n   */\n  endElementProps?: InputGroup.ElementProps\n  /**\n   * Props for the eye dropper component.\n   */\n  eyeDropperProps?: ColorPickerEyeDropperProps\n  /**\n   * The props for the field component.\n   */\n  fieldProps?: ColorPickerFieldProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n  /**\n   * Props for the selector component.\n   */\n  selectorProps?: ColorSelector.RootProps\n  /**\n   * The props for the start element.\n   */\n  startElementProps?: InputGroup.ElementProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorPickerPropsContext,\n  useComponentContext,\n  usePropsContext: useColorPickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorPickerProps, ColorPickerStyle, ComponentContext>(\n  \"color-picker\",\n  colorPickerStyle,\n)\n\nexport { ColorPickerPropsContext, useColorPickerPropsContext }\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see https://yamada-ui.com/docs/components/color-picker\n */\nexport const ColorPicker = withProvider<\"input\", ColorPickerProps, \"size\">(\n  (props) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        colorSwatches,\n        colorSwatchGroupColumns,\n        colorSwatchGroupLabel,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        withColorSwatch = true,\n        withEyeDropper = true,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        colorSwatchProps,\n        contentProps,\n        elementProps,\n        endElementProps,\n        eyeDropperProps,\n        fieldProps,\n        hueSliderProps,\n        inputProps,\n        rootProps,\n        saturationSliderProps,\n        selectorProps,\n        startElementProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      value,\n      getContentProps,\n      getEyeDropperProps,\n      getFieldProps,\n      getInputProps,\n      getRootProps,\n      getSelectorProps,\n      popoverProps,\n    } = useColorPicker({ ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const componentContext = useMemo(\n      () => ({ value, getEyeDropperProps, getInputProps, inputProps }),\n      [getEyeDropperProps, getInputProps, inputProps, value],\n    )\n\n    return (\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            {withColorSwatch ? (\n              <InputGroup.Element {...elementProps} {...startElementProps}>\n                <ColorPickerColorSwatch {...colorSwatchProps} />\n              </InputGroup.Element>\n            ) : null}\n\n            <Popover.Trigger>\n              <ColorPickerField\n                {...getFieldProps({ ...varProps, ...fieldProps })}\n              />\n            </Popover.Trigger>\n\n            {withEyeDropper ? (\n              <InputGroup.Element\n                clickable\n                {...elementProps}\n                {...endElementProps}\n              >\n                <ColorPickerEyeDropper\n                  {...getEyeDropperProps(eyeDropperProps)}\n                />\n              </InputGroup.Element>\n            ) : null}\n          </InputGroup.Root>\n\n          <ColorPickerContent\n            {...cast<ColorPickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <ColorSelector.Root\n              size={size}\n              {...getSelectorProps({\n                colorSwatches,\n                colorSwatchGroupColumns,\n                colorSwatchGroupLabel,\n                alphaSliderProps,\n                colorSwatchGroupLabelProps,\n                colorSwatchGroupProps,\n                colorSwatchItemProps,\n                hueSliderProps,\n                saturationSliderProps,\n                ...selectorProps,\n              })}\n            />\n          </ColorPickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface ColorPickerFieldProps extends HTMLStyledProps {}\n\nconst ColorPickerField = withContext<\"div\", ColorPickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, (props) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    children: <ColorPickerInput {...getInputProps(inputProps)} />,\n    ...props,\n  }\n})\n\ninterface ColorPickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst ColorPickerInput = withContext<\"input\", ColorPickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface ColorPickerColorSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerColorSwatch = withContext<\"div\", ColorPickerColorSwatchProps>(\n  ColorSwatch,\n  \"colorSwatch\",\n)(undefined, (props) => {\n  const { value } = useComponentContext()\n\n  return { variant: \"circle\", color: value, ...props }\n})\n\ninterface ColorPickerEyeDropperProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst ColorPickerEyeDropper = withContext<\"div\", ColorPickerEyeDropperProps>(\n  \"div\",\n  \"eyeDropper\",\n)(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\ninterface ColorPickerContentProps extends Popover.ContentProps {}\n\nconst ColorPickerContent = withContext<\"div\", ColorPickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,EACJ,kBACA,cAAc,yBACd,qBACA,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,iBACD;;;;;;AASD,MAAa,cAAc,cACxB,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,MACA,kBAAkB,eAClB,eACA,yBACA,uBACA,UACA,kBACA,kBACA,kBAAkB,MAClB,iBAAiB,MACjB,kBACA,4BACA,uBACA,sBACA,kBACA,cACA,cACA,iBACA,iBACA,YACA,gBACA,YACA,WACA,uBACA,eACA,mBACA,GAAG,UAEH,kBAAkB,MAAM;CAC5B,MAAM,oBAAoB,qBAAqB,KAAK;CACpD,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACE,eAAe;EAAE,GAAG;EAAM,GAAG;EAAmB,CAAC;CACrD,MAAM,qBAAqB,eAClB;EACL;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAiB;EAAU;EAAa,CAC1C;CACD,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;AAMvE,QACE,oBAAC;EAAiB,OANK,eAChB;GAAE;GAAO;GAAoB;GAAe;GAAY,GAC/D;GAAC;GAAoB;GAAe;GAAY;GAAM,CACvD;YAIG,qBAACA;GAAa,GAAI;cAChB,qBAACC;IACY;IACN;IACQ;IACb,GAAI,aAAa;KAAE,GAAG;KAAgB,GAAG;KAAW,CAAC;;KAEpD,kBACC,oBAACC;MAAmB,GAAI;MAAc,GAAI;gBACxC,oBAAC,0BAAuB,GAAI,mBAAoB;OAC7B,GACnB;KAEJ,oBAACC,4BACC,oBAAC,oBACC,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;MAAY,CAAC,GACjD,GACc;KAEjB,iBACC,oBAACD;MACC;MACA,GAAI;MACJ,GAAI;gBAEJ,oBAAC,yBACC,GAAI,mBAAmB,gBAAgB,GACvC;OACiB,GACnB;;KACY,EAElB,oBAAC;IACC,2BACE,wCAAgC,aAAa,CAAC,CAC/C;cAED,oBAACE;KACO;KACN,GAAI,iBAAiB;MACnB;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,GAAG;MACJ,CAAC;MACF;KACiB;IACR;GACE;GAGvB,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE,UAAU;AAGX,QAAO;EAAE,GAFO,sBAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,mBAAmB,YACvB,OACA,QACD,CAAC,EAAE,wBAAwB,IAAI,GAAG,UAAU;CAC3C,MAAM,EAAE,eAAe,eAAe,qBAAqB;AAE3D,QAAO;EACL,UAAU,oBAAC,oBAAiB,GAAI,cAAc,WAAW,GAAI;EAC7D,GAAG;EACJ;EACD;AAIF,MAAM,mBAAmB,YACvB,SACA,QACD,EAAE;AAIH,MAAM,yBAAyB,YAC7B,aACA,cACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,UAAU,qBAAqB;AAEvC,QAAO;EAAE,SAAS;EAAU,OAAO;EAAO,GAAG;EAAO;EACpD;AAMF,MAAM,wBAAwB,YAC5B,OACA,aACD,CAAC,SAAY,EAAE,UAAU,MAAM,GAAG,WAAW;CAC5C,MAAM,EAAE,uBAAuB,qBAAqB;AAEpD,QAAO,mBAAmB;EACxB,UAAU,QAAQ,YAAY,oBAAC,gBAAc;EAC7C,GAAG;EACJ,CAAC;EACF;AAIF,MAAM,qBAAqB,YACzBC,gBACA,UACD,EAAE"}

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

@@ -15,13 +15,13 @@ import { useCallback, useEffect, useRef } from "react";
 //#region src/components/color-picker/use-color-picker.ts
 const useColorPicker = (props) => {
 	const { t } = useI18n("colorPicker");
-	const { props: { id, ref, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyProp, allowInput = true, closeOnChange = false, defaultValue, disabled, fallbackValue = "#FFFFFF", format: formatProp, formatInput, openOnChange = true, openOnClick = true, openOnFocus = true, pattern, placeholder, readOnly, required, value: valueProp, onChange: onChangeProp, onInputChange: onInputChangeProp, ...rest }, ariaProps, dataProps, eventProps } = useFieldProps(props);
+	const { props: { id, ref, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyProp, allowInput = true, closeOnChange = false, defaultValue, disabled, fallbackValue = "#FFFFFF", format: formatProp, formatInput, openOnChange = true, openOnClick = true, openOnFocus = true, pattern, placeholder, placement = "end-start", readOnly, required, value: valueProp, onChange: onChangeProp, onInputChange: onInputChangeProp, ...rest }, ariaProps, dataProps, eventProps } = useFieldProps(props);
 	const { interactive, open, getContentProps: getComboboxContentProps, getTriggerProps, popoverProps, onClose, onOpen } = useCombobox({
 		disabled,
 		openOnClick: false,
 		openOnEnter: !allowInput,
 		openOnSpace: !allowInput,
-		placement: "end-start",
+		placement,
 		readOnly,
 		transferFocus: false,
 		...ariaProps,

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

@@ -1 +1 @@
-{"version":3,"file":"use-color-picker.js","names":["value","getRootProps: PropGetter","props","getFieldProps: PropGetter","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  contains,\n  convertColor,\n  cx,\n  focusTransfer,\n  handlerAll,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n  extends\n    Omit<\n      UseComboboxProps,\n      | \"closeOnSelect\"\n      | \"initialFocusValue\"\n      | \"onChange\"\n      | \"ref\"\n      | \"selectFocusRef\"\n      | \"selectOnSpace\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, the color picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the color picker.\n   */\n  defaultValue?: string\n  /**\n   * The fallback value of the color picker.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color picker.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the color picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the color picker will be opened when the input is focused.\n   *\n   * @default false\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for color picker.\n   */\n  placeholder?: string\n  /**\n   * The value of the color picker.\n   */\n  value?: string\n  /**\n   * The function to format the input value.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n  const { t } = useI18n(\"colorPicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      allowInput = true,\n      closeOnChange = false,\n      defaultValue,\n      disabled,\n      fallbackValue = \"#FFFFFF\",\n      format: formatProp,\n      formatInput,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      pattern,\n      placeholder,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onInputChange: onInputChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement: \"end-start\",\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const format =\n    formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n  const alpha = format.endsWith(\"a\")\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    focusByClickRef.current = true\n\n    if (allowInput) inputRef.current?.focus()\n\n    if (openOnClick) onOpen()\n  }, [allowInput, interactive, onOpen, openOnClick])\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      ) {\n        ev.preventDefault()\n      } else {\n        setValue((prev) => {\n          if (!prev) return prev\n\n          let value = convertColor(prev)(format)\n\n          if (!value) return prev\n\n          if (formatInput) value = formatInput(value)\n\n          if (pattern) value = value.replace(pattern, \"\")\n\n          return value\n        })\n      }\n    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) {\n        onClose()\n      } else if (runIfFn(openOnChange, ev)) {\n        onOpen()\n      }\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":";;;;;;;;;;;;;;;AAmHA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,MAAM,QAAQ,cAAc;CACpC,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,cAAc,WACd,mBAAmB,oBACnB,aAAa,MACb,gBAAgB,OAChB,cACA,UACA,gBAAgB,WAChB,QAAQ,YACR,aACA,eAAe,MACf,cAAc,MACd,cAAc,MACd,SACA,aACA,UACA,UACA,OAAO,WACP,UAAU,cACV,eAAe,mBACf,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,EACJ,aACA,MACA,iBAAiB,yBACjB,iBACA,cACA,SACA,WACE,YAAY;EACd;EACA,aAAa;EACb,aAAa,CAAC;EACd,aAAa,CAAC;EACd,WAAW;EACX;EACA,eAAe;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACJ,CAAC;CACF,MAAM,SACJ,4CAAyB,aAAa,gBAAgB,cAAc;CACtE,MAAM,QAAQ,OAAO,SAAS,IAAI;CAClC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,kBAAkB,OAAgB,MAAM;CAC9C,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,EAAE,WAAW,qBAAqB,QAAQ,qBAC9C,eAAe;CAEjB,MAAM,UAAU,kBAAkB;AAChC,MAAI,CAAC,YAAa;AAElB,kBAAgB,UAAU;AAE1B,MAAI,WAAY,UAAS,SAAS,OAAO;AAEzC,MAAI,YAAa,SAAQ;IACxB;EAAC;EAAY;EAAa;EAAQ;EAAY,CAAC;CAElD,MAAM,cAAc,aACjB,OAAsD;AACrD,MAAI,CAAC,YAAa;AAElB,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,YAAY,CACd;CAED,MAAM,eAAe,kBAAkB;AACrC,MAAI,WAAY;AAEhB,MAAI,YAAa,SAAQ;AAEzB,kBAAgB,UAAU;IACzB;EAAC;EAAY;EAAQ;EAAY,CAAC;CAErC,MAAM,eAAe,aAClB,OAAqC;AACpC,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;AAEpB,MAAI,eAAe,CAAC,gBAAgB,QAAS,SAAQ;AAErD,kBAAgB,UAAU;IAE5B,CAAC,QAAQ,YAAY,CACtB;CAED,MAAM,SAAS,aACZ,OAAqC;AACpC,kCACW,SAAS,SAAS,GAAG,cAAc,gCACnC,WAAW,SAAS,GAAG,cAAc,CAE9C,IAAG,gBAAgB;MAEnB,WAAU,SAAS;AACjB,OAAI,CAAC,KAAM,QAAO;GAElB,IAAIA,0CAAqB,KAAK,CAAC,OAAO;AAEtC,OAAI,CAACA,QAAO,QAAO;AAEnB,OAAI,YAAa,WAAQ,YAAYA,QAAM;AAE3C,OAAI,QAAS,WAAQA,QAAM,QAAQ,SAAS,GAAG;AAE/C,UAAOA;IACP;IAGN;EAAC;EAAQ;EAAa;EAAS;EAAS,CACzC;CAED,MAAM,gBAAgB,aACnB,OAAsC;AACrC,MAAI,CAAC,WAAY;AAEjB,sBAAoB,GAAG;AAEvB,iCAAY,eAAe,GAAG,CAC5B,UAAS;sCACQ,cAAc,GAAG,CAClC,SAAQ;EAGV,IAAI,aAAa,GAAG,OAAO;AAE3B,MAAI,YAAa,cAAa,YAAY,WAAW;AAErD,MAAI,QAAS,cAAa,WAAW,QAAQ,SAAS,GAAG;AAEzD,WAAS,WAAW;IAEtB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,oBAAoB,YAAY,YAAY;AAChD,MAAI,CAAC,YAAa;EAElB,MAAM,SAAS,MAAM,kBAAkB;AAEvC,MAAI,QAAQ,QAAS,UAAS,OAAO,QAAQ;IAC5C;EAAC;EAAa;EAAkB;EAAS,CAAC;AAE7C,iBAAgB;AACd,MAAI,CAAC,KAAM;AAEX,0CACE,WAAW,SACX,aAAa,SAAS,UAAU,SAAS,QAC1C;IACA,CAAC,YAAY,KAAK,CAAC;CAEtB,MAAMC,eAA2B,aAC9B,aAAW;EACV,GAAG;EACH,GAAGC;EACJ,GACD,CAAC,UAAU,CACZ;CAED,MAAMC,gBAA4B,aAC/B,EAAE,YAAK,GAAGD,YAAU,EAAE,KACrB,gBAAgB;EACd,KAAK,UAAUE,OAAK,SAAS;EAC7B,iBAAiB;EACjB,UAAU,CAAC,aAAa,IAAI;EAC5B,GAAGF;EACH,uCAAoBA,QAAM,SAAS,QAAQ;EAC3C,uCAAoBA,QAAM,SAAS,aAAa;EAChD,2CAAwBA,QAAM,aAAa,YAAY;EACxD,CAAC,EAEJ;EAAC;EAAY;EAAiB;EAAS;EAAc;EAAY,CAClE;CAED,MAAMG,gBAAqC,aACxC,EAAE,mBAAmB,gBAAgB,GAAGH,YAAU,EAAE,MAAM;EACzD;EACA,KAAK,UAAUA,QAAM,KAAK,KAAK,SAAS;EACxC;EACA,OAAO;GACL,GAAI,CAAC,aAAa,EAAE,eAAe,QAAQ,GAAG,EAAE;GAChD,GAAGA,QAAM;GACV;EACD,cAAc;EACd,yCAAsB,gBAAgB,mBAAmB;EACzD,cAAc;EACd;EACA;EACA;EACA;EACA,UAAU,aAAa,IAAI;EAC3B;EACA,GAAG;EACH,GAAGA;EACH,sCAAmBA,QAAM,QAAQ,OAAO;EACxC,wCAAqBA,QAAM,UAAU,cAAc;EACnD,uCAAoBA,QAAM,SAAS,aAAa;EAChD,2CAAwBA,QAAM,aAAa,YAAY;EACxD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAMI,qBAAiC,aACpC,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,6CAA0B,CAAC,YAAY;EACvC,cAAc,EAAE,eAAe;EAC/B,QAAQ,CAAC;EACT,MAAM;EACN,UAAU,cAAc,IAAI;EAC5B,GAAGJ;EACH,uCAAoBA,QAAM,SAAS,kBAAkB;EACrD,yCAAsBA,QAAM,YAAY,OACtC,aAAa,IAAI;GACf,OAAO;GACP,OAAO;GACR,CAAC,CACH;EACF,GACD;EAAC;EAAW;EAAa;EAAmB;EAAqB;EAAE,CACpE;AAyBD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,iBA9BkC,aACjC,EAAE,YAAK,GAAGA,YAAU,EAAE,KACrB,wBAAwB;GACtB,KAAK,UAAUE,OAAK,WAAW;GAC/B,MAAM;GACN,GAAGF;GACJ,CAAC,EACJ,CAAC,wBAAwB,CAC1B;EAuBC;EACA;EACA;EACA;EACA,kBAzB0D,aACzD,UAAQ,EAAE,MAAM;GACf;GACA;GACA;GACA;GACA;GACA,GAAGA;GACH,wCAAqBA,QAAM,UAAU,SAAS;GAC/C,GACD;GAAC;GAAU;GAAe;GAAQ;GAAU;GAAO;GAAS,CAC7D;EAeC;EACA;EACA;EACD"}
+{"version":3,"file":"use-color-picker.js","names":["value","getRootProps: PropGetter","props","getFieldProps: PropGetter","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  contains,\n  convertColor,\n  cx,\n  focusTransfer,\n  handlerAll,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n  extends\n    Omit<\n      UseComboboxProps,\n      | \"closeOnSelect\"\n      | \"initialFocusValue\"\n      | \"onChange\"\n      | \"ref\"\n      | \"selectFocusRef\"\n      | \"selectOnSpace\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, the color picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the color picker.\n   */\n  defaultValue?: string\n  /**\n   * The fallback value of the color picker.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color picker.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the color picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the color picker will be opened when the input is focused.\n   *\n   * @default false\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for color picker.\n   */\n  placeholder?: string\n  /**\n   * The value of the color picker.\n   */\n  value?: string\n  /**\n   * The function to format the input value.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n  const { t } = useI18n(\"colorPicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      allowInput = true,\n      closeOnChange = false,\n      defaultValue,\n      disabled,\n      fallbackValue = \"#FFFFFF\",\n      format: formatProp,\n      formatInput,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      pattern,\n      placeholder,\n      placement = \"end-start\",\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onInputChange: onInputChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement,\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const format =\n    formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n  const alpha = format.endsWith(\"a\")\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    focusByClickRef.current = true\n\n    if (allowInput) inputRef.current?.focus()\n\n    if (openOnClick) onOpen()\n  }, [allowInput, interactive, onOpen, openOnClick])\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      ) {\n        ev.preventDefault()\n      } else {\n        setValue((prev) => {\n          if (!prev) return prev\n\n          let value = convertColor(prev)(format)\n\n          if (!value) return prev\n\n          if (formatInput) value = formatInput(value)\n\n          if (pattern) value = value.replace(pattern, \"\")\n\n          return value\n        })\n      }\n    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) {\n        onClose()\n      } else if (runIfFn(openOnChange, ev)) {\n        onOpen()\n      }\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}

package/dist/esm/components/color-swatch/color-swatch-group.js

@@ -1,6 +1,6 @@
-import { ColorSwatch } from "./color-swatch.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import "../../providers/i18n-provider/index.js";
+import { ColorSwatch } from "./color-swatch.js";
 import { Grid } from "../grid/grid.js";
 import "../grid/index.js";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/date-picker/date-picker.js

@@ -8,10 +8,10 @@ import "../../core/index.js";
 import { CalendarIcon } from "../icon/icons/calendar-icon.js";
 import { XIcon } from "../icon/icons/x-icon.js";
 import "../icon/index.js";
+import { PopoverContent, PopoverRoot, PopoverTrigger, usePopoverStyleProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { useGroupItemProps } from "../group/use-group.js";
 import "../group/index.js";
-import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
-import "../popover/index.js";
 import { useInputBorder } from "../input/use-input-border.js";
 import { useInputPropsContext } from "../input/input.js";
 import { InputElement } from "../input/input-element.js";
@@ -34,7 +34,11 @@ const { ComponentContext, PropsContext: DatePickerPropsContext, useComponentCont
 */
 const DatePicker = withProvider((props) => {
 	const [groupItemProps, { className, css, colorScheme, size, animationScheme = "block-start", children, clearable = true, clearIcon = /* @__PURE__ */ jsx(XIcon, {}), duration, errorBorderColor, focusBorderColor, icon, calendarProps, contentProps, elementProps, iconProps, inputProps, rootProps, ...rest }] = useGroupItemProps(props);
-	const { children: fieldChildren, range, separator, value, getCalendarProps, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, popoverProps } = useDatePicker(rest);
+	const popoverStyleProps = usePopoverStyleProps(rest);
+	const { children: fieldChildren, range, separator, value, getCalendarProps, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, popoverProps } = useDatePicker({
+		...rest,
+		...popoverStyleProps
+	});
 	const mergedPopoverProps = useMemo(() => ({
 		animationScheme,
 		duration,

package/dist/esm/components/date-picker/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Calendar.Root","Popover.Content"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  Direction,\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { PopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n    Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    UseDatePickerProps<Multiple, Range>,\n    PopupAnimationProps,\n    ThemeProps<DatePickerStyle>,\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 date picker.\n   */\n  icon?: ReactNode\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Direction\n  /**\n   * The size of the calendar component.\n   */\n  calendarProps?: Calendar.RootProps<Multiple, Range>\n  /**\n   * Props for content element.\n   */\n  contentProps?: DatePickerContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: DatePickerIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DatePickerPropsContext,\n  useComponentContext,\n  usePropsContext: useDatePickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n  \"date-picker\",\n  datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        calendarProps,\n        contentProps,\n        elementProps,\n        iconProps,\n        inputProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const {\n      children: fieldChildren,\n      range,\n      separator,\n      value,\n      getCalendarProps,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      popoverProps,\n    } = useDatePicker(rest)\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n      () => ({ contentProps: { portalProps: { disabled: true } } }),\n      [],\n    )\n    const componentContext = useMemo(\n      () => ({ range, separator, getInputProps, inputProps }),\n      [getInputProps, inputProps, range, separator],\n    )\n    const hasValue = isArray(value)\n      ? !!value.length\n      : isObject(value) && !isDate(value)\n        ? !!value.end || !!value.start\n        : !!value\n\n    return (\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              <DatePickerField {...getFieldProps(varProps)}>\n                {fieldChildren}\n              </DatePickerField>\n            </Popover.Trigger>\n\n            <InputGroup.Element\n              {...{ clickable: clearable && hasValue, ...elementProps }}\n            >\n              {clearable && hasValue ? (\n                <DatePickerIcon\n                  icon={clearIcon}\n                  {...getClearIconProps(iconProps)}\n                />\n              ) : (\n                <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n              )}\n            </InputGroup.Element>\n          </InputGroup.Root>\n\n          <DatePickerContent\n            {...cast<DatePickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <Calendar.Root\n              colorScheme={colorScheme}\n              size={size}\n              fixed={false}\n              selectProps={selectProps}\n              {...getCalendarProps(calendarProps)}\n            >\n              {children}\n            </Calendar.Root>\n          </DatePickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n}) as GenericsComponent<{\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { range, separator, getInputProps, inputProps } = useComponentContext()\n  const computedChildren = useMemo(() => {\n    if (range) {\n      return (\n        <>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"start\", ...inputProps })}\n          />\n          <DatePickerSeparator>{separator}</DatePickerSeparator>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"end\", ...inputProps })}\n          />\n        </>\n      )\n    } else {\n      return (\n        <>\n          {children}\n          <DatePickerInput {...getInputProps(inputProps)} />\n        </>\n      )\n    }\n  }, [children, getInputProps, inputProps, range, separator])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n  ({ ref, placeholder, value, ...rest }) => {\n    const { ref: inputRef, text } = useFieldSizing({\n      value: value?.toString() || placeholder,\n    })\n\n    return (\n      <>\n        {text}\n\n        <styled.input\n          ref={mergeRefs(ref, inputRef)}\n          placeholder={placeholder}\n          value={value}\n          {...rest}\n        />\n      </>\n    )\n  },\n  [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n  \"span\",\n  \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <CalendarIcon />,\n    ...rest,\n  }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,MAAM,EACJ,kBACA,cAAc,wBACd,qBACA,iBAAiB,2BACjB,aACA,iBACE,oBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,cAEtB,UACG;CACH,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,MACA,kBAAkB,eAClB,UACA,YAAY,MACZ,YAAY,oBAAC,UAAQ,EACrB,UACA,kBACA,kBACA,MACA,eACA,cACA,cACA,WACA,YACA,WACA,GAAG,UAEH,kBAAkB,MAAM;CAC5B,MAAM,EACJ,UAAU,eACV,OACA,WACA,OACA,kBACA,mBACA,iBACA,eACA,cACA,eACA,cACA,iBACE,cAAc,KAAK;CACvB,MAAM,qBAAqB,eAClB;EACL;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAiB;EAAU;EAAa,CAC1C;CACD,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,cAAc,eACX,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,MAAM,EAAE,EAAE,GAC5D,EAAE,CACH;CACD,MAAM,mBAAmB,eAChB;EAAE;EAAO;EAAW;EAAe;EAAY,GACtD;EAAC;EAAe;EAAY;EAAO;EAAU,CAC9C;CACD,MAAM,sCAAmB,MAAM,GAC3B,CAAC,CAAC,MAAM,qCACC,MAAM,IAAI,2BAAQ,MAAM,GAC/B,CAAC,CAAC,MAAM,OAAO,CAAC,CAAC,MAAM,QACvB,CAAC,CAAC;AAER,QACE,oBAAC;EAAiB,OAAO;YACvB,qBAACA;GAAa,GAAI;cAChB,qBAACC;IACY;IACN;IACQ;IACb,GAAI,aAAa;KAAE,GAAG;KAAgB,GAAG;KAAW,CAAC;eAErD,oBAACC,4BACC,oBAAC;KAAgB,GAAI,cAAc,SAAS;eACzC;MACe,GACF,EAElB,oBAACC;KACO,WAAW,aAAa;KAAU,GAAG;eAE1C,aAAa,WACZ,oBAAC;MACC,MAAM;MACN,GAAI,kBAAkB,UAAU;OAChC,GAEF,oBAAC;MAAqB;MAAM,GAAI,aAAa,UAAU;OAAI;MAE1C;KACL,EAElB,oBAAC;IACC,2BACE,wCAAgC,aAAa,CAAC,CAC/C;cAED,oBAACC;KACc;KACP;KACN,OAAO;KACM;KACb,GAAI,iBAAiB,cAAc;KAElC;MACa;KACE;IACP;GACE;GAGvB,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE,UAAU;AAGX,QAAO;EAAE,GAFO,sBAAsB;EAEjB,GAAG;EAAO;EAC/B;AAQF,MAAM,kBAAkB,YACtB,OACA,QACD,CAAC,EAAE,wBAAwB,IAAI,GAAG,EAAE,UAAU,GAAG,WAAW;CAC3D,MAAM,EAAE,OAAO,WAAW,eAAe,eAAe,qBAAqB;CAC7E,MAAM,mBAAmB,cAAc;AACrC,MAAI,MACF,QACE;GACE,oBAAC,yBACC,GAAI,cAAc;IAAE,OAAO;IAAS,GAAG;IAAY,CAAC,GACpD;GACF,oBAAC,iCAAqB,YAAgC;GACtD,oBAAC,yBACC,GAAI,cAAc;IAAE,OAAO;IAAO,GAAG;IAAY,CAAC,GAClD;MACD;MAGL,QACE,8CACG,UACD,oBAAC,mBAAgB,GAAI,cAAc,WAAW,GAAI,IACjD;IAGN;EAAC;EAAU;EAAe;EAAY;EAAO;EAAU,CAAC;AAE3D,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAM,kBAAkB,YACtB,SACA,QACD,EAAE;AAIH,MAAM,wBAAwB,aAC3B,EAAE,KAAK,aAAa,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,KAAK,UAAU,SAAS,eAAe,EAC7C,OAAO,OAAO,UAAU,IAAI,aAC7B,CAAC;AAEF,QACE,8CACG,MAED,oBAAC,OAAO;EACN,KAAK,UAAU,KAAK,SAAS;EAChB;EACN;EACP,GAAI;GACJ,IACD;GAGP,CAAC,SAAS,SAAS,CACpB,EAAE;AAIH,MAAM,sBAAsB,YAC1B,QACA,YACD,EAAE;AAMH,MAAM,iBAAiB,YAAwC,OAAO,OAAO,CAC3E,SACC,EAAE,UAAU,MAAM,GAAG,YAAY;CAChC,UAAU,QAAQ,YAAY,oBAAC,iBAAe;CAC9C,GAAG;CACJ,EACF;AAID,MAAM,oBAAoB,YACxBC,gBACA,UACD,EAAE"}
+{"version":3,"file":"date-picker.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Calendar.Root","Popover.Content"],"sources":["../../../../src/components/date-picker/date-picker.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 { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n    Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseDatePickerProps<Multiple, Range>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<DatePickerStyle>,\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 date picker.\n   */\n  icon?: ReactNode\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * The size of the calendar component.\n   */\n  calendarProps?: Calendar.RootProps<Multiple, Range>\n  /**\n   * Props for content element.\n   */\n  contentProps?: DatePickerContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: DatePickerIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DatePickerPropsContext,\n  useComponentContext,\n  usePropsContext: useDatePickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n  \"date-picker\",\n  datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        calendarProps,\n        contentProps,\n        elementProps,\n        iconProps,\n        inputProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      children: fieldChildren,\n      range,\n      separator,\n      value,\n      getCalendarProps,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      popoverProps,\n    } = useDatePicker({ ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n      () => ({ contentProps: { portalProps: { disabled: true } } }),\n      [],\n    )\n    const componentContext = useMemo(\n      () => ({ range, separator, getInputProps, inputProps }),\n      [getInputProps, inputProps, range, separator],\n    )\n    const hasValue = isArray(value)\n      ? !!value.length\n      : isObject(value) && !isDate(value)\n        ? !!value.end || !!value.start\n        : !!value\n\n    return (\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              <DatePickerField {...getFieldProps(varProps)}>\n                {fieldChildren}\n              </DatePickerField>\n            </Popover.Trigger>\n\n            <InputGroup.Element\n              {...{ clickable: clearable && hasValue, ...elementProps }}\n            >\n              {clearable && hasValue ? (\n                <DatePickerIcon\n                  icon={clearIcon}\n                  {...getClearIconProps(iconProps)}\n                />\n              ) : (\n                <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n              )}\n            </InputGroup.Element>\n          </InputGroup.Root>\n\n          <DatePickerContent\n            {...cast<DatePickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <Calendar.Root\n              colorScheme={colorScheme}\n              size={size}\n              fixed={false}\n              selectProps={selectProps}\n              {...getCalendarProps(calendarProps)}\n            >\n              {children}\n            </Calendar.Root>\n          </DatePickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n}) as GenericsComponent<{\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { range, separator, getInputProps, inputProps } = useComponentContext()\n  const computedChildren = useMemo(() => {\n    if (range) {\n      return (\n        <>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"start\", ...inputProps })}\n          />\n          <DatePickerSeparator>{separator}</DatePickerSeparator>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"end\", ...inputProps })}\n          />\n        </>\n      )\n    } else {\n      return (\n        <>\n          {children}\n          <DatePickerInput {...getInputProps(inputProps)} />\n        </>\n      )\n    }\n  }, [children, getInputProps, inputProps, range, separator])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n  ({ ref, placeholder, value, ...rest }) => {\n    const { ref: inputRef, text } = useFieldSizing({\n      value: value?.toString() || placeholder,\n    })\n\n    return (\n      <>\n        {text}\n\n        <styled.input\n          ref={mergeRefs(ref, inputRef)}\n          placeholder={placeholder}\n          value={value}\n          {...rest}\n        />\n      </>\n    )\n  },\n  [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n  \"span\",\n  \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <CalendarIcon />,\n    ...rest,\n  }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":"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"}

package/dist/esm/components/date-picker/use-date-picker.js

@@ -32,7 +32,7 @@ const useDatePicker = ({ maxDate = DEFAULT_MAX_DATE, minDate = DEFAULT_MIN_DATE,
 	const { props: { id, ref, name, allowInput = true, allowInputBeyond = false, closeOnChange = false, multiple = false, closeOnSelect = !multiple, defaultInputValue, defaultMonth = /* @__PURE__ */ new Date(), range = false, defaultValue = range ? {
 		end: void 0,
 		start: void 0
-	} : multiple ? [] : void 0, disabled, focusOnClear = true, format, inputValue: inputValueProp, locale = defaultLocale, max, month: monthProp, openOnChange = true, openOnClick = true, openOnFocus = true, parseDate, pattern, placeholder: placeholderProp, readOnly, render = defaultRender, required, separator = range ? "-" : ",", value: valueProp, onChange: onChangeProp, onChangeMonth: onChangeMonthProp, onInputChange: onInputChangeProp, ...computedProps }, ariaProps, dataProps, eventProps } = useFieldProps(props);
+	} : multiple ? [] : void 0, disabled, focusOnClear = true, format, inputValue: inputValueProp, locale = defaultLocale, max, month: monthProp, openOnChange = true, openOnClick = true, openOnFocus = true, parseDate, pattern, placeholder: placeholderProp, placement = "end-start", readOnly, render = defaultRender, required, separator = range ? "-" : ",", value: valueProp, onChange: onChangeProp, onChangeMonth: onChangeMonthProp, onInputChange: onInputChangeProp, ...computedProps }, ariaProps, dataProps, eventProps } = useFieldProps(props);
 	const dateTimeFormat = useDateTimeFormat({ locale });
 	const { calendarFormat, inputFormat } = useMemo(() => {
 		const { input: inputFormat$1, ...calendarFormat$1 } = format ?? {};
@@ -115,7 +115,7 @@ const useDatePicker = ({ maxDate = DEFAULT_MAX_DATE, minDate = DEFAULT_MIN_DATE,
 		openOnClick: false,
 		openOnEnter: !allowInput,
 		openOnSpace: !allowInput,
-		placement: "end-start",
+		placement,
 		readOnly,
 		transferFocus: false,
 		...ariaProps,