@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/cjs/components/motion/motion.cjs

@@ -0,0 +1,33 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_system_system_provider = require('../../core/system/system-provider.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const motion_react = require_rolldown_runtime.__toESM(require("motion/react"));
+
+//#region src/components/motion/motion.tsx
+const forwardProps = ["transition"];
+const Component = require_core_system_factory.styled("div", { forwardProps });
+/**
+* `Motion` is a component that allows for the easy implementation of a wide variety of animations.
+*
+* @see https://yamada-ui.com/components/motion
+*/
+const Motion = ({ ref, as: asProp = "div", className,...rest }) => {
+	const system = require_core_system_system_provider.useSystem();
+	const as = (0, react.useMemo)(() => motion_react.motion.create(asProp), [asProp]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref,
+		as,
+		className: (0, require_utils_index.utils_exports.cx)(system.utils.getClassName("motion"), className),
+		...rest
+	});
+};
+
+//#endregion
+exports.Motion = Motion;
+//# sourceMappingURL=motion.cjs.map

package/dist/cjs/components/motion/motion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.cjs","names":[],"sources":["../../../../src/components/motion/motion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { HTMLMotionProps, MotionStyledComponent } from \"./index.types\"\nimport { motion } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { styled, useSystem } from \"../../core\"\nimport { cx } from \"../../utils\"\n\nconst forwardProps = [\"transition\"]\n\nconst Component = styled<\"div\", Dict>(\"div\", { forwardProps })\n\n/**\n * `Motion` is a component that allows for the easy implementation of a wide variety of animations.\n *\n * @see https://yamada-ui.com/components/motion\n */\nexport const Motion = (({\n  ref,\n  as: asProp = \"div\",\n  className,\n  ...rest\n}: HTMLMotionProps) => {\n  const system = useSystem()\n  const as = useMemo(() => motion.create(asProp), [asProp])\n\n  return (\n    <Component\n      ref={ref}\n      as={as}\n      className={cx(system.utils.getClassName(\"motion\"), className)}\n      {...rest}\n    />\n  )\n}) as MotionStyledComponent<\"div\">\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,eAAe,CAAC,YAAa;AAEnC,MAAM,YAAY,mCAAoB,OAAO,EAAE,aAAc,EAAC;;;;;;AAO9D,MAAa,SAAU,CAAC,EACtB,KACA,IAAI,SAAS,OACb,UACA,GAAG,MACa,KAAK;CACrB,MAAM,SAAS,+CAAW;CAC1B,MAAM,KAAK,mBAAQ,MAAM,oBAAO,OAAO,OAAO,EAAE,CAAC,MAAO,EAAC;AAEzD,wBACE,2BAAC;EACM;EACD;EACJ,WAAW,0CAAG,OAAO,MAAM,aAAa,SAAS,EAAE,UAAU;EAC7D,GAAI;GACJ;AAEL"}

package/dist/cjs/components/motion/transition.cjs

@@ -0,0 +1,43 @@
+const require_utils_index = require('../../utils/index.cjs');
+
+//#region src/components/motion/transition.ts
+const createTransition = {
+	enter: function(transition) {
+		return function(delay, duration) {
+			return {
+				...transition ?? {
+					duration: .2,
+					ease: [
+						0,
+						0,
+						.58,
+						1
+					]
+				},
+				...duration ? { duration: (0, require_utils_index.utils_exports.isNumber)(duration) ? duration : duration.enter } : {},
+				delay: (0, require_utils_index.utils_exports.isNumber)(delay) ? delay : delay?.enter
+			};
+		};
+	},
+	exit: function(transition) {
+		return function(delay, duration) {
+			return {
+				...transition ?? {
+					duration: .2,
+					ease: [
+						.42,
+						0,
+						1,
+						1
+					]
+				},
+				...duration ? { duration: (0, require_utils_index.utils_exports.isNumber)(duration) ? duration : duration.exit } : {},
+				delay: (0, require_utils_index.utils_exports.isNumber)(delay) ? delay : delay?.exit
+			};
+		};
+	}
+};
+
+//#endregion
+exports.createTransition = createTransition;
+//# sourceMappingURL=transition.cjs.map

package/dist/cjs/components/motion/transition.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.cjs","names":["transition?: Transition","delay?: MotionTransitionProps[\"delay\"]","duration?: MotionTransitionProps[\"duration\"]"],"sources":["../../../../src/components/motion/transition.ts"],"sourcesContent":["import type { Transition } from \"motion/react\"\nimport type { MotionTransitionProps } from \"./index.types\"\nimport { isNumber } from \"../../utils\"\n\nexport const createTransition = {\n  enter: function (transition?: Transition) {\n    return function (\n      delay?: MotionTransitionProps[\"delay\"],\n      duration?: MotionTransitionProps[\"duration\"],\n    ): Transition {\n      return {\n        ...(transition ?? {\n          duration: 0.2,\n          ease: [0, 0, 0.58, 1],\n        }),\n        ...(duration\n          ? { duration: isNumber(duration) ? duration : duration.enter }\n          : {}),\n        delay: isNumber(delay) ? delay : delay?.enter,\n      }\n    }\n  },\n  exit: function (transition?: Transition) {\n    return function (\n      delay?: MotionTransitionProps[\"delay\"],\n      duration?: MotionTransitionProps[\"duration\"],\n    ): Transition {\n      return {\n        ...(transition ?? {\n          duration: 0.2,\n          ease: [0.42, 0, 1, 1],\n        }),\n        ...(duration\n          ? { duration: isNumber(duration) ? duration : duration.exit }\n          : {}),\n        delay: isNumber(delay) ? delay : delay?.exit,\n      }\n    }\n  },\n}\n"],"mappings":";;;AAIA,MAAa,mBAAmB;CAC9B,OAAO,SAAUA,YAAyB;AACxC,SAAO,SACLC,OACAC,UACY;AACZ,UAAO;IACL,GAAI,cAAc;KAChB,UAAU;KACV,MAAM;MAAC;MAAG;MAAG;MAAM;KAAE;IACtB;IACD,GAAI,WACA,EAAE,UAAU,gDAAS,SAAS,GAAG,WAAW,SAAS,MAAO,IAC5D,CAAE;IACN,OAAO,gDAAS,MAAM,GAAG,QAAQ,OAAO;GACzC;EACF;CACF;CACD,MAAM,SAAUF,YAAyB;AACvC,SAAO,SACLC,OACAC,UACY;AACZ,UAAO;IACL,GAAI,cAAc;KAChB,UAAU;KACV,MAAM;MAAC;MAAM;MAAG;MAAG;KAAE;IACtB;IACD,GAAI,WACA,EAAE,UAAU,gDAAS,SAAS,GAAG,WAAW,SAAS,KAAM,IAC3D,CAAE;IACN,OAAO,gDAAS,MAAM,GAAG,QAAQ,OAAO;GACzC;EACF;CACF;AACF"}

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

