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

package/dist/esm/components/scroll-area/use-scroll-area.js

@@ -3,7 +3,8 @@
 
 import { useSafeLayoutEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { handlerAll } from "../../utils/common/function.js";
+import { dataAttr, isMac, vendor } from "../../utils/common/dom.js";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 
 //#region src/components/scroll-area/use-scroll-area.ts
@@ -13,7 +14,7 @@ const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrol
 	const isAlways = type === "always";
 	const isNever = type === "never";
 	const isHidden = !isAlways && !isHovered && !isScrolling;
-	const isSafari = (0, utils_exports.isMac)() && (0, utils_exports.vendor)(/apple/i);
+	const isSafari = isMac() && vendor(/apple/i);
 	const uuid = useId();
 	const key = `${id ?? uuid}-${isHovered}-${isScrolling}`;
 	const hoverTimeout = useRef(void 0);
@@ -84,14 +85,14 @@ const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrol
 		...rest,
 		...isSafari ? safariProps : {},
 		...props,
-		"data-hidden": (0, utils_exports.dataAttr)(isHidden),
-		"data-hover": (0, utils_exports.dataAttr)(isHovered),
-		"data-never": (0, utils_exports.dataAttr)(isNever),
-		"data-scroll": (0, utils_exports.dataAttr)(isScrolling),
+		"data-hidden": dataAttr(isHidden),
+		"data-hover": dataAttr(isHovered),
+		"data-never": dataAttr(isNever),
+		"data-scroll": dataAttr(isScrolling),
 		tabIndex: 0,
-		onMouseEnter: (0, utils_exports.handlerAll)(props.onMouseEnter, rest.onMouseEnter, onMouseEnter),
-		onMouseLeave: (0, utils_exports.handlerAll)(props.onMouseLeave, rest.onMouseLeave, onMouseLeave),
-		onScroll: (0, utils_exports.handlerAll)(props.onScroll, rest.onScroll, onScroll)
+		onMouseEnter: handlerAll(props.onMouseEnter, rest.onMouseEnter, onMouseEnter),
+		onMouseLeave: handlerAll(props.onMouseLeave, rest.onMouseLeave, onMouseLeave),
+		onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll)
 	}), [
 		isNever,
 		ref,

package/dist/esm/components/scroll-area/use-scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-area.js","names":["ev: UIEvent<HTMLDivElement>","getRootProps: PropGetter"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport { dataAttr, handlerAll, isMac, vendor } from \"../../utils\"\nimport { mergeRefs, useSafeLayoutEffect } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  ref,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const safariProps = useMemo(\n    () => ({\n      key,\n      ref: mergeRefs(ref, scrollAreaRef),\n      \"data-key\": key,\n    }),\n    [key, ref, scrollAreaRef],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ style, ...props } = {}) => ({\n      ref,\n      style: { overflow: \"auto\", ...style },\n      ...rest,\n      ...(isSafari ? safariProps : {}),\n      ...props,\n      \"data-hidden\": dataAttr(isHidden),\n      \"data-hover\": dataAttr(isHovered),\n      \"data-never\": dataAttr(isNever),\n      \"data-scroll\": dataAttr(isScrolling),\n      tabIndex: 0,\n      onMouseEnter: handlerAll(\n        props.onMouseEnter,\n        rest.onMouseEnter,\n        onMouseEnter,\n      ),\n      onMouseLeave: handlerAll(\n        props.onMouseLeave,\n        rest.onMouseLeave,\n        onMouseLeave,\n      ),\n      onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n    }),\n    [\n      isNever,\n      ref,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      safariProps,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":"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"}
+{"version":3,"file":"use-scroll-area.js","names":["ev: UIEvent<HTMLDivElement>","getRootProps: PropGetter"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport { dataAttr, handlerAll, isMac, vendor } from \"../../utils\"\nimport { mergeRefs, useSafeLayoutEffect } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  ref,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const safariProps = useMemo(\n    () => ({\n      key,\n      ref: mergeRefs(ref, scrollAreaRef),\n      \"data-key\": key,\n    }),\n    [key, ref, scrollAreaRef],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ style, ...props } = {}) => ({\n      ref,\n      style: { overflow: \"auto\", ...style },\n      ...rest,\n      ...(isSafari ? safariProps : {}),\n      ...props,\n      \"data-hidden\": dataAttr(isHidden),\n      \"data-hover\": dataAttr(isHovered),\n      \"data-never\": dataAttr(isNever),\n      \"data-scroll\": dataAttr(isScrolling),\n      tabIndex: 0,\n      onMouseEnter: handlerAll(\n        props.onMouseEnter,\n        rest.onMouseEnter,\n        onMouseEnter,\n      ),\n      onMouseLeave: handlerAll(\n        props.onMouseLeave,\n        rest.onMouseLeave,\n        onMouseLeave,\n      ),\n      onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n    }),\n    [\n      isNever,\n      ref,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      safariProps,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":"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"}

package/dist/esm/components/segmented-control/use-segmented-control.js

@@ -4,7 +4,8 @@
 import { createContext } from "../../utils/context.js";
 import { visuallyHiddenAttributes } from "../../utils/dom.js";
 import { mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { handlerAll } from "../../utils/common/function.js";
+import { ariaAttr, dataAttr } from "../../utils/common/dom.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { createDescendant } from "../../hooks/use-descendant/index.js";
 import { useCallback, useId } from "react";
@@ -24,11 +25,11 @@ const useSegmentedControl = ({ id, name, defaultValue, disabled, orientation = "
 	name ??= uuid;
 	const getRootProps = useCallback((props) => ({
 		id,
-		"aria-disabled": (0, utils_exports.ariaAttr)(disabled),
+		"aria-disabled": ariaAttr(disabled),
 		"aria-orientation": orientation,
-		"data-disabled": (0, utils_exports.dataAttr)(disabled),
+		"data-disabled": dataAttr(disabled),
 		"data-orientation": orientation,
-		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
+		"data-readonly": dataAttr(readOnly),
 		role: "radiogroup",
 		...rest,
 		...props
@@ -62,15 +63,15 @@ const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps,...rest
 		setValue(ev.target.value);
 	}, [setValue]);
 	const getLabelProps = useCallback((props) => ({
-		"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
-		"aria-readonly": (0, utils_exports.ariaAttr)(trulyReadOnly),
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
+		"aria-disabled": ariaAttr(trulyDisabled),
+		"aria-readonly": ariaAttr(trulyReadOnly),
+		"data-checked": dataAttr(checked),
+		"data-disabled": dataAttr(trulyDisabled),
 		"data-index": index.toString(),
 		"data-orientation": orientation,
-		"data-readonly": (0, utils_exports.dataAttr)(trulyReadOnly),
-		"data-root-disabled": (0, utils_exports.dataAttr)(rootDisabled),
-		"data-root-readonly": (0, utils_exports.dataAttr)(rootReadOnly),
+		"data-readonly": dataAttr(trulyReadOnly),
+		"data-root-disabled": dataAttr(rootDisabled),
+		"data-root-readonly": dataAttr(rootReadOnly),
 		...props,
 		...rest
 	}), [
@@ -87,12 +88,12 @@ const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps,...rest
 		type: "radio",
 		name,
 		style: visuallyHiddenAttributes.style,
-		"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
-		"aria-readonly": (0, utils_exports.ariaAttr)(trulyReadOnly),
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
+		"aria-disabled": ariaAttr(trulyDisabled),
+		"aria-readonly": ariaAttr(trulyReadOnly),
+		"data-checked": dataAttr(checked),
+		"data-disabled": dataAttr(trulyDisabled),
 		"data-orientation": orientation,
-		"data-readonly": (0, utils_exports.dataAttr)(trulyReadOnly),
+		"data-readonly": dataAttr(trulyReadOnly),
 		checked,
 		disabled: trulyDisabled || trulyReadOnly,
 		readOnly: trulyReadOnly,
@@ -101,7 +102,7 @@ const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps,...rest
 		...inputProps,
 		...props,
 		ref: mergeRefs(register, ref),
-		onChange: (0, utils_exports.handlerAll)(props.onChange, inputProps?.onChange, onChange)
+		onChange: handlerAll(props.onChange, inputProps?.onChange, onChange)
 	}), [
 		orientation,
 		name,

package/dist/esm/components/segmented-control/use-segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-segmented-control.js","names":["getRootProps: PropGetter","ev: ChangeEvent<HTMLInputElement>","getLabelProps: PropGetter<\"label\">","getInputProps: PropGetter<\"input\">"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\nexport interface SegmentedControlContext\n  extends Omit<UseSegmentedControlReturn, \"descendants\" | \"getRootProps\"> {}\n\nexport const [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({ name: \"SegmentedControlContext\" })\n\nexport const { DescendantsContext, useDescendant, useDescendants } =\n  createDescendant<HTMLInputElement>()\n\nexport interface UseSegmentedControlProps<Y extends string = string>\n  extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      id,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"radiogroup\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">,\n    Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { index, register } = useDescendant({ disabled: disabled || readOnly })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-index\": index.toString(),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      \"data-root-disabled\": dataAttr(rootDisabled),\n      \"data-root-readonly\": dataAttr(rootReadOnly),\n      ...props,\n      ...rest,\n    }),\n    [\n      orientation,\n      trulyDisabled,\n      index,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAa,CAAC,yBAAyB,2BAA2B,GAChE,cAAuC,EAAE,MAAM,0BAA2B,EAAC;AAE7E,MAAa,EAAE,oBAAoB,eAAe,gBAAgB,GAChE,kBAAoC;AAwCtC,MAAa,sBAAsB,CAA4B,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,aACV,GAAG,MACyB,GAAG,CAAE,MAAK;CACtC,MAAM,OAAO,OAAO;CACpB,MAAM,CAAC,OAAO,SAAS,GAAG,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACX,EAAC;CACF,MAAM,cAAc,gBAAgB;AAEpC,QAAO;AACP,UAAS;CAET,MAAMA,eAA2B,YAC/B,CAAC,WAAW;EACV;EACA,iBAAiB,4BAAS,SAAS;EACnC,oBAAoB;EACpB,iBAAiB,4BAAS,SAAS;EACnC,oBAAoB;EACpB,iBAAiB,4BAAS,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;CACJ,IACD;EAAC;EAAU;EAAI;EAAa;EAAU;CAAK,EAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD;AACF;AAiBD,MAAa,0BAA0B,CAA4B,EACjE,UACA,UACA,OACA,WACA,GAAG,MAC6B,KAAK;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,eACR,GAAG,4BAA4B;CAChC,MAAM,EAAE,OAAO,UAAU,GAAG,cAAc,EAAE,UAAU,YAAY,SAAU,EAAC;CAC7E,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,iBAAiB;CAEvC,MAAM,WAAW,YACf,CAACC,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;CAC1B,GACD,CAAC,QAAS,EACX;CAED,MAAMC,gBAAqC,YACzC,CAAC,WAAW;EACV,iBAAiB,4BAAS,cAAc;EACxC,iBAAiB,4BAAS,cAAc;EACxC,gBAAgB,4BAAS,QAAQ;EACjC,iBAAiB,4BAAS,cAAc;EACxC,cAAc,MAAM,UAAU;EAC9B,oBAAoB;EACpB,iBAAiB,4BAAS,cAAc;EACxC,sBAAsB,4BAAS,aAAa;EAC5C,sBAAsB,4BAAS,aAAa;EAC5C,GAAG;EACH,GAAG;CACJ,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMC,gBAAqC,YACzC,CAAC,EAAE,IAAK,GAAG,OAAO,GAAG,CAAE,OAAM;EAC3B,MAAM;EACN;EACA,OAAO,yBAAyB;EAChC,iBAAiB,4BAAS,cAAc;EACxC,iBAAiB,4BAAS,cAAc;EACxC,gBAAgB,4BAAS,QAAQ;EACjC,iBAAiB,4BAAS,cAAc;EACxC,oBAAoB;EACpB,iBAAiB,4BAAS,cAAc;EACxC;EACA,UAAU,iBAAiB;EAC3B,UAAU;EACV,UAAU,uBAA0B;EACpC;EACA,GAAG;EACH,GAAG;EACH,KAAK,UAAU,UAAU,IAAI;EAC7B,UAAU,8BAAW,MAAM,UAAU,YAAY,UAAU,SAAS;CACrE,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,QAAO;EACL;EACA;CACD;AACF"}
+{"version":3,"file":"use-segmented-control.js","names":["getRootProps: PropGetter","ev: ChangeEvent<HTMLInputElement>","getLabelProps: PropGetter<\"label\">","getInputProps: PropGetter<\"input\">"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\nexport interface SegmentedControlContext\n  extends Omit<UseSegmentedControlReturn, \"descendants\" | \"getRootProps\"> {}\n\nexport const [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({ name: \"SegmentedControlContext\" })\n\nexport const { DescendantsContext, useDescendant, useDescendants } =\n  createDescendant<HTMLInputElement>()\n\nexport interface UseSegmentedControlProps<Y extends string = string>\n  extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      id,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"radiogroup\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">,\n    Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { index, register } = useDescendant({ disabled: disabled || readOnly })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-index\": index.toString(),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      \"data-root-disabled\": dataAttr(rootDisabled),\n      \"data-root-readonly\": dataAttr(rootReadOnly),\n      ...props,\n      ...rest,\n    }),\n    [\n      orientation,\n      trulyDisabled,\n      index,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,CAAC,yBAAyB,2BAA2B,GAChE,cAAuC,EAAE,MAAM,0BAA2B,EAAC;AAE7E,MAAa,EAAE,oBAAoB,eAAe,gBAAgB,GAChE,kBAAoC;AAwCtC,MAAa,sBAAsB,CAA4B,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,aACV,GAAG,MACyB,GAAG,CAAE,MAAK;CACtC,MAAM,OAAO,OAAO;CACpB,MAAM,CAAC,OAAO,SAAS,GAAG,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACX,EAAC;CACF,MAAM,cAAc,gBAAgB;AAEpC,QAAO;AACP,UAAS;CAET,MAAMA,eAA2B,YAC/B,CAAC,WAAW;EACV;EACA,iBAAiB,SAAS,SAAS;EACnC,oBAAoB;EACpB,iBAAiB,SAAS,SAAS;EACnC,oBAAoB;EACpB,iBAAiB,SAAS,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;CACJ,IACD;EAAC;EAAU;EAAI;EAAa;EAAU;CAAK,EAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD;AACF;AAiBD,MAAa,0BAA0B,CAA4B,EACjE,UACA,UACA,OACA,WACA,GAAG,MAC6B,KAAK;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,eACR,GAAG,4BAA4B;CAChC,MAAM,EAAE,OAAO,UAAU,GAAG,cAAc,EAAE,UAAU,YAAY,SAAU,EAAC;CAC7E,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,iBAAiB;CAEvC,MAAM,WAAW,YACf,CAACC,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;CAC1B,GACD,CAAC,QAAS,EACX;CAED,MAAMC,gBAAqC,YACzC,CAAC,WAAW;EACV,iBAAiB,SAAS,cAAc;EACxC,iBAAiB,SAAS,cAAc;EACxC,gBAAgB,SAAS,QAAQ;EACjC,iBAAiB,SAAS,cAAc;EACxC,cAAc,MAAM,UAAU;EAC9B,oBAAoB;EACpB,iBAAiB,SAAS,cAAc;EACxC,sBAAsB,SAAS,aAAa;EAC5C,sBAAsB,SAAS,aAAa;EAC5C,GAAG;EACH,GAAG;CACJ,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMC,gBAAqC,YACzC,CAAC,EAAE,IAAK,GAAG,OAAO,GAAG,CAAE,OAAM;EAC3B,MAAM;EACN;EACA,OAAO,yBAAyB;EAChC,iBAAiB,SAAS,cAAc;EACxC,iBAAiB,SAAS,cAAc;EACxC,gBAAgB,SAAS,QAAQ;EACjC,iBAAiB,SAAS,cAAc;EACxC,oBAAoB;EACpB,iBAAiB,SAAS,cAAc;EACxC;EACA,UAAU,iBAAiB;EAC3B,UAAU;EACV,UAAU,uBAA0B;EACpC;EACA,GAAG;EACH,GAAG;EACH,KAAK,UAAU,UAAU,IAAI;EAC7B,UAAU,WAAW,MAAM,UAAU,YAAY,UAAU,SAAS;CACrE,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,QAAO;EACL;EACA;CACD;AACF"}

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

@@ -1,7 +1,7 @@
 "use client";
 
 
-import { utils_exports } from "../../utils/index.js";
+import { replaceObject } from "../../utils/common/object.js";
 import { createComponent } from "../../core/components/create-component.js";
 import { Grid } from "../grid/grid.js";
 import { simpleGridStyle } from "./simple-grid.style.js";
@@ -16,10 +16,10 @@ const { PropsContext: SimpleGridPropsContext, usePropsContext: useSimpleGridProp
 */
 const SimpleGrid = withContext(Grid)(void 0, ({ columns, minChildWidth,...rest }) => {
 	const templateColumns = useMemo(() => {
-		if (minChildWidth) return (0, utils_exports.replaceObject)(minChildWidth, (value) => {
+		if (minChildWidth) return replaceObject(minChildWidth, (value) => {
 			return value != null ? `repeat(auto-fit, minmax({sizes.${value}, ${value}}, 1fr))` : void 0;
 		});
-		else return (0, utils_exports.replaceObject)(columns, (value) => value != null ? `repeat(${value}, minmax(0, 1fr))` : void 0);
+		else return replaceObject(columns, (value) => value != null ? `repeat(${value}, minmax(0, 1fr))` : void 0);
 	}, [minChildWidth, columns]);
 	return {
 		templateColumns,

package/dist/esm/components/simple-grid/simple-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-grid.js","names":[],"sources":["../../../../src/components/simple-grid/simple-grid.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  CSSProps,\n  StyleValue,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GridProps } from \"../grid\"\nimport type { SimpleGridStyle } from \"./simple-grid.style\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\nimport { Grid } from \"../grid\"\nimport { simpleGridStyle } from \"./simple-grid.style\"\n\nexport interface SimpleGridProps\n  extends Omit<WithoutThemeProps<GridProps, SimpleGridStyle>, \"columns\">,\n    ThemeProps<SimpleGridStyle> {\n  /**\n   * The number of columns.\n   */\n  columns?: StyleValue<number>\n  /**\n   * The width at which child elements will break into columns.\n   * Pass a number for pixel values or a string for any other valid CSS length.\n   */\n  minChildWidth?: CSSProps[\"minWidth\"]\n}\n\nexport const {\n  PropsContext: SimpleGridPropsContext,\n  usePropsContext: useSimpleGridPropsContext,\n  withContext,\n} = createComponent<SimpleGridProps, SimpleGridStyle>(\n  \"simple-grid\",\n  simpleGridStyle,\n)\n\n/**\n * `SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.\n *\n * @see https://yamada-ui.com/components/simple-grid\n */\nexport const SimpleGrid = withContext(Grid)(\n  undefined,\n  ({ columns, minChildWidth, ...rest }) => {\n    const templateColumns = useMemo(() => {\n      if (minChildWidth) {\n        return replaceObject(minChildWidth, (value) => {\n          return value != null\n            ? `repeat(auto-fit, minmax({sizes.${value}, ${value}}, 1fr))`\n            : undefined\n        })\n      } else {\n        return replaceObject(columns, (value) =>\n          value != null ? `repeat(${value}, minmax(0, 1fr))` : undefined,\n        )\n      }\n    }, [minChildWidth, columns])\n\n    return { templateColumns, ...rest }\n  },\n)\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,EACX,cAAc,wBACd,iBAAiB,2BACjB,aACD,GAAG,gBACF,eACA,gBACD;;;;;;AAOD,MAAa,aAAa,YAAY,KAAK,SAEzC,CAAC,EAAE,SAAS,cAAe,GAAG,MAAM,KAAK;CACvC,MAAM,kBAAkB,QAAQ,MAAM;AACpC,MAAI,cACF,QAAO,iCAAc,eAAe,CAAC,UAAU;AAC7C,UAAO,SAAS,QACX,iCAAiC,MAAM,IAAI,MAAM;EAEvD,EAAC;MAEF,QAAO,iCAAc,SAAS,CAAC,UAC7B,SAAS,QAAQ,SAAS,MAAM,4BACjC;CAEJ,GAAE,CAAC,eAAe,OAAQ,EAAC;AAE5B,QAAO;EAAE;EAAiB,GAAG;CAAM;AACpC,EACF"}
+{"version":3,"file":"simple-grid.js","names":[],"sources":["../../../../src/components/simple-grid/simple-grid.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  CSSProps,\n  StyleValue,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GridProps } from \"../grid\"\nimport type { SimpleGridStyle } from \"./simple-grid.style\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\nimport { Grid } from \"../grid\"\nimport { simpleGridStyle } from \"./simple-grid.style\"\n\nexport interface SimpleGridProps\n  extends Omit<WithoutThemeProps<GridProps, SimpleGridStyle>, \"columns\">,\n    ThemeProps<SimpleGridStyle> {\n  /**\n   * The number of columns.\n   */\n  columns?: StyleValue<number>\n  /**\n   * The width at which child elements will break into columns.\n   * Pass a number for pixel values or a string for any other valid CSS length.\n   */\n  minChildWidth?: CSSProps[\"minWidth\"]\n}\n\nexport const {\n  PropsContext: SimpleGridPropsContext,\n  usePropsContext: useSimpleGridPropsContext,\n  withContext,\n} = createComponent<SimpleGridProps, SimpleGridStyle>(\n  \"simple-grid\",\n  simpleGridStyle,\n)\n\n/**\n * `SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.\n *\n * @see https://yamada-ui.com/components/simple-grid\n */\nexport const SimpleGrid = withContext(Grid)(\n  undefined,\n  ({ columns, minChildWidth, ...rest }) => {\n    const templateColumns = useMemo(() => {\n      if (minChildWidth) {\n        return replaceObject(minChildWidth, (value) => {\n          return value != null\n            ? `repeat(auto-fit, minmax({sizes.${value}, ${value}}, 1fr))`\n            : undefined\n        })\n      } else {\n        return replaceObject(columns, (value) =>\n          value != null ? `repeat(${value}, minmax(0, 1fr))` : undefined,\n        )\n      }\n    }, [minChildWidth, columns])\n\n    return { templateColumns, ...rest }\n  },\n)\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,EACX,cAAc,wBACd,iBAAiB,2BACjB,aACD,GAAG,gBACF,eACA,gBACD;;;;;;AAOD,MAAa,aAAa,YAAY,KAAK,SAEzC,CAAC,EAAE,SAAS,cAAe,GAAG,MAAM,KAAK;CACvC,MAAM,kBAAkB,QAAQ,MAAM;AACpC,MAAI,cACF,QAAO,cAAc,eAAe,CAAC,UAAU;AAC7C,UAAO,SAAS,QACX,iCAAiC,MAAM,IAAI,MAAM;EAEvD,EAAC;MAEF,QAAO,cAAc,SAAS,CAAC,UAC7B,SAAS,QAAQ,SAAS,MAAM,4BACjC;CAEJ,GAAE,CAAC,eAAe,OAAQ,EAAC;AAE5B,QAAO;EAAE;EAAiB,GAAG;CAAM;AACpC,EACF"}

package/dist/esm/components/skeleton/skeleton.js

@@ -2,7 +2,8 @@
 
 
 import { getValidChildren } from "../../utils/children.js";
-import { utils_exports } from "../../utils/index.js";
+import { isNumber } from "../../utils/common/assertion.js";
+import { dataAttr } from "../../utils/common/dom.js";
 import { varAttr } from "../../core/system/var.js";
 import { createComponent } from "../../core/components/create-component.js";
 import { skeletonStyle } from "./skeleton.style.js";
@@ -21,11 +22,11 @@ const Skeleton = withContext("div", { transferProps: ["loading"] })(void 0, ({ c
 	fitContent ??= hasChildren;
 	return {
 		"aria-busy": loading,
-		"data-loaded": (0, utils_exports.dataAttr)(!loading),
-		"data-loading": (0, utils_exports.dataAttr)(loading),
-		"--duration": (0, utils_exports.isNumber)(duration) ? `${duration}s` : duration,
+		"data-loaded": dataAttr(!loading),
+		"data-loading": dataAttr(loading),
+		"--duration": isNumber(duration) ? `${duration}s` : duration,
 		"--end-color": varAttr(endColor, "colors"),
-		"--fade-duration": (0, utils_exports.isNumber)(fadeDuration) ? `${fadeDuration}s` : fadeDuration,
+		"--fade-duration": isNumber(fadeDuration) ? `${fadeDuration}s` : fadeDuration,
 		"--height": fitContent ? "fit-content" : void 0,
 		"--start-color": varAttr(startColor, "colors"),
 		"--width": fitContent ? "fit-content" : void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { SkeletonStyle } from \"./skeleton.style\"\nimport { useMemo } from \"react\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { dataAttr, getValidChildren, isNumber } from \"../../utils\"\nimport { skeletonStyle } from \"./skeleton.style\"\n\nexport interface SkeletonProps\n  extends HTMLStyledProps,\n    ThemeProps<SkeletonStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSProps[\"color\"]\n  /**\n   * The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  fitContent?: boolean\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSProps[\"color\"]\n}\n\nexport const {\n  PropsContext: SkeletonPropsContext,\n  usePropsContext: useSkeletonPropsContext,\n  withContext,\n} = createComponent<SkeletonProps, SkeletonStyle>(\"skeleton\", skeletonStyle)\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see https://yamada-ui.com/components/skeleton\n */\nexport const Skeleton = withContext(\"div\", { transferProps: [\"loading\"] })(\n  undefined,\n  ({\n    children,\n    duration,\n    endColor,\n    fadeDuration,\n    fitContent,\n    loading,\n    startColor,\n    ...rest\n  }) => {\n    const validChildren = useMemo(() => getValidChildren(children), [children])\n    const hasChildren = !!validChildren.length\n\n    fitContent ??= hasChildren\n\n    return {\n      \"aria-busy\": loading,\n      \"data-loaded\": dataAttr(!loading),\n      \"data-loading\": dataAttr(loading),\n      \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n      \"--end-color\": varAttr(endColor, \"colors\"),\n      \"--fade-duration\": isNumber(fadeDuration)\n        ? `${fadeDuration}s`\n        : fadeDuration,\n      \"--height\": fitContent ? \"fit-content\" : undefined,\n      \"--start-color\": varAttr(startColor, \"colors\"),\n      \"--width\": fitContent ? \"fit-content\" : undefined,\n      children,\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;;;;AAoCA,MAAa,EACX,cAAc,sBACd,iBAAiB,yBACjB,aACD,GAAG,gBAA8C,YAAY,cAAc;;;;;;AAO5E,MAAa,WAAW,YAAY,OAAO,EAAE,eAAe,CAAC,SAAU,EAAE,EAAC,SAExE,CAAC,EACC,UACA,UACA,UACA,cACA,YACA,SACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS,EAAE,CAAC,QAAS,EAAC;CAC3E,MAAM,gBAAgB,cAAc;AAEpC,gBAAe;AAEf,QAAO;EACL,aAAa;EACb,eAAe,6BAAU,QAAQ;EACjC,gBAAgB,4BAAS,QAAQ;EACjC,cAAc,4BAAS,SAAS,MAAM,SAAS,KAAK;EACpD,eAAe,QAAQ,UAAU,SAAS;EAC1C,mBAAmB,4BAAS,aAAa,MAClC,aAAa,KAChB;EACJ,YAAY,aAAa;EACzB,iBAAiB,QAAQ,YAAY,SAAS;EAC9C,WAAW,aAAa;EACxB;EACA,GAAG;CACJ;AACF,EACF"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { SkeletonStyle } from \"./skeleton.style\"\nimport { useMemo } from \"react\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { dataAttr, getValidChildren, isNumber } from \"../../utils\"\nimport { skeletonStyle } from \"./skeleton.style\"\n\nexport interface SkeletonProps\n  extends HTMLStyledProps,\n    ThemeProps<SkeletonStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSProps[\"color\"]\n  /**\n   * The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  fitContent?: boolean\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSProps[\"color\"]\n}\n\nexport const {\n  PropsContext: SkeletonPropsContext,\n  usePropsContext: useSkeletonPropsContext,\n  withContext,\n} = createComponent<SkeletonProps, SkeletonStyle>(\"skeleton\", skeletonStyle)\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see https://yamada-ui.com/components/skeleton\n */\nexport const Skeleton = withContext(\"div\", { transferProps: [\"loading\"] })(\n  undefined,\n  ({\n    children,\n    duration,\n    endColor,\n    fadeDuration,\n    fitContent,\n    loading,\n    startColor,\n    ...rest\n  }) => {\n    const validChildren = useMemo(() => getValidChildren(children), [children])\n    const hasChildren = !!validChildren.length\n\n    fitContent ??= hasChildren\n\n    return {\n      \"aria-busy\": loading,\n      \"data-loaded\": dataAttr(!loading),\n      \"data-loading\": dataAttr(loading),\n      \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n      \"--end-color\": varAttr(endColor, \"colors\"),\n      \"--fade-duration\": isNumber(fadeDuration)\n        ? `${fadeDuration}s`\n        : fadeDuration,\n      \"--height\": fitContent ? \"fit-content\" : undefined,\n      \"--start-color\": varAttr(startColor, \"colors\"),\n      \"--width\": fitContent ? \"fit-content\" : undefined,\n      children,\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;;;;;AAoCA,MAAa,EACX,cAAc,sBACd,iBAAiB,yBACjB,aACD,GAAG,gBAA8C,YAAY,cAAc;;;;;;AAO5E,MAAa,WAAW,YAAY,OAAO,EAAE,eAAe,CAAC,SAAU,EAAE,EAAC,SAExE,CAAC,EACC,UACA,UACA,UACA,cACA,YACA,SACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS,EAAE,CAAC,QAAS,EAAC;CAC3E,MAAM,gBAAgB,cAAc;AAEpC,gBAAe;AAEf,QAAO;EACL,aAAa;EACb,eAAe,UAAU,QAAQ;EACjC,gBAAgB,SAAS,QAAQ;EACjC,cAAc,SAAS,SAAS,MAAM,SAAS,KAAK;EACpD,eAAe,QAAQ,UAAU,SAAS;EAC1C,mBAAmB,SAAS,aAAa,MAClC,aAAa,KAChB;EACJ,YAAY,aAAa;EACzB,iBAAiB,QAAQ,YAAY,SAAS;EAC9C,WAAW,aAAa;EACxB;EACA,GAAG;CACJ;AACF,EACF"}

package/dist/esm/components/stack/stack.js

@@ -2,7 +2,7 @@
 
 
 import { getValidChildren } from "../../utils/children.js";
-import { utils_exports } from "../../utils/index.js";
+import { replaceObject } from "../../utils/common/object.js";
 import { styled } from "../../core/system/factory.js";
 import { createComponent } from "../../core/components/create-component.js";
 import { stackStyle } from "./stack.style.js";
@@ -22,9 +22,9 @@ const Stack = withContext(({ align: alignItems, children, direction: flexDirecti
 	const cloneChildren = useMemo(() => separator ? validChildren.map((child, index) => {
 		const key = typeof child.key !== "undefined" ? child.key : index;
 		const cloneSeparator = cloneElement(separator, {
-			borderWidth: (0, utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "0 0 1px 0" : "0 0 0 1px"),
-			h: (0, utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "fit-content" : "100%"),
-			w: (0, utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "100%" : "fit-content")
+			borderWidth: replaceObject(flexDirection, (value) => isColumn(value) ? "0 0 1px 0" : "0 0 0 1px"),
+			h: replaceObject(flexDirection, (value) => isColumn(value) ? "fit-content" : "100%"),
+			w: replaceObject(flexDirection, (value) => isColumn(value) ? "100%" : "fit-content")
 		});
 		return /* @__PURE__ */ jsxs(Fragment, { children: [!!index ? cloneSeparator : null, child] }, key);
 	}) : validChildren, [

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

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":["value: any"],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { getValidChildren, replaceObject } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n  /**\n   * The CSS `align-items` property.\n   */\n  align?: CSSProps[\"alignItems\"]\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSProps[\"flexDirection\"]\n  /**\n   * The CSS `justify-content` property.\n   */\n  justify?: CSSProps[\"justifyContent\"]\n  /**\n   * If `true`, each stack item will show a separator.\n   */\n  separator?: ReactElement\n  /**\n   * The CSS `flex-wrap` property.\n   */\n  wrap?: CSSProps[\"flexWrap\"]\n}\n\nexport const {\n  PropsContext: StackPropsContext,\n  usePropsContext: useStackPropsContext,\n  withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\n/**\n * `Stack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/components/stack\n */\nexport const Stack = withContext(\n  ({\n    align: alignItems,\n    children,\n    direction: flexDirection = \"column\",\n    justify: justifyContent,\n    separator,\n    wrap: flexWrap,\n    ...rest\n  }) => {\n    const isColumn = (value: any) =>\n      value === \"column\" || value === \"column-reverse\"\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = useMemo(\n      () =>\n        separator\n          ? validChildren.map((child, index) => {\n              const key = typeof child.key !== \"undefined\" ? child.key : index\n\n              const cloneSeparator = cloneElement<any>(separator, {\n                borderWidth: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n                ),\n                h: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"fit-content\" : \"100%\",\n                ),\n                w: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"100%\" : \"fit-content\",\n                ),\n              })\n\n              return (\n                <Fragment key={key}>\n                  {!!index ? cloneSeparator : null}\n                  {child}\n                </Fragment>\n              )\n            })\n          : validChildren,\n      [separator, flexDirection, validChildren],\n    )\n\n    return (\n      <styled.div\n        alignItems={alignItems}\n        flexDirection={flexDirection}\n        flexWrap={flexWrap}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAa,EACX,cAAc,mBACd,iBAAiB,sBACjB,aACD,GAAG,gBAAwC,SAAS,WAAW;;;;;;AAOhE,MAAa,QAAQ,YACnB,CAAC,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,SACN,GAAG,MACJ,KAAK;CACJ,MAAM,WAAW,CAACA,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,MAAM,gBAAgB,QACpB,MACE,YACI,cAAc,IAAI,CAAC,OAAO,UAAU;EAClC,MAAM,aAAa,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,iBAAiB,aAAkB,WAAW;GAClD,aAAa,iCAAc,eAAe,CAAC,UACzC,SAAS,MAAM,GAAG,cAAc,YACjC;GACD,GAAG,iCAAc,eAAe,CAAC,UAC/B,SAAS,MAAM,GAAG,gBAAgB,OACnC;GACD,GAAG,iCAAc,eAAe,CAAC,UAC/B,SAAS,MAAM,GAAG,SAAS,cAC5B;EACF,EAAC;AAEF,yBACE,KAAC,yBACI,QAAQ,iBAAiB,MAC3B,UAFY,IAGJ;CAEd,EAAC,GACF,eACN;EAAC;EAAW;EAAe;CAAc,EAC1C;AAED,wBACE,IAAC,OAAO;EACM;EACG;EACL;EACM;EAChB,GAAI;YAEH;GACU;AAEhB,EACF,EAAE"}
+{"version":3,"file":"stack.js","names":["value: any"],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { getValidChildren, replaceObject } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n  /**\n   * The CSS `align-items` property.\n   */\n  align?: CSSProps[\"alignItems\"]\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSProps[\"flexDirection\"]\n  /**\n   * The CSS `justify-content` property.\n   */\n  justify?: CSSProps[\"justifyContent\"]\n  /**\n   * If `true`, each stack item will show a separator.\n   */\n  separator?: ReactElement\n  /**\n   * The CSS `flex-wrap` property.\n   */\n  wrap?: CSSProps[\"flexWrap\"]\n}\n\nexport const {\n  PropsContext: StackPropsContext,\n  usePropsContext: useStackPropsContext,\n  withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\n/**\n * `Stack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/components/stack\n */\nexport const Stack = withContext(\n  ({\n    align: alignItems,\n    children,\n    direction: flexDirection = \"column\",\n    justify: justifyContent,\n    separator,\n    wrap: flexWrap,\n    ...rest\n  }) => {\n    const isColumn = (value: any) =>\n      value === \"column\" || value === \"column-reverse\"\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = useMemo(\n      () =>\n        separator\n          ? validChildren.map((child, index) => {\n              const key = typeof child.key !== \"undefined\" ? child.key : index\n\n              const cloneSeparator = cloneElement<any>(separator, {\n                borderWidth: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n                ),\n                h: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"fit-content\" : \"100%\",\n                ),\n                w: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"100%\" : \"fit-content\",\n                ),\n              })\n\n              return (\n                <Fragment key={key}>\n                  {!!index ? cloneSeparator : null}\n                  {child}\n                </Fragment>\n              )\n            })\n          : validChildren,\n      [separator, flexDirection, validChildren],\n    )\n\n    return (\n      <styled.div\n        alignItems={alignItems}\n        flexDirection={flexDirection}\n        flexWrap={flexWrap}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAa,EACX,cAAc,mBACd,iBAAiB,sBACjB,aACD,GAAG,gBAAwC,SAAS,WAAW;;;;;;AAOhE,MAAa,QAAQ,YACnB,CAAC,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,SACN,GAAG,MACJ,KAAK;CACJ,MAAM,WAAW,CAACA,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,MAAM,gBAAgB,QACpB,MACE,YACI,cAAc,IAAI,CAAC,OAAO,UAAU;EAClC,MAAM,aAAa,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,iBAAiB,aAAkB,WAAW;GAClD,aAAa,cAAc,eAAe,CAAC,UACzC,SAAS,MAAM,GAAG,cAAc,YACjC;GACD,GAAG,cAAc,eAAe,CAAC,UAC/B,SAAS,MAAM,GAAG,gBAAgB,OACnC;GACD,GAAG,cAAc,eAAe,CAAC,UAC/B,SAAS,MAAM,GAAG,SAAS,cAC5B;EACF,EAAC;AAEF,yBACE,KAAC,yBACI,QAAQ,iBAAiB,MAC3B,UAFY,IAGJ;CAEd,EAAC,GACF,eACN;EAAC;EAAW;EAAe;CAAc,EAC1C;AAED,wBACE,IAAC,OAAO;EACM;EACG;EACL;EACM;EAChB,GAAI;YAEH;GACU;AAEhB,EACF,EAAE"}

package/dist/esm/components/stat/stat.js

@@ -2,7 +2,7 @@
 
 
 import { findChild, getValidChildren, omitChildren } from "../../utils/children.js";
-import { utils_exports } from "../../utils/index.js";
+import { isEmpty } from "../../utils/common/assertion.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { TriangleIcon } from "../icon/icons/triangle-icon.js";
@@ -22,7 +22,7 @@ const StatRoot = withProvider(({ children, helperMessage, icon, label, value, he
 	const customStatLabel = findChild(validChildren, StatLabel);
 	const customStatValue = findChild(validChildren, StatValue);
 	const customStatHelperMessage = findChild(validChildren, StatHelperMessage);
-	const cloneChildren = !(0, utils_exports.isEmpty)(validChildren) ? omitChildren(validChildren, StatLabel, StatValue, StatHelperMessage) : children;
+	const cloneChildren = !isEmpty(validChildren) ? omitChildren(validChildren, StatLabel, StatValue, StatHelperMessage) : children;
 	return /* @__PURE__ */ jsxs(styled.dl, {
 		...rest,
 		children: [

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

@@ -1 +1 @@
-{"version":3,"file":"stat.js","names":[],"sources":["../../../../src/components/stat/stat.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatStyle } from \"./stat.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { findChild, getValidChildren, isEmpty, omitChildren } from \"../../utils\"\nimport { TriangleIcon } from \"../icon\"\nimport { statStyle } from \"./stat.style\"\n\nexport interface StatRootProps\n  extends HTMLStyledProps<\"dl\">,\n    ThemeProps<StatStyle> {\n  /**\n   * If `true`, container will center its children regardless of their width.\n   *\n   * @default false\n   */\n  centerContent?: boolean\n  /**\n   * The stat helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The stat icon to use.\n   */\n  icon?: StatIconProps[\"type\"]\n  /**\n   * The stat label to use.\n   */\n  label?: ReactNode\n  /**\n   * The stat value to use.\n   */\n  value?: ReactNode\n  /**\n   * Props for stat helper message component.\n   */\n  helperMessageProps?: StatHelperMessageProps\n  /**\n   * Props for stat icon component.\n   */\n  iconProps?: Omit<StatIconProps, \"type\">\n  /**\n   * Props for stat label component.\n   */\n  labelProps?: StatLabelProps\n  /**\n   * Props for stat value component.\n   */\n  valueProps?: StatValueProps\n}\n\nexport const {\n  PropsContext: StatPropsContext,\n  usePropsContext: useStatPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StatRootProps, StatStyle>(\"stat\", statStyle)\n\n/**\n * `Stat` is used to show numbers and data in a box.\n *\n * @see https://yamada-ui.com/components/stat\n */\nexport const StatRoot = withProvider<\"dl\", StatRootProps>(\n  ({\n    children,\n    helperMessage,\n    icon,\n    label,\n    value,\n    helperMessageProps,\n    iconProps,\n    labelProps,\n    valueProps,\n    ...rest\n  }) => {\n    const validChildren = getValidChildren(children)\n    const customStatLabel = findChild(validChildren, StatLabel)\n    const customStatValue = findChild(validChildren, StatValue)\n    const customStatHelperMessage = findChild(validChildren, StatHelperMessage)\n    const cloneChildren = !isEmpty(validChildren)\n      ? omitChildren(validChildren, StatLabel, StatValue, StatHelperMessage)\n      : children\n\n    return (\n      <styled.dl {...rest}>\n        {customStatLabel ?? <StatLabel {...labelProps}>{label}</StatLabel>}\n        {customStatValue ?? <StatValue {...valueProps}>{value}</StatValue>}\n        {customStatHelperMessage ?? (\n          <StatHelperMessage {...helperMessageProps}>\n            {icon ? <StatIcon type={icon} {...iconProps} /> : null}\n            {helperMessage}\n          </StatHelperMessage>\n        )}\n        {cloneChildren}\n      </styled.dl>\n    )\n  },\n  \"root\",\n)()\n\nexport interface StatIconProps extends HTMLStyledProps<\"svg\"> {\n  /**\n   * The type of the icon.\n   *\n   * @default \"increase\"\n   */\n  type?: \"decrease\" | \"increase\"\n}\n\nexport const StatIcon = withContext<\"svg\", StatIconProps>(\n  ({ type = \"increase\", ...rest }) => {\n    const { t } = useI18n(\"stat\")\n\n    return (\n      <TriangleIcon\n        aria-label={type === \"increase\" ? t(\"Increased by\") : t(\"Decreased by\")}\n        data-type={type}\n        {...rest}\n      />\n    )\n  },\n  \"icon\",\n)()\n\nexport interface StatLabelProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const StatLabel = withContext<\"dt\", StatLabelProps>(\"dt\", \"label\")()\n\nexport interface StatValueProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatValue = withContext<\"dd\", StatValueProps>(\"dd\", \"value\")()\n\nexport interface StatUnitProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StatUnit = withContext<\"span\", StatUnitProps>(\"span\", \"unit\")()\n\nexport interface StatHelperMessageProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatHelperMessage = withContext<\"dd\", StatHelperMessageProps>(\n  \"dd\",\n  \"helperMessage\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAsDA,MAAa,EACX,cAAc,kBACd,iBAAiB,qBACjB,aACA,cACD,GAAG,oBAA8C,QAAQ,UAAU;;;;;;AAOpE,MAAa,WAAW,aACtB,CAAC,EACC,UACA,eACA,MACA,OACA,OACA,oBACA,WACA,YACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,kBAAkB,UAAU,eAAe,UAAU;CAC3D,MAAM,kBAAkB,UAAU,eAAe,UAAU;CAC3D,MAAM,0BAA0B,UAAU,eAAe,kBAAkB;CAC3E,MAAM,iBAAiB,2BAAQ,cAAc,GACzC,aAAa,eAAe,WAAW,WAAW,kBAAkB,GACpE;AAEJ,wBACE,KAAC,OAAO;EAAG,GAAI;;GACZ,mCAAmB,IAAC;IAAU,GAAI;cAAa;KAAkB;GACjE,mCAAmB,IAAC;IAAU,GAAI;cAAa;KAAkB;GACjE,2CACC,KAAC;IAAkB,GAAI;eACpB,uBAAO,IAAC;KAAS,MAAM;KAAM,GAAI;MAAa,GAAG,MACjD;KACiB;GAErB;;GACS;AAEf,GACD,OACD,EAAE;AAWH,MAAa,WAAW,YACtB,CAAC,EAAE,OAAO,WAAY,GAAG,MAAM,KAAK;CAClC,MAAM,EAAE,GAAG,GAAG,QAAQ,OAAO;AAE7B,wBACE,IAAC;EACC,cAAY,SAAS,aAAa,EAAE,eAAe,GAAG,EAAE,eAAe;EACvE,aAAW;EACX,GAAI;GACJ;AAEL,GACD,OACD,EAAE;AAIH,MAAa,YAAY,YAAkC,MAAM,QAAQ,EAAE;AAI3E,MAAa,YAAY,YAAkC,MAAM,QAAQ,EAAE;AAI3E,MAAa,WAAW,YAAmC,QAAQ,OAAO,EAAE;AAI5E,MAAa,oBAAoB,YAC/B,MACA,gBACD,EAAE"}
+{"version":3,"file":"stat.js","names":[],"sources":["../../../../src/components/stat/stat.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatStyle } from \"./stat.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { findChild, getValidChildren, isEmpty, omitChildren } from \"../../utils\"\nimport { TriangleIcon } from \"../icon\"\nimport { statStyle } from \"./stat.style\"\n\nexport interface StatRootProps\n  extends HTMLStyledProps<\"dl\">,\n    ThemeProps<StatStyle> {\n  /**\n   * If `true`, container will center its children regardless of their width.\n   *\n   * @default false\n   */\n  centerContent?: boolean\n  /**\n   * The stat helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The stat icon to use.\n   */\n  icon?: StatIconProps[\"type\"]\n  /**\n   * The stat label to use.\n   */\n  label?: ReactNode\n  /**\n   * The stat value to use.\n   */\n  value?: ReactNode\n  /**\n   * Props for stat helper message component.\n   */\n  helperMessageProps?: StatHelperMessageProps\n  /**\n   * Props for stat icon component.\n   */\n  iconProps?: Omit<StatIconProps, \"type\">\n  /**\n   * Props for stat label component.\n   */\n  labelProps?: StatLabelProps\n  /**\n   * Props for stat value component.\n   */\n  valueProps?: StatValueProps\n}\n\nexport const {\n  PropsContext: StatPropsContext,\n  usePropsContext: useStatPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StatRootProps, StatStyle>(\"stat\", statStyle)\n\n/**\n * `Stat` is used to show numbers and data in a box.\n *\n * @see https://yamada-ui.com/components/stat\n */\nexport const StatRoot = withProvider<\"dl\", StatRootProps>(\n  ({\n    children,\n    helperMessage,\n    icon,\n    label,\n    value,\n    helperMessageProps,\n    iconProps,\n    labelProps,\n    valueProps,\n    ...rest\n  }) => {\n    const validChildren = getValidChildren(children)\n    const customStatLabel = findChild(validChildren, StatLabel)\n    const customStatValue = findChild(validChildren, StatValue)\n    const customStatHelperMessage = findChild(validChildren, StatHelperMessage)\n    const cloneChildren = !isEmpty(validChildren)\n      ? omitChildren(validChildren, StatLabel, StatValue, StatHelperMessage)\n      : children\n\n    return (\n      <styled.dl {...rest}>\n        {customStatLabel ?? <StatLabel {...labelProps}>{label}</StatLabel>}\n        {customStatValue ?? <StatValue {...valueProps}>{value}</StatValue>}\n        {customStatHelperMessage ?? (\n          <StatHelperMessage {...helperMessageProps}>\n            {icon ? <StatIcon type={icon} {...iconProps} /> : null}\n            {helperMessage}\n          </StatHelperMessage>\n        )}\n        {cloneChildren}\n      </styled.dl>\n    )\n  },\n  \"root\",\n)()\n\nexport interface StatIconProps extends HTMLStyledProps<\"svg\"> {\n  /**\n   * The type of the icon.\n   *\n   * @default \"increase\"\n   */\n  type?: \"decrease\" | \"increase\"\n}\n\nexport const StatIcon = withContext<\"svg\", StatIconProps>(\n  ({ type = \"increase\", ...rest }) => {\n    const { t } = useI18n(\"stat\")\n\n    return (\n      <TriangleIcon\n        aria-label={type === \"increase\" ? t(\"Increased by\") : t(\"Decreased by\")}\n        data-type={type}\n        {...rest}\n      />\n    )\n  },\n  \"icon\",\n)()\n\nexport interface StatLabelProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const StatLabel = withContext<\"dt\", StatLabelProps>(\"dt\", \"label\")()\n\nexport interface StatValueProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatValue = withContext<\"dd\", StatValueProps>(\"dd\", \"value\")()\n\nexport interface StatUnitProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StatUnit = withContext<\"span\", StatUnitProps>(\"span\", \"unit\")()\n\nexport interface StatHelperMessageProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatHelperMessage = withContext<\"dd\", StatHelperMessageProps>(\n  \"dd\",\n  \"helperMessage\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAsDA,MAAa,EACX,cAAc,kBACd,iBAAiB,qBACjB,aACA,cACD,GAAG,oBAA8C,QAAQ,UAAU;;;;;;AAOpE,MAAa,WAAW,aACtB,CAAC,EACC,UACA,eACA,MACA,OACA,OACA,oBACA,WACA,YACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,kBAAkB,UAAU,eAAe,UAAU;CAC3D,MAAM,kBAAkB,UAAU,eAAe,UAAU;CAC3D,MAAM,0BAA0B,UAAU,eAAe,kBAAkB;CAC3E,MAAM,iBAAiB,QAAQ,cAAc,GACzC,aAAa,eAAe,WAAW,WAAW,kBAAkB,GACpE;AAEJ,wBACE,KAAC,OAAO;EAAG,GAAI;;GACZ,mCAAmB,IAAC;IAAU,GAAI;cAAa;KAAkB;GACjE,mCAAmB,IAAC;IAAU,GAAI;cAAa;KAAkB;GACjE,2CACC,KAAC;IAAkB,GAAI;eACpB,uBAAO,IAAC;KAAS,MAAM;KAAM,GAAI;MAAa,GAAG,MACjD;KACiB;GAErB;;GACS;AAEf,GACD,OACD,EAAE;AAWH,MAAa,WAAW,YACtB,CAAC,EAAE,OAAO,WAAY,GAAG,MAAM,KAAK;CAClC,MAAM,EAAE,GAAG,GAAG,QAAQ,OAAO;AAE7B,wBACE,IAAC;EACC,cAAY,SAAS,aAAa,EAAE,eAAe,GAAG,EAAE,eAAe;EACvE,aAAW;EACX,GAAI;GACJ;AAEL,GACD,OACD,EAAE;AAIH,MAAa,YAAY,YAAkC,MAAM,QAAQ,EAAE;AAI3E,MAAa,YAAY,YAAkC,MAAM,QAAQ,EAAE;AAI3E,MAAa,WAAW,YAAmC,QAAQ,OAAO,EAAE;AAI5E,MAAa,oBAAoB,YAC/B,MACA,gBACD,EAAE"}

package/dist/esm/components/steps/steps.js

@@ -1,7 +1,7 @@
 "use client";
 
 
-import { utils_exports } from "../../utils/index.js";
+import { isNull, isUndefined } from "../../utils/common/assertion.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { CheckIcon } from "../icon/icons/check-icon.js";
@@ -171,7 +171,7 @@ const StepsContents = ({ children }) => {
 	const { items } = useComponentContext();
 	return useMemo(() => {
 		if (children) return children;
-		else return items?.map(({ content, contentProps }, index) => (0, utils_exports.isUndefined)(content) || (0, utils_exports.isNull)(content) ? null : /* @__PURE__ */ jsx(StepsContent, {
+		else return items?.map(({ content, contentProps }, index) => isUndefined(content) || isNull(content) ? null : /* @__PURE__ */ jsx(StepsContent, {
 			index,
 			...contentProps,
 			children: content

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

@@ -1 +1 @@
-{"version":3,"file":"steps.js","names":["rest","StepsContents: FC<StepsContentsProps>"],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, isUndefined } from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n  StepsContext,\n  StepsDescendantsContext,\n  StepsItemContext,\n  useSteps,\n  useStepsContext,\n  useStepsItem,\n  useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext\n  extends Pick<StepsRootProps, \"items\" | \"lazy\" | \"lazyBehavior\"> {}\n\ninterface StepsItem\n  extends Omit<StepsItemProps, \"content\" | \"title\">,\n    Pick<StepsIndicatorProps, \"complete\" | \"current\" | \"incomplete\"> {\n  /**\n   * The content for step element.\n   */\n  content?: ReactNode\n  /**\n   * The description for step element.\n   */\n  description?: ReactNode\n  /**\n   * If true, display the step separator.\n   *\n   * @default true\n   */\n  hasSeparator?: boolean\n  /**\n   * The title for step element.\n   */\n  title?: string\n  /**\n   * Props for step content element.\n   */\n  contentProps?: StepsContentProps\n  /**\n   * Props for step description element.\n   */\n  descriptionProps?: StepsDescriptionProps\n  /**\n   * Props for step indicator element.\n   */\n  indicatorProps?: StepsIndicatorProps\n  /**\n   * Props for step separator element.\n   */\n  separatorProps?: StepsSeparatorProps\n  /**\n   * Props for step title element.\n   */\n  titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n  extends Omit<HTMLStyledProps, \"onChange\">,\n    Omit<UseStepsProps, \"orientation\">,\n    Pick<UseLazyMountProps, \"lazy\" | \"lazyBehavior\">,\n    ThemeProps<StepsStyle> {\n  /**\n   * If provided, generate step components based on steps.\n   */\n  items?: StepsItem[]\n}\n\nexport const {\n  ComponentContext,\n  PropsContext: StepsPropsContext,\n  useComponentContext,\n  usePropsContext: useStepsPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n  \"steps\",\n  stepsStyle,\n)\n\n/**\n * `Steps` is a component that displays the progress of a multi-step process.\n *\n * @see https://yamada-ui.com/components/steps\n */\nexport const StepsRoot = withProvider(\n  ({\n    children,\n    items,\n    lazy,\n    lazyBehavior,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      count,\n      descendants,\n      getStatus,\n      index,\n      orientation,\n      setIndex,\n      getContentProps,\n      getListProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      onNext,\n      onPrev,\n    } = useSteps({ ...rest, orientation: computedOrientation })\n    const componentContext = useMemo(\n      () => ({ items, lazy, lazyBehavior }),\n      [items, lazy, lazyBehavior],\n    )\n    const stepsContext = useMemo(\n      () => ({\n        id,\n        count,\n        getStatus,\n        index,\n        orientation,\n        setIndex,\n        getContentProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        onNext,\n        onPrev,\n      }),\n      [\n        id,\n        count,\n        index,\n        orientation,\n        setIndex,\n        getStatus,\n        onNext,\n        onPrev,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getContentProps,\n      ],\n    )\n\n    return (\n      <StepsDescendantsContext value={descendants}>\n        <StepsContext value={stepsContext}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{children}</styled.div>\n          </ComponentContext>\n        </StepsContext>\n      </StepsDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n  ({ children, ...rest }) => {\n    const { items } = useComponentContext()\n    const { getListProps } = useStepsContext()\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items?.map(\n          (\n            {\n              complete,\n              content: _content,\n              current,\n              description,\n              hasSeparator = true,\n              incomplete,\n              title,\n              contentProps: _contentProps,\n              descriptionProps,\n              indicatorProps,\n              separatorProps,\n              titleProps,\n              ...rest\n            },\n            index,\n          ) => (\n            <StepsItem key={index} title={title} {...rest}>\n              <StepsIndicator\n                complete={complete}\n                current={current}\n                incomplete={incomplete}\n                {...indicatorProps}\n              />\n\n              <styled.div>\n                {title ? (\n                  <StepsTitle {...titleProps}>{title}</StepsTitle>\n                ) : null}\n                {description ? (\n                  <StepsDescription {...descriptionProps}>\n                    {description}\n                  </StepsDescription>\n                ) : null}\n              </styled.div>\n\n              {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n            </StepsItem>\n          ),\n        )\n      }\n    }, [children, items])\n\n    return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n  },\n  \"list\",\n)()\n\nexport interface StepsItemProps\n  extends HTMLStyledProps<\"li\">,\n    UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n  const {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  } = useStepsItem(props)\n  const context = useMemo(\n    () => ({\n      first,\n      index,\n      last,\n      status,\n      getDescriptionProps,\n      getIndicatorProps,\n      getSeparatorProps,\n      getTitleProps,\n    }),\n    [\n      first,\n      index,\n      last,\n      status,\n      getTitleProps,\n      getDescriptionProps,\n      getSeparatorProps,\n      getIndicatorProps,\n    ],\n  )\n\n  return (\n    <StepsItemContext value={context}>\n      <styled.li {...getRootProps()} />\n    </StepsItemContext>\n  )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n  /**\n   * The element for the complete indicator.\n   *\n   * @default '<CheckIcon />'\n   */\n  complete?: ReactNode\n  /**\n   * The element for the current indicator.\n   *\n   * @default '<StepsNumber />'\n   */\n  current?: ReactNode\n  /**\n   * The element for the incomplete indicator.\n   *\n   * @default '<StepsNumber />'\n   */\n  incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n  ({\n    complete = <CheckIcon />,\n    current = <StepsNumber />,\n    incomplete = <StepsNumber />,\n    ...rest\n  }) => {\n    const { status, getIndicatorProps } = useStepsItemContext()\n    const components = useMemo(\n      () => ({ complete, current, incomplete }),\n      [complete, current, incomplete],\n    )\n\n    return (\n      <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n    )\n  },\n  \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n  \"span\",\n  \"number\",\n)(undefined, ({ children, ...rest }) => {\n  const { index } = useStepsItemContext()\n\n  return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useStepsItemContext()\n\n    return getTitleProps(props)\n  },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { getDescriptionProps } = useStepsItemContext()\n\n  return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n  \"div\",\n  \"separator\",\n)(undefined, (props) => {\n  const { getSeparatorProps } = useStepsItemContext()\n\n  return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n  const { items } = useComponentContext()\n\n  return useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return items?.map(({ content, contentProps }, index) =>\n        isUndefined(content) || isNull(content) ? null : (\n          <StepsContent key={index} index={index} {...contentProps}>\n            {content}\n          </StepsContent>\n        ),\n      )\n    }\n  }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n  /**\n   * The index of the step content.\n   */\n  index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n  \"div\",\n  \"content\",\n)(undefined, ({ index, ...rest }) => {\n  const { lazy, lazyBehavior } = useComponentContext()\n  const { index: selectedIndex, getContentProps } = useStepsContext()\n  const mounted = index === selectedIndex\n  const children = useLazyMount({\n    lazy,\n    lazyBehavior,\n    mounted,\n    ...rest,\n  })\n\n  return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n  \"div\",\n  StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n  undefined,\n  (props) => {\n    const { lazy, lazyBehavior } = useComponentContext()\n    const { count, index: selectedIndex, getContentProps } = useStepsContext()\n    const mounted = count !== 0 && count === selectedIndex\n    const children = useLazyMount({\n      lazy,\n      lazyBehavior,\n      mounted,\n      ...props,\n    })\n\n    return { ...getContentProps(props), children }\n  },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n  \"button\",\n  { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n  const { getPrevTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n  \"button\",\n  { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n  const { getNextTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"steps.js","names":["rest","StepsContents: FC<StepsContentsProps>"],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, isUndefined } from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n  StepsContext,\n  StepsDescendantsContext,\n  StepsItemContext,\n  useSteps,\n  useStepsContext,\n  useStepsItem,\n  useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext\n  extends Pick<StepsRootProps, \"items\" | \"lazy\" | \"lazyBehavior\"> {}\n\ninterface StepsItem\n  extends Omit<StepsItemProps, \"content\" | \"title\">,\n    Pick<StepsIndicatorProps, \"complete\" | \"current\" | \"incomplete\"> {\n  /**\n   * The content for step element.\n   */\n  content?: ReactNode\n  /**\n   * The description for step element.\n   */\n  description?: ReactNode\n  /**\n   * If true, display the step separator.\n   *\n   * @default true\n   */\n  hasSeparator?: boolean\n  /**\n   * The title for step element.\n   */\n  title?: string\n  /**\n   * Props for step content element.\n   */\n  contentProps?: StepsContentProps\n  /**\n   * Props for step description element.\n   */\n  descriptionProps?: StepsDescriptionProps\n  /**\n   * Props for step indicator element.\n   */\n  indicatorProps?: StepsIndicatorProps\n  /**\n   * Props for step separator element.\n   */\n  separatorProps?: StepsSeparatorProps\n  /**\n   * Props for step title element.\n   */\n  titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n  extends Omit<HTMLStyledProps, \"onChange\">,\n    Omit<UseStepsProps, \"orientation\">,\n    Pick<UseLazyMountProps, \"lazy\" | \"lazyBehavior\">,\n    ThemeProps<StepsStyle> {\n  /**\n   * If provided, generate step components based on steps.\n   */\n  items?: StepsItem[]\n}\n\nexport const {\n  ComponentContext,\n  PropsContext: StepsPropsContext,\n  useComponentContext,\n  usePropsContext: useStepsPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n  \"steps\",\n  stepsStyle,\n)\n\n/**\n * `Steps` is a component that displays the progress of a multi-step process.\n *\n * @see https://yamada-ui.com/components/steps\n */\nexport const StepsRoot = withProvider(\n  ({\n    children,\n    items,\n    lazy,\n    lazyBehavior,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      count,\n      descendants,\n      getStatus,\n      index,\n      orientation,\n      setIndex,\n      getContentProps,\n      getListProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      onNext,\n      onPrev,\n    } = useSteps({ ...rest, orientation: computedOrientation })\n    const componentContext = useMemo(\n      () => ({ items, lazy, lazyBehavior }),\n      [items, lazy, lazyBehavior],\n    )\n    const stepsContext = useMemo(\n      () => ({\n        id,\n        count,\n        getStatus,\n        index,\n        orientation,\n        setIndex,\n        getContentProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        onNext,\n        onPrev,\n      }),\n      [\n        id,\n        count,\n        index,\n        orientation,\n        setIndex,\n        getStatus,\n        onNext,\n        onPrev,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getContentProps,\n      ],\n    )\n\n    return (\n      <StepsDescendantsContext value={descendants}>\n        <StepsContext value={stepsContext}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{children}</styled.div>\n          </ComponentContext>\n        </StepsContext>\n      </StepsDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n  ({ children, ...rest }) => {\n    const { items } = useComponentContext()\n    const { getListProps } = useStepsContext()\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items?.map(\n          (\n            {\n              complete,\n              content: _content,\n              current,\n              description,\n              hasSeparator = true,\n              incomplete,\n              title,\n              contentProps: _contentProps,\n              descriptionProps,\n              indicatorProps,\n              separatorProps,\n              titleProps,\n              ...rest\n            },\n            index,\n          ) => (\n            <StepsItem key={index} title={title} {...rest}>\n              <StepsIndicator\n                complete={complete}\n                current={current}\n                incomplete={incomplete}\n                {...indicatorProps}\n              />\n\n              <styled.div>\n                {title ? (\n                  <StepsTitle {...titleProps}>{title}</StepsTitle>\n                ) : null}\n                {description ? (\n                  <StepsDescription {...descriptionProps}>\n                    {description}\n                  </StepsDescription>\n                ) : null}\n              </styled.div>\n\n              {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n            </StepsItem>\n          ),\n        )\n      }\n    }, [children, items])\n\n    return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n  },\n  \"list\",\n)()\n\nexport interface StepsItemProps\n  extends HTMLStyledProps<\"li\">,\n    UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n  const {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  } = useStepsItem(props)\n  const context = useMemo(\n    () => ({\n      first,\n      index,\n      last,\n      status,\n      getDescriptionProps,\n      getIndicatorProps,\n      getSeparatorProps,\n      getTitleProps,\n    }),\n    [\n      first,\n      index,\n      last,\n      status,\n      getTitleProps,\n      getDescriptionProps,\n      getSeparatorProps,\n      getIndicatorProps,\n    ],\n  )\n\n  return (\n    <StepsItemContext value={context}>\n      <styled.li {...getRootProps()} />\n    </StepsItemContext>\n  )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n  /**\n   * The element for the complete indicator.\n   *\n   * @default '<CheckIcon />'\n   */\n  complete?: ReactNode\n  /**\n   * The element for the current indicator.\n   *\n   * @default '<StepsNumber />'\n   */\n  current?: ReactNode\n  /**\n   * The element for the incomplete indicator.\n   *\n   * @default '<StepsNumber />'\n   */\n  incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n  ({\n    complete = <CheckIcon />,\n    current = <StepsNumber />,\n    incomplete = <StepsNumber />,\n    ...rest\n  }) => {\n    const { status, getIndicatorProps } = useStepsItemContext()\n    const components = useMemo(\n      () => ({ complete, current, incomplete }),\n      [complete, current, incomplete],\n    )\n\n    return (\n      <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n    )\n  },\n  \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n  \"span\",\n  \"number\",\n)(undefined, ({ children, ...rest }) => {\n  const { index } = useStepsItemContext()\n\n  return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useStepsItemContext()\n\n    return getTitleProps(props)\n  },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { getDescriptionProps } = useStepsItemContext()\n\n  return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n  \"div\",\n  \"separator\",\n)(undefined, (props) => {\n  const { getSeparatorProps } = useStepsItemContext()\n\n  return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n  const { items } = useComponentContext()\n\n  return useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return items?.map(({ content, contentProps }, index) =>\n        isUndefined(content) || isNull(content) ? null : (\n          <StepsContent key={index} index={index} {...contentProps}>\n            {content}\n          </StepsContent>\n        ),\n      )\n    }\n  }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n  /**\n   * The index of the step content.\n   */\n  index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n  \"div\",\n  \"content\",\n)(undefined, ({ index, ...rest }) => {\n  const { lazy, lazyBehavior } = useComponentContext()\n  const { index: selectedIndex, getContentProps } = useStepsContext()\n  const mounted = index === selectedIndex\n  const children = useLazyMount({\n    lazy,\n    lazyBehavior,\n    mounted,\n    ...rest,\n  })\n\n  return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n  \"div\",\n  StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n  undefined,\n  (props) => {\n    const { lazy, lazyBehavior } = useComponentContext()\n    const { count, index: selectedIndex, getContentProps } = useStepsContext()\n    const mounted = count !== 0 && count === selectedIndex\n    const children = useLazyMount({\n      lazy,\n      lazyBehavior,\n      mounted,\n      ...props,\n    })\n\n    return { ...getContentProps(props), children }\n  },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n  \"button\",\n  { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n  const { getPrevTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n  \"button\",\n  { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n  const { getNextTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":"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"}

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

@@ -3,7 +3,9 @@
 
 import { createContext } from "../../utils/context.js";
 import { mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { handlerAll } from "../../utils/common/function.js";
+import { dataAttr } from "../../utils/common/dom.js";
+import { cx } from "../../utils/common/string.js";
 import { useEnvironment } from "../../core/system/environment-provider.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { createDescendant } from "../../hooks/use-descendant/index.js";
@@ -55,13 +57,13 @@ const useSteps = ({ defaultIndex = 0, index: indexProp, orientation = "horizonta
 	const getPrevTriggerProps = useCallback((props = {}) => ({
 		disabled: index === 0,
 		...props,
-		onClick: (0, utils_exports.handlerAll)(props.onClick, onPrev)
+		onClick: handlerAll(props.onClick, onPrev)
 	}), [onPrev, index]);
 	const getNextTriggerProps = useCallback((props = {}) => {
 		return {
 			disabled: count <= index,
 			...props,
-			onClick: (0, utils_exports.handlerAll)(props.onClick, onNext)
+			onClick: handlerAll(props.onClick, onNext)
 		};
 	}, [
 		count,
@@ -98,9 +100,9 @@ const useStepsItem = ({ "aria-labelledby": ariaLabelledbyProp,...rest } = {}) =>
 		const hasContent = !!getDocument()?.getElementById(`${id}-${index}`);
 		return {
 			"aria-current": current ? "step" : void 0,
-			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby, hasContent ? `${id}-${index}` : void 0),
+			"aria-labelledby": cx(ariaLabelledbyProp, ariaLabelledby, hasContent ? `${id}-${index}` : void 0),
 			"data-orientation": orientation,
-			[statusDataAttr]: (0, utils_exports.dataAttr)(true),
+			[statusDataAttr]: dataAttr(true),
 			...rest,
 			...props,
 			ref: mergeRefs(ref, register)
@@ -117,21 +119,21 @@ const useStepsItem = ({ "aria-labelledby": ariaLabelledbyProp,...rest } = {}) =>
 		register
 	]);
 	const getTitleProps = useCallback((props) => ({
-		[statusDataAttr]: (0, utils_exports.dataAttr)(true),
+		[statusDataAttr]: dataAttr(true),
 		...props
 	}), [statusDataAttr]);
 	const getDescriptionProps = useCallback((props) => ({
-		[statusDataAttr]: (0, utils_exports.dataAttr)(true),
+		[statusDataAttr]: dataAttr(true),
 		...props
 	}), [statusDataAttr]);
 	const getIndicatorProps = useCallback((props) => ({
-		[statusDataAttr]: (0, utils_exports.dataAttr)(true),
+		[statusDataAttr]: dataAttr(true),
 		...props
 	}), [statusDataAttr]);
 	const getSeparatorProps = useCallback((props) => ({
 		"data-orientation": orientation,
 		role: "separator",
-		[statusDataAttr]: (0, utils_exports.dataAttr)(true),
+		[statusDataAttr]: dataAttr(true),
 		...props
 	}), [orientation, statusDataAttr]);
 	return {

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

@@ -1 +1 @@
-{"version":3,"file":"use-steps.js","names":["indexProp: number","indexProp","index","getRootProps: PropGetter","getListProps: PropGetter<\"ol\">","getContentProps: PropGetter<\"div\", { index?: number }>","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getRootProps: PropGetter<\"li\">","getTitleProps: PropGetter<\"h3\">","getDescriptionProps: PropGetter<\"p\">","getIndicatorProps: PropGetter","getSeparatorProps: PropGetter"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport { createContext, cx, dataAttr, handlerAll, mergeRefs } from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nexport const {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendant<HTMLLIElement>()\n\ninterface StepsContext\n  extends Omit<UseStepsReturn, \"descendants\" | \"getRootProps\"> {}\n\nexport const [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport interface StepsItemContext\n  extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nexport const [StepsItemContext, useStepsItemContext] =\n  createContext<StepsItemContext>({\n    name: \"StepsItemContext\",\n  })\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n  const count = descendants.count()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  ...rest\n}: UseStepsItemProps = {}) => {\n  const { descendants, index, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => {\n      const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n      return {\n        \"aria-current\": current ? \"step\" : undefined,\n        \"aria-labelledby\": cx(\n          ariaLabelledbyProp,\n          ariaLabelledby,\n          hasContent ? `${id}-${index}` : undefined,\n        ),\n        \"data-orientation\": orientation,\n        [statusDataAttr]: dataAttr(true),\n        ...rest,\n        ...props,\n        ref: mergeRefs(ref, register),\n      }\n    },\n    [\n      ariaLabelledbyProp,\n      getDocument,\n      id,\n      index,\n      current,\n      orientation,\n      statusDataAttr,\n      rest,\n      register,\n    ],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-steps.js","names":["indexProp: number","indexProp","index","getRootProps: PropGetter","getListProps: PropGetter<\"ol\">","getContentProps: PropGetter<\"div\", { index?: number }>","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getRootProps: PropGetter<\"li\">","getTitleProps: PropGetter<\"h3\">","getDescriptionProps: PropGetter<\"p\">","getIndicatorProps: PropGetter","getSeparatorProps: PropGetter"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport { createContext, cx, dataAttr, handlerAll, mergeRefs } from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nexport const {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendant<HTMLLIElement>()\n\ninterface StepsContext\n  extends Omit<UseStepsReturn, \"descendants\" | \"getRootProps\"> {}\n\nexport const [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport interface StepsItemContext\n  extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nexport const [StepsItemContext, useStepsItemContext] =\n  createContext<StepsItemContext>({\n    name: \"StepsItemContext\",\n  })\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n  const count = descendants.count()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  ...rest\n}: UseStepsItemProps = {}) => {\n  const { descendants, index, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => {\n      const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n      return {\n        \"aria-current\": current ? \"step\" : undefined,\n        \"aria-labelledby\": cx(\n          ariaLabelledbyProp,\n          ariaLabelledby,\n          hasContent ? `${id}-${index}` : undefined,\n        ),\n        \"data-orientation\": orientation,\n        [statusDataAttr]: dataAttr(true),\n        ...rest,\n        ...props,\n        ref: mergeRefs(ref, register),\n      }\n    },\n    [\n      ariaLabelledbyProp,\n      getDocument,\n      id,\n      index,\n      current,\n      orientation,\n      statusDataAttr,\n      rest,\n      register,\n    ],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}