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

package/dist/cjs/components/float/float.style.cjs

@@ -0,0 +1,79 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/float/float.style.ts
+const floatStyle = require_core_system_config.defineComponentStyle({
+	base: {
+		alignItems: "center",
+		boxSize: "fit-content",
+		display: "inline-flex",
+		justifyContent: "center",
+		position: "absolute"
+	},
+	props: { placement: {
+		center: {},
+		"center-center": {},
+		"center-end": {},
+		"center-start": {},
+		end: {},
+		"end-center": {},
+		"end-end": {},
+		"end-start": {},
+		start: {},
+		"start-center": {},
+		"start-end": {},
+		"start-start": {}
+	} },
+	compounds: [
+		{
+			css: {
+				insetBlockEnd: "auto",
+				insetBlockStart: "{offset-block, 0px}",
+				translateY: "-50%"
+			},
+			placement: /^start/
+		},
+		{
+			css: {
+				insetBlockEnd: "{offset-block, 0px}",
+				insetBlockStart: "auto",
+				translateY: "50%"
+			},
+			placement: /^end/
+		},
+		{
+			css: {
+				insetBlock: "50%",
+				translateY: "-50%"
+			},
+			placement: /^center/
+		},
+		{
+			css: {
+				insetInlineEnd: "auto",
+				insetInlineStart: "{offset-inline, 0px}",
+				translateX: "-50%"
+			},
+			placement: /start$/
+		},
+		{
+			css: {
+				insetInlineEnd: "{offset-inline, 0px}",
+				insetInlineStart: "auto",
+				translateX: "50%"
+			},
+			placement: /end$/
+		},
+		{
+			css: {
+				insetInline: "50%",
+				translateX: "-50%"
+			},
+			placement: /center$/
+		}
+	],
+	defaultProps: { placement: "start-end" }
+});
+
+//#endregion
+exports.floatStyle = floatStyle;
+//# sourceMappingURL=float.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"float.style.cjs","names":[],"sources":["../../../../src/components/float/float.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const floatStyle = defineComponentStyle({\n  base: {\n    alignItems: \"center\",\n    boxSize: \"fit-content\",\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n\n  props: {\n    /**\n     * The placement of the float.\n     *\n     * @default \"start-end\"\n     */\n    placement: {\n      center: {},\n      \"center-center\": {},\n      \"center-end\": {},\n      \"center-start\": {},\n      end: {},\n      \"end-center\": {},\n      \"end-end\": {},\n      \"end-start\": {},\n      start: {},\n      \"start-center\": {},\n      \"start-end\": {},\n      \"start-start\": {},\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        insetBlockEnd: \"auto\",\n        insetBlockStart: \"{offset-block, 0px}\",\n        translateY: \"-50%\",\n      },\n      placement: /^start/,\n    },\n    {\n      css: {\n        insetBlockEnd: \"{offset-block, 0px}\",\n        insetBlockStart: \"auto\",\n        translateY: \"50%\",\n      },\n      placement: /^end/,\n    },\n    {\n      css: {\n        insetBlock: \"50%\",\n        translateY: \"-50%\",\n      },\n      placement: /^center/,\n    },\n    {\n      css: {\n        insetInlineEnd: \"auto\",\n        insetInlineStart: \"{offset-inline, 0px}\",\n        translateX: \"-50%\",\n      },\n      placement: /start$/,\n    },\n    {\n      css: {\n        insetInlineEnd: \"{offset-inline, 0px}\",\n        insetInlineStart: \"auto\",\n        translateX: \"50%\",\n      },\n      placement: /end$/,\n    },\n    {\n      css: {\n        insetInline: \"50%\",\n        translateX: \"-50%\",\n      },\n      placement: /center$/,\n    },\n  ],\n\n  defaultProps: {\n    placement: \"start-end\",\n  },\n})\n\nexport type FloatStyle = typeof floatStyle\n"],"mappings":";;;AAEA,MAAa,aAAa,gDAAqB;CAC7C,MAAM;EACJ,YAAY;EACZ,SAAS;EACT,SAAS;EACT,gBAAgB;EAChB,UAAU;CACX;CAED,OAAO,EAML,WAAW;EACT,QAAQ,CAAE;EACV,iBAAiB,CAAE;EACnB,cAAc,CAAE;EAChB,gBAAgB,CAAE;EAClB,KAAK,CAAE;EACP,cAAc,CAAE;EAChB,WAAW,CAAE;EACb,aAAa,CAAE;EACf,OAAO,CAAE;EACT,gBAAgB,CAAE;EAClB,aAAa,CAAE;EACf,eAAe,CAAE;CAClB,EACF;CAED,WAAW;EACT;GACE,KAAK;IACH,eAAe;IACf,iBAAiB;IACjB,YAAY;GACb;GACD,WAAW;EACZ;EACD;GACE,KAAK;IACH,eAAe;IACf,iBAAiB;IACjB,YAAY;GACb;GACD,WAAW;EACZ;EACD;GACE,KAAK;IACH,YAAY;IACZ,YAAY;GACb;GACD,WAAW;EACZ;EACD;GACE,KAAK;IACH,gBAAgB;IAChB,kBAAkB;IAClB,YAAY;GACb;GACD,WAAW;EACZ;EACD;GACE,KAAK;IACH,gBAAgB;IAChB,kBAAkB;IAClB,YAAY;GACb;GACD,WAAW;EACZ;EACD;GACE,KAAK;IACH,aAAa;IACb,YAAY;GACb;GACD,WAAW;EACZ;CACF;CAED,cAAc,EACZ,WAAW,YACZ;AACF,EAAC"}

package/dist/cjs/components/float/index.cjs

@@ -0,0 +1,7 @@
+const require_components_float_float_style = require('./float.style.cjs');
+const require_components_float_float = require('./float.cjs');
+
+exports.Float = require_components_float_float.Float;
+exports.FloatPropsContext = require_components_float_float.FloatPropsContext;
+exports.floatStyle = require_components_float_float_style.floatStyle;
+exports.useFloatPropsContext = require_components_float_float.useFloatPropsContext;

