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

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

@@ -0,0 +1,103 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_children = require('../../utils/children.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_factory$1 = require('../motion/factory.cjs');
+require('../motion/index.cjs');
+const require_action_bar_style = require('./action-bar.style.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_portal = require('../portal/portal.cjs');
+require('../portal/index.cjs');
+const require_popover = require('../popover/popover.cjs');
+require('../popover/index.cjs');
+const require_use_action_bar = require('./use-action-bar.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/action-bar/action-bar.tsx
+const { ComponentContext, PropsContext: ActionBarPropsContext, useComponentContext, usePropsContext: useActionBarPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("action-bar", require_action_bar_style.actionBarStyle);
+/**
+* `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
+*
+* @see https://yamada-ui.com/docs/components/action-bar
+*/
+const ActionBarRoot = withProvider(({ animationScheme, children, content: contentProp, duration, placement: placementProp, trigger, portalProps, onCloseComplete, ...rest }) => {
+	const placement = require_hooks_use_value_index.useValue(placementProp);
+	animationScheme ??= placement?.startsWith("start") ? "block-start" : "block-end";
+	const [omittedChildren, openTrigger, content] = require_children.useSplitChildren(children, ActionBarOpenTrigger, ActionBarContent);
+	const { open, getCloseTriggerProps, getContentProps, getOpenTriggerProps, getRootProps } = require_use_action_bar.useActionBar(rest);
+	const customOpenTrigger = trigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarOpenTrigger, { children: trigger }) : null;
+	const customContent = contentProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarContent, { children: contentProp }) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			animationScheme,
+			duration,
+			getCloseTriggerProps,
+			getContentProps,
+			getOpenTriggerProps
+		}), [
+			animationScheme,
+			duration,
+			getCloseTriggerProps,
+			getContentProps,
+			getOpenTriggerProps
+		]),
+		children: [openTrigger ?? customOpenTrigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+			onExitComplete: onCloseComplete,
+			children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
+				...portalProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+					...getRootProps(),
+					children: content ?? customContent ?? omittedChildren
+				})
+			}) : null
+		})]
+	});
+}, "root", { transferProps: ["placement"] })();
+const ActionBarOpenTrigger = withContext("button", {
+	name: "OpenTrigger",
+	slot: ["trigger", "open"]
+})(void 0, (props) => {
+	const { getOpenTriggerProps } = useComponentContext();
+	return {
+		asChild: true,
+		...getOpenTriggerProps(props)
+	};
+});
+const ActionBarCloseTrigger = withContext("button", {
+	name: "CloseTrigger",
+	slot: ["trigger", "close"]
+})(void 0, (props) => {
+	const { getCloseTriggerProps } = useComponentContext();
+	return {
+		asChild: true,
+		...getCloseTriggerProps(props)
+	};
+});
+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, {
+		...popupAnimationProps,
+		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(props)))
+	});
+}, "content")();
+const ActionBarSeparator = withContext("div", "separator")();
+
+//#endregion
+exports.ActionBarCloseTrigger = ActionBarCloseTrigger;
+exports.ActionBarContent = ActionBarContent;
+exports.ActionBarOpenTrigger = ActionBarOpenTrigger;
+exports.ActionBarPropsContext = ActionBarPropsContext;
+exports.ActionBarRoot = ActionBarRoot;
+exports.ActionBarSeparator = ActionBarSeparator;
+exports.useActionBarPropsContext = useActionBarPropsContext;
+//# sourceMappingURL=action-bar.cjs.map

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

@@ -0,0 +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/action-bar/action-bar.style.cjs

