@yamada-ui/react 2.0.10-dev-20260301102815 → 2.1.0-dev-20260302125757

package/dist/cjs/components/accordion/accordion.cjs

@@ -7,17 +7,17 @@ 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_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
+require('../icon/index.cjs');
 const require_accordion_style = require('./accordion.style.cjs');
 const require_collapse = require('../collapse/collapse.cjs');
 require('../collapse/index.cjs');
-const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
-require('../icon/index.cjs');
 const require_use_accordion = require('./use-accordion.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/accordion/accordion.tsx
-const [AccordionItemComponentContext, useAccordionItemComponentContext] = require_context.createContext({ name: "AccordionItemComponentContext" });
+const [ItemComponentContext, useItemComponentContext] = require_context.createContext({ name: "ItemComponentContext" });
 const { ComponentContext, PropsContext: AccordionPropsContext, useComponentContext, usePropsContext: useAccordionPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("accordion", require_accordion_style.accordionStyle);
 /**
 * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
@@ -70,15 +70,14 @@ const AccordionRoot = withProvider(({ children, icon, iconHidden, items, ...prop
 }, "root")();
 const AccordionItem = withContext(({ button, children, icon, ...rest }) => {
 	const { disabled, open, getButtonProps, getIconProps, getItemProps, getPanelProps } = require_use_accordion.useAccordionItem(rest);
-	children = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(children, {
+	const [omittedChildren, customAccordionButton, customAccordionPanel] = require_children.useSplitChildren((0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(children, {
 		disabled,
 		expanded: open
 	}), [
 		children,
 		disabled,
 		open
-	]);
-	const [omittedChildren, customAccordionButton, customAccordionPanel] = require_children.useSplitChildren(children, AccordionButton, AccordionPanel);
+	]), AccordionButton, AccordionPanel);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_accordion.AccordionItemContext, {
 		value: (0, react.useMemo)(() => ({
 			disabled,
@@ -95,7 +94,7 @@ const AccordionItem = withContext(({ button, children, icon, ...rest }) => {
 			icon,
 			open
 		]),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionItemComponentContext, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemComponentContext, {
 			value: (0, react.useMemo)(() => ({ icon }), [icon]),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
 				...getItemProps(),
@@ -109,7 +108,7 @@ const AccordionItem = withContext(({ button, children, icon, ...rest }) => {
 }, "item")();
 const AccordionButton = withContext(({ children, icon: customIcon, containerProps, ...rest }) => {
 	const { icon: rootIcon } = useComponentContext();
-	const { icon: itemIcon } = useAccordionItemComponentContext();
+	const { icon: itemIcon } = useItemComponentContext();
 	const { disabled, open, getButtonProps } = require_use_accordion.useAccordionItemContext();
 	const props = {
 		disabled,
@@ -119,7 +118,7 @@ const AccordionButton = withContext(({ children, icon: customIcon, containerProp
 		...containerProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.button, {
 			...getButtonProps(rest),
-			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionIcon, { children: (0, require_utils_index.utils_exports.runIfFn)(itemIcon, props) ?? (0, require_utils_index.utils_exports.runIfFn)(rootIcon, props) ?? (0, require_utils_index.utils_exports.runIfFn)(customIcon, props) })]
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionIcon, { children: (0, require_utils_index.utils_exports.runIfFn)(customIcon, props) ?? (0, require_utils_index.utils_exports.runIfFn)(itemIcon, props) ?? (0, require_utils_index.utils_exports.runIfFn)(rootIcon, props) })]
 		})
 	});
 }, "button")();

package/dist/cjs/components/accordion/accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":["createContext","createSlotComponent","accordionStyle","useAccordion","index","props","AccordionDescendantsContext","AccordionContext","styled","useAccordionItem","useSplitChildren","AccordionItemContext","useAccordionItemContext","ChevronDownIcon","Children","Collapse"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, isString, runIfFn, useSplitChildren } from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface AccordionComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface AccordionItemComponentContext extends Pick<\n  AccordionItemProps,\n  \"icon\"\n> {}\n\nconst [AccordionItemComponentContext, useAccordionItemComponentContext] =\n  createContext<AccordionItemComponentContext>({\n    name: \"AccordionItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  AccordionRootProps,\n  AccordionStyle,\n  AccordionComponentContext\n>(\"accordion\", accordionStyle)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n\n    children = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(children, AccordionButton, AccordionPanel)\n\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <AccordionItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </AccordionItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<{ disabled?: boolean; expanded?: boolean }>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useAccordionItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props) ??\n              runIfFn(customIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"accordion.cjs","names":["createContext","createSlotComponent","accordionStyle","useAccordion","index","props","AccordionDescendantsContext","AccordionContext","styled","useAccordionItem","useSplitChildren","AccordionItemContext","useAccordionItemContext","ChevronDownIcon","Children","Collapse"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, isString, runIfFn, useSplitChildren } from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface ComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface ItemComponentContext extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<AccordionRootProps, AccordionStyle, ComponentContext>(\n  \"accordion\",\n  accordionStyle,\n)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n    const computedChildren = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(computedChildren, AccordionButton, AccordionPanel)\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <ItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </ItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(customIcon, props) ??\n              runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/accordion/accordion.style.cjs

@@ -1,52 +1,26 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
+const require_native_accordion_style = require('../native-accordion/native-accordion.style.cjs');
+require('../native-accordion/index.cjs');
 
 //#region src/components/accordion/accordion.style.ts
 const accordionStyle = require_config.defineComponentSlotStyle({
 	base: {
+		...require_native_accordion_style.nativeAccordionStyle.base,
 		button: {
-			"&[aria-disabled=true]": { cursor: "default" },
-			alignItems: "center",
-			display: "inline-flex",
-			focusVisibleRing: "inside",
-			px: "4",
-			py: "3",
-			transitionDuration: "moderate",
-			transitionProperty: "common",
-			w: "100%",
-			_nativeDisabled: { layerStyle: "disabled" }
+			...require_native_accordion_style.nativeAccordionStyle.base?.button,
+			"&[aria-disabled=true]": { cursor: "default" }
 		},
 		icon: {
-			color: "fg.subtle",
-			fontSize: "xl",
-			ml: "auto",
-			transformOrigin: "center",
-			transitionDuration: "moderate",
-			transitionProperty: "transform",
-			_expanded: { transform: "rotate(180deg)" },
-			_disabled: { layerStyle: "disabled" }
+			...require_native_accordion_style.nativeAccordionStyle.base?.icon,
+			_expanded: { transform: "rotate(180deg)" }
 		},
-		item: { overflowAnchor: "none" },
 		panel: {
-			pb: "3",
-			px: "4"
-		},
-		root: { w: "full" }
-	},
-	variants: {
-		panel: {
-			button: { rounded: "l2" },
-			item: {
-				layerStyle: "panel",
-				rounded: "l2",
-				_notFirst: { mt: "md" }
-			}
-		},
-		plain: { item: {
-			borderTopWidth: "1px",
-			_last: { borderBottomWidth: "1px" }
-		} }
+			...require_native_accordion_style.nativeAccordionStyle.base?.panel,
+			pb: "3"
+		}
 	},
+	variants: require_native_accordion_style.nativeAccordionStyle.variants,
 	defaultProps: { variant: "plain" }
 });
 

package/dist/cjs/components/accordion/accordion.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/accordion/accordion.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const accordionStyle = defineComponentSlotStyle({\n  base: {\n    button: {\n      \"&[aria-disabled=true]\": {\n        cursor: \"default\",\n      },\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      focusVisibleRing: \"inside\",\n      px: \"4\",\n      py: \"3\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"100%\",\n      _nativeDisabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    icon: {\n      color: \"fg.subtle\",\n      fontSize: \"xl\",\n      ml: \"auto\",\n      transformOrigin: \"center\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"transform\",\n      _expanded: {\n        transform: \"rotate(180deg)\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    item: {\n      overflowAnchor: \"none\",\n    },\n    panel: {\n      pb: \"3\",\n      px: \"4\",\n    },\n    root: {\n      w: \"full\",\n    },\n  },\n\n  variants: {\n    panel: {\n      button: {\n        rounded: \"l2\",\n      },\n      item: {\n        layerStyle: \"panel\",\n        rounded: \"l2\",\n        _notFirst: {\n          mt: \"md\",\n        },\n      },\n    },\n    plain: {\n      item: {\n        borderTopWidth: \"1px\",\n        _last: {\n          borderBottomWidth: \"1px\",\n        },\n      },\n    },\n  },\n\n  defaultProps: {\n    variant: \"plain\",\n  },\n})\n\nexport type AccordionStyle = typeof accordionStyle\n"],"mappings":";;;;AAEA,MAAa,iBAAiBA,wCAAyB;CACrD,MAAM;EACJ,QAAQ;GACN,yBAAyB,EACvB,QAAQ,WACT;GACD,YAAY;GACZ,SAAS;GACT,kBAAkB;GAClB,IAAI;GACJ,IAAI;GACJ,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,iBAAiB,EACf,YAAY,YACb;GACF;EACD,MAAM;GACJ,OAAO;GACP,UAAU;GACV,IAAI;GACJ,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,WAAW,EACT,WAAW,kBACZ;GACD,WAAW,EACT,YAAY,YACb;GACF;EACD,MAAM,EACJ,gBAAgB,QACjB;EACD,OAAO;GACL,IAAI;GACJ,IAAI;GACL;EACD,MAAM,EACJ,GAAG,QACJ;EACF;CAED,UAAU;EACR,OAAO;GACL,QAAQ,EACN,SAAS,MACV;GACD,MAAM;IACJ,YAAY;IACZ,SAAS;IACT,WAAW,EACT,IAAI,MACL;IACF;GACF;EACD,OAAO,EACL,MAAM;GACJ,gBAAgB;GAChB,OAAO,EACL,mBAAmB,OACpB;GACF,EACF;EACF;CAED,cAAc,EACZ,SAAS,SACV;CACF,CAAC"}
+{"version":3,"file":"accordion.style.cjs","names":["defineComponentSlotStyle","nativeAccordionStyle"],"sources":["../../../../src/components/accordion/accordion.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { nativeAccordionStyle } from \"../native-accordion\"\n\nexport const accordionStyle = defineComponentSlotStyle({\n  base: {\n    ...nativeAccordionStyle.base,\n    button: {\n      ...nativeAccordionStyle.base?.button,\n      \"&[aria-disabled=true]\": { cursor: \"default\" },\n    },\n    icon: {\n      ...nativeAccordionStyle.base?.icon,\n      _expanded: { transform: \"rotate(180deg)\" },\n    },\n    panel: { ...nativeAccordionStyle.base?.panel, pb: \"3\" },\n  },\n\n  variants: nativeAccordionStyle.variants,\n\n  defaultProps: {\n    variant: \"plain\",\n  },\n})\n\nexport type AccordionStyle = typeof accordionStyle\n"],"mappings":";;;;;;AAGA,MAAa,iBAAiBA,wCAAyB;CACrD,MAAM;EACJ,GAAGC,oDAAqB;EACxB,QAAQ;GACN,GAAGA,oDAAqB,MAAM;GAC9B,yBAAyB,EAAE,QAAQ,WAAW;GAC/C;EACD,MAAM;GACJ,GAAGA,oDAAqB,MAAM;GAC9B,WAAW,EAAE,WAAW,kBAAkB;GAC3C;EACD,OAAO;GAAE,GAAGA,oDAAqB,MAAM;GAAO,IAAI;GAAK;EACxD;CAED,UAAUA,oDAAqB;CAE/B,cAAc,EACZ,SAAS,SACV;CACF,CAAC"}

package/dist/cjs/components/accordion/use-accordion.cjs

@@ -130,12 +130,17 @@ const useAccordionItem = ({ disabled, index, ...rest }) => {
 		open,
 		getButtonProps,
 		getIconProps: (0, react.useCallback)((props) => ({
-			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!multiple && !toggle && open || disabled),
 			"aria-expanded": open,
 			"aria-hidden": true,
 			role: "presentation",
 			...props
-		}), [open, disabled]),
+		}), [
+			multiple,
+			toggle,
+			open,
+			disabled
+		]),
 		getItemProps,
 		getPanelProps
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"use-accordion.cjs","names":["createDescendants","createContext","useControllableState","getRootProps: PropGetter","mergeRefs","open","getItemProps: PropGetter","getButtonProps: PropGetter<\"button\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/accordion/use-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  mergeRefs,\n  runKeyAction,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: AccordionDescendantsContext,\n  useDescendant: useAccordionDescendant,\n  useDescendants: useAccordionDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport {\n  AccordionDescendantsContext,\n  useAccordionDescendant,\n  useAccordionDescendants,\n}\n\ninterface AccordionContext extends Omit<\n  UseAccordionReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [AccordionContext, useAccordionContext] = createContext<AccordionContext>(\n  {\n    name: \"AccordionContext\",\n  },\n)\n\nexport { AccordionContext, useAccordionContext }\n\ninterface AccordionItemContext extends Omit<\n  UseAccordionItemReturn,\n  \"getItemProps\"\n> {}\n\nconst [AccordionItemContext, useAccordionItemContext] =\n  createContext<AccordionItemContext>({\n    name: \"AccordionItemContext\",\n  })\n\nexport { AccordionItemContext, useAccordionItemContext }\n\nexport interface UseAccordionProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index(es) of the accordion item to expand.\n   */\n  defaultIndex?: number | number[]\n  /**\n   * The index(es) of the accordion item to expand.\n   */\n  index?: number | number[]\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * If `true`, any expanded accordion item can be collapsed again.\n   *\n   * @default false\n   */\n  toggle?: boolean\n  /**\n   * The callback invoked when accordion items are expanded or collapsed.\n   */\n  onChange?: (index: number | number[]) => void\n}\n\nexport const useAccordion = ({\n  defaultIndex: defaultIndexProp,\n  index: indexProp,\n  multiple,\n  toggle,\n  onChange,\n  ...rest\n}: UseAccordionProps = {}) => {\n  if (\n    (indexProp || defaultIndexProp) != null &&\n    !isArray(indexProp || defaultIndexProp) &&\n    multiple\n  ) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, then 'index' or 'defaultIndex' must be an array.`,\n    )\n  }\n\n  if (multiple && toggle) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, 'toggle' will be ignored. Either remove 'toggle' or 'multiple' depending on whether you want multiple accordions visible or not`,\n    )\n  }\n\n  const descendants = useAccordionDescendants()\n\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n  const [index, setIndex] = useControllableState({\n    defaultValue: () =>\n      multiple ? (defaultIndexProp ?? []) : (defaultIndexProp ?? -1),\n    value: indexProp,\n    onChange,\n  })\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  useEffect(() => {\n    return () => setFocusedIndex(-1)\n  }, [])\n\n  return {\n    descendants,\n    focusedIndex,\n    index,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n    getRootProps,\n  }\n}\n\nexport type UseAccordionReturn = ReturnType<typeof useAccordion>\n\nexport interface UseAccordionItemProps extends HTMLProps {\n  /**\n   * The index of the accordion item.\n   */\n  index: number\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useAccordionItem = ({\n  disabled,\n  index,\n  ...rest\n}: UseAccordionItemProps) => {\n  const itemId = useId()\n  const panelId = useId()\n  const {\n    index: selectedIndex,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n  } = useAccordionContext()\n  const { descendants, register } = useAccordionDescendant({ disabled })\n  const open =\n    index !== -1\n      ? isArray(selectedIndex)\n        ? selectedIndex.includes(index)\n        : selectedIndex === index\n      : false\n\n  if (open && disabled)\n    console.warn(`Accordion: Cannot open a disabled accordion item`)\n\n  const onChange = useCallback(\n    (open: boolean) => {\n      if (index === -1) return\n\n      if (multiple && isArray(selectedIndex)) {\n        setIndex(\n          open\n            ? selectedIndex.concat(index)\n            : selectedIndex.filter((i) => i !== index),\n        )\n      } else if (open) {\n        setIndex(index)\n      } else if (toggle) {\n        setIndex(-1)\n      }\n    },\n    [multiple, toggle, index, selectedIndex, setIndex],\n  )\n\n  const onFocus = useCallback(() => {\n    setFocusedIndex(index)\n  }, [setFocusedIndex, index])\n\n  const onClick = useCallback(() => {\n    onChange(!open)\n    setFocusedIndex(index)\n  }, [index, setFocusedIndex, open, onChange])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLButtonElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          const next = descendants.enabledNextValue(index)\n\n          next?.node.focus()\n        },\n        ArrowUp: () => {\n          const prev = descendants.enabledPrevValue(index)\n\n          prev?.node.focus()\n        },\n        End: () => {\n          const last = descendants.enabledLastValue()\n\n          last?.node.focus()\n        },\n        Home: () => {\n          const first = descendants.enabledFirstValue()\n\n          first?.node.focus()\n        },\n      })\n    },\n    [descendants, index],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"data-expanded\": dataAttr(open),\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [open, rest],\n  )\n\n  const getButtonProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: itemId,\n      type: \"button\",\n      \"aria-controls\": panelId,\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      ...props,\n      ref: mergeRefs(register, ref),\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      itemId,\n      open,\n      panelId,\n      multiple,\n      toggle,\n      disabled,\n      register,\n      onClick,\n      onFocus,\n      onKeyDown,\n    ],\n  )\n\n  const getPanelProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: panelId,\n      \"aria-labelledby\": cx(ariaLabelledby, itemId),\n      role: \"region\",\n      ...props,\n    }),\n    [itemId, panelId],\n  )\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-expanded\": open,\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [open, disabled],\n  )\n\n  return {\n    disabled,\n    open,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-accordion.cjs","names":["createDescendants","createContext","useControllableState","getRootProps: PropGetter","mergeRefs","open","getItemProps: PropGetter","getButtonProps: PropGetter<\"button\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/accordion/use-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  mergeRefs,\n  runKeyAction,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: AccordionDescendantsContext,\n  useDescendant: useAccordionDescendant,\n  useDescendants: useAccordionDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport {\n  AccordionDescendantsContext,\n  useAccordionDescendant,\n  useAccordionDescendants,\n}\n\ninterface AccordionContext extends Omit<\n  UseAccordionReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [AccordionContext, useAccordionContext] = createContext<AccordionContext>(\n  {\n    name: \"AccordionContext\",\n  },\n)\n\nexport { AccordionContext, useAccordionContext }\n\ninterface AccordionItemContext extends Omit<\n  UseAccordionItemReturn,\n  \"getItemProps\"\n> {}\n\nconst [AccordionItemContext, useAccordionItemContext] =\n  createContext<AccordionItemContext>({\n    name: \"AccordionItemContext\",\n  })\n\nexport { AccordionItemContext, useAccordionItemContext }\n\nexport interface UseAccordionProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index(es) of the accordion item to expand.\n   */\n  defaultIndex?: number | number[]\n  /**\n   * The index(es) of the accordion item to expand.\n   */\n  index?: number | number[]\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * If `true`, any expanded accordion item can be collapsed again.\n   *\n   * @default false\n   */\n  toggle?: boolean\n  /**\n   * The callback invoked when accordion items are expanded or collapsed.\n   */\n  onChange?: (index: number | number[]) => void\n}\n\nexport const useAccordion = ({\n  defaultIndex: defaultIndexProp,\n  index: indexProp,\n  multiple,\n  toggle,\n  onChange,\n  ...rest\n}: UseAccordionProps = {}) => {\n  if (\n    (indexProp || defaultIndexProp) != null &&\n    !isArray(indexProp || defaultIndexProp) &&\n    multiple\n  ) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, then 'index' or 'defaultIndex' must be an array.`,\n    )\n  }\n\n  if (multiple && toggle) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, 'toggle' will be ignored. Either remove 'toggle' or 'multiple' depending on whether you want multiple accordions visible or not`,\n    )\n  }\n\n  const descendants = useAccordionDescendants()\n\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n  const [index, setIndex] = useControllableState({\n    defaultValue: () =>\n      multiple ? (defaultIndexProp ?? []) : (defaultIndexProp ?? -1),\n    value: indexProp,\n    onChange,\n  })\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  useEffect(() => {\n    return () => setFocusedIndex(-1)\n  }, [])\n\n  return {\n    descendants,\n    focusedIndex,\n    index,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n    getRootProps,\n  }\n}\n\nexport type UseAccordionReturn = ReturnType<typeof useAccordion>\n\nexport interface UseAccordionItemProps extends HTMLProps {\n  /**\n   * The index of the accordion item.\n   */\n  index: number\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useAccordionItem = ({\n  disabled,\n  index,\n  ...rest\n}: UseAccordionItemProps) => {\n  const itemId = useId()\n  const panelId = useId()\n  const {\n    index: selectedIndex,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n  } = useAccordionContext()\n  const { descendants, register } = useAccordionDescendant({ disabled })\n  const open =\n    index !== -1\n      ? isArray(selectedIndex)\n        ? selectedIndex.includes(index)\n        : selectedIndex === index\n      : false\n\n  if (open && disabled)\n    console.warn(`Accordion: Cannot open a disabled accordion item`)\n\n  const onChange = useCallback(\n    (open: boolean) => {\n      if (index === -1) return\n\n      if (multiple && isArray(selectedIndex)) {\n        setIndex(\n          open\n            ? selectedIndex.concat(index)\n            : selectedIndex.filter((i) => i !== index),\n        )\n      } else if (open) {\n        setIndex(index)\n      } else if (toggle) {\n        setIndex(-1)\n      }\n    },\n    [multiple, toggle, index, selectedIndex, setIndex],\n  )\n\n  const onFocus = useCallback(() => {\n    setFocusedIndex(index)\n  }, [setFocusedIndex, index])\n\n  const onClick = useCallback(() => {\n    onChange(!open)\n    setFocusedIndex(index)\n  }, [index, setFocusedIndex, open, onChange])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLButtonElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          const next = descendants.enabledNextValue(index)\n\n          next?.node.focus()\n        },\n        ArrowUp: () => {\n          const prev = descendants.enabledPrevValue(index)\n\n          prev?.node.focus()\n        },\n        End: () => {\n          const last = descendants.enabledLastValue()\n\n          last?.node.focus()\n        },\n        Home: () => {\n          const first = descendants.enabledFirstValue()\n\n          first?.node.focus()\n        },\n      })\n    },\n    [descendants, index],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"data-expanded\": dataAttr(open),\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [open, rest],\n  )\n\n  const getButtonProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: itemId,\n      type: \"button\",\n      \"aria-controls\": panelId,\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      ...props,\n      ref: mergeRefs(register, ref),\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      itemId,\n      open,\n      panelId,\n      multiple,\n      toggle,\n      disabled,\n      register,\n      onClick,\n      onFocus,\n      onKeyDown,\n    ],\n  )\n\n  const getPanelProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: panelId,\n      \"aria-labelledby\": cx(ariaLabelledby, itemId),\n      role: \"region\",\n      ...props,\n    }),\n    [itemId, panelId],\n  )\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [multiple, toggle, open, disabled],\n  )\n\n  return {\n    disabled,\n    open,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>\n"],"mappings":"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"}

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