package/dist/cjs/components/focus-lock/focus-lock.cjs

@@ -0,0 +1,45 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const react_focus_lock = require_rolldown_runtime.__toESM(require("react-focus-lock"));
+
+//#region src/components/focus-lock/focus-lock.tsx
+const InternalFocusLock = (0, require_utils_index.utils_exports.interopDefault)(react_focus_lock.default);
+/**
+* `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.
+*
+* @see https://yamada-ui.com/components/focus-lock
+*/
+const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, initialFocusRef, lockFocusAcrossFrames, persistentFocus, restoreFocus }) => {
+	const returnFocus = restoreFocus && !finalFocusRef;
+	const onActivation = (0, react.useCallback)(() => {
+		if (initialFocusRef?.current) initialFocusRef.current.focus();
+		else if (contentRef?.current) {
+			const focusables = (0, require_utils_index.utils_exports.getFocusableElements)(contentRef.current);
+			if (focusables.length === 0) requestAnimationFrame(() => {
+				contentRef.current?.focus();
+			});
+		}
+	}, [initialFocusRef, contentRef]);
+	const onDeactivation = (0, react.useCallback)(() => {
+		finalFocusRef?.current?.focus();
+	}, [finalFocusRef]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalFocusLock, {
+		autoFocus,
+		crossFrame: lockFocusAcrossFrames,
+		disabled,
+		persistentFocus,
+		returnFocus,
+		onActivation,
+		onDeactivation,
+		children
+	});
+};
+
+//#endregion
+exports.FocusLock = FocusLock;
+//# sourceMappingURL=focus-lock.cjs.map

package/dist/cjs/components/focus-lock/focus-lock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-lock.cjs","names":["ReactFocusLock","FocusLock: FC<FocusLockProps>"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport { getFocusableElements, interopDefault } from \"../../utils\"\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <InternalFocusLock\n      autoFocus={autoFocus}\n      crossFrame={lockFocusAcrossFrames}\n      disabled={disabled}\n      persistentFocus={persistentFocus}\n      returnFocus={returnFocus}\n      onActivation={onActivation}\n      onDeactivation={onDeactivation}\n    >\n      {children}\n    </InternalFocusLock>\n  )\n}\n"],"mappings":";;;;;;;;;;AAOA,MAAM,oBAAoB,sDAAeA,yBAAe;;;;;;AAsDxD,MAAaC,YAAgC,CAAC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,cACD,KAAK;CACJ,MAAM,cAAc,iBAAiB;CAErC,MAAM,eAAe,uBAAY,MAAM;AACrC,MAAI,iBAAiB,QACnB,iBAAgB,QAAQ,OAAO;WACtB,YAAY,SAAS;GAC9B,MAAM,aAAa,4DAAqB,WAAW,QAAQ;AAE3D,OAAI,WAAW,WAAW,EACxB,uBAAsB,MAAM;AAC1B,eAAW,SAAS,OAAO;GAC5B,EAAC;EACL;CACF,GAAE,CAAC,iBAAiB,UAAW,EAAC;CAEjC,MAAM,iBAAiB,uBAAY,MAAM;AACvC,iBAAe,SAAS,OAAO;CAChC,GAAE,CAAC,aAAc,EAAC;AAEnB,wBACE,2BAAC;EACY;EACX,YAAY;EACF;EACO;EACJ;EACC;EACE;EAEf;GACiB;AAEvB"}

package/dist/cjs/components/focus-lock/index.cjs

@@ -0,0 +1,3 @@
+const require_components_focus_lock_focus_lock = require('./focus-lock.cjs');
+
+exports.FocusLock = require_components_focus_lock_focus_lock.FocusLock;

package/dist/cjs/components/for/for.cjs

@@ -0,0 +1,22 @@
+const require_utils_index = require('../../utils/index.cjs');
+
+//#region src/components/for/for.tsx
+/**
+* `For` is a component used to loop over an array and render a component for each item.
+*
+* @see https://yamada-ui.com/components/for
+*/
+const For = ({ children, each, fallback, filter, limit, offset = 0, reverse = false, sort }) => {
+	if (!each || !(0, require_utils_index.utils_exports.isArray)(each) || !each.length) return fallback || null;
+	const cloned = [...each];
+	const filtered = filter ? cloned.filter(filter) : cloned;
+	const sorted = sort ? filtered.sort(sort) : filtered;
+	const reversed = reverse ? sorted.reverse() : sorted;
+	const sliced = reversed.slice(offset, limit ? offset + limit : void 0);
+	if (!sliced.length) return fallback || null;
+	return sliced.map(children);
+};
+
+//#endregion
+exports.For = For;
+//# sourceMappingURL=for.cjs.map

