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

package/dist/esm/components/input/input.style.js

@@ -33,6 +33,24 @@ const inputStyle = 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 = 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/esm/components/input/input.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.style.js","names":[],"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,kEAA+C,EAAE,IAAI,OAAO,EAAE,IAAI,EACnE;AAEH,MAAa,gCAAgC,SAC1C,EACC,sEAAmD,EAAE,IAAI,OAAO,EAAE,IAAI,EACvE;AAEH,MAAa,uBAAuB,QAAiB,SAClD;CACC,gEAA6C,EAAE,IAAI,QAAQ,EAAE,IAAI;CACjE,4BAA4B,EAAE,MAAM,QAAQ;CAC5C,YAAY;CACZ,2DAAwC,EAAE,IAAI,QAAQ,EAAE,IAAI;CAC5D,iCAAiC,EAAE,MAAM,QAAQ;CACjD,MAAM;CACP;AAEH,MAAa,aAAa,qBAAqB;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.js","names":[],"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,kEAA+C,EAAE,IAAI,OAAO,EAAE,IAAI,EACnE;AAEH,MAAa,gCAAgC,SAC1C,EACC,sEAAmD,EAAE,IAAI,OAAO,EAAE,IAAI,EACvE;AAEH,MAAa,uBAAuB,QAAiB,SAClD;CACC,gEAA6C,EAAE,IAAI,QAAQ,EAAE,IAAI;CACjE,4BAA4B,EAAE,MAAM,QAAQ;CAC5C,YAAY;CACZ,2DAAwC,EAAE,IAAI,QAAQ,EAAE,IAAI;CAC5D,iCAAiC,EAAE,MAAM,QAAQ;CACjD,MAAM;CACP;AAEH,MAAa,aAAa,qBAAqB;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/esm/components/loading/oval.js

