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

package/dist/cjs/components/button/button.cjs

@@ -4,7 +4,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils_context = require('../../utils/context.cjs');
 const require_utils_ref = require('../../utils/ref.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+const require_utils_common_dom = require('../../utils/common/dom.cjs');
+const require_utils_common_string = require('../../utils/common/string.cjs');
 const require_core_css_merge_css = require('../../core/css/merge-css.cjs');
 const require_core_system_factory = require('../../core/system/factory.cjs');
 const require_core_components_utils = require('../../core/components/utils.cjs');
@@ -63,8 +64,8 @@ const Button = withContext(({ ref, as, active, children, disabled, disableRipple
 			ref: require_utils_ref.mergeRefs(ref, buttonRef),
 			as,
 			type,
-			"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
-			"data-loading": (0, require_utils_index.utils_exports.dataAttr)(loading),
+			"data-active": require_utils_common_dom.dataAttr(active),
+			"data-loading": require_utils_common_dom.dataAttr(loading),
 			disabled: trulyDisabled,
 			...rest,
 			onClick,
@@ -95,7 +96,7 @@ const ButtonContent = component(({ children }) => {
 	] });
 }, {
 	name: "ButtonContent",
-	className: require_core_components_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "content"))
+	className: require_core_components_utils.getClassName(require_utils_common_string.bem("button", "content"))
 })();
 const ButtonLoading = component((props) => {
 	const { loadingIcon, loadingMessage } = useButtonContext();
@@ -116,15 +117,15 @@ const ButtonLoading = component((props) => {
 	return null;
 }, {
 	name: "ButtonLoading",
-	className: require_core_components_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "loading"))
+	className: require_core_components_utils.getClassName(require_utils_common_string.bem("button", "loading"))
 })();
 const ButtonStartLoading = component(ButtonLoading, {
 	name: "ButtonStartLoading",
-	className: require_core_components_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "loading", "start"))
+	className: require_core_components_utils.getClassName(require_utils_common_string.bem("button", "loading", "start"))
 })();
 const ButtonEndLoading = component(ButtonLoading, {
 	name: "ButtonEndLoading",
-	className: require_core_components_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "loading", "end"))
+	className: require_core_components_utils.getClassName(require_utils_common_string.bem("button", "loading", "end"))
 })();
 const ButtonIcon = component(({ children,...rest }) => {
 	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, {
@@ -136,15 +137,15 @@ const ButtonIcon = component(({ children,...rest }) => {
 	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
 }, {
 	name: "ButtonIcon",
-	className: require_core_components_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "icon"))
+	className: require_core_components_utils.getClassName(require_utils_common_string.bem("button", "icon"))
 })();
 const ButtonStartIcon = component(ButtonIcon, {
 	name: "ButtonStartIcon",
-	className: require_core_components_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "icon", "start"))
+	className: require_core_components_utils.getClassName(require_utils_common_string.bem("button", "icon", "start"))
 })();
 const ButtonEndIcon = component(ButtonIcon, {
 	name: "ButtonEndIcon",
-	className: require_core_components_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "icon", "end"))
+	className: require_core_components_utils.getClassName(require_utils_common_string.bem("button", "icon", "end"))
 })();
 
 //#endregion

package/dist/cjs/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":["value?: ElementType","node: HTMLElement | null","buttonStyle","styled","Ripple"],"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.cjs","names":["value?: ElementType","node: HTMLElement | null","buttonStyle","styled","Ripple"],"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/cjs/components/carousel/carousel.cjs

@@ -2,7 +2,7 @@
 
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+const require_utils_common_dom = require('../../utils/common/dom.cjs');
 const require_core_system_var = require('../../core/system/var.cjs');
 const require_core_system_factory = require('../../core/system/factory.cjs');
 const require_core_components_create_component = require('../../core/components/create-component.cjs');
@@ -96,7 +96,7 @@ const CarouselList = withContext("div", "list")(void 0, (props) => {
 	const { includeGapInSize } = useComponentContext();
 	const { getListProps } = require_components_carousel_use_carousel.useCarouselContext();
 	return {
-		"data-include-gap-in-size": (0, require_utils_index.utils_exports.dataAttr)(includeGapInSize),
+		"data-include-gap-in-size": require_utils_common_dom.dataAttr(includeGapInSize),
 		...getListProps(props)
 	};
 });