package/dist/cjs/components/for/for.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"for.cjs","names":[],"sources":["../../../../src/components/for/for.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport { isArray } from \"../../utils\"\n\nexport interface ForProps<T> {\n  /**\n   * The render function to render each item in the array.\n   */\n  children: (value: T, index: number, array: T[]) => ReactNode\n  /**\n   * The array to iterate over.\n   */\n  each: readonly T[] | T[] | undefined\n  /**\n   * The fallback content to render when the array is empty.\n   */\n  fallback?: ReactNode\n  /**\n   * A function that returns a boolean indicating whether the item should be included in the render result.\n   */\n  filter?: (value: T, index: number, array: T[]) => boolean\n  /**\n   * The maximum number of items to include in the render result.\n   */\n  limit?: number\n  /**\n   * The number of items to skip before including them in the render result.\n   * @default 0\n   */\n  offset?: number\n  /**\n   * The boolean value to determine the order of the items in the array.\n   * If `true`, the items will be reversed.\n   * If `sortBy` is provided, inversion is applied to the sorted array.\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * The function to sort the items in the array.\n   * If function is provided, the items will be sorted based on the return value.\n   * If `reverse` is `true`, the inversion is applied to the sorted array.\n   */\n  sort?: (a: T, b: T) => number\n}\n\n/**\n * `For` is a component used to loop over an array and render a component for each item.\n *\n * @see https://yamada-ui.com/components/for\n */\nexport const For = <T,>({\n  children,\n  each,\n  fallback,\n  filter,\n  limit,\n  offset = 0,\n  reverse = false,\n  sort,\n}: ForProps<T>): ReactNode => {\n  if (!each || !isArray(each) || !each.length) return fallback || null\n\n  const cloned = [...each]\n  const filtered = filter ? cloned.filter(filter) : cloned\n  const sorted = sort ? filtered.sort(sort) : filtered\n  const reversed = reverse ? sorted.reverse() : sorted\n  const sliced = reversed.slice(offset, limit ? offset + limit : undefined)\n\n  if (!sliced.length) return fallback || null\n\n  return sliced.map(children)\n}\n"],"mappings":";;;;;;;;AAiDA,MAAa,MAAM,CAAK,EACtB,UACA,MACA,UACA,QACA,OACA,SAAS,GACT,UAAU,OACV,MACY,KAAgB;AAC5B,MAAK,SAAS,+CAAQ,KAAK,KAAK,KAAK,OAAQ,QAAO,YAAY;CAEhE,MAAM,SAAS,CAAC,GAAG,IAAK;CACxB,MAAM,WAAW,SAAS,OAAO,OAAO,OAAO,GAAG;CAClD,MAAM,SAAS,OAAO,SAAS,KAAK,KAAK,GAAG;CAC5C,MAAM,WAAW,UAAU,OAAO,SAAS,GAAG;CAC9C,MAAM,SAAS,SAAS,MAAM,QAAQ,QAAQ,SAAS,eAAkB;AAEzE,MAAK,OAAO,OAAQ,QAAO,YAAY;AAEvC,QAAO,OAAO,IAAI,SAAS;AAC5B"}

package/dist/cjs/components/for/index.cjs

@@ -0,0 +1,3 @@
+const require_components_for_for = require('./for.cjs');
+
+exports.For = require_components_for_for.For;

package/dist/cjs/components/format/format-byte.cjs

@@ -0,0 +1,35 @@
+"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_format_format_byte_style = require('./format-byte.style.cjs');
+const require_components_format_use_format_byte = require('./use-format-byte.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/format/format-byte.tsx
+const { PropsContext: FormatBytePropsContext, usePropsContext: useFormatBytePropsContext, withContext } = require_core_components_create_component.createComponent("format-byte", require_components_format_format_byte_style.formatByteStyle);
+/**
+* `FormatByte` is used to format bytes to a human-readable format.
+*
+* @see https://yamada-ui.com/components/format-byte
+*/
+const FormatByte = withContext(({ locale, unit, unitDisplay, value,...rest }) => {
+	const text = require_components_format_use_format_byte.useFormatByte(value, {
+		locale,
+		unit,
+		unitDisplay
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.span, {
+		...rest,
+		children: text
+	});
+})();
+
+//#endregion
+exports.FormatByte = FormatByte;
+exports.FormatBytePropsContext = FormatBytePropsContext;
+exports.useFormatBytePropsContext = useFormatBytePropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=format-byte.cjs.map

package/dist/cjs/components/format/format-byte.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-byte.cjs","names":["formatByteStyle","styled"],"sources":["../../../../src/components/format/format-byte.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatByteStyle } from \"./format-byte.style\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatByteStyle } from \"./format-byte.style\"\nimport { useFormatByte } from \"./use-format-byte\"\n\nexport interface FormatByteProps\n  extends HTMLStyledProps,\n    ThemeProps<FormatByteStyle> {\n  /**\n   * The byte size to format\n   */\n  value: number\n  /**\n   * The locale string to use for formatting.\n   *\n   * @default 'en-US'\n   */\n  locale?: string\n  /**\n   * The unit granularity to display\n   */\n  unit?: \"bit\" | \"byte\"\n  /**\n   * The unit display\n   */\n  unitDisplay?: \"long\" | \"narrow\" | \"short\"\n}\n\nexport const {\n  PropsContext: FormatBytePropsContext,\n  usePropsContext: useFormatBytePropsContext,\n  withContext,\n} = createComponent<FormatByteProps, FormatByteStyle>(\n  \"format-byte\",\n  formatByteStyle,\n)\n\n/**\n * `FormatByte` is used to format bytes to a human-readable format.\n *\n * @see https://yamada-ui.com/components/format-byte\n */\nexport const FormatByte = withContext(\n  ({ locale, unit, unitDisplay, value, ...rest }) => {\n    const text = useFormatByte(value, { locale, unit, unitDisplay })\n\n    return <styled.span {...rest}>{text}</styled.span>\n  },\n)()\n"],"mappings":";;;;;;;;;;;AA+BA,MAAa,EACX,cAAc,wBACd,iBAAiB,2BACjB,aACD,GAAG,yDACF,eACAA,4DACD;;;;;;AAOD,MAAa,aAAa,YACxB,CAAC,EAAE,QAAQ,MAAM,aAAa,MAAO,GAAG,MAAM,KAAK;CACjD,MAAM,OAAO,wDAAc,OAAO;EAAE;EAAQ;EAAM;CAAa,EAAC;AAEhE,wBAAO,2BAACC,mCAAO;EAAK,GAAI;YAAO;GAAmB;AACnD,EACF,EAAE"}

package/dist/cjs/components/format/format-byte.style.cjs

@@ -0,0 +1,8 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/format/format-byte.style.ts
+const formatByteStyle = require_core_system_config.defineComponentStyle({});
+
+//#endregion
+exports.formatByteStyle = formatByteStyle;
+//# sourceMappingURL=format-byte.style.cjs.map