@@ -0,0 +1,18 @@
+const require_components_native_select_native_select_style = require('./native-select.style.cjs');
+const require_components_native_select_use_native_select = require('./use-native-select.cjs');
+const require_components_native_select_native_select = require('./native-select.cjs');
+const require_components_native_select_namespace = require('./namespace.cjs');
+
+exports.NativeOption = require_components_native_select_native_select.NativeOption;
+exports.NativeOptionGroup = require_components_native_select_native_select.NativeOptionGroup;
+Object.defineProperty(exports, 'NativeSelect', {
+  enumerable: true,
+  get: function () {
+    return require_components_native_select_namespace.namespace_exports;
+  }
+});
+exports.NativeSelectPropsContext = require_components_native_select_native_select.NativeSelectPropsContext;
+exports.NativeSelectRoot = require_components_native_select_native_select.NativeSelectRoot;
+exports.nativeSelectStyle = require_components_native_select_native_select_style.nativeSelectStyle;
+exports.useNativeSelect = require_components_native_select_use_native_select.useNativeSelect;
+exports.useNativeSelectProps = require_components_native_select_native_select.useNativeSelectProps;

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

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_native_select_native_select = require('./native-select.cjs');
+
+//#region src/components/native-select/namespace.ts
+var namespace_exports = {};
+require_rolldown_runtime.__export(namespace_exports, {
+	Option: () => require_components_native_select_native_select.NativeOption,
+	OptionGroup: () => require_components_native_select_native_select.NativeOptionGroup,
+	PropsContext: () => require_components_native_select_native_select.NativeSelectPropsContext,
+	Root: () => require_components_native_select_native_select.NativeSelectRoot,
+	usePropsContext: () => require_components_native_select_native_select.useNativeSelectProps
+});
+
+//#endregion
+exports.Option = require_components_native_select_native_select.NativeOption;
+exports.OptionGroup = require_components_native_select_native_select.NativeOptionGroup;
+exports.PropsContext = require_components_native_select_native_select.NativeSelectPropsContext;
+exports.Root = require_components_native_select_native_select.NativeSelectRoot;
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+exports.usePropsContext = require_components_native_select_native_select.useNativeSelectProps;
+//# sourceMappingURL=namespace.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/native-select/namespace.ts"],"sourcesContent":["export {\n  NativeOption as Option,\n  NativeOptionGroup as OptionGroup,\n  NativeSelectPropsContext as PropsContext,\n  NativeSelectRoot as Root,\n  useNativeSelectProps as usePropsContext,\n} from \"./native-select\"\nexport type {\n  NativeOptionGroupProps as OptionGroupProps,\n  NativeOptionProps as OptionProps,\n  NativeSelectRootProps as RootProps,\n} from \"./native-select\"\nexport type { NativeSelectItem as Item } from \"./use-native-select\"\n"],"mappings":""}

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