@@ -10,13 +10,13 @@ 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_input_border = require('../input/use-input-border.cjs');
 const require_input = require('../input/input.cjs');
 const require_input_element = require('../input/input-element.cjs');
-const require_use_group = require('../group/use-group.cjs');
-require('../group/index.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_hooks_use_combobox_index = require('../../hooks/use-combobox/index.cjs');

package/dist/cjs/components/button/button-group.cjs

@@ -1,9 +1,9 @@
 "use client";
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_button = require('./button.cjs');
 const require_group = require('../group/group.cjs');
 require('../group/index.cjs');
-const require_button = require('./button.cjs');
 const require_icon_button = require('./icon-button.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/cjs/components/chart/area-chart.cjs

@@ -0,0 +1,41 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_area_chart_style = require('./area-chart.style.cjs');
+const require_cartesian_chart = require('./cartesian-chart.cjs');
+const require_use_area_chart = require('./use-area-chart.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+
+//#region src/components/chart/area-chart.tsx
+const { PropsContext: AreaChartPropsContext, usePropsContext: useAreaChartPropsContext, withContext } = require_create_component.createComponent("area-chart", require_area_chart_style.areaChartStyle);
+/**
+* `AreaChart` is a component for drawing area charts to compare multiple sets of data.
+*
+* @see https://yamada-ui.com/docs/components/area-chart
+*/
+const AreaChart = withContext(({ children, series = [], chartProps, ...rest }) => {
+	const { getChartProps, getRootProps } = require_use_area_chart.useAreaChart(rest);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.CartesianChart, {
+		components: (0, react.useMemo)(() => [{
+			component: require_cartesian_chart.ChartArea,
+			fallback: series.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.ChartArea, { ...props }, index))
+		}], [series]),
+		render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.AreaChart, { ...getChartProps({
+			...props,
+			...chartProps
+		}) }),
+		series,
+		...getRootProps(),
+		children
+	});
+})();
+
+//#endregion
+exports.AreaChart = AreaChart;
+exports.AreaChartPropsContext = AreaChartPropsContext;
+exports.useAreaChartPropsContext = useAreaChartPropsContext;
+//# sourceMappingURL=area-chart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart.cjs","names":["createComponent","areaChartStyle","useAreaChart","CartesianChart","ChartArea","OriginalAreaChart"],"sources":["../../../../src/components/chart/area-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { AreaChartStyle } from \"./area-chart.style\"\nimport type { CartesianChartProps, ChartAreaProps } from \"./cartesian-chart\"\nimport type { UseAreaChartProps } from \"./use-area-chart\"\nimport { useMemo } from \"react\"\nimport { AreaChart as OriginalAreaChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { areaChartStyle } from \"./area-chart.style\"\nimport { CartesianChart, ChartArea } from \"./cartesian-chart\"\nimport { useAreaChart } from \"./use-area-chart\"\n\nexport interface AreaChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps<Y>,\n      \"barProps\" | \"components\" | \"lineProps\" | \"render\" | \"series\"\n    >,\n    UseAreaChartProps<Y>,\n    ThemeProps<AreaChartStyle> {\n  /***\n   * If provided, generate areas based on series.\n   */\n  series?: ChartAreaProps<Y>[]\n  /**\n   * Props for the area chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: AreaChartPropsContext,\n  usePropsContext: useAreaChartPropsContext,\n  withContext,\n} = createComponent<AreaChartProps, AreaChartStyle>(\n  \"area-chart\",\n  areaChartStyle,\n)\n\nexport { AreaChartPropsContext, useAreaChartPropsContext }\n\n/**\n * `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/area-chart\n */\nexport const AreaChart = withContext<\"div\", AreaChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: AreaChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useAreaChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartArea,\n          fallback: series.map((props, index) => (\n            <ChartArea key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalAreaChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: AreaChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;;AAkCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACEA,yCACF,cACAC,wCACD;;;;;;AASD,MAAa,YAAY,aACN,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACoB;CACvB,MAAM,EAAE,eAAe,iBAAiBC,oCAAa,KAAK;AAa1D,QACE,2CAACC;EACC,qCAbI,CACJ;GACE,WAAWC;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,2CAACA,qCAAsB,GAAI,SAAX,MAAoB,CACpC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,2CAACC,sBAAkB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE/D;EACR,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}