package/dist/cjs/components/format/format-byte.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-byte.style.cjs","names":[],"sources":["../../../../src/components/format/format-byte.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const formatByteStyle = defineComponentStyle({})\n\nexport type FormatByteStyle = typeof formatByteStyle\n"],"mappings":";;;AAEA,MAAa,kBAAkB,gDAAqB,CAAE,EAAC"}

package/dist/cjs/components/format/format-number.cjs

@@ -0,0 +1,54 @@
+"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_format_use_format_number = require('./use-format-number.cjs');
+const require_components_format_format_number_style = require('./format-number.style.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/format/format-number.tsx
+const { PropsContext: FormatNumberPropsContext, usePropsContext: useFormatNumberPropsContext, withContext } = require_core_components_create_component.createComponent("format-number", require_components_format_format_number_style.formatNumberStyle);
+/**
+* `FormatNumber` is used to format numbers to a specific locale and options.
+*
+* @see https://yamada-ui.com/components/format-number
+*/
+const FormatNumber = withContext(({ style, compactDisplay, currency, currencyDisplay, currencySign, locale, localeMatcher, maximumFractionDigits, maximumSignificantDigits, minimumFractionDigits, minimumIntegerDigits, minimumSignificantDigits, notation, numberingSystem, roundingIncrement, roundingMode, roundingPriority, signDisplay, trailingZeroDisplay, unit, unitDisplay, useGrouping, value,...rest }) => {
+	const text = require_components_format_use_format_number.useFormatNumber(value, {
+		style,
+		compactDisplay,
+		currency,
+		currencyDisplay,
+		currencySign,
+		locale,
+		localeMatcher,
+		maximumFractionDigits,
+		maximumSignificantDigits,
+		minimumFractionDigits,
+		minimumIntegerDigits,
+		minimumSignificantDigits,
+		notation,
+		numberingSystem,
+		roundingIncrement,
+		roundingMode,
+		roundingPriority,
+		signDisplay,
+		trailingZeroDisplay,
+		unit,
+		unitDisplay,
+		useGrouping
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.span, {
+		...rest,
+		children: text
+	});
+})();
+
+//#endregion
+exports.FormatNumber = FormatNumber;
+exports.FormatNumberPropsContext = FormatNumberPropsContext;
+exports.useFormatNumberPropsContext = useFormatNumberPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=format-number.cjs.map

package/dist/cjs/components/format/format-number.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-number.cjs","names":["formatNumberStyle","styled"],"sources":["../../../../src/components/format/format-number.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatNumberStyle } from \"./format-number.style\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatNumberStyle } from \"./format-number.style\"\nimport { useFormatNumber } from \"./use-format-number\"\n\nexport interface FormatNumberProps\n  extends Omit<HTMLStyledProps, \"style\">,\n    ThemeProps<FormatNumberStyle>,\n    Intl.NumberFormatOptions {\n  /**\n   * The numeric value to be formatted.\n   */\n  value: number\n  /**\n   * The locale string to use for formatting.\n   * @default 'en-US'\n   */\n  locale?: string\n}\n\nexport const {\n  PropsContext: FormatNumberPropsContext,\n  usePropsContext: useFormatNumberPropsContext,\n  withContext,\n} = createComponent<FormatNumberProps, FormatNumberStyle>(\n  \"format-number\",\n  formatNumberStyle,\n)\n\n/**\n * `FormatNumber` is used to format numbers to a specific locale and options.\n *\n * @see https://yamada-ui.com/components/format-number\n */\nexport const FormatNumber = withContext<\"span\", FormatNumberProps>(\n  ({\n    style,\n    compactDisplay,\n    currency,\n    currencyDisplay,\n    currencySign,\n    locale,\n    localeMatcher,\n    maximumFractionDigits,\n    maximumSignificantDigits,\n    minimumFractionDigits,\n    minimumIntegerDigits,\n    minimumSignificantDigits,\n    notation,\n    numberingSystem,\n    roundingIncrement,\n    roundingMode,\n    roundingPriority,\n    signDisplay,\n    trailingZeroDisplay,\n    unit,\n    unitDisplay,\n    useGrouping,\n    value,\n    ...rest\n  }) => {\n    const text = useFormatNumber(value, {\n      style,\n      compactDisplay,\n      currency,\n      currencyDisplay,\n      currencySign,\n      locale,\n      localeMatcher,\n      maximumFractionDigits,\n      maximumSignificantDigits,\n      minimumFractionDigits,\n      minimumIntegerDigits,\n      minimumSignificantDigits,\n      notation,\n      numberingSystem,\n      roundingIncrement,\n      roundingMode,\n      roundingPriority,\n      signDisplay,\n      trailingZeroDisplay,\n      unit,\n      unitDisplay,\n      useGrouping,\n    })\n\n    return <styled.span {...rest}>{text}</styled.span>\n  },\n)()\n"],"mappings":";;;;;;;;;;;AAuBA,MAAa,EACX,cAAc,0BACd,iBAAiB,6BACjB,aACD,GAAG,yDACF,iBACAA,gEACD;;;;;;AAOD,MAAa,eAAe,YAC1B,CAAC,EACC,OACA,gBACA,UACA,iBACA,cACA,QACA,eACA,uBACA,0BACA,uBACA,sBACA,0BACA,UACA,iBACA,mBACA,cACA,kBACA,aACA,qBACA,MACA,aACA,aACA,MACA,GAAG,MACJ,KAAK;CACJ,MAAM,OAAO,4DAAgB,OAAO;EAClC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EAAC;AAEF,wBAAO,2BAACC,mCAAO;EAAK,GAAI;YAAO;GAAmB;AACnD,EACF,EAAE"}

package/dist/cjs/components/format/format-number.style.cjs

@@ -0,0 +1,8 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/format/format-number.style.ts
+const formatNumberStyle = require_core_system_config.defineComponentStyle({});
+
+//#endregion
+exports.formatNumberStyle = formatNumberStyle;
+//# sourceMappingURL=format-number.style.cjs.map