@@ -37,9 +37,8 @@ const Oval = withContext(({ dur = "1s", secondaryColor, ...rest }) => {
 					animationIterationCount: "infinite",
 					animationName: "spin",
 					animationTimingFunction: "linear",
-					asChild: true,
-					transformOrigin: "18px 18px",
-					children: /* @__PURE__ */ 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/esm/components/loading/oval.js.map

@@ -1 +1 @@
-{"version":3,"file":"oval.js","names":[],"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,OAAO,aACjB,EAAE,MAAM,MAAM,gBAAgB,GAAG,WAAW;AAC3C,mCAAe,IAAI,GAAG,WAAW,IAAI,GAAG;AAExC,QACE,oBAAC;EAAK,QAAO;EAAe,SAAQ;EAAY,GAAI;YAClD,oBAAC;GAAE,MAAK;GAAO,UAAS;aACtB,qBAAC;IAAE,aAAY;IAAI,WAAU;eAC3B,oBAAC,OAAO;KACN,GAAK,iBACD,EAAE,QAAQ,qBAAqB,GAC/B,EAAE,eAAe,MAAM;KAC3B,IAAG;KACH,IAAG;KACH,GAAE;MACF,EACF,oBAAC,OAAO;KACN,mBAAmB,GAAG,IAAI;KAC1B,yBAAwB;KACxB,eAAc;KACd,yBAAwB;KACxB;KACA,iBAAgB;eAEhB,oBAAC,UAAK,GAAE,gCAAgC;MAC5B;KACZ;IACF;GACC;EAGZ,CAAC,eAAe,EAAE,gBAAgB,GAAG,YAAY;CAChD,MAAM,OAAO,WAAW,MAAM;AAE9B,QAAO;EACL,qBAAqB,QAAQ,gBAAgB,SAAS;EACtD;EACA,GAAG;EACJ;EACD"}
+{"version":3,"file":"oval.js","names":[],"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,OAAO,aACjB,EAAE,MAAM,MAAM,gBAAgB,GAAG,WAAW;AAC3C,mCAAe,IAAI,GAAG,WAAW,IAAI,GAAG;AAExC,QACE,oBAAC;EAAK,QAAO;EAAe,SAAQ;EAAY,GAAI;YAClD,oBAAC;GAAE,MAAK;GAAO,UAAS;aACtB,qBAAC;IAAE,aAAY;IAAI,WAAU;eAC3B,oBAAC,OAAO;KACN,GAAK,iBACD,EAAE,QAAQ,qBAAqB,GAC/B,EAAE,eAAe,MAAM;KAC3B,IAAG;KACH,IAAG;KACH,GAAE;MACF,EACF,oBAAC,OAAO;KACN,mBAAmB,GAAG,IAAI;KAC1B,yBAAwB;KACxB,eAAc;KACd,yBAAwB;KACxB,GAAE;KACF,iBAAgB;MAChB;KACA;IACF;GACC;EAGZ,CAAC,eAAe,EAAE,gBAAgB,GAAG,YAAY;CAChD,MAAM,OAAO,WAAW,MAAM;AAE9B,QAAO;EACL,qBAAqB,QAAQ,gBAAgB,SAAS;EACtD;EACA,GAAG;EACJ;EACD"}

package/dist/esm/components/modal/modal.js

@@ -9,10 +9,10 @@ import { motion as motion$1 } from "../motion/factory.js";
 import "../motion/index.js";
 import { Portal } from "../portal/portal.js";
 import "../portal/index.js";
-import { getPopupAnimationProps } from "../popover/popover.js";
-import "../popover/index.js";
 import { Button } from "../button/button.js";
 import "../button/index.js";
+import { getPopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { CloseButton } from "../close-button/close-button.js";
 import "../close-button/index.js";
 import { modalStyle } from "./modal.style.js";

package/dist/esm/components/native-accordion/index.js

@@ -0,0 +1,6 @@
+import { nativeAccordionStyle } from "./native-accordion.style.js";
+import { NativeAccordionContext, useNativeAccordion, useNativeAccordionContext, useNativeAccordionItem } from "./use-native-accordion.js";
+import { NativeAccordionButton, NativeAccordionIcon, NativeAccordionItem, NativeAccordionPanel, NativeAccordionPropsContext, NativeAccordionRoot, useNativeAccordionPropsContext } from "./native-accordion.js";
+import { namespace_exports } from "./namespace.js";
+
+export { namespace_exports as NativeAccordion, NativeAccordionButton, NativeAccordionContext, NativeAccordionIcon, NativeAccordionItem, NativeAccordionPanel, NativeAccordionPropsContext, NativeAccordionRoot, nativeAccordionStyle, useNativeAccordion, useNativeAccordionContext, useNativeAccordionItem, useNativeAccordionPropsContext };

package/dist/esm/components/native-accordion/namespace.js

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { NativeAccordionButton, NativeAccordionIcon, NativeAccordionItem, NativeAccordionPanel, NativeAccordionPropsContext, NativeAccordionRoot, useNativeAccordionPropsContext } from "./native-accordion.js";
+
+//#region src/components/native-accordion/namespace.ts
+var namespace_exports = /* @__PURE__ */ __exportAll({
+	Button: () => NativeAccordionButton,
+	Icon: () => NativeAccordionIcon,
+	Item: () => NativeAccordionItem,
+	Panel: () => NativeAccordionPanel,
+	PropsContext: () => NativeAccordionPropsContext,
+	Root: () => NativeAccordionRoot,
+	usePropsContext: () => useNativeAccordionPropsContext
+});
+
+//#endregion
+export { namespace_exports };
+//# sourceMappingURL=namespace.js.map

package/dist/esm/components/native-accordion/namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.js","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/esm/components/native-accordion/native-accordion.js

@@ -0,0 +1,95 @@
+"use client";
+
+import { useSplitChildren } from "../../utils/children.js";
+import { createContext as createContext$1 } from "../../utils/context.js";
+import "../../utils/index.js";
+import { styled } from "../../core/system/factory.js";
+import { createSlotComponent } from "../../core/components/create-component.js";
+import "../../core/index.js";
+import { nativeAccordionStyle } from "./native-accordion.style.js";
+import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
+import "../icon/index.js";
+import { NativeAccordionContext, useNativeAccordion, useNativeAccordionItem } from "./use-native-accordion.js";
+import { Children, cloneElement, isValidElement, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/native-accordion/native-accordion.tsx
+const [ItemComponentContext, useItemComponentContext] = createContext$1({ name: "ItemComponentContext" });
+const { ComponentContext, PropsContext: NativeAccordionPropsContext, useComponentContext, usePropsContext: useNativeAccordionPropsContext, withContext, withProvider } = createSlotComponent("native-accordion", 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 } = useNativeAccordion(props);
+	const computedChildren = useMemo(() => {
+		if (children) return children;
+		return items?.map((props$1, index) => /* @__PURE__ */ jsx(NativeAccordionItem, { ...props$1 }, index));
+	}, [children, items]);
+	return /* @__PURE__ */ jsx(NativeAccordionContext, {
+		value: useMemo(() => ({ name }), [name]),
+		children: /* @__PURE__ */ jsx(ComponentContext, {
+			value: useMemo(() => ({
+				icon,
+				iconHidden
+			}), [icon, iconHidden]),
+			children: /* @__PURE__ */ jsx(styled.div, {
+				...getRootProps(),
+				children: computedChildren
+			})
+		})
+	});
+}, "root")();
+const NativeAccordionItem = withContext(({ button, children, icon, ...rest }) => {
+	const { disabled, getButtonProps, getIconProps, getItemProps, getPanelProps } = useNativeAccordionItem(rest);
+	const [omittedChildren, customAccordionButton, customAccordionPanel] = useSplitChildren(children, NativeAccordionButton, NativeAccordionPanel);
+	return /* @__PURE__ */ jsx(ItemComponentContext, {
+		value: useMemo(() => ({
+			disabled,
+			icon,
+			getButtonProps,
+			getIconProps,
+			getPanelProps
+		}), [
+			disabled,
+			getIconProps,
+			getPanelProps,
+			getButtonProps,
+			icon
+		]),
+		children: /* @__PURE__ */ jsxs(styled.details, {
+			...getItemProps(),
+			children: [customAccordionButton ?? /* @__PURE__ */ jsx(NativeAccordionButton, { children: button }), customAccordionPanel ?? /* @__PURE__ */ jsx(NativeAccordionPanel, { children: omittedChildren })]
+		})
+	});
+}, "item")();
+const NativeAccordionButton = withContext(({ children, icon: customIcon, ...rest }) => {
+	const { icon: rootIcon } = useComponentContext();
+	const { icon: itemIcon, getButtonProps } = useItemComponentContext();
+	return /* @__PURE__ */ jsxs(styled.summary, {
+		...getButtonProps(rest),
+		children: [children, /* @__PURE__ */ jsx(NativeAccordionIcon, { children: customIcon ?? itemIcon ?? rootIcon })]
+	});
+}, "button")();
+const NativeAccordionIcon = withContext(({ children = /* @__PURE__ */ jsx(ChevronDownIcon, {}), ...rest }) => {
+	const { iconHidden } = useComponentContext();
+	const { getIconProps } = useItemComponentContext();
+	if (iconHidden) return null;
+	if (isValidElement(children)) return cloneElement(children, getIconProps({
+		...rest,
+		...children.props
+	}));
+	return Children.count(children) > 1 ? Children.only(null) : null;
+}, "icon")();
+const NativeAccordionPanel = withContext(({ children, ...rest }) => {
+	const { getPanelProps } = useItemComponentContext();
+	return /* @__PURE__ */ jsx(styled.div, {
+		...getPanelProps(rest),
+		children: /* @__PURE__ */ jsx(styled.div, { children })
+	});
+}, "panel")();
+
+//#endregion
+export { NativeAccordionButton, NativeAccordionIcon, NativeAccordionItem, NativeAccordionPanel, NativeAccordionPropsContext, NativeAccordionRoot, useNativeAccordionPropsContext };
+//# sourceMappingURL=native-accordion.js.map

package/dist/esm/components/native-accordion/native-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-accordion.js","names":["createContext","props"],"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,gBAAoC,EAClC,MAAM,wBACP,CAAC;AAEJ,MAAM,EACJ,kBACA,cAAc,6BACd,qBACA,iBAAiB,gCACjB,aACA,iBACE,oBAIF,oBAAoB,qBAAqB;;;;;;AAS3C,MAAa,sBAAsB,cAGhC,EAAE,UAAU,MAAM,YAAY,OAAO,GAAG,YAAY;CACrD,MAAM,EAAE,MAAM,iBAAiB,mBAAmB,MAAM;CACxD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,OAAO,KAAK,SAAO,UACxB,oBAAC,uBAAgC,GAAIC,WAAX,MAAoB,CAC9C;IACD,CAAC,UAAU,MAAM,CAAC;AAOrB,QACE,oBAAC;EAAuB,OAPV,eAAe,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC;YAQ7C,oBAAC;GAAiB,OAPG,eAChB;IAAE;IAAM;IAAY,GAC3B,CAAC,MAAM,WAAW,CACnB;aAKK,oBAAC,OAAO;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,kBACE,uBAAuB,KAAK;CAChC,MAAM,CAAC,iBAAiB,uBAAuB,wBAC7C,iBAAiB,UAAU,uBAAuB,qBAAqB;AAYzE,QACE,oBAAC;EAAqB,OAZR,eACP;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GAAC;GAAU;GAAc;GAAe;GAAgB;GAAK,CAC9D;YAIG,qBAAC,OAAO;GAAQ,GAAI,cAAc;cAC/B,yBACC,oBAAC,mCAAuB,SAA+B,EAExD,wBACC,oBAAC,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,qBAAC,OAAO;EAAQ,GAAI,eAAe,KAAK;aACrC,UAED,oBAAC,iCACE,cAAc,YAAY,WACP;GACP;GAElB,SAAS,EAAE;AAId,MAAa,sBAAsB,aAChC,EAAE,WAAW,oBAAC,oBAAkB,EAAE,GAAG,WAAW;CAC/C,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,EAAE,iBAAiB,yBAAyB;AAElD,KAAI,WAAY,QAAO;AAEvB,KAAI,eAAiC,SAAS,CAC5C,QAAO,aACL,UACA,aAAa;EACX,GAAG;EACH,GAAG,SAAS;EACb,CAAC,CACH;AAEH,QAAO,SAAS,MAAM,SAAS,GAAG,IAAI,SAAS,KAAK,KAAK,GAAG;GAE9D,OACD,EAAE;AAIH,MAAa,uBAAuB,aAGjC,EAAE,UAAU,GAAG,WAAW;CAC3B,MAAM,EAAE,kBAAkB,yBAAyB;AAEnD,QACE,oBAAC,OAAO;EAAI,GAAI,cAAc,KAAK;YACjC,oBAAC,OAAO,OAAK,WAAsB;GACxB;GAEd,QAAQ,EAAE"}

package/dist/esm/components/native-accordion/native-accordion.style.js

@@ -0,0 +1,69 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+
+//#region src/components/native-accordion/native-accordion.style.ts
+const nativeAccordionStyle = 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
+export { nativeAccordionStyle };
+//# sourceMappingURL=native-accordion.style.js.map

package/dist/esm/components/native-accordion/native-accordion.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-accordion.style.js","names":[],"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,uBAAuB,yBAAyB;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/esm/components/native-accordion/use-native-accordion.js

@@ -0,0 +1,57 @@
+"use client";
+
+import { createContext as createContext$1 } from "../../utils/context.js";
+import { mergeRefs } from "../../utils/ref.js";
+import { utils_exports } from "../../utils/index.js";
+import { useCallback, useId } from "react";
+
+//#region src/components/native-accordion/use-native-accordion.ts
+const [NativeAccordionContext, useNativeAccordionContext] = createContext$1({ name: "NativeAccordionContext" });
+const useNativeAccordion = ({ name, multiple = false, ...rest } = {}) => {
+	const generatedName = useId();
+	const getRootProps = ({ ref, ...props } = {}) => ({
+		...props,
+		...rest,
+		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: mergeRefs(ref, rest.ref),
+		name: props.name ?? rest.name ?? name,
+		role: "group",
+		...rest,
+		...props
+	});
+	const getButtonProps = useCallback((props = {}) => ({
+		"aria-disabled": (0, utils_exports.ariaAttr)(disabled),
+		"data-disabled": (0, utils_exports.dataAttr)(disabled),
+		...props,
+		onClick: (0, utils_exports.handlerAll)(props.onClick, (ev) => {
+			if (!disabled) return;
+			ev.preventDefault();
+		})
+	}), [disabled]);
+	const getPanelProps = useCallback((props = {}) => props, []);
+	return {
+		disabled,
+		getButtonProps,
+		getIconProps: useCallback((props = {}) => ({
+			"aria-disabled": (0, utils_exports.ariaAttr)(disabled),
+			"aria-hidden": true,
+			role: "presentation",
+			...props
+		}), [disabled]),
+		getItemProps,
+		getPanelProps
+	};
+};
+
+//#endregion
+export { NativeAccordionContext, useNativeAccordion, useNativeAccordionContext, useNativeAccordionItem };
+//# sourceMappingURL=use-native-accordion.js.map

package/dist/esm/components/native-accordion/use-native-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-native-accordion.js","names":["createContext","getRootProps: PropGetter","getItemProps: PropGetter<\"details\">","getButtonProps: PropGetter<\"summary\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/native-accordion/use-native-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface NativeAccordionContext extends Pick<\n  UseNativeAccordionReturn,\n  \"name\"\n> {}\n\nconst [NativeAccordionContext, useNativeAccordionContext] =\n  createContext<NativeAccordionContext>({\n    name: \"NativeAccordionContext\",\n  })\n\nexport { NativeAccordionContext, useNativeAccordionContext }\n\nexport interface UseNativeAccordionProps extends HTMLProps {\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n}\n\nexport const useNativeAccordion = ({\n  name,\n  multiple = false,\n  ...rest\n}: UseNativeAccordionProps = {}) => {\n  const generatedName = useId()\n\n  const getRootProps: PropGetter = ({ ref, ...props } = {}) => ({\n    ...props,\n    ...rest,\n    ref: mergeRefs(ref, rest.ref),\n  })\n\n  return {\n    name: multiple ? undefined : (name ?? generatedName),\n    getRootProps,\n  }\n}\n\nexport type UseNativeAccordionReturn = ReturnType<typeof useNativeAccordion>\n\nexport interface UseNativeAccordionItemProps extends HTMLProps<\"details\"> {\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useNativeAccordionItem = ({\n  disabled,\n  ...rest\n}: UseNativeAccordionItemProps) => {\n  const { name } = useNativeAccordionContext()\n\n  const getItemProps: PropGetter<\"details\"> = ({ ref, ...props } = {}) => ({\n    ref: mergeRefs(ref, rest.ref),\n    name: props.name ?? rest.name ?? name,\n    role: \"group\",\n    ...rest,\n    ...props,\n  })\n\n  const getButtonProps: PropGetter<\"summary\"> = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(disabled),\n      \"data-disabled\": dataAttr(disabled),\n      ...props,\n      onClick: handlerAll(props.onClick, (ev) => {\n        if (!disabled) return\n\n        ev.preventDefault()\n      }),\n    }),\n    [disabled],\n  )\n\n  const getPanelProps: PropGetter = useCallback((props = {}) => props, [])\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [disabled],\n  )\n\n  return {\n    disabled,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseNativeAccordionItemReturn = ReturnType<\n  typeof useNativeAccordionItem\n>\n"],"mappings":";;;;;;;;AAiBA,MAAM,CAAC,wBAAwB,6BAC7BA,gBAAsC,EACpC,MAAM,0BACP,CAAC;AAiBJ,MAAa,sBAAsB,EACjC,MACA,WAAW,OACX,GAAG,SACwB,EAAE,KAAK;CAClC,MAAM,gBAAgB,OAAO;CAE7B,MAAMC,gBAA4B,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC5D,GAAG;EACH,GAAG;EACH,KAAK,UAAU,KAAK,KAAK,IAAI;EAC9B;AAED,QAAO;EACL,MAAM,WAAW,SAAa,QAAQ;EACtC;EACD;;AAcH,MAAa,0BAA0B,EACrC,UACA,GAAG,WAC8B;CACjC,MAAM,EAAE,SAAS,2BAA2B;CAE5C,MAAMC,gBAAuC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EACvE,KAAK,UAAU,KAAK,KAAK,IAAI;EAC7B,MAAM,MAAM,QAAQ,KAAK,QAAQ;EACjC,MAAM;EACN,GAAG;EACH,GAAG;EACJ;CAED,MAAMC,iBAAwC,aAC3C,QAAQ,EAAE,MAAM;EACf,6CAA0B,SAAS;EACnC,6CAA0B,SAAS;EACnC,GAAG;EACH,uCAAoB,MAAM,UAAU,OAAO;AACzC,OAAI,CAAC,SAAU;AAEf,MAAG,gBAAgB;IACnB;EACH,GACD,CAAC,SAAS,CACX;CAED,MAAMC,gBAA4B,aAAa,QAAQ,EAAE,KAAK,OAAO,EAAE,CAAC;AAYxE,QAAO;EACL;EACA;EACA,cAbsC,aACrC,QAAQ,EAAE,MAAM;GACf,6CAA0B,SAAS;GACnC,eAAe;GACf,MAAM;GACN,GAAG;GACJ,GACD,CAAC,SAAS,CACX;EAMC;EACA;EACD"}

