@yamada-ui/react 2.0.0-dev-20250626073729 → 2.0.0-dev-20250626191018

package/dist/esm/components/avatar/use-avatar.js

@@ -1,7 +1,8 @@
 "use client";
 
 
-import { utils_exports } from "../../utils/index.js";
+import { handlerAll } from "../../utils/common/function.js";
+import { dataAttr } from "../../utils/common/dom.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import { useCallback, useState } from "react";
 
@@ -21,8 +22,8 @@ const useAvatar = ({ name, src, srcSet, alt, crossOrigin, fallback: fallbackMess
 	const getRootProps = useCallback((props) => ({
 		...rest,
 		...props,
-		"data-fallback": (0, utils_exports.dataAttr)(!!fallbackMessage),
-		"data-loaded": (0, utils_exports.dataAttr)(loaded)
+		"data-fallback": dataAttr(!!fallbackMessage),
+		"data-loaded": dataAttr(loaded)
 	}), [
 		loaded,
 		fallbackMessage,
@@ -38,7 +39,7 @@ const useAvatar = ({ name, src, srcSet, alt, crossOrigin, fallback: fallbackMess
 		hidden: fallback,
 		loading,
 		referrerPolicy,
-		onLoad: (0, utils_exports.handlerAll)(onLoad, () => setLoaded(true))
+		onLoad: handlerAll(onLoad, () => setLoaded(true))
 	}), [
 		src,
 		srcSet,

package/dist/esm/components/avatar/use-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-avatar.js","names":["name: string","getGroupProps: PropGetter","getRootProps: PropGetter","getImageProps: PropGetter<\"img\">","getFallbackProps: PropGetter"],"sources":["../../../../src/components/avatar/use-avatar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useState } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr, handlerAll } from \"../../utils\"\n\nconst defaultFormat = (name: string) => {\n  const names = name.trim().split(\" \")\n  const firstName = names[0] ?? \"\"\n  const lastName = names.length > 1 ? names[names.length - 1] : \"\"\n\n  return firstName && lastName\n    ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n    : firstName.charAt(0)\n}\n\nexport interface UseAvatarProps extends HTMLProps {\n  /**\n   * The name of the person in the avatar.\n   *\n   * - If `src` has loaded, the name will be used as the `alt` attribute of the `img`\n   * - If `src` is not loaded, the name will be used to create the initials\n   */\n  name?: string\n  /**\n   * The image url of the avatar.\n   */\n  src?: HTMLProps<\"img\">[\"src\"]\n  /**\n   * List of sources to use for different screen resolutions.\n   */\n  srcSet?: HTMLProps<\"img\">[\"srcSet\"]\n  /**\n   * The `HTMLImageElement` property `alt`.\n   */\n  alt?: HTMLProps<\"img\">[\"alt\"]\n  /**\n   * The `HTMLImageElement` property `crossOrigin`.\n   */\n  crossOrigin?: HTMLProps<\"img\">[\"crossOrigin\"]\n  /**\n   * The fallback text to display if the image is not provided.\n   */\n  fallback?: ReactNode\n  /**\n   * Function to get the initials to display.\n   */\n  format?: (name: string) => string\n  /**\n   * The avatar icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Defines loading strategy.\n   */\n  loading?: HTMLProps<\"img\">[\"loading\"]\n  /**\n   * Defining which referrer is sent when fetching the resource.\n   *\n   * @default 'no-referrer'\n   */\n  referrerPolicy?: HTMLProps<\"img\">[\"referrerPolicy\"]\n}\n\nexport const useAvatar = ({\n  name,\n  src,\n  srcSet,\n  alt,\n  crossOrigin,\n  fallback: fallbackMessage,\n  format = defaultFormat,\n  icon,\n  loading,\n  referrerPolicy = \"no-referrer\",\n  ...rest\n}: UseAvatarProps = {}) => {\n  const initials = name ? format(name) : undefined\n  const [loaded, setLoaded] = useState<boolean>(false)\n  const fallback = !src || !loaded\n  const { t } = useI18n(\"avatar\")\n\n  const getGroupProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...props,\n      \"data-fallback\": dataAttr(!!fallbackMessage),\n      \"data-loaded\": dataAttr(loaded),\n    }),\n    [loaded, fallbackMessage, rest],\n  )\n\n  const getImageProps: PropGetter<\"img\"> = useCallback(\n    ({ onLoad, ...props } = {}) => ({\n      ...props,\n      src,\n      srcSet,\n      alt: name || alt,\n      crossOrigin,\n      draggable: false,\n      hidden: fallback,\n      loading,\n      referrerPolicy,\n      onLoad: handlerAll(onLoad, () => setLoaded(true)),\n    }),\n    [src, srcSet, alt, crossOrigin, loading, referrerPolicy, fallback, name],\n  )\n\n  const getFallbackProps: PropGetter = useCallback(\n    (props) => ({\n      ...props,\n      \"aria-label\": !fallbackMessage\n        ? name || alt || t(\"Avatar Icon\")\n        : undefined,\n      children: fallbackMessage || initials || icon,\n      hidden: !fallback,\n      role: \"img\",\n    }),\n    [name, initials, fallback, icon, fallbackMessage, alt, t],\n  )\n\n  return {\n    name,\n    loaded,\n    getFallbackProps,\n    getGroupProps,\n    getImageProps,\n    getRootProps,\n  }\n}\n\nexport type UseAvatarReturn = ReturnType<typeof useAvatar>\n"],"mappings":";;;;;;;;AAQA,MAAM,gBAAgB,CAACA,SAAiB;CACtC,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;CACpC,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,WAAW,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,KAAK;AAE9D,QAAO,aAAa,cACb,UAAU,OAAO,EAAE,GAAG,SAAS,OAAO,EAAE,KAC3C,UAAU,OAAO,EAAE;AACxB;AAkDD,MAAa,YAAY,CAAC,EACxB,MACA,KACA,QACA,KACA,aACA,UAAU,iBACV,SAAS,eACT,MACA,SACA,iBAAiB,cACjB,GAAG,MACY,GAAG,CAAE,MAAK;CACzB,MAAM,WAAW,OAAO,OAAO,KAAK;CACpC,MAAM,CAAC,QAAQ,UAAU,GAAG,SAAkB,MAAM;CACpD,MAAM,YAAY,QAAQ;CAC1B,MAAM,EAAE,GAAG,GAAG,QAAQ,SAAS;CAE/B,MAAMC,gBAA4B,YAAY,CAAC,WAAW,EAAE,GAAG,MAAO,IAAG,CAAE,EAAC;CAE5E,MAAMC,eAA2B,YAC/B,CAAC,WAAW;EACV,GAAG;EACH,GAAG;EACH,iBAAiB,8BAAW,gBAAgB;EAC5C,eAAe,4BAAS,OAAO;CAChC,IACD;EAAC;EAAQ;EAAiB;CAAK,EAChC;CAED,MAAMC,gBAAmC,YACvC,CAAC,EAAE,OAAQ,GAAG,OAAO,GAAG,CAAE,OAAM;EAC9B,GAAG;EACH;EACA;EACA,KAAK,QAAQ;EACb;EACA,WAAW;EACX,QAAQ;EACR;EACA;EACA,QAAQ,8BAAW,QAAQ,MAAM,UAAU,KAAK,CAAC;CAClD,IACD;EAAC;EAAK;EAAQ;EAAK;EAAa;EAAS;EAAgB;EAAU;CAAK,EACzE;CAED,MAAMC,mBAA+B,YACnC,CAAC,WAAW;EACV,GAAG;EACH,eAAe,kBACX,QAAQ,OAAO,EAAE,cAAc;EAEnC,UAAU,mBAAmB,YAAY;EACzC,SAAS;EACT,MAAM;CACP,IACD;EAAC;EAAM;EAAU;EAAU;EAAM;EAAiB;EAAK;CAAE,EAC1D;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACD;AACF"}
+{"version":3,"file":"use-avatar.js","names":["name: string","getGroupProps: PropGetter","getRootProps: PropGetter","getImageProps: PropGetter<\"img\">","getFallbackProps: PropGetter"],"sources":["../../../../src/components/avatar/use-avatar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useState } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr, handlerAll } from \"../../utils\"\n\nconst defaultFormat = (name: string) => {\n  const names = name.trim().split(\" \")\n  const firstName = names[0] ?? \"\"\n  const lastName = names.length > 1 ? names[names.length - 1] : \"\"\n\n  return firstName && lastName\n    ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n    : firstName.charAt(0)\n}\n\nexport interface UseAvatarProps extends HTMLProps {\n  /**\n   * The name of the person in the avatar.\n   *\n   * - If `src` has loaded, the name will be used as the `alt` attribute of the `img`\n   * - If `src` is not loaded, the name will be used to create the initials\n   */\n  name?: string\n  /**\n   * The image url of the avatar.\n   */\n  src?: HTMLProps<\"img\">[\"src\"]\n  /**\n   * List of sources to use for different screen resolutions.\n   */\n  srcSet?: HTMLProps<\"img\">[\"srcSet\"]\n  /**\n   * The `HTMLImageElement` property `alt`.\n   */\n  alt?: HTMLProps<\"img\">[\"alt\"]\n  /**\n   * The `HTMLImageElement` property `crossOrigin`.\n   */\n  crossOrigin?: HTMLProps<\"img\">[\"crossOrigin\"]\n  /**\n   * The fallback text to display if the image is not provided.\n   */\n  fallback?: ReactNode\n  /**\n   * Function to get the initials to display.\n   */\n  format?: (name: string) => string\n  /**\n   * The avatar icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Defines loading strategy.\n   */\n  loading?: HTMLProps<\"img\">[\"loading\"]\n  /**\n   * Defining which referrer is sent when fetching the resource.\n   *\n   * @default 'no-referrer'\n   */\n  referrerPolicy?: HTMLProps<\"img\">[\"referrerPolicy\"]\n}\n\nexport const useAvatar = ({\n  name,\n  src,\n  srcSet,\n  alt,\n  crossOrigin,\n  fallback: fallbackMessage,\n  format = defaultFormat,\n  icon,\n  loading,\n  referrerPolicy = \"no-referrer\",\n  ...rest\n}: UseAvatarProps = {}) => {\n  const initials = name ? format(name) : undefined\n  const [loaded, setLoaded] = useState<boolean>(false)\n  const fallback = !src || !loaded\n  const { t } = useI18n(\"avatar\")\n\n  const getGroupProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...props,\n      \"data-fallback\": dataAttr(!!fallbackMessage),\n      \"data-loaded\": dataAttr(loaded),\n    }),\n    [loaded, fallbackMessage, rest],\n  )\n\n  const getImageProps: PropGetter<\"img\"> = useCallback(\n    ({ onLoad, ...props } = {}) => ({\n      ...props,\n      src,\n      srcSet,\n      alt: name || alt,\n      crossOrigin,\n      draggable: false,\n      hidden: fallback,\n      loading,\n      referrerPolicy,\n      onLoad: handlerAll(onLoad, () => setLoaded(true)),\n    }),\n    [src, srcSet, alt, crossOrigin, loading, referrerPolicy, fallback, name],\n  )\n\n  const getFallbackProps: PropGetter = useCallback(\n    (props) => ({\n      ...props,\n      \"aria-label\": !fallbackMessage\n        ? name || alt || t(\"Avatar Icon\")\n        : undefined,\n      children: fallbackMessage || initials || icon,\n      hidden: !fallback,\n      role: \"img\",\n    }),\n    [name, initials, fallback, icon, fallbackMessage, alt, t],\n  )\n\n  return {\n    name,\n    loaded,\n    getFallbackProps,\n    getGroupProps,\n    getImageProps,\n    getRootProps,\n  }\n}\n\nexport type UseAvatarReturn = ReturnType<typeof useAvatar>\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAgB,CAACA,SAAiB;CACtC,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;CACpC,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,WAAW,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,KAAK;AAE9D,QAAO,aAAa,cACb,UAAU,OAAO,EAAE,GAAG,SAAS,OAAO,EAAE,KAC3C,UAAU,OAAO,EAAE;AACxB;AAkDD,MAAa,YAAY,CAAC,EACxB,MACA,KACA,QACA,KACA,aACA,UAAU,iBACV,SAAS,eACT,MACA,SACA,iBAAiB,cACjB,GAAG,MACY,GAAG,CAAE,MAAK;CACzB,MAAM,WAAW,OAAO,OAAO,KAAK;CACpC,MAAM,CAAC,QAAQ,UAAU,GAAG,SAAkB,MAAM;CACpD,MAAM,YAAY,QAAQ;CAC1B,MAAM,EAAE,GAAG,GAAG,QAAQ,SAAS;CAE/B,MAAMC,gBAA4B,YAAY,CAAC,WAAW,EAAE,GAAG,MAAO,IAAG,CAAE,EAAC;CAE5E,MAAMC,eAA2B,YAC/B,CAAC,WAAW;EACV,GAAG;EACH,GAAG;EACH,iBAAiB,WAAW,gBAAgB;EAC5C,eAAe,SAAS,OAAO;CAChC,IACD;EAAC;EAAQ;EAAiB;CAAK,EAChC;CAED,MAAMC,gBAAmC,YACvC,CAAC,EAAE,OAAQ,GAAG,OAAO,GAAG,CAAE,OAAM;EAC9B,GAAG;EACH;EACA;EACA,KAAK,QAAQ;EACb;EACA,WAAW;EACX,QAAQ;EACR;EACA;EACA,QAAQ,WAAW,QAAQ,MAAM,UAAU,KAAK,CAAC;CAClD,IACD;EAAC;EAAK;EAAQ;EAAK;EAAa;EAAS;EAAgB;EAAU;CAAK,EACzE;CAED,MAAMC,mBAA+B,YACnC,CAAC,WAAW;EACV,GAAG;EACH,eAAe,kBACX,QAAQ,OAAO,EAAE,cAAc;EAEnC,UAAU,mBAAmB,YAAY;EACzC,SAAS;EACT,MAAM;CACP,IACD;EAAC;EAAM;EAAU;EAAU;EAAM;EAAiB;EAAK;CAAE,EAC1D;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACD;AACF"}

package/dist/esm/components/bleed/bleed.js

@@ -1,7 +1,7 @@
 "use client";
 
 
-import { utils_exports } from "../../utils/index.js";
+import { calc } from "../../utils/common/calc.js";
 import { varAttr } from "../../core/system/var.js";
 import { createComponent } from "../../core/components/create-component.js";
 import { bleedStyle } from "./bleed.style.js";
@@ -20,10 +20,10 @@ const Bleed = withContext("div")(void 0, ({ block, blockEnd, blockStart, inline,
 	inlineEnd ??= inline;
 	const inlineStartFull = inlineStart === "full";
 	const inlineEndFull = inlineEnd === "full";
-	const marginBlockStart = utils_exports.calc.negate("{block-start}");
-	const marginBlockEnd = utils_exports.calc.negate("{block-end}");
-	const marginInlineStart = inlineStartFull ? "calc(50% - 50vw)" : utils_exports.calc.negate("{inline-start}");
-	const marginInlineEnd = inlineEndFull ? "calc(50% - 50vw)" : utils_exports.calc.negate("{inline-end}");
+	const marginBlockStart = calc.negate("{block-start}");
+	const marginBlockEnd = calc.negate("{block-end}");
+	const marginInlineStart = inlineStartFull ? "calc(50% - 50vw)" : calc.negate("{inline-start}");
+	const marginInlineEnd = inlineEndFull ? "calc(50% - 50vw)" : calc.negate("{inline-end}");
 	return {
 		...rest,
 		"--block-end": varAttr(blockEnd, "spaces"),

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

@@ -1 +1 @@
-{"version":3,"file":"bleed.js","names":[],"sources":["../../../../src/components/bleed/bleed.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { BleedStyle } from \"./bleed.style\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { calc } from \"../../utils\"\nimport { bleedStyle } from \"./bleed.style\"\n\nexport interface BleedProps extends HTMLStyledProps {\n  /**\n   * The CSS `margin-block` property.\n   */\n  block?: CSSProps[\"marginBlock\"]\n  /**\n   * The CSS `margin-block-end` property.\n   */\n  blockEnd?: CSSProps[\"marginBlockEnd\"]\n  /**\n   * The CSS `margin-block-start` property.\n   */\n  blockStart?: CSSProps[\"marginBlockStart\"]\n  /**\n   * The CSS `margin-inline` property.\n   */\n  inline?: \"full\" | CSSProps[\"marginInline\"]\n  /**\n   * The CSS `margin-inline-end` property.\n   */\n  inlineEnd?: \"full\" | CSSProps[\"marginInlineEnd\"]\n  /**\n   * The CSS `margin-inline-start` property.\n   */\n  inlineStart?: \"full\" | CSSProps[\"marginInlineStart\"]\n}\n\nexport const {\n  PropsContext: BleedPropsContext,\n  usePropsContext: useBleedPropsContext,\n  withContext,\n} = createComponent<BleedProps, BleedStyle>(\"bleed\", bleedStyle)\n\n/**\n * `Bleed` is a component used to break an element from the boundaries of its container.\n *\n * @see https://yamada-ui.com/components/bleed\n */\nexport const Bleed = withContext(\"div\")(\n  undefined,\n  ({\n    block,\n    blockEnd,\n    blockStart,\n    inline,\n    inlineEnd,\n    inlineStart,\n    ...rest\n  }) => {\n    blockStart ??= block\n    blockEnd ??= block\n    inlineStart ??= inline\n    inlineEnd ??= inline\n\n    const inlineStartFull = inlineStart === \"full\"\n    const inlineEndFull = inlineEnd === \"full\"\n\n    const marginBlockStart = calc.negate(\"{block-start}\")\n    const marginBlockEnd = calc.negate(\"{block-end}\")\n    const marginInlineStart = inlineStartFull\n      ? \"calc(50% - 50vw)\"\n      : calc.negate(\"{inline-start}\")\n    const marginInlineEnd = inlineEndFull\n      ? \"calc(50% - 50vw)\"\n      : calc.negate(\"{inline-end}\")\n\n    return {\n      ...rest,\n      \"--block-end\": varAttr(blockEnd, \"spaces\"),\n      \"--block-start\": varAttr(blockStart, \"spaces\"),\n      \"--inline-end\": varAttr(inlineEnd, \"spaces\"),\n      \"--inline-start\": varAttr(inlineStart, \"spaces\"),\n      marginBlockEnd,\n      marginBlockStart,\n      marginInlineEnd,\n      marginInlineStart,\n    }\n  },\n)\n"],"mappings":";;;;;;;;;AAmCA,MAAa,EACX,cAAc,mBACd,iBAAiB,sBACjB,aACD,GAAG,gBAAwC,SAAS,WAAW;;;;;;AAOhE,MAAa,QAAQ,YAAY,MAAM,SAErC,CAAC,EACC,OACA,UACA,YACA,QACA,WACA,YACA,GAAG,MACJ,KAAK;AACJ,gBAAe;AACf,cAAa;AACb,iBAAgB;AAChB,eAAc;CAEd,MAAM,kBAAkB,gBAAgB;CACxC,MAAM,gBAAgB,cAAc;CAEpC,MAAM,mBAAmB,mBAAK,OAAO,gBAAgB;CACrD,MAAM,iBAAiB,mBAAK,OAAO,cAAc;CACjD,MAAM,oBAAoB,kBACtB,qBACA,mBAAK,OAAO,iBAAiB;CACjC,MAAM,kBAAkB,gBACpB,qBACA,mBAAK,OAAO,eAAe;AAE/B,QAAO;EACL,GAAG;EACH,eAAe,QAAQ,UAAU,SAAS;EAC1C,iBAAiB,QAAQ,YAAY,SAAS;EAC9C,gBAAgB,QAAQ,WAAW,SAAS;EAC5C,kBAAkB,QAAQ,aAAa,SAAS;EAChD;EACA;EACA;EACA;CACD;AACF,EACF"}
+{"version":3,"file":"bleed.js","names":[],"sources":["../../../../src/components/bleed/bleed.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { BleedStyle } from \"./bleed.style\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { calc } from \"../../utils\"\nimport { bleedStyle } from \"./bleed.style\"\n\nexport interface BleedProps extends HTMLStyledProps {\n  /**\n   * The CSS `margin-block` property.\n   */\n  block?: CSSProps[\"marginBlock\"]\n  /**\n   * The CSS `margin-block-end` property.\n   */\n  blockEnd?: CSSProps[\"marginBlockEnd\"]\n  /**\n   * The CSS `margin-block-start` property.\n   */\n  blockStart?: CSSProps[\"marginBlockStart\"]\n  /**\n   * The CSS `margin-inline` property.\n   */\n  inline?: \"full\" | CSSProps[\"marginInline\"]\n  /**\n   * The CSS `margin-inline-end` property.\n   */\n  inlineEnd?: \"full\" | CSSProps[\"marginInlineEnd\"]\n  /**\n   * The CSS `margin-inline-start` property.\n   */\n  inlineStart?: \"full\" | CSSProps[\"marginInlineStart\"]\n}\n\nexport const {\n  PropsContext: BleedPropsContext,\n  usePropsContext: useBleedPropsContext,\n  withContext,\n} = createComponent<BleedProps, BleedStyle>(\"bleed\", bleedStyle)\n\n/**\n * `Bleed` is a component used to break an element from the boundaries of its container.\n *\n * @see https://yamada-ui.com/components/bleed\n */\nexport const Bleed = withContext(\"div\")(\n  undefined,\n  ({\n    block,\n    blockEnd,\n    blockStart,\n    inline,\n    inlineEnd,\n    inlineStart,\n    ...rest\n  }) => {\n    blockStart ??= block\n    blockEnd ??= block\n    inlineStart ??= inline\n    inlineEnd ??= inline\n\n    const inlineStartFull = inlineStart === \"full\"\n    const inlineEndFull = inlineEnd === \"full\"\n\n    const marginBlockStart = calc.negate(\"{block-start}\")\n    const marginBlockEnd = calc.negate(\"{block-end}\")\n    const marginInlineStart = inlineStartFull\n      ? \"calc(50% - 50vw)\"\n      : calc.negate(\"{inline-start}\")\n    const marginInlineEnd = inlineEndFull\n      ? \"calc(50% - 50vw)\"\n      : calc.negate(\"{inline-end}\")\n\n    return {\n      ...rest,\n      \"--block-end\": varAttr(blockEnd, \"spaces\"),\n      \"--block-start\": varAttr(blockStart, \"spaces\"),\n      \"--inline-end\": varAttr(inlineEnd, \"spaces\"),\n      \"--inline-start\": varAttr(inlineStart, \"spaces\"),\n      marginBlockEnd,\n      marginBlockStart,\n      marginInlineEnd,\n      marginInlineStart,\n    }\n  },\n)\n"],"mappings":";;;;;;;;;AAmCA,MAAa,EACX,cAAc,mBACd,iBAAiB,sBACjB,aACD,GAAG,gBAAwC,SAAS,WAAW;;;;;;AAOhE,MAAa,QAAQ,YAAY,MAAM,SAErC,CAAC,EACC,OACA,UACA,YACA,QACA,WACA,YACA,GAAG,MACJ,KAAK;AACJ,gBAAe;AACf,cAAa;AACb,iBAAgB;AAChB,eAAc;CAEd,MAAM,kBAAkB,gBAAgB;CACxC,MAAM,gBAAgB,cAAc;CAEpC,MAAM,mBAAmB,KAAK,OAAO,gBAAgB;CACrD,MAAM,iBAAiB,KAAK,OAAO,cAAc;CACjD,MAAM,oBAAoB,kBACtB,qBACA,KAAK,OAAO,iBAAiB;CACjC,MAAM,kBAAkB,gBACpB,qBACA,KAAK,OAAO,eAAe;AAE/B,QAAO;EACL,GAAG;EACH,eAAe,QAAQ,UAAU,SAAS;EAC1C,iBAAiB,QAAQ,YAAY,SAAS;EAC9C,gBAAgB,QAAQ,WAAW,SAAS;EAC5C,kBAAkB,QAAQ,aAAa,SAAS;EAChD;EACA;EACA;EACA;CACD;AACF,EACF"}

package/dist/esm/components/breadcrumb/use-breadcrumb.js

@@ -2,7 +2,7 @@
 
 
 import { getValidChildren } from "../../utils/children.js";
-import { utils_exports } from "../../utils/index.js";
+import { runIfFn } from "../../utils/common/function.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import { cloneElement, useCallback, useMemo } from "react";
 
@@ -22,7 +22,7 @@ const useBreadcrumb = ({ children, ellipsis, endBoundaries = 0, items = [], link
 	}, [link]);
 	const renderEllipsis = useCallback((items$1) => {
 		if (!ellipsis) return null;
-		return (0, utils_exports.runIfFn)(ellipsis, { items: items$1 });
+		return runIfFn(ellipsis, { items: items$1 });
 	}, [ellipsis]);
 	const splitItems = useCallback((items$1) => {
 		const length$1 = items$1.length;

package/dist/esm/components/breadcrumb/use-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-breadcrumb.js","names":["items: BreadcrumbItem[]","rest","length","items","getRootProps: PropGetter<\"nav\">","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>","getEllipsisProps: PropGetter<\"svg\">"],"sources":["../../../../src/components/breadcrumb/use-breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { getValidChildren, runIfFn } from \"../../utils\"\n\ninterface BreadcrumbItem extends HTMLProps<\"a\"> {\n  currentPage?: boolean\n  label?: ReactNode\n}\n\nexport interface UseBreadcrumbProps extends HTMLProps<\"nav\"> {\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?: ReactNodeOrFunction<{ items: BreadcrumbItem[] }>\n  /**\n   * Number of elements visible on the end(right) edges.\n   *\n   * @default 0\n   */\n  endBoundaries?: number\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbItem[]\n  /**\n   * The component to be used for the link.\n   */\n  link?: ReactElement<any>\n  /**\n   * Number of elements visible on the start(left) edges.\n   *\n   * @default 0\n   */\n  startBoundaries?: number\n}\n\nexport const useBreadcrumb = ({\n  children,\n  ellipsis,\n  endBoundaries = 0,\n  items = [],\n  link,\n  startBoundaries = 0,\n  ...rest\n}: UseBreadcrumbProps = {}) => {\n  const validChildren = getValidChildren(children)\n  const length = validChildren.length || items.length\n  const { t } = useI18n(\"breadcrumb\")\n\n  const hasBoundaries =\n    startBoundaries + endBoundaries > 0 &&\n    length > startBoundaries + endBoundaries\n\n  const renderLink = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!link) return []\n\n      return items.map(({ label, ...rest }) =>\n        cloneElement<any>(link, { ...link.props, children: label, ...rest }),\n      )\n    },\n    [link],\n  )\n\n  const renderEllipsis = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!ellipsis) return null\n\n      return runIfFn(ellipsis, { items })\n    },\n    [ellipsis],\n  )\n\n  const splitItems = useCallback(\n    (items: BreadcrumbItem[]) => {\n      const length = items.length\n      const firstItems = items.slice(0, startBoundaries)\n      const ellipsisItems = items.slice(startBoundaries, length - endBoundaries)\n      const lastItems = items.slice(length - endBoundaries)\n\n      return [firstItems, ellipsisItems, lastItems] as const\n    },\n    [startBoundaries, endBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    const hasChildren = !!validChildren.length\n\n    if (hasChildren) {\n      return validChildren\n    } else if (hasBoundaries) {\n      const [firstItems, ellipsisItems, lastItems] = splitItems(items)\n\n      return [\n        ...renderLink(firstItems),\n        renderEllipsis(ellipsisItems),\n        ...renderLink(lastItems),\n      ]\n    } else {\n      return renderLink(items)\n    }\n  }, [\n    validChildren,\n    items,\n    hasBoundaries,\n    renderEllipsis,\n    renderLink,\n    splitItems,\n  ])\n\n  const getRootProps: PropGetter<\"nav\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Breadcrumb\"),\n      ...rest,\n      ...props,\n    }),\n    [rest, t],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => ({ ...props }),\n    [],\n  )\n\n  const getLinkProps: PropGetter<\"a\", { currentPage?: boolean }> = useCallback(\n    ({ href, currentPage, ...props } = {}) => ({\n      href: !currentPage ? href : undefined,\n      \"aria-current\": currentPage ? \"page\" : undefined,\n      ...props,\n    }),\n    [],\n  )\n\n  const getEllipsisProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Ellipsis\"),\n      role: \"presentation\",\n      ...props,\n    }),\n    [t],\n  )\n\n  return {\n    children: cloneChildren,\n    getEllipsisProps,\n    getLinkProps,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>\n"],"mappings":";;;;;;;;;AAyCA,MAAa,gBAAgB,CAAC,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,CAAE,GACV,MACA,kBAAkB,EAClB,GAAG,MACgB,GAAG,CAAE,MAAK;CAC7B,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,GAAG,GAAG,QAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,aAAa,YACjB,CAACA,YAA4B;AAC3B,OAAK,KAAM,QAAO,CAAE;AAEpB,SAAO,QAAM,IAAI,CAAC,EAAE,MAAO,GAAGC,QAAM,KAClC,aAAkB,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;EAAM,EAAC,CACrE;CACF,GACD,CAAC,IAAK,EACP;CAED,MAAM,iBAAiB,YACrB,CAACD,YAA4B;AAC3B,OAAK,SAAU,QAAO;AAEtB,SAAO,2BAAQ,UAAU,EAAE,eAAO,EAAC;CACpC,GACD,CAAC,QAAS,EACX;CAED,MAAM,aAAa,YACjB,CAACA,YAA4B;EAC3B,MAAME,WAASC,QAAM;EACrB,MAAM,aAAa,QAAM,MAAM,GAAG,gBAAgB;EAClD,MAAM,gBAAgB,QAAM,MAAM,iBAAiBD,WAAS,cAAc;EAC1E,MAAM,YAAY,QAAM,MAAMA,WAAS,cAAc;AAErD,SAAO;GAAC;GAAY;GAAe;EAAU;CAC9C,GACD,CAAC,iBAAiB,aAAc,EACjC;CAED,MAAM,gBAAgB,QAAQ,MAAM;EAClC,MAAM,gBAAgB,cAAc;AAEpC,MAAI,YACF,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,UAAU,GAAG,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;GACzB;EACF,MACC,QAAO,WAAW,MAAM;CAE3B,GAAE;EACD;EACA;EACA;EACA;EACA;EACA;CACD,EAAC;CAEF,MAAME,eAAkC,YACtC,CAAC,WAAW;EACV,cAAc,EAAE,aAAa;EAC7B,GAAG;EACH,GAAG;CACJ,IACD,CAAC,MAAM,CAAE,EACV;CAED,MAAMC,eAAiC,YACrC,CAAC,WAAW,EAAE,GAAG,MAAO,IACxB,CAAE,EACH;CAED,MAAMC,eAA2D,YAC/D,CAAC,EAAE,MAAM,YAAa,GAAG,OAAO,GAAG,CAAE,OAAM;EACzC,OAAO,cAAc;EACrB,gBAAgB,cAAc;EAC9B,GAAG;CACJ,IACD,CAAE,EACH;CAED,MAAMC,mBAAsC,YAC1C,CAAC,WAAW;EACV,cAAc,EAAE,WAAW;EAC3B,MAAM;EACN,GAAG;CACJ,IACD,CAAC,CAAE,EACJ;AAED,QAAO;EACL,UAAU;EACV;EACA;EACA;EACA;CACD;AACF"}
+{"version":3,"file":"use-breadcrumb.js","names":["items: BreadcrumbItem[]","rest","length","items","getRootProps: PropGetter<\"nav\">","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>","getEllipsisProps: PropGetter<\"svg\">"],"sources":["../../../../src/components/breadcrumb/use-breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { getValidChildren, runIfFn } from \"../../utils\"\n\ninterface BreadcrumbItem extends HTMLProps<\"a\"> {\n  currentPage?: boolean\n  label?: ReactNode\n}\n\nexport interface UseBreadcrumbProps extends HTMLProps<\"nav\"> {\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?: ReactNodeOrFunction<{ items: BreadcrumbItem[] }>\n  /**\n   * Number of elements visible on the end(right) edges.\n   *\n   * @default 0\n   */\n  endBoundaries?: number\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbItem[]\n  /**\n   * The component to be used for the link.\n   */\n  link?: ReactElement<any>\n  /**\n   * Number of elements visible on the start(left) edges.\n   *\n   * @default 0\n   */\n  startBoundaries?: number\n}\n\nexport const useBreadcrumb = ({\n  children,\n  ellipsis,\n  endBoundaries = 0,\n  items = [],\n  link,\n  startBoundaries = 0,\n  ...rest\n}: UseBreadcrumbProps = {}) => {\n  const validChildren = getValidChildren(children)\n  const length = validChildren.length || items.length\n  const { t } = useI18n(\"breadcrumb\")\n\n  const hasBoundaries =\n    startBoundaries + endBoundaries > 0 &&\n    length > startBoundaries + endBoundaries\n\n  const renderLink = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!link) return []\n\n      return items.map(({ label, ...rest }) =>\n        cloneElement<any>(link, { ...link.props, children: label, ...rest }),\n      )\n    },\n    [link],\n  )\n\n  const renderEllipsis = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!ellipsis) return null\n\n      return runIfFn(ellipsis, { items })\n    },\n    [ellipsis],\n  )\n\n  const splitItems = useCallback(\n    (items: BreadcrumbItem[]) => {\n      const length = items.length\n      const firstItems = items.slice(0, startBoundaries)\n      const ellipsisItems = items.slice(startBoundaries, length - endBoundaries)\n      const lastItems = items.slice(length - endBoundaries)\n\n      return [firstItems, ellipsisItems, lastItems] as const\n    },\n    [startBoundaries, endBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    const hasChildren = !!validChildren.length\n\n    if (hasChildren) {\n      return validChildren\n    } else if (hasBoundaries) {\n      const [firstItems, ellipsisItems, lastItems] = splitItems(items)\n\n      return [\n        ...renderLink(firstItems),\n        renderEllipsis(ellipsisItems),\n        ...renderLink(lastItems),\n      ]\n    } else {\n      return renderLink(items)\n    }\n  }, [\n    validChildren,\n    items,\n    hasBoundaries,\n    renderEllipsis,\n    renderLink,\n    splitItems,\n  ])\n\n  const getRootProps: PropGetter<\"nav\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Breadcrumb\"),\n      ...rest,\n      ...props,\n    }),\n    [rest, t],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => ({ ...props }),\n    [],\n  )\n\n  const getLinkProps: PropGetter<\"a\", { currentPage?: boolean }> = useCallback(\n    ({ href, currentPage, ...props } = {}) => ({\n      href: !currentPage ? href : undefined,\n      \"aria-current\": currentPage ? \"page\" : undefined,\n      ...props,\n    }),\n    [],\n  )\n\n  const getEllipsisProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Ellipsis\"),\n      role: \"presentation\",\n      ...props,\n    }),\n    [t],\n  )\n\n  return {\n    children: cloneChildren,\n    getEllipsisProps,\n    getLinkProps,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>\n"],"mappings":";;;;;;;;;AAyCA,MAAa,gBAAgB,CAAC,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,CAAE,GACV,MACA,kBAAkB,EAClB,GAAG,MACgB,GAAG,CAAE,MAAK;CAC7B,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,GAAG,GAAG,QAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,aAAa,YACjB,CAACA,YAA4B;AAC3B,OAAK,KAAM,QAAO,CAAE;AAEpB,SAAO,QAAM,IAAI,CAAC,EAAE,MAAO,GAAGC,QAAM,KAClC,aAAkB,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;EAAM,EAAC,CACrE;CACF,GACD,CAAC,IAAK,EACP;CAED,MAAM,iBAAiB,YACrB,CAACD,YAA4B;AAC3B,OAAK,SAAU,QAAO;AAEtB,SAAO,QAAQ,UAAU,EAAE,eAAO,EAAC;CACpC,GACD,CAAC,QAAS,EACX;CAED,MAAM,aAAa,YACjB,CAACA,YAA4B;EAC3B,MAAME,WAASC,QAAM;EACrB,MAAM,aAAa,QAAM,MAAM,GAAG,gBAAgB;EAClD,MAAM,gBAAgB,QAAM,MAAM,iBAAiBD,WAAS,cAAc;EAC1E,MAAM,YAAY,QAAM,MAAMA,WAAS,cAAc;AAErD,SAAO;GAAC;GAAY;GAAe;EAAU;CAC9C,GACD,CAAC,iBAAiB,aAAc,EACjC;CAED,MAAM,gBAAgB,QAAQ,MAAM;EAClC,MAAM,gBAAgB,cAAc;AAEpC,MAAI,YACF,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,UAAU,GAAG,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;GACzB;EACF,MACC,QAAO,WAAW,MAAM;CAE3B,GAAE;EACD;EACA;EACA;EACA;EACA;EACA;CACD,EAAC;CAEF,MAAME,eAAkC,YACtC,CAAC,WAAW;EACV,cAAc,EAAE,aAAa;EAC7B,GAAG;EACH,GAAG;CACJ,IACD,CAAC,MAAM,CAAE,EACV;CAED,MAAMC,eAAiC,YACrC,CAAC,WAAW,EAAE,GAAG,MAAO,IACxB,CAAE,EACH;CAED,MAAMC,eAA2D,YAC/D,CAAC,EAAE,MAAM,YAAa,GAAG,OAAO,GAAG,CAAE,OAAM;EACzC,OAAO,cAAc;EACrB,gBAAgB,cAAc;EAC9B,GAAG;CACJ,IACD,CAAE,EACH;CAED,MAAMC,mBAAsC,YAC1C,CAAC,WAAW;EACV,cAAc,EAAE,WAAW;EAC3B,MAAM;EACN,GAAG;CACJ,IACD,CAAC,CAAE,EACJ;AAED,QAAO;EACL,UAAU;EACV;EACA;EACA;EACA;CACD;AACF"}

package/dist/esm/components/button/button.js

@@ -3,7 +3,8 @@
 
 import { createContext } from "../../utils/context.js";
 import { mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { dataAttr } from "../../utils/common/dom.js";
+import { bem } from "../../utils/common/string.js";
 import { mergeCSS } from "../../core/css/merge-css.js";
 import { styled } from "../../core/system/factory.js";
 import { getClassName } from "../../core/components/utils.js";
@@ -62,8 +63,8 @@ const Button = withContext(({ ref, as, active, children, disabled, disableRipple
 			ref: mergeRefs(ref, buttonRef),
 			as,
 			type,
-			"data-active": (0, utils_exports.dataAttr)(active),
-			"data-loading": (0, utils_exports.dataAttr)(loading),
+			"data-active": dataAttr(active),
+			"data-loading": dataAttr(loading),
 			disabled: trulyDisabled,
 			...rest,
 			onClick,
@@ -94,7 +95,7 @@ const ButtonContent = component(({ children }) => {
 	] });
 }, {
 	name: "ButtonContent",
-	className: getClassName((0, utils_exports.bem)("button", "content"))
+	className: getClassName(bem("button", "content"))
 })();
 const ButtonLoading = component((props) => {
 	const { loadingIcon, loadingMessage } = useButtonContext();
@@ -115,15 +116,15 @@ const ButtonLoading = component((props) => {
 	return null;
 }, {
 	name: "ButtonLoading",
-	className: getClassName((0, utils_exports.bem)("button", "loading"))
+	className: getClassName(bem("button", "loading"))
 })();
 const ButtonStartLoading = component(ButtonLoading, {
 	name: "ButtonStartLoading",
-	className: getClassName((0, utils_exports.bem)("button", "loading", "start"))
+	className: getClassName(bem("button", "loading", "start"))
 })();
 const ButtonEndLoading = component(ButtonLoading, {
 	name: "ButtonEndLoading",
-	className: getClassName((0, utils_exports.bem)("button", "loading", "end"))
+	className: getClassName(bem("button", "loading", "end"))
 })();
 const ButtonIcon = component(({ children,...rest }) => {
 	if (isValidElement(children)) return cloneElement(children, {
@@ -135,15 +136,15 @@ const ButtonIcon = component(({ children,...rest }) => {
 	return Children.count(children) > 1 ? Children.only(null) : null;
 }, {
 	name: "ButtonIcon",
-	className: getClassName((0, utils_exports.bem)("button", "icon"))
+	className: getClassName(bem("button", "icon"))
 })();
 const ButtonStartIcon = component(ButtonIcon, {
 	name: "ButtonStartIcon",
-	className: getClassName((0, utils_exports.bem)("button", "icon", "start"))
+	className: getClassName(bem("button", "icon", "start"))
 })();
 const ButtonEndIcon = component(ButtonIcon, {
 	name: "ButtonEndIcon",
-	className: getClassName((0, utils_exports.bem)("button", "icon", "end"))
+	className: getClassName(bem("button", "icon", "end"))
 })();
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["value?: ElementType","node: HTMLElement | null"],"sources":["../../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ElementType, ReactNode } from \"react\"\nimport type {\n  CSSObject,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Loading } from \"../loading\"\nimport type { ButtonStyle } from \"./button.style\"\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\"\nimport { createComponent, getClassName, mergeCSS, styled } from \"../../core\"\nimport { bem, createContext, dataAttr, mergeRefs } from \"../../utils\"\nimport { getLoadingComponent, isLoadingScheme } from \"../loading\"\nimport { Ripple, useRipple } from \"../ripple\"\nimport { buttonStyle } from \"./button.style\"\n\ninterface ButtonContext\n  extends Pick<\n    ButtonProps,\n    \"endIcon\" | \"iconProps\" | \"loadingIcon\" | \"loadingMessage\" | \"startIcon\"\n  > {}\n\nconst [ButtonContext, useButtonContext] = createContext<ButtonContext>({\n  name: \"ButtonContext\",\n})\n\nconst useButtonType = (value?: ElementType) => {\n  const buttonRef = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) buttonRef.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = buttonRef.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n\nexport interface ButtonProps\n  extends HTMLStyledProps<\"button\">,\n    ThemeProps<ButtonStyle> {\n  /**\n   * The type of button. Accepts `button`, `reset`, or `submit`.\n   *\n   * @default 'button'\n   */\n  type?: HTMLProps<\"button\">[\"type\"]\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * The icon to display at the end side of the button.\n   */\n  endIcon?: ReactNode\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * The icon to display when the button is loading.\n   *\n   * @default 'oval'\n   */\n  loadingIcon?: Loading.Scheme | ReactNode\n  /**\n   * The message to display when the button is loading.\n   */\n  loadingMessage?: ReactNode\n  /**\n   * The placement of the loading indicator. Accepts `start` or `end`.\n   *\n   * @default 'start'\n   */\n  loadingPlacement?: \"end\" | \"start\"\n  /**\n   * The icon to display at the start side of the button.\n   */\n  startIcon?: ReactNode\n  /**\n   * The props of the icon element.\n   */\n  iconProps?: ButtonIconProps\n  /**\n   * The props of the loading icon element.\n   */\n  loadingProps?: ButtonLoadingProps\n}\n\nexport const {\n  component,\n  PropsContext: ButtonPropsContext,\n  usePropsContext: useButtonPropsContext,\n  withContext,\n} = createComponent<ButtonProps, ButtonStyle>(\"button\", buttonStyle)\n\n/**\n * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.\n *\n * @see https://yamada-ui.com/components/button\n */\nexport const Button = withContext(\n  ({\n    ref,\n    as,\n    active,\n    children,\n    disabled,\n    disableRipple,\n    endIcon = null,\n    loading,\n    loadingIcon = \"oval\",\n    loadingMessage,\n    loadingPlacement = \"start\",\n    startIcon = null,\n    iconProps,\n    loadingProps,\n    ...rest\n  }) => {\n    const trulyDisabled = disabled || loading\n    const { ref: buttonRef, type } = useButtonType(as)\n    const { onClick, ...rippleProps } = useRipple({\n      ...rest,\n      disabled: disableRipple || trulyDisabled,\n    })\n    const startLoading = loading && loadingPlacement === \"start\"\n    const endLoading = loading && loadingPlacement === \"end\"\n\n    const context = useMemo(\n      () => ({ endIcon, loadingIcon, loadingMessage, startIcon, iconProps }),\n      [loadingIcon, loadingMessage, startIcon, endIcon, iconProps],\n    )\n\n    return (\n      <ButtonContext.Provider value={context}>\n        <styled.button\n          ref={mergeRefs(ref, buttonRef)}\n          as={as}\n          type={type}\n          data-active={dataAttr(active)}\n          data-loading={dataAttr(loading)}\n          disabled={trulyDisabled}\n          {...rest}\n          onClick={onClick}\n        >\n          {startLoading ? <ButtonStartLoading {...loadingProps} /> : null}\n\n          {loading ? (\n            loadingMessage || (\n              <styled.span opacity={0}>\n                <ButtonContent>{children}</ButtonContent>\n              </styled.span>\n            )\n          ) : (\n            <ButtonContent>{children}</ButtonContent>\n          )}\n\n          {endLoading ? <ButtonEndLoading {...loadingProps} /> : null}\n\n          <Ripple {...rippleProps} />\n        </styled.button>\n      </ButtonContext.Provider>\n    )\n  },\n)()\n\nconst ButtonContent = component(\n  ({ children }) => {\n    const { endIcon, startIcon, iconProps } = useButtonContext()\n\n    return (\n      <>\n        {startIcon ? (\n          <ButtonStartIcon {...iconProps}>{startIcon}</ButtonStartIcon>\n        ) : null}\n        {children}\n        {endIcon ? (\n          <ButtonEndIcon {...iconProps}>{endIcon}</ButtonEndIcon>\n        ) : null}\n      </>\n    )\n  },\n  { name: \"ButtonContent\", className: getClassName(bem(\"button\", \"content\")) },\n)()\n\ninterface ButtonLoadingProps extends HTMLStyledProps<\"svg\"> {}\n\nconst ButtonLoading = component<\"svg\", ButtonLoadingProps>(\n  (props) => {\n    const { loadingIcon, loadingMessage } = useButtonContext()\n\n    const css = useMemo<CSSObject>(\n      () => ({\n        position: loadingMessage ? \"relative\" : \"absolute\",\n      }),\n      [loadingMessage],\n    )\n\n    if (isLoadingScheme(loadingIcon)) {\n      const Component = getLoadingComponent(loadingIcon)\n\n      return (\n        <Component\n          color=\"currentColor\"\n          {...props}\n          css={mergeCSS(css, props.css)}\n        />\n      )\n    }\n\n    if (isValidElement<HTMLStyledProps<\"svg\">>(loadingIcon))\n      return cloneElement(loadingIcon, {\n        ...props,\n        ...loadingIcon.props,\n        css: mergeCSS(css, props.css, loadingIcon.props.css),\n      })\n\n    return null\n  },\n  { name: \"ButtonLoading\", className: getClassName(bem(\"button\", \"loading\")) },\n)()\n\nconst ButtonStartLoading = component<\"svg\", ButtonLoadingProps>(ButtonLoading, {\n  name: \"ButtonStartLoading\",\n  className: getClassName(bem(\"button\", \"loading\", \"start\")),\n})()\n\nconst ButtonEndLoading = component<\"svg\", ButtonLoadingProps>(ButtonLoading, {\n  name: \"ButtonEndLoading\",\n  className: getClassName(bem(\"button\", \"loading\", \"end\")),\n})()\n\ninterface ButtonIconProps extends HTMLStyledProps<\"svg\"> {}\n\nconst ButtonIcon = component<\"svg\", ButtonIconProps>(\n  ({ children, ...rest }) => {\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(children, {\n        \"aria-hidden\": true,\n        role: \"img\",\n        ...rest,\n        ...children.props,\n      })\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  { name: \"ButtonIcon\", className: getClassName(bem(\"button\", \"icon\")) },\n)()\n\nconst ButtonStartIcon = component<\"svg\", ButtonIconProps>(ButtonIcon, {\n  name: \"ButtonStartIcon\",\n  className: getClassName(bem(\"button\", \"icon\", \"start\")),\n})()\n\nconst ButtonEndIcon = component<\"svg\", ButtonIconProps>(ButtonIcon, {\n  name: \"ButtonEndIcon\",\n  className: getClassName(bem(\"button\", \"icon\", \"end\")),\n})()\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":["value?: ElementType","node: HTMLElement | null"],"sources":["../../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ElementType, ReactNode } from \"react\"\nimport type {\n  CSSObject,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Loading } from \"../loading\"\nimport type { ButtonStyle } from \"./button.style\"\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\"\nimport { createComponent, getClassName, mergeCSS, styled } from \"../../core\"\nimport { bem, createContext, dataAttr, mergeRefs } from \"../../utils\"\nimport { getLoadingComponent, isLoadingScheme } from \"../loading\"\nimport { Ripple, useRipple } from \"../ripple\"\nimport { buttonStyle } from \"./button.style\"\n\ninterface ButtonContext\n  extends Pick<\n    ButtonProps,\n    \"endIcon\" | \"iconProps\" | \"loadingIcon\" | \"loadingMessage\" | \"startIcon\"\n  > {}\n\nconst [ButtonContext, useButtonContext] = createContext<ButtonContext>({\n  name: \"ButtonContext\",\n})\n\nconst useButtonType = (value?: ElementType) => {\n  const buttonRef = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) buttonRef.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = buttonRef.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n\nexport interface ButtonProps\n  extends HTMLStyledProps<\"button\">,\n    ThemeProps<ButtonStyle> {\n  /**\n   * The type of button. Accepts `button`, `reset`, or `submit`.\n   *\n   * @default 'button'\n   */\n  type?: HTMLProps<\"button\">[\"type\"]\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * The icon to display at the end side of the button.\n   */\n  endIcon?: ReactNode\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * The icon to display when the button is loading.\n   *\n   * @default 'oval'\n   */\n  loadingIcon?: Loading.Scheme | ReactNode\n  /**\n   * The message to display when the button is loading.\n   */\n  loadingMessage?: ReactNode\n  /**\n   * The placement of the loading indicator. Accepts `start` or `end`.\n   *\n   * @default 'start'\n   */\n  loadingPlacement?: \"end\" | \"start\"\n  /**\n   * The icon to display at the start side of the button.\n   */\n  startIcon?: ReactNode\n  /**\n   * The props of the icon element.\n   */\n  iconProps?: ButtonIconProps\n  /**\n   * The props of the loading icon element.\n   */\n  loadingProps?: ButtonLoadingProps\n}\n\nexport const {\n  component,\n  PropsContext: ButtonPropsContext,\n  usePropsContext: useButtonPropsContext,\n  withContext,\n} = createComponent<ButtonProps, ButtonStyle>(\"button\", buttonStyle)\n\n/**\n * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.\n *\n * @see https://yamada-ui.com/components/button\n */\nexport const Button = withContext(\n  ({\n    ref,\n    as,\n    active,\n    children,\n    disabled,\n    disableRipple,\n    endIcon = null,\n    loading,\n    loadingIcon = \"oval\",\n    loadingMessage,\n    loadingPlacement = \"start\",\n    startIcon = null,\n    iconProps,\n    loadingProps,\n    ...rest\n  }) => {\n    const trulyDisabled = disabled || loading\n    const { ref: buttonRef, type } = useButtonType(as)\n    const { onClick, ...rippleProps } = useRipple({\n      ...rest,\n      disabled: disableRipple || trulyDisabled,\n    })\n    const startLoading = loading && loadingPlacement === \"start\"\n    const endLoading = loading && loadingPlacement === \"end\"\n\n    const context = useMemo(\n      () => ({ endIcon, loadingIcon, loadingMessage, startIcon, iconProps }),\n      [loadingIcon, loadingMessage, startIcon, endIcon, iconProps],\n    )\n\n    return (\n      <ButtonContext.Provider value={context}>\n        <styled.button\n          ref={mergeRefs(ref, buttonRef)}\n          as={as}\n          type={type}\n          data-active={dataAttr(active)}\n          data-loading={dataAttr(loading)}\n          disabled={trulyDisabled}\n          {...rest}\n          onClick={onClick}\n        >\n          {startLoading ? <ButtonStartLoading {...loadingProps} /> : null}\n\n          {loading ? (\n            loadingMessage || (\n              <styled.span opacity={0}>\n                <ButtonContent>{children}</ButtonContent>\n              </styled.span>\n            )\n          ) : (\n            <ButtonContent>{children}</ButtonContent>\n          )}\n\n          {endLoading ? <ButtonEndLoading {...loadingProps} /> : null}\n\n          <Ripple {...rippleProps} />\n        </styled.button>\n      </ButtonContext.Provider>\n    )\n  },\n)()\n\nconst ButtonContent = component(\n  ({ children }) => {\n    const { endIcon, startIcon, iconProps } = useButtonContext()\n\n    return (\n      <>\n        {startIcon ? (\n          <ButtonStartIcon {...iconProps}>{startIcon}</ButtonStartIcon>\n        ) : null}\n        {children}\n        {endIcon ? (\n          <ButtonEndIcon {...iconProps}>{endIcon}</ButtonEndIcon>\n        ) : null}\n      </>\n    )\n  },\n  { name: \"ButtonContent\", className: getClassName(bem(\"button\", \"content\")) },\n)()\n\ninterface ButtonLoadingProps extends HTMLStyledProps<\"svg\"> {}\n\nconst ButtonLoading = component<\"svg\", ButtonLoadingProps>(\n  (props) => {\n    const { loadingIcon, loadingMessage } = useButtonContext()\n\n    const css = useMemo<CSSObject>(\n      () => ({\n        position: loadingMessage ? \"relative\" : \"absolute\",\n      }),\n      [loadingMessage],\n    )\n\n    if (isLoadingScheme(loadingIcon)) {\n      const Component = getLoadingComponent(loadingIcon)\n\n      return (\n        <Component\n          color=\"currentColor\"\n          {...props}\n          css={mergeCSS(css, props.css)}\n        />\n      )\n    }\n\n    if (isValidElement<HTMLStyledProps<\"svg\">>(loadingIcon))\n      return cloneElement(loadingIcon, {\n        ...props,\n        ...loadingIcon.props,\n        css: mergeCSS(css, props.css, loadingIcon.props.css),\n      })\n\n    return null\n  },\n  { name: \"ButtonLoading\", className: getClassName(bem(\"button\", \"loading\")) },\n)()\n\nconst ButtonStartLoading = component<\"svg\", ButtonLoadingProps>(ButtonLoading, {\n  name: \"ButtonStartLoading\",\n  className: getClassName(bem(\"button\", \"loading\", \"start\")),\n})()\n\nconst ButtonEndLoading = component<\"svg\", ButtonLoadingProps>(ButtonLoading, {\n  name: \"ButtonEndLoading\",\n  className: getClassName(bem(\"button\", \"loading\", \"end\")),\n})()\n\ninterface ButtonIconProps extends HTMLStyledProps<\"svg\"> {}\n\nconst ButtonIcon = component<\"svg\", ButtonIconProps>(\n  ({ children, ...rest }) => {\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(children, {\n        \"aria-hidden\": true,\n        role: \"img\",\n        ...rest,\n        ...children.props,\n      })\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  { name: \"ButtonIcon\", className: getClassName(bem(\"button\", \"icon\")) },\n)()\n\nconst ButtonStartIcon = component<\"svg\", ButtonIconProps>(ButtonIcon, {\n  name: \"ButtonStartIcon\",\n  className: getClassName(bem(\"button\", \"icon\", \"start\")),\n})()\n\nconst ButtonEndIcon = component<\"svg\", ButtonIconProps>(ButtonIcon, {\n  name: \"ButtonEndIcon\",\n  className: getClassName(bem(\"button\", \"icon\", \"end\")),\n})()\n"],"mappings":"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"}

package/dist/esm/components/carousel/carousel.js

@@ -1,7 +1,7 @@
 "use client";
 
 
-import { utils_exports } from "../../utils/index.js";
+import { dataAttr } from "../../utils/common/dom.js";
 import { varAttr } from "../../core/system/var.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
@@ -95,7 +95,7 @@ const CarouselList = withContext("div", "list")(void 0, (props) => {
 	const { includeGapInSize } = useComponentContext();
 	const { getListProps } = useCarouselContext();
 	return {
-		"data-include-gap-in-size": (0, utils_exports.dataAttr)(includeGapInSize),
+		"data-include-gap-in-size": dataAttr(includeGapInSize),
 		...getListProps(props)
 	};
 });
@@ -103,7 +103,7 @@ const CarouselItem = withContext("div", "item")(void 0, ({ slideSize,...rest })
 	const { includeGapInSize } = useComponentContext();
 	const { getItemProps } = useCarouselContext();
 	return {
-		"data-include-gap-in-size": (0, utils_exports.dataAttr)(includeGapInSize),
+		"data-include-gap-in-size": dataAttr(includeGapInSize),
 		"--slide-size": varAttr(slideSize, "sizes"),
 		...getItemProps(rest)
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","names":[],"sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type {\n  CSSProps,\n  HTMLProps,\n  HTMLStyledProps,\n  Orientation,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { CarouselStyle } from \"./carousel.style\"\nimport type {\n  CarouselAlign,\n  CarouselContainScroll,\n  CarouselInViewThreshold,\n  UseCarouselProps,\n} from \"./use-carousel\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr } from \"../../utils\"\nimport { IconButton } from \"../button\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon\"\nimport { carouselStyle } from \"./carousel.style\"\nimport {\n  CarouselContext,\n  useCarousel,\n  useCarouselContext,\n} from \"./use-carousel\"\n\ninterface ComponentContext\n  extends Pick<CarouselRootProps, \"includeGapInSize\"> {}\n\nexport interface CarouselRootProps\n  extends Omit<HTMLStyledProps<\"section\">, \"draggable\" | \"onChange\">,\n    Omit<\n      UseCarouselProps,\n      | \"align\"\n      | \"autoplay\"\n      | \"containScroll\"\n      | \"delay\"\n      | \"dragFree\"\n      | \"draggable\"\n      | \"duration\"\n      | \"inViewThreshold\"\n      | \"loop\"\n      | \"orientation\"\n      | \"skipSnaps\"\n      | \"slidesToScroll\"\n      | \"stopMouseEnterAutoplay\"\n    >,\n    ThemeProps<CarouselStyle> {\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: StyleValue<CarouselAlign>\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: StyleValue<boolean>\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default false\n   */\n  containScroll?: StyleValue<CarouselContainScroll>\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: StyleValue<number>\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: StyleValue<boolean>\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: StyleValue<boolean>\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: StyleValue<number>\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: StyleValue<CarouselInViewThreshold>\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: StyleValue<boolean>\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: StyleValue<Orientation>\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: StyleValue<boolean>\n  /**\n   * The size of the carousel item.\n   */\n  slideSize?: CSSProps[\"width\"]\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: StyleValue<number>\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: StyleValue<boolean>\n}\n\nexport const {\n  ComponentContext,\n  PropsContext: CarouselPropsContext,\n  useComponentContext,\n  usePropsContext: useCarouselPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<CarouselRootProps, CarouselStyle>(\n  \"carousel\",\n  carouselStyle,\n)\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see https://yamada-ui.com/components/carousel\n */\nexport const CarouselRoot = withProvider<\"section\", CarouselRootProps>(\n  ({ includeGapInSize = true, ...rest }) => {\n    const align = useValue(rest.align)\n    const autoplay = useValue(rest.autoplay)\n    const containScroll = useValue(rest.containScroll)\n    const delay = useValue(rest.delay)\n    const dragFree = useValue(rest.dragFree)\n    const draggable = useValue(rest.draggable)\n    const duration = useValue(rest.duration)\n    const inViewThreshold = useValue(rest.inViewThreshold)\n    const loop = useValue(rest.loop)\n    const orientation = useValue(rest.orientation)\n    const skipSnaps = useValue(rest.skipSnaps)\n    const slidesToScroll = useValue(rest.slidesToScroll)\n    const stopMouseEnterAutoplay = useValue(rest.stopMouseEnterAutoplay)\n    const {\n      carousel,\n      count,\n      index,\n      setIndex,\n      snapCount,\n      getIndicatorProps,\n      getIndicatorsProps,\n      getItemProps,\n      getListProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n    } = useCarousel({\n      ...rest,\n      align,\n      autoplay,\n      containScroll,\n      delay,\n      dragFree,\n      draggable,\n      duration,\n      inViewThreshold,\n      loop,\n      orientation,\n      skipSnaps,\n      slidesToScroll,\n      stopMouseEnterAutoplay,\n    })\n    const componentContext = useMemo(\n      () => ({ includeGapInSize }),\n      [includeGapInSize],\n    )\n    const carouselContext = useMemo(\n      () => ({\n        carousel,\n        count,\n        index,\n        setIndex,\n        snapCount,\n        getIndicatorProps,\n        getIndicatorsProps,\n        getItemProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n      }),\n      [\n        carousel,\n        count,\n        index,\n        setIndex,\n        snapCount,\n        getIndicatorProps,\n        getIndicatorsProps,\n        getItemProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n      ],\n    )\n\n    return (\n      <CarouselContext value={carouselContext}>\n        <ComponentContext value={componentContext}>\n          <styled.section {...getRootProps()} />\n        </ComponentContext>\n      </CarouselContext>\n    )\n  },\n  \"root\",\n)(undefined, ({ gap, slideSize, ...rest }) => {\n  return {\n    ...rest,\n    \"--slide-gap\": varAttr(gap, \"spaces\"),\n    \"--slide-size\": varAttr(slideSize, \"sizes\"),\n  }\n})\n\nexport interface CarouselListProps extends HTMLStyledProps {}\n\nexport const CarouselList = withContext<\"div\", CarouselListProps>(\n  \"div\",\n  \"list\",\n)(undefined, (props) => {\n  const { includeGapInSize } = useComponentContext()\n  const { getListProps } = useCarouselContext()\n\n  return {\n    \"data-include-gap-in-size\": dataAttr(includeGapInSize),\n    ...getListProps(props),\n  }\n})\n\nexport interface CarouselItemProps extends HTMLStyledProps {\n  /**\n   * The index of the carousel item.\n   */\n  index: number\n  /**\n   * The size of the carousel item.\n   */\n  slideSize?: CSSProps[\"width\"]\n}\n\nexport const CarouselItem = withContext<\"div\", CarouselItemProps>(\n  \"div\",\n  \"item\",\n)(undefined, ({ slideSize, ...rest }) => {\n  const { includeGapInSize } = useComponentContext()\n  const { getItemProps } = useCarouselContext()\n\n  return {\n    \"data-include-gap-in-size\": dataAttr(includeGapInSize),\n    \"--slide-size\": varAttr(slideSize, \"sizes\"),\n    ...getItemProps(rest),\n  }\n})\n\nexport interface CarouselPrevTriggerProps extends IconButtonProps {}\n\nexport const CarouselPrevTrigger = withContext<\n  \"button\",\n  CarouselPrevTriggerProps\n>(IconButton, { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n  undefined,\n  (props) => {\n    const { getPrevTriggerProps } = useCarouselContext()\n\n    return {\n      fullRounded: true,\n      icon: <ChevronLeftIcon />,\n      ...getPrevTriggerProps(props),\n    }\n  },\n)\n\nexport interface CarouselNextTriggerProps extends IconButtonProps {}\n\nexport const CarouselNextTrigger = withContext<\n  \"button\",\n  CarouselNextTriggerProps\n>(IconButton, { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n  undefined,\n  (props) => {\n    const { getNextTriggerProps } = useCarouselContext()\n\n    return {\n      fullRounded: true,\n      icon: <ChevronRightIcon />,\n      ...getNextTriggerProps(props),\n    }\n  },\n)\n\nexport interface CarouselIndicatorsProps extends HTMLStyledProps {\n  /**\n   * The function used to generate children.\n   * it will be called with `{ index: number; selected: boolean }`.\n   */\n  render?: (props: { index: number; selected: boolean }) => ReactNode\n}\n\nexport const CarouselIndicators = withContext<\"div\", CarouselIndicatorsProps>(\n  \"div\",\n  \"indicators\",\n)(undefined, ({ children, render, ...rest }) => {\n  const {\n    index: selectedIndex,\n    snapCount,\n    getIndicatorProps,\n    getIndicatorsProps,\n  } = useCarouselContext()\n  const computedChildren = useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return Array.from({ length: snapCount }, (_, index) => {\n        if (render) {\n          const component = render({ index, selected: index === selectedIndex })\n\n          if (isValidElement<HTMLProps<\"button\">>(component)) {\n            return cloneElement(component, {\n              ...getIndicatorProps({ key: index, index }),\n            })\n          } else {\n            return component\n          }\n        } else {\n          return <CarouselIndicator key={index} index={index} />\n        }\n      })\n    }\n  }, [children, getIndicatorProps, render, selectedIndex, snapCount])\n\n  return {\n    children: computedChildren,\n    ...getIndicatorsProps(rest),\n  }\n})\n\nexport interface CarouselIndicatorProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The index of the carousel indicator.\n   */\n  index: number\n}\n\nexport const CarouselIndicator = withContext<\"button\", CarouselIndicatorProps>(\n  \"button\",\n  \"indicator\",\n)(undefined, (props) => {\n  const { getIndicatorProps } = useCarouselContext()\n\n  return getIndicatorProps(props)\n})\n"],"mappings":"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"}
+{"version":3,"file":"carousel.js","names":[],"sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type {\n  CSSProps,\n  HTMLProps,\n  HTMLStyledProps,\n  Orientation,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { CarouselStyle } from \"./carousel.style\"\nimport type {\n  CarouselAlign,\n  CarouselContainScroll,\n  CarouselInViewThreshold,\n  UseCarouselProps,\n} from \"./use-carousel\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr } from \"../../utils\"\nimport { IconButton } from \"../button\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon\"\nimport { carouselStyle } from \"./carousel.style\"\nimport {\n  CarouselContext,\n  useCarousel,\n  useCarouselContext,\n} from \"./use-carousel\"\n\ninterface ComponentContext\n  extends Pick<CarouselRootProps, \"includeGapInSize\"> {}\n\nexport interface CarouselRootProps\n  extends Omit<HTMLStyledProps<\"section\">, \"draggable\" | \"onChange\">,\n    Omit<\n      UseCarouselProps,\n      | \"align\"\n      | \"autoplay\"\n      | \"containScroll\"\n      | \"delay\"\n      | \"dragFree\"\n      | \"draggable\"\n      | \"duration\"\n      | \"inViewThreshold\"\n      | \"loop\"\n      | \"orientation\"\n      | \"skipSnaps\"\n      | \"slidesToScroll\"\n      | \"stopMouseEnterAutoplay\"\n    >,\n    ThemeProps<CarouselStyle> {\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: StyleValue<CarouselAlign>\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: StyleValue<boolean>\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default false\n   */\n  containScroll?: StyleValue<CarouselContainScroll>\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: StyleValue<number>\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: StyleValue<boolean>\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: StyleValue<boolean>\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: StyleValue<number>\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: StyleValue<CarouselInViewThreshold>\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: StyleValue<boolean>\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: StyleValue<Orientation>\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: StyleValue<boolean>\n  /**\n   * The size of the carousel item.\n   */\n  slideSize?: CSSProps[\"width\"]\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: StyleValue<number>\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: StyleValue<boolean>\n}\n\nexport const {\n  ComponentContext,\n  PropsContext: CarouselPropsContext,\n  useComponentContext,\n  usePropsContext: useCarouselPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<CarouselRootProps, CarouselStyle>(\n  \"carousel\",\n  carouselStyle,\n)\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see https://yamada-ui.com/components/carousel\n */\nexport const CarouselRoot = withProvider<\"section\", CarouselRootProps>(\n  ({ includeGapInSize = true, ...rest }) => {\n    const align = useValue(rest.align)\n    const autoplay = useValue(rest.autoplay)\n    const containScroll = useValue(rest.containScroll)\n    const delay = useValue(rest.delay)\n    const dragFree = useValue(rest.dragFree)\n    const draggable = useValue(rest.draggable)\n    const duration = useValue(rest.duration)\n    const inViewThreshold = useValue(rest.inViewThreshold)\n    const loop = useValue(rest.loop)\n    const orientation = useValue(rest.orientation)\n    const skipSnaps = useValue(rest.skipSnaps)\n    const slidesToScroll = useValue(rest.slidesToScroll)\n    const stopMouseEnterAutoplay = useValue(rest.stopMouseEnterAutoplay)\n    const {\n      carousel,\n      count,\n      index,\n      setIndex,\n      snapCount,\n      getIndicatorProps,\n      getIndicatorsProps,\n      getItemProps,\n      getListProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n    } = useCarousel({\n      ...rest,\n      align,\n      autoplay,\n      containScroll,\n      delay,\n      dragFree,\n      draggable,\n      duration,\n      inViewThreshold,\n      loop,\n      orientation,\n      skipSnaps,\n      slidesToScroll,\n      stopMouseEnterAutoplay,\n    })\n    const componentContext = useMemo(\n      () => ({ includeGapInSize }),\n      [includeGapInSize],\n    )\n    const carouselContext = useMemo(\n      () => ({\n        carousel,\n        count,\n        index,\n        setIndex,\n        snapCount,\n        getIndicatorProps,\n        getIndicatorsProps,\n        getItemProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n      }),\n      [\n        carousel,\n        count,\n        index,\n        setIndex,\n        snapCount,\n        getIndicatorProps,\n        getIndicatorsProps,\n        getItemProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n      ],\n    )\n\n    return (\n      <CarouselContext value={carouselContext}>\n        <ComponentContext value={componentContext}>\n          <styled.section {...getRootProps()} />\n        </ComponentContext>\n      </CarouselContext>\n    )\n  },\n  \"root\",\n)(undefined, ({ gap, slideSize, ...rest }) => {\n  return {\n    ...rest,\n    \"--slide-gap\": varAttr(gap, \"spaces\"),\n    \"--slide-size\": varAttr(slideSize, \"sizes\"),\n  }\n})\n\nexport interface CarouselListProps extends HTMLStyledProps {}\n\nexport const CarouselList = withContext<\"div\", CarouselListProps>(\n  \"div\",\n  \"list\",\n)(undefined, (props) => {\n  const { includeGapInSize } = useComponentContext()\n  const { getListProps } = useCarouselContext()\n\n  return {\n    \"data-include-gap-in-size\": dataAttr(includeGapInSize),\n    ...getListProps(props),\n  }\n})\n\nexport interface CarouselItemProps extends HTMLStyledProps {\n  /**\n   * The index of the carousel item.\n   */\n  index: number\n  /**\n   * The size of the carousel item.\n   */\n  slideSize?: CSSProps[\"width\"]\n}\n\nexport const CarouselItem = withContext<\"div\", CarouselItemProps>(\n  \"div\",\n  \"item\",\n)(undefined, ({ slideSize, ...rest }) => {\n  const { includeGapInSize } = useComponentContext()\n  const { getItemProps } = useCarouselContext()\n\n  return {\n    \"data-include-gap-in-size\": dataAttr(includeGapInSize),\n    \"--slide-size\": varAttr(slideSize, \"sizes\"),\n    ...getItemProps(rest),\n  }\n})\n\nexport interface CarouselPrevTriggerProps extends IconButtonProps {}\n\nexport const CarouselPrevTrigger = withContext<\n  \"button\",\n  CarouselPrevTriggerProps\n>(IconButton, { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n  undefined,\n  (props) => {\n    const { getPrevTriggerProps } = useCarouselContext()\n\n    return {\n      fullRounded: true,\n      icon: <ChevronLeftIcon />,\n      ...getPrevTriggerProps(props),\n    }\n  },\n)\n\nexport interface CarouselNextTriggerProps extends IconButtonProps {}\n\nexport const CarouselNextTrigger = withContext<\n  \"button\",\n  CarouselNextTriggerProps\n>(IconButton, { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n  undefined,\n  (props) => {\n    const { getNextTriggerProps } = useCarouselContext()\n\n    return {\n      fullRounded: true,\n      icon: <ChevronRightIcon />,\n      ...getNextTriggerProps(props),\n    }\n  },\n)\n\nexport interface CarouselIndicatorsProps extends HTMLStyledProps {\n  /**\n   * The function used to generate children.\n   * it will be called with `{ index: number; selected: boolean }`.\n   */\n  render?: (props: { index: number; selected: boolean }) => ReactNode\n}\n\nexport const CarouselIndicators = withContext<\"div\", CarouselIndicatorsProps>(\n  \"div\",\n  \"indicators\",\n)(undefined, ({ children, render, ...rest }) => {\n  const {\n    index: selectedIndex,\n    snapCount,\n    getIndicatorProps,\n    getIndicatorsProps,\n  } = useCarouselContext()\n  const computedChildren = useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return Array.from({ length: snapCount }, (_, index) => {\n        if (render) {\n          const component = render({ index, selected: index === selectedIndex })\n\n          if (isValidElement<HTMLProps<\"button\">>(component)) {\n            return cloneElement(component, {\n              ...getIndicatorProps({ key: index, index }),\n            })\n          } else {\n            return component\n          }\n        } else {\n          return <CarouselIndicator key={index} index={index} />\n        }\n      })\n    }\n  }, [children, getIndicatorProps, render, selectedIndex, snapCount])\n\n  return {\n    children: computedChildren,\n    ...getIndicatorsProps(rest),\n  }\n})\n\nexport interface CarouselIndicatorProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The index of the carousel indicator.\n   */\n  index: number\n}\n\nexport const CarouselIndicator = withContext<\"button\", CarouselIndicatorProps>(\n  \"button\",\n  \"indicator\",\n)(undefined, (props) => {\n  const { getIndicatorProps } = useCarouselContext()\n\n  return getIndicatorProps(props)\n})\n"],"mappings":"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"}

package/dist/esm/components/carousel/use-carousel.js

@@ -5,7 +5,9 @@ import { createContext } from "../../utils/context.js";
 import { runKeyAction, useIds } from "../../utils/dom.js";
 import { useUpdateEffect } from "../../utils/effect.js";
 import { assignRef, mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { isFunction } from "../../utils/common/assertion.js";
+import { handlerAll } from "../../utils/common/function.js";
+import { dataAttr } from "../../utils/common/dom.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useBoolean } from "../../hooks/use-boolean/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -29,7 +31,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 	const [snapCount, setSnapCount] = useState(0);
 	const [count, setCount] = useState(0);
 	const watchResize = useCallback((methods, entries) => {
-		const result = (0, utils_exports.isFunction)(watchResizeProp) ? watchResizeProp(methods, entries) : true;
+		const result = isFunction(watchResizeProp) ? watchResizeProp(methods, entries) : true;
 		const snapCount$1 = methods.scrollSnapList().length;
 		const count$1 = methods.slideNodes().length;
 		setSnapCount(snapCount$1);
@@ -176,8 +178,8 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 		...rest,
 		...props,
 		ref: mergeRefs(ref, rest.ref, carouselRef),
-		onMouseEnter: (0, utils_exports.handlerAll)(props.onMouseEnter, onMouseEnter),
-		onMouseLeave: (0, utils_exports.handlerAll)(props.onMouseLeave, onMouseLeave)
+		onMouseEnter: handlerAll(props.onMouseEnter, onMouseEnter),
+		onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave)
 	}), [
 		id,
 		onMouseEnter,
@@ -206,7 +208,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 			"aria-roledescription": "slide",
 			"data-index": indexProp$1.toString(),
 			"data-orientation": orientation,
-			"data-selected": (0, utils_exports.dataAttr)(selected),
+			"data-selected": dataAttr(selected),
 			role: "tabpanel",
 			...props
 		};
@@ -222,7 +224,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 		"data-orientation": orientation,
 		disabled: !carousel?.canScrollPrev(),
 		...props,
-		onClick: (0, utils_exports.handlerAll)(props.onClick, () => carousel?.scrollPrev())
+		onClick: handlerAll(props.onClick, () => carousel?.scrollPrev())
 	}), [
 		carousel,
 		listId,
@@ -234,7 +236,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 		"data-orientation": orientation,
 		disabled: !carousel?.canScrollNext(),
 		...props,
-		onClick: (0, utils_exports.handlerAll)(props.onClick, () => carousel?.scrollNext())
+		onClick: handlerAll(props.onClick, () => carousel?.scrollNext())
 	}), [
 		carousel,
 		listId,
@@ -256,15 +258,15 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 			"aria-selected": selected,
 			"data-index": indexProp$1.toString(),
 			"data-orientation": orientation,
-			"data-selected": (0, utils_exports.dataAttr)(selected),
+			"data-selected": dataAttr(selected),
 			role: "tab",
 			tabIndex: selected ? 0 : -1,
 			...props,
 			ref: mergeRefs(ref, (node) => {
 				indicatorMapRef.current.set(indexProp$1, node);
 			}),
-			onClick: (0, utils_exports.handlerAll)(props.onClick, () => carousel?.scrollTo(indexProp$1)),
-			onKeyDown: (0, utils_exports.handlerAll)(props.onKeyDown, onKeyDown(indexProp$1))
+			onClick: handlerAll(props.onClick, () => carousel?.scrollTo(indexProp$1)),
+			onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp$1))
 		};
 	}, [
 		carousel,

package/dist/esm/components/carousel/use-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-carousel.js","names":["snapCount","count","methods: CarouselControl","index","index: number","ev: KeyboardEvent<HTMLButtonElement>","getRootProps: PropGetter<\"section\">","getListProps: PropGetter","getItemProps: RequiredPropGetter<\"div\", { index: number }>","indexProp","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getIndicatorsProps: PropGetter","getIndicatorProps: RequiredPropGetter<\"button\", { index: number }>"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  EmblaCarouselType,\n  EmblaOptionsType,\n  EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport type {\n  HTMLProps,\n  Orientation,\n  PropGetter,\n  RequiredPropGetter,\n} from \"../../core\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  handlerAll,\n  isFunction,\n  mergeRefs,\n  runKeyAction,\n  useIds,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext\n  extends Omit<UseCarouselReturn, \"getRootProps\"> {}\n\nexport const [CarouselContext, useCarouselContext] =\n  createContext<CarouselContext>({ name: \"CarouselContext\" })\n\nexport interface UseCarouselProps\n  extends Omit<HTMLProps<\"section\">, \"onChange\"> {\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: CarouselAlign\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default false\n   */\n  containScroll?: CarouselContainScroll\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<CarouselControl | null>\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: number\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: CarouselInViewThreshold\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * Embla plugins to use.\n   */\n  plugins?: CarouselPlugin[]\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * Enables for scrolling the carousel with mouse and touch interactions.\n   * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n   *\n   * @default true\n   */\n  watchDrag?: CarouselWatchDrag\n  /**\n   * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n   *\n   * @default true\n   */\n  watchResize?: CarouselWatchResize\n  /**\n   * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n   *\n   * @default true\n   */\n  watchSlides?: CarouselWatchSlides\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n  id,\n  align = \"center\",\n  autoplay = false,\n  containScroll = false,\n  controlRef,\n  defaultIndex = 0,\n  delay = 4000,\n  dragFree = false,\n  draggable = true,\n  duration = 25,\n  index: indexProp,\n  inViewThreshold = 0,\n  loop = true,\n  orientation = \"horizontal\",\n  plugins = [],\n  skipSnaps = false,\n  slidesToScroll = 1,\n  stopMouseEnterAutoplay = true,\n  watchDrag = draggable,\n  watchResize: watchResizeProp = true,\n  watchSlides = true,\n  onChange,\n  onScrollProgress,\n  ...rest\n}: UseCarouselProps = {}) => {\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const [rootId, listId] = useIds()\n  const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n  const timeoutId = useRef<NodeJS.Timeout | null>(null)\n  const indicatorMapRef = useRef<Map<number, HTMLButtonElement | null>>(\n    new Map(),\n  )\n  const listRef = useRef<HTMLDivElement>(null)\n  const horizontal = orientation === \"horizontal\"\n  const axis = horizontal ? \"x\" : \"y\"\n  const [snapCount, setSnapCount] = useState(0)\n  const [count, setCount] = useState(0)\n  const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n    (methods, entries) => {\n      const result = isFunction(watchResizeProp)\n        ? watchResizeProp(methods, entries)\n        : true\n      const snapCount = methods.scrollSnapList().length\n      const count = methods.slideNodes().length\n\n      setSnapCount(snapCount)\n      setCount(count)\n\n      return result\n    },\n    [watchResizeProp],\n  )\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis,\n      container: listRef.current,\n      containScroll,\n      dragFree,\n      duration,\n      inViewThreshold,\n      loop,\n      skipSnaps,\n      slidesToScroll,\n      startIndex: defaultIndex,\n      watchDrag,\n      watchResize,\n      watchSlides,\n    },\n    plugins,\n  )\n\n  id ??= rootId\n\n  const onInit = useCallback((methods: CarouselControl) => {\n    const snapCount = methods.scrollSnapList().length\n    const count = methods.slideNodes().length\n\n    setSnapCount(snapCount)\n    setCount(count)\n  }, [])\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setIndex(index)\n  }, [carousel, setIndex])\n\n  const onFocusIndicator = useCallback(\n    (index: number) => {\n      const el = indicatorMapRef.current.get(index)\n\n      el?.focus()\n      carousel?.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const onKeyDown = useCallback(\n    (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n      const lastIndex = snapCount - 1\n\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          if (horizontal) return\n\n          index = index === lastIndex ? 0 : index + 1\n\n          onFocusIndicator(index)\n        },\n        ArrowLeft: () => {\n          if (!horizontal) return\n\n          index = index === 0 ? lastIndex : index - 1\n\n          onFocusIndicator(index)\n        },\n        ArrowRight: () => {\n          if (!horizontal) return\n\n          index = index === lastIndex ? 0 : index + 1\n\n          onFocusIndicator(index)\n        },\n        ArrowUp: () => {\n          if (horizontal) return\n\n          index = index === 0 ? lastIndex : index - 1\n\n          onFocusIndicator(index)\n        },\n        End: () => {\n          onFocusIndicator(lastIndex)\n        },\n        Home: () => {\n          onFocusIndicator(0)\n        },\n      })\n    },\n    [snapCount, horizontal, onFocusIndicator],\n  )\n\n  assignRef(controlRef, carousel)\n\n  useEffect(() => {\n    if (carousel) {\n      carousel.on(\"reInit\", onInit)\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"reInit\", onInit)\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onInit, onScroll, onSelect])\n\n  useEffect(() => {\n    const stop = hover && stopMouseEnterAutoplay\n    const last = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !stop && !last) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = null\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    if (indexProp === undefined) return\n\n    carousel.scrollTo(indexProp)\n  }, [indexProp])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n  }, [\n    carousel,\n    count,\n    align,\n    axis,\n    containScroll,\n    dragFree,\n    duration,\n    inViewThreshold,\n    loop,\n    skipSnaps,\n    slidesToScroll,\n  ])\n\n  const getRootProps: PropGetter<\"section\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id,\n      \"aria-roledescription\": \"carousel\",\n      \"data-orientation\": orientation,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref, carouselRef),\n      onMouseEnter: handlerAll(props.onMouseEnter, onMouseEnter),\n      onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n    }),\n    [id, onMouseEnter, onMouseLeave, rest, carouselRef, orientation],\n  )\n\n  const getListProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: listId,\n      \"aria-live\": autoplay ? \"off\" : \"polite\",\n      \"data-orientation\": orientation,\n      ...props,\n      ref: mergeRefs(ref, listRef),\n    }),\n    [autoplay, listId, orientation],\n  )\n\n  const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n    useCallback(\n      ({ index: indexProp, ...props }) => {\n        const page = indexProp + 1\n        const selected = index === indexProp\n\n        return {\n          id: `${listId}-${indexProp}`,\n          \"aria-label\": `${page} of ${count}`,\n          \"aria-roledescription\": \"slide\",\n          \"data-index\": indexProp.toString(),\n          \"data-orientation\": orientation,\n          \"data-selected\": dataAttr(selected),\n          role: \"tabpanel\",\n          ...props,\n        }\n      },\n      [index, listId, count, orientation],\n    )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-controls\": listId,\n      \"aria-label\": \"Go to previous slide\",\n      \"data-orientation\": orientation,\n      disabled: !carousel?.canScrollPrev(),\n      ...props,\n      onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n    }),\n    [carousel, listId, orientation],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-controls\": listId,\n      \"aria-label\": \"Go to next slide\",\n      \"data-orientation\": orientation,\n      disabled: !carousel?.canScrollNext(),\n      ...props,\n      onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n    }),\n    [carousel, listId, orientation],\n  )\n\n  const getIndicatorsProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-label\": \"Slides\",\n      \"aria-orientation\": orientation,\n      role: \"tablist\",\n      ...props,\n    }),\n    [orientation],\n  )\n\n  const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ ref, index: indexProp, ...props }) => {\n        const page = indexProp + 1\n        const selected = index === indexProp\n\n        return {\n          type: \"button\" as const,\n          \"aria-controls\": `${listId}-${indexProp}`,\n          \"aria-label\": `Go to ${page} slide`,\n          \"aria-selected\": selected,\n          \"data-index\": indexProp.toString(),\n          \"data-orientation\": orientation,\n          \"data-selected\": dataAttr(selected),\n          role: \"tab\",\n          tabIndex: selected ? 0 : -1,\n          ...props,\n          ref: mergeRefs(ref, (node) => {\n            indicatorMapRef.current.set(indexProp, node)\n          }),\n          onClick: handlerAll(props.onClick, () =>\n            carousel?.scrollTo(indexProp),\n          ),\n          onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n        }\n      },\n      [carousel, index, listId, orientation, onKeyDown],\n    )\n\n  return {\n    carousel,\n    count,\n    index,\n    setIndex,\n    snapCount,\n    getIndicatorProps,\n    getIndicatorsProps,\n    getItemProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}
+{"version":3,"file":"use-carousel.js","names":["snapCount","count","methods: CarouselControl","index","index: number","ev: KeyboardEvent<HTMLButtonElement>","getRootProps: PropGetter<\"section\">","getListProps: PropGetter","getItemProps: RequiredPropGetter<\"div\", { index: number }>","indexProp","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getIndicatorsProps: PropGetter","getIndicatorProps: RequiredPropGetter<\"button\", { index: number }>"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  EmblaCarouselType,\n  EmblaOptionsType,\n  EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport type {\n  HTMLProps,\n  Orientation,\n  PropGetter,\n  RequiredPropGetter,\n} from \"../../core\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  handlerAll,\n  isFunction,\n  mergeRefs,\n  runKeyAction,\n  useIds,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext\n  extends Omit<UseCarouselReturn, \"getRootProps\"> {}\n\nexport const [CarouselContext, useCarouselContext] =\n  createContext<CarouselContext>({ name: \"CarouselContext\" })\n\nexport interface UseCarouselProps\n  extends Omit<HTMLProps<\"section\">, \"onChange\"> {\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: CarouselAlign\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default false\n   */\n  containScroll?: CarouselContainScroll\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<CarouselControl | null>\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: number\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: CarouselInViewThreshold\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * Embla plugins to use.\n   */\n  plugins?: CarouselPlugin[]\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * Enables for scrolling the carousel with mouse and touch interactions.\n   * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n   *\n   * @default true\n   */\n  watchDrag?: CarouselWatchDrag\n  /**\n   * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n   *\n   * @default true\n   */\n  watchResize?: CarouselWatchResize\n  /**\n   * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n   *\n   * @default true\n   */\n  watchSlides?: CarouselWatchSlides\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n  id,\n  align = \"center\",\n  autoplay = false,\n  containScroll = false,\n  controlRef,\n  defaultIndex = 0,\n  delay = 4000,\n  dragFree = false,\n  draggable = true,\n  duration = 25,\n  index: indexProp,\n  inViewThreshold = 0,\n  loop = true,\n  orientation = \"horizontal\",\n  plugins = [],\n  skipSnaps = false,\n  slidesToScroll = 1,\n  stopMouseEnterAutoplay = true,\n  watchDrag = draggable,\n  watchResize: watchResizeProp = true,\n  watchSlides = true,\n  onChange,\n  onScrollProgress,\n  ...rest\n}: UseCarouselProps = {}) => {\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const [rootId, listId] = useIds()\n  const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n  const timeoutId = useRef<NodeJS.Timeout | null>(null)\n  const indicatorMapRef = useRef<Map<number, HTMLButtonElement | null>>(\n    new Map(),\n  )\n  const listRef = useRef<HTMLDivElement>(null)\n  const horizontal = orientation === \"horizontal\"\n  const axis = horizontal ? \"x\" : \"y\"\n  const [snapCount, setSnapCount] = useState(0)\n  const [count, setCount] = useState(0)\n  const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n    (methods, entries) => {\n      const result = isFunction(watchResizeProp)\n        ? watchResizeProp(methods, entries)\n        : true\n      const snapCount = methods.scrollSnapList().length\n      const count = methods.slideNodes().length\n\n      setSnapCount(snapCount)\n      setCount(count)\n\n      return result\n    },\n    [watchResizeProp],\n  )\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis,\n      container: listRef.current,\n      containScroll,\n      dragFree,\n      duration,\n      inViewThreshold,\n      loop,\n      skipSnaps,\n      slidesToScroll,\n      startIndex: defaultIndex,\n      watchDrag,\n      watchResize,\n      watchSlides,\n    },\n    plugins,\n  )\n\n  id ??= rootId\n\n  const onInit = useCallback((methods: CarouselControl) => {\n    const snapCount = methods.scrollSnapList().length\n    const count = methods.slideNodes().length\n\n    setSnapCount(snapCount)\n    setCount(count)\n  }, [])\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setIndex(index)\n  }, [carousel, setIndex])\n\n  const onFocusIndicator = useCallback(\n    (index: number) => {\n      const el = indicatorMapRef.current.get(index)\n\n      el?.focus()\n      carousel?.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const onKeyDown = useCallback(\n    (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n      const lastIndex = snapCount - 1\n\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          if (horizontal) return\n\n          index = index === lastIndex ? 0 : index + 1\n\n          onFocusIndicator(index)\n        },\n        ArrowLeft: () => {\n          if (!horizontal) return\n\n          index = index === 0 ? lastIndex : index - 1\n\n          onFocusIndicator(index)\n        },\n        ArrowRight: () => {\n          if (!horizontal) return\n\n          index = index === lastIndex ? 0 : index + 1\n\n          onFocusIndicator(index)\n        },\n        ArrowUp: () => {\n          if (horizontal) return\n\n          index = index === 0 ? lastIndex : index - 1\n\n          onFocusIndicator(index)\n        },\n        End: () => {\n          onFocusIndicator(lastIndex)\n        },\n        Home: () => {\n          onFocusIndicator(0)\n        },\n      })\n    },\n    [snapCount, horizontal, onFocusIndicator],\n  )\n\n  assignRef(controlRef, carousel)\n\n  useEffect(() => {\n    if (carousel) {\n      carousel.on(\"reInit\", onInit)\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"reInit\", onInit)\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onInit, onScroll, onSelect])\n\n  useEffect(() => {\n    const stop = hover && stopMouseEnterAutoplay\n    const last = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !stop && !last) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = null\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    if (indexProp === undefined) return\n\n    carousel.scrollTo(indexProp)\n  }, [indexProp])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n  }, [\n    carousel,\n    count,\n    align,\n    axis,\n    containScroll,\n    dragFree,\n    duration,\n    inViewThreshold,\n    loop,\n    skipSnaps,\n    slidesToScroll,\n  ])\n\n  const getRootProps: PropGetter<\"section\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id,\n      \"aria-roledescription\": \"carousel\",\n      \"data-orientation\": orientation,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref, carouselRef),\n      onMouseEnter: handlerAll(props.onMouseEnter, onMouseEnter),\n      onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n    }),\n    [id, onMouseEnter, onMouseLeave, rest, carouselRef, orientation],\n  )\n\n  const getListProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: listId,\n      \"aria-live\": autoplay ? \"off\" : \"polite\",\n      \"data-orientation\": orientation,\n      ...props,\n      ref: mergeRefs(ref, listRef),\n    }),\n    [autoplay, listId, orientation],\n  )\n\n  const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n    useCallback(\n      ({ index: indexProp, ...props }) => {\n        const page = indexProp + 1\n        const selected = index === indexProp\n\n        return {\n          id: `${listId}-${indexProp}`,\n          \"aria-label\": `${page} of ${count}`,\n          \"aria-roledescription\": \"slide\",\n          \"data-index\": indexProp.toString(),\n          \"data-orientation\": orientation,\n          \"data-selected\": dataAttr(selected),\n          role: \"tabpanel\",\n          ...props,\n        }\n      },\n      [index, listId, count, orientation],\n    )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-controls\": listId,\n      \"aria-label\": \"Go to previous slide\",\n      \"data-orientation\": orientation,\n      disabled: !carousel?.canScrollPrev(),\n      ...props,\n      onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n    }),\n    [carousel, listId, orientation],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-controls\": listId,\n      \"aria-label\": \"Go to next slide\",\n      \"data-orientation\": orientation,\n      disabled: !carousel?.canScrollNext(),\n      ...props,\n      onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n    }),\n    [carousel, listId, orientation],\n  )\n\n  const getIndicatorsProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-label\": \"Slides\",\n      \"aria-orientation\": orientation,\n      role: \"tablist\",\n      ...props,\n    }),\n    [orientation],\n  )\n\n  const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ ref, index: indexProp, ...props }) => {\n        const page = indexProp + 1\n        const selected = index === indexProp\n\n        return {\n          type: \"button\" as const,\n          \"aria-controls\": `${listId}-${indexProp}`,\n          \"aria-label\": `Go to ${page} slide`,\n          \"aria-selected\": selected,\n          \"data-index\": indexProp.toString(),\n          \"data-orientation\": orientation,\n          \"data-selected\": dataAttr(selected),\n          role: \"tab\",\n          tabIndex: selected ? 0 : -1,\n          ...props,\n          ref: mergeRefs(ref, (node) => {\n            indicatorMapRef.current.set(indexProp, node)\n          }),\n          onClick: handlerAll(props.onClick, () =>\n            carousel?.scrollTo(indexProp),\n          ),\n          onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n        }\n      },\n      [carousel, index, listId, orientation, onKeyDown],\n    )\n\n  return {\n    carousel,\n    count,\n    index,\n    setIndex,\n    snapCount,\n    getIndicatorProps,\n    getIndicatorsProps,\n    getItemProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}

package/dist/esm/components/circle-progress/circle-progress.js

@@ -1,7 +1,7 @@
 "use client";
 
 
-import { utils_exports } from "../../utils/index.js";
+import { isNumber } from "../../utils/common/assertion.js";
 import { mergeCSS } from "../../core/css/merge-css.js";
 import { varAttr } from "../../core/system/var.js";
 import { styled } from "../../core/system/factory.js";
@@ -38,7 +38,7 @@ const CircleProgressRoot = withProvider(({ css, children, max, min, rangeColor,
 		}), children]
 	});
 }, "root")(({ boxSize, duration, thickness,...rest }) => ({
-	"--duration": (0, utils_exports.isNumber)(duration) ? `${duration}s` : duration,
+	"--duration": isNumber(duration) ? `${duration}s` : duration,
 	"--size": varAttr(boxSize, "sizes"),
 	"--thickness": varAttr(thickness, "sizes"),
 	...rest

package/dist/esm/components/circle-progress/circle-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circle-progress.js","names":[],"sources":["../../../../src/components/circle-progress/circle-progress.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseProgressProps } from \"../progress\"\nimport type { CircleProgressStyle } from \"./circle-progress.style\"\nimport { createSlotComponent, mergeCSS, styled, varAttr } from \"../../core\"\nimport { isNumber } from \"../../utils\"\nimport { useProgress } from \"../progress\"\nimport { circleProgressStyle } from \"./circle-progress.style\"\n\nexport interface CircleProgressRootProps\n  extends HTMLStyledProps,\n    UseProgressProps,\n    ThemeProps<CircleProgressStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color of the progress range.\n   */\n  rangeColor?: CSSProps[\"color\"]\n  /**\n   * The thickness of the progress bar.\n   */\n  thickness?: CSSProps[\"width\"]\n  /**\n   * The color of the progress track.\n   */\n  trackColor?: CSSProps[\"color\"]\n  /**\n   * Props for the progress circle element.\n   */\n  circleProps?: CircleProgressCircleProps\n  /**\n   * Props for the progress range element.\n   */\n  rangeProps?: CircleProgressRangeProps\n  /**\n   * Props for the progress track element.\n   */\n  trackProps?: CircleProgressTrackProps\n}\n\nexport const {\n  PropsContext: CircleProgressPropsContext,\n  usePropsContext: useCircleProgressPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<CircleProgressRootProps, CircleProgressStyle>(\n  \"circle-progress\",\n  circleProgressStyle,\n)\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see https://yamada-ui.com/components/circle-progress\n */\nexport const CircleProgressRoot = withProvider<\"div\", CircleProgressRootProps>(\n  ({\n    css,\n    children,\n    max,\n    min,\n    rangeColor,\n    trackColor,\n    value,\n    circleProps,\n    rangeProps,\n    trackProps,\n    ...rest\n  }) => {\n    const { percent, getRangeProps, getRootProps, getTrackProps } =\n      useProgress<\"svg\">({ max, min, value })\n\n    return (\n      <styled.div css={mergeCSS(css, { \"--percent\": percent })} {...rest}>\n        <CircleProgressCircle {...getRootProps(circleProps)}>\n          <CircleProgressTrack\n            stroke={trackColor}\n            {...getTrackProps(trackProps)}\n          />\n          <CircleProgressRange\n            stroke={rangeColor}\n            {...getRangeProps(rangeProps)}\n          />\n        </CircleProgressCircle>\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ boxSize, duration, thickness, ...rest }) => ({\n  \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n  \"--size\": varAttr(boxSize, \"sizes\"),\n  \"--thickness\": varAttr(thickness, \"sizes\"),\n  ...rest,\n}))\n\ninterface CircleProgressCircleProps extends HTMLStyledProps<\"svg\"> {}\n\nconst CircleProgressCircle = withContext<\"svg\", CircleProgressCircleProps>(\n  \"svg\",\n  \"circle\",\n)()\n\ninterface CircleProgressTrackProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressTrack = withContext<\"circle\", CircleProgressTrackProps>(\n  \"circle\",\n  \"track\",\n)()\n\ninterface CircleProgressRangeProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressRange = withContext<\"circle\", CircleProgressRangeProps>(\n  \"circle\",\n  \"range\",\n)()\n\nexport interface CircleProgressLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const CircleProgressLabel = withContext<\n  \"span\",\n  CircleProgressLabelProps\n>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;AA4CA,MAAa,EACX,cAAc,4BACd,iBAAiB,+BACjB,aACA,cACD,GAAG,oBACF,mBACA,oBACD;;;;;;AAOD,MAAa,qBAAqB,aAChC,CAAC,EACC,KACA,UACA,KACA,KACA,YACA,YACA,OACA,aACA,YACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,EAAE,SAAS,eAAe,cAAc,eAAe,GAC3D,YAAmB;EAAE;EAAK;EAAK;CAAO,EAAC;AAEzC,wBACE,KAAC,OAAO;EAAI,KAAK,SAAS,KAAK,EAAE,aAAa,QAAS,EAAC;EAAE,GAAI;6BAC5D,KAAC;GAAqB,GAAI,aAAa,YAAY;8BACjD,IAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B,kBACF,IAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B;IACmB,EAEtB;GACU;AAEhB,GACD,OACD,CAAC,CAAC,EAAE,SAAS,UAAU,UAAW,GAAG,MAAM,MAAM;CAChD,cAAc,4BAAS,SAAS,MAAM,SAAS,KAAK;CACpD,UAAU,QAAQ,SAAS,QAAQ;CACnC,eAAe,QAAQ,WAAW,QAAQ;CAC1C,GAAG;AACJ,GAAE;AAIH,MAAM,uBAAuB,YAC3B,OACA,SACD,EAAE;AAIH,MAAM,sBAAsB,YAC1B,UACA,QACD,EAAE;AAIH,MAAM,sBAAsB,YAC1B,UACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YAGjC,QAAQ,QAAQ,EAAE"}
+{"version":3,"file":"circle-progress.js","names":[],"sources":["../../../../src/components/circle-progress/circle-progress.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseProgressProps } from \"../progress\"\nimport type { CircleProgressStyle } from \"./circle-progress.style\"\nimport { createSlotComponent, mergeCSS, styled, varAttr } from \"../../core\"\nimport { isNumber } from \"../../utils\"\nimport { useProgress } from \"../progress\"\nimport { circleProgressStyle } from \"./circle-progress.style\"\n\nexport interface CircleProgressRootProps\n  extends HTMLStyledProps,\n    UseProgressProps,\n    ThemeProps<CircleProgressStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color of the progress range.\n   */\n  rangeColor?: CSSProps[\"color\"]\n  /**\n   * The thickness of the progress bar.\n   */\n  thickness?: CSSProps[\"width\"]\n  /**\n   * The color of the progress track.\n   */\n  trackColor?: CSSProps[\"color\"]\n  /**\n   * Props for the progress circle element.\n   */\n  circleProps?: CircleProgressCircleProps\n  /**\n   * Props for the progress range element.\n   */\n  rangeProps?: CircleProgressRangeProps\n  /**\n   * Props for the progress track element.\n   */\n  trackProps?: CircleProgressTrackProps\n}\n\nexport const {\n  PropsContext: CircleProgressPropsContext,\n  usePropsContext: useCircleProgressPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<CircleProgressRootProps, CircleProgressStyle>(\n  \"circle-progress\",\n  circleProgressStyle,\n)\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see https://yamada-ui.com/components/circle-progress\n */\nexport const CircleProgressRoot = withProvider<\"div\", CircleProgressRootProps>(\n  ({\n    css,\n    children,\n    max,\n    min,\n    rangeColor,\n    trackColor,\n    value,\n    circleProps,\n    rangeProps,\n    trackProps,\n    ...rest\n  }) => {\n    const { percent, getRangeProps, getRootProps, getTrackProps } =\n      useProgress<\"svg\">({ max, min, value })\n\n    return (\n      <styled.div css={mergeCSS(css, { \"--percent\": percent })} {...rest}>\n        <CircleProgressCircle {...getRootProps(circleProps)}>\n          <CircleProgressTrack\n            stroke={trackColor}\n            {...getTrackProps(trackProps)}\n          />\n          <CircleProgressRange\n            stroke={rangeColor}\n            {...getRangeProps(rangeProps)}\n          />\n        </CircleProgressCircle>\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ boxSize, duration, thickness, ...rest }) => ({\n  \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n  \"--size\": varAttr(boxSize, \"sizes\"),\n  \"--thickness\": varAttr(thickness, \"sizes\"),\n  ...rest,\n}))\n\ninterface CircleProgressCircleProps extends HTMLStyledProps<\"svg\"> {}\n\nconst CircleProgressCircle = withContext<\"svg\", CircleProgressCircleProps>(\n  \"svg\",\n  \"circle\",\n)()\n\ninterface CircleProgressTrackProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressTrack = withContext<\"circle\", CircleProgressTrackProps>(\n  \"circle\",\n  \"track\",\n)()\n\ninterface CircleProgressRangeProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressRange = withContext<\"circle\", CircleProgressRangeProps>(\n  \"circle\",\n  \"range\",\n)()\n\nexport interface CircleProgressLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const CircleProgressLabel = withContext<\n  \"span\",\n  CircleProgressLabelProps\n>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;AA4CA,MAAa,EACX,cAAc,4BACd,iBAAiB,+BACjB,aACA,cACD,GAAG,oBACF,mBACA,oBACD;;;;;;AAOD,MAAa,qBAAqB,aAChC,CAAC,EACC,KACA,UACA,KACA,KACA,YACA,YACA,OACA,aACA,YACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,EAAE,SAAS,eAAe,cAAc,eAAe,GAC3D,YAAmB;EAAE;EAAK;EAAK;CAAO,EAAC;AAEzC,wBACE,KAAC,OAAO;EAAI,KAAK,SAAS,KAAK,EAAE,aAAa,QAAS,EAAC;EAAE,GAAI;6BAC5D,KAAC;GAAqB,GAAI,aAAa,YAAY;8BACjD,IAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B,kBACF,IAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B;IACmB,EAEtB;GACU;AAEhB,GACD,OACD,CAAC,CAAC,EAAE,SAAS,UAAU,UAAW,GAAG,MAAM,MAAM;CAChD,cAAc,SAAS,SAAS,MAAM,SAAS,KAAK;CACpD,UAAU,QAAQ,SAAS,QAAQ;CACnC,eAAe,QAAQ,WAAW,QAAQ;CAC1C,GAAG;AACJ,GAAE;AAIH,MAAM,uBAAuB,YAC3B,OACA,SACD,EAAE;AAIH,MAAM,sBAAsB,YAC1B,UACA,QACD,EAAE;AAIH,MAAM,sBAAsB,YAC1B,UACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YAGjC,QAAQ,QAAQ,EAAE"}