package/dist/cjs/components/format/format-number.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-number.style.cjs","names":[],"sources":["../../../../src/components/format/format-number.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const formatNumberStyle = defineComponentStyle({})\n\nexport type FormatNumberStyle = typeof formatNumberStyle\n"],"mappings":";;;AAEA,MAAa,oBAAoB,gDAAqB,CAAE,EAAC"}

package/dist/cjs/components/format/index.cjs

@@ -0,0 +1,17 @@
+const require_components_format_format_byte_style = require('./format-byte.style.cjs');
+const require_components_format_use_format_number = require('./use-format-number.cjs');
+const require_components_format_use_format_byte = require('./use-format-byte.cjs');
+const require_components_format_format_byte = require('./format-byte.cjs');
+const require_components_format_format_number_style = require('./format-number.style.cjs');
+const require_components_format_format_number = require('./format-number.cjs');
+
+exports.FormatByte = require_components_format_format_byte.FormatByte;
+exports.FormatBytePropsContext = require_components_format_format_byte.FormatBytePropsContext;
+exports.FormatNumber = require_components_format_format_number.FormatNumber;
+exports.FormatNumberPropsContext = require_components_format_format_number.FormatNumberPropsContext;
+exports.formatByteStyle = require_components_format_format_byte_style.formatByteStyle;
+exports.formatNumberStyle = require_components_format_format_number_style.formatNumberStyle;
+exports.useFormatByte = require_components_format_use_format_byte.useFormatByte;
+exports.useFormatBytePropsContext = require_components_format_format_byte.useFormatBytePropsContext;
+exports.useFormatNumber = require_components_format_use_format_number.useFormatNumber;
+exports.useFormatNumberPropsContext = require_components_format_format_number.useFormatNumberPropsContext;

package/dist/cjs/components/format/use-format-byte.cjs

@@ -0,0 +1,45 @@
+"use client";
+
+
+const require_providers_i18n_provider_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+const require_components_format_use_format_number = require('./use-format-number.cjs');
+
+//#region src/components/format/use-format-byte.tsx
+const bitPrefixes = [
+	"",
+	"kilo",
+	"mega",
+	"giga",
+	"tera"
+];
+const bytePrefixes = [
+	"",
+	"kilo",
+	"mega",
+	"giga",
+	"tera",
+	"peta"
+];
+/**
+* `useFormatByte` is a custom hook that returns the formatted byte.
+*
+* @see https://yamada-ui.com/hooks/use-format-byte
+*/
+const useFormatByte = (bytes, { locale, unit = "byte", unitDisplay = "short" } = {}) => {
+	const { locale: defaultLocale } = require_providers_i18n_provider_i18n_provider.useI18n();
+	locale ??= defaultLocale;
+	const sanitizedBytes = Number.isNaN(bytes) ? 0 : bytes;
+	const prefix = unit === "bit" ? bitPrefixes : bytePrefixes;
+	const index = Math.max(0, Math.min(Math.floor(Math.log10(sanitizedBytes) / 3), prefix.length - 1));
+	const value = sanitizedBytes === 0 ? 0 : Number.parseFloat((sanitizedBytes / 10 ** (3 * index)).toPrecision(3));
+	return require_components_format_use_format_number.useFormatNumber(value, {
+		style: "unit",
+		locale,
+		unit: prefix[index] + unit,
+		unitDisplay
+	});
+};
+
+//#endregion
+exports.useFormatByte = useFormatByte;
+//# sourceMappingURL=use-format-byte.cjs.map

package/dist/cjs/components/format/use-format-byte.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-format-byte.cjs","names":["bytes: number"],"sources":["../../../../src/components/format/use-format-byte.tsx"],"sourcesContent":["\"use client\"\n\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { useFormatNumber } from \"./use-format-number\"\n\nconst bitPrefixes = [\"\", \"kilo\", \"mega\", \"giga\", \"tera\"]\nconst bytePrefixes = [\"\", \"kilo\", \"mega\", \"giga\", \"tera\", \"peta\"]\n\nexport interface FormatBytesOptions {\n  locale?: string\n  unit?: \"bit\" | \"byte\"\n  unitDisplay?: \"long\" | \"narrow\" | \"short\"\n}\n\n/**\n * `useFormatByte` is a custom hook that returns the formatted byte.\n *\n * @see https://yamada-ui.com/hooks/use-format-byte\n */\nexport const useFormatByte = (\n  bytes: number,\n  { locale, unit = \"byte\", unitDisplay = \"short\" }: FormatBytesOptions = {},\n) => {\n  const { locale: defaultLocale } = useI18n()\n\n  locale ??= defaultLocale\n\n  const sanitizedBytes = Number.isNaN(bytes) ? 0 : bytes\n  const prefix = unit === \"bit\" ? bitPrefixes : bytePrefixes\n  const index = Math.max(\n    0,\n    Math.min(Math.floor(Math.log10(sanitizedBytes) / 3), prefix.length - 1),\n  )\n  const value =\n    sanitizedBytes === 0\n      ? 0\n      : Number.parseFloat((sanitizedBytes / 10 ** (3 * index)).toPrecision(3))\n\n  return useFormatNumber(value, {\n    style: \"unit\",\n    locale,\n    unit: prefix[index] + unit,\n    unitDisplay,\n  })\n}\n\nexport type UseFormatByteReturn = ReturnType<typeof useFormatByte>\n"],"mappings":";;;;;;;AAKA,MAAM,cAAc;CAAC;CAAI;CAAQ;CAAQ;CAAQ;AAAO;AACxD,MAAM,eAAe;CAAC;CAAI;CAAQ;CAAQ;CAAQ;CAAQ;AAAO;;;;;;AAajE,MAAa,gBAAgB,CAC3BA,OACA,EAAE,QAAQ,OAAO,QAAQ,cAAc,SAA6B,GAAG,CAAE,MACtE;CACH,MAAM,EAAE,QAAQ,eAAe,GAAG,uDAAS;AAE3C,YAAW;CAEX,MAAM,iBAAiB,OAAO,MAAM,MAAM,GAAG,IAAI;CACjD,MAAM,SAAS,SAAS,QAAQ,cAAc;CAC9C,MAAM,QAAQ,KAAK,IACjB,GACA,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,eAAe,GAAG,EAAE,EAAE,OAAO,SAAS,EAAE,CACxE;CACD,MAAM,QACJ,mBAAmB,IACf,IACA,OAAO,WAAW,CAAC,iBAAiB,OAAO,IAAI,QAAQ,YAAY,EAAE,CAAC;AAE5E,QAAO,4DAAgB,OAAO;EAC5B,OAAO;EACP;EACA,MAAM,OAAO,SAAS;EACtB;CACD,EAAC;AACH"}