package/dist/cjs/components/chart/area-chart.namespace.cjs

@@ -0,0 +1,31 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_chart = require('./chart.cjs');
+const require_cartesian_chart = require('./cartesian-chart.cjs');
+const require_area_chart = require('./area-chart.cjs');
+
+//#region src/components/chart/area-chart.namespace.ts
+var area_chart_namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Area: () => require_cartesian_chart.ChartArea,
+	Grid: () => require_cartesian_chart.ChartGrid,
+	Label: () => require_chart.ChartLabel,
+	LabelList: () => require_chart.ChartLabelList,
+	Legend: () => require_chart.ChartLegend,
+	PropsContext: () => require_area_chart.AreaChartPropsContext,
+	ReferenceLine: () => require_cartesian_chart.ChartReferenceLine,
+	Root: () => require_area_chart.AreaChart,
+	Tooltip: () => require_chart.ChartTooltip,
+	XAxis: () => require_cartesian_chart.ChartXAxis,
+	YAxis: () => require_cartesian_chart.ChartYAxis,
+	gradients: () => require_chart.gradients,
+	mergeSeries: () => require_chart.mergeSeries,
+	usePropsContext: () => require_area_chart.useAreaChartPropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'area_chart_namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return area_chart_namespace_exports;
+  }
+});
+//# sourceMappingURL=area-chart.namespace.cjs.map