@@ -0,0 +1,70 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
+const require_components_group_use_group = require('../group/use-group.cjs');
+const require_components_input_use_input_border = require('../input/use-input-border.cjs');
+const require_components_input_input = require('../input/input.cjs');
+const require_components_input_input_element = require('../input/input-element.cjs');
+const require_components_input_input_group = require('../input/input-group.cjs');
+const require_components_native_select_native_select_style = require('./native-select.style.cjs');
+const require_components_native_select_use_native_select = require('./use-native-select.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/native-select/native-select.tsx
+const { component, PropsContext: NativeSelectPropsContext, usePropsContext: useNativeSelectProps, withContext, withProvider } = require_core_components_create_component.createSlotComponent("native-select", require_components_native_select_native_select_style.nativeSelectStyle);
+/**
+* `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).
+*
+* @see https://yamada-ui.com/components/native-select
+*/
+const NativeSelectRoot = withProvider((props) => {
+	const [groupItemProps, { className, css, colorScheme, errorBorderColor, focusBorderColor, icon, elementProps, iconProps, rootProps,...rest }] = require_components_group_use_group.useGroupItemProps(props);
+	const { getFieldProps, getIconProps, getRootProps } = require_components_native_select_use_native_select.useNativeSelect(rest);
+	const varProps = require_components_input_use_input_border.useInputBorder({
+		errorBorderColor,
+		focusBorderColor
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_input_input_group.InputGroupRoot, {
+		className,
+		css,
+		colorScheme,
+		...getRootProps({
+			...groupItemProps,
+			...rootProps
+		}),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeSelectField, { ...getFieldProps(varProps) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input_input_element.InputElement, {
+			...elementProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeSelectIcon, {
+				icon,
+				...getIconProps(iconProps)
+			})
+		})]
+	});
+}, "root")((props) => {
+	const context = require_components_input_input.useInputPropsContext();
+	return {
+		...context,
+		...props
+	};
+});
+const NativeSelectField = withContext("select", "field")({ "data-group-propagate": "" });
+const NativeSelectIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
+	children: icon || children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_down_icon.ChevronDownIcon, {}),
+	...rest
+}));
+const NativeOptionGroup = component("optgroup", "optionGroup")();
+const NativeOption = component("option", "option")();
+
+//#endregion
+exports.NativeOption = NativeOption;
+exports.NativeOptionGroup = NativeOptionGroup;
+exports.NativeSelectPropsContext = NativeSelectPropsContext;
+exports.NativeSelectRoot = NativeSelectRoot;
+exports.component = component;
+exports.useNativeSelectProps = useNativeSelectProps;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=native-select.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.cjs","names":["nativeSelectStyle","ChevronDownIcon"],"sources":["../../../../src/components/native-select/native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { NativeSelectStyle } from \"./native-select.style\"\nimport type { UseNativeSelectProps } from \"./use-native-select\"\nimport { createSlotComponent } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { nativeSelectStyle } from \"./native-select.style\"\nimport { useNativeSelect } from \"./use-native-select\"\n\nexport interface NativeSelectRootProps\n  extends Omit<HTMLStyledProps<\"select\">, \"size\">,\n    UseNativeSelectProps,\n    ThemeProps<NativeSelectStyle>,\n    FieldProps,\n    UseInputBorderProps {\n  /**\n   * The icon to be used in the select.\n   */\n  icon?: ReactNode\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: NativeSelectIconProps\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nexport const {\n  component,\n  PropsContext: NativeSelectPropsContext,\n  usePropsContext: useNativeSelectProps,\n  withContext,\n  withProvider,\n} = createSlotComponent<NativeSelectRootProps, NativeSelectStyle>(\n  \"native-select\",\n  nativeSelectStyle,\n)\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see https://yamada-ui.com/components/native-select\n */\nexport const NativeSelectRoot = withProvider<\"select\", NativeSelectRootProps>(\n  (props) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        elementProps,\n        iconProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const { getFieldProps, getIconProps, getRootProps } = useNativeSelect(rest)\n    const varProps = useInputBorder({\n      errorBorderColor,\n      focusBorderColor,\n    })\n\n    return (\n      <InputGroup.Root\n        className={className}\n        css={css}\n        colorScheme={colorScheme}\n        {...getRootProps({ ...groupItemProps, ...rootProps })}\n      >\n        <NativeSelectField {...getFieldProps(varProps)} />\n\n        <InputGroup.Element {...elementProps}>\n          <NativeSelectIcon icon={icon} {...getIconProps(iconProps)} />\n        </InputGroup.Element>\n      </InputGroup.Root>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface NativeSelectFieldProps extends HTMLStyledProps<\"select\"> {}\n\nconst NativeSelectField = withContext<\"select\", NativeSelectFieldProps>(\n  \"select\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface NativeSelectIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst NativeSelectIcon = withContext<\"div\", NativeSelectIconProps>(\n  \"div\",\n  \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n  children: icon || children || <ChevronDownIcon />,\n  ...rest,\n}))\n\nexport interface NativeOptionGroupProps extends HTMLProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = component<\"optgroup\", NativeOptionGroupProps>(\n  \"optgroup\",\n  \"optionGroup\",\n)()\n\nexport interface NativeOptionProps extends HTMLProps<\"option\"> {}\n\nexport const NativeOption = component<\"option\", NativeOptionProps>(\n  \"option\",\n  \"option\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;AAuCA,MAAa,EACX,WACA,cAAc,0BACd,iBAAiB,sBACjB,aACA,cACD,GAAG,6DACF,iBACAA,uEACD;;;;;;AAOD,MAAa,mBAAmB,aAC9B,CAAC,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,kBACA,kBACA,MACA,cACA,WACA,UACA,GAAG,MACJ,CACF,GAAG,qDAAkB,MAAM;CAC5B,MAAM,EAAE,eAAe,cAAc,cAAc,GAAG,mEAAgB,KAAK;CAC3E,MAAM,WAAW,yDAAe;EAC9B;EACA;CACD,EAAC;AAEF,wBACE;EACa;EACN;EACQ;EACb,GAAI,aAAa;GAAE,GAAG;GAAgB,GAAG;EAAW,EAAC;6BAErD,2BAAC,qBAAkB,GAAI,cAAc,SAAS,GAAI,kBAElD;GAAoB,GAAI;6BACtB,2BAAC;IAAuB;IAAM,GAAI,aAAa,UAAU;KAAI;IAC1C;GACL;AAErB,GACD,OACD,CAAC,CAAC,UAAU;CACX,MAAM,UAAU,qDAAsB;AAEtC,QAAO;EAAE,GAAG;EAAS,GAAG;CAAO;AAChC,EAAC;AAIF,MAAM,oBAAoB,YACxB,UACA,QACD,CAAC,EAAE,wBAAwB,GAAI,EAAC;AAMjC,MAAM,mBAAmB,YACvB,OACA,OACD,SAAY,CAAC,EAAE,UAAU,KAAM,GAAG,MAAM,MAAM;CAC7C,UAAU,QAAQ,4BAAY,2BAACC,8CAAkB;CACjD,GAAG;AACJ,GAAE;AAIH,MAAa,oBAAoB,UAC/B,YACA,cACD,EAAE;AAIH,MAAa,eAAe,UAC1B,UACA,SACD,EAAE"}

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