package/dist/cjs/components/format/use-format-number.cjs

@@ -0,0 +1,23 @@
+"use client";
+
+
+const require_providers_i18n_provider_i18n_cache = require('../../providers/i18n-provider/i18n-cache.cjs');
+const require_providers_i18n_provider_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+
+//#region src/components/format/use-format-number.tsx
+const getNumberFormatter = require_providers_i18n_provider_i18n_cache.i18nCache(Intl.NumberFormat);
+/**
+* `useFormatNumber` is a custom hook that returns the formatted number.
+*
+* @see https://yamada-ui.com/hooks/use-format-number
+*/
+const useFormatNumber = (value, { locale,...options } = {}) => {
+	const { locale: defaultLocale } = require_providers_i18n_provider_i18n_provider.useI18n();
+	locale ??= defaultLocale;
+	const formatter = getNumberFormatter(locale, options);
+	return formatter.format(value);
+};
+
+//#endregion
+exports.useFormatNumber = useFormatNumber;
+//# sourceMappingURL=use-format-number.cjs.map

package/dist/cjs/components/format/use-format-number.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-format-number.cjs","names":["value: number"],"sources":["../../../../src/components/format/use-format-number.tsx"],"sourcesContent":["\"use client\"\n\nimport { i18nCache, useI18n } from \"../../providers/i18n-provider\"\n\nconst getNumberFormatter = i18nCache(Intl.NumberFormat)\n\nexport interface FormatNumberOptions extends Intl.NumberFormatOptions {\n  locale?: string\n}\n\n/**\n * `useFormatNumber` is a custom hook that returns the formatted number.\n *\n * @see https://yamada-ui.com/hooks/use-format-number\n */\nexport const useFormatNumber = (\n  value: number,\n  { locale, ...options }: FormatNumberOptions = {},\n) => {\n  const { locale: defaultLocale } = useI18n()\n\n  locale ??= defaultLocale\n\n  const formatter = getNumberFormatter(locale, options)\n\n  return formatter.format(value)\n}\n\nexport type UseFormatNumberReturn = ReturnType<typeof useFormatNumber>\n"],"mappings":";;;;;;;AAIA,MAAM,qBAAqB,qDAAU,KAAK,aAAa;;;;;;AAWvD,MAAa,kBAAkB,CAC7BA,OACA,EAAE,OAAQ,GAAG,SAA8B,GAAG,CAAE,MAC7C;CACH,MAAM,EAAE,QAAQ,eAAe,GAAG,uDAAS;AAE3C,YAAW;CAEX,MAAM,YAAY,mBAAmB,QAAQ,QAAQ;AAErD,QAAO,UAAU,OAAO,MAAM;AAC/B"}

package/dist/cjs/components/grid/grid-item.cjs

@@ -0,0 +1,25 @@
+"use client";
+
+
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+
+//#region src/components/grid/grid-item.tsx
+const { PropsContext: GridItemPropsContext, usePropsContext: useGridItemPropsContext, withContext } = require_core_components_create_component.createComponent("grid-item");
+const GridItem = withContext("div")(void 0, ({ area: gridArea, colEnd: gridColumnEnd, colSpan, colStart: gridColumnStart, rowEnd: gridRowEnd, rowSpan, rowStart: gridRowStart,...rest }) => ({
+	gridArea,
+	gridColumn: (0, require_utils_index.utils_exports.replaceObject)(colSpan, (value) => value != null ? `span ${value}/span ${value}` : void 0),
+	gridColumnEnd,
+	gridColumnStart,
+	gridRow: (0, require_utils_index.utils_exports.replaceObject)(rowSpan, (value) => value != null ? `span ${value}/span ${value}` : void 0),
+	gridRowEnd,
+	gridRowStart,
+	...rest
+}));
+
+//#endregion
+exports.GridItem = GridItem;
+exports.GridItemPropsContext = GridItemPropsContext;
+exports.useGridItemPropsContext = useGridItemPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=grid-item.cjs.map