package/dist/cjs/components/chart/area-chart.namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart.namespace.cjs","names":[],"sources":["../../../../src/components/chart/area-chart.namespace.ts"],"sourcesContent":["export type { AreaChartProps as RootProps } from \"./area-chart\"\nexport {\n  AreaChartPropsContext as PropsContext,\n  AreaChart as Root,\n  useAreaChartPropsContext as usePropsContext,\n} from \"./area-chart\"\nexport type {\n  ChartAreaProps as AreaProps,\n  ChartGridProps as GridProps,\n  ChartReferenceLineProps as ReferenceLineProps,\n  ChartXAxisProps as XAxisProps,\n  ChartXAxisTick as XAxisTick,\n  ChartYAxisProps as YAxisProps,\n  ChartYAxisTick as YAxisTick,\n} from \"./cartesian-chart\"\nexport {\n  ChartArea as Area,\n  ChartGrid as Grid,\n  ChartReferenceLine as ReferenceLine,\n  ChartXAxis as XAxis,\n  ChartYAxis as YAxis,\n} from \"./cartesian-chart\"\nexport type {\n  ChartActiveDot as ActiveDot,\n  ChartLabel as AreaLabel,\n  ChartLabelList as AreaLabelList,\n  ChartDot as Dot,\n  ChartLabelListProps as LabelListProps,\n  ChartLabelProps as LabelProps,\n  ChartLegendProps as LegendProps,\n  ChartTickLine as TickLine,\n  ChartTooltipProps as TooltipProps,\n} from \"./chart\"\nexport {\n  gradients,\n  ChartLabel as Label,\n  ChartLabelList as LabelList,\n  ChartLegend as Legend,\n  mergeSeries,\n  ChartTooltip as Tooltip,\n} from \"./chart\"\n"],"mappings":""}

