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

package/dist/cjs/components/form/form.style.cjs

@@ -0,0 +1,108 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+const require_fieldset_style = require('../fieldset/fieldset.style.cjs');
+require('../fieldset/index.cjs');
+
+//#region src/components/form/form.style.ts
+const formStyle = require_config.defineComponentSlotStyle({
+	base: {
+		body: {
+			display: "flex",
+			flexDirection: "column",
+			w: "full"
+		},
+		description: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "inline-flex"
+		},
+		footer: {
+			display: "flex",
+			justifyContent: "flex-end"
+		},
+		group: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		header: {
+			display: "flex",
+			flexDirection: "column",
+			w: "full"
+		},
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			w: "full"
+		},
+		submitButton: {},
+		title: {
+			display: "flex",
+			fontWeight: "medium"
+		}
+	},
+	variants: {
+		elevated: { group: require_fieldset_style.fieldsetStyle.variants?.elevated.root },
+		outline: { group: require_fieldset_style.fieldsetStyle.variants?.outline.root },
+		panel: { group: require_fieldset_style.fieldsetStyle.variants?.panel.root },
+		plain: { group: require_fieldset_style.fieldsetStyle.variants?.plain.root }
+	},
+	sizes: {
+		sm: {
+			body: { gap: "5" },
+			description: {
+				fontSize: "sm",
+				gap: "1"
+			},
+			footer: { gap: "3" },
+			group: { gap: require_fieldset_style.fieldsetStyle.sizes?.sm.root.gap },
+			header: { gap: "1" },
+			root: { gap: "5" },
+			title: {
+				fontSize: "xl",
+				gap: "1"
+			}
+		},
+		md: {
+			body: { gap: "6" },
+			description: {
+				fontSize: "sm",
+				gap: "1"
+			},
+			footer: { gap: "4" },
+			group: { gap: require_fieldset_style.fieldsetStyle.sizes?.md.root.gap },
+			header: { gap: "1" },
+			root: { gap: "6" },
+			title: {
+				fontSize: "2xl",
+				gap: "1"
+			}
+		},
+		lg: {
+			body: { gap: "8" },
+			description: {
+				fontSize: "md",
+				gap: "1"
+			},
+			footer: { gap: "6" },
+			group: { gap: require_fieldset_style.fieldsetStyle.sizes?.lg.root.gap },
+			header: { gap: "1" },
+			root: { gap: "8" },
+			title: {
+				fontSize: "3xl",
+				gap: "1"
+			}
+		}
+	},
+	compounds: require_fieldset_style.fieldsetStyle.compounds?.map(({ css, ...rest }) => ({
+		css: { group: css.root },
+		...rest
+	})),
+	defaultProps: {
+		size: "md",
+		variant: "plain"
+	}
+});
+
+//#endregion
+exports.formStyle = formStyle;
+//# sourceMappingURL=form.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.style.cjs","names":["defineComponentSlotStyle","fieldsetStyle"],"sources":["../../../../src/components/form/form.style.ts"],"sourcesContent":["import type { ComponentCompound, CSSSlotObject } from \"../../core\"\nimport { defineComponentSlotStyle } from \"../../core\"\nimport { fieldsetStyle } from \"../fieldset\"\n\nexport const formStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    footer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    submitButton: {},\n    title: {\n      display: \"flex\",\n      fontWeight: \"medium\",\n    },\n  },\n\n  variants: {\n    elevated: { group: fieldsetStyle.variants?.elevated.root },\n    outline: { group: fieldsetStyle.variants?.outline.root },\n    panel: { group: fieldsetStyle.variants?.panel.root },\n    plain: { group: fieldsetStyle.variants?.plain.root },\n  },\n\n  sizes: {\n    sm: {\n      body: { gap: \"5\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"3\" },\n      group: { gap: fieldsetStyle.sizes?.sm.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"5\" },\n      title: { fontSize: \"xl\", gap: \"1\" },\n    },\n    md: {\n      body: { gap: \"6\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"4\" },\n      group: { gap: fieldsetStyle.sizes?.md.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"6\" },\n      title: { fontSize: \"2xl\", gap: \"1\" },\n    },\n    lg: {\n      body: { gap: \"8\" },\n      description: { fontSize: \"md\", gap: \"1\" },\n      footer: { gap: \"6\" },\n      group: { gap: fieldsetStyle.sizes?.lg.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"8\" },\n      title: { fontSize: \"3xl\", gap: \"1\" },\n    },\n  },\n\n  compounds: (\n    fieldsetStyle.compounds as ComponentCompound<CSSSlotObject>[] | undefined\n  )?.map(({ css, ...rest }) => ({\n    css: { group: css.root },\n    ...rest,\n  })),\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FormStyle = typeof formStyle\n"],"mappings":";;;;;;AAIA,MAAa,YAAYA,wCAAyB;CAChD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,gBAAgB;GACjB;EACD,OAAO;GACL,SAAS;GACT,eAAe;GAChB;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc,EAAE;EAChB,OAAO;GACL,SAAS;GACT,YAAY;GACb;EACF;CAED,UAAU;EACR,UAAU,EAAE,OAAOC,qCAAc,UAAU,SAAS,MAAM;EAC1D,SAAS,EAAE,OAAOA,qCAAc,UAAU,QAAQ,MAAM;EACxD,OAAO,EAAE,OAAOA,qCAAc,UAAU,MAAM,MAAM;EACpD,OAAO,EAAE,OAAOA,qCAAc,UAAU,MAAM,MAAM;EACrD;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAKA,qCAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAM,KAAK;IAAK;GACpC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAKA,qCAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAKA,qCAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACF;CAED,WACEA,qCAAc,WACb,KAAK,EAAE,KAAK,GAAG,YAAY;EAC5B,KAAK,EAAE,OAAO,IAAI,MAAM;EACxB,GAAG;EACJ,EAAE;CAEH,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/cjs/components/form/index.cjs

@@ -0,0 +1,23 @@
+const require_form_style = require('./form.style.cjs');
+const require_form = require('./form.cjs');
+const require_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'Form', {
+  enumerable: true,
+  get: function () {
+    return require_namespace.namespace_exports;
+  }
+});
+exports.FormBody = require_form.FormBody;
+exports.FormContext = require_form.FormContext;
+exports.FormDescription = require_form.FormDescription;
+exports.FormFooter = require_form.FormFooter;
+exports.FormGroup = require_form.FormGroup;
+exports.FormHeader = require_form.FormHeader;
+exports.FormPropsContext = require_form.FormPropsContext;
+exports.FormRoot = require_form.FormRoot;
+exports.FormSubmitButton = require_form.FormSubmitButton;
+exports.FormTitle = require_form.FormTitle;
+exports.formStyle = require_form_style.formStyle;
+exports.useFormContext = require_form.useFormContext;
+exports.useFormPropsContext = require_form.useFormPropsContext;