@@ -0,0 +1,62 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/action-bar/action-bar.style.ts
+const actionBarStyle = require_config.defineComponentSlotStyle({
+	base: {
+		content: {
+			alignItems: "center",
+			bg: "bg.float",
+			borderColor: "border",
+			borderWidth: "1px",
+			boxShadow: "lg",
+			display: "flex",
+			gap: "2",
+			px: "2",
+			py: "2",
+			rounded: "l4"
+		},
+		root: {
+			position: "fixed",
+			zIndex: "burter"
+		},
+		separator: {
+			bg: "border.emphasized",
+			h: "8",
+			w: "px"
+		}
+	},
+	props: { placement: {
+		"end-center": { root: {
+			bottom: "lg",
+			left: "50%",
+			transform: "translateX(-50%)"
+		} },
+		"end-end": { root: {
+			bottom: "lg",
+			right: "lg"
+		} },
+		"end-start": { root: {
+			bottom: "lg",
+			left: "lg"
+		} },
+		"start-center": { root: {
+			left: "50%",
+			top: "lg",
+			transform: "translateX(-50%)"
+		} },
+		"start-end": { root: {
+			right: "lg",
+			top: "lg"
+		} },
+		"start-start": { root: {
+			left: "lg",
+			top: "lg"
+		} }
+	} },
+	defaultProps: { placement: "end-center" }
+});
+
+//#endregion
+exports.actionBarStyle = actionBarStyle;
+//# sourceMappingURL=action-bar.style.cjs.map

