@yamada-ui/react 2.2.1-dev-20260508120223 → 2.2.1-dev-20260509050741

package/dist/esm/components/float/index.js

@@ -1,4 +1,3 @@
 import { floatStyle } from "./float.style.js";
 import { Float, FloatPropsContext, useFloatPropsContext } from "./float.js";
-
-export { Float, FloatPropsContext, floatStyle, useFloatPropsContext };
+export { Float, FloatPropsContext, floatStyle, useFloatPropsContext };

package/dist/esm/components/focus-lock/focus-lock.js

@@ -1,10 +1,8 @@
 "use client";
-
 import { utils_exports } from "../../utils/index.js";
 import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 import ReactFocusLock from "react-focus-lock";
-
 //#region src/components/focus-lock/focus-lock.tsx
 const InternalFocusLock = (0, utils_exports.interopDefault)(ReactFocusLock);
 /**
@@ -33,7 +31,7 @@ const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, i
 		children
 	});
 };
-
 //#endregion
 export { FocusLock };
+
 //# sourceMappingURL=focus-lock.js.map

package/dist/esm/components/focus-lock/focus-lock.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-lock.js","names":["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/docs/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,sDAAmC,eAAe;;;;;;AAsDxD,MAAaA,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;AAoBJ,QACE,oBAAC;EACY;EACX,YAAY;EACF;EACO;EACjB,aAzBgB,gBAAgB,CAAC;EA0BjC,cAxBiB,kBAAkB;AACrC,OAAI,iBAAiB,QACnB,iBAAgB,QAAQ,OAAO;YACtB,YAAY,SAGrB;gDAFwC,WAAW,QAAQ,CAE5C,WAAW,EACxB,6BAA4B;AAC1B,gBAAW,SAAS,OAAO;MAC3B;;KAEL,CAAC,iBAAiB,WAAW,CAAC;EAc7B,gBAZmB,kBAAkB;AACvC,kBAAe,SAAS,OAAO;KAC9B,CAAC,cAAc,CAAC;EAYd;GACiB"}
+{"version":3,"file":"focus-lock.js","names":[],"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/docs/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,qBAAA,GAAA,cAAA,gBAAmC,eAAe;;;;;;AAsDxD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CAoBJ,OACE,oBAAC,mBAAD;EACa;EACX,YAAY;EACF;EACO;EACjB,aAzBgB,gBAAgB,CAAC;EA0BjC,cAxBiB,kBAAkB;GACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,OAAO;QAC1B,IAAI,YAAY;gDACmB,WAAW,QAErC,CAAC,WAAW,GACxB,4BAA4B;KAC1B,WAAW,SAAS,OAAO;MAC3B;;KAEL,CAAC,iBAAiB,WAAW,CAaF;EAC1B,gBAZmB,kBAAkB;GACvC,eAAe,SAAS,OAAO;KAC9B,CAAC,cAAc,CAUgB;EAE7B;EACiB,CAAA"}

package/dist/esm/components/focus-lock/index.js

@@ -1,3 +1,2 @@
 import { FocusLock } from "./focus-lock.js";
-
-export { FocusLock };
+export { FocusLock };

package/dist/esm/components/for/for.js

@@ -1,5 +1,4 @@
 import { utils_exports } from "../../utils/index.js";
-
 //#region src/components/for/for.tsx
 /**
 * `For` is a component used to loop over an array and render a component for each item.
@@ -15,7 +14,7 @@ const For = ({ children, each, fallback, filter, limit, offset = 0, reverse = fa
 	if (!sliced.length) return fallback || null;
 	return sliced.map(children);
 };
-
 //#endregion
 export { For };
+
 //# sourceMappingURL=for.js.map

package/dist/esm/components/for/for.js.map

@@ -1 +1 @@
-{"version":3,"file":"for.js","names":[],"sources":["../../../../src/components/for/for.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport { isArray } from \"../../utils\"\n\nexport interface ForProps<Y> {\n  /**\n   * The array to iterate over.\n   */\n  each: readonly Y[] | undefined | Y[]\n  /**\n   * The render function to render each item in the array.\n   */\n  children: (value: Y, index: number, array: Y[]) => ReactNode\n  /**\n   * The fallback content to render when the array is empty.\n   */\n  fallback?: ReactNode\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   * A function that returns a boolean indicating whether the item should be included in the render result.\n   */\n  filter?: (value: Y, index: number, array: Y[]) => 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: Y, b: Y) => 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/docs/components/for\n */\nexport const For = <Y,>({\n  children,\n  each,\n  fallback,\n  filter,\n  limit,\n  offset = 0,\n  reverse = false,\n  sort,\n}: ForProps<Y>): 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,OAAW,EACtB,UACA,MACA,UACA,QACA,OACA,SAAS,GACT,UAAU,OACV,WAC4B;AAC5B,KAAI,CAAC,QAAQ,4BAAS,KAAK,IAAI,CAAC,KAAK,OAAQ,QAAO,YAAY;CAEhE,MAAM,SAAS,CAAC,GAAG,KAAK;CACxB,MAAM,WAAW,SAAS,OAAO,OAAO,OAAO,GAAG;CAClD,MAAM,SAAS,OAAO,SAAS,KAAK,KAAK,GAAG;CAE5C,MAAM,UADW,UAAU,OAAO,SAAS,GAAG,QACtB,MAAM,QAAQ,QAAQ,SAAS,QAAQ,OAAU;AAEzE,KAAI,CAAC,OAAO,OAAQ,QAAO,YAAY;AAEvC,QAAO,OAAO,IAAI,SAAS"}
+{"version":3,"file":"for.js","names":[],"sources":["../../../../src/components/for/for.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport { isArray } from \"../../utils\"\n\nexport interface ForProps<Y> {\n  /**\n   * The array to iterate over.\n   */\n  each: readonly Y[] | undefined | Y[]\n  /**\n   * The render function to render each item in the array.\n   */\n  children: (value: Y, index: number, array: Y[]) => ReactNode\n  /**\n   * The fallback content to render when the array is empty.\n   */\n  fallback?: ReactNode\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   * A function that returns a boolean indicating whether the item should be included in the render result.\n   */\n  filter?: (value: Y, index: number, array: Y[]) => 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: Y, b: Y) => 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/docs/components/for\n */\nexport const For = <Y,>({\n  children,\n  each,\n  fallback,\n  filter,\n  limit,\n  offset = 0,\n  reverse = false,\n  sort,\n}: ForProps<Y>): 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,OAAW,EACtB,UACA,MACA,UACA,QACA,OACA,SAAS,GACT,UAAU,OACV,WAC4B;CAC5B,IAAI,CAAC,QAAQ,EAAA,GAAA,cAAA,SAAS,KAAK,IAAI,CAAC,KAAK,QAAQ,OAAO,YAAY;CAEhE,MAAM,SAAS,CAAC,GAAG,KAAK;CACxB,MAAM,WAAW,SAAS,OAAO,OAAO,OAAO,GAAG;CAClD,MAAM,SAAS,OAAO,SAAS,KAAK,KAAK,GAAG;CAE5C,MAAM,UADW,UAAU,OAAO,SAAS,GAAG,QACtB,MAAM,QAAQ,QAAQ,SAAS,QAAQ,KAAA,EAAU;CAEzE,IAAI,CAAC,OAAO,QAAQ,OAAO,YAAY;CAEvC,OAAO,OAAO,IAAI,SAAS"}

package/dist/esm/components/for/index.js

@@ -1,3 +1,2 @@
 import { For } from "./for.js";
-
-export { For };
+export { For };

package/dist/esm/components/form/form.js

@@ -1,17 +1,13 @@
 "use client";
-
 import { useSplitChildren } from "../../utils/children.js";
 import { createContext as createContext$1 } from "../../utils/context.js";
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { formStyle } from "./form.style.js";
 import { Button } from "../button/button.js";
-import "../button/index.js";
 import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/form/form.tsx
 const [FormContext, useFormContext] = createContext$1({
 	name: "FormContext",
@@ -118,7 +114,7 @@ const FormSubmitButton = withContext(Button, "submitButton")({ type: "submit" },
 		...props
 	};
 });
-
 //#endregion
 export { FormBody, FormContext, FormDescription, FormFooter, FormGroup, FormHeader, FormPropsContext, FormRoot, FormSubmitButton, FormTitle, useFormContext, useFormPropsContext };
+
 //# sourceMappingURL=form.js.map

package/dist/esm/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":["createContext"],"sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { FormStyle } from \"./form.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, useSplitChildren } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { formStyle } from \"./form.style\"\n\ninterface FormContext extends Pick<\n  FormRootProps,\n  | \"disabled\"\n  | \"errorMessage\"\n  | \"helperMessage\"\n  | \"invalid\"\n  | \"optionalIndicator\"\n  | \"readOnly\"\n  | \"replace\"\n  | \"required\"\n  | \"requiredIndicator\"\n  | \"size\"\n  | \"variant\"\n> {\n  descriptionId: string\n  id: string\n  titleId: string\n}\n\nconst [FormContext, useFormContext] = createContext<FormContext>({\n  name: \"FormContext\",\n  strict: false,\n})\n\nexport { FormContext, useFormContext }\n\nexport interface FormRootProps\n  extends Omit<HTMLStyledProps<\"form\">, \"title\">, ThemeProps<FormStyle> {\n  /**\n   * The form description to use.\n   */\n  description?: ReactNode\n  /**\n   * An object managing the disabled state of each field.\n   */\n  disabled?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the error message of each field.\n   */\n  errorMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the helper message of each field.\n   */\n  helperMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the invalid state of each field.\n   */\n  invalid?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The optional indicator to use for each field.\n   */\n  optionalIndicator?: ReactNode\n  /**\n   * An object managing the read only state of each field.\n   */\n  readOnly?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the replace state of each field.\n   */\n  replace?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the required state of each field.\n   */\n  required?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The required indicator to use for each field.\n   */\n  requiredIndicator?: ReactNode\n  /**\n   * The submit button to use.\n   */\n  submitButton?: ReactNode\n  /**\n   * The form title to use.\n   */\n  title?: ReactNode\n  /**\n   * Props the body component.\n   */\n  bodyProps?: FormBodyProps\n  /**\n   * Props the description component.\n   */\n  descriptionProps?: FormDescriptionProps\n  /**\n   * Props the footer component.\n   */\n  footerProps?: FormFooterProps\n  /**\n   * Props the header component.\n   */\n  headerProps?: FormHeaderProps\n  /**\n   * Props the submit button component.\n   */\n  submitButtonProps?: FormSubmitButtonProps\n  /**\n   * Props the title component.\n   */\n  titleProps?: FormTitleProps\n}\n\nconst {\n  PropsContext: FormPropsContext,\n  usePropsContext: useFormPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FormRootProps, FormStyle, FormContext>(\n  \"form\",\n  formStyle,\n)\n\nexport { FormPropsContext, useFormPropsContext }\n\n/**\n * `Form` is a component used to group multiple form elements.\n *\n * @see https://yamada-ui.com/docs/components/form\n */\nexport const FormRoot = withProvider<\"form\", FormRootProps, \"size\" | \"variant\">(\n  ({\n    id,\n    size,\n    variant,\n    \"aria-labelledby\": ariaLabelledBy,\n    children,\n    description,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    noValidate = true,\n    optionalIndicator,\n    readOnly,\n    replace,\n    required,\n    requiredIndicator,\n    submitButton,\n    title,\n    bodyProps,\n    descriptionProps,\n    footerProps,\n    headerProps,\n    submitButtonProps,\n    titleProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const titleId = useId()\n    const descriptionId = useId()\n    const [\n      omittedChildren,\n      customHeader,\n      customBody,\n      customFooter,\n      customTitle,\n      customDescription,\n      customSubmitButton,\n    ] = useSplitChildren(\n      children,\n      FormHeader,\n      FormBody,\n      FormFooter,\n      FormTitle,\n      FormDescription,\n      FormSubmitButton,\n    )\n\n    id ??= uuid\n\n    const context = useMemo(\n      () => ({\n        id,\n        size,\n        variant,\n        descriptionId,\n        disabled,\n        errorMessage,\n        helperMessage,\n        invalid,\n        optionalIndicator,\n        readOnly,\n        replace,\n        required,\n        requiredIndicator,\n        titleId,\n      }),\n      [\n        id,\n        titleId,\n        descriptionId,\n        disabled,\n        size,\n        variant,\n        errorMessage,\n        helperMessage,\n        invalid,\n        readOnly,\n        replace,\n        required,\n        optionalIndicator,\n        requiredIndicator,\n      ],\n    )\n\n    return (\n      <FormContext value={context}>\n        <styled.form\n          id={id}\n          aria-labelledby={cx(titleId, descriptionId, ariaLabelledBy)}\n          noValidate={noValidate}\n          {...rest}\n        >\n          {customHeader ||\n            (customTitle || title || customDescription || description ? (\n              <FormHeader {...headerProps}>\n                {customTitle ||\n                  (title ? (\n                    <FormTitle {...titleProps}>{title}</FormTitle>\n                  ) : null)}\n\n                {customDescription ||\n                  (description ? (\n                    <FormDescription {...descriptionProps}>\n                      {description}\n                    </FormDescription>\n                  ) : null)}\n              </FormHeader>\n            ) : null)}\n\n          {customBody || <FormBody {...bodyProps}>{omittedChildren}</FormBody>}\n\n          {customFooter ||\n            (customSubmitButton || submitButton ? (\n              <FormFooter {...footerProps}>\n                {customSubmitButton ||\n                  (submitButton ? (\n                    <FormSubmitButton {...submitButtonProps}>\n                      {submitButton}\n                    </FormSubmitButton>\n                  ) : null)}\n              </FormFooter>\n            ) : null)}\n        </styled.form>\n      </FormContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"variant\"] },\n)()\n\nexport interface FormHeaderProps extends HTMLStyledProps {}\n\nexport const FormHeader = withContext<\"div\", FormHeaderProps>(\"div\", \"header\")()\n\nexport interface FormTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const FormTitle = withContext<\"h3\", FormTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { titleId } = useFormContext() ?? {}\n\n    return { id: titleId, ...props }\n  },\n)\n\nexport interface FormDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const FormDescription = withContext<\"p\", FormDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { descriptionId, titleId } = useFormContext() ?? {}\n\n  return { id: descriptionId, \"aria-describedby\": titleId, ...props }\n})\n\nexport interface FormBodyProps extends HTMLStyledProps {}\n\nexport const FormBody = withContext<\"div\", FormBodyProps>(\"div\", \"body\")()\n\nexport interface FormGroupProps extends HTMLStyledProps {}\n\nexport const FormGroup = withContext<\"div\", FormGroupProps>(\"div\", \"group\")()\n\nexport interface FormFooterProps extends HTMLStyledProps {}\n\nexport const FormFooter = withContext<\"div\", FormFooterProps>(\"div\", \"footer\")()\n\nexport interface FormSubmitButtonProps extends ButtonProps {}\n\nexport const FormSubmitButton = withContext<\"button\", FormSubmitButtonProps>(\n  Button,\n  \"submitButton\",\n)({ type: \"submit\" }, (props) => {\n  const { id } = useFormContext() ?? {}\n\n  return { form: id, ...props }\n})\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAM,CAAC,aAAa,kBAAkBA,gBAA2B;CAC/D,MAAM;CACN,QAAQ;CACT,CAAC;AAgFF,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,UACD;;;;;;AASD,MAAa,WAAW,cACrB,EACC,IACA,MACA,SACA,mBAAmB,gBACnB,UACA,aACA,UACA,cACA,eACA,SACA,aAAa,MACb,mBACA,UACA,SACA,UACA,mBACA,cACA,OACA,WACA,kBACA,aACA,aACA,mBACA,YACA,GAAG,WACC;CACJ,MAAM,OAAO,OAAO;CACpB,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,OAAO;CAC7B,MAAM,CACJ,iBACA,cACA,YACA,cACA,aACA,mBACA,sBACE,iBACF,UACA,YACA,UACA,YACA,WACA,iBACA,iBACD;AAED,QAAO;AAqCP,QACE,oBAAC;EAAY,OApCC,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAIG,qBAAC,OAAO;GACF;GACJ,yCAAoB,SAAS,eAAe,eAAe;GAC/C;GACZ,GAAI;;IAEH,iBACE,eAAe,SAAS,qBAAqB,cAC5C,qBAAC;KAAW,GAAI;gBACb,gBACE,QACC,oBAAC;MAAU,GAAI;gBAAa;OAAkB,GAC5C,OAEL,sBACE,cACC,oBAAC;MAAgB,GAAI;gBAClB;OACe,GAChB;MACK,GACX;IAEL,cAAc,oBAAC;KAAS,GAAI;eAAY;MAA2B;IAEnE,iBACE,sBAAsB,eACrB,oBAAC;KAAW,GAAI;eACb,uBACE,eACC,oBAAC;MAAiB,GAAI;gBACnB;OACgB,GACjB;MACK,GACX;;IACM;GACF;GAGlB,QACA,EAAE,eAAe,CAAC,QAAQ,UAAU,EAAE,CACvC,EAAE;AAIH,MAAa,aAAa,YAAoC,OAAO,SAAS,EAAE;AAIhF,MAAa,YAAY,YAAkC,MAAM,QAAQ,CACvE,SACC,UAAU;CACT,MAAM,EAAE,YAAY,gBAAgB,IAAI,EAAE;AAE1C,QAAO;EAAE,IAAI;EAAS,GAAG;EAAO;EAEnC;AAID,MAAa,kBAAkB,YAC7B,KACA,cACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,eAAe,YAAY,gBAAgB,IAAI,EAAE;AAEzD,QAAO;EAAE,IAAI;EAAe,oBAAoB;EAAS,GAAG;EAAO;EACnE;AAIF,MAAa,WAAW,YAAkC,OAAO,OAAO,EAAE;AAI1E,MAAa,YAAY,YAAmC,OAAO,QAAQ,EAAE;AAI7E,MAAa,aAAa,YAAoC,OAAO,SAAS,EAAE;AAIhF,MAAa,mBAAmB,YAC9B,QACA,eACD,CAAC,EAAE,MAAM,UAAU,GAAG,UAAU;CAC/B,MAAM,EAAE,OAAO,gBAAgB,IAAI,EAAE;AAErC,QAAO;EAAE,MAAM;EAAI,GAAG;EAAO;EAC7B"}
+{"version":3,"file":"form.js","names":["createContext"],"sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { FormStyle } from \"./form.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, useSplitChildren } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { formStyle } from \"./form.style\"\n\ninterface FormContext extends Pick<\n  FormRootProps,\n  | \"disabled\"\n  | \"errorMessage\"\n  | \"helperMessage\"\n  | \"invalid\"\n  | \"optionalIndicator\"\n  | \"readOnly\"\n  | \"replace\"\n  | \"required\"\n  | \"requiredIndicator\"\n  | \"size\"\n  | \"variant\"\n> {\n  descriptionId: string\n  id: string\n  titleId: string\n}\n\nconst [FormContext, useFormContext] = createContext<FormContext>({\n  name: \"FormContext\",\n  strict: false,\n})\n\nexport { FormContext, useFormContext }\n\nexport interface FormRootProps\n  extends Omit<HTMLStyledProps<\"form\">, \"title\">, ThemeProps<FormStyle> {\n  /**\n   * The form description to use.\n   */\n  description?: ReactNode\n  /**\n   * An object managing the disabled state of each field.\n   */\n  disabled?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the error message of each field.\n   */\n  errorMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the helper message of each field.\n   */\n  helperMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the invalid state of each field.\n   */\n  invalid?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The optional indicator to use for each field.\n   */\n  optionalIndicator?: ReactNode\n  /**\n   * An object managing the read only state of each field.\n   */\n  readOnly?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the replace state of each field.\n   */\n  replace?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the required state of each field.\n   */\n  required?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The required indicator to use for each field.\n   */\n  requiredIndicator?: ReactNode\n  /**\n   * The submit button to use.\n   */\n  submitButton?: ReactNode\n  /**\n   * The form title to use.\n   */\n  title?: ReactNode\n  /**\n   * Props the body component.\n   */\n  bodyProps?: FormBodyProps\n  /**\n   * Props the description component.\n   */\n  descriptionProps?: FormDescriptionProps\n  /**\n   * Props the footer component.\n   */\n  footerProps?: FormFooterProps\n  /**\n   * Props the header component.\n   */\n  headerProps?: FormHeaderProps\n  /**\n   * Props the submit button component.\n   */\n  submitButtonProps?: FormSubmitButtonProps\n  /**\n   * Props the title component.\n   */\n  titleProps?: FormTitleProps\n}\n\nconst {\n  PropsContext: FormPropsContext,\n  usePropsContext: useFormPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FormRootProps, FormStyle, FormContext>(\n  \"form\",\n  formStyle,\n)\n\nexport { FormPropsContext, useFormPropsContext }\n\n/**\n * `Form` is a component used to group multiple form elements.\n *\n * @see https://yamada-ui.com/docs/components/form\n */\nexport const FormRoot = withProvider<\"form\", FormRootProps, \"size\" | \"variant\">(\n  ({\n    id,\n    size,\n    variant,\n    \"aria-labelledby\": ariaLabelledBy,\n    children,\n    description,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    noValidate = true,\n    optionalIndicator,\n    readOnly,\n    replace,\n    required,\n    requiredIndicator,\n    submitButton,\n    title,\n    bodyProps,\n    descriptionProps,\n    footerProps,\n    headerProps,\n    submitButtonProps,\n    titleProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const titleId = useId()\n    const descriptionId = useId()\n    const [\n      omittedChildren,\n      customHeader,\n      customBody,\n      customFooter,\n      customTitle,\n      customDescription,\n      customSubmitButton,\n    ] = useSplitChildren(\n      children,\n      FormHeader,\n      FormBody,\n      FormFooter,\n      FormTitle,\n      FormDescription,\n      FormSubmitButton,\n    )\n\n    id ??= uuid\n\n    const context = useMemo(\n      () => ({\n        id,\n        size,\n        variant,\n        descriptionId,\n        disabled,\n        errorMessage,\n        helperMessage,\n        invalid,\n        optionalIndicator,\n        readOnly,\n        replace,\n        required,\n        requiredIndicator,\n        titleId,\n      }),\n      [\n        id,\n        titleId,\n        descriptionId,\n        disabled,\n        size,\n        variant,\n        errorMessage,\n        helperMessage,\n        invalid,\n        readOnly,\n        replace,\n        required,\n        optionalIndicator,\n        requiredIndicator,\n      ],\n    )\n\n    return (\n      <FormContext value={context}>\n        <styled.form\n          id={id}\n          aria-labelledby={cx(titleId, descriptionId, ariaLabelledBy)}\n          noValidate={noValidate}\n          {...rest}\n        >\n          {customHeader ||\n            (customTitle || title || customDescription || description ? (\n              <FormHeader {...headerProps}>\n                {customTitle ||\n                  (title ? (\n                    <FormTitle {...titleProps}>{title}</FormTitle>\n                  ) : null)}\n\n                {customDescription ||\n                  (description ? (\n                    <FormDescription {...descriptionProps}>\n                      {description}\n                    </FormDescription>\n                  ) : null)}\n              </FormHeader>\n            ) : null)}\n\n          {customBody || <FormBody {...bodyProps}>{omittedChildren}</FormBody>}\n\n          {customFooter ||\n            (customSubmitButton || submitButton ? (\n              <FormFooter {...footerProps}>\n                {customSubmitButton ||\n                  (submitButton ? (\n                    <FormSubmitButton {...submitButtonProps}>\n                      {submitButton}\n                    </FormSubmitButton>\n                  ) : null)}\n              </FormFooter>\n            ) : null)}\n        </styled.form>\n      </FormContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"variant\"] },\n)()\n\nexport interface FormHeaderProps extends HTMLStyledProps {}\n\nexport const FormHeader = withContext<\"div\", FormHeaderProps>(\"div\", \"header\")()\n\nexport interface FormTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const FormTitle = withContext<\"h3\", FormTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { titleId } = useFormContext() ?? {}\n\n    return { id: titleId, ...props }\n  },\n)\n\nexport interface FormDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const FormDescription = withContext<\"p\", FormDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { descriptionId, titleId } = useFormContext() ?? {}\n\n  return { id: descriptionId, \"aria-describedby\": titleId, ...props }\n})\n\nexport interface FormBodyProps extends HTMLStyledProps {}\n\nexport const FormBody = withContext<\"div\", FormBodyProps>(\"div\", \"body\")()\n\nexport interface FormGroupProps extends HTMLStyledProps {}\n\nexport const FormGroup = withContext<\"div\", FormGroupProps>(\"div\", \"group\")()\n\nexport interface FormFooterProps extends HTMLStyledProps {}\n\nexport const FormFooter = withContext<\"div\", FormFooterProps>(\"div\", \"footer\")()\n\nexport interface FormSubmitButtonProps extends ButtonProps {}\n\nexport const FormSubmitButton = withContext<\"button\", FormSubmitButtonProps>(\n  Button,\n  \"submitButton\",\n)({ type: \"submit\" }, (props) => {\n  const { id } = useFormContext() ?? {}\n\n  return { form: id, ...props }\n})\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,CAAC,aAAa,kBAAkBA,gBAA2B;CAC/D,MAAM;CACN,QAAQ;CACT,CAAC;AAgFF,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,UACD;;;;;;AASD,MAAa,WAAW,cACrB,EACC,IACA,MACA,SACA,mBAAmB,gBACnB,UACA,aACA,UACA,cACA,eACA,SACA,aAAa,MACb,mBACA,UACA,SACA,UACA,mBACA,cACA,OACA,WACA,kBACA,aACA,aACA,mBACA,YACA,GAAG,WACC;CACJ,MAAM,OAAO,OAAO;CACpB,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,OAAO;CAC7B,MAAM,CACJ,iBACA,cACA,YACA,cACA,aACA,mBACA,sBACE,iBACF,UACA,YACA,UACA,YACA,WACA,iBACA,iBACD;CAED,OAAO;CAqCP,OACE,oBAAC,aAAD;EAAa,OApCC,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAI0B;YACzB,qBAAC,OAAO,MAAR;GACM;GACJ,oBAAA,GAAA,cAAA,IAAoB,SAAS,eAAe,eAAe;GAC/C;GACZ,GAAI;aAJN;IAMG,iBACE,eAAe,SAAS,qBAAqB,cAC5C,qBAAC,YAAD;KAAY,GAAI;eAAhB,CACG,gBACE,QACC,oBAAC,WAAD;MAAW,GAAI;gBAAa;MAAkB,CAAA,GAC5C,OAEL,sBACE,cACC,oBAAC,iBAAD;MAAiB,GAAI;gBAClB;MACe,CAAA,GAChB,MACK;SACX;IAEL,cAAc,oBAAC,UAAD;KAAU,GAAI;eAAY;KAA2B,CAAA;IAEnE,iBACE,sBAAsB,eACrB,oBAAC,YAAD;KAAY,GAAI;eACb,uBACE,eACC,oBAAC,kBAAD;MAAkB,GAAI;gBACnB;MACgB,CAAA,GACjB;KACK,CAAA,GACX;IACM;;EACF,CAAA;GAGlB,QACA,EAAE,eAAe,CAAC,QAAQ,UAAU,EAAE,CACvC,EAAE;AAIH,MAAa,aAAa,YAAoC,OAAO,SAAS,EAAE;AAIhF,MAAa,YAAY,YAAkC,MAAM,QAAQ,CACvE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,YAAY,gBAAgB,IAAI,EAAE;CAE1C,OAAO;EAAE,IAAI;EAAS,GAAG;EAAO;EAEnC;AAID,MAAa,kBAAkB,YAC7B,KACA,cACD,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,eAAe,YAAY,gBAAgB,IAAI,EAAE;CAEzD,OAAO;EAAE,IAAI;EAAe,oBAAoB;EAAS,GAAG;EAAO;EACnE;AAIF,MAAa,WAAW,YAAkC,OAAO,OAAO,EAAE;AAI1E,MAAa,YAAY,YAAmC,OAAO,QAAQ,EAAE;AAI7E,MAAa,aAAa,YAAoC,OAAO,SAAS,EAAE;AAIhF,MAAa,mBAAmB,YAC9B,QACA,eACD,CAAC,EAAE,MAAM,UAAU,GAAG,UAAU;CAC/B,MAAM,EAAE,OAAO,gBAAgB,IAAI,EAAE;CAErC,OAAO;EAAE,MAAM;EAAI,GAAG;EAAO;EAC7B"}

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