package/dist/cjs/components/form/namespace.cjs

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_form = require('./form.cjs');
+
+//#region src/components/form/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Body: () => require_form.FormBody,
+	Description: () => require_form.FormDescription,
+	Footer: () => require_form.FormFooter,
+	Group: () => require_form.FormGroup,
+	Header: () => require_form.FormHeader,
+	PropsContext: () => require_form.FormPropsContext,
+	Root: () => require_form.FormRoot,
+	SubmitButton: () => require_form.FormSubmitButton,
+	Title: () => require_form.FormTitle,
+	usePropsContext: () => require_form.useFormPropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/form/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/form/namespace.ts"],"sourcesContent":["export {\n  FormBody as Body,\n  FormDescription as Description,\n  FormFooter as Footer,\n  FormGroup as Group,\n  FormHeader as Header,\n  FormPropsContext as PropsContext,\n  FormRoot as Root,\n  FormSubmitButton as SubmitButton,\n  FormTitle as Title,\n  useFormPropsContext as usePropsContext,\n} from \"./form\"\nexport type {\n  FormBodyProps as BodyProps,\n  FormDescriptionProps as DescriptionProps,\n  FormFooterProps as FooterProps,\n  FormGroupProps as GroupProps,\n  FormHeaderProps as HeaderProps,\n  FormRootProps as RootProps,\n  FormSubmitButtonProps as SubmitButtonProps,\n  FormTitleProps as TitleProps,\n} from \"./form\"\n"],"mappings":""}

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

@@ -3,13 +3,13 @@
 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_group = require('../group/group.cjs');
+require('../group/index.cjs');
 const require_use_field_props = require('../field/use-field-props.cjs');
 require('../field/index.cjs');
 const require_input = require('./input.cjs');
 const require_input_addon = require('./input-addon.cjs');
 const require_input_element = require('./input-element.cjs');