package/dist/esm/components/native-popover/index.js

@@ -0,0 +1,6 @@
+import { nativePopoverStyle } from "./native-popover.style.js";
+import { useNativePopover } from "./use-native-popover.js";
+import { NativePopoverAnchor, NativePopoverBody, NativePopoverCloseTrigger, NativePopoverContent, NativePopoverFooter, NativePopoverHeader, NativePopoverPropsContext, NativePopoverRoot, NativePopoverTrigger, useNativePopoverPropsContext } from "./native-popover.js";
+import { namespace_exports } from "./namespace.js";
+
+export { namespace_exports as NativePopover, NativePopoverAnchor, NativePopoverBody, NativePopoverCloseTrigger, NativePopoverContent, NativePopoverFooter, NativePopoverHeader, NativePopoverPropsContext, NativePopoverRoot, NativePopoverTrigger, nativePopoverStyle, useNativePopover, useNativePopoverPropsContext };

package/dist/esm/components/native-popover/namespace.js

@@ -0,0 +1,20 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { NativePopoverAnchor, NativePopoverBody, NativePopoverCloseTrigger, NativePopoverContent, NativePopoverFooter, NativePopoverHeader, NativePopoverPropsContext, NativePopoverRoot, NativePopoverTrigger, useNativePopoverPropsContext } from "./native-popover.js";
+
+//#region src/components/native-popover/namespace.ts
+var namespace_exports = /* @__PURE__ */ __exportAll({
+	Anchor: () => NativePopoverAnchor,
+	Body: () => NativePopoverBody,
+	CloseTrigger: () => NativePopoverCloseTrigger,
+	Content: () => NativePopoverContent,
+	Footer: () => NativePopoverFooter,
+	Header: () => NativePopoverHeader,
+	PropsContext: () => NativePopoverPropsContext,
+	Root: () => NativePopoverRoot,
+	Trigger: () => NativePopoverTrigger,
+	usePropsContext: () => useNativePopoverPropsContext
+});
+
+//#endregion
+export { namespace_exports };
+//# sourceMappingURL=namespace.js.map