@@ -0,0 +1,64 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+const require_components_input_input_style = require('../input/input.style.cjs');
+
+//#region src/components/native-select/native-select.style.ts
+const nativeSelectStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		field: {
+			...require_components_input_input_style.inputStyle.base,
+			_readOnly: { pointerEvents: "none" }
+		},
+		icon: {
+			alignItems: "center",
+			color: "colorScheme.outline",
+			display: "inline-flex",
+			justifyContent: "center",
+			_disabled: { layerStyle: "disabled" }
+		},
+		root: {}
+	},
+	variants: {
+		filled: { field: require_components_input_input_style.inputStyle.variants?.filled },
+		flushed: {
+			field: require_components_input_input_style.inputStyle.variants?.flushed,
+			root: require_components_input_input_style.getInputPaddingResetStyle("& > select")
+		},
+		outline: { field: require_components_input_input_style.inputStyle.variants?.outline },
+		plain: { field: require_components_input_input_style.inputStyle.variants?.plain }
+	},
+	sizes: {
+		xs: {
+			field: require_components_input_input_style.inputStyle.sizes?.xs,
+			icon: { fontSize: require_components_input_input_style.inputStyle.sizes?.xs.fontSize },
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.xs.minH, "& > select")
+		},
+		sm: {
+			field: require_components_input_input_style.inputStyle.sizes?.sm,
+			icon: { fontSize: require_components_input_input_style.inputStyle.sizes?.sm.fontSize },
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.sm.minH, "& > select")
+		},
+		md: {
+			field: require_components_input_input_style.inputStyle.sizes?.md,
+			icon: { fontSize: require_components_input_input_style.inputStyle.sizes?.md.fontSize },
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.md.minH, "& > select")
+		},
+		lg: {
+			field: require_components_input_input_style.inputStyle.sizes?.lg,
+			icon: { fontSize: require_components_input_input_style.inputStyle.sizes?.lg.fontSize },
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.lg.minH, "& > select")
+		},
+		xl: {
+			field: require_components_input_input_style.inputStyle.sizes?.xl,
+			icon: { fontSize: require_components_input_input_style.inputStyle.sizes?.xl.fontSize },
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.xl.minH, "& > select")
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "outline"
+	}
+});
+
+//#endregion
+exports.nativeSelectStyle = nativeSelectStyle;
+//# sourceMappingURL=native-select.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.style.cjs","names":["inputStyle"],"sources":["../../../../src/components/native-select/native-select.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport {\n  getInputHeightStyle,\n  getInputPaddingResetStyle,\n  inputStyle,\n} from \"../input\"\n\nexport const nativeSelectStyle = defineComponentSlotStyle({\n  base: {\n    field: { ...inputStyle.base, _readOnly: { pointerEvents: \"none\" } },\n    icon: {\n      alignItems: \"center\",\n      color: \"colorScheme.outline\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    root: {},\n  },\n\n  variants: {\n    filled: {\n      field: inputStyle.variants?.filled,\n    },\n    flushed: {\n      field: inputStyle.variants?.flushed,\n      root: getInputPaddingResetStyle(\"& > select\"),\n    },\n    outline: {\n      field: inputStyle.variants?.outline,\n    },\n    plain: {\n      field: inputStyle.variants?.plain,\n    },\n  },\n\n  sizes: {\n    xs: {\n      field: inputStyle.sizes?.xs,\n      icon: {\n        fontSize: inputStyle.sizes?.xs.fontSize,\n      },\n      root: getInputHeightStyle(inputStyle.sizes?.xs.minH, \"& > select\"),\n    },\n    sm: {\n      field: inputStyle.sizes?.sm,\n      icon: {\n        fontSize: inputStyle.sizes?.sm.fontSize,\n      },\n      root: getInputHeightStyle(inputStyle.sizes?.sm.minH, \"& > select\"),\n    },\n    md: {\n      field: inputStyle.sizes?.md,\n      icon: {\n        fontSize: inputStyle.sizes?.md.fontSize,\n      },\n      root: getInputHeightStyle(inputStyle.sizes?.md.minH, \"& > select\"),\n    },\n    lg: {\n      field: inputStyle.sizes?.lg,\n      icon: {\n        fontSize: inputStyle.sizes?.lg.fontSize,\n      },\n      root: getInputHeightStyle(inputStyle.sizes?.lg.minH, \"& > select\"),\n    },\n    xl: {\n      field: inputStyle.sizes?.xl,\n      icon: {\n        fontSize: inputStyle.sizes?.xl.fontSize,\n      },\n      root: getInputHeightStyle(inputStyle.sizes?.xl.minH, \"& > select\"),\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n  },\n})\n\nexport type NativeSelectStyle = typeof nativeSelectStyle\n"],"mappings":";;;;AAOA,MAAa,oBAAoB,oDAAyB;CACxD,MAAM;EACJ,OAAO;GAAE,GAAGA,gDAAW;GAAM,WAAW,EAAE,eAAe,OAAQ;EAAE;EACnE,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,gBAAgB;GAChB,WAAW,EACT,YAAY,WACb;EACF;EACD,MAAM,CAAE;CACT;CAED,UAAU;EACR,QAAQ,EACN,OAAOA,gDAAW,UAAU,OAC7B;EACD,SAAS;GACP,OAAOA,gDAAW,UAAU;GAC5B,MAAM,+DAA0B,aAAa;EAC9C;EACD,SAAS,EACP,OAAOA,gDAAW,UAAU,QAC7B;EACD,OAAO,EACL,OAAOA,gDAAW,UAAU,MAC7B;CACF;CAED,OAAO;EACL,IAAI;GACF,OAAOA,gDAAW,OAAO;GACzB,MAAM,EACJ,UAAUA,gDAAW,OAAO,GAAG,SAChC;GACD,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,aAAa;EACnE;EACD,IAAI;GACF,OAAOA,gDAAW,OAAO;GACzB,MAAM,EACJ,UAAUA,gDAAW,OAAO,GAAG,SAChC;GACD,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,aAAa;EACnE;EACD,IAAI;GACF,OAAOA,gDAAW,OAAO;GACzB,MAAM,EACJ,UAAUA,gDAAW,OAAO,GAAG,SAChC;GACD,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,aAAa;EACnE;EACD,IAAI;GACF,OAAOA,gDAAW,OAAO;GACzB,MAAM,EACJ,UAAUA,gDAAW,OAAO,GAAG,SAChC;GACD,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,aAAa;EACnE;EACD,IAAI;GACF,OAAOA,gDAAW,OAAO;GACzB,MAAM,EACJ,UAAUA,gDAAW,OAAO,GAAG,SAChC;GACD,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,aAAa;EACnE;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;CACV;AACF,EAAC"}

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