@@ -1,6 +1,4 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/form/form.style.ts
 const formStyle = defineComponentSlotStyle({
 	base: {
@@ -137,7 +135,7 @@ const formStyle = defineComponentSlotStyle({
 		variant: "plain"
 	}
 });
-
 //#endregion
 export { formStyle };
+
 //# sourceMappingURL=form.style.js.map

package/dist/esm/components/form/form.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.style.js","names":[],"sources":["../../../../src/components/form/form.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const formStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    footer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    submitButton: {},\n    title: {\n      display: \"flex\",\n      fontWeight: \"medium\",\n    },\n  },\n\n  variants: {\n    elevated: { group: { bg: \"bg.panel\", boxShadow: \"md\" } },\n    outline: { group: { borderWidth: \"1px\" } },\n    panel: { group: { layerStyle: \"panel\" } },\n    plain: { group: {} },\n  },\n\n  sizes: {\n    sm: {\n      body: { gap: \"5\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"3\" },\n      group: { gap: \"3\" },\n      header: { gap: \"1\" },\n      root: { gap: \"5\" },\n      title: { fontSize: \"xl\", gap: \"1\" },\n    },\n    md: {\n      body: { gap: \"6\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"4\" },\n      group: { gap: \"4\" },\n      header: { gap: \"1\" },\n      root: { gap: \"6\" },\n      title: { fontSize: \"2xl\", gap: \"1\" },\n    },\n    lg: {\n      body: { gap: \"8\" },\n      description: { fontSize: \"md\", gap: \"1\" },\n      footer: { gap: \"6\" },\n      group: { gap: \"6\" },\n      header: { gap: \"1\" },\n      root: { gap: \"8\" },\n      title: { fontSize: \"3xl\", gap: \"1\" },\n    },\n  },\n\n  compounds: [\n    {\n      css: { group: { p: \"3\", rounded: \"l2\" } },\n      size: \"sm\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"4\", rounded: \"l2\" } },\n      size: \"md\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"6\", rounded: \"l2\" } },\n      size: \"lg\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FormStyle = typeof formStyle\n"],"mappings":";;;;AAEA,MAAa,YAAY,yBAAyB;CAChD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,gBAAgB;GACjB;EACD,OAAO;GACL,SAAS;GACT,eAAe;GAChB;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc,EAAE;EAChB,OAAO;GACL,SAAS;GACT,YAAY;GACb;EACF;CAED,UAAU;EACR,UAAU,EAAE,OAAO;GAAE,IAAI;GAAY,WAAW;GAAM,EAAE;EACxD,SAAS,EAAE,OAAO,EAAE,aAAa,OAAO,EAAE;EAC1C,OAAO,EAAE,OAAO,EAAE,YAAY,SAAS,EAAE;EACzC,OAAO,EAAE,OAAO,EAAE,EAAE;EACrB;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAM,KAAK;IAAK;GACpC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACF;CAED,WAAW;EACT;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
+{"version":3,"file":"form.style.js","names":[],"sources":["../../../../src/components/form/form.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const formStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    footer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    submitButton: {},\n    title: {\n      display: \"flex\",\n      fontWeight: \"medium\",\n    },\n  },\n\n  variants: {\n    elevated: { group: { bg: \"bg.panel\", boxShadow: \"md\" } },\n    outline: { group: { borderWidth: \"1px\" } },\n    panel: { group: { layerStyle: \"panel\" } },\n    plain: { group: {} },\n  },\n\n  sizes: {\n    sm: {\n      body: { gap: \"5\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"3\" },\n      group: { gap: \"3\" },\n      header: { gap: \"1\" },\n      root: { gap: \"5\" },\n      title: { fontSize: \"xl\", gap: \"1\" },\n    },\n    md: {\n      body: { gap: \"6\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"4\" },\n      group: { gap: \"4\" },\n      header: { gap: \"1\" },\n      root: { gap: \"6\" },\n      title: { fontSize: \"2xl\", gap: \"1\" },\n    },\n    lg: {\n      body: { gap: \"8\" },\n      description: { fontSize: \"md\", gap: \"1\" },\n      footer: { gap: \"6\" },\n      group: { gap: \"6\" },\n      header: { gap: \"1\" },\n      root: { gap: \"8\" },\n      title: { fontSize: \"3xl\", gap: \"1\" },\n    },\n  },\n\n  compounds: [\n    {\n      css: { group: { p: \"3\", rounded: \"l2\" } },\n      size: \"sm\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"4\", rounded: \"l2\" } },\n      size: \"md\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"6\", rounded: \"l2\" } },\n      size: \"lg\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FormStyle = typeof formStyle\n"],"mappings":";;AAEA,MAAa,YAAY,yBAAyB;CAChD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,gBAAgB;GACjB;EACD,OAAO;GACL,SAAS;GACT,eAAe;GAChB;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc,EAAE;EAChB,OAAO;GACL,SAAS;GACT,YAAY;GACb;EACF;CAED,UAAU;EACR,UAAU,EAAE,OAAO;GAAE,IAAI;GAAY,WAAW;GAAM,EAAE;EACxD,SAAS,EAAE,OAAO,EAAE,aAAa,OAAO,EAAE;EAC1C,OAAO,EAAE,OAAO,EAAE,YAAY,SAAS,EAAE;EACzC,OAAO,EAAE,OAAO,EAAE,EAAE;EACrB;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAM,KAAK;IAAK;GACpC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACF;CAED,WAAW;EACT;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/esm/components/form/index.js

@@ -1,5 +1,4 @@
 import { formStyle } from "./form.style.js";
 import { FormBody, FormContext, FormDescription, FormFooter, FormGroup, FormHeader, FormPropsContext, FormRoot, FormSubmitButton, FormTitle, useFormContext, useFormPropsContext } from "./form.js";
 import { namespace_exports } from "./namespace.js";
-
-export { namespace_exports as Form, FormBody, FormContext, FormDescription, FormFooter, FormGroup, FormHeader, FormPropsContext, FormRoot, FormSubmitButton, FormTitle, formStyle, useFormContext, useFormPropsContext };
+export { namespace_exports as Form, FormBody, FormContext, FormDescription, FormFooter, FormGroup, FormHeader, FormPropsContext, FormRoot, FormSubmitButton, FormTitle, formStyle, useFormContext, useFormPropsContext };

package/dist/esm/components/form/namespace.js

@@ -1,6 +1,5 @@
-import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { FormBody, FormDescription, FormFooter, FormGroup, FormHeader, FormPropsContext, FormRoot, FormSubmitButton, FormTitle, useFormPropsContext } from "./form.js";
-
 //#region src/components/form/namespace.ts
 var namespace_exports = /* @__PURE__ */ __exportAll({
 	Body: () => FormBody,
@@ -14,7 +13,7 @@ var namespace_exports = /* @__PURE__ */ __exportAll({
 	Title: () => FormTitle,
 	usePropsContext: () => useFormPropsContext
 });
-
 //#endregion
 export { namespace_exports };
+
 //# sourceMappingURL=namespace.js.map

package/dist/esm/components/format/format-byte.js

@@ -1,12 +1,9 @@
 "use client";
-
 import { styled } from "../../core/system/factory.js";
 import { createComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { formatByteStyle } from "./format-byte.style.js";
 import { useFormatByte } from "./use-format-byte.js";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/format/format-byte.tsx
 const { PropsContext: FormatBytePropsContext, usePropsContext: useFormatBytePropsContext, withContext } = createComponent("format-byte", formatByteStyle);
 /**
@@ -25,7 +22,7 @@ const FormatByte = withContext(({ locale, unit, unitDisplay, value, ...rest }) =
 		children: text
 	});
 })();
-
 //#endregion
 export { FormatByte, FormatBytePropsContext, useFormatBytePropsContext };
+
 //# sourceMappingURL=format-byte.js.map

package/dist/esm/components/format/format-byte.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-byte.js","names":[],"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 type { FormatBytesOptions } from \"./use-format-byte\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatByteStyle } from \"./format-byte.style\"\nimport { useFormatByte } from \"./use-format-byte\"\n\nexport interface FormatByteProps\n  extends\n    HTMLStyledProps<\"span\">,\n    ThemeProps<FormatByteStyle>,\n    FormatBytesOptions {\n  /**\n   * The byte size to format\n   */\n  value: number\n}\n\nconst {\n  PropsContext: FormatBytePropsContext,\n  usePropsContext: useFormatBytePropsContext,\n  withContext,\n} = createComponent<FormatByteProps, FormatByteStyle>(\n  \"format-byte\",\n  formatByteStyle,\n)\n\nexport { FormatBytePropsContext, useFormatBytePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\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":";;;;;;;;;;AAoBA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACvB,EAAE,QAAQ,MAAM,aAAa,OAAO,GAAG,WAAW;CACjD,MAAM,OAAO,cAAc,OAAO;EAAE;EAAQ;EAAM;EAAa,CAAC;AAEhE,QAAO,oBAAC,OAAO;EAAK,GAAI;YAAO;GAAmB;EAErD,EAAE"}
+{"version":3,"file":"format-byte.js","names":[],"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 type { FormatBytesOptions } from \"./use-format-byte\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatByteStyle } from \"./format-byte.style\"\nimport { useFormatByte } from \"./use-format-byte\"\n\nexport interface FormatByteProps\n  extends\n    HTMLStyledProps<\"span\">,\n    ThemeProps<FormatByteStyle>,\n    FormatBytesOptions {\n  /**\n   * The byte size to format\n   */\n  value: number\n}\n\nconst {\n  PropsContext: FormatBytePropsContext,\n  usePropsContext: useFormatBytePropsContext,\n  withContext,\n} = createComponent<FormatByteProps, FormatByteStyle>(\n  \"format-byte\",\n  formatByteStyle,\n)\n\nexport { FormatBytePropsContext, useFormatBytePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\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":";;;;;;;AAoBA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACvB,EAAE,QAAQ,MAAM,aAAa,OAAO,GAAG,WAAW;CACjD,MAAM,OAAO,cAAc,OAAO;EAAE;EAAQ;EAAM;EAAa,CAAC;CAEhE,OAAO,oBAAC,OAAO,MAAR;EAAa,GAAI;YAAO;EAAmB,CAAA;EAErD,EAAE"}

package/dist/esm/components/format/format-byte.style.js

@@ -1,9 +1,7 @@
 import { defineComponentStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/format/format-byte.style.ts
 const formatByteStyle = defineComponentStyle({});
-
 //#endregion
 export { formatByteStyle };
+
 //# sourceMappingURL=format-byte.style.js.map

package/dist/esm/components/format/format-byte.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-byte.style.js","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,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"format-byte.style.js","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,qBAAqB,EAAE,CAAC"}

package/dist/esm/components/format/format-date-time.js

@@ -1,12 +1,9 @@
 "use client";
-
 import { styled } from "../../core/system/factory.js";
 import { createComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { formatDateTimeStyle } from "./format-date-time.style.js";
 import { useFormatDateTime } from "./use-format-date-time.js";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/format/format-date-time.tsx
 const { PropsContext: FormatDateTimePropsContext, usePropsContext: useFormatDateTimePropsContext, withContext } = createComponent("format-date-time", formatDateTimeStyle);
 /**
@@ -43,7 +40,7 @@ const FormatDateTime = withContext(({ calendar, dateStyle, day, dayPeriod, era,
 		children: text
 	});
 })();
-
 //#endregion
 export { FormatDateTime, FormatDateTimePropsContext, useFormatDateTimePropsContext };
+
 //# sourceMappingURL=format-date-time.js.map

package/dist/esm/components/format/format-date-time.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-date-time.js","names":[],"sources":["../../../../src/components/format/format-date-time.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatDateTimeStyle } from \"./format-date-time.style\"\nimport type { FormatDateTimeOptions } from \"./use-format-date-time\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatDateTimeStyle } from \"./format-date-time.style\"\nimport { useFormatDateTime } from \"./use-format-date-time\"\n\nexport interface FormatDateTimeProps\n  extends\n    HTMLStyledProps<\"span\">,\n    ThemeProps<FormatDateTimeStyle>,\n    FormatDateTimeOptions {\n  /**\n   * The date time to format\n   */\n  value: Date\n}\n\nconst {\n  PropsContext: FormatDateTimePropsContext,\n  usePropsContext: useFormatDateTimePropsContext,\n  withContext,\n} = createComponent<FormatDateTimeProps, FormatDateTimeStyle>(\n  \"format-date-time\",\n  formatDateTimeStyle,\n)\n\nexport { FormatDateTimePropsContext, useFormatDateTimePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\n */\nexport const FormatDateTime = withContext(\n  ({\n    calendar,\n    dateStyle,\n    day,\n    dayPeriod,\n    era,\n    formatMatcher,\n    fractionalSecondDigits,\n    hour,\n    hour12,\n    hourCycle,\n    locale,\n    localeMatcher,\n    minute,\n    month,\n    numberingSystem,\n    second,\n    timeStyle,\n    timeZone,\n    timeZoneName,\n    value,\n    weekday,\n    year,\n    ...rest\n  }) => {\n    const text = useFormatDateTime(value, {\n      calendar,\n      dateStyle,\n      day,\n      dayPeriod,\n      era,\n      formatMatcher,\n      fractionalSecondDigits,\n      hour,\n      hour12,\n      hourCycle,\n      locale,\n      localeMatcher,\n      minute,\n      month,\n      numberingSystem,\n      second,\n      timeStyle,\n      timeZone,\n      timeZoneName,\n      weekday,\n      year,\n    })\n\n    return <styled.span {...rest}>{text}</styled.span>\n  },\n)()\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,EACJ,cAAc,4BACd,iBAAiB,+BACjB,gBACE,gBACF,oBACA,oBACD;;;;;;AASD,MAAa,iBAAiB,aAC3B,EACC,UACA,WACA,KACA,WACA,KACA,eACA,wBACA,MACA,QACA,WACA,QACA,eACA,QACA,OACA,iBACA,QACA,WACA,UACA,cACA,OACA,SACA,MACA,GAAG,WACC;CACJ,MAAM,OAAO,kBAAkB,OAAO;EACpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,oBAAC,OAAO;EAAK,GAAI;YAAO;GAAmB;EAErD,EAAE"}
+{"version":3,"file":"format-date-time.js","names":[],"sources":["../../../../src/components/format/format-date-time.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatDateTimeStyle } from \"./format-date-time.style\"\nimport type { FormatDateTimeOptions } from \"./use-format-date-time\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatDateTimeStyle } from \"./format-date-time.style\"\nimport { useFormatDateTime } from \"./use-format-date-time\"\n\nexport interface FormatDateTimeProps\n  extends\n    HTMLStyledProps<\"span\">,\n    ThemeProps<FormatDateTimeStyle>,\n    FormatDateTimeOptions {\n  /**\n   * The date time to format\n   */\n  value: Date\n}\n\nconst {\n  PropsContext: FormatDateTimePropsContext,\n  usePropsContext: useFormatDateTimePropsContext,\n  withContext,\n} = createComponent<FormatDateTimeProps, FormatDateTimeStyle>(\n  \"format-date-time\",\n  formatDateTimeStyle,\n)\n\nexport { FormatDateTimePropsContext, useFormatDateTimePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\n */\nexport const FormatDateTime = withContext(\n  ({\n    calendar,\n    dateStyle,\n    day,\n    dayPeriod,\n    era,\n    formatMatcher,\n    fractionalSecondDigits,\n    hour,\n    hour12,\n    hourCycle,\n    locale,\n    localeMatcher,\n    minute,\n    month,\n    numberingSystem,\n    second,\n    timeStyle,\n    timeZone,\n    timeZoneName,\n    value,\n    weekday,\n    year,\n    ...rest\n  }) => {\n    const text = useFormatDateTime(value, {\n      calendar,\n      dateStyle,\n      day,\n      dayPeriod,\n      era,\n      formatMatcher,\n      fractionalSecondDigits,\n      hour,\n      hour12,\n      hourCycle,\n      locale,\n      localeMatcher,\n      minute,\n      month,\n      numberingSystem,\n      second,\n      timeStyle,\n      timeZone,\n      timeZoneName,\n      weekday,\n      year,\n    })\n\n    return <styled.span {...rest}>{text}</styled.span>\n  },\n)()\n"],"mappings":";;;;;;;AAoBA,MAAM,EACJ,cAAc,4BACd,iBAAiB,+BACjB,gBACE,gBACF,oBACA,oBACD;;;;;;AASD,MAAa,iBAAiB,aAC3B,EACC,UACA,WACA,KACA,WACA,KACA,eACA,wBACA,MACA,QACA,WACA,QACA,eACA,QACA,OACA,iBACA,QACA,WACA,UACA,cACA,OACA,SACA,MACA,GAAG,WACC;CACJ,MAAM,OAAO,kBAAkB,OAAO;EACpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,OAAO,oBAAC,OAAO,MAAR;EAAa,GAAI;YAAO;EAAmB,CAAA;EAErD,EAAE"}

package/dist/esm/components/format/format-date-time.style.js

@@ -1,9 +1,7 @@
 import { defineComponentStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/format/format-date-time.style.ts
 const formatDateTimeStyle = defineComponentStyle({});
-
 //#endregion
 export { formatDateTimeStyle };
+
 //# sourceMappingURL=format-date-time.style.js.map

package/dist/esm/components/format/format-date-time.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-date-time.style.js","names":[],"sources":["../../../../src/components/format/format-date-time.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const formatDateTimeStyle = defineComponentStyle({})\n\nexport type FormatDateTimeStyle = typeof formatDateTimeStyle\n"],"mappings":";;;;AAEA,MAAa,sBAAsB,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"format-date-time.style.js","names":[],"sources":["../../../../src/components/format/format-date-time.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const formatDateTimeStyle = defineComponentStyle({})\n\nexport type FormatDateTimeStyle = typeof formatDateTimeStyle\n"],"mappings":";;AAEA,MAAa,sBAAsB,qBAAqB,EAAE,CAAC"}

package/dist/esm/components/format/format-number.js

@@ -1,12 +1,9 @@
 "use client";
-
 import { styled } from "../../core/system/factory.js";
 import { createComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { formatNumberStyle } from "./format-number.style.js";
 import { useFormatNumber } from "./use-format-number.js";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/format/format-number.tsx
 const { PropsContext: FormatNumberPropsContext, usePropsContext: useFormatNumberPropsContext, withContext } = createComponent("format-number", formatNumberStyle);
 /**
@@ -44,7 +41,7 @@ const FormatNumber = withContext(({ style, compactDisplay, currency, currencyDis
 		children: text
 	});
 })();
-
 //#endregion
 export { FormatNumber, FormatNumberPropsContext, useFormatNumberPropsContext };
+
 //# sourceMappingURL=format-number.js.map

package/dist/esm/components/format/format-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-number.js","names":[],"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 type { FormatNumberOptions } from \"./use-format-number\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatNumberStyle } from \"./format-number.style\"\nimport { useFormatNumber } from \"./use-format-number\"\n\nexport interface FormatNumberProps\n  extends\n    Omit<HTMLStyledProps<\"span\">, \"style\">,\n    ThemeProps<FormatNumberStyle>,\n    FormatNumberOptions {\n  /**\n   * The numeric value to be formatted.\n   */\n  value: number\n}\n\nconst {\n  PropsContext: FormatNumberPropsContext,\n  usePropsContext: useFormatNumberPropsContext,\n  withContext,\n} = createComponent<FormatNumberProps, FormatNumberStyle>(\n  \"format-number\",\n  formatNumberStyle,\n)\n\nexport { FormatNumberPropsContext, useFormatNumberPropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\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":";;;;;;;;;;AAoBA,MAAM,EACJ,cAAc,0BACd,iBAAiB,6BACjB,gBACE,gBACF,iBACA,kBACD;;;;;;AASD,MAAa,eAAe,aACzB,EACC,OACA,gBACA,UACA,iBACA,cACA,QACA,eACA,uBACA,0BACA,uBACA,sBACA,0BACA,UACA,iBACA,mBACA,cACA,kBACA,aACA,qBACA,MACA,aACA,aACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,gBAAgB,OAAO;EAClC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,oBAAC,OAAO;EAAK,GAAI;YAAO;GAAmB;EAErD,EAAE"}
+{"version":3,"file":"format-number.js","names":[],"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 type { FormatNumberOptions } from \"./use-format-number\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatNumberStyle } from \"./format-number.style\"\nimport { useFormatNumber } from \"./use-format-number\"\n\nexport interface FormatNumberProps\n  extends\n    Omit<HTMLStyledProps<\"span\">, \"style\">,\n    ThemeProps<FormatNumberStyle>,\n    FormatNumberOptions {\n  /**\n   * The numeric value to be formatted.\n   */\n  value: number\n}\n\nconst {\n  PropsContext: FormatNumberPropsContext,\n  usePropsContext: useFormatNumberPropsContext,\n  withContext,\n} = createComponent<FormatNumberProps, FormatNumberStyle>(\n  \"format-number\",\n  formatNumberStyle,\n)\n\nexport { FormatNumberPropsContext, useFormatNumberPropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\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":";;;;;;;AAoBA,MAAM,EACJ,cAAc,0BACd,iBAAiB,6BACjB,gBACE,gBACF,iBACA,kBACD;;;;;;AASD,MAAa,eAAe,aACzB,EACC,OACA,gBACA,UACA,iBACA,cACA,QACA,eACA,uBACA,0BACA,uBACA,sBACA,0BACA,UACA,iBACA,mBACA,cACA,kBACA,aACA,qBACA,MACA,aACA,aACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,gBAAgB,OAAO;EAClC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,OAAO,oBAAC,OAAO,MAAR;EAAa,GAAI;YAAO;EAAmB,CAAA;EAErD,EAAE"}

package/dist/esm/components/format/format-number.style.js

@@ -1,9 +1,7 @@
 import { defineComponentStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/format/format-number.style.ts
 const formatNumberStyle = defineComponentStyle({});
-
 //#endregion
 export { formatNumberStyle };
+
 //# sourceMappingURL=format-number.style.js.map

package/dist/esm/components/format/format-number.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-number.style.js","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,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"format-number.style.js","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,qBAAqB,EAAE,CAAC"}

package/dist/esm/components/format/index.js

@@ -7,5 +7,4 @@ import { getFormatDateTime, useDateTimeFormat, useFormatDateTime } from "./use-f
 import { FormatDateTime, FormatDateTimePropsContext, useFormatDateTimePropsContext } from "./format-date-time.js";
 import { FormatNumber, FormatNumberPropsContext, useFormatNumberPropsContext } from "./format-number.js";
 import { namespace_exports } from "./namespace.js";
-
-export { namespace_exports as Format, FormatByte, FormatBytePropsContext, FormatDateTime, FormatDateTimePropsContext, FormatNumber, FormatNumberPropsContext, formatByteStyle, formatNumberStyle, getFormatDateTime, getFormatNumber, useByteFormat, useDateTimeFormat, useFormatByte, useFormatBytePropsContext, useFormatDateTime, useFormatDateTimePropsContext, useFormatNumber, useFormatNumberPropsContext, useNumberFormat };
+export { namespace_exports as Format, FormatByte, FormatBytePropsContext, FormatDateTime, FormatDateTimePropsContext, FormatNumber, FormatNumberPropsContext, formatByteStyle, formatNumberStyle, getFormatDateTime, getFormatNumber, useByteFormat, useDateTimeFormat, useFormatByte, useFormatBytePropsContext, useFormatDateTime, useFormatDateTimePropsContext, useFormatNumber, useFormatNumberPropsContext, useNumberFormat };

package/dist/esm/components/format/namespace.js

@@ -1,11 +1,10 @@
-import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { getFormatNumber, useFormatNumber, useNumberFormat } from "./use-format-number.js";
 import { useByteFormat, useFormatByte } from "./use-format-byte.js";
 import { FormatByte, FormatBytePropsContext, useFormatBytePropsContext } from "./format-byte.js";
 import { getFormatDateTime, useDateTimeFormat, useFormatDateTime } from "./use-format-date-time.js";
 import { FormatDateTime, FormatDateTimePropsContext, useFormatDateTimePropsContext } from "./format-date-time.js";
 import { FormatNumber, FormatNumberPropsContext, useFormatNumberPropsContext } from "./format-number.js";
-
 //#region src/components/format/namespace.ts
 var namespace_exports = /* @__PURE__ */ __exportAll({
 	Byte: () => FormatByte,
@@ -26,7 +25,7 @@ var namespace_exports = /* @__PURE__ */ __exportAll({
 	useNumberFormat: () => useNumberFormat,
 	useNumberPropsContext: () => useFormatNumberPropsContext
 });
-
 //#endregion
 export { namespace_exports };
+
 //# sourceMappingURL=namespace.js.map

package/dist/esm/components/format/use-format-byte.js

@@ -1,10 +1,7 @@
 "use client";
-
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
-import "../../providers/i18n-provider/index.js";
 import { useNumberFormat } from "./use-format-number.js";
 import { useCallback } from "react";
-
 //#region src/components/format/use-format-byte.ts
 const bitPrefixes = [
 	"",
@@ -47,7 +44,7 @@ const useByteFormat = ({ locale, unit: defaultUnit = "byte", unitDisplay: defaul
 		numberFormat
 	]);
 };
-
 //#endregion
 export { useByteFormat, useFormatByte };
+
 //# sourceMappingURL=use-format-byte.js.map

package/dist/esm/components/format/use-format-byte.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-format-byte.js","names":[],"sources":["../../../../src/components/format/use-format-byte.ts"],"sourcesContent":["\"use client\"\n\nimport type { Locale } from \"../../providers/i18n-provider\"\nimport type { AnyString } from \"../../utils\"\nimport { useCallback } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { useNumberFormat } from \"./use-format-number\"\n\nconst bitPrefixes = [\"\", \"kilo\", \"mega\", \"giga\", \"tera\"]\nconst bytePrefixes = [\"\", \"kilo\", \"mega\", \"giga\", \"tera\", \"peta\"]\n\nexport interface FormatBytesOptions {\n  /**\n   * The locale string to use for formatting.\n   *\n   * @default 'en-US'\n   */\n  locale?: AnyString | Locale\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\n/**\n * `useFormatByte` is a custom hook that returns the formatted byte.\n *\n * @see https://yamada-ui.com/docs/hooks/use-format-byte\n */\nexport const useFormatByte = (bytes: number, options?: FormatBytesOptions) => {\n  const byteFormat = useByteFormat(options)\n\n  return byteFormat(bytes)\n}\n\nexport type UseFormatByteReturn = ReturnType<typeof useFormatByte>\n\nexport const useByteFormat = ({\n  locale,\n  unit: defaultUnit = \"byte\",\n  unitDisplay: defaultUnitDisplay = \"short\",\n}: FormatBytesOptions = {}) => {\n  const { locale: defaultLocale } = useI18n()\n  const numberFormat = useNumberFormat({ locale: locale ?? defaultLocale })\n\n  const byteFormat = useCallback(\n    (\n      bytes: number,\n      {\n        unit = defaultUnit,\n        unitDisplay = defaultUnitDisplay,\n      }: Omit<FormatBytesOptions, \"locale\"> = {},\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(\n              (sanitizedBytes / 10 ** (3 * index)).toPrecision(3),\n            )\n\n      return numberFormat(value, {\n        style: \"unit\",\n        unit: prefix[index] + unit,\n        unitDisplay,\n      })\n    },\n    [defaultUnit, defaultUnitDisplay, numberFormat],\n  )\n\n  return byteFormat\n}\n\nexport type UseByteFormatReturn = ReturnType<typeof useByteFormat>\n"],"mappings":";;;;;;;;AAQA,MAAM,cAAc;CAAC;CAAI;CAAQ;CAAQ;CAAQ;CAAO;AACxD,MAAM,eAAe;CAAC;CAAI;CAAQ;CAAQ;CAAQ;CAAQ;CAAO;;;;;;AAwBjE,MAAa,iBAAiB,OAAe,YAAiC;AAG5E,QAFmB,cAAc,QAAQ,CAEvB,MAAM;;AAK1B,MAAa,iBAAiB,EAC5B,QACA,MAAM,cAAc,QACpB,aAAa,qBAAqB,YACZ,EAAE,KAAK;CAC7B,MAAM,EAAE,QAAQ,kBAAkB,SAAS;CAC3C,MAAM,eAAe,gBAAgB,EAAE,QAAQ,UAAU,eAAe,CAAC;AAgCzE,QA9BmB,aAEf,OACA,EACE,OAAO,aACP,cAAc,uBACwB,EAAE,KACvC;EACH,MAAM,iBAAiB,OAAO,MAAM,MAAM,GAAG,IAAI;EACjD,MAAM,SAAS,SAAS,QAAQ,cAAc;EAC9C,MAAM,QAAQ,KAAK,IACjB,GACA,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,eAAe,GAAG,EAAE,EAAE,OAAO,SAAS,EAAE,CACxE;AAQD,SAAO,aANL,mBAAmB,IACf,IACA,OAAO,YACJ,iBAAiB,OAAO,IAAI,QAAQ,YAAY,EAAE,CACpD,EAEoB;GACzB,OAAO;GACP,MAAM,OAAO,SAAS;GACtB;GACD,CAAC;IAEJ;EAAC;EAAa;EAAoB;EAAa,CAChD"}
+{"version":3,"file":"use-format-byte.js","names":[],"sources":["../../../../src/components/format/use-format-byte.ts"],"sourcesContent":["\"use client\"\n\nimport type { Locale } from \"../../providers/i18n-provider\"\nimport type { AnyString } from \"../../utils\"\nimport { useCallback } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { useNumberFormat } from \"./use-format-number\"\n\nconst bitPrefixes = [\"\", \"kilo\", \"mega\", \"giga\", \"tera\"]\nconst bytePrefixes = [\"\", \"kilo\", \"mega\", \"giga\", \"tera\", \"peta\"]\n\nexport interface FormatBytesOptions {\n  /**\n   * The locale string to use for formatting.\n   *\n   * @default 'en-US'\n   */\n  locale?: AnyString | Locale\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\n/**\n * `useFormatByte` is a custom hook that returns the formatted byte.\n *\n * @see https://yamada-ui.com/docs/hooks/use-format-byte\n */\nexport const useFormatByte = (bytes: number, options?: FormatBytesOptions) => {\n  const byteFormat = useByteFormat(options)\n\n  return byteFormat(bytes)\n}\n\nexport type UseFormatByteReturn = ReturnType<typeof useFormatByte>\n\nexport const useByteFormat = ({\n  locale,\n  unit: defaultUnit = \"byte\",\n  unitDisplay: defaultUnitDisplay = \"short\",\n}: FormatBytesOptions = {}) => {\n  const { locale: defaultLocale } = useI18n()\n  const numberFormat = useNumberFormat({ locale: locale ?? defaultLocale })\n\n  const byteFormat = useCallback(\n    (\n      bytes: number,\n      {\n        unit = defaultUnit,\n        unitDisplay = defaultUnitDisplay,\n      }: Omit<FormatBytesOptions, \"locale\"> = {},\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(\n              (sanitizedBytes / 10 ** (3 * index)).toPrecision(3),\n            )\n\n      return numberFormat(value, {\n        style: \"unit\",\n        unit: prefix[index] + unit,\n        unitDisplay,\n      })\n    },\n    [defaultUnit, defaultUnitDisplay, numberFormat],\n  )\n\n  return byteFormat\n}\n\nexport type UseByteFormatReturn = ReturnType<typeof useByteFormat>\n"],"mappings":";;;;;AAQA,MAAM,cAAc;CAAC;CAAI;CAAQ;CAAQ;CAAQ;CAAO;AACxD,MAAM,eAAe;CAAC;CAAI;CAAQ;CAAQ;CAAQ;CAAQ;CAAO;;;;;;AAwBjE,MAAa,iBAAiB,OAAe,YAAiC;CAG5E,OAFmB,cAAc,QAEhB,CAAC,MAAM;;AAK1B,MAAa,iBAAiB,EAC5B,QACA,MAAM,cAAc,QACpB,aAAa,qBAAqB,YACZ,EAAE,KAAK;CAC7B,MAAM,EAAE,QAAQ,kBAAkB,SAAS;CAC3C,MAAM,eAAe,gBAAgB,EAAE,QAAQ,UAAU,eAAe,CAAC;CAgCzE,OA9BmB,aAEf,OACA,EACE,OAAO,aACP,cAAc,uBACwB,EAAE,KACvC;EACH,MAAM,iBAAiB,OAAO,MAAM,MAAM,GAAG,IAAI;EACjD,MAAM,SAAS,SAAS,QAAQ,cAAc;EAC9C,MAAM,QAAQ,KAAK,IACjB,GACA,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,eAAe,GAAG,EAAE,EAAE,OAAO,SAAS,EAAE,CACxE;EAQD,OAAO,aANL,mBAAmB,IACf,IACA,OAAO,YACJ,iBAAiB,OAAO,IAAI,QAAQ,YAAY,EAAE,CACpD,EAEoB;GACzB,OAAO;GACP,MAAM,OAAO,SAAS;GACtB;GACD,CAAC;IAEJ;EAAC;EAAa;EAAoB;EAAa,CAGhC"}

package/dist/esm/components/format/use-format-date-time.js

@@ -1,10 +1,7 @@
 "use client";
-
 import { i18nCache } from "../../providers/i18n-provider/i18n-cache.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
-import "../../providers/i18n-provider/index.js";
 import { useCallback, useRef } from "react";
-
 //#region src/components/format/use-format-date-time.ts
 const getFormatDateTime = i18nCache(Intl.DateTimeFormat);
 /**
@@ -19,14 +16,14 @@ const useDateTimeFormat = ({ locale, ...options } = {}) => {
 	const { locale: defaultLocale } = useI18n();
 	const memoizedOptions = useRef(options);
 	locale ??= defaultLocale;
-	return useCallback((value, options$1) => {
+	return useCallback((value, options) => {
 		return getFormatDateTime(locale, {
 			...memoizedOptions.current,
-			...options$1
+			...options
 		}).format(value);
 	}, [locale]);
 };
-
 //#endregion
 export { getFormatDateTime, useDateTimeFormat, useFormatDateTime };
+
 //# sourceMappingURL=use-format-date-time.js.map

package/dist/esm/components/format/use-format-date-time.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-format-date-time.js","names":["options"],"sources":["../../../../src/components/format/use-format-date-time.ts"],"sourcesContent":["\"use client\"\n\nimport type { Locale } from \"../../providers/i18n-provider\"\nimport type { AnyString } from \"../../utils\"\nimport { useCallback, useRef } from \"react\"\nimport { i18nCache, useI18n } from \"../../providers/i18n-provider\"\n\nexport const getFormatDateTime = i18nCache(Intl.DateTimeFormat)\n\nexport interface FormatDateTimeOptions extends Intl.DateTimeFormatOptions {\n  /**\n   * The locale string to use for formatting.\n   *\n   * @default 'en-US'\n   */\n  locale?: AnyString | Locale\n}\n\n/**\n * `useFormatDateTime` is a custom hook that returns the formatted date time.\n *\n * @see https://yamada-ui.com/docs/hooks/use-format-date-time\n */\nexport const useFormatDateTime = (\n  value: Date,\n  options?: FormatDateTimeOptions,\n) => {\n  const dateTimeFormat = useDateTimeFormat(options)\n\n  return dateTimeFormat(value)\n}\n\nexport type UseFormatDateTimeReturn = ReturnType<typeof useFormatDateTime>\n\nexport const useDateTimeFormat = ({\n  locale,\n  ...options\n}: FormatDateTimeOptions = {}) => {\n  const { locale: defaultLocale } = useI18n()\n  const memoizedOptions = useRef(options)\n\n  locale ??= defaultLocale\n\n  const dateTimeFormat = useCallback(\n    (value: Date, options?: Intl.DateTimeFormatOptions) => {\n      const formatter = getFormatDateTime(locale, {\n        ...memoizedOptions.current,\n        ...options,\n      })\n\n      return formatter.format(value)\n    },\n    [locale],\n  )\n\n  return dateTimeFormat\n}\n\nexport type UseDateTimeFormatReturn = ReturnType<typeof useDateTimeFormat>\n"],"mappings":";;;;;;;;AAOA,MAAa,oBAAoB,UAAU,KAAK,eAAe;;;;;;AAgB/D,MAAa,qBACX,OACA,YACG;AAGH,QAFuB,kBAAkB,QAAQ,CAE3B,MAAM;;AAK9B,MAAa,qBAAqB,EAChC,QACA,GAAG,YACsB,EAAE,KAAK;CAChC,MAAM,EAAE,QAAQ,kBAAkB,SAAS;CAC3C,MAAM,kBAAkB,OAAO,QAAQ;AAEvC,YAAW;AAcX,QAZuB,aACpB,OAAa,cAAyC;AAMrD,SALkB,kBAAkB,QAAQ;GAC1C,GAAG,gBAAgB;GACnB,GAAGA;GACJ,CAAC,CAEe,OAAO,MAAM;IAEhC,CAAC,OAAO,CACT"}
+{"version":3,"file":"use-format-date-time.js","names":[],"sources":["../../../../src/components/format/use-format-date-time.ts"],"sourcesContent":["\"use client\"\n\nimport type { Locale } from \"../../providers/i18n-provider\"\nimport type { AnyString } from \"../../utils\"\nimport { useCallback, useRef } from \"react\"\nimport { i18nCache, useI18n } from \"../../providers/i18n-provider\"\n\nexport const getFormatDateTime = i18nCache(Intl.DateTimeFormat)\n\nexport interface FormatDateTimeOptions extends Intl.DateTimeFormatOptions {\n  /**\n   * The locale string to use for formatting.\n   *\n   * @default 'en-US'\n   */\n  locale?: AnyString | Locale\n}\n\n/**\n * `useFormatDateTime` is a custom hook that returns the formatted date time.\n *\n * @see https://yamada-ui.com/docs/hooks/use-format-date-time\n */\nexport const useFormatDateTime = (\n  value: Date,\n  options?: FormatDateTimeOptions,\n) => {\n  const dateTimeFormat = useDateTimeFormat(options)\n\n  return dateTimeFormat(value)\n}\n\nexport type UseFormatDateTimeReturn = ReturnType<typeof useFormatDateTime>\n\nexport const useDateTimeFormat = ({\n  locale,\n  ...options\n}: FormatDateTimeOptions = {}) => {\n  const { locale: defaultLocale } = useI18n()\n  const memoizedOptions = useRef(options)\n\n  locale ??= defaultLocale\n\n  const dateTimeFormat = useCallback(\n    (value: Date, options?: Intl.DateTimeFormatOptions) => {\n      const formatter = getFormatDateTime(locale, {\n        ...memoizedOptions.current,\n        ...options,\n      })\n\n      return formatter.format(value)\n    },\n    [locale],\n  )\n\n  return dateTimeFormat\n}\n\nexport type UseDateTimeFormatReturn = ReturnType<typeof useDateTimeFormat>\n"],"mappings":";;;;;AAOA,MAAa,oBAAoB,UAAU,KAAK,eAAe;;;;;;AAgB/D,MAAa,qBACX,OACA,YACG;CAGH,OAFuB,kBAAkB,QAEpB,CAAC,MAAM;;AAK9B,MAAa,qBAAqB,EAChC,QACA,GAAG,YACsB,EAAE,KAAK;CAChC,MAAM,EAAE,QAAQ,kBAAkB,SAAS;CAC3C,MAAM,kBAAkB,OAAO,QAAQ;CAEvC,WAAW;CAcX,OAZuB,aACpB,OAAa,YAAyC;EAMrD,OALkB,kBAAkB,QAAQ;GAC1C,GAAG,gBAAgB;GACnB,GAAG;GACJ,CAEe,CAAC,OAAO,MAAM;IAEhC,CAAC,OAAO,CAGW"}

package/dist/esm/components/format/use-format-number.js

@@ -1,10 +1,7 @@
 "use client";
-
 import { i18nCache } from "../../providers/i18n-provider/i18n-cache.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
-import "../../providers/i18n-provider/index.js";
 import { useCallback, useRef } from "react";
-
 //#region src/components/format/use-format-number.ts
 const getFormatNumber = i18nCache(Intl.NumberFormat);
 /**
@@ -19,14 +16,14 @@ const useNumberFormat = ({ locale, ...options } = {}) => {
 	const { locale: defaultLocale } = useI18n();
 	const memoizedOptions = useRef(options);
 	locale ??= defaultLocale;
-	return useCallback((value, options$1) => {
+	return useCallback((value, options) => {
 		return getFormatNumber(locale, {
 			...memoizedOptions.current,
-			...options$1
+			...options
 		}).format(value);
 	}, [locale]);
 };
-
 //#endregion
 export { getFormatNumber, useFormatNumber, useNumberFormat };
+
 //# sourceMappingURL=use-format-number.js.map

package/dist/esm/components/format/use-format-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-format-number.js","names":["options"],"sources":["../../../../src/components/format/use-format-number.ts"],"sourcesContent":["\"use client\"\n\nimport type { Locale } from \"../../providers/i18n-provider\"\nimport type { AnyString } from \"../../utils\"\nimport { useCallback, useRef } from \"react\"\nimport { i18nCache, useI18n } from \"../../providers/i18n-provider\"\n\nexport const getFormatNumber = i18nCache(Intl.NumberFormat)\n\nexport interface FormatNumberOptions extends Intl.NumberFormatOptions {\n  /**\n   * The locale string to use for formatting.\n   *\n   * @default 'en-US'\n   */\n  locale?: AnyString | Locale\n}\n\n/**\n * `useFormatNumber` is a custom hook that returns the formatted number.\n *\n * @see https://yamada-ui.com/docs/hooks/use-format-number\n */\nexport const useFormatNumber = (\n  value: number,\n  options?: FormatNumberOptions,\n) => {\n  const numberFormat = useNumberFormat(options)\n\n  return numberFormat(value)\n}\n\nexport type UseFormatNumberReturn = ReturnType<typeof useFormatNumber>\n\nexport const useNumberFormat = ({\n  locale,\n  ...options\n}: FormatNumberOptions = {}) => {\n  const { locale: defaultLocale } = useI18n()\n  const memoizedOptions = useRef(options)\n\n  locale ??= defaultLocale\n\n  const numberFormat = useCallback(\n    (value: number, options?: Intl.NumberFormatOptions) => {\n      const formatter = getFormatNumber(locale, {\n        ...memoizedOptions.current,\n        ...options,\n      })\n\n      return formatter.format(value)\n    },\n    [locale],\n  )\n\n  return numberFormat\n}\n\nexport type UseNumberFormatReturn = ReturnType<typeof useNumberFormat>\n"],"mappings":";;;;;;;;AAOA,MAAa,kBAAkB,UAAU,KAAK,aAAa;;;;;;AAgB3D,MAAa,mBACX,OACA,YACG;AAGH,QAFqB,gBAAgB,QAAQ,CAEzB,MAAM;;AAK5B,MAAa,mBAAmB,EAC9B,QACA,GAAG,YACoB,EAAE,KAAK;CAC9B,MAAM,EAAE,QAAQ,kBAAkB,SAAS;CAC3C,MAAM,kBAAkB,OAAO,QAAQ;AAEvC,YAAW;AAcX,QAZqB,aAClB,OAAe,cAAuC;AAMrD,SALkB,gBAAgB,QAAQ;GACxC,GAAG,gBAAgB;GACnB,GAAGA;GACJ,CAAC,CAEe,OAAO,MAAM;IAEhC,CAAC,OAAO,CACT"}
+{"version":3,"file":"use-format-number.js","names":[],"sources":["../../../../src/components/format/use-format-number.ts"],"sourcesContent":["\"use client\"\n\nimport type { Locale } from \"../../providers/i18n-provider\"\nimport type { AnyString } from \"../../utils\"\nimport { useCallback, useRef } from \"react\"\nimport { i18nCache, useI18n } from \"../../providers/i18n-provider\"\n\nexport const getFormatNumber = i18nCache(Intl.NumberFormat)\n\nexport interface FormatNumberOptions extends Intl.NumberFormatOptions {\n  /**\n   * The locale string to use for formatting.\n   *\n   * @default 'en-US'\n   */\n  locale?: AnyString | Locale\n}\n\n/**\n * `useFormatNumber` is a custom hook that returns the formatted number.\n *\n * @see https://yamada-ui.com/docs/hooks/use-format-number\n */\nexport const useFormatNumber = (\n  value: number,\n  options?: FormatNumberOptions,\n) => {\n  const numberFormat = useNumberFormat(options)\n\n  return numberFormat(value)\n}\n\nexport type UseFormatNumberReturn = ReturnType<typeof useFormatNumber>\n\nexport const useNumberFormat = ({\n  locale,\n  ...options\n}: FormatNumberOptions = {}) => {\n  const { locale: defaultLocale } = useI18n()\n  const memoizedOptions = useRef(options)\n\n  locale ??= defaultLocale\n\n  const numberFormat = useCallback(\n    (value: number, options?: Intl.NumberFormatOptions) => {\n      const formatter = getFormatNumber(locale, {\n        ...memoizedOptions.current,\n        ...options,\n      })\n\n      return formatter.format(value)\n    },\n    [locale],\n  )\n\n  return numberFormat\n}\n\nexport type UseNumberFormatReturn = ReturnType<typeof useNumberFormat>\n"],"mappings":";;;;;AAOA,MAAa,kBAAkB,UAAU,KAAK,aAAa;;;;;;AAgB3D,MAAa,mBACX,OACA,YACG;CAGH,OAFqB,gBAAgB,QAElB,CAAC,MAAM;;AAK5B,MAAa,mBAAmB,EAC9B,QACA,GAAG,YACoB,EAAE,KAAK;CAC9B,MAAM,EAAE,QAAQ,kBAAkB,SAAS;CAC3C,MAAM,kBAAkB,OAAO,QAAQ;CAEvC,WAAW;CAcX,OAZqB,aAClB,OAAe,YAAuC;EAMrD,OALkB,gBAAgB,QAAQ;GACxC,GAAG,gBAAgB;GACnB,GAAG;GACJ,CAEe,CAAC,OAAO,MAAM;IAEhC,CAAC,OAAO,CAGS"}

package/dist/esm/components/grid/grid-item.js

@@ -1,10 +1,7 @@
 "use client";
-
 import { utils_exports } from "../../utils/index.js";
 import { createComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { gridItemStyle } from "./grid-item.style.js";
-
 //#region src/components/grid/grid-item.tsx
 const { PropsContext: GridItemPropsContext, usePropsContext: useGridItemPropsContext, withContext } = createComponent("grid-item", gridItemStyle);
 const GridItem = withContext("div")(void 0, ({ area: gridArea, colEnd: gridColumnEnd, colSpan, colStart: gridColumnStart, rowEnd: gridRowEnd, rowSpan, rowStart: gridRowStart, ...rest }) => ({
@@ -17,7 +14,7 @@ const GridItem = withContext("div")(void 0, ({ area: gridArea, colEnd: gridColum
 	gridRowStart,
 	...rest
 }));
-
 //#endregion
 export { GridItem, GridItemPropsContext, useGridItemPropsContext };
+
 //# sourceMappingURL=grid-item.js.map