npm - @yamada-ui/react - Versions diffs - 2.2.0-next-20260407055159 → 2.2.0-next-20260407100929 - Mend

@yamada-ui/react 2.2.0-next-20260407055159 → 2.2.0-next-20260407100929

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

Files changed (249) hide show

package/dist/cjs/components/action-bar/action-bar.cjs CHANGED Viewed

@@ -81,8 +81,12 @@ const ActionBarCloseTrigger = withContext("button", {
 });
 const ActionBarContent = withContext((props) => {
 	const { animationScheme, duration, getContentProps } = useComponentContext();
+	const popupAnimationProps = require_popover.usePopupAnimationProps({
+		animationScheme,
+		duration
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory$1.motion.section, {
-		...require_popover.getPopupAnimationProps(animationScheme, duration),
+		...popupAnimationProps,
 		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(props)))
 	});
 }, "content")();

package/dist/cjs/components/action-bar/action-bar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-bar.cjs","names":["createSlotComponent","actionBarStyle","useValue","useSplitChildren","useActionBar","AnimatePresence","Portal","styled","~~motion~~","~~getPopupAnimationProps~~"],"sources":["../../../../src/components/action-bar/action-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport type { PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { ActionBarStyle } from \"./action-bar.style\"\nimport type { UseActionBarProps, UseActionBarReturn } from \"./use-action-bar\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, useSplitChildren } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { ~~getPopupAnimationProps,~~ ~~type PopupAnimationProps~~ } from \"../popover\"\nimport { Portal, type PortalProps } from \"../portal\"\nimport { actionBarStyle } from \"./action-bar.style\"\nimport { useActionBar } from \"./use-action-bar\"\n\ninterface ComponentContext\n extends\n Pick<\n UseActionBarReturn,\n \"getCloseTriggerProps\" \| \"getContentProps\" \| \"getOpenTriggerProps\"\n >,\n Pick<ActionBarRootProps, \"animationScheme\" \| \"duration\"> {}\n\nexport interface ActionBarRootProps\n extends\n Omit<HTMLStyledProps, \"content\">,\n ThemeProps<ActionBarStyle>,\n UseActionBarProps,\n ~~PopupAnimationProps~~ {\n /*\n The action bar content to use.\n /\n content?: ReactNode\n /\n The action bar trigger to use.\n /\n trigger?: ReactNode\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Callback function to run side effects after the action bar has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ActionBarPropsContext,\n useComponentContext,\n usePropsContext: useActionBarPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ActionBarRootProps, ActionBarStyle, ComponentContext>(\n \"action-bar\",\n actionBarStyle,\n)\n\nexport { ActionBarPropsContext, useActionBarPropsContext }\n\n/\n `ActionBar` is a component that is used to display a bottom action bar with a set of actions.\n \n @see https://yamada-ui.com/docs/components/action-bar\n */\nexport const ActionBarRoot = withProvider<\n \"div\",\n ActionBarRootProps,\n \"placement\"\n>(\n ({\n animationScheme,\n children,\n content: contentProp,\n duration,\n placement: placementProp,\n trigger,\n portalProps,\n onCloseComplete,\n ...rest\n }) => {\n const placement = useValue(placementProp)\n\n animationScheme ??= placement?.startsWith(\"start\")\n ? \"block-start\"\n : \"block-end\"\n\n const [omittedChildren, openTrigger, content] = useSplitChildren(\n children,\n ActionBarOpenTrigger,\n ActionBarContent,\n )\n const {\n open,\n getCloseTriggerProps,\n getContentProps,\n getOpenTriggerProps,\n getRootProps,\n } = useActionBar(rest)\n const customOpenTrigger = trigger ? (\n <ActionBarOpenTrigger>{trigger}</ActionBarOpenTrigger>\n ) : null\n const customContent = contentProp ? (\n <ActionBarContent>{contentProp}</ActionBarContent>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n getCloseTriggerProps,\n getContentProps,\n getOpenTriggerProps,\n }),\n [\n animationScheme,\n duration,\n getCloseTriggerProps,\n getContentProps,\n getOpenTriggerProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <styled.div {...getRootProps()}>\n {content ?? customContent ?? omittedChildren}\n </styled.div>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"placement\"] },\n)()\n\nexport interface ActionBarOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ActionBarOpenTrigger = withContext<\n \"button\",\n ActionBarOpenTriggerProps\n>(\"button\", { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] })(\n undefined,\n (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n },\n)\n\nexport interface ActionBarCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ActionBarCloseTrigger = withContext<\n \"button\",\n ActionBarCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n undefined,\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n },\n)\n\nexport interface ActionBarContentProps\n extends Omit<HTMLStyledProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ActionBarContent = withContext<\"section\", ActionBarContentProps>(\n (props) => {\n const { animationScheme, duration, getContentProps } = useComponentContext()\n\n return (\n <motion.section\n {...~~getPopupAnimationProps(animationScheme, duration)~~}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(props)),\n )}\n />\n )\n },\n \"content\",\n)()\n\nexport interface ActionBarSeparatorProps extends HTMLStyledProps {}\n\nexport const ActionBarSeparator = withContext<\"div\", ActionBarSeparatorProps>(\n \"div\",\n \"separator\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;~~AAkDA~~,MAAM,EACJ,kBACA,cAAc,uBACd,qBACA,iBAAiB,0BACjB,aACA,iBACEA,6CACF,cACAC,wCACD;;;;;;AASD,MAAa,gBAAgB,cAK1B,EACC,iBACA,UACA,SAAS,aACT,UACA,WAAW,eACX,SACA,aACA,iBACA,GAAG,WACC;CACJ,MAAM,YAAYC,uCAAS,cAAc;AAEzC,qBAAoB,WAAW,WAAW,QAAQ,GAC9C,gBACA;CAEJ,MAAM,CAAC,iBAAiB,aAAa,WAAWC,kCAC9C,UACA,sBACA,iBACD;CACD,MAAM,EACJ,MACA,sBACA,iBACA,qBACA,iBACEC,oCAAa,KAAK;CACtB,MAAM,oBAAoB,UACxB,2CAAC,kCAAsB,UAA+B,GACpD;CACJ,MAAM,gBAAgB,cACpB,2CAAC,8BAAkB,cAA+B,GAChD;AAkBJ,QACE,4CAAC;EAAiB,iCAjBX;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACD,CACF;aAII,eAAe,mBAEhB,2CAACC;GAAgB,gBAAgB;aAC9B,OACC,2CAACC;IAAO,GAAI;cACV,2CAACC,uBAAO;KAAI,GAAI,cAAc;eAC3B,WAAW,iBAAiB;MAClB;KACN,GACP;IACY;GACD;GAGvB,QACA,EAAE,eAAe,CAAC,YAAY,EAAE,CACjC,EAAE;AAIH,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,qBAAqB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,qBAAqB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAKD,MAAa,mBAAmB,aAC7B,UAAU;CACT,MAAM,EAAE,iBAAiB,UAAU,oBAAoB,qBAAqB;~~AAE5E~~,QACE,2CAACC,yBAAO;EACN,~~GAAIC,uCAAuB,iBAAiB,SAAS~~;~~EACrD~~,+CACE,4DAA2C,MAAM,CAAC,CACnD;GACD;GAGN,UACD,EAAE;AAIH,MAAa,qBAAqB,YAChC,OACA,YACD,EAAE"}
1	+ {"version":3,"file":"action-bar.cjs","names":["createSlotComponent","actionBarStyle","useValue","useSplitChildren","useActionBar","AnimatePresence","Portal","styled","usePopupAnimationProps","motion"],"sources":["../../../../src/components/action-bar/action-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport type { PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { ActionBarStyle } from \"./action-bar.style\"\nimport type { UseActionBarProps, UseActionBarReturn } from \"./use-action-bar\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, useSplitChildren } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal, type PortalProps } from \"../portal\"\nimport { actionBarStyle } from \"./action-bar.style\"\nimport { useActionBar } from \"./use-action-bar\"\n\ninterface ComponentContext\n extends\n Pick<\n UseActionBarReturn,\n \"getCloseTriggerProps\" \| \"getContentProps\" \| \"getOpenTriggerProps\"\n >,\n Pick<ActionBarRootProps, \"animationScheme\" \| \"duration\"> {}\n\nexport interface ActionBarRootProps\n extends\n Omit<HTMLStyledProps, \"content\">,\n ThemeProps<ActionBarStyle>,\n UseActionBarProps,\n UsePopupAnimationProps {\n /*\n The action bar content to use.\n /\n content?: ReactNode\n /\n The action bar trigger to use.\n /\n trigger?: ReactNode\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Callback function to run side effects after the action bar has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ActionBarPropsContext,\n useComponentContext,\n usePropsContext: useActionBarPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ActionBarRootProps, ActionBarStyle, ComponentContext>(\n \"action-bar\",\n actionBarStyle,\n)\n\nexport { ActionBarPropsContext, useActionBarPropsContext }\n\n/\n `ActionBar` is a component that is used to display a bottom action bar with a set of actions.\n \n @see https://yamada-ui.com/docs/components/action-bar\n */\nexport const ActionBarRoot = withProvider<\n \"div\",\n ActionBarRootProps,\n \"placement\"\n>(\n ({\n animationScheme,\n children,\n content: contentProp,\n duration,\n placement: placementProp,\n trigger,\n portalProps,\n onCloseComplete,\n ...rest\n }) => {\n const placement = useValue(placementProp)\n\n animationScheme ??= placement?.startsWith(\"start\")\n ? \"block-start\"\n : \"block-end\"\n\n const [omittedChildren, openTrigger, content] = useSplitChildren(\n children,\n ActionBarOpenTrigger,\n ActionBarContent,\n )\n const {\n open,\n getCloseTriggerProps,\n getContentProps,\n getOpenTriggerProps,\n getRootProps,\n } = useActionBar(rest)\n const customOpenTrigger = trigger ? (\n <ActionBarOpenTrigger>{trigger}</ActionBarOpenTrigger>\n ) : null\n const customContent = contentProp ? (\n <ActionBarContent>{contentProp}</ActionBarContent>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n getCloseTriggerProps,\n getContentProps,\n getOpenTriggerProps,\n }),\n [\n animationScheme,\n duration,\n getCloseTriggerProps,\n getContentProps,\n getOpenTriggerProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <styled.div {...getRootProps()}>\n {content ?? customContent ?? omittedChildren}\n </styled.div>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"placement\"] },\n)()\n\nexport interface ActionBarOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ActionBarOpenTrigger = withContext<\n \"button\",\n ActionBarOpenTriggerProps\n>(\"button\", { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] })(\n undefined,\n (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n },\n)\n\nexport interface ActionBarCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ActionBarCloseTrigger = withContext<\n \"button\",\n ActionBarCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n undefined,\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n },\n)\n\nexport interface ActionBarContentProps\n extends Omit<HTMLStyledProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ActionBarContent = withContext<\"section\", ActionBarContentProps>(\n (props) => {\n const { animationScheme, duration, getContentProps } = useComponentContext()\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(props)),\n )}\n />\n )\n },\n \"content\",\n)()\n\nexport interface ActionBarSeparatorProps extends HTMLStyledProps {}\n\nexport const ActionBarSeparator = withContext<\"div\", ActionBarSeparatorProps>(\n \"div\",\n \"separator\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,EACJ,kBACA,cAAc,uBACd,qBACA,iBAAiB,0BACjB,aACA,iBACEA,6CACF,cACAC,wCACD;;;;;;AASD,MAAa,gBAAgB,cAK1B,EACC,iBACA,UACA,SAAS,aACT,UACA,WAAW,eACX,SACA,aACA,iBACA,GAAG,WACC;CACJ,MAAM,YAAYC,uCAAS,cAAc;AAEzC,qBAAoB,WAAW,WAAW,QAAQ,GAC9C,gBACA;CAEJ,MAAM,CAAC,iBAAiB,aAAa,WAAWC,kCAC9C,UACA,sBACA,iBACD;CACD,MAAM,EACJ,MACA,sBACA,iBACA,qBACA,iBACEC,oCAAa,KAAK;CACtB,MAAM,oBAAoB,UACxB,2CAAC,kCAAsB,UAA+B,GACpD;CACJ,MAAM,gBAAgB,cACpB,2CAAC,8BAAkB,cAA+B,GAChD;AAkBJ,QACE,4CAAC;EAAiB,iCAjBX;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACD,CACF;aAII,eAAe,mBAEhB,2CAACC;GAAgB,gBAAgB;aAC9B,OACC,2CAACC;IAAO,GAAI;cACV,2CAACC,uBAAO;KAAI,GAAI,cAAc;eAC3B,WAAW,iBAAiB;MAClB;KACN,GACP;IACY;GACD;GAGvB,QACA,EAAE,eAAe,CAAC,YAAY,EAAE,CACjC,EAAE;AAIH,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,qBAAqB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,qBAAqB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAKD,MAAa,mBAAmB,aAC7B,UAAU;CACT,MAAM,EAAE,iBAAiB,UAAU,oBAAoB,qBAAqB;CAC5E,MAAM,sBAAsBC,uCAAuB;EACjD;EACA;EACD,CAAC;AAEF,QACE,2CAACC,yBAAO;EACN,GAAI;EACJ,+CACE,4DAA2C,MAAM,CAAC,CACnD;GACD;GAGN,UACD,EAAE;AAIH,MAAa,qBAAqB,YAChC,OACA,YACD,EAAE"}

package/dist/cjs/components/autocomplete/autocomplete.cjs CHANGED Viewed

@@ -34,6 +34,7 @@ const { ComponentContext, PropsContext: AutocompletePropsContext, useComponentCo
 */
 const AutocompleteRoot = withProvider((props) => {
 	const [groupItemProps, { className, css, colorScheme, animationScheme = "block-start", children, clearable = true, clearIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_x_icon.XIcon, {}), duration, emptyIcon, errorBorderColor, focusBorderColor, icon, items: itemsProp, contentProps, elementProps, emptyProps, groupProps, iconProps, inputProps, optionProps, rootProps, ...rest }] = require_use_group.useGroupItemProps(props);
+	const popoverStyleProps = require_popover.usePopoverStyleProps(rest);
 	const { children: fieldChildren, descendants, items: computedItems, max, value, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, getSeparatorProps, popoverProps, onActiveDescendant, onClose, onSelect } = require_use_autocomplete.useAutocomplete({
 		items: (0, react.useMemo)(() => {
 			if (itemsProp) return itemsProp;
@@ -43,7 +44,8 @@ const AutocompleteRoot = withProvider((props) => {
 				Option: AutocompleteOption
 			});
 		}, [itemsProp, children]),
-		...rest
+		...rest,
+		...popoverStyleProps
 	});
 	const mergedPopoverProps = (0, react.useMemo)(() => ({
 		animationScheme,

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

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

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

@@ -33,7 +33,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 }] = require_use_group.useGroupItemProps(props);
-	const { value, getContentProps, getEyeDropperProps, getFieldProps, getInputProps, getRootProps, getSelectorProps, popoverProps } = require_use_color_picker.useColorPicker(rest);
+	const popoverStyleProps = require_popover.usePopoverStyleProps(rest);
+	const { value, getContentProps, getEyeDropperProps, getFieldProps, getInputProps, getRootProps, getSelectorProps, popoverProps } = require_use_color_picker.useColorPicker({
+		...rest,
+		...popoverStyleProps
+	});
 	const mergedPopoverProps = (0, react.useMemo)(() => ({
 		animationScheme,
 		duration,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker.cjs","names":["createSlotComponent","colorPickerStyle","useGroupItemProps","useColorPicker","useInputBorder","useInputPropsContext","ColorSwatch","PipetteIcon"],"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,iBACEA,6CACF,gBACAC,4CACD;;;;;;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,UAEHC,oCAAkB,MAAM;CAC5B,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACEC,wCAAe,KAAK;CACxB,MAAM,+CACG;EACL;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAiB;EAAU;EAAa,CAC1C;CACD,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;AAMvE,QACE,2CAAC;EAAiB,iCALX;GAAE;GAAO;GAAoB;GAAe;GAAY,GAC/D;GAAC;GAAoB;GAAe;GAAY;GAAM,CACvD;YAIG;GAAc,GAAI;cAChB;IACa;IACN;IACQ;IACb,GAAI,aAAa;KAAE,GAAG;KAAgB,GAAG;KAAW,CAAC;;KAEpD,kBACC;MAAoB,GAAI;MAAc,GAAI;gBACxC,2CAAC,0BAAuB,GAAI,mBAAoB;OAC7B,GACnB;KAEJ,uFACE,2CAAC,oBACC,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;MAAY,CAAC,GACjD,GACc;KAEjB,iBACC;MACE;MACA,GAAI;MACJ,GAAI;gBAEJ,2CAAC,yBACC,GAAI,mBAAmB,gBAAgB,GACvC;OACiB,GACnB;;KACY,EAElB,2CAAC;IACC,+CACE,4DAAgC,aAAa,CAAC,CAC/C;cAED;KACQ;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,GAFOC,oCAAsB;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,2CAAC,oBAAiB,GAAI,cAAc,WAAW,GAAI;EAC7D,GAAG;EACJ;EACD;AAIF,MAAM,mBAAmB,YACvB,SACA,QACD,EAAE;AAIH,MAAM,yBAAyB,YAC7BC,kCACA,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,2CAACC,qCAAc;EAC7C,GAAG;EACJ,CAAC;EACF;AAIF,MAAM,qBAAqB,4CAEzB,UACD,EAAE"}
1	+ {"version":3,"file":"color-picker.cjs","names":["createSlotComponent","colorPickerStyle","useGroupItemProps","usePopoverStyleProps","useColorPicker","useInputBorder","useInputPropsContext","ColorSwatch","PipetteIcon"],"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,iBACEA,6CACF,gBACAC,4CACD;;;;;;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,UAEHC,oCAAkB,MAAM;CAC5B,MAAM,oBAAoBC,qCAAqB,KAAK;CACpD,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACEC,wCAAe;EAAE,GAAG;EAAM,GAAG;EAAmB,CAAC;CACrD,MAAM,+CACG;EACL;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAiB;EAAU;EAAa,CAC1C;CACD,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;AAMvE,QACE,2CAAC;EAAiB,iCALX;GAAE;GAAO;GAAoB;GAAe;GAAY,GAC/D;GAAC;GAAoB;GAAe;GAAY;GAAM,CACvD;YAIG;GAAc,GAAI;cAChB;IACa;IACN;IACQ;IACb,GAAI,aAAa;KAAE,GAAG;KAAgB,GAAG;KAAW,CAAC;;KAEpD,kBACC;MAAoB,GAAI;MAAc,GAAI;gBACxC,2CAAC,0BAAuB,GAAI,mBAAoB;OAC7B,GACnB;KAEJ,uFACE,2CAAC,oBACC,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;MAAY,CAAC,GACjD,GACc;KAEjB,iBACC;MACE;MACA,GAAI;MACJ,GAAI;gBAEJ,2CAAC,yBACC,GAAI,mBAAmB,gBAAgB,GACvC;OACiB,GACnB;;KACY,EAElB,2CAAC;IACC,+CACE,4DAAgC,aAAa,CAAC,CAC/C;cAED;KACQ;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,GAFOC,oCAAsB;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,2CAAC,oBAAiB,GAAI,cAAc,WAAW,GAAI;EAC7D,GAAG;EACJ;EACD;AAIF,MAAM,mBAAmB,YACvB,SACA,QACD,EAAE;AAIH,MAAM,yBAAyB,YAC7BC,kCACA,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,2CAACC,qCAAc;EAC7C,GAAG;EACJ,CAAC;EACF;AAIF,MAAM,qBAAqB,4CAEzB,UACD,EAAE"}

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

@@ -16,13 +16,13 @@ let react = require("react");
 //#region src/components/color-picker/use-color-picker.ts
 const useColorPicker = (props) => {
 	const { t } = require_i18n_provider.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 } = require_use_field_props.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 } = require_use_field_props.useFieldProps(props);
 	const { interactive, open, getContentProps: getComboboxContentProps, getTriggerProps, popoverProps, onClose, onOpen } = require_hooks_use_combobox_index.useCombobox({
 		disabled,
 		openOnClick: false,
 		openOnEnter: !allowInput,
 		openOnSpace: !allowInput,
-		placement: "end-start",
+		placement,
 		readOnly,
 		transferFocus: false,
 		...ariaProps,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useControllableState","useEyeDropper","value","getRootProps: PropGetter","props","getFieldProps: PropGetter","mergeRefs","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n contains,\n convertColor,\n cx,\n focusTransfer,\n handlerAll,\n mergeRefs,\n runIfFn,\n runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n extends\n Omit<\n UseComboboxProps,\n \| \"closeOnSelect\"\n \| \"initialFocusValue\"\n \| \"onChange\"\n \| \"ref\"\n \| \"selectFocusRef\"\n \| \"selectOnSpace\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, allows input.\n \n @default true\n /\n allowInput?: boolean\n /\n If `true`, the color picker will be closed when the input value changes.\n \n @default false\n /\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n The initial value of the color picker.\n /\n defaultValue?: string\n /\n The fallback value of the color picker.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color picker.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n If `true`, the color picker will be opened when the input value changes.\n \n @default true\n /\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n If `true`, the color picker will be opened when the input is focused.\n \n @default false\n /\n openOnFocus?: boolean\n /\n The pattern used to check the input element.\n /\n pattern?: RegExp\n /\n The placeholder for color picker.\n /\n placeholder?: string\n /\n The value of the color picker.\n /\n value?: string\n /\n The function to format the input value.\n /\n formatInput?: (value: string) => string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when input value state changes.\n */\n onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n const { t } = useI18n(\"colorPicker\")\n const {\n props: {\n id,\n ref,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledbyProp,\n allowInput = true,\n closeOnChange = false,\n defaultValue,\n disabled,\n fallbackValue = \"#FFFFFF\",\n format: formatProp,\n formatInput,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n pattern,\n placeholder,\n 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":"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"}
1	+ {"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useControllableState","useEyeDropper","value","getRootProps: PropGetter","props","getFieldProps: PropGetter","mergeRefs","ref","getInputProps: PropGetter<\"input\">","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n calcFormat,\n contains,\n convertColor,\n cx,\n focusTransfer,\n handlerAll,\n mergeRefs,\n runIfFn,\n runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n extends\n Omit<\n UseComboboxProps,\n \| \"closeOnSelect\"\n \| \"initialFocusValue\"\n \| \"onChange\"\n \| \"ref\"\n \| \"selectFocusRef\"\n \| \"selectOnSpace\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, allows input.\n \n @default true\n /\n allowInput?: boolean\n /\n If `true`, the color picker will be closed when the input value changes.\n \n @default false\n /\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n The initial value of the color picker.\n /\n defaultValue?: string\n /\n The fallback value of the color picker.\n \n @default '#FFFFFF'\n /\n fallbackValue?: string\n /\n The format of the color picker.\n * Automatically determines the format of `value` or `defaultValue`.\n \n @default 'hex'\n /\n format?: ColorFormat\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n If `true`, the color picker will be opened when the input value changes.\n \n @default true\n /\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean\n /\n If `true`, the color picker will be opened when the input is focused.\n \n @default false\n /\n openOnFocus?: boolean\n /\n The pattern used to check the input element.\n /\n pattern?: RegExp\n /\n The placeholder for color picker.\n /\n placeholder?: string\n /\n The value of the color picker.\n /\n value?: string\n /\n The function to format the input value.\n /\n formatInput?: (value: string) => string\n /\n The callback invoked when the value changes.\n /\n onChange?: (value: string) => void\n /\n The callback invoked when input value state changes.\n */\n onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n const { t } = useI18n(\"colorPicker\")\n const {\n props: {\n id,\n ref,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledbyProp,\n allowInput = true,\n closeOnChange = false,\n defaultValue,\n disabled,\n fallbackValue = \"#FFFFFF\",\n format: formatProp,\n formatInput,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n pattern,\n placeholder,\n placement = \"end-start\",\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const {\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getTriggerProps,\n popoverProps,\n onClose,\n onOpen,\n } = useCombobox({\n disabled,\n 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/cjs/components/date-picker/date-picker.cjs CHANGED Viewed

@@ -35,7 +35,11 @@ const { ComponentContext, PropsContext: DatePickerPropsContext, useComponentCont
 */
 const DatePicker = withProvider((props) => {
 	const [groupItemProps, { className, css, colorScheme, size, animationScheme = "block-start", children, clearable = true, clearIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_x_icon.XIcon, {}), duration, errorBorderColor, focusBorderColor, icon, calendarProps, contentProps, elementProps, iconProps, inputProps, rootProps, ...rest }] = require_use_group.useGroupItemProps(props);
-	const { children: fieldChildren, range, separator, value, getCalendarProps, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, popoverProps } = require_use_date_picker.useDatePicker(rest);
+	const popoverStyleProps = require_popover.usePopoverStyleProps(rest);
+	const { children: fieldChildren, range, separator, value, getCalendarProps, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, popoverProps } = require_use_date_picker.useDatePicker({
+		...rest,
+		...popoverStyleProps
+	});
 	const mergedPopoverProps = (0, react.useMemo)(() => ({
 		animationScheme,
 		duration,

package/dist/cjs/components/date-picker/date-picker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.cjs","names":["createSlotComponent","datePickerStyle","XIcon","useGroupItemProps","useDatePicker","useInputBorder","useInputPropsContext","useFieldSizing","styled","mergeRefs","CalendarIcon"],"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":"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"}
1	+ {"version":3,"file":"date-picker.cjs","names":["createSlotComponent","datePickerStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useDatePicker","useInputBorder","useInputPropsContext","useFieldSizing","styled","mergeRefs","CalendarIcon"],"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/cjs/components/date-picker/use-date-picker.cjs CHANGED Viewed

@@ -34,7 +34,7 @@ const useDatePicker = ({ maxDate = require_use_calendar.DEFAULT_MAX_DATE, minDat
 	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 } = require_use_field_props.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 } = require_use_field_props.useFieldProps(props);
 	const dateTimeFormat = require_use_format_date_time.useDateTimeFormat({ locale });
 	const { calendarFormat, inputFormat } = (0, react.useMemo)(() => {
 		const { input: inputFormat$1, ...calendarFormat$1 } = format ?? {};
@@ -117,7 +117,7 @@ const useDatePicker = ({ maxDate = require_use_calendar.DEFAULT_MAX_DATE, minDat
 		openOnClick: false,
 		openOnEnter: !allowInput,
 		openOnSpace: !allowInput,
-		placement: "end-start",
+		placement,
 		readOnly,
 		transferFocus: false,
 		...ariaProps,