package/dist/cjs/components/action-bar/action-bar.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/action-bar/action-bar.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const actionBarStyle = defineComponentSlotStyle({\n  base: {\n    content: {\n      alignItems: \"center\",\n      bg: \"bg.float\",\n      borderColor: \"border\",\n      borderWidth: \"1px\",\n      boxShadow: \"lg\",\n      display: \"flex\",\n      gap: \"2\",\n      px: \"2\",\n      py: \"2\",\n      rounded: \"l4\",\n    },\n    root: {\n      position: \"fixed\",\n      zIndex: \"burter\",\n    },\n    separator: { bg: \"border.emphasized\", h: \"8\", w: \"px\" },\n  },\n\n  props: {\n    /**\n     * The placement of the action bar.\n     *\n     * @default 'end-center'\n     */\n    placement: {\n      \"end-center\": {\n        root: { bottom: \"lg\", left: \"50%\", transform: \"translateX(-50%)\" },\n      },\n      \"end-end\": {\n        root: { bottom: \"lg\", right: \"lg\" },\n      },\n      \"end-start\": {\n        root: { bottom: \"lg\", left: \"lg\" },\n      },\n      \"start-center\": {\n        root: { left: \"50%\", top: \"lg\", transform: \"translateX(-50%)\" },\n      },\n      \"start-end\": {\n        root: { right: \"lg\", top: \"lg\" },\n      },\n      \"start-start\": {\n        root: { left: \"lg\", top: \"lg\" },\n      },\n    },\n  },\n\n  defaultProps: {\n    placement: \"end-center\",\n  },\n})\n\nexport type ActionBarStyle = typeof actionBarStyle\n"],"mappings":";;;;AAEA,MAAa,iBAAiBA,wCAAyB;CACrD,MAAM;EACJ,SAAS;GACP,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,SAAS;GACV;EACD,MAAM;GACJ,UAAU;GACV,QAAQ;GACT;EACD,WAAW;GAAE,IAAI;GAAqB,GAAG;GAAK,GAAG;GAAM;EACxD;CAED,OAAO,EAML,WAAW;EACT,cAAc,EACZ,MAAM;GAAE,QAAQ;GAAM,MAAM;GAAO,WAAW;GAAoB,EACnE;EACD,WAAW,EACT,MAAM;GAAE,QAAQ;GAAM,OAAO;GAAM,EACpC;EACD,aAAa,EACX,MAAM;GAAE,QAAQ;GAAM,MAAM;GAAM,EACnC;EACD,gBAAgB,EACd,MAAM;GAAE,MAAM;GAAO,KAAK;GAAM,WAAW;GAAoB,EAChE;EACD,aAAa,EACX,MAAM;GAAE,OAAO;GAAM,KAAK;GAAM,EACjC;EACD,eAAe,EACb,MAAM;GAAE,MAAM;GAAM,KAAK;GAAM,EAChC;EACF,EACF;CAED,cAAc,EACZ,WAAW,cACZ;CACF,CAAC"}

package/dist/cjs/components/action-bar/index.cjs

@@ -0,0 +1,20 @@
+const require_action_bar_style = require('./action-bar.style.cjs');
+const require_use_action_bar = require('./use-action-bar.cjs');
+const require_action_bar = require('./action-bar.cjs');
+const require_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'ActionBar', {
+  enumerable: true,
+  get: function () {
+    return require_namespace.namespace_exports;
+  }
+});
+exports.ActionBarCloseTrigger = require_action_bar.ActionBarCloseTrigger;
+exports.ActionBarContent = require_action_bar.ActionBarContent;
+exports.ActionBarOpenTrigger = require_action_bar.ActionBarOpenTrigger;
+exports.ActionBarPropsContext = require_action_bar.ActionBarPropsContext;
+exports.ActionBarRoot = require_action_bar.ActionBarRoot;
+exports.ActionBarSeparator = require_action_bar.ActionBarSeparator;
+exports.actionBarStyle = require_action_bar_style.actionBarStyle;
+exports.useActionBar = require_use_action_bar.useActionBar;
+exports.useActionBarPropsContext = require_action_bar.useActionBarPropsContext;

package/dist/cjs/components/action-bar/namespace.cjs

@@ -0,0 +1,22 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_action_bar = require('./action-bar.cjs');
+
+//#region src/components/action-bar/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	CloseTrigger: () => require_action_bar.ActionBarCloseTrigger,
+	Content: () => require_action_bar.ActionBarContent,
+	OpenTrigger: () => require_action_bar.ActionBarOpenTrigger,
+	PropsContext: () => require_action_bar.ActionBarPropsContext,
+	Root: () => require_action_bar.ActionBarRoot,
+	Separator: () => require_action_bar.ActionBarSeparator,
+	usePropsContext: () => require_action_bar.useActionBarPropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/action-bar/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/action-bar/namespace.ts"],"sourcesContent":["export {\n  ActionBarCloseTrigger as CloseTrigger,\n  ActionBarContent as Content,\n  ActionBarOpenTrigger as OpenTrigger,\n  ActionBarPropsContext as PropsContext,\n  ActionBarRoot as Root,\n  ActionBarSeparator as Separator,\n  useActionBarPropsContext as usePropsContext,\n} from \"./action-bar\"\nexport type {\n  ActionBarCloseTriggerProps as CloseTriggerProps,\n  ActionBarContentProps as ContentProps,\n  ActionBarOpenTriggerProps as OpenTriggerProps,\n  ActionBarRootProps as RootProps,\n  ActionBarSeparatorProps as SeparatorProps,\n} from \"./action-bar\"\n"],"mappings":""}

package/dist/cjs/components/action-bar/use-action-bar.cjs