package/dist/cjs/components/chart/area-chart.style.cjs

@@ -0,0 +1,12 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/chart/area-chart.style.ts
+const areaChartStyle = require_config.defineComponentStyle({ base: {
+	"--legend-swatch-color": "{line-stroke}",
+	"--tooltip-swatch-color": "{line-stroke}"
+} });
+
+//#endregion
+exports.areaChartStyle = areaChartStyle;
+//# sourceMappingURL=area-chart.style.cjs.map

package/dist/cjs/components/chart/area-chart.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/chart/area-chart.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const areaChartStyle = defineComponentStyle({\n  base: {\n    \"--legend-swatch-color\": \"{line-stroke}\",\n    \"--tooltip-swatch-color\": \"{line-stroke}\",\n  },\n})\n\nexport type AreaChartStyle = typeof areaChartStyle\n"],"mappings":";;;;AAEA,MAAa,iBAAiBA,oCAAqB,EACjD,MAAM;CACJ,yBAAyB;CACzB,0BAA0B;CAC3B,EACF,CAAC"}

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

@@ -0,0 +1,41 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_bar_chart_style = require('./bar-chart.style.cjs');
+const require_cartesian_chart = require('./cartesian-chart.cjs');
+const require_use_bar_chart = require('./use-bar-chart.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+
+//#region src/components/chart/bar-chart.tsx
+const { PropsContext: BarChartPropsContext, usePropsContext: useBarChartPropsContext, withContext } = require_create_component.createComponent("bar-chart", require_bar_chart_style.barChartStyle);
+/**
+* `BarChart` is a component for drawing bar charts to compare multiple sets of data.
+*
+* @see https://yamada-ui.com/docs/components/bar-chart
+*/
+const BarChart = withContext(({ children, series = [], chartProps, ...rest }) => {
+	const { getChartProps, getRootProps } = require_use_bar_chart.useBarChart(rest);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.CartesianChart, {
+		components: (0, react.useMemo)(() => [{
+			component: require_cartesian_chart.ChartBar,
+			fallback: series.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.ChartBar, { ...props }, index))
+		}], [series]),
+		render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.BarChart, { ...getChartProps({
+			...props,
+			...chartProps
+		}) }),
+		series,
+		...getRootProps(),
+		children
+	});
+})();
+
+//#endregion
+exports.BarChart = BarChart;
+exports.BarChartPropsContext = BarChartPropsContext;
+exports.useBarChartPropsContext = useBarChartPropsContext;
+//# sourceMappingURL=bar-chart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.cjs","names":["createComponent","barChartStyle","useBarChart","CartesianChart","ChartBar","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport type { UseBarChartProps } from \"./use-bar-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\nimport { useBarChart } from \"./use-bar-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps<Y>,\n      | \"areaFillOpacity\"\n      | \"areaProps\"\n      | \"components\"\n      | \"lineProps\"\n      | \"render\"\n      | \"series\"\n    >,\n    UseBarChartProps<Y>,\n    ThemeProps<BarChartStyle> {\n  /***\n   * If provided, generate bars based on series.\n   */\n  series?: ChartBarProps<Y>[]\n  /**\n   * Props for the bar chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: BarChartPropsContext,\n  usePropsContext: useBarChartPropsContext,\n  withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: BarChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useBarChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartBar,\n          fallback: series.map((props, index) => (\n            <ChartBar key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalBarChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACEA,yCAA8C,aAAaC,sCAAc;;;;;;AAS7E,MAAa,WAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACmB;CACtB,MAAM,EAAE,eAAe,iBAAiBC,kCAAY,KAAK;AAazD,QACE,2CAACC;EACC,qCAbI,CACJ;GACE,WAAWC;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,2CAACA,oCAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,2CAACC,qBAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE9D;EACR,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}

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

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_chart = require('./chart.cjs');
+const require_cartesian_chart = require('./cartesian-chart.cjs');
+const require_bar_chart = require('./bar-chart.cjs');
+
+//#region src/components/chart/bar-chart.namespace.ts
+var bar_chart_namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Bar: () => require_cartesian_chart.ChartBar,
+	Grid: () => require_cartesian_chart.ChartGrid,
+	Label: () => require_chart.ChartLabel,
+	LabelList: () => require_chart.ChartLabelList,
+	Legend: () => require_chart.ChartLegend,
+	PropsContext: () => require_bar_chart.BarChartPropsContext,
+	ReferenceLine: () => require_cartesian_chart.ChartReferenceLine,
+	Root: () => require_bar_chart.BarChart,
+	Tooltip: () => require_chart.ChartTooltip,
+	XAxis: () => require_cartesian_chart.ChartXAxis,
+	YAxis: () => require_cartesian_chart.ChartYAxis,
+	mergeSeries: () => require_chart.mergeSeries,
+	usePropsContext: () => require_bar_chart.useBarChartPropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'bar_chart_namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return bar_chart_namespace_exports;
+  }
+});
+//# sourceMappingURL=bar-chart.namespace.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.namespace.cjs","names":[],"sources":["../../../../src/components/chart/bar-chart.namespace.ts"],"sourcesContent":["export type { BarChartProps as RootProps } from \"./bar-chart\"\nexport {\n  BarChartPropsContext as PropsContext,\n  BarChart as Root,\n  useBarChartPropsContext as usePropsContext,\n} from \"./bar-chart\"\nexport type {\n  ChartBarProps as BarProps,\n  ChartGridProps as GridProps,\n  ChartReferenceLineProps as ReferenceLineProps,\n  ChartXAxisProps as XAxisProps,\n  ChartXAxisTick as XAxisTick,\n  ChartYAxisProps as YAxisProps,\n  ChartYAxisTick as YAxisTick,\n} from \"./cartesian-chart\"\nexport {\n  ChartBar as Bar,\n  ChartGrid as Grid,\n  ChartReferenceLine as ReferenceLine,\n  ChartXAxis as XAxis,\n  ChartYAxis as YAxis,\n} from \"./cartesian-chart\"\nexport type {\n  ChartLabel as BarLabel,\n  ChartLabelList as BarLabelList,\n  ChartLabelListProps as LabelListProps,\n  ChartLabelProps as LabelProps,\n  ChartLegendProps as LegendProps,\n  ChartTickLine as TickLine,\n  ChartTooltipProps as TooltipProps,\n} from \"./chart\"\nexport {\n  ChartLabel as Label,\n  ChartLabelList as LabelList,\n  ChartLegend as Legend,\n  mergeSeries,\n  ChartTooltip as Tooltip,\n} from \"./chart\"\n"],"mappings":""}