package/dist/cjs/components/grid/grid-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.cjs","names":[],"sources":["../../../../src/components/grid/grid-item.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, StyleValue } from \"../../core\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\n\nexport interface GridItemProps extends HTMLStyledProps {\n  /**\n   * The CSS `grid-area` property.\n   */\n  area?: CSSProps[\"gridArea\"]\n  /**\n   * The CSS `grid-column-end` property.\n   */\n  colEnd?: CSSProps[\"gridColumnEnd\"]\n  /**\n   * The number of columns the grid item should `span`.\n   */\n  colSpan?: StyleValue<number>\n  /**\n   * The CSS `grid-column-start` property.\n   */\n  colStart?: CSSProps[\"gridColumnStart\"]\n  /**\n   * The CSS `grid-row-end` property.\n   */\n  rowEnd?: CSSProps[\"gridRowEnd\"]\n  /**\n   * The number of rows the grid item should `span`.\n   */\n  rowSpan?: StyleValue<number>\n  /**\n   * The CSS `grid-row-start` property.\n   */\n  rowStart?: CSSProps[\"gridRowStart\"]\n}\n\nexport const {\n  PropsContext: GridItemPropsContext,\n  usePropsContext: useGridItemPropsContext,\n  withContext,\n} = createComponent<GridItemProps>(\"grid-item\")\n\nexport const GridItem = withContext(\"div\")(\n  undefined,\n  ({\n    area: gridArea,\n    colEnd: gridColumnEnd,\n    colSpan,\n    colStart: gridColumnStart,\n    rowEnd: gridRowEnd,\n    rowSpan,\n    rowStart: gridRowStart,\n    ...rest\n  }) => ({\n    gridArea,\n    gridColumn: replaceObject(colSpan, (value) =>\n      value != null ? `span ${value}/span ${value}` : undefined,\n    ),\n    gridColumnEnd,\n    gridColumnStart,\n    gridRow: replaceObject(rowSpan, (value) =>\n      value != null ? `span ${value}/span ${value}` : undefined,\n    ),\n    gridRowEnd,\n    gridRowStart,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;;;;AAqCA,MAAa,EACX,cAAc,sBACd,iBAAiB,yBACjB,aACD,GAAG,yDAA+B,YAAY;AAE/C,MAAa,WAAW,YAAY,MAAM,SAExC,CAAC,EACC,MAAM,UACN,QAAQ,eACR,SACA,UAAU,iBACV,QAAQ,YACR,SACA,UAAU,aACV,GAAG,MACJ,MAAM;CACL;CACA,YAAY,qDAAc,SAAS,CAAC,UAClC,SAAS,QAAQ,OAAO,MAAM,QAAQ,iBACvC;CACD;CACA;CACA,SAAS,qDAAc,SAAS,CAAC,UAC/B,SAAS,QAAQ,OAAO,MAAM,QAAQ,iBACvC;CACD;CACA;CACA,GAAG;AACJ,GACF"}

package/dist/cjs/components/grid/grid.cjs

@@ -0,0 +1,32 @@
+"use client";
+
+
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_grid_grid_style = require('./grid.style.cjs');
+
+//#region src/components/grid/grid.tsx
+const { PropsContext: GridPropsContext, usePropsContext: useGridPropsContext, withContext } = require_core_components_create_component.createComponent("grid", require_components_grid_grid_style.gridStyle);
+/**
+* `Grid` is a component for managing grid layouts. It also comes with handy style shorthand.
+*
+* @see https://yamada-ui.com/components/grid
+*/
+const Grid = withContext("div")(void 0, ({ area: gridArea, autoColumns: gridAutoColumns, autoFlow: gridAutoFlow, autoRows: gridAutoRows, column: gridColumn, templateAreas: gridTemplateAreas, templateColumns: gridTemplateColumns, templateRows: gridTemplateRows,...rest }) => ({
+	display: "grid",
+	gridArea,
+	gridAutoColumns,
+	gridAutoFlow,
+	gridAutoRows,
+	gridColumn,
+	gridTemplateAreas,
+	gridTemplateColumns,
+	gridTemplateRows,
+	...rest
+}));
+
+//#endregion
+exports.Grid = Grid;
+exports.GridPropsContext = GridPropsContext;
+exports.useGridPropsContext = useGridPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=grid.cjs.map

package/dist/cjs/components/grid/grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.cjs","names":["gridStyle"],"sources":["../../../../src/components/grid/grid.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { GridStyle } from \"./grid.style\"\nimport { createComponent } from \"../../core\"\nimport { gridStyle } from \"./grid.style\"\n\nexport interface GridProps extends HTMLStyledProps, ThemeProps<GridStyle> {\n  /**\n   * The CSS `grid-area` property.\n   */\n  area?: CSSProps[\"gridArea\"]\n  /**\n   * The CSS `grid-auto-columns` property.\n   */\n  autoColumns?: CSSProps[\"gridAutoColumns\"]\n  /**\n   * The CSS `grid-auto-flow` property.\n   */\n  autoFlow?: CSSProps[\"gridAutoFlow\"]\n  /**\n   * The CSS `grid-auto-rows` property.\n   */\n  autoRows?: CSSProps[\"gridAutoRows\"]\n  /**\n   * The CSS `grid-column` property.\n   */\n  column?: CSSProps[\"gridColumn\"]\n  /**\n   * The CSS `grid-row` property.\n   */\n  row?: CSSProps[\"gridRow\"]\n  /**\n   * The CSS `grid-template-areas` property.\n   */\n  templateAreas?: CSSProps[\"gridTemplateAreas\"]\n  /**\n   * The CSS `grid-template-columns` property.\n   */\n  templateColumns?: CSSProps[\"gridTemplateColumns\"]\n  /**\n   * The CSS `grid-template-rows` property.\n   */\n  templateRows?: CSSProps[\"gridTemplateRows\"]\n}\n\nexport const {\n  PropsContext: GridPropsContext,\n  usePropsContext: useGridPropsContext,\n  withContext,\n} = createComponent<GridProps, GridStyle>(\"grid\", gridStyle)\n\n/**\n * `Grid` is a component for managing grid layouts. It also comes with handy style shorthand.\n *\n * @see https://yamada-ui.com/components/grid\n */\nexport const Grid = withContext(\"div\")(\n  undefined,\n  ({\n    area: gridArea,\n    autoColumns: gridAutoColumns,\n    autoFlow: gridAutoFlow,\n    autoRows: gridAutoRows,\n    column: gridColumn,\n    templateAreas: gridTemplateAreas,\n    templateColumns: gridTemplateColumns,\n    templateRows: gridTemplateRows,\n    ...rest\n  }) => ({\n    display: \"grid\",\n    gridArea,\n    gridAutoColumns,\n    gridAutoFlow,\n    gridAutoRows,\n    gridColumn,\n    gridTemplateAreas,\n    gridTemplateColumns,\n    gridTemplateRows,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;;;;AA8CA,MAAa,EACX,cAAc,kBACd,iBAAiB,qBACjB,aACD,GAAG,yDAAsC,QAAQA,6CAAU;;;;;;AAO5D,MAAa,OAAO,YAAY,MAAM,SAEpC,CAAC,EACC,MAAM,UACN,aAAa,iBACb,UAAU,cACV,UAAU,cACV,QAAQ,YACR,eAAe,mBACf,iBAAiB,qBACjB,cAAc,iBACd,GAAG,MACJ,MAAM;CACL,SAAS;CACT;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;AACJ,GACF"}