-const require_group = require('../group/group.cjs');
-require('../group/index.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 

package/dist/cjs/components/input/input.style.cjs

@@ -33,6 +33,24 @@ const inputStyle = require_config.defineComponentStyle({
 			border: "1px solid transparent",
 			focusRingColor: "{focus-border-color}",
 			focusVisibleRing: "inside",
+			_container: [
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"elevated\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"elevated\""
+				}
+			],
 			_invalid: {
 				borderColor: "{error-border-color}",
 				focusRingColor: "{error-border-color}"
@@ -57,6 +75,24 @@ const inputStyle = require_config.defineComponentStyle({
 			border: "1px solid {colors.border}",
 			focusRingColor: "{focus-border-color}",
 			focusVisibleRing: "inside",
+			_container: [
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"elevated\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"elevated\""
+				}
+			],
 			_invalid: {
 				borderColor: "{error-border-color}",
 				focusRingColor: "{error-border-color}"

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

@@ -1 +1 @@
-{"version":3,"file":"input.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/input/input.style.ts"],"sourcesContent":["import type { CSSObject } from \"../../core\"\nimport { defineComponentStyle } from \"../../core\"\nimport { wrapWithKey } from \"../../utils\"\n\nexport const getInputPaddingStartResetStyle = (key?: string) =>\n  ({\n    \"&:not([data-input-element] + &)\": wrapWithKey({ ps: \"0px\" }, key),\n  }) satisfies CSSObject\n\nexport const getInputPaddingEndResetStyle = (key?: string) =>\n  ({\n    \"&:not(:has(+ [data-input-element]))\": wrapWithKey({ pe: \"0px\" }, key),\n  }) satisfies CSSObject\n\nexport const getInputHeightStyle = (height?: string, key?: string) =>\n  ({\n    \"&:has(+ [data-input-element])\": wrapWithKey({ pe: height }, key),\n    \"& ~ [data-input-element]\": { minW: height },\n    \"--height\": height,\n    \"[data-input-element] + &\": wrapWithKey({ ps: height }, key),\n    \"[data-input-element]:has(~ &)\": { minW: height },\n    minH: height,\n  }) satisfies CSSObject\n\nexport const inputStyle = defineComponentStyle({\n  base: {\n    \"--error-border-color\": \"colors.border.error\",\n    \"--focus-border-color\": \"colorScheme.outline\",\n    appearance: \"none\",\n    minW: \"0\",\n    position: \"relative\",\n    rounded: \"l2\",\n    textAlign: \"start\",\n    transitionDuration: \"moderate\",\n    transitionProperty: \"common\",\n    w: \"full\",\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n  },\n\n  variants: {\n    filled: {\n      bg: \"bg.panel\",\n      border: \"1px solid transparent\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    flushed: {\n      bg: \"transparent\",\n      borderBottomColor: \"colorScheme.muted\",\n      borderBottomWidth: \"1px\",\n      rounded: \"0px\",\n      _focusVisible: {\n        borderColor: \"{focus-border-color}\",\n        boxShadow: \"0px 1px 0px 0px {focus-border-color}\",\n        outline: \"none\",\n      },\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        _focusVisible: {\n          boxShadow: \"0px 1px 0px 0px {error-border-color}\",\n        },\n      },\n    },\n    outline: {\n      border: \"1px solid {colors.border}\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    plain: {\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      \"--space-x\": \"spaces.2\",\n      \"--space-y\": \"spaces.1.5\",\n      fontSize: \"xs\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.8}\"),\n    },\n    sm: {\n      \"--space-x\": \"spaces.2.5\",\n      \"--space-y\": \"spaces.2\",\n      fontSize: \"sm\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.9}\"),\n    },\n    md: {\n      \"--space-x\": \"spaces.3\",\n      \"--space-y\": \"spaces.2\",\n      fontSize: \"md\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.10}\"),\n    },\n    lg: {\n      \"--space-x\": \"spaces.3.5\",\n      \"--space-y\": \"spaces.2.5\",\n      fontSize: \"lg\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.11}\"),\n    },\n    xl: {\n      \"--space-x\": \"spaces.4\",\n      \"--space-y\": \"spaces.3\",\n      fontSize: \"xl\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.12}\"),\n    },\n    \"2xl\": {\n      \"--space-x\": \"spaces.4\",\n      \"--space-y\": \"spaces.3\",\n      fontSize: \"xl\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.14}\"),\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        ...getInputPaddingStartResetStyle(),\n        ...getInputPaddingEndResetStyle(),\n      },\n      variant: \"flushed\",\n      layer: \"variant\",\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n  },\n})\n\nexport type InputStyle = typeof inputStyle\n"],"mappings":";;;;;AAIA,MAAa,kCAAkC,SAC5C,EACC,sFAA+C,EAAE,IAAI,OAAO,EAAE,IAAI,EACnE;AAEH,MAAa,gCAAgC,SAC1C,EACC,0FAAmD,EAAE,IAAI,OAAO,EAAE,IAAI,EACvE;AAEH,MAAa,uBAAuB,QAAiB,SAClD;CACC,oFAA6C,EAAE,IAAI,QAAQ,EAAE,IAAI;CACjE,4BAA4B,EAAE,MAAM,QAAQ;CAC5C,YAAY;CACZ,+EAAwC,EAAE,IAAI,QAAQ,EAAE,IAAI;CAC5D,iCAAiC,EAAE,MAAM,QAAQ;CACjD,MAAM;CACP;AAEH,MAAa,aAAaA,oCAAqB;CAC7C,MAAM;EACJ,wBAAwB;EACxB,wBAAwB;EACxB,YAAY;EACZ,MAAM;EACN,UAAU;EACV,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;EACH,WAAW,EACT,YAAY,YACb;EACF;CAED,UAAU;EACR,QAAQ;GACN,IAAI;GACJ,QAAQ;GACR,gBAAgB;GAChB,kBAAkB;GAClB,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,SAAS;GACP,IAAI;GACJ,mBAAmB;GACnB,mBAAmB;GACnB,SAAS;GACT,eAAe;IACb,aAAa;IACb,WAAW;IACX,SAAS;IACV;GACD,UAAU;IACR,aAAa;IACb,eAAe,EACb,WAAW,wCACZ;IACF;GACF;EACD,SAAS;GACP,QAAQ;GACR,gBAAgB;GAChB,kBAAkB;GAClB,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO;GACL,gBAAgB;GAChB,kBAAkB;GAClB,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,YAAY;GACpC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,YAAY;GACpC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACD,OAAO;GACL,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACF;CAED,WAAW,CACT;EACE,KAAK;GACH,GAAG,gCAAgC;GACnC,GAAG,8BAA8B;GAClC;EACD,SAAS;EACT,OAAO;EACR,CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
+{"version":3,"file":"input.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/input/input.style.ts"],"sourcesContent":["import type { CSSObject } from \"../../core\"\nimport { defineComponentStyle } from \"../../core\"\nimport { wrapWithKey } from \"../../utils\"\n\nexport const getInputPaddingStartResetStyle = (key?: string) =>\n  ({\n    \"&:not([data-input-element] + &)\": wrapWithKey({ ps: \"0px\" }, key),\n  }) satisfies CSSObject\n\nexport const getInputPaddingEndResetStyle = (key?: string) =>\n  ({\n    \"&:not(:has(+ [data-input-element]))\": wrapWithKey({ pe: \"0px\" }, key),\n  }) satisfies CSSObject\n\nexport const getInputHeightStyle = (height?: string, key?: string) =>\n  ({\n    \"&:has(+ [data-input-element])\": wrapWithKey({ pe: height }, key),\n    \"& ~ [data-input-element]\": { minW: height },\n    \"--height\": height,\n    \"[data-input-element] + &\": wrapWithKey({ ps: height }, key),\n    \"[data-input-element]:has(~ &)\": { minW: height },\n    minH: height,\n  }) satisfies CSSObject\n\nexport const inputStyle = defineComponentStyle({\n  base: {\n    \"--error-border-color\": \"colors.border.error\",\n    \"--focus-border-color\": \"colorScheme.outline\",\n    appearance: \"none\",\n    minW: \"0\",\n    position: \"relative\",\n    rounded: \"l2\",\n    textAlign: \"start\",\n    transitionDuration: \"moderate\",\n    transitionProperty: \"common\",\n    w: \"full\",\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n  },\n\n  variants: {\n    filled: {\n      bg: \"bg.panel\",\n      border: \"1px solid transparent\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    flushed: {\n      bg: \"transparent\",\n      borderBottomColor: \"colorScheme.muted\",\n      borderBottomWidth: \"1px\",\n      rounded: \"0px\",\n      _focusVisible: {\n        borderColor: \"{focus-border-color}\",\n        boxShadow: \"0px 1px 0px 0px {focus-border-color}\",\n        outline: \"none\",\n      },\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        _focusVisible: {\n          boxShadow: \"0px 1px 0px 0px {error-border-color}\",\n        },\n      },\n    },\n    outline: {\n      border: \"1px solid {colors.border}\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    plain: {\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      \"--space-x\": \"spaces.2\",\n      \"--space-y\": \"spaces.1.5\",\n      fontSize: \"xs\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.8}\"),\n    },\n    sm: {\n      \"--space-x\": \"spaces.2.5\",\n      \"--space-y\": \"spaces.2\",\n      fontSize: \"sm\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.9}\"),\n    },\n    md: {\n      \"--space-x\": \"spaces.3\",\n      \"--space-y\": \"spaces.2\",\n      fontSize: \"md\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.10}\"),\n    },\n    lg: {\n      \"--space-x\": \"spaces.3.5\",\n      \"--space-y\": \"spaces.2.5\",\n      fontSize: \"lg\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.11}\"),\n    },\n    xl: {\n      \"--space-x\": \"spaces.4\",\n      \"--space-y\": \"spaces.3\",\n      fontSize: \"xl\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.12}\"),\n    },\n    \"2xl\": {\n      \"--space-x\": \"spaces.4\",\n      \"--space-y\": \"spaces.3\",\n      fontSize: \"xl\",\n      px: \"{space-x}\",\n      ...getInputHeightStyle(\"{sizes.14}\"),\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        ...getInputPaddingStartResetStyle(),\n        ...getInputPaddingEndResetStyle(),\n      },\n      variant: \"flushed\",\n      layer: \"variant\",\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n  },\n})\n\nexport type InputStyle = typeof inputStyle\n"],"mappings":";;;;;AAIA,MAAa,kCAAkC,SAC5C,EACC,sFAA+C,EAAE,IAAI,OAAO,EAAE,IAAI,EACnE;AAEH,MAAa,gCAAgC,SAC1C,EACC,0FAAmD,EAAE,IAAI,OAAO,EAAE,IAAI,EACvE;AAEH,MAAa,uBAAuB,QAAiB,SAClD;CACC,oFAA6C,EAAE,IAAI,QAAQ,EAAE,IAAI;CACjE,4BAA4B,EAAE,MAAM,QAAQ;CAC5C,YAAY;CACZ,+EAAwC,EAAE,IAAI,QAAQ,EAAE,IAAI;CAC5D,iCAAiC,EAAE,MAAM,QAAQ;CACjD,MAAM;CACP;AAEH,MAAa,aAAaA,oCAAqB;CAC7C,MAAM;EACJ,wBAAwB;EACxB,wBAAwB;EACxB,YAAY;EACZ,MAAM;EACN,UAAU;EACV,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;EACH,WAAW,EACT,YAAY,YACb;EACF;CAED,UAAU;EACR,QAAQ;GACN,IAAI;GACJ,QAAQ;GACR,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,SAAS;GACP,IAAI;GACJ,mBAAmB;GACnB,mBAAmB;GACnB,SAAS;GACT,eAAe;IACb,aAAa;IACb,WAAW;IACX,SAAS;IACV;GACD,UAAU;IACR,aAAa;IACb,eAAe,EACb,WAAW,wCACZ;IACF;GACF;EACD,SAAS;GACP,QAAQ;GACR,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO;GACL,gBAAgB;GAChB,kBAAkB;GAClB,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,YAAY;GACpC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,YAAY;GACpC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACD,IAAI;GACF,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACD,OAAO;GACL,aAAa;GACb,aAAa;GACb,UAAU;GACV,IAAI;GACJ,GAAG,oBAAoB,aAAa;GACrC;EACF;CAED,WAAW,CACT;EACE,KAAK;GACH,GAAG,gCAAgC;GACnC,GAAG,8BAA8B;GAClC;EACD,SAAS;EACT,OAAO;EACR,CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/cjs/components/loading/oval.cjs

@@ -38,9 +38,8 @@ const Oval = require_loading.withContext(({ dur = "1s", secondaryColor, ...rest
 					animationIterationCount: "infinite",
 					animationName: "spin",
 					animationTimingFunction: "linear",
-					asChild: true,
-					transformOrigin: "18px 18px",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18" })
+					d: "M36 18c0-9.94-8.06-18-18-18",
+					transformOrigin: "18px 18px"
 				})]
 			})
 		})

package/dist/cjs/components/loading/oval.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"oval.cjs","names":["withContext","Icon","styled","initialProps","superProps","varAttr"],"sources":["../../../../src/components/loading/oval.tsx"],"sourcesContent":["\"use client\"\n\nimport type { LoadingProps } from \"./loading\"\nimport { styled, varAttr } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { Icon } from \"../icon\"\nimport { initialProps, superProps, withContext } from \"./loading\"\n\nexport interface OvalProps extends LoadingProps {}\n\n/**\n * `Loading` is a component displayed during waiting times, such as when data is being loaded.\n *\n * @see https://yamada-ui.com/docs/components/feedback/loading\n */\nexport const Oval = withContext<\"svg\", OvalProps>(\n  ({ dur = \"1s\", secondaryColor, ...rest }) => {\n    dur = isString(dur) ? parseFloat(dur) : dur\n\n    return (\n      <Icon stroke=\"currentColor\" viewBox=\"0 0 38 38\" {...rest}>\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <g strokeWidth=\"2\" transform=\"translate(1 1)\">\n            <styled.circle\n              {...(secondaryColor\n                ? { stroke: \"{secondary-color}\" }\n                : { strokeOpacity: \".5\" })}\n              cx=\"18px\"\n              cy=\"18px\"\n              r=\"18px\"\n            />\n            <styled.path\n              animationDuration={`${dur}s`}\n              animationIterationCount=\"infinite\"\n              animationName=\"spin\"\n              animationTimingFunction=\"linear\"\n              asChild\n              transformOrigin=\"18px 18px\"\n            >\n              <path d=\"M36 18c0-9.94-8.06-18-18-18\" />\n            </styled.path>\n          </g>\n        </g>\n      </Icon>\n    )\n  },\n)(initialProps, ({ secondaryColor, ...props }) => {\n  const rest = superProps(props)\n\n  return {\n    \"--secondary-color\": varAttr(secondaryColor, \"colors\"),\n    secondaryColor,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAa,OAAOA,6BACjB,EAAE,MAAM,MAAM,gBAAgB,GAAG,WAAW;AAC3C,uDAAe,IAAI,GAAG,WAAW,IAAI,GAAG;AAExC,QACE,2CAACC;EAAK,QAAO;EAAe,SAAQ;EAAY,GAAI;YAClD,2CAAC;GAAE,MAAK;GAAO,UAAS;aACtB,4CAAC;IAAE,aAAY;IAAI,WAAU;eAC3B,2CAACC,uBAAO;KACN,GAAK,iBACD,EAAE,QAAQ,qBAAqB,GAC/B,EAAE,eAAe,MAAM;KAC3B,IAAG;KACH,IAAG;KACH,GAAE;MACF,EACF,2CAACA,uBAAO;KACN,mBAAmB,GAAG,IAAI;KAC1B,yBAAwB;KACxB,eAAc;KACd,yBAAwB;KACxB;KACA,iBAAgB;eAEhB,2CAAC,UAAK,GAAE,gCAAgC;MAC5B;KACZ;IACF;GACC;EAGZ,CAACC,+BAAe,EAAE,gBAAgB,GAAG,YAAY;CAChD,MAAM,OAAOC,2BAAW,MAAM;AAE9B,QAAO;EACL,qBAAqBC,oBAAQ,gBAAgB,SAAS;EACtD;EACA,GAAG;EACJ;EACD"}
+{"version":3,"file":"oval.cjs","names":["withContext","Icon","styled","initialProps","superProps","varAttr"],"sources":["../../../../src/components/loading/oval.tsx"],"sourcesContent":["\"use client\"\n\nimport type { LoadingProps } from \"./loading\"\nimport { styled, varAttr } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { Icon } from \"../icon\"\nimport { initialProps, superProps, withContext } from \"./loading\"\n\nexport interface OvalProps extends LoadingProps {}\n\n/**\n * `Loading` is a component displayed during waiting times, such as when data is being loaded.\n *\n * @see https://yamada-ui.com/docs/components/feedback/loading\n */\nexport const Oval = withContext<\"svg\", OvalProps>(\n  ({ dur = \"1s\", secondaryColor, ...rest }) => {\n    dur = isString(dur) ? parseFloat(dur) : dur\n\n    return (\n      <Icon stroke=\"currentColor\" viewBox=\"0 0 38 38\" {...rest}>\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <g strokeWidth=\"2\" transform=\"translate(1 1)\">\n            <styled.circle\n              {...(secondaryColor\n                ? { stroke: \"{secondary-color}\" }\n                : { strokeOpacity: \".5\" })}\n              cx=\"18px\"\n              cy=\"18px\"\n              r=\"18px\"\n            />\n            <styled.path\n              animationDuration={`${dur}s`}\n              animationIterationCount=\"infinite\"\n              animationName=\"spin\"\n              animationTimingFunction=\"linear\"\n              d=\"M36 18c0-9.94-8.06-18-18-18\"\n              transformOrigin=\"18px 18px\"\n            />\n          </g>\n        </g>\n      </Icon>\n    )\n  },\n)(initialProps, ({ secondaryColor, ...props }) => {\n  const rest = superProps(props)\n\n  return {\n    \"--secondary-color\": varAttr(secondaryColor, \"colors\"),\n    secondaryColor,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAa,OAAOA,6BACjB,EAAE,MAAM,MAAM,gBAAgB,GAAG,WAAW;AAC3C,uDAAe,IAAI,GAAG,WAAW,IAAI,GAAG;AAExC,QACE,2CAACC;EAAK,QAAO;EAAe,SAAQ;EAAY,GAAI;YAClD,2CAAC;GAAE,MAAK;GAAO,UAAS;aACtB,4CAAC;IAAE,aAAY;IAAI,WAAU;eAC3B,2CAACC,uBAAO;KACN,GAAK,iBACD,EAAE,QAAQ,qBAAqB,GAC/B,EAAE,eAAe,MAAM;KAC3B,IAAG;KACH,IAAG;KACH,GAAE;MACF,EACF,2CAACA,uBAAO;KACN,mBAAmB,GAAG,IAAI;KAC1B,yBAAwB;KACxB,eAAc;KACd,yBAAwB;KACxB,GAAE;KACF,iBAAgB;MAChB;KACA;IACF;GACC;EAGZ,CAACC,+BAAe,EAAE,gBAAgB,GAAG,YAAY;CAChD,MAAM,OAAOC,2BAAW,MAAM;AAE9B,QAAO;EACL,qBAAqBC,oBAAQ,gBAAgB,SAAS;EACtD;EACA,GAAG;EACJ;EACD"}

package/dist/cjs/components/modal/modal.cjs

@@ -10,10 +10,10 @@ const require_factory$1 = require('../motion/factory.cjs');
 require('../motion/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_button = require('../button/button.cjs');
 require('../button/index.cjs');
+const require_popover = require('../popover/popover.cjs');
+require('../popover/index.cjs');
 const require_close_button = require('../close-button/close-button.cjs');
 require('../close-button/index.cjs');
 const require_modal_style = require('./modal.style.cjs');

package/dist/cjs/components/native-accordion/index.cjs

@@ -0,0 +1,23 @@
+const require_native_accordion_style = require('./native-accordion.style.cjs');
+const require_use_native_accordion = require('./use-native-accordion.cjs');
+const require_native_accordion = require('./native-accordion.cjs');
+const require_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'NativeAccordion', {
+  enumerable: true,
+  get: function () {
+    return require_namespace.namespace_exports;
+  }
+});
+exports.NativeAccordionButton = require_native_accordion.NativeAccordionButton;
+exports.NativeAccordionContext = require_use_native_accordion.NativeAccordionContext;
+exports.NativeAccordionIcon = require_native_accordion.NativeAccordionIcon;
+exports.NativeAccordionItem = require_native_accordion.NativeAccordionItem;
+exports.NativeAccordionPanel = require_native_accordion.NativeAccordionPanel;
+exports.NativeAccordionPropsContext = require_native_accordion.NativeAccordionPropsContext;
+exports.NativeAccordionRoot = require_native_accordion.NativeAccordionRoot;
+exports.nativeAccordionStyle = require_native_accordion_style.nativeAccordionStyle;
+exports.useNativeAccordion = require_use_native_accordion.useNativeAccordion;
+exports.useNativeAccordionContext = require_use_native_accordion.useNativeAccordionContext;
+exports.useNativeAccordionItem = require_use_native_accordion.useNativeAccordionItem;
+exports.useNativeAccordionPropsContext = require_native_accordion.useNativeAccordionPropsContext;

package/dist/cjs/components/native-accordion/namespace.cjs

@@ -0,0 +1,22 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_native_accordion = require('./native-accordion.cjs');
+
+//#region src/components/native-accordion/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Button: () => require_native_accordion.NativeAccordionButton,
+	Icon: () => require_native_accordion.NativeAccordionIcon,
+	Item: () => require_native_accordion.NativeAccordionItem,
+	Panel: () => require_native_accordion.NativeAccordionPanel,
+	PropsContext: () => require_native_accordion.NativeAccordionPropsContext,
+	Root: () => require_native_accordion.NativeAccordionRoot,
+	usePropsContext: () => require_native_accordion.useNativeAccordionPropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/native-accordion/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/native-accordion/namespace.ts"],"sourcesContent":["export {\n  NativeAccordionButton as Button,\n  NativeAccordionIcon as Icon,\n  NativeAccordionItem as Item,\n  NativeAccordionPanel as Panel,\n  NativeAccordionPropsContext as PropsContext,\n  NativeAccordionRoot as Root,\n  useNativeAccordionPropsContext as usePropsContext,\n} from \"./native-accordion\"\nexport type {\n  NativeAccordionButtonProps as ButtonProps,\n  NativeAccordionIconProps as IconProps,\n  NativeAccordionItemProps as ItemProps,\n  NativeAccordionPanelProps as PanelProps,\n  NativeAccordionRootProps as RootProps,\n} from \"./native-accordion\"\n"],"mappings":""}

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