@@ -0,0 +1,71 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_dom = require('../../utils/dom.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_environment_provider = require('../../core/system/environment-provider.cjs');
+require('../../core/index.cjs');
+const require_use_disclosure = require('../../hooks/use-disclosure/use-disclosure.cjs');
+require('../../hooks/use-disclosure/index.cjs');
+const require_hooks_use_event_listener_index = require('../../hooks/use-event-listener/index.cjs');
+const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+require('../../providers/i18n-provider/index.cjs');
+let react = require("react");
+
+//#region src/components/action-bar/use-action-bar.ts
+const useActionBar = ({ closeOnEsc = true, defaultOpen, open: openProp, onClose: onCloseProp, onOpen: onOpenProp, ...rest } = {}) => {
+	const { getDocument } = require_environment_provider.useEnvironment();
+	const { open, onClose, onOpen } = require_use_disclosure.useDisclosure({
+		defaultOpen,
+		open: openProp,
+		onClose: onCloseProp,
+		onOpen: onOpenProp
+	});
+	const [contentId] = require_dom.useIds();
+	const { t } = require_i18n_provider.useI18n("actionBar");
+	const onKeyDown = (0, react.useCallback)((ev) => {
+		if (ev.key !== "Escape") return;
+		if (!closeOnEsc) return;
+		ev.stopPropagation();
+		onClose();
+	}, [closeOnEsc, onClose]);
+	require_hooks_use_event_listener_index.useEventListener(getDocument(), "keydown", onKeyDown);
+	const getRootProps = (0, react.useCallback)((props = {}) => ({
+		...rest,
+		...props
+	}), [rest]);
+	const getOpenTriggerProps = (0, react.useCallback)((props = {}) => ({
+		"aria-controls": open ? contentId : void 0,
+		"aria-expanded": open,
+		"aria-haspopup": "dialog",
+		"aria-label": t("Open action bar"),
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onOpen)
+	}), [
+		contentId,
+		onOpen,
+		open,
+		t
+	]);
+	return {
+		open,
+		getCloseTriggerProps: (0, react.useCallback)((props = {}) => ({
+			"aria-label": t("Close action bar"),
+			...props,
+			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onClose)
+		}), [onClose, t]),
+		getContentProps: (0, react.useCallback)((props = {}) => ({
+			id: contentId,
+			role: "dialog",
+			...props
+		}), [contentId]),
+		getOpenTriggerProps,
+		getRootProps,
+		onClose,
+		onOpen
+	};
+};
+
+//#endregion
+exports.useActionBar = useActionBar;
+//# sourceMappingURL=use-action-bar.cjs.map

package/dist/cjs/components/action-bar/use-action-bar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-action-bar.cjs","names":["useEnvironment","useDisclosure","useIds","useI18n","getRootProps: PropGetter","getOpenTriggerProps: PropGetter<\"button\">"],"sources":["../../../../src/components/action-bar/use-action-bar.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport {\n  useDisclosure,\n  type UseDisclosureProps,\n} from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll, useIds } from \"../../utils\"\n\nexport interface UseActionBarProps\n  extends HTMLProps, Omit<UseDisclosureProps, \"timing\"> {\n  /**\n   * If `true`, the action bar will close when the `Esc` key is pressed.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n}\n\nexport const useActionBar = ({\n  closeOnEsc = true,\n  defaultOpen,\n  open: openProp,\n  onClose: onCloseProp,\n  onOpen: onOpenProp,\n  ...rest\n}: UseActionBarProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const [contentId] = useIds()\n  const { t } = useI18n(\"actionBar\")\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      if (!closeOnEsc) return\n\n      ev.stopPropagation()\n      onClose()\n    },\n    [closeOnEsc, onClose],\n  )\n\n  useEventListener(getDocument(), \"keydown\", onKeyDown)\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getOpenTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-controls\": open ? contentId : undefined,\n      \"aria-expanded\": open,\n      \"aria-haspopup\": \"dialog\",\n      \"aria-label\": t(\"Open action bar\"),\n      ...props,\n      onClick: handlerAll(props.onClick, onOpen),\n    }),\n    [contentId, onOpen, open, t],\n  )\n\n  const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-label\": t(\"Close action bar\"),\n      ...props,\n      onClick: handlerAll(props.onClick, onClose),\n    }),\n    [onClose, t],\n  )\n\n  const getContentProps: PropGetter<\"section\"> = useCallback(\n    (props = {}) => ({\n      id: contentId,\n      role: \"dialog\",\n      ...props,\n    }),\n    [contentId],\n  )\n\n  return {\n    open,\n    getCloseTriggerProps,\n    getContentProps,\n    getOpenTriggerProps,\n    getRootProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseActionBarReturn = ReturnType<typeof useActionBar>\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,gBAAgB,EAC3B,aAAa,MACb,aACA,MAAM,UACN,SAAS,aACT,QAAQ,YACR,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,EAAE,gBAAgBA,6CAAgB;CACxC,MAAM,EAAE,MAAM,SAAS,WAAWC,qCAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;EACT,CAAC;CACF,MAAM,CAAC,aAAaC,oBAAQ;CAC5B,MAAM,EAAE,MAAMC,8BAAQ,YAAY;CAElC,MAAM,oCACH,OAAsB;AACrB,MAAI,GAAG,QAAQ,SAAU;AAEzB,MAAI,CAAC,WAAY;AAEjB,KAAG,iBAAiB;AACpB,WAAS;IAEX,CAAC,YAAY,QAAQ,CACtB;AAED,yDAAiB,aAAa,EAAE,WAAW,UAAU;CAErD,MAAMC,uCACH,QAAQ,EAAE,MAAM;EAAE,GAAG;EAAM,GAAG;EAAO,GACtC,CAAC,KAAK,CACP;CAED,MAAMC,8CACH,QAAQ,EAAE,MAAM;EACf,iBAAiB,OAAO,YAAY;EACpC,iBAAiB;EACjB,iBAAiB;EACjB,cAAc,EAAE,kBAAkB;EAClC,GAAG;EACH,2DAAoB,MAAM,SAAS,OAAO;EAC3C,GACD;EAAC;EAAW;EAAQ;EAAM;EAAE,CAC7B;AAoBD,QAAO;EACL;EACA,8CAnBC,QAAQ,EAAE,MAAM;GACf,cAAc,EAAE,mBAAmB;GACnC,GAAG;GACH,2DAAoB,MAAM,SAAS,QAAQ;GAC5C,GACD,CAAC,SAAS,EAAE,CACb;EAcC,yCAXC,QAAQ,EAAE,MAAM;GACf,IAAI;GACJ,MAAM;GACN,GAAG;GACJ,GACD,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACD"}