package/dist/cjs/components/grid/grid.style.cjs

@@ -0,0 +1,8 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/grid/grid.style.ts
+const gridStyle = require_core_system_config.defineComponentStyle({ base: { display: "grid" } });
+
+//#endregion
+exports.gridStyle = gridStyle;
+//# sourceMappingURL=grid.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.style.cjs","names":[],"sources":["../../../../src/components/grid/grid.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const gridStyle = defineComponentStyle({\n  base: {\n    display: \"grid\",\n  },\n})\n\nexport type GridStyle = typeof gridStyle\n"],"mappings":";;;AAEA,MAAa,YAAY,gDAAqB,EAC5C,MAAM,EACJ,SAAS,OACV,EACF,EAAC"}

package/dist/cjs/components/grid/index.cjs

@@ -0,0 +1,11 @@
+const require_components_grid_grid_style = require('./grid.style.cjs');
+const require_components_grid_grid = require('./grid.cjs');
+const require_components_grid_grid_item = require('./grid-item.cjs');
+
+exports.Grid = require_components_grid_grid.Grid;
+exports.GridItem = require_components_grid_grid_item.GridItem;
+exports.GridItemPropsContext = require_components_grid_grid_item.GridItemPropsContext;
+exports.GridPropsContext = require_components_grid_grid.GridPropsContext;
+exports.gridStyle = require_components_grid_grid_style.gridStyle;
+exports.useGridItemPropsContext = require_components_grid_grid_item.useGridItemPropsContext;
+exports.useGridPropsContext = require_components_grid_grid.useGridPropsContext;

package/dist/cjs/components/group/group.cjs

@@ -0,0 +1,38 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_components_flex_flex = require('../flex/flex.cjs');
+const require_components_group_group_style = require('./group.style.cjs');
+const require_components_group_use_group = require('./use-group.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/group/group.tsx
+const { PropsContext: GroupPropsContext, usePropsContext: useGroupPropsContext, withContext } = require_core_components_create_component.createComponent("group", require_components_group_group_style.groupStyle);
+/**
+* `Group` is a component that groups and attaches multiple elements together.
+*
+* @see https://yamada-ui.com/components/group
+*/
+const Group = withContext(({ attached: attachedProp, children, orientation: orientationProp,...rest }) => {
+	const orientation = require_hooks_use_value_index.useValue(orientationProp);
+	const attached = require_hooks_use_value_index.useValue(attachedProp);
+	const cloneChildren = require_components_group_use_group.useGroup(children);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_flex_flex.Flex, {
+		"data-attached": (0, require_utils_index.utils_exports.dataAttr)(attached),
+		"data-orientation": orientation,
+		role: "group",
+		...rest,
+		children: cloneChildren
+	});
+}, { transferProps: ["attached", "orientation"] })();
+
+//#endregion
+exports.Group = Group;
+exports.GroupPropsContext = GroupPropsContext;
+exports.useGroupPropsContext = useGroupPropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=group.cjs.map

package/dist/cjs/components/group/group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.cjs","names":["groupStyle","Flex"],"sources":["../../../../src/components/group/group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps } from \"../../core\"\nimport type { FlexProps } from \"../flex\"\nimport type { GroupStyle } from \"./group.style\"\nimport { createComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr } from \"../../utils\"\nimport { Flex } from \"../flex\"\nimport { groupStyle } from \"./group.style\"\nimport { useGroup } from \"./use-group\"\n\nexport interface GroupProps\n  extends Omit<FlexProps, \"grow\">,\n    ThemeProps<GroupStyle> {}\n\nexport const {\n  PropsContext: GroupPropsContext,\n  usePropsContext: useGroupPropsContext,\n  withContext,\n} = createComponent<GroupProps, GroupStyle>(\"group\", groupStyle)\n\n/**\n * `Group` is a component that groups and attaches multiple elements together.\n *\n * @see https://yamada-ui.com/components/group\n */\nexport const Group = withContext(\n  ({\n    attached: attachedProp,\n    children,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const orientation = useValue(orientationProp)\n    const attached = useValue(attachedProp)\n    const cloneChildren = useGroup(children)\n\n    return (\n      <Flex\n        data-attached={dataAttr(attached)}\n        data-orientation={orientation}\n        role=\"group\"\n        {...rest}\n      >\n        {cloneChildren}\n      </Flex>\n    )\n  },\n  { transferProps: [\"attached\", \"orientation\"] },\n)()\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,EACX,cAAc,mBACd,iBAAiB,sBACjB,aACD,GAAG,yDAAwC,SAASA,gDAAW;;;;;;AAOhE,MAAa,QAAQ,YACnB,CAAC,EACC,UAAU,cACV,UACA,aAAa,gBACb,GAAG,MACJ,KAAK;CACJ,MAAM,cAAc,uCAAS,gBAAgB;CAC7C,MAAM,WAAW,uCAAS,aAAa;CACvC,MAAM,gBAAgB,4CAAS,SAAS;AAExC,wBACE,2BAACC;EACC,iBAAe,gDAAS,SAAS;EACjC,oBAAkB;EAClB,MAAK;EACL,GAAI;YAEH;GACI;AAEV,GACD,EAAE,eAAe,CAAC,YAAY,aAAc,EAAE,EAC/C,EAAE"}