@@ -0,0 +1,102 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_children = require('../../utils/children.cjs');
+const require_context = require('../../utils/context.cjs');
+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_native_accordion_style = require('./native-accordion.style.cjs');
+const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
+require('../icon/index.cjs');
+const require_use_native_accordion = require('./use-native-accordion.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/native-accordion/native-accordion.tsx
+const [ItemComponentContext, useItemComponentContext] = require_context.createContext({ name: "ItemComponentContext" });
+const { ComponentContext, PropsContext: NativeAccordionPropsContext, useComponentContext, usePropsContext: useNativeAccordionPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("native-accordion", require_native_accordion_style.nativeAccordionStyle);
+/**
+* `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the native HTML details element.
+*
+* @see https://yamada-ui.com/docs/components/native-accordion
+*/
+const NativeAccordionRoot = withProvider(({ children, icon, iconHidden, items, ...props }) => {
+	const { name, getRootProps } = require_use_native_accordion.useNativeAccordion(props);
+	const computedChildren = (0, react.useMemo)(() => {
+		if (children) return children;
+		return items?.map((props$1, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAccordionItem, { ...props$1 }, index));
+	}, [children, items]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_native_accordion.NativeAccordionContext, {
+		value: (0, react.useMemo)(() => ({ name }), [name]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+			value: (0, react.useMemo)(() => ({
+				icon,
+				iconHidden
+			}), [icon, iconHidden]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+				...getRootProps(),
+				children: computedChildren
+			})
+		})
+	});
+}, "root")();
+const NativeAccordionItem = withContext(({ button, children, icon, ...rest }) => {
+	const { disabled, getButtonProps, getIconProps, getItemProps, getPanelProps } = require_use_native_accordion.useNativeAccordionItem(rest);
+	const [omittedChildren, customAccordionButton, customAccordionPanel] = require_children.useSplitChildren(children, NativeAccordionButton, NativeAccordionPanel);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			disabled,
+			icon,
+			getButtonProps,
+			getIconProps,
+			getPanelProps
+		}), [
+			disabled,
+			getIconProps,
+			getPanelProps,
+			getButtonProps,
+			icon
+		]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.details, {
+			...getItemProps(),
+			children: [customAccordionButton ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAccordionButton, { children: button }), customAccordionPanel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAccordionPanel, { children: omittedChildren })]
+		})
+	});
+}, "item")();
+const NativeAccordionButton = withContext(({ children, icon: customIcon, ...rest }) => {
+	const { icon: rootIcon } = useComponentContext();
+	const { icon: itemIcon, getButtonProps } = useItemComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.summary, {
+		...getButtonProps(rest),
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAccordionIcon, { children: customIcon ?? itemIcon ?? rootIcon })]
+	});
+}, "button")();
+const NativeAccordionIcon = withContext(({ children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_down_icon.ChevronDownIcon, {}), ...rest }) => {
+	const { iconHidden } = useComponentContext();
+	const { getIconProps } = useItemComponentContext();
+	if (iconHidden) return null;
+	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, getIconProps({
+		...rest,
+		...children.props
+	}));
+	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
+}, "icon")();
+const NativeAccordionPanel = withContext(({ children, ...rest }) => {
+	const { getPanelProps } = useItemComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+		...getPanelProps(rest),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, { children })
+	});
+}, "panel")();
+
+//#endregion
+exports.NativeAccordionButton = NativeAccordionButton;
+exports.NativeAccordionIcon = NativeAccordionIcon;
+exports.NativeAccordionItem = NativeAccordionItem;
+exports.NativeAccordionPanel = NativeAccordionPanel;
+exports.NativeAccordionPropsContext = NativeAccordionPropsContext;
+exports.NativeAccordionRoot = NativeAccordionRoot;
+exports.useNativeAccordionPropsContext = useNativeAccordionPropsContext;
+//# sourceMappingURL=native-accordion.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"native-accordion.cjs","names":["createContext","createSlotComponent","nativeAccordionStyle","useNativeAccordion","props","NativeAccordionContext","styled","useNativeAccordionItem","useSplitChildren","ChevronDownIcon","Children"],"sources":["../../../../src/components/native-accordion/native-accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativeAccordionStyle } from \"./native-accordion.style\"\nimport type {\n  UseNativeAccordionItemProps,\n  UseNativeAccordionItemReturn,\n  UseNativeAccordionProps,\n} from \"./use-native-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, useSplitChildren } from \"../../utils\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { nativeAccordionStyle } from \"./native-accordion.style\"\nimport {\n  NativeAccordionContext,\n  useNativeAccordion,\n  useNativeAccordionItem,\n} from \"./use-native-accordion\"\n\nexport interface NativeAccordionItem extends NativeAccordionItemProps {}\n\ninterface ComponentContext extends Pick<\n  NativeAccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface NativeAccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<NativeAccordionStyle>,\n    UseNativeAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNode\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?: NativeAccordionItem[]\n}\n\ninterface ItemComponentContext\n  extends\n    Pick<NativeAccordionItemProps, \"icon\">,\n    Omit<UseNativeAccordionItemReturn, \"getItemProps\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: NativeAccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useNativeAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  NativeAccordionRootProps,\n  NativeAccordionStyle,\n  ComponentContext\n>(\"native-accordion\", nativeAccordionStyle)\n\nexport { NativeAccordionPropsContext, useNativeAccordionPropsContext }\n\n/**\n * `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the native HTML details element.\n *\n * @see https://yamada-ui.com/docs/components/native-accordion\n */\nexport const NativeAccordionRoot = withProvider<\n  \"div\",\n  NativeAccordionRootProps\n>(({ children, icon, iconHidden, items, ...props }) => {\n  const { name, getRootProps } = useNativeAccordion(props)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items?.map((props, index) => (\n      <NativeAccordionItem key={index} {...props} />\n    ))\n  }, [children, items])\n  const context = useMemo(() => ({ name }), [name])\n  const componentContext = useMemo(\n    () => ({ icon, iconHidden }),\n    [icon, iconHidden],\n  )\n\n  return (\n    <NativeAccordionContext value={context}>\n      <ComponentContext value={componentContext}>\n        <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n      </ComponentContext>\n    </NativeAccordionContext>\n  )\n}, \"root\")()\n\nexport interface NativeAccordionItemProps\n  extends HTMLStyledProps<\"details\">, UseNativeAccordionItemProps {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNode\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNode\n}\n\nexport const NativeAccordionItem = withContext<\n  \"details\",\n  NativeAccordionItemProps\n>(({ button, children, icon, ...rest }) => {\n  const {\n    disabled,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  } = useNativeAccordionItem(rest)\n  const [omittedChildren, customAccordionButton, customAccordionPanel] =\n    useSplitChildren(children, NativeAccordionButton, NativeAccordionPanel)\n  const context = useMemo(\n    () => ({\n      disabled,\n      icon,\n      getButtonProps,\n      getIconProps,\n      getPanelProps,\n    }),\n    [disabled, getIconProps, getPanelProps, getButtonProps, icon],\n  )\n\n  return (\n    <ItemComponentContext value={context}>\n      <styled.details {...getItemProps()}>\n        {customAccordionButton ?? (\n          <NativeAccordionButton>{button}</NativeAccordionButton>\n        )}\n        {customAccordionPanel ?? (\n          <NativeAccordionPanel>{omittedChildren}</NativeAccordionPanel>\n        )}\n      </styled.details>\n    </ItemComponentContext>\n  )\n}, \"item\")()\n\nexport interface NativeAccordionButtonProps extends HTMLStyledProps<\"summary\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNode\n}\n\nexport const NativeAccordionButton = withContext<\n  \"summary\",\n  NativeAccordionButtonProps\n>(({ children, icon: customIcon, ...rest }) => {\n  const { icon: rootIcon } = useComponentContext()\n  const { icon: itemIcon, getButtonProps } = useItemComponentContext()\n\n  return (\n    <styled.summary {...getButtonProps(rest)}>\n      {children}\n\n      <NativeAccordionIcon>\n        {customIcon ?? itemIcon ?? rootIcon}\n      </NativeAccordionIcon>\n    </styled.summary>\n  )\n}, \"button\")()\n\nexport interface NativeAccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const NativeAccordionIcon = withContext<\"svg\", NativeAccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useItemComponentContext()\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 NativeAccordionPanelProps extends HTMLStyledProps {}\n\nexport const NativeAccordionPanel = withContext<\n  \"div\",\n  NativeAccordionPanelProps\n>(({ children, ...rest }) => {\n  const { getPanelProps } = useItemComponentContext()\n\n  return (\n    <styled.div {...getPanelProps(rest)}>\n      <styled.div>{children}</styled.div>\n    </styled.div>\n  )\n}, \"panel\")()\n"],"mappings":";;;;;;;;;;;;;;;;;AAsDA,MAAM,CAAC,sBAAsB,2BAC3BA,8BAAoC,EAClC,MAAM,wBACP,CAAC;AAEJ,MAAM,EACJ,kBACA,cAAc,6BACd,qBACA,iBAAiB,gCACjB,aACA,iBACEC,6CAIF,oBAAoBC,oDAAqB;;;;;;AAS3C,MAAa,sBAAsB,cAGhC,EAAE,UAAU,MAAM,YAAY,OAAO,GAAG,YAAY;CACrD,MAAM,EAAE,MAAM,iBAAiBC,gDAAmB,MAAM;CACxD,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,OAAO,KAAK,SAAO,UACxB,2CAAC,uBAAgC,GAAIC,WAAX,MAAoB,CAC9C;IACD,CAAC,UAAU,MAAM,CAAC;AAOrB,QACE,2CAACC;EAAuB,iCAPK,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC;YAQ7C,2CAAC;GAAiB,iCANb;IAAE;IAAM;IAAY,GAC3B,CAAC,MAAM,WAAW,CACnB;aAKK,2CAACC,uBAAO;IAAI,GAAI,cAAc;cAAG;KAA8B;IAC9C;GACI;GAE1B,OAAO,EAAE;AAcZ,MAAa,sBAAsB,aAGhC,EAAE,QAAQ,UAAU,MAAM,GAAG,WAAW;CACzC,MAAM,EACJ,UACA,gBACA,cACA,cACA,kBACEC,oDAAuB,KAAK;CAChC,MAAM,CAAC,iBAAiB,uBAAuB,wBAC7CC,kCAAiB,UAAU,uBAAuB,qBAAqB;AAYzE,QACE,2CAAC;EAAqB,iCAXf;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GAAC;GAAU;GAAc;GAAe;GAAgB;GAAK,CAC9D;YAIG,4CAACF,uBAAO;GAAQ,GAAI,cAAc;cAC/B,yBACC,2CAAC,mCAAuB,SAA+B,EAExD,wBACC,2CAAC,kCAAsB,kBAAuC;IAEjD;GACI;GAExB,OAAO,EAAE;AASZ,MAAa,wBAAwB,aAGlC,EAAE,UAAU,MAAM,YAAY,GAAG,WAAW;CAC7C,MAAM,EAAE,MAAM,aAAa,qBAAqB;CAChD,MAAM,EAAE,MAAM,UAAU,mBAAmB,yBAAyB;AAEpE,QACE,4CAACA,uBAAO;EAAQ,GAAI,eAAe,KAAK;aACrC,UAED,2CAAC,iCACE,cAAc,YAAY,WACP;GACP;GAElB,SAAS,EAAE;AAId,MAAa,sBAAsB,aAChC,EAAE,WAAW,2CAACG,8CAAkB,EAAE,GAAG,WAAW;CAC/C,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,EAAE,iBAAiB,yBAAyB;AAElD,KAAI,WAAY,QAAO;AAEvB,+BAAqC,SAAS,CAC5C,gCACE,UACA,aAAa;EACX,GAAG;EACH,GAAG,SAAS;EACb,CAAC,CACH;AAEH,QAAOC,eAAS,MAAM,SAAS,GAAG,IAAIA,eAAS,KAAK,KAAK,GAAG;GAE9D,OACD,EAAE;AAIH,MAAa,uBAAuB,aAGjC,EAAE,UAAU,GAAG,WAAW;CAC3B,MAAM,EAAE,kBAAkB,yBAAyB;AAEnD,QACE,2CAACJ,uBAAO;EAAI,GAAI,cAAc,KAAK;YACjC,2CAACA,uBAAO,OAAK,WAAsB;GACxB;GAEd,QAAQ,EAAE"}

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