package/dist/esm/components/native-popover/namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.js","names":[],"sources":["../../../../src/components/native-popover/namespace.ts"],"sourcesContent":["export {\n  NativePopoverAnchor as Anchor,\n  NativePopoverBody as Body,\n  NativePopoverCloseTrigger as CloseTrigger,\n  NativePopoverContent as Content,\n  NativePopoverFooter as Footer,\n  NativePopoverHeader as Header,\n  NativePopoverPropsContext as PropsContext,\n  NativePopoverRoot as Root,\n  NativePopoverTrigger as Trigger,\n  useNativePopoverPropsContext as usePropsContext,\n} from \"./native-popover\"\nexport type {\n  NativePopoverAnchorProps as AnchorProps,\n  NativePopoverBodyProps as BodyProps,\n  NativePopoverCloseTriggerProps as CloseTriggerProps,\n  NativePopoverContentProps as ContentProps,\n  NativePopoverFooterProps as FooterProps,\n  NativePopoverHeaderProps as HeaderProps,\n  NativePopoverRootProps as RootProps,\n  NativePopoverTriggerProps as TriggerProps,\n} from \"./native-popover\"\n"],"mappings":""}

package/dist/esm/components/native-popover/native-popover.js

@@ -0,0 +1,89 @@
+"use client";
+
+import { utils_exports } from "../../utils/index.js";
+import { styled } from "../../core/system/factory.js";
+import { createSlotComponent } from "../../core/components/create-component.js";
+import "../../core/index.js";
+import { nativePopoverStyle } from "./native-popover.style.js";
+import { useNativePopover } from "./use-native-popover.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/native-popover/native-popover.tsx
+const { ComponentContext, PropsContext: NativePopoverPropsContext, StyleContext, useComponentContext, usePropsContext: useNativePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("native-popover", nativePopoverStyle);
+/**
+* `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.
+*
+* @see https://yamada-ui.com/docs/components/native-popover
+*/
+const NativePopoverRoot = (props) => {
+	const [styleContext, { children, ...rest }] = useRootComponentProps(props);
+	const { getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps } = useNativePopover(rest);
+	return /* @__PURE__ */ jsx(StyleContext, {
+		value: styleContext,
+		children: /* @__PURE__ */ jsx(ComponentContext, {
+			value: useMemo(() => ({
+				getAnchorProps,
+				getBodyProps,
+				getCloseTriggerProps,
+				getContentProps,
+				getFooterProps,
+				getHeaderProps,
+				getPositionerProps,
+				getTriggerProps
+			}), [
+				getAnchorProps,
+				getBodyProps,
+				getCloseTriggerProps,
+				getContentProps,
+				getFooterProps,
+				getHeaderProps,
+				getPositionerProps,
+				getTriggerProps
+			]),
+			children
+		})
+	});
+};
+const NativePopoverTrigger = withContext("button", "trigger")({ asChild: true }, (props) => {
+	const { getTriggerProps } = useComponentContext();
+	return getTriggerProps(props);
+});
+const NativePopoverAnchor = withContext("div", "anchor")({ asChild: true }, (props) => {
+	const { getAnchorProps } = useComponentContext();
+	return getAnchorProps(props);
+});
+const NativePopoverPositioner = withContext("div", "positioner")({ asChild: true }, (props) => {
+	const { getPositionerProps } = useComponentContext();
+	return getPositionerProps(props);
+});
+const NativePopoverCloseTrigger = withContext("button", {
+	name: "CloseTrigger",
+	slot: ["trigger", "close"]
+})({ asChild: true }, (props) => {
+	const { getCloseTriggerProps } = useComponentContext();
+	return getCloseTriggerProps(props);
+});
+const NativePopoverContent = withContext(({ children, ...rest }) => {
+	const { getContentProps } = useComponentContext();
+	return /* @__PURE__ */ jsx(NativePopoverPositioner, { children: /* @__PURE__ */ jsx(styled.div, {
+		...getContentProps((0, utils_exports.cast)(rest)),
+		children
+	}) });
+}, "content")({ suppressHydrationWarning: true });
+const NativePopoverHeader = withContext("div", "header")(void 0, (props) => {
+	const { getHeaderProps } = useComponentContext();
+	return getHeaderProps(props);
+});
+const NativePopoverBody = withContext("div", "body")(void 0, (props) => {
+	const { getBodyProps } = useComponentContext();
+	return getBodyProps(props);
+});
+const NativePopoverFooter = withContext("div", "footer")(void 0, (props) => {
+	const { getFooterProps } = useComponentContext();
+	return getFooterProps(props);
+});
+
+//#endregion
+export { NativePopoverAnchor, NativePopoverBody, NativePopoverCloseTrigger, NativePopoverContent, NativePopoverFooter, NativePopoverHeader, NativePopoverPropsContext, NativePopoverRoot, NativePopoverTrigger, useNativePopoverPropsContext };
+//# sourceMappingURL=native-popover.js.map

package/dist/esm/components/native-popover/native-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-popover.js","names":["NativePopoverRoot: FC<NativePopoverRootProps>"],"sources":["../../../../src/components/native-popover/native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativePopoverStyle } from \"./native-popover.style\"\nimport type {\n  UseNativePopoverProps,\n  UseNativePopoverReturn,\n} from \"./use-native-popover\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { nativePopoverStyle } from \"./native-popover.style\"\nimport { useNativePopover } from \"./use-native-popover\"\n\ninterface ComponentContext extends Pick<\n  UseNativePopoverReturn,\n  | \"getAnchorProps\"\n  | \"getBodyProps\"\n  | \"getCloseTriggerProps\"\n  | \"getContentProps\"\n  | \"getFooterProps\"\n  | \"getHeaderProps\"\n  | \"getPositionerProps\"\n  | \"getTriggerProps\"\n> {}\n\nexport interface NativePopoverRootProps\n  extends\n    UseNativePopoverProps,\n    ThemeProps<NativePopoverStyle>,\n    PropsWithChildren {}\n\nconst {\n  ComponentContext,\n  PropsContext: NativePopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: useNativePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<\n  NativePopoverRootProps,\n  NativePopoverStyle,\n  ComponentContext\n>(\"native-popover\", nativePopoverStyle)\n\nexport { NativePopoverPropsContext, useNativePopoverPropsContext }\n\n/**\n * `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.\n *\n * @see https://yamada-ui.com/docs/components/native-popover\n */\nexport const NativePopoverRoot: FC<NativePopoverRootProps> = (props) => {\n  const [styleContext, { children, ...rest }] = useRootComponentProps(props)\n  const {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  } = useNativePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>{children}</ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface NativePopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverTrigger = withContext<\n  \"button\",\n  NativePopoverTriggerProps\n>(\"button\", \"trigger\")({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface NativePopoverAnchorProps extends HTMLStyledProps {}\n\nexport const NativePopoverAnchor = withContext<\"div\", NativePopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface NativePopoverPositionerProps extends HTMLStyledProps {}\n\nconst NativePopoverPositioner = withContext<\n  \"div\",\n  NativePopoverPositionerProps\n>(\"div\", \"positioner\")({ asChild: true }, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface NativePopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverCloseTrigger = withContext<\n  \"button\",\n  NativePopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface NativePopoverContentProps\n  extends HTMLStyledProps, PropsWithChildren {}\n\nexport const NativePopoverContent = withContext<\n  \"div\",\n  NativePopoverContentProps\n>(({ children, ...rest }) => {\n  const { getContentProps } = useComponentContext()\n\n  return (\n    <NativePopoverPositioner>\n      <styled.div {...getContentProps(cast<HTMLStyledProps>(rest))}>\n        {children}\n      </styled.div>\n    </NativePopoverPositioner>\n  )\n}, \"content\")({\n  suppressHydrationWarning: true,\n})\n\nexport interface NativePopoverHeaderProps extends HTMLStyledProps {}\n\nexport const NativePopoverHeader = withContext<\"div\", NativePopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface NativePopoverBodyProps extends HTMLStyledProps {}\n\nexport const NativePopoverBody = withContext<\"div\", NativePopoverBodyProps>(\n  \"div\",\n  \"body\",\n)(undefined, (props) => {\n  const { getBodyProps } = useComponentContext()\n\n  return getBodyProps(props)\n})\n\nexport interface NativePopoverFooterProps extends HTMLStyledProps {}\n\nexport const NativePopoverFooter = withContext<\"div\", NativePopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,EACJ,kBACA,cAAc,2BACd,cACA,qBACA,iBAAiB,8BACjB,aACA,0BACE,oBAIF,kBAAkB,mBAAmB;;;;;;AASvC,MAAaA,qBAAiD,UAAU;CACtE,MAAM,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,sBAAsB,MAAM;CAC1E,MAAM,EACJ,gBACA,cACA,sBACA,iBACA,gBACA,gBACA,oBACA,oBACE,iBAAiB,KAAK;AAwB1B,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAiB,OAzBG,eAChB;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;GAI+C;IAA4B;GAC3D;;AAMnB,MAAa,uBAAuB,YAGlC,UAAU,UAAU,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CACnD,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QAAO,gBAAgB,MAAM;EAC7B;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CAC9B,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAM,0BAA0B,YAG9B,OAAO,aAAa,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CACnD,MAAM,EAAE,uBAAuB,qBAAqB;AAEpD,QAAO,mBAAmB,MAAM;EAChC;AAIF,MAAa,4BAA4B,YAGvC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,EAAE,SAAS,MAAM,GAChB,UAAU;CACT,MAAM,EAAE,yBAAyB,qBAAqB;AAEtD,QAAO,qBAAqB,MAAM;EAErC;AAKD,MAAa,uBAAuB,aAGjC,EAAE,UAAU,GAAG,WAAW;CAC3B,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QACE,oBAAC,qCACC,oBAAC,OAAO;EAAI,GAAI,wCAAsC,KAAK,CAAC;EACzD;GACU,GACW;GAE3B,UAAU,CAAC,EACZ,0BAA0B,MAC3B,CAAC;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAa,oBAAoB,YAC/B,OACA,OACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QAAO,aAAa,MAAM;EAC1B;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B"}