@@ -0,0 +1,93 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_components_field_use_field_props = require('../field/use-field-props.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/native-select/use-native-select.tsx
+const useNativeSelect = (props = {}) => {
+	const { props: { children, disabled, items = [], placeholder, placeholderInOptions = true, readOnly,...rest }, ariaProps, dataProps, eventProps } = require_components_field_use_field_props.useFieldProps(props);
+	const interactive = !(readOnly || disabled);
+	const computedChildren = (0, react.useMemo)(() => {
+		let computedChildren$1 = null;
+		if (children) computedChildren$1 = children;
+		else if (items.length) computedChildren$1 = items.map((item, index) => {
+			if ("value" in item) {
+				const { label,...props$1 } = item;
+				return (0, react.cloneElement)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {}), {
+					key: index,
+					children: label,
+					...props$1
+				});
+			} else if ("items" in item) {
+				const { items: items$1 = [], label,...props$1 } = item;
+				return (0, react.cloneElement)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("optgroup", {}), {
+					key: index,
+					children: items$1.map(({ label: label$1,...props$2 }, index$1) => (0, react.cloneElement)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {}), {
+						key: index$1,
+						children: label$1,
+						...props$2
+					})),
+					label,
+					...props$1
+				});
+			}
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [placeholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			hidden: !placeholderInOptions,
+			value: "",
+			children: placeholder
+		}) : null, computedChildren$1] });
+	}, [
+		children,
+		items,
+		placeholder,
+		placeholderInOptions
+	]);
+	const getRootProps = (0, react.useCallback)((props$1) => ({
+		...dataProps,
+		...props$1
+	}), [dataProps]);
+	const getFieldProps = (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
+		disabled,
+		readOnly,
+		tabIndex: interactive ? void 0 : -1,
+		...ariaProps,
+		...dataProps,
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
+		"aria-label": placeholder,
+		...rest,
+		...props$1,
+		ref: require_utils_ref.mergeRefs(ref, rest.ref),
+		children: props$1.children ?? computedChildren,
+		onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
+		onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus)
+	}), [
+		interactive,
+		ariaProps,
+		computedChildren,
+		dataProps,
+		eventProps,
+		rest,
+		placeholder,
+		disabled,
+		readOnly
+	]);
+	const getIconProps = (0, react.useCallback)((props$1) => ({
+		...dataProps,
+		...props$1
+	}), [dataProps]);
+	return {
+		getFieldProps,
+		getIconProps,
+		getRootProps
+	};
+};
+
+//#endregion
+exports.useNativeSelect = useNativeSelect;
+//# sourceMappingURL=use-native-select.cjs.map