@@ -104,7 +104,7 @@ const CarouselItem = withContext("div", "item")(void 0, ({ slideSize,...rest })
 	const { includeGapInSize } = useComponentContext();
 	const { getItemProps } = require_components_carousel_use_carousel.useCarouselContext();
 	return {
-		"data-include-gap-in-size": (0, require_utils_index.utils_exports.dataAttr)(includeGapInSize),
+		"data-include-gap-in-size": require_utils_common_dom.dataAttr(includeGapInSize),
 		"--slide-size": require_core_system_var.varAttr(slideSize, "sizes"),
 		...getItemProps(rest)
 	};

package/dist/cjs/components/carousel/carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.cjs","names":["carouselStyle","CarouselContext","styled","IconButton","ChevronLeftIcon","ChevronRightIcon"],"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.cjs","names":["carouselStyle","CarouselContext","styled","IconButton","ChevronLeftIcon","ChevronRightIcon"],"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/cjs/components/carousel/use-carousel.cjs

@@ -6,7 +6,9 @@ const require_utils_context = require('../../utils/context.cjs');
 const require_utils_dom = require('../../utils/dom.cjs');
 const require_utils_effect = require('../../utils/effect.cjs');
 const require_utils_ref = require('../../utils/ref.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+const require_utils_common_assertion = require('../../utils/common/assertion.cjs');
+const require_utils_common_function = require('../../utils/common/function.cjs');
+const require_utils_common_dom = require('../../utils/common/dom.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 const require_hooks_use_boolean_index = require('../../hooks/use-boolean/index.cjs');
 const react = require_rolldown_runtime.__toESM(require("react"));
@@ -30,7 +32,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 	const [snapCount, setSnapCount] = (0, react.useState)(0);
 	const [count, setCount] = (0, react.useState)(0);
 	const watchResize = (0, react.useCallback)((methods, entries) => {
-		const result = (0, require_utils_index.utils_exports.isFunction)(watchResizeProp) ? watchResizeProp(methods, entries) : true;
+		const result = require_utils_common_assertion.isFunction(watchResizeProp) ? watchResizeProp(methods, entries) : true;
 		const snapCount$1 = methods.scrollSnapList().length;
 		const count$1 = methods.slideNodes().length;
 		setSnapCount(snapCount$1);
@@ -177,8 +179,8 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 		...rest,
 		...props,
 		ref: require_utils_ref.mergeRefs(ref, rest.ref, carouselRef),
-		onMouseEnter: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseEnter, onMouseEnter),
-		onMouseLeave: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseLeave, onMouseLeave)
+		onMouseEnter: require_utils_common_function.handlerAll(props.onMouseEnter, onMouseEnter),
+		onMouseLeave: require_utils_common_function.handlerAll(props.onMouseLeave, onMouseLeave)
 	}), [
 		id,
 		onMouseEnter,
@@ -207,7 +209,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 			"aria-roledescription": "slide",
 			"data-index": indexProp$1.toString(),
 			"data-orientation": orientation,
-			"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
+			"data-selected": require_utils_common_dom.dataAttr(selected),
 			role: "tabpanel",
 			...props
 		};
@@ -223,7 +225,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 		"data-orientation": orientation,
 		disabled: !carousel?.canScrollPrev(),
 		...props,
-		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, () => carousel?.scrollPrev())
+		onClick: require_utils_common_function.handlerAll(props.onClick, () => carousel?.scrollPrev())
 	}), [
 		carousel,
 		listId,
@@ -235,7 +237,7 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 		"data-orientation": orientation,
 		disabled: !carousel?.canScrollNext(),
 		...props,
-		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, () => carousel?.scrollNext())
+		onClick: require_utils_common_function.handlerAll(props.onClick, () => carousel?.scrollNext())
 	}), [
 		carousel,
 		listId,
@@ -257,15 +259,15 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
 			"aria-selected": selected,
 			"data-index": indexProp$1.toString(),
 			"data-orientation": orientation,
-			"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
+			"data-selected": require_utils_common_dom.dataAttr(selected),
 			role: "tab",
 			tabIndex: selected ? 0 : -1,
 			...props,
 			ref: require_utils_ref.mergeRefs(ref, (node) => {
 				indicatorMapRef.current.set(indexProp$1, node);
 			}),
-			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, () => carousel?.scrollTo(indexProp$1)),
-			onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props.onKeyDown, onKeyDown(indexProp$1))
+			onClick: require_utils_common_function.handlerAll(props.onClick, () => carousel?.scrollTo(indexProp$1)),
+			onKeyDown: require_utils_common_function.handlerAll(props.onKeyDown, onKeyDown(indexProp$1))
 		};
 	}, [
 		carousel,

package/dist/cjs/components/carousel/use-carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-carousel.cjs","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.cjs","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/cjs/components/circle-progress/circle-progress.cjs

@@ -2,7 +2,7 @@
 
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+const require_utils_common_assertion = require('../../utils/common/assertion.cjs');
 const require_core_css_merge_css = require('../../core/css/merge-css.cjs');
 const require_core_system_var = require('../../core/system/var.cjs');
 const require_core_system_factory = require('../../core/system/factory.cjs');
@@ -39,7 +39,7 @@ const CircleProgressRoot = withProvider(({ css, children, max, min, rangeColor,
 		}), children]
 	});
 }, "root")(({ boxSize, duration, thickness,...rest }) => ({
-	"--duration": (0, require_utils_index.utils_exports.isNumber)(duration) ? `${duration}s` : duration,
+	"--duration": require_utils_common_assertion.isNumber(duration) ? `${duration}s` : duration,
 	"--size": require_core_system_var.varAttr(boxSize, "sizes"),
 	"--thickness": require_core_system_var.varAttr(thickness, "sizes"),
 	...rest

package/dist/cjs/components/circle-progress/circle-progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"circle-progress.cjs","names":["circleProgressStyle","styled"],"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,6DACF,mBACAA,6EACD;;;;;;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,qDAAmB;EAAE;EAAK;EAAK;CAAO,EAAC;AAEzC,wBACE,4BAACC,mCAAO;EAAI,KAAK,oCAAS,KAAK,EAAE,aAAa,QAAS,EAAC;EAAE,GAAI;6BAC5D,4BAAC;GAAqB,GAAI,aAAa,YAAY;8BACjD,2BAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B,kBACF,2BAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B;IACmB,EAEtB;GACU;AAEhB,GACD,OACD,CAAC,CAAC,EAAE,SAAS,UAAU,UAAW,GAAG,MAAM,MAAM;CAChD,cAAc,gDAAS,SAAS,MAAM,SAAS,KAAK;CACpD,UAAU,gCAAQ,SAAS,QAAQ;CACnC,eAAe,gCAAQ,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.cjs","names":["circleProgressStyle","styled"],"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,6DACF,mBACAA,6EACD;;;;;;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,qDAAmB;EAAE;EAAK;EAAK;CAAO,EAAC;AAEzC,wBACE,4BAACC,mCAAO;EAAI,KAAK,oCAAS,KAAK,EAAE,aAAa,QAAS,EAAC;EAAE,GAAI;6BAC5D,4BAAC;GAAqB,GAAI,aAAa,YAAY;8BACjD,2BAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B,kBACF,2BAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B;IACmB,EAEtB;GACU;AAEhB,GACD,OACD,CAAC,CAAC,EAAE,SAAS,UAAU,UAAW,GAAG,MAAM,MAAM;CAChD,cAAc,wCAAS,SAAS,MAAM,SAAS,KAAK;CACpD,UAAU,gCAAQ,SAAS,QAAQ;CACnC,eAAe,gCAAQ,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"}

package/dist/cjs/components/collapse/collapse.cjs

@@ -2,7 +2,8 @@
 
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+const require_utils_common_assertion = require('../../utils/common/assertion.cjs');
+const require_utils_common_dom = require('../../utils/common/dom.cjs');
 const require_core_components_create_component = require('../../core/components/create-component.cjs');
 const require_components_motion_factory = require('../motion/factory.cjs');
 const require_components_motion_transition = require('../motion/transition.cjs');
@@ -21,7 +22,7 @@ const variants = {
 		...enter
 	}),
 	exit: ({ animationOpacity, delay, duration, exit, startingHeight: height, transition, transitionEnd } = {}) => ({
-		...animationOpacity ? { opacity: (0, require_utils_index.utils_exports.isNumeric)(height) ? 1 : 0 } : {},
+		...animationOpacity ? { opacity: require_utils_common_assertion.isNumeric(height) ? 1 : 0 } : {},
 		height,
 		transition: require_components_motion_transition.createTransition.exit(transition?.exit)(delay, duration),
 		transitionEnd: transitionEnd?.exit,
@@ -106,7 +107,7 @@ const Collapse = withContext(({ style, animationOpacity = true, delay, duration,
 		transitionEnd
 	]);
 	(0, react.useEffect)(() => {
-		if ((0, require_utils_index.utils_exports.createdDom)()) setMounted(true);
+		if (require_utils_common_dom.createdDom()) setMounted(true);
 	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
 		custom,

package/dist/cjs/components/collapse/collapse.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.cjs","names":["variants: Variants","collapseStyle","AnimatePresence","motion"],"sources":["../../../../src/components/collapse/collapse.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { CollapseStyle } from \"./collapse.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createdDom, isNumeric } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { createTransition } from \"../motion\"\nimport { collapseStyle } from \"./collapse.style\"\n\nconst variants: Variants = {\n  enter: ({\n    animationOpacity,\n    delay,\n    duration,\n    endingHeight: height,\n    enter,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: 1 } : {}),\n    height,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    animationOpacity,\n    delay,\n    duration,\n    exit,\n    startingHeight: height,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {}),\n    height,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface CollapseProps\n  extends WithTransitionProps<HTMLMotionProps>,\n    ThemeProps<CollapseStyle> {\n  /**\n   * If `true`, the opacity of the content will be animated.\n   *\n   * @default true\n   */\n  animationOpacity?: boolean\n  /**\n   * The height you want the content in its expanded state.\n   *\n   * @default \"auto\"\n   */\n  endingHeight?: number | string\n  /**\n   * The height you want the content in its collapsed state.\n   *\n   * @default 0\n   */\n  startingHeight?: number | string\n}\n\nexport const {\n  PropsContext: CollapsePropsContext,\n  usePropsContext: useCollapsePropsContext,\n  withContext,\n} = createComponent<CollapseProps, CollapseStyle>(\"collapse\", collapseStyle)\n\n/**\n * `Collapse` is a component that allows you to expand or collapse an element for display.\n *\n * @see https://yamada-ui.com/components/collapse\n */\nexport const Collapse = withContext(\n  ({\n    style,\n    animationOpacity = true,\n    delay,\n    duration,\n    endingHeight = \"auto\",\n    open: openProp,\n    startingHeight = 0,\n    transition: transitionProp,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const [mounted, setMounted] = useState(false)\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp : true\n\n    const transition = useMemo(() => {\n      if (!mounted) {\n        return { enter: { duration: 0 } }\n      } else if (transitionProp) {\n        return transitionProp\n      } else {\n        return {\n          enter: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n          exit: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n        }\n      }\n    }, [mounted, duration, transitionProp])\n\n    const custom = useMemo(\n      () => ({\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      }),\n      [\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      ],\n    )\n\n    useEffect(() => {\n      if (createdDom()) setMounted(true)\n    }, [])\n\n    return (\n      <AnimatePresence custom={custom} initial={false}>\n        {open ? (\n          <motion.div\n            style={{ overflow: \"hidden\", ...style }}\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial={unmountOnExit ? \"exit\" : false}\n            variants={variants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAMA,WAAqB;CACzB,OAAO,CAAC,EACN,kBACA,OACA,UACA,cAAc,QACd,OACA,YACA,eACD,GAAG,CAAE,OAAM;EACV,GAAI,mBAAmB,EAAE,SAAS,EAAG,IAAG,CAAE;EAC1C;EACA,YAAY,sDAAiB,MAAM,YAAY,MAAM,CAAC,OAAO,SAAS;EACtE,eAAe,eAAe;EAC9B,GAAG;CACJ;CACD,MAAM,CAAC,EACL,kBACA,OACA,UACA,MACA,gBAAgB,QAChB,YACA,eACD,GAAG,CAAE,OAAM;EACV,GAAI,mBAAmB,EAAE,SAAS,iDAAU,OAAO,GAAG,IAAI,EAAG,IAAG,CAAE;EAClE;EACA,YAAY,sDAAiB,KAAK,YAAY,KAAK,CAAC,OAAO,SAAS;EACpE,eAAe,eAAe;EAC9B,GAAG;CACJ;AACF;AAyBD,MAAa,EACX,cAAc,sBACd,iBAAiB,yBACjB,aACD,GAAG,yDAA8C,YAAYC,yDAAc;;;;;;AAO5E,MAAa,WAAW,YACtB,CAAC,EACC,OACA,mBAAmB,MACnB,OACA,UACA,eAAe,QACf,MAAM,UACN,iBAAiB,GACjB,YAAY,gBACZ,eACA,cACA,GAAG,MACJ,KAAK;CACJ,MAAM,CAAC,SAAS,WAAW,GAAG,oBAAS,MAAM;CAC7C,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,WAAW;CAExC,MAAM,aAAa,mBAAQ,MAAM;AAC/B,OAAK,QACH,QAAO,EAAE,OAAO,EAAE,UAAU,EAAG,EAAE;WACxB,eACT,QAAO;MAEP,QAAO;GACL,OAAO;IACL,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;IACD,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;GACF;GACD,MAAM;IACJ,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;IACD,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;GACF;EACF;CAEJ,GAAE;EAAC;EAAS;EAAU;CAAe,EAAC;CAEvC,MAAM,SAAS,mBACb,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACD,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,sBAAU,MAAM;AACd,MAAI,mDAAY,CAAE,YAAW,KAAK;CACnC,GAAE,CAAE,EAAC;AAEN,wBACE,2BAACC;EAAwB;EAAQ,SAAS;YACvC,uBACC,2BAACC,yCAAO;GACN,OAAO;IAAE,UAAU;IAAU,GAAG;GAAO;GAC9B;GACD;GACR,MAAK;GACL,SAAS,gBAAgB,SAAS;GACxB;GACV,GAAI;IACJ,GACA;GACY;AAErB,EACF,EAAE"}
+{"version":3,"file":"collapse.cjs","names":["variants: Variants","collapseStyle","AnimatePresence","motion"],"sources":["../../../../src/components/collapse/collapse.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { CollapseStyle } from \"./collapse.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createdDom, isNumeric } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { createTransition } from \"../motion\"\nimport { collapseStyle } from \"./collapse.style\"\n\nconst variants: Variants = {\n  enter: ({\n    animationOpacity,\n    delay,\n    duration,\n    endingHeight: height,\n    enter,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: 1 } : {}),\n    height,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    animationOpacity,\n    delay,\n    duration,\n    exit,\n    startingHeight: height,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {}),\n    height,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface CollapseProps\n  extends WithTransitionProps<HTMLMotionProps>,\n    ThemeProps<CollapseStyle> {\n  /**\n   * If `true`, the opacity of the content will be animated.\n   *\n   * @default true\n   */\n  animationOpacity?: boolean\n  /**\n   * The height you want the content in its expanded state.\n   *\n   * @default \"auto\"\n   */\n  endingHeight?: number | string\n  /**\n   * The height you want the content in its collapsed state.\n   *\n   * @default 0\n   */\n  startingHeight?: number | string\n}\n\nexport const {\n  PropsContext: CollapsePropsContext,\n  usePropsContext: useCollapsePropsContext,\n  withContext,\n} = createComponent<CollapseProps, CollapseStyle>(\"collapse\", collapseStyle)\n\n/**\n * `Collapse` is a component that allows you to expand or collapse an element for display.\n *\n * @see https://yamada-ui.com/components/collapse\n */\nexport const Collapse = withContext(\n  ({\n    style,\n    animationOpacity = true,\n    delay,\n    duration,\n    endingHeight = \"auto\",\n    open: openProp,\n    startingHeight = 0,\n    transition: transitionProp,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const [mounted, setMounted] = useState(false)\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp : true\n\n    const transition = useMemo(() => {\n      if (!mounted) {\n        return { enter: { duration: 0 } }\n      } else if (transitionProp) {\n        return transitionProp\n      } else {\n        return {\n          enter: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n          exit: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n        }\n      }\n    }, [mounted, duration, transitionProp])\n\n    const custom = useMemo(\n      () => ({\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      }),\n      [\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      ],\n    )\n\n    useEffect(() => {\n      if (createdDom()) setMounted(true)\n    }, [])\n\n    return (\n      <AnimatePresence custom={custom} initial={false}>\n        {open ? (\n          <motion.div\n            style={{ overflow: \"hidden\", ...style }}\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial={unmountOnExit ? \"exit\" : false}\n            variants={variants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAMA,WAAqB;CACzB,OAAO,CAAC,EACN,kBACA,OACA,UACA,cAAc,QACd,OACA,YACA,eACD,GAAG,CAAE,OAAM;EACV,GAAI,mBAAmB,EAAE,SAAS,EAAG,IAAG,CAAE;EAC1C;EACA,YAAY,sDAAiB,MAAM,YAAY,MAAM,CAAC,OAAO,SAAS;EACtE,eAAe,eAAe;EAC9B,GAAG;CACJ;CACD,MAAM,CAAC,EACL,kBACA,OACA,UACA,MACA,gBAAgB,QAChB,YACA,eACD,GAAG,CAAE,OAAM;EACV,GAAI,mBAAmB,EAAE,SAAS,yCAAU,OAAO,GAAG,IAAI,EAAG,IAAG,CAAE;EAClE;EACA,YAAY,sDAAiB,KAAK,YAAY,KAAK,CAAC,OAAO,SAAS;EACpE,eAAe,eAAe;EAC9B,GAAG;CACJ;AACF;AAyBD,MAAa,EACX,cAAc,sBACd,iBAAiB,yBACjB,aACD,GAAG,yDAA8C,YAAYC,yDAAc;;;;;;AAO5E,MAAa,WAAW,YACtB,CAAC,EACC,OACA,mBAAmB,MACnB,OACA,UACA,eAAe,QACf,MAAM,UACN,iBAAiB,GACjB,YAAY,gBACZ,eACA,cACA,GAAG,MACJ,KAAK;CACJ,MAAM,CAAC,SAAS,WAAW,GAAG,oBAAS,MAAM;CAC7C,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,WAAW;CAExC,MAAM,aAAa,mBAAQ,MAAM;AAC/B,OAAK,QACH,QAAO,EAAE,OAAO,EAAE,UAAU,EAAG,EAAE;WACxB,eACT,QAAO;MAEP,QAAO;GACL,OAAO;IACL,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;IACD,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;GACF;GACD,MAAM;IACJ,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;IACD,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAE;IAC3B;GACF;EACF;CAEJ,GAAE;EAAC;EAAS;EAAU;CAAe,EAAC;CAEvC,MAAM,SAAS,mBACb,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACD,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,sBAAU,MAAM;AACd,MAAI,qCAAY,CAAE,YAAW,KAAK;CACnC,GAAE,CAAE,EAAC;AAEN,wBACE,2BAACC;EAAwB;EAAQ,SAAS;YACvC,uBACC,2BAACC,yCAAO;GACN,OAAO;IAAE,UAAU;IAAU,GAAG;GAAO;GAC9B;GACD;GACR,MAAK;GACL,SAAS,gBAAgB,SAAS;GACxB;GACV,GAAI;IACJ,GACA;GACY;AAErB,EACF,EAAE"}

package/dist/cjs/components/color-swatch/color-swatch.cjs

@@ -2,7 +2,7 @@
 
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+const require_utils_common_assertion = require('../../utils/common/assertion.cjs');
 const require_core_system_var = require('../../core/system/var.cjs');
 const require_core_system_factory = require('../../core/system/factory.cjs');
 const require_core_components_create_component = require('../../core/components/create-component.cjs');
@@ -29,7 +29,7 @@ const { PropsContext: ColorSwatchPropsContext, usePropsContext: useColorSwatchPr
 */
 const ColorSwatch = withProvider(({ children, color = "#ffffff00", withShadow = true, overlays = defaultOverlays(color, withShadow),...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_core_system_factory.styled.div, {
-		"aria-label": (0, require_utils_index.utils_exports.isString)(color) ? color : void 0,
+		"aria-label": require_utils_common_assertion.isString(color) ? color : void 0,
 		"aria-roledescription": "color swatch",
 		role: "img",
 		...rest,

package/dist/cjs/components/color-swatch/color-swatch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.cjs","names":["background: CSSProps[\"color\"]","withShadow: boolean","overlays: HTMLStyledProps[]","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nconst defaultOverlays = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const overlays: HTMLStyledProps[] = [\n    {\n      \"--body\": varAttr([\"whiteAlpha.500\", \"blackAlpha.500\"], \"colors\"),\n      \"--checkers\": varAttr([\"blackAlpha.300\", \"whiteAlpha.300\"], \"colors\"),\n      bgImage:\n        \"linear-gradient(45deg, {checkers} 25%, transparent 25%), linear-gradient(-45deg, {checkers} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, {checkers} 75%), linear-gradient(-45deg, {body} 75%, {checkers} 75%)\",\n      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n      bgSize: `8px 8px`,\n    },\n    { background },\n  ]\n\n  if (withShadow)\n    overlays.push({\n      boxShadow: \"inner\",\n    })\n\n  return overlays\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">,\n    ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default \"#ffffff00\"\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  overlays?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nexport const {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    overlays = defaultOverlays(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {overlays.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;;;;;;AAQA,MAAM,kBAAkB,CACtBA,YACAC,eACsB;CACtB,MAAMC,WAA8B,CAClC;EACE,UAAU,gCAAQ,CAAC,kBAAkB,gBAAiB,GAAE,SAAS;EACjE,cAAc,gCAAQ,CAAC,kBAAkB,gBAAiB,GAAE,SAAS;EACrE,SACE;EACF,aAAa;EACb,SAAS;CACV,GACD,EAAE,WAAY,CACf;AAED,KAAI,WACF,UAAS,KAAK,EACZ,WAAW,QACZ,EAAC;AAEJ,QAAO;AACR;AAuBD,MAAa,EACX,cAAc,yBACd,iBAAiB,4BACjB,aACA,cACD,GAAG,6DACF,gBACAC,oEACD;;;;;;AAOD,MAAa,cAAc,aACzB,CAAC,EACC,UACA,QAAQ,aACR,aAAa,MACb,WAAW,gBAAgB,OAAO,WAAW,CAC7C,GAAG,MACJ,KAAK;AACJ,wBACE,4BAACC,mCAAO;EACN,cAAY,gDAAS,MAAM,GAAG;EAC9B,wBAAqB;EACrB,MAAK;EACL,GAAI;aAEH,UACA,SAAS,IAAI,CAAC,OAAO,0BACpB,2BAAC,sBAA+B,GAAI,SAAX,MAAoB,CAC7C;GACS;AAEhB,GACD,OACD,EAAE;AAIH,MAAa,qBAAqB,YAChC,OACA,UACD,EAAE"}
+{"version":3,"file":"color-swatch.cjs","names":["background: CSSProps[\"color\"]","withShadow: boolean","overlays: HTMLStyledProps[]","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nconst defaultOverlays = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const overlays: HTMLStyledProps[] = [\n    {\n      \"--body\": varAttr([\"whiteAlpha.500\", \"blackAlpha.500\"], \"colors\"),\n      \"--checkers\": varAttr([\"blackAlpha.300\", \"whiteAlpha.300\"], \"colors\"),\n      bgImage:\n        \"linear-gradient(45deg, {checkers} 25%, transparent 25%), linear-gradient(-45deg, {checkers} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, {checkers} 75%), linear-gradient(-45deg, {body} 75%, {checkers} 75%)\",\n      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n      bgSize: `8px 8px`,\n    },\n    { background },\n  ]\n\n  if (withShadow)\n    overlays.push({\n      boxShadow: \"inner\",\n    })\n\n  return overlays\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">,\n    ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default \"#ffffff00\"\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  overlays?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nexport const {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    overlays = defaultOverlays(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {overlays.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;;;;;;AAQA,MAAM,kBAAkB,CACtBA,YACAC,eACsB;CACtB,MAAMC,WAA8B,CAClC;EACE,UAAU,gCAAQ,CAAC,kBAAkB,gBAAiB,GAAE,SAAS;EACjE,cAAc,gCAAQ,CAAC,kBAAkB,gBAAiB,GAAE,SAAS;EACrE,SACE;EACF,aAAa;EACb,SAAS;CACV,GACD,EAAE,WAAY,CACf;AAED,KAAI,WACF,UAAS,KAAK,EACZ,WAAW,QACZ,EAAC;AAEJ,QAAO;AACR;AAuBD,MAAa,EACX,cAAc,yBACd,iBAAiB,4BACjB,aACA,cACD,GAAG,6DACF,gBACAC,oEACD;;;;;;AAOD,MAAa,cAAc,aACzB,CAAC,EACC,UACA,QAAQ,aACR,aAAa,MACb,WAAW,gBAAgB,OAAO,WAAW,CAC7C,GAAG,MACJ,KAAK;AACJ,wBACE,4BAACC,mCAAO;EACN,cAAY,wCAAS,MAAM,GAAG;EAC9B,wBAAqB;EACrB,MAAK;EACL,GAAI;aAEH,UACA,SAAS,IAAI,CAAC,OAAO,0BACpB,2BAAC,sBAA+B,GAAI,SAAX,MAAoB,CAC7C;GACS;AAEhB,GACD,OACD,EAAE;AAIH,MAAa,qBAAqB,YAChC,OACA,UACD,EAAE"}