@@ -0,0 +1,69 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/native-accordion/native-accordion.style.ts
+const nativeAccordionStyle = require_config.defineComponentSlotStyle({
+	base: {
+		button: {
+			alignItems: "center",
+			cursor: "pointer",
+			display: "inline-flex",
+			focusVisibleRing: "inside",
+			listStyle: "none",
+			px: "4",
+			py: "3",
+			transitionDuration: "moderate",
+			transitionProperty: "common",
+			w: "full",
+			_disabled: { layerStyle: "disabled" }
+		},
+		icon: {
+			color: "fg.subtle",
+			fontSize: "xl",
+			ml: "auto",
+			transformOrigin: "center",
+			transitionDuration: "moderate",
+			transitionProperty: "transform",
+			_groupOpen: { transform: "rotate(180deg)" }
+		},
+		item: { overflowAnchor: "none" },
+		panel: {
+			px: "4",
+			_groupOpen: { pb: "3" }
+		},
+		root: { w: "full" }
+	},
+	props: { animate: { true: {
+		item: { _detailsContent: { transition: "content-visibility 0.4s allow-discrete" } },
+		panel: {
+			"& > div": { overflow: "hidden" },
+			display: "grid",
+			gridTemplateRows: "0fr",
+			transitionDuration: "slow",
+			transitionProperty: "grid-template-rows",
+			_groupOpen: { gridTemplateRows: "1fr" }
+		}
+	} } },
+	variants: {
+		panel: {
+			button: { rounded: "l2" },
+			item: {
+				layerStyle: "panel",
+				rounded: "l2",
+				_notFirst: { mt: "md" }
+			}
+		},
+		plain: { item: {
+			borderTopWidth: "1px",
+			_last: { borderBottomWidth: "1px" }
+		} }
+	},
+	defaultProps: {
+		variant: "plain",
+		animate: true
+	}
+});
+
+//#endregion
+exports.nativeAccordionStyle = nativeAccordionStyle;
+//# sourceMappingURL=native-accordion.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"native-accordion.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/native-accordion/native-accordion.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const nativeAccordionStyle = defineComponentSlotStyle({\n  base: {\n    button: {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      focusVisibleRing: \"inside\",\n      listStyle: \"none\",\n      px: \"4\",\n      py: \"3\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    icon: {\n      color: \"fg.subtle\",\n      fontSize: \"xl\",\n      ml: \"auto\",\n      transformOrigin: \"center\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"transform\",\n      _groupOpen: { transform: \"rotate(180deg)\" },\n    },\n    item: { overflowAnchor: \"none\" },\n    panel: { px: \"4\", _groupOpen: { pb: \"3\" } },\n    root: { w: \"full\" },\n  },\n\n  props: {\n    /**\n     * If `true`, animate the accordion items when they are expanded or collapsed.\n     *\n     * @default true\n     */\n    animate: {\n      true: {\n        item: {\n          _detailsContent: {\n            transition: \"content-visibility 0.4s allow-discrete\",\n          },\n        },\n        panel: {\n          \"& > div\": { overflow: \"hidden\" },\n          display: \"grid\",\n          gridTemplateRows: \"0fr\",\n          transitionDuration: \"slow\",\n          transitionProperty: \"grid-template-rows\",\n          _groupOpen: { gridTemplateRows: \"1fr\" },\n        },\n      },\n    },\n  },\n\n  variants: {\n    panel: {\n      button: { rounded: \"l2\" },\n      item: { layerStyle: \"panel\", rounded: \"l2\", _notFirst: { mt: \"md\" } },\n    },\n    plain: {\n      item: { borderTopWidth: \"1px\", _last: { borderBottomWidth: \"1px\" } },\n    },\n  },\n\n  defaultProps: {\n    variant: \"plain\",\n    animate: true,\n  },\n})\n\nexport type NativeAccordionStyle = typeof nativeAccordionStyle\n"],"mappings":";;;;AAEA,MAAa,uBAAuBA,wCAAyB;CAC3D,MAAM;EACJ,QAAQ;GACN,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX,IAAI;GACJ,IAAI;GACJ,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,MAAM;GACJ,OAAO;GACP,UAAU;GACV,IAAI;GACJ,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,YAAY,EAAE,WAAW,kBAAkB;GAC5C;EACD,MAAM,EAAE,gBAAgB,QAAQ;EAChC,OAAO;GAAE,IAAI;GAAK,YAAY,EAAE,IAAI,KAAK;GAAE;EAC3C,MAAM,EAAE,GAAG,QAAQ;EACpB;CAED,OAAO,EAML,SAAS,EACP,MAAM;EACJ,MAAM,EACJ,iBAAiB,EACf,YAAY,0CACb,EACF;EACD,OAAO;GACL,WAAW,EAAE,UAAU,UAAU;GACjC,SAAS;GACT,kBAAkB;GAClB,oBAAoB;GACpB,oBAAoB;GACpB,YAAY,EAAE,kBAAkB,OAAO;GACxC;EACF,EACF,EACF;CAED,UAAU;EACR,OAAO;GACL,QAAQ,EAAE,SAAS,MAAM;GACzB,MAAM;IAAE,YAAY;IAAS,SAAS;IAAM,WAAW,EAAE,IAAI,MAAM;IAAE;GACtE;EACD,OAAO,EACL,MAAM;GAAE,gBAAgB;GAAO,OAAO,EAAE,mBAAmB,OAAO;GAAE,EACrE;EACF;CAED,cAAc;EACZ,SAAS;EACT,SAAS;EACV;CACF,CAAC"}

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