package/dist/cjs/components/native-select/use-native-select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-native-select.cjs","names":["props: UseNativeSelectProps","computedChildren: ReactNode","props","index","label","computedChildren","getRootProps: PropGetter","getFieldProps: PropGetter<\"select\">","getIconProps: PropGetter"],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field/field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { ariaAttr, handlerAll } from \"../../utils\"\nimport { mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem\n  extends Omit<HTMLProps<\"option\">, \"children\" | \"label\" | \"value\"> {\n  label?: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n  value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n  items?: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n  | NativeSelectItemWithItems\n  | NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default '[]'\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n  /**\n   * If `true`, include placeholders in options.\n   *\n   * @default true\n   */\n  placeholderInOptions?: boolean\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n  const {\n    props: {\n      children,\n      disabled,\n      items = [],\n      placeholder,\n      placeholderInOptions = true,\n      readOnly,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n\n  const computedChildren = useMemo(() => {\n    let computedChildren: ReactNode = null\n\n    if (children) {\n      computedChildren = children\n    } else if (items.length) {\n      computedChildren = items.map((item, index) => {\n        if (\"value\" in item) {\n          const { label, ...props } = item\n\n          return cloneElement(<option />, {\n            key: index,\n            children: label,\n            ...props,\n          })\n        } else if (\"items\" in item) {\n          const { items = [], label, ...props } = item\n\n          return cloneElement(<optgroup />, {\n            key: index,\n            children: items.map(({ label, ...props }, index) =>\n              cloneElement(<option />, {\n                key: index,\n                children: label,\n                ...props,\n              }),\n            ),\n            label,\n            ...props,\n          })\n        }\n      })\n    }\n\n    return (\n      <>\n        {placeholder ? (\n          <option hidden={!placeholderInOptions} value=\"\">\n            {placeholder}\n          </option>\n        ) : null}\n\n        {computedChildren}\n      </>\n    )\n  }, [children, items, placeholder, placeholderInOptions])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter<\"select\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      disabled,\n      readOnly,\n      tabIndex: interactive ? undefined : -1,\n      ...ariaProps,\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": placeholder,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n      children: props.children ?? computedChildren,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n    }),\n    [\n      interactive,\n      ariaProps,\n      computedChildren,\n      dataProps,\n      eventProps,\n\n      rest,\n      placeholder,\n      disabled,\n      readOnly,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;;;;;AA8CA,MAAa,kBAAkB,CAACA,QAA8B,CAAE,MAAK;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,QAAQ,CAAE,GACV,aACA,uBAAuB,MACvB,SACA,GAAG,MACJ,EACD,WACA,WACA,YACD,GAAG,uDAAc,MAAM;CACxB,MAAM,gBAAgB,YAAY;CAElC,MAAM,mBAAmB,mBAAQ,MAAM;EACrC,IAAIC,qBAA8B;AAElC,MAAI,SACF,sBAAmB;WACV,MAAM,OACf,sBAAmB,MAAM,IAAI,CAAC,MAAM,UAAU;AAC5C,OAAI,WAAW,MAAM;IACnB,MAAM,EAAE,MAAO,GAAGC,SAAO,GAAG;AAE5B,WAAO,wCAAa,2BAAC,aAAS,EAAE;KAC9B,KAAK;KACL,UAAU;KACV,GAAGA;IACJ,EAAC;GACH,WAAU,WAAW,MAAM;IAC1B,MAAM,EAAE,iBAAQ,CAAE,GAAE,MAAO,GAAGA,SAAO,GAAG;AAExC,WAAO,wCAAa,2BAAC,eAAW,EAAE;KAChC,KAAK;KACL,UAAU,QAAM,IAAI,CAAC,EAAE,eAAO,GAAGA,SAAO,EAAEC,YACxC,wCAAa,2BAAC,aAAS,EAAE;MACvB,KAAKA;MACL,UAAUC;MACV,GAAGF;KACJ,EAAC,CACH;KACD;KACA,GAAGA;IACJ,EAAC;GACH;EACF,EAAC;AAGJ,yBACE,qEACG,8BACC,2BAAC;GAAO,SAAS;GAAsB,OAAM;aAC1C;IACM,GACP,MAEHG,sBACA;CAEN,GAAE;EAAC;EAAU;EAAO;EAAa;CAAqB,EAAC;CAExD,MAAMC,eAA2B,uBAC/B,CAACJ,aAAW;EACV,GAAG;EACH,GAAGA;CACJ,IACD,CAAC,SAAU,EACZ;CAED,MAAMK,gBAAsC,uBAC1C,CAAC,EAAE,IAAK,GAAGL,SAAO,GAAG,CAAE,OAAM;EAC3B;EACA;EACA,UAAU,uBAA0B;EACpC,GAAG;EACH,GAAG;EACH,iBAAiB,iDAAU,YAAY;EACvC,cAAc;EACd,GAAG;EACH,GAAGA;EACH,KAAK,4BAAU,KAAK,KAAK,IAAI;EAC7B,UAAUA,QAAM,YAAY;EAC5B,QAAQ,kDAAW,WAAW,QAAQA,QAAM,OAAO;EACnD,SAAS,kDAAW,WAAW,SAASA,QAAM,QAAQ;CACvD,IACD;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMM,eAA2B,uBAC/B,CAACN,aAAW;EACV,GAAG;EACH,GAAGA;CACJ,IACD,CAAC,SAAU,EACZ;AAED,QAAO;EAAE;EAAe;EAAc;CAAc;AACrD"}

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

@@ -0,0 +1,23 @@
+const require_components_native_table_native_table_style = require('./native-table.style.cjs');
+const require_components_native_table_native_table = require('./native-table.cjs');
+const require_components_native_table_namespace = require('./namespace.cjs');
+
+exports.Caption = require_components_native_table_native_table.Caption;
+exports.Col = require_components_native_table_native_table.Col;
+exports.Colgroup = require_components_native_table_native_table.Colgroup;
+Object.defineProperty(exports, 'NativeTable', {
+  enumerable: true,
+  get: function () {
+    return require_components_native_table_namespace.namespace_exports;
+  }
+});
+exports.NativeTablePropsContext = require_components_native_table_native_table.NativeTablePropsContext;
+exports.NativeTableRoot = require_components_native_table_native_table.NativeTableRoot;
+exports.Tbody = require_components_native_table_native_table.Tbody;
+exports.Td = require_components_native_table_native_table.Td;
+exports.Tfoot = require_components_native_table_native_table.Tfoot;
+exports.Th = require_components_native_table_native_table.Th;
+exports.Thead = require_components_native_table_native_table.Thead;
+exports.Tr = require_components_native_table_native_table.Tr;
+exports.nativeTableStyle = require_components_native_table_native_table_style.nativeTableStyle;
+exports.useNativeTablePropsContext = require_components_native_table_native_table.useNativeTablePropsContext;

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

@@ -0,0 +1,40 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_native_table_native_table = require('./native-table.cjs');
+
+//#region src/components/native-table/namespace.ts
+var namespace_exports = {};
+require_rolldown_runtime.__export(namespace_exports, {
+	Caption: () => require_components_native_table_native_table.Caption,
+	Col: () => require_components_native_table_native_table.Col,
+	Colgroup: () => require_components_native_table_native_table.Colgroup,
+	PropsContext: () => require_components_native_table_native_table.NativeTablePropsContext,
+	Root: () => require_components_native_table_native_table.NativeTableRoot,
+	Tbody: () => require_components_native_table_native_table.Tbody,
+	Td: () => require_components_native_table_native_table.Td,
+	Tfoot: () => require_components_native_table_native_table.Tfoot,
+	Th: () => require_components_native_table_native_table.Th,
+	Thead: () => require_components_native_table_native_table.Thead,
+	Tr: () => require_components_native_table_native_table.Tr,
+	usePropsContext: () => require_components_native_table_native_table.useNativeTablePropsContext
+});
+
+//#endregion
+exports.Caption = require_components_native_table_native_table.Caption;
+exports.Col = require_components_native_table_native_table.Col;
+exports.Colgroup = require_components_native_table_native_table.Colgroup;
+exports.PropsContext = require_components_native_table_native_table.NativeTablePropsContext;
+exports.Root = require_components_native_table_native_table.NativeTableRoot;
+exports.Tbody = require_components_native_table_native_table.Tbody;
+exports.Td = require_components_native_table_native_table.Td;
+exports.Tfoot = require_components_native_table_native_table.Tfoot;
+exports.Th = require_components_native_table_native_table.Th;
+exports.Thead = require_components_native_table_native_table.Thead;
+exports.Tr = require_components_native_table_native_table.Tr;
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+exports.usePropsContext = require_components_native_table_native_table.useNativeTablePropsContext;
+//# sourceMappingURL=namespace.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/native-table/namespace.ts"],"sourcesContent":["export {\n  Caption,\n  Col,\n  Colgroup,\n  NativeTablePropsContext as PropsContext,\n  NativeTableRoot as Root,\n  Tbody,\n  Td,\n  Tfoot,\n  Th,\n  Thead,\n  Tr,\n  useNativeTablePropsContext as usePropsContext,\n} from \"./native-table\"\nexport type {\n  CaptionProps,\n  ColgroupProps,\n  ColProps,\n  NativeTableRootProps as RootProps,\n  TbodyProps,\n  TdProps,\n  TfootProps,\n  TheadProps,\n  ThProps,\n  TrProps,\n} from \"./native-table\"\n"],"mappings":""}

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

@@ -0,0 +1,65 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_native_table_native_table_style = require('./native-table.style.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/native-table/native-table.tsx
+const { PropsContext: NativeTablePropsContext, usePropsContext: useNativeTablePropsContext, withContext, withProvider, useRootComponentProps, useSlotComponentProps } = require_core_components_create_component.createSlotComponent("native-table", require_components_native_table_native_table_style.nativeTableStyle);
+/**
+* `NativeTable` is a component for efficiently organizing and displaying data.
+*
+* @see https://yamada-ui.com/components/native-table
+*/
+const NativeTableRoot = withProvider(({ withScrollArea, scrollAreaProps,...rest }) => {
+	if (withScrollArea) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeTableScrollArea, {
+		...scrollAreaProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.table, { ...rest })
+	});
+	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.table, { ...rest });
+}, "root")(void 0, ({ layout: tableLayout,...rest }) => ({
+	tableLayout,
+	...rest
+}));
+const NativeTableScrollArea = withContext("div", "scrollArea")();
+const Caption = withContext("caption", "caption")(void 0, ({ placement = "end",...rest }) => ({
+	"data-placement": placement,
+	captionSide: placement === "end" ? "bottom" : "top",
+	...rest
+}));
+const Thead = withContext("thead", "thead")();
+const Tbody = withContext("tbody", "tbody")();
+const Tfoot = withContext("tfoot", "tfoot")();
+const Colgroup = withContext("colgroup", "colgroup")();
+const Col = withContext("col", "col")();
+const Th = withContext("th", "th")(void 0, ({ numeric,...rest }) => ({
+	"data-numeric": numeric,
+	...rest
+}));
+const Tr = withContext("tr", "tr")();
+const Td = withContext("td", "td")(void 0, ({ numeric,...rest }) => ({
+	"data-numeric": numeric,
+	...rest
+}));
+
+//#endregion
+exports.Caption = Caption;
+exports.Col = Col;
+exports.Colgroup = Colgroup;
+exports.NativeTablePropsContext = NativeTablePropsContext;
+exports.NativeTableRoot = NativeTableRoot;
+exports.Tbody = Tbody;
+exports.Td = Td;
+exports.Tfoot = Tfoot;
+exports.Th = Th;
+exports.Thead = Thead;
+exports.Tr = Tr;
+exports.useNativeTablePropsContext = useNativeTablePropsContext;
+exports.useRootComponentProps = useRootComponentProps;
+exports.useSlotComponentProps = useSlotComponentProps;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=native-table.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"native-table.cjs","names":["nativeTableStyle","styled"],"sources":["../../../../src/components/native-table/native-table.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  CSSProps,\n  Direction,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { NativeTableStyle } from \"./native-table.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { nativeTableStyle } from \"./native-table.style\"\n\nexport interface NativeTableRootProps\n  extends HTMLStyledProps<\"table\">,\n    ThemeProps<NativeTableStyle> {\n  /**\n   * The CSS `table-layout` property.\n   */\n  layout?: CSSProps[\"tableLayout\"]\n  /**\n   * Whether to enable the scroll area.\n   *\n   * @default false\n   */\n  withScrollArea?: boolean\n  /**\n   * The props for the scroll area.\n   */\n  scrollAreaProps?: NativeTableAreaProps\n}\n\nexport const {\n  PropsContext: NativeTablePropsContext,\n  usePropsContext: useNativeTablePropsContext,\n  withContext,\n  withProvider,\n  useRootComponentProps,\n  useSlotComponentProps,\n} = createSlotComponent<NativeTableRootProps, NativeTableStyle>(\n  \"native-table\",\n  nativeTableStyle,\n)\n\n/**\n * `NativeTable` is a component for efficiently organizing and displaying data.\n *\n * @see https://yamada-ui.com/components/native-table\n */\nexport const NativeTableRoot = withProvider(\n  ({ withScrollArea, scrollAreaProps, ...rest }) => {\n    if (withScrollArea) {\n      return (\n        <NativeTableScrollArea {...scrollAreaProps}>\n          <styled.table {...rest} />\n        </NativeTableScrollArea>\n      )\n    } else {\n      return <styled.table {...rest} />\n    }\n  },\n  \"root\",\n)(undefined, ({ layout: tableLayout, ...rest }) => ({\n  tableLayout,\n  ...rest,\n}))\n\ninterface NativeTableAreaProps\n  extends HTMLStyledProps,\n    ThemeProps<NativeTableStyle> {}\n\nconst NativeTableScrollArea = withContext<\"div\", NativeTableAreaProps>(\n  \"div\",\n  \"scrollArea\",\n)()\n\nexport interface CaptionProps extends HTMLStyledProps<\"caption\"> {\n  /**\n   * The placement of the table caption.\n   *\n   * @default 'end'\n   */\n  placement?: Direction\n}\n\nexport const Caption = withContext<\"caption\", CaptionProps>(\n  \"caption\",\n  \"caption\",\n)(undefined, ({ placement = \"end\", ...rest }) => ({\n  \"data-placement\": placement,\n  captionSide: placement === \"end\" ? \"bottom\" : \"top\",\n  ...rest,\n}))\n\nexport interface TheadProps extends HTMLStyledProps<\"thead\"> {}\n\nexport const Thead = withContext<\"thead\", TheadProps>(\"thead\", \"thead\")()\n\nexport interface TbodyProps extends HTMLStyledProps<\"tbody\"> {}\n\nexport const Tbody = withContext<\"tbody\", TbodyProps>(\"tbody\", \"tbody\")()\n\nexport interface TfootProps extends HTMLStyledProps<\"tfoot\"> {}\n\nexport const Tfoot = withContext<\"tfoot\", TfootProps>(\"tfoot\", \"tfoot\")()\n\nexport interface ColgroupProps extends HTMLStyledProps<\"colgroup\"> {}\n\nexport const Colgroup = withContext<\"colgroup\", ColgroupProps>(\n  \"colgroup\",\n  \"colgroup\",\n)()\n\nexport interface ColProps extends HTMLStyledProps<\"col\"> {}\n\nexport const Col = withContext<\"col\", ColProps>(\"col\", \"col\")()\n\nexport interface ThProps extends HTMLStyledProps<\"th\"> {\n  /**\n   * Aligns the cell content to the right.\n   *\n   * @default false\n   */\n  numeric?: boolean\n}\n\nexport const Th = withContext<\"th\", ThProps>(\"th\", \"th\")(\n  undefined,\n  ({ numeric, ...rest }) => ({\n    \"data-numeric\": numeric,\n    ...rest,\n  }),\n)\n\nexport interface TrProps extends HTMLStyledProps<\"tr\"> {}\n\nexport const Tr = withContext<\"tr\", TrProps>(\"tr\", \"tr\")()\n\nexport interface TdProps extends HTMLStyledProps<\"td\"> {\n  /**\n   * Aligns the cell content to the right.\n   *\n   * @default false\n   */\n  numeric?: boolean\n}\n\nexport const Td = withContext<\"td\", TdProps>(\"td\", \"td\")(\n  undefined,\n  ({ numeric, ...rest }) => ({\n    \"data-numeric\": numeric,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;;;;;;;AA+BA,MAAa,EACX,cAAc,yBACd,iBAAiB,4BACjB,aACA,cACA,uBACA,uBACD,GAAG,6DACF,gBACAA,oEACD;;;;;;AAOD,MAAa,kBAAkB,aAC7B,CAAC,EAAE,gBAAgB,gBAAiB,GAAG,MAAM,KAAK;AAChD,KAAI,eACF,wBACE,2BAAC;EAAsB,GAAI;4BACzB,2BAACC,mCAAO,SAAM,GAAI,OAAQ;GACJ;KAG1B,wBAAO,2BAACA,mCAAO,SAAM,GAAI,OAAQ;AAEpC,GACD,OACD,SAAY,CAAC,EAAE,QAAQ,YAAa,GAAG,MAAM,MAAM;CAClD;CACA,GAAG;AACJ,GAAE;AAMH,MAAM,wBAAwB,YAC5B,OACA,aACD,EAAE;AAWH,MAAa,UAAU,YACrB,WACA,UACD,SAAY,CAAC,EAAE,YAAY,MAAO,GAAG,MAAM,MAAM;CAChD,kBAAkB;CAClB,aAAa,cAAc,QAAQ,WAAW;CAC9C,GAAG;AACJ,GAAE;AAIH,MAAa,QAAQ,YAAiC,SAAS,QAAQ,EAAE;AAIzE,MAAa,QAAQ,YAAiC,SAAS,QAAQ,EAAE;AAIzE,MAAa,QAAQ,YAAiC,SAAS,QAAQ,EAAE;AAIzE,MAAa,WAAW,YACtB,YACA,WACD,EAAE;AAIH,MAAa,MAAM,YAA6B,OAAO,MAAM,EAAE;AAW/D,MAAa,KAAK,YAA2B,MAAM,KAAK,SAEtD,CAAC,EAAE,QAAS,GAAG,MAAM,MAAM;CACzB,gBAAgB;CAChB,GAAG;AACJ,GACF;AAID,MAAa,KAAK,YAA2B,MAAM,KAAK,EAAE;AAW1D,MAAa,KAAK,YAA2B,MAAM,KAAK,SAEtD,CAAC,EAAE,QAAS,GAAG,MAAM,MAAM;CACzB,gBAAgB;CAChB,GAAG;AACJ,GACF"}