package/dist/cjs/components/chart/bar-chart.style.cjs

@@ -0,0 +1,14 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/chart/bar-chart.style.ts
+const barChartStyle = require_config.defineComponentStyle({ base: {
+	"--legend-swatch-color": "{line-stroke}",
+	"--tooltip-cursor-fill-opacity": "0.4",
+	"--tooltip-cursor-stroke": "none",
+	"--tooltip-swatch-color": "{line-stroke}"
+} });
+
+//#endregion
+exports.barChartStyle = barChartStyle;
+//# sourceMappingURL=bar-chart.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/chart/bar-chart.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const barChartStyle = defineComponentStyle({\n  base: {\n    \"--legend-swatch-color\": \"{line-stroke}\",\n    \"--tooltip-cursor-fill-opacity\": \"0.4\",\n    \"--tooltip-cursor-stroke\": \"none\",\n    \"--tooltip-swatch-color\": \"{line-stroke}\",\n  },\n})\n\nexport type BarChartStyle = typeof barChartStyle\n"],"mappings":";;;;AAEA,MAAa,gBAAgBA,oCAAqB,EAChD,MAAM;CACJ,yBAAyB;CACzB,iCAAiC;CACjC,2BAA2B;CAC3B,0BAA0B;CAC3B,EACF,CAAC"}