package/dist/esm/components/native-popover/native-popover.style.js

@@ -0,0 +1,67 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+
+//#region src/components/native-popover/native-popover.style.ts
+const nativePopoverStyle = defineComponentSlotStyle({
+	base: {
+		body: {
+			alignItems: "flex-start",
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			gap: "{gap}"
+		},
+		content: {
+			bg: "bg.float",
+			borderColor: "border.muted",
+			borderWidth: "1px",
+			boxShadow: "sm",
+			display: "flex",
+			flexDirection: "column",
+			focusVisibleRing: "none",
+			gap: "{gap}",
+			p: "{padding}",
+			rounded: "l2"
+		},
+		footer: {
+			alignItems: "center",
+			display: "flex",
+			gap: "{gap}",
+			justifyContent: "flex-start"
+		},
+		header: {
+			alignItems: "center",
+			display: "flex",
+			fontWeight: "semibold",
+			gap: "{gap}",
+			justifyContent: "flex-start"
+		}
+	},
+	sizes: {
+		xs: { content: {
+			"--gap": "spaces.1",
+			"--padding": "spaces.2",
+			fontSize: "xs"
+		} },
+		sm: { content: {
+			"--gap": "spaces.2",
+			"--padding": "spaces.3",
+			fontSize: "sm"
+		} },
+		md: { content: {
+			"--gap": "spaces.3",
+			"--padding": "spaces.4",
+			fontSize: "md"
+		} },
+		lg: { content: {
+			"--gap": "spaces.4",
+			"--padding": "spaces.5",
+			fontSize: "md"
+		} }
+	},
+	defaultProps: { size: "md" }
+});
+
+//#endregion
+export { nativePopoverStyle };
+//# sourceMappingURL=native-popover.style.js.map