@@ -0,0 +1,61 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_context = require('../../utils/context.cjs');
+const require_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+let react = require("react");
+
+//#region src/components/native-accordion/use-native-accordion.ts
+const [NativeAccordionContext, useNativeAccordionContext] = require_context.createContext({ name: "NativeAccordionContext" });
+const useNativeAccordion = ({ name, multiple = false, ...rest } = {}) => {
+	const generatedName = (0, react.useId)();
+	const getRootProps = ({ ref, ...props } = {}) => ({
+		...props,
+		...rest,
+		ref: require_ref.mergeRefs(ref, rest.ref)
+	});
+	return {
+		name: multiple ? void 0 : name ?? generatedName,
+		getRootProps
+	};
+};
+const useNativeAccordionItem = ({ disabled, ...rest }) => {
+	const { name } = useNativeAccordionContext();
+	const getItemProps = ({ ref, ...props } = {}) => ({
+		ref: require_ref.mergeRefs(ref, rest.ref),
+		name: props.name ?? rest.name ?? name,
+		role: "group",
+		...rest,
+		...props
+	});
+	const getButtonProps = (0, react.useCallback)((props = {}) => ({
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, (ev) => {
+			if (!disabled) return;
+			ev.preventDefault();
+		})
+	}), [disabled]);
+	const getPanelProps = (0, react.useCallback)((props = {}) => props, []);
+	return {
+		disabled,
+		getButtonProps,
+		getIconProps: (0, react.useCallback)((props = {}) => ({
+			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+			"aria-hidden": true,
+			role: "presentation",
+			...props
+		}), [disabled]),
+		getItemProps,
+		getPanelProps
+	};
+};
+
+//#endregion
+exports.NativeAccordionContext = NativeAccordionContext;
+exports.useNativeAccordion = useNativeAccordion;
+exports.useNativeAccordionContext = useNativeAccordionContext;
+exports.useNativeAccordionItem = useNativeAccordionItem;
+//# sourceMappingURL=use-native-accordion.cjs.map