package/dist/cjs/components/alpha-slider/alpha-slider.cjs

@@ -4,8 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
-const require_alpha_slider_style = require('./alpha-slider.style.cjs');
 const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_alpha_slider_style = require('./alpha-slider.style.cjs');
 const require_color_swatch = require('../color-swatch/color-swatch.cjs');
 require('../color-swatch/index.cjs');
 const require_hue_slider = require('../hue-slider/hue-slider.cjs');

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

@@ -10,10 +10,10 @@ const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs')
 const require_minus_icon = require('../icon/icons/minus-icon.cjs');
 const require_x_icon = require('../icon/icons/x-icon.cjs');
 require('../icon/index.cjs');
-const require_use_group = require('../group/use-group.cjs');
-require('../group/index.cjs');
 const require_popover = require('../popover/popover.cjs');
 require('../popover/index.cjs');
+const require_use_group = require('../group/use-group.cjs');
+require('../group/index.cjs');
 const require_use_input_border = require('../input/use-input-border.cjs');
 const require_input = require('../input/input.cjs');
 const require_input_element = require('../input/input-element.cjs');
@@ -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

@@ -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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"}
+{"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/chart/use-chart.cjs

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

package/dist/cjs/components/chart/use-chart.cjs.map

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

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

@@ -6,12 +6,12 @@ const require_create_component = require('../../core/components/create-component
 require('../../core/index.cjs');
 const require_pipette_icon = require('../icon/icons/pipette-icon.cjs');
 require('../icon/index.cjs');
+const require_popover = require('../popover/popover.cjs');
+require('../popover/index.cjs');
 const require_color_swatch = require('../color-swatch/color-swatch.cjs');
 require('../color-swatch/index.cjs');
 const require_use_group = require('../group/use-group.cjs');
 require('../group/index.cjs');
-const require_popover = require('../popover/popover.cjs');
-require('../popover/index.cjs');
 const require_use_input_border = require('../input/use-input-border.cjs');
 const require_input = require('../input/input.cjs');
 const require_input_element = require('../input/input-element.cjs');
@@ -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,