@yamada-ui/react 2.2.5-dev-20260720084813 → 2.2.5-dev-20260720123845

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

@@ -22,11 +22,14 @@ const usePagination = ({ boundaries = 1, defaultPage = 1, disabled = false, page
 		const nextSiblings = Math.min(currentPage + siblings, total - boundaries);
 		const prevDots = prevSiblings > boundaries + 2;
 		const nextDots = nextSiblings < total - (boundaries + 1);
-		if (!prevDots && nextDots) return [
-			...computedRange(1, siblings * 2 + boundaries + 2),
-			"ellipsis",
-			...computedRange(total - (boundaries - 1), total)
-		];
+		if (!prevDots && nextDots) {
+			const prevPages = siblings * 2 + boundaries + 2;
+			return [
+				...computedRange(1, prevPages),
+				"ellipsis",
+				...computedRange(total - (boundaries - 1), total)
+			];
+		}
 		if (prevDots && !nextDots) {
 			const nextPages = boundaries + 1 + 2 * siblings;
 			return [

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

@@ -1 +1 @@
-{"version":3,"file":"use-pagination.js","names":["createContext"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { createContext, handlerAll, isNumber, mergeRefs } from \"../../utils\"\n\nexport type Page = \"ellipsis\" | number\n\ninterface PaginationContext extends Omit<UsePaginationReturn, \"getRootProps\"> {}\n\nconst [PaginationContext, usePaginationContext] =\n  createContext<PaginationContext>({\n    name: \"PaginationContext\",\n  })\n\nexport { PaginationContext, usePaginationContext }\n\nexport interface UsePaginationProps extends Omit<\n  HTMLProps,\n  \"onChange\" | \"page\"\n> {\n  /**\n   * The total number of pages in pagination.\n   */\n  total: number\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /**\n   * The initial page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   *\n   * @default 1\n   */\n  defaultPage?: number\n  /**\n   * If `true`, the pagination all item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   */\n  page?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * The callback invoked when the page changes.\n   */\n  onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n  boundaries = 1,\n  defaultPage = 1,\n  disabled = false,\n  page,\n  siblings = 1,\n  total,\n  onChange: onChangeProp,\n  ...rest\n}: UsePaginationProps) => {\n  const { ref: restRef, ...restProps } = rest\n  const [currentPage, setCurrentPage] = useControllableState({\n    defaultValue: defaultPage,\n    value: page,\n    onChange: onChangeProp,\n  })\n  const { t } = useI18n(\"pagination\")\n  const range = useMemo((): Page[] => {\n    const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n    if (minimumTotal >= total) return computedRange(1, total)\n\n    const prevSiblings = Math.max(currentPage - siblings, boundaries)\n    const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n    const prevDots = prevSiblings > boundaries + 2\n    const nextDots = nextSiblings < total - (boundaries + 1)\n\n    if (!prevDots && nextDots) {\n      const prevPages = siblings * 2 + boundaries + 2\n\n      return [\n        ...computedRange(1, prevPages),\n        \"ellipsis\",\n        ...computedRange(total - (boundaries - 1), total),\n      ]\n    }\n\n    if (prevDots && !nextDots) {\n      const nextPages = boundaries + 1 + 2 * siblings\n\n      return [\n        ...computedRange(1, boundaries),\n        \"ellipsis\",\n        ...computedRange(total - nextPages, total),\n      ]\n    }\n\n    return [\n      ...computedRange(1, boundaries),\n      \"ellipsis\",\n      ...computedRange(prevSiblings, nextSiblings),\n      \"ellipsis\",\n      ...computedRange(total - boundaries + 1, total),\n    ]\n  }, [boundaries, siblings, currentPage, total])\n\n  const onChange = useCallback(\n    (page: number) => setCurrentPage(Math.max(1, Math.min(total, page))),\n    [setCurrentPage, total],\n  )\n\n  const onChangeStart = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n  const onChangeEnd = useCallback(\n    () => setCurrentPage(total),\n    [setCurrentPage, total],\n  )\n\n  const onChangePrev = useCallback(\n    () => setCurrentPage((prev) => Math.max(1, prev - 1)),\n    [setCurrentPage],\n  )\n\n  const onChangeNext = useCallback(\n    () => setCurrentPage((prev) => Math.min(total, prev + 1)),\n    [setCurrentPage, total],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-label\": t(\"Pagination\"),\n          role: \"navigation\",\n        },\n        restProps,\n        props,\n        {\n          ref: mergeRefs(ref, restRef),\n        },\n      )(),\n    [restProps, restRef, t],\n  )\n\n  const getItemProps: PropGetter<\"button\", { page?: Page }> = useCallback(\n    ({ page, ...props } = {}) => {\n      if (isNumber(page))\n        return {\n          type: \"button\",\n          \"aria-current\": currentPage === page ? \"page\" : undefined,\n          \"aria-label\": t(\"Go to page {value}\", { value: page }),\n          disabled,\n          ...props,\n          onClick: handlerAll(props.onClick, () => onChange(page)),\n        }\n      else return { ...props, \"data-ellipsis\": \"\" }\n    },\n    [currentPage, t, onChange, disabled],\n  )\n\n  const getStartTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to first page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeStart),\n    }),\n    [onChangeStart, t, disabled, currentPage],\n  )\n\n  const getEndTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to last page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeEnd),\n    }),\n    [onChangeEnd, t, disabled, currentPage, total],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to previous page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangePrev),\n    }),\n    [onChangePrev, t, disabled, currentPage],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to next page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeNext),\n    }),\n    [onChangeNext, t, disabled, currentPage, total],\n  )\n\n  return {\n    currentPage,\n    disabled,\n    range,\n    total,\n    getEndTriggerProps,\n    getItemProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    getStartTriggerProps,\n    onChange,\n    onChangeEnd,\n    onChangeNext,\n    onChangePrev,\n    onChangeStart,\n  }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n\nconst computedRange = (start: number, end: number) =>\n  Array.from({ length: end - start + 1 }, (_, index) => index + start)\n"],"mappings":"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"}
+{"version":3,"file":"use-pagination.js","names":["createContext"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { createContext, handlerAll, isNumber, mergeRefs } from \"../../utils\"\n\nexport type Page = \"ellipsis\" | number\n\ninterface PaginationContext extends Omit<UsePaginationReturn, \"getRootProps\"> {}\n\nconst [PaginationContext, usePaginationContext] =\n  createContext<PaginationContext>({\n    name: \"PaginationContext\",\n  })\n\nexport { PaginationContext, usePaginationContext }\n\nexport interface UsePaginationProps extends Omit<\n  HTMLProps,\n  \"onChange\" | \"page\"\n> {\n  /**\n   * The total number of pages in pagination.\n   */\n  total: number\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /**\n   * The initial page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   *\n   * @default 1\n   */\n  defaultPage?: number\n  /**\n   * If `true`, the pagination all item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   */\n  page?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * The callback invoked when the page changes.\n   */\n  onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n  boundaries = 1,\n  defaultPage = 1,\n  disabled = false,\n  page,\n  siblings = 1,\n  total,\n  onChange: onChangeProp,\n  ...rest\n}: UsePaginationProps) => {\n  const { ref: restRef, ...restProps } = rest\n  const [currentPage, setCurrentPage] = useControllableState({\n    defaultValue: defaultPage,\n    value: page,\n    onChange: onChangeProp,\n  })\n  const { t } = useI18n(\"pagination\")\n  const range = useMemo((): Page[] => {\n    const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n    if (minimumTotal >= total) return computedRange(1, total)\n\n    const prevSiblings = Math.max(currentPage - siblings, boundaries)\n    const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n    const prevDots = prevSiblings > boundaries + 2\n    const nextDots = nextSiblings < total - (boundaries + 1)\n\n    if (!prevDots && nextDots) {\n      const prevPages = siblings * 2 + boundaries + 2\n\n      return [\n        ...computedRange(1, prevPages),\n        \"ellipsis\",\n        ...computedRange(total - (boundaries - 1), total),\n      ]\n    }\n\n    if (prevDots && !nextDots) {\n      const nextPages = boundaries + 1 + 2 * siblings\n\n      return [\n        ...computedRange(1, boundaries),\n        \"ellipsis\",\n        ...computedRange(total - nextPages, total),\n      ]\n    }\n\n    return [\n      ...computedRange(1, boundaries),\n      \"ellipsis\",\n      ...computedRange(prevSiblings, nextSiblings),\n      \"ellipsis\",\n      ...computedRange(total - boundaries + 1, total),\n    ]\n  }, [boundaries, siblings, currentPage, total])\n\n  const onChange = useCallback(\n    (page: number) => setCurrentPage(Math.max(1, Math.min(total, page))),\n    [setCurrentPage, total],\n  )\n\n  const onChangeStart = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n  const onChangeEnd = useCallback(\n    () => setCurrentPage(total),\n    [setCurrentPage, total],\n  )\n\n  const onChangePrev = useCallback(\n    () => setCurrentPage((prev) => Math.max(1, prev - 1)),\n    [setCurrentPage],\n  )\n\n  const onChangeNext = useCallback(\n    () => setCurrentPage((prev) => Math.min(total, prev + 1)),\n    [setCurrentPage, total],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-label\": t(\"Pagination\"),\n          role: \"navigation\",\n        },\n        restProps,\n        props,\n        {\n          ref: mergeRefs(ref, restRef),\n        },\n      )(),\n    [restProps, restRef, t],\n  )\n\n  const getItemProps: PropGetter<\"button\", { page?: Page }> = useCallback(\n    ({ page, ...props } = {}) => {\n      if (isNumber(page))\n        return {\n          type: \"button\",\n          \"aria-current\": currentPage === page ? \"page\" : undefined,\n          \"aria-label\": t(\"Go to page {value}\", { value: page }),\n          disabled,\n          ...props,\n          onClick: handlerAll(props.onClick, () => onChange(page)),\n        }\n      else return { ...props, \"data-ellipsis\": \"\" }\n    },\n    [currentPage, t, onChange, disabled],\n  )\n\n  const getStartTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to first page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeStart),\n    }),\n    [onChangeStart, t, disabled, currentPage],\n  )\n\n  const getEndTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to last page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeEnd),\n    }),\n    [onChangeEnd, t, disabled, currentPage, total],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to previous page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangePrev),\n    }),\n    [onChangePrev, t, disabled, currentPage],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to next page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeNext),\n    }),\n    [onChangeNext, t, disabled, currentPage, total],\n  )\n\n  return {\n    currentPage,\n    disabled,\n    range,\n    total,\n    getEndTriggerProps,\n    getItemProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    getStartTriggerProps,\n    onChange,\n    onChangeEnd,\n    onChangeNext,\n    onChangePrev,\n    onChangeStart,\n  }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n\nconst computedRange = (start: number, end: number) =>\n  Array.from({ length: end - start + 1 }, (_, index) => index + start)\n"],"mappings":"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"}

package/dist/esm/components/pin-input/pin-input.js

@@ -23,18 +23,19 @@ const PinInputRoot = withProvider(({ children, errorBorderColor, focusBorderColo
 		if (validChildren.length) return validChildren;
 		else return Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx(PinInputField, { index }, index));
 	}, [children, items]);
+	const context = useMemo(() => ({
+		errorBorderColor,
+		focusBorderColor,
+		getInputProps
+	}), [
+		getInputProps,
+		errorBorderColor,
+		focusBorderColor
+	]);
 	return /* @__PURE__ */ jsx(PinInputDescendantsContext, {
 		value: descendants,
 		children: /* @__PURE__ */ jsx(ComponentContext, {
-			value: useMemo(() => ({
-				errorBorderColor,
-				focusBorderColor,
-				getInputProps
-			}), [
-				getInputProps,
-				errorBorderColor,
-				focusBorderColor
-			]),
+			value: context,
 			children: /* @__PURE__ */ jsx(Group, {
 				...getRootProps(),
 				children: cloneChildren

package/dist/esm/components/pin-input/pin-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.js","names":[],"sources":["../../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  RequiredPropGetter,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps, UseInputBorderProps } from \"../input\"\nimport type { PinInputStyle } from \"./pin-input.style\"\nimport type { UsePinInputProps } from \"./use-pin-input\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { Input } from \"../input\"\nimport { pinInputStyle } from \"./pin-input.style\"\nimport {\n  PinInputDescendantsContext,\n  usePinInput,\n  usePinInputDescendant,\n} from \"./use-pin-input\"\n\ninterface ComponentContext extends UseInputBorderProps {\n  getInputProps: RequiredPropGetter<\"input\", { index: number }>\n}\n\nexport interface PinInputRootProps\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, PinInputStyle>,\n      \"defaultValue\" | \"mask\" | \"onChange\"\n    >,\n    ThemeProps<PinInputStyle>,\n    UseInputBorderProps,\n    UsePinInputProps {}\n\nconst {\n  ComponentContext,\n  PropsContext: PinInputPropsContext,\n  useComponentContext,\n  usePropsContext: usePinInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PinInputRootProps, PinInputStyle, ComponentContext>(\n  \"pin-input\",\n  pinInputStyle,\n)\n\nexport { PinInputPropsContext, usePinInputPropsContext }\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see https://yamada-ui.com/docs/components/pin-input\n */\nexport const PinInputRoot = withProvider<\"div\", PinInputRootProps>(\n  ({ children, errorBorderColor, focusBorderColor, ...rest }) => {\n    const { descendants, items, getInputProps, getRootProps } =\n      usePinInput(rest)\n    const cloneChildren = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (validChildren.length) return validChildren\n      else\n        return Array.from({ length: items }, (_, index) => (\n          <PinInputField key={index} index={index} />\n        ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({ errorBorderColor, focusBorderColor, getInputProps }),\n      [getInputProps, errorBorderColor, focusBorderColor],\n    )\n\n    return (\n      <PinInputDescendantsContext value={descendants}>\n        <ComponentContext value={context}>\n          <Group {...getRootProps()}>{cloneChildren}</Group>\n        </ComponentContext>\n      </PinInputDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface PinInputFieldProps extends InputProps {\n  /**\n   * The index of the pin input field.\n   */\n  index: number\n}\n\nexport const PinInputField = withContext<\"input\", PinInputFieldProps>(\n  Input,\n  \"field\",\n)(undefined, ({ ref, index, ...rest }) => {\n  const { errorBorderColor, focusBorderColor, getInputProps } =\n    useComponentContext()\n  const { register } = usePinInputDescendant()\n  const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest)\n\n  return {\n    ...getInputProps({\n      errorBorderColor,\n      focusBorderColor,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      index,\n    }),\n  }\n})\n"],"mappings":";;;;;;;;;;;;AAsCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,aACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzC,YAAY,IAAI;CAClB,MAAM,gBAAgB,cAAc;EAClC,MAAM,gBAAgB,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,QAAQ,OAAO;OAE/B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,oBAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CAMpB,OACE,oBAAC,4BAAD;EAA4B,OAAO;YACjC,oBAAC,kBAAD;GAAkB,OAPN,eACP;IAAE;IAAkB;IAAkB;GAAc,IAC3D;IAAC;IAAe;IAAkB;GAAgB,CAKjB;aAC7B,oBAAC,OAAD;IAAO,GAAI,aAAa;cAAI;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3B,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAa,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAe,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAK,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}
+{"version":3,"file":"pin-input.js","names":[],"sources":["../../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  RequiredPropGetter,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps, UseInputBorderProps } from \"../input\"\nimport type { PinInputStyle } from \"./pin-input.style\"\nimport type { UsePinInputProps } from \"./use-pin-input\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { Input } from \"../input\"\nimport { pinInputStyle } from \"./pin-input.style\"\nimport {\n  PinInputDescendantsContext,\n  usePinInput,\n  usePinInputDescendant,\n} from \"./use-pin-input\"\n\ninterface ComponentContext extends UseInputBorderProps {\n  getInputProps: RequiredPropGetter<\"input\", { index: number }>\n}\n\nexport interface PinInputRootProps\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, PinInputStyle>,\n      \"defaultValue\" | \"mask\" | \"onChange\"\n    >,\n    ThemeProps<PinInputStyle>,\n    UseInputBorderProps,\n    UsePinInputProps {}\n\nconst {\n  ComponentContext,\n  PropsContext: PinInputPropsContext,\n  useComponentContext,\n  usePropsContext: usePinInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PinInputRootProps, PinInputStyle, ComponentContext>(\n  \"pin-input\",\n  pinInputStyle,\n)\n\nexport { PinInputPropsContext, usePinInputPropsContext }\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see https://yamada-ui.com/docs/components/pin-input\n */\nexport const PinInputRoot = withProvider<\"div\", PinInputRootProps>(\n  ({ children, errorBorderColor, focusBorderColor, ...rest }) => {\n    const { descendants, items, getInputProps, getRootProps } =\n      usePinInput(rest)\n    const cloneChildren = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (validChildren.length) return validChildren\n      else\n        return Array.from({ length: items }, (_, index) => (\n          <PinInputField key={index} index={index} />\n        ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({ errorBorderColor, focusBorderColor, getInputProps }),\n      [getInputProps, errorBorderColor, focusBorderColor],\n    )\n\n    return (\n      <PinInputDescendantsContext value={descendants}>\n        <ComponentContext value={context}>\n          <Group {...getRootProps()}>{cloneChildren}</Group>\n        </ComponentContext>\n      </PinInputDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface PinInputFieldProps extends InputProps {\n  /**\n   * The index of the pin input field.\n   */\n  index: number\n}\n\nexport const PinInputField = withContext<\"input\", PinInputFieldProps>(\n  Input,\n  \"field\",\n)(undefined, ({ ref, index, ...rest }) => {\n  const { errorBorderColor, focusBorderColor, getInputProps } =\n    useComponentContext()\n  const { register } = usePinInputDescendant()\n  const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest)\n\n  return {\n    ...getInputProps({\n      errorBorderColor,\n      focusBorderColor,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      index,\n    }),\n  }\n})\n"],"mappings":";;;;;;;;;;;;AAsCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,aACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzC,YAAY,IAAI;CAClB,MAAM,gBAAgB,cAAc;EAClC,MAAM,gBAAgB,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,QAAQ,OAAO;OAE/B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,oBAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,UAAU,eACP;EAAE;EAAkB;EAAkB;CAAc,IAC3D;EAAC;EAAe;EAAkB;CAAgB,CACpD;CAEA,OACE,oBAAC,4BAAD;EAA4B,OAAO;YACjC,oBAAC,kBAAD;GAAkB,OAAO;aACvB,oBAAC,OAAD;IAAO,GAAI,aAAa;cAAI;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3B,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAa,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAe,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAK,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}

package/dist/esm/components/popover/popover.js

@@ -102,34 +102,35 @@ const PopoverRoot = (props) => {
 		...styleProps
 	});
 	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = usePopover(rest);
+	const componentContext = useMemo(() => ({
+		animationScheme,
+		duration,
+		open,
+		getAnchorProps,
+		getBodyProps,
+		getCloseTriggerProps,
+		getContentProps,
+		getFooterProps,
+		getHeaderProps,
+		getPositionerProps,
+		getTriggerProps
+	}), [
+		open,
+		animationScheme,
+		duration,
+		getAnchorProps,
+		getBodyProps,
+		getCloseTriggerProps,
+		getContentProps,
+		getFooterProps,
+		getHeaderProps,
+		getPositionerProps,
+		getTriggerProps
+	]);
 	return /* @__PURE__ */ jsx(StyleContext, {
 		value: styleContext,
 		children: /* @__PURE__ */ jsx(ComponentContext, {
-			value: useMemo(() => ({
-				animationScheme,
-				duration,
-				open,
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			}), [
-				open,
-				animationScheme,
-				duration,
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			]),
+			value: componentContext,
 			children: (0, utils_exports.runIfFn)(children, {
 				open,
 				onClose

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: StyleValue<UsePopoverProps[\"flip\"]>\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return useMemo(\n    () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n    [flip, gutter, matchWidth, placement, strategy],\n  )\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [styleContext, { animationScheme, children, duration, ...rest }] =\n    useRootComponentProps({ ...props, ...styleProps })\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}
+{"version":3,"file":"popover.js","names":["motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: StyleValue<UsePopoverProps[\"flip\"]>\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return useMemo(\n    () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n    [flip, gutter, matchWidth, placement, strategy],\n  )\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [styleContext, { animationScheme, children, duration, ...rest }] =\n    useRootComponentProps({ ...props, ...styleProps })\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}

package/dist/esm/components/qr-code/qr-code.js

@@ -16,18 +16,19 @@ const { ComponentContext, PropsContext: QrCodePropsContext, useComponentContext,
 const QrCodeRoot = withProvider(({ children, frameProps, patternProps, ...rest }) => {
 	const { getFrameProps, getOverlayProps, getPatternProps, getRootProps } = useQrCode(rest);
 	const [omittedChildren, customFrame] = useSplitChildren(children, QrCodeFrame);
+	const context = useMemo(() => ({
+		getFrameProps,
+		getOverlayProps,
+		getPatternProps,
+		patternProps
+	}), [
+		getFrameProps,
+		getOverlayProps,
+		getPatternProps,
+		patternProps
+	]);
 	return /* @__PURE__ */ jsx(ComponentContext, {
-		value: useMemo(() => ({
-			getFrameProps,
-			getOverlayProps,
-			getPatternProps,
-			patternProps
-		}), [
-			getFrameProps,
-			getOverlayProps,
-			getPatternProps,
-			patternProps
-		]),
+		value: context,
 		children: /* @__PURE__ */ jsxs(styled.div, {
 			...getRootProps(),
 			children: [customFrame ?? /* @__PURE__ */ jsx(QrCodeFrame, { ...frameProps }), omittedChildren]

package/dist/esm/components/qr-code/qr-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.js","names":[],"sources":["../../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { QrCodeStyle } from \"./qr-code.style\"\nimport type { UseQrCodeProps, UseQrCodeReturn } from \"./use-qr-code\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { qrCodeStyle } from \"./qr-code.style\"\nimport { useQrCode } from \"./use-qr-code\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      UseQrCodeReturn,\n      \"getFrameProps\" | \"getOverlayProps\" | \"getPatternProps\"\n    >,\n    Pick<QrCodeRootProps, \"patternProps\"> {}\n\nexport interface QrCodeRootProps\n  extends\n    Omit<HTMLStyledProps, \"border\" | \"invert\">,\n    ThemeProps<QrCodeStyle>,\n    UseQrCodeProps {\n  /**\n   * Props for the frame component.\n   */\n  frameProps?: QrCodeFrameProps\n  /**\n   * Props for the pattern component.\n   */\n  patternProps?: QrCodePatternProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: QrCodePropsContext,\n  useComponentContext,\n  usePropsContext: useQrCodePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<QrCodeRootProps, QrCodeStyle, ComponentContext>(\n  \"qr-code\",\n  qrCodeStyle,\n)\n\nexport { QrCodePropsContext, useQrCodePropsContext }\n\n/**\n * `QrCode` is a component that displays a QR code.\n *\n * @see https://yamada-ui.com/docs/components/qr-code\n */\nexport const QrCodeRoot = withProvider<\"div\", QrCodeRootProps>(\n  ({ children, frameProps, patternProps, ...rest }) => {\n    const { getFrameProps, getOverlayProps, getPatternProps, getRootProps } =\n      useQrCode(rest)\n    const [omittedChildren, customFrame] = useSplitChildren(\n      children,\n      QrCodeFrame,\n    )\n    const context = useMemo(\n      () => ({ getFrameProps, getOverlayProps, getPatternProps, patternProps }),\n      [getFrameProps, getOverlayProps, getPatternProps, patternProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.div {...getRootProps()}>\n          {customFrame ?? <QrCodeFrame {...frameProps} />}\n          {omittedChildren}\n        </styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface QrCodeFrameProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const QrCodeFrame = withContext<\"svg\", QrCodeFrameProps>(\n  ({ children, ...rest }) => {\n    const { getFrameProps, patternProps } = useComponentContext()\n    const [omittedChildren, customPattern] = useSplitChildren(\n      children,\n      QrCodePattern,\n    )\n\n    return (\n      <styled.svg {...getFrameProps(rest)}>\n        {customPattern ?? <QrCodePattern {...patternProps} />}\n        {omittedChildren}\n      </styled.svg>\n    )\n  },\n  \"frame\",\n)()\n\nexport interface QrCodePatternProps extends HTMLStyledProps<\"path\"> {}\n\nexport const QrCodePattern = withContext<\"path\", QrCodePatternProps>(\n  \"path\",\n  \"pattern\",\n)(undefined, (props) => {\n  const { getPatternProps } = useComponentContext()\n\n  return getPatternProps(props)\n})\n\nexport interface QrCodeOverlayProps extends HTMLStyledProps {}\n\nexport const QrCodeOverlay = withContext<\"div\", QrCodeOverlayProps>(\n  \"div\",\n  \"overlay\",\n)(undefined, (props) => {\n  const { getOverlayProps } = useComponentContext()\n\n  return getOverlayProps(props)\n})\n"],"mappings":";;;;;;;;;AAkCA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,WACA,WACF;;;;;;AASA,MAAa,aAAa,cACvB,EAAE,UAAU,YAAY,cAAc,GAAG,WAAW;CACnD,MAAM,EAAE,eAAe,iBAAiB,iBAAiB,iBACvD,UAAU,IAAI;CAChB,MAAM,CAAC,iBAAiB,eAAe,iBACrC,UACA,WACF;CAMA,OACE,oBAAC,kBAAD;EAAkB,OANJ,eACP;GAAE;GAAe;GAAiB;GAAiB;EAAa,IACvE;GAAC;GAAe;GAAiB;GAAiB;EAAY,CAI/B;YAC7B,qBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;aAA7B,CACG,eAAe,oBAAC,aAAD,EAAa,GAAI,WAAa,CAAA,GAC7C,eACS;;CACI,CAAA;AAEtB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,cAAc,aACxB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,eAAe,iBAAiB,oBAAoB;CAC5D,MAAM,CAAC,iBAAiB,iBAAiB,iBACvC,UACA,aACF;CAEA,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI,cAAc,IAAI;YAAlC,CACG,iBAAiB,oBAAC,eAAD,EAAe,GAAI,aAAe,CAAA,GACnD,eACS;;AAEhB,GACA,OACF,CAAC,CAAC;AAIF,MAAa,gBAAgB,YAC3B,QACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OAAO,gBAAgB,KAAK;AAC9B,CAAC;AAID,MAAa,gBAAgB,YAC3B,OACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OAAO,gBAAgB,KAAK;AAC9B,CAAC"}
+{"version":3,"file":"qr-code.js","names":[],"sources":["../../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { QrCodeStyle } from \"./qr-code.style\"\nimport type { UseQrCodeProps, UseQrCodeReturn } from \"./use-qr-code\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { qrCodeStyle } from \"./qr-code.style\"\nimport { useQrCode } from \"./use-qr-code\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      UseQrCodeReturn,\n      \"getFrameProps\" | \"getOverlayProps\" | \"getPatternProps\"\n    >,\n    Pick<QrCodeRootProps, \"patternProps\"> {}\n\nexport interface QrCodeRootProps\n  extends\n    Omit<HTMLStyledProps, \"border\" | \"invert\">,\n    ThemeProps<QrCodeStyle>,\n    UseQrCodeProps {\n  /**\n   * Props for the frame component.\n   */\n  frameProps?: QrCodeFrameProps\n  /**\n   * Props for the pattern component.\n   */\n  patternProps?: QrCodePatternProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: QrCodePropsContext,\n  useComponentContext,\n  usePropsContext: useQrCodePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<QrCodeRootProps, QrCodeStyle, ComponentContext>(\n  \"qr-code\",\n  qrCodeStyle,\n)\n\nexport { QrCodePropsContext, useQrCodePropsContext }\n\n/**\n * `QrCode` is a component that displays a QR code.\n *\n * @see https://yamada-ui.com/docs/components/qr-code\n */\nexport const QrCodeRoot = withProvider<\"div\", QrCodeRootProps>(\n  ({ children, frameProps, patternProps, ...rest }) => {\n    const { getFrameProps, getOverlayProps, getPatternProps, getRootProps } =\n      useQrCode(rest)\n    const [omittedChildren, customFrame] = useSplitChildren(\n      children,\n      QrCodeFrame,\n    )\n    const context = useMemo(\n      () => ({ getFrameProps, getOverlayProps, getPatternProps, patternProps }),\n      [getFrameProps, getOverlayProps, getPatternProps, patternProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.div {...getRootProps()}>\n          {customFrame ?? <QrCodeFrame {...frameProps} />}\n          {omittedChildren}\n        </styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface QrCodeFrameProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const QrCodeFrame = withContext<\"svg\", QrCodeFrameProps>(\n  ({ children, ...rest }) => {\n    const { getFrameProps, patternProps } = useComponentContext()\n    const [omittedChildren, customPattern] = useSplitChildren(\n      children,\n      QrCodePattern,\n    )\n\n    return (\n      <styled.svg {...getFrameProps(rest)}>\n        {customPattern ?? <QrCodePattern {...patternProps} />}\n        {omittedChildren}\n      </styled.svg>\n    )\n  },\n  \"frame\",\n)()\n\nexport interface QrCodePatternProps extends HTMLStyledProps<\"path\"> {}\n\nexport const QrCodePattern = withContext<\"path\", QrCodePatternProps>(\n  \"path\",\n  \"pattern\",\n)(undefined, (props) => {\n  const { getPatternProps } = useComponentContext()\n\n  return getPatternProps(props)\n})\n\nexport interface QrCodeOverlayProps extends HTMLStyledProps {}\n\nexport const QrCodeOverlay = withContext<\"div\", QrCodeOverlayProps>(\n  \"div\",\n  \"overlay\",\n)(undefined, (props) => {\n  const { getOverlayProps } = useComponentContext()\n\n  return getOverlayProps(props)\n})\n"],"mappings":";;;;;;;;;AAkCA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,WACA,WACF;;;;;;AASA,MAAa,aAAa,cACvB,EAAE,UAAU,YAAY,cAAc,GAAG,WAAW;CACnD,MAAM,EAAE,eAAe,iBAAiB,iBAAiB,iBACvD,UAAU,IAAI;CAChB,MAAM,CAAC,iBAAiB,eAAe,iBACrC,UACA,WACF;CACA,MAAM,UAAU,eACP;EAAE;EAAe;EAAiB;EAAiB;CAAa,IACvE;EAAC;EAAe;EAAiB;EAAiB;CAAY,CAChE;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,qBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;aAA7B,CACG,eAAe,oBAAC,aAAD,EAAa,GAAI,WAAa,CAAA,GAC7C,eACS;;CACI,CAAA;AAEtB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,cAAc,aACxB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,eAAe,iBAAiB,oBAAoB;CAC5D,MAAM,CAAC,iBAAiB,iBAAiB,iBACvC,UACA,aACF;CAEA,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI,cAAc,IAAI;YAAlC,CACG,iBAAiB,oBAAC,eAAD,EAAe,GAAI,aAAe,CAAA,GACnD,eACS;;AAEhB,GACA,OACF,CAAC,CAAC;AAIF,MAAa,gBAAgB,YAC3B,QACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OAAO,gBAAgB,KAAK;AAC9B,CAAC;AAID,MAAa,gBAAgB,YAC3B,OACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OAAO,gBAAgB,KAAK;AAC9B,CAAC"}

package/dist/esm/components/rating/rating.js

@@ -18,68 +18,70 @@ const { ComponentContext, PropsContext: RatingPropsContext, useComponentContext,
 */
 const Rating = withProvider(({ color, emptyIcon, filledIcon, groupProps, iconProps, inputProps, itemProps, ...rest }) => {
 	const { id, name, count, decimal, disabled, displayValue, fractions, highlightSelectedOnly, hoveredValue, interactive, outsideRef, readOnly, required, roundedValue, setHoveredValue, setValue, value, ariaProps, dataProps, eventProps, getRootProps } = useRating(rest);
+	const ratingContext = useMemo(() => ({
+		id,
+		name,
+		count,
+		decimal,
+		disabled,
+		displayValue,
+		fractions,
+		highlightSelectedOnly,
+		hoveredValue,
+		interactive,
+		outsideRef,
+		readOnly,
+		required,
+		roundedValue,
+		setHoveredValue,
+		setValue,
+		value,
+		ariaProps,
+		dataProps,
+		eventProps
+	}), [
+		id,
+		name,
+		count,
+		decimal,
+		disabled,
+		fractions,
+		highlightSelectedOnly,
+		hoveredValue,
+		interactive,
+		displayValue,
+		outsideRef,
+		readOnly,
+		required,
+		roundedValue,
+		setHoveredValue,
+		setValue,
+		value,
+		ariaProps,
+		dataProps,
+		eventProps
+	]);
+	const componentContext = useMemo(() => ({
+		color,
+		emptyIcon,
+		filledIcon,
+		groupProps,
+		iconProps,
+		inputProps,
+		itemProps
+	}), [
+		color,
+		emptyIcon,
+		filledIcon,
+		groupProps,
+		iconProps,
+		inputProps,
+		itemProps
+	]);
 	return /* @__PURE__ */ jsx(RatingContext, {
-		value: useMemo(() => ({
-			id,
-			name,
-			count,
-			decimal,
-			disabled,
-			displayValue,
-			fractions,
-			highlightSelectedOnly,
-			hoveredValue,
-			interactive,
-			outsideRef,
-			readOnly,
-			required,
-			roundedValue,
-			setHoveredValue,
-			setValue,
-			value,
-			ariaProps,
-			dataProps,
-			eventProps
-		}), [
-			id,
-			name,
-			count,
-			decimal,
-			disabled,
-			fractions,
-			highlightSelectedOnly,
-			hoveredValue,
-			interactive,
-			displayValue,
-			outsideRef,
-			readOnly,
-			required,
-			roundedValue,
-			setHoveredValue,
-			setValue,
-			value,
-			ariaProps,
-			dataProps,
-			eventProps
-		]),
+		value: ratingContext,
 		children: /* @__PURE__ */ jsx(ComponentContext, {
-			value: useMemo(() => ({
-				color,
-				emptyIcon,
-				filledIcon,
-				groupProps,
-				iconProps,
-				inputProps,
-				itemProps
-			}), [
-				color,
-				emptyIcon,
-				filledIcon,
-				groupProps,
-				iconProps,
-				inputProps,
-				itemProps
-			]),
+			value: componentContext,
 			children: /* @__PURE__ */ jsx(styled.div, {
 				...getRootProps(),
 				children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(RatingGroup, { value: index + 1 }, index))

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

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":[],"sources":["../../../../src/components/rating/rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FunctionOrValue, Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { RatingStyle } from \"./rating.style\"\nimport type { UseRatingItemProps, UseRatingProps } from \"./use-rating\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { StarIcon } from \"../icon\"\nimport { ratingStyle } from \"./rating.style\"\nimport {\n  RatingContext,\n  useRating,\n  useRatingContext,\n  useRatingItem,\n} from \"./use-rating\"\n\ninterface ComponentContext extends Pick<\n  RatingProps,\n  | \"color\"\n  | \"emptyIcon\"\n  | \"filledIcon\"\n  | \"groupProps\"\n  | \"iconProps\"\n  | \"inputProps\"\n  | \"itemProps\"\n> {}\n\nexport interface RatingProps\n  extends\n    Merge<Omit<HTMLStyledProps, \"children\" | \"color\">, UseRatingProps>,\n    ThemeProps<RatingStyle> {\n  /**\n   * The color of the filled icons.\n   */\n  color?: FunctionOrValue<number, CSSProps[\"color\"]>\n  /**\n   * The empty icon for the rating.\n   */\n  emptyIcon?: ReactNodeOrFunction<number>\n  /**\n   * The filled icon for the rating.\n   */\n  filledIcon?: ReactNodeOrFunction<number>\n  /**\n   * Props for the rating group.\n   */\n  groupProps?: FunctionOrValue<number, RatingGroupProps>\n  /**\n   * Props for the rating item.\n   */\n  iconProps?: FunctionOrValue<number, RatingIconProps>\n  /**\n   * Props for the input element.\n   */\n  inputProps?: FunctionOrValue<number, HTMLStyledProps<\"input\">>\n  /**\n   * Props for the rating item.\n   */\n  itemProps?: FunctionOrValue<number, RatingItemProps>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: RatingPropsContext,\n  useComponentContext,\n  usePropsContext: useRatingPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<RatingProps, RatingStyle, ComponentContext>(\n  \"rating\",\n  ratingStyle,\n)\n\nexport { RatingPropsContext, useRatingPropsContext }\n\n/**\n * `Rating` is a component used to allow users to provide ratings.\n *\n * @see https://yamada-ui.com/docs/components/rating\n */\nexport const Rating = withProvider<\"div\", RatingProps>(\n  ({\n    color,\n    emptyIcon,\n    filledIcon,\n    groupProps,\n    iconProps,\n    inputProps,\n    itemProps,\n    ...rest\n  }) => {\n    const {\n      id,\n      name,\n      count,\n      decimal,\n      disabled,\n      displayValue,\n      fractions,\n      highlightSelectedOnly,\n      hoveredValue,\n      interactive,\n      outsideRef,\n      readOnly,\n      required,\n      roundedValue,\n      setHoveredValue,\n      setValue,\n      value,\n      ariaProps,\n      dataProps,\n      eventProps,\n      getRootProps,\n    } = useRating(rest)\n    const ratingContext = useMemo(\n      () => ({\n        id,\n        name,\n        count,\n        decimal,\n        disabled,\n        displayValue,\n        fractions,\n        highlightSelectedOnly,\n        hoveredValue,\n        interactive,\n        outsideRef,\n        readOnly,\n        required,\n        roundedValue,\n        setHoveredValue,\n        setValue,\n        value,\n        ariaProps,\n        dataProps,\n        eventProps,\n      }),\n      [\n        id,\n        name,\n        count,\n        decimal,\n        disabled,\n        fractions,\n        highlightSelectedOnly,\n        hoveredValue,\n        interactive,\n        displayValue,\n        outsideRef,\n        readOnly,\n        required,\n        roundedValue,\n        setHoveredValue,\n        setValue,\n        value,\n        ariaProps,\n        dataProps,\n        eventProps,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({\n        color,\n        emptyIcon,\n        filledIcon,\n        groupProps,\n        iconProps,\n        inputProps,\n        itemProps,\n      }),\n      [\n        color,\n        emptyIcon,\n        filledIcon,\n        groupProps,\n        iconProps,\n        inputProps,\n        itemProps,\n      ],\n    )\n\n    return (\n      <RatingContext value={ratingContext}>\n        <ComponentContext value={componentContext}>\n          <styled.div {...getRootProps()}>\n            {Array.from({ length: count }).map((_, index) => (\n              <RatingGroup key={index} value={index + 1} />\n            ))}\n          </styled.div>\n        </ComponentContext>\n      </RatingContext>\n    )\n  },\n  \"root\",\n)()\n\ninterface RatingGroupProps extends HTMLStyledProps {\n  value: number\n}\n\nconst RatingGroup = withContext<\"div\", RatingGroupProps>(\n  ({ value, ...rest }) => {\n    const { fractions } = useRatingContext()\n    const { groupProps } = useComponentContext()\n    const count = useMemo(\n      () => (value === 1 ? fractions + 1 : fractions),\n      [value, fractions],\n    )\n\n    return (\n      <styled.div {...mergeProps(rest, runIfFn(groupProps, value))()}>\n        {Array.from({ length: count }).map((_, index) => (\n          <RatingItem key={index} groupValue={value} index={index} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"group\",\n)()\n\ninterface RatingItemProps\n  extends HTMLStyledProps<\"label\">, UseRatingItemProps {}\n\nconst RatingItem = withContext<\"label\", RatingItemProps>((props) => {\n  const {\n    active,\n    filled,\n    fractionValue,\n    groupValue,\n    getInputProps,\n    getLabelProps,\n  } = useRatingItem(props)\n  const {\n    emptyIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n    filledIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n    iconProps,\n    inputProps,\n    itemProps,\n  } = useComponentContext()\n  const clipPath =\n    fractionValue !== 1\n      ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)`\n      : undefined\n\n  return (\n    <styled.label {...getLabelProps(runIfFn(itemProps, groupValue))}>\n      <styled.input {...getInputProps(runIfFn(inputProps, groupValue))} />\n\n      <RatingIcon\n        {...{ \"--clip-path\": clipPath }}\n        {...runIfFn(iconProps, groupValue)}\n      >\n        {filled\n          ? runIfFn(filledIcon, groupValue)\n          : runIfFn(emptyIcon, groupValue)}\n      </RatingIcon>\n    </styled.label>\n  )\n}, \"item\")(undefined, ({ groupValue, ...rest }) => {\n  const { color } = useComponentContext()\n\n  return {\n    \"--filled-color\": varAttr(runIfFn(color, groupValue), \"colors\"),\n    groupValue,\n    ...rest,\n  }\n})\n\ninterface RatingIconProps extends HTMLStyledProps {}\n\nconst RatingIcon = withContext<\"div\", RatingIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;AA+DA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,UACA,WACF;;;;;;AASA,MAAa,SAAS,cACnB,EACC,OACA,WACA,YACA,YACA,WACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,IACA,MACA,OACA,SACA,UACA,cACA,WACA,uBACA,cACA,aACA,YACA,UACA,UACA,cACA,iBACA,UACA,OACA,WACA,WACA,YACA,iBACE,UAAU,IAAI;CAoElB,OACE,oBAAC,eAAD;EAAe,OApEK,eACb;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAwBkC;YAChC,oBAAC,kBAAD;GAAkB,OAvBG,eAChB;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF,IACA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAK0C;aACtC,oBAAC,OAAO,KAAR;IAAY,GAAI,aAAa;cAC1B,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,aAAD,EAAyB,OAAO,QAAQ,EAAI,GAA1B,KAA0B,CAC7C;GACS,CAAA;EACI,CAAA;CACL,CAAA;AAEnB,GACA,MACF,CAAC,CAAC;AAMF,MAAM,cAAc,aACjB,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,cAAc,iBAAiB;CACvC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,QAAQ,cACL,UAAU,IAAI,YAAY,IAAI,WACrC,CAAC,OAAO,SAAS,CACnB;CAEA,OACE,oBAAC,OAAO,KAAR;EAAY,GAAI,WAAW,OAAA,GAAA,cAAA,QAAA,CAAc,YAAY,KAAK,CAAC,CAAC,CAAC;YAC1D,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,YAAD;GAAwB,YAAY;GAAc;EAAQ,GAAzC,KAAyC,CAC3D;CACS,CAAA;AAEhB,GACA,OACF,CAAC,CAAC;AAKF,MAAM,aAAa,aAAuC,UAAU;CAClE,MAAM,EACJ,QACA,QACA,eACA,YACA,eACA,kBACE,cAAc,KAAK;CACvB,MAAM,EACJ,YAAY,oBAAC,UAAD;EAAU,MAAK;EAAe,aAAY;CAAgB,CAAA,GACtE,aAAa,oBAAC,UAAD;EAAU,MAAK;EAAe,aAAY;CAAgB,CAAA,GACvE,WACA,YACA,cACE,oBAAoB;CACxB,MAAM,WACJ,kBAAkB,IACd,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD,KAAA;CAEN,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,eAAA,GAAA,cAAA,QAAA,CAAsB,WAAW,UAAU,CAAC;YAA9D,CACE,oBAAC,OAAO,OAAR,EAAc,GAAI,eAAA,GAAA,cAAA,QAAA,CAAsB,YAAY,UAAU,CAAC,EAAI,CAAA,GAEnE,oBAAC,YAAD;GACQ,eAAe;GACrB,IAAA,GAAA,cAAA,QAAA,CAAY,WAAW,UAAU;aAEhC,UAAA,GAAA,cAAA,QAAA,CACW,YAAY,UAAU,KAAA,GAAA,cAAA,QAAA,CACtB,WAAW,UAAU;EACvB,CAAA,CACA;;AAElB,GAAG,MAAM,CAAC,CAAC,KAAA,IAAY,EAAE,YAAY,GAAG,WAAW;CACjD,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO;EACL,kBAAkB,SAAA,GAAA,cAAA,QAAA,CAAgB,OAAO,UAAU,GAAG,QAAQ;EAC9D;EACA,GAAG;CACL;AACF,CAAC;AAID,MAAM,aAAa,YAAoC,OAAO,MAAM,CAAC,CAAC"}
+{"version":3,"file":"rating.js","names":[],"sources":["../../../../src/components/rating/rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FunctionOrValue, Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { RatingStyle } from \"./rating.style\"\nimport type { UseRatingItemProps, UseRatingProps } from \"./use-rating\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { StarIcon } from \"../icon\"\nimport { ratingStyle } from \"./rating.style\"\nimport {\n  RatingContext,\n  useRating,\n  useRatingContext,\n  useRatingItem,\n} from \"./use-rating\"\n\ninterface ComponentContext extends Pick<\n  RatingProps,\n  | \"color\"\n  | \"emptyIcon\"\n  | \"filledIcon\"\n  | \"groupProps\"\n  | \"iconProps\"\n  | \"inputProps\"\n  | \"itemProps\"\n> {}\n\nexport interface RatingProps\n  extends\n    Merge<Omit<HTMLStyledProps, \"children\" | \"color\">, UseRatingProps>,\n    ThemeProps<RatingStyle> {\n  /**\n   * The color of the filled icons.\n   */\n  color?: FunctionOrValue<number, CSSProps[\"color\"]>\n  /**\n   * The empty icon for the rating.\n   */\n  emptyIcon?: ReactNodeOrFunction<number>\n  /**\n   * The filled icon for the rating.\n   */\n  filledIcon?: ReactNodeOrFunction<number>\n  /**\n   * Props for the rating group.\n   */\n  groupProps?: FunctionOrValue<number, RatingGroupProps>\n  /**\n   * Props for the rating item.\n   */\n  iconProps?: FunctionOrValue<number, RatingIconProps>\n  /**\n   * Props for the input element.\n   */\n  inputProps?: FunctionOrValue<number, HTMLStyledProps<\"input\">>\n  /**\n   * Props for the rating item.\n   */\n  itemProps?: FunctionOrValue<number, RatingItemProps>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: RatingPropsContext,\n  useComponentContext,\n  usePropsContext: useRatingPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<RatingProps, RatingStyle, ComponentContext>(\n  \"rating\",\n  ratingStyle,\n)\n\nexport { RatingPropsContext, useRatingPropsContext }\n\n/**\n * `Rating` is a component used to allow users to provide ratings.\n *\n * @see https://yamada-ui.com/docs/components/rating\n */\nexport const Rating = withProvider<\"div\", RatingProps>(\n  ({\n    color,\n    emptyIcon,\n    filledIcon,\n    groupProps,\n    iconProps,\n    inputProps,\n    itemProps,\n    ...rest\n  }) => {\n    const {\n      id,\n      name,\n      count,\n      decimal,\n      disabled,\n      displayValue,\n      fractions,\n      highlightSelectedOnly,\n      hoveredValue,\n      interactive,\n      outsideRef,\n      readOnly,\n      required,\n      roundedValue,\n      setHoveredValue,\n      setValue,\n      value,\n      ariaProps,\n      dataProps,\n      eventProps,\n      getRootProps,\n    } = useRating(rest)\n    const ratingContext = useMemo(\n      () => ({\n        id,\n        name,\n        count,\n        decimal,\n        disabled,\n        displayValue,\n        fractions,\n        highlightSelectedOnly,\n        hoveredValue,\n        interactive,\n        outsideRef,\n        readOnly,\n        required,\n        roundedValue,\n        setHoveredValue,\n        setValue,\n        value,\n        ariaProps,\n        dataProps,\n        eventProps,\n      }),\n      [\n        id,\n        name,\n        count,\n        decimal,\n        disabled,\n        fractions,\n        highlightSelectedOnly,\n        hoveredValue,\n        interactive,\n        displayValue,\n        outsideRef,\n        readOnly,\n        required,\n        roundedValue,\n        setHoveredValue,\n        setValue,\n        value,\n        ariaProps,\n        dataProps,\n        eventProps,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({\n        color,\n        emptyIcon,\n        filledIcon,\n        groupProps,\n        iconProps,\n        inputProps,\n        itemProps,\n      }),\n      [\n        color,\n        emptyIcon,\n        filledIcon,\n        groupProps,\n        iconProps,\n        inputProps,\n        itemProps,\n      ],\n    )\n\n    return (\n      <RatingContext value={ratingContext}>\n        <ComponentContext value={componentContext}>\n          <styled.div {...getRootProps()}>\n            {Array.from({ length: count }).map((_, index) => (\n              <RatingGroup key={index} value={index + 1} />\n            ))}\n          </styled.div>\n        </ComponentContext>\n      </RatingContext>\n    )\n  },\n  \"root\",\n)()\n\ninterface RatingGroupProps extends HTMLStyledProps {\n  value: number\n}\n\nconst RatingGroup = withContext<\"div\", RatingGroupProps>(\n  ({ value, ...rest }) => {\n    const { fractions } = useRatingContext()\n    const { groupProps } = useComponentContext()\n    const count = useMemo(\n      () => (value === 1 ? fractions + 1 : fractions),\n      [value, fractions],\n    )\n\n    return (\n      <styled.div {...mergeProps(rest, runIfFn(groupProps, value))()}>\n        {Array.from({ length: count }).map((_, index) => (\n          <RatingItem key={index} groupValue={value} index={index} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"group\",\n)()\n\ninterface RatingItemProps\n  extends HTMLStyledProps<\"label\">, UseRatingItemProps {}\n\nconst RatingItem = withContext<\"label\", RatingItemProps>((props) => {\n  const {\n    active,\n    filled,\n    fractionValue,\n    groupValue,\n    getInputProps,\n    getLabelProps,\n  } = useRatingItem(props)\n  const {\n    emptyIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n    filledIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n    iconProps,\n    inputProps,\n    itemProps,\n  } = useComponentContext()\n  const clipPath =\n    fractionValue !== 1\n      ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)`\n      : undefined\n\n  return (\n    <styled.label {...getLabelProps(runIfFn(itemProps, groupValue))}>\n      <styled.input {...getInputProps(runIfFn(inputProps, groupValue))} />\n\n      <RatingIcon\n        {...{ \"--clip-path\": clipPath }}\n        {...runIfFn(iconProps, groupValue)}\n      >\n        {filled\n          ? runIfFn(filledIcon, groupValue)\n          : runIfFn(emptyIcon, groupValue)}\n      </RatingIcon>\n    </styled.label>\n  )\n}, \"item\")(undefined, ({ groupValue, ...rest }) => {\n  const { color } = useComponentContext()\n\n  return {\n    \"--filled-color\": varAttr(runIfFn(color, groupValue), \"colors\"),\n    groupValue,\n    ...rest,\n  }\n})\n\ninterface RatingIconProps extends HTMLStyledProps {}\n\nconst RatingIcon = withContext<\"div\", RatingIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;AA+DA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,UACA,WACF;;;;;;AASA,MAAa,SAAS,cACnB,EACC,OACA,WACA,YACA,YACA,WACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,IACA,MACA,OACA,SACA,UACA,cACA,WACA,uBACA,cACA,aACA,YACA,UACA,UACA,cACA,iBACA,UACA,OACA,WACA,WACA,YACA,iBACE,UAAU,IAAI;CAClB,MAAM,gBAAgB,eACb;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,MAAM,mBAAmB,eAChB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,eAAD;EAAe,OAAO;YACpB,oBAAC,kBAAD;GAAkB,OAAO;aACvB,oBAAC,OAAO,KAAR;IAAY,GAAI,aAAa;cAC1B,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,aAAD,EAAyB,OAAO,QAAQ,EAAI,GAA1B,KAA0B,CAC7C;GACS,CAAA;EACI,CAAA;CACL,CAAA;AAEnB,GACA,MACF,CAAC,CAAC;AAMF,MAAM,cAAc,aACjB,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,cAAc,iBAAiB;CACvC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,QAAQ,cACL,UAAU,IAAI,YAAY,IAAI,WACrC,CAAC,OAAO,SAAS,CACnB;CAEA,OACE,oBAAC,OAAO,KAAR;EAAY,GAAI,WAAW,OAAA,GAAA,cAAA,QAAA,CAAc,YAAY,KAAK,CAAC,CAAC,CAAC;YAC1D,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,YAAD;GAAwB,YAAY;GAAc;EAAQ,GAAzC,KAAyC,CAC3D;CACS,CAAA;AAEhB,GACA,OACF,CAAC,CAAC;AAKF,MAAM,aAAa,aAAuC,UAAU;CAClE,MAAM,EACJ,QACA,QACA,eACA,YACA,eACA,kBACE,cAAc,KAAK;CACvB,MAAM,EACJ,YAAY,oBAAC,UAAD;EAAU,MAAK;EAAe,aAAY;CAAgB,CAAA,GACtE,aAAa,oBAAC,UAAD;EAAU,MAAK;EAAe,aAAY;CAAgB,CAAA,GACvE,WACA,YACA,cACE,oBAAoB;CACxB,MAAM,WACJ,kBAAkB,IACd,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD,KAAA;CAEN,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,eAAA,GAAA,cAAA,QAAA,CAAsB,WAAW,UAAU,CAAC;YAA9D,CACE,oBAAC,OAAO,OAAR,EAAc,GAAI,eAAA,GAAA,cAAA,QAAA,CAAsB,YAAY,UAAU,CAAC,EAAI,CAAA,GAEnE,oBAAC,YAAD;GACQ,eAAe;GACrB,IAAA,GAAA,cAAA,QAAA,CAAY,WAAW,UAAU;aAEhC,UAAA,GAAA,cAAA,QAAA,CACW,YAAY,UAAU,KAAA,GAAA,cAAA,QAAA,CACtB,WAAW,UAAU;EACvB,CAAA,CACA;;AAElB,GAAG,MAAM,CAAC,CAAC,KAAA,IAAY,EAAE,YAAY,GAAG,WAAW;CACjD,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO;EACL,kBAAkB,SAAA,GAAA,cAAA,QAAA,CAAgB,OAAO,UAAU,GAAG,QAAQ;EAC9D;EACA,GAAG;CACL;AACF,CAAC;AAID,MAAM,aAAa,YAAoC,OAAO,MAAM,CAAC,CAAC"}

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

@@ -37,7 +37,8 @@ const useRating = (props = {}) => {
 		if (!rootRef.current) return -1;
 		const { left, width } = rootRef.current.getBoundingClientRect();
 		const itemWidth = width / count;
-		return (0, utils_exports.clampNumber)(getRoundedValue((x - left) / itemWidth + decimal / 2, decimal), decimal, count);
+		const hoveredValue = (x - left) / itemWidth;
+		return (0, utils_exports.clampNumber)(getRoundedValue(hoveredValue + decimal / 2, decimal), decimal, count);
 	}, [count, decimal]);
 	const onMouseEnter = useCallback(() => {
 		if (interactive) outsideRef.current = false;
@@ -69,7 +70,8 @@ const useRating = (props = {}) => {
 		ev.preventDefault();
 		const el = ev.touches[0];
 		if (!el) return;
-		setValue(getHoveredValue(el.clientX));
+		const value = getHoveredValue(el.clientX);
+		setValue(value);
 	}, [getHoveredValue, setValue]);
 	const onTouchEnd = useCallback((ev) => {
 		ev.preventDefault();
@@ -142,7 +144,8 @@ const useRatingItem = ({ groupValue, index, ...rest }) => {
 	}, [outsideRef, setHoveredValue]);
 	const onInputChange = useCallback((ev) => {
 		if (!interactive) return;
-		setHoveredValue(parseFloat(ev.target.value));
+		const value = parseFloat(ev.target.value);
+		setHoveredValue(value);
 	}, [interactive, setHoveredValue]);
 	const onChange = useCallback((value) => {
 		if (!interactive) return;

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

@@ -1 +1 @@
-{"version":3,"file":"use-rating.js","names":["createContext"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  clampNumber,\n  createContext,\n  dataAttr,\n  handlerAll,\n  runKeyAction,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n  const rounded = Math.round(value / to) * to\n  const precision = `${to}`.split(\".\")[1]?.length || 0\n\n  return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n  name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n  extends FieldProps, Omit<HTMLProps, \"color\" | \"defaultValue\" | \"onChange\"> {\n  /**\n   * Number of controls that should be rendered.\n   *\n   * @default 5\n   */\n  count?: number\n  /**\n   * The initial value of the rating.\n   *\n   * @default 0\n   */\n  defaultValue?: number\n  /**\n   * Number of fractions each item can be divided into,\n   *\n   * @default 1\n   */\n  fractions?: number\n  /**\n   * If `true`, only the selected icons will be filled.\n   *\n   * @default false\n   */\n  highlightSelectedOnly?: boolean\n  /**\n   * The top-level id string that will be applied to the rating.\n   * The index of the rating item will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The name of the input element.\n   */\n  name?: string\n  /**\n   * The value of the rating.\n   */\n  value?: number\n  /**\n   * The callback invoked when value state changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * The callback invoked when hovering over the rating.\n   */\n  onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      name = uuid,\n      count: countProp = 5,\n      defaultValue = 0,\n      disabled,\n      fractions: fractionsProp = 1,\n      highlightSelectedOnly = false,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onHover,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps({ ...props, notSupportReadOnly: true })\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hoveredValue, setHoveredValue] = useState(-1)\n  const outsideRef = useRef(true)\n  const fractions = Math.floor(fractionsProp)\n  const count = Math.floor(countProp)\n  const decimal = 1 / fractions\n  const roundedValue = useMemo(\n    () => getRoundedValue(value, decimal),\n    [decimal, value],\n  )\n  const interactive = !(readOnly || disabled)\n  const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n  const getHoveredValue = useCallback(\n    (x: number) => {\n      if (!rootRef.current) return -1\n\n      const { left, width } = rootRef.current.getBoundingClientRect()\n      const itemWidth = width / count\n\n      const hoveredValue = (x - left) / itemWidth\n\n      const value = clampNumber(\n        getRoundedValue(hoveredValue + decimal / 2, decimal),\n        decimal,\n        count,\n      )\n\n      return value\n    },\n    [count, decimal],\n  )\n\n  const onMouseEnter = useCallback(() => {\n    if (interactive) outsideRef.current = false\n  }, [interactive])\n\n  const onMouseLeave = useCallback(() => {\n    if (!interactive) return\n\n    setHoveredValue(-1)\n    outsideRef.current = true\n\n    if (hoveredValue !== -1) onHover?.(-1)\n  }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n  const onMouseMove = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) return\n\n      const roundedValue = getHoveredValue(ev.clientX)\n\n      setHoveredValue(roundedValue)\n\n      if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n    },\n    [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n  )\n\n  const onTouchStart = useCallback(\n    (ev: TouchEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const el = ev.touches[0]\n\n      if (!el) return\n\n      const value = getHoveredValue(el.clientX)\n\n      setValue(value)\n    },\n    [getHoveredValue, setValue],\n  )\n\n  const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n    ev.preventDefault()\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        eventProps,\n        ariaProps,\n        {\n          id,\n          \"aria-label\": `${value} Stars`,\n          \"aria-readonly\": ariaAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n        { ref },\n        { ref: rootRef },\n      )()\n      return {\n        ...merged,\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        onMouseMove: handlerAll(\n          props.onMouseMove,\n          rest.onMouseMove,\n          onMouseMove,\n        ),\n        onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n        onTouchStart: handlerAll(\n          props.onTouchStart,\n          rest.onTouchStart,\n          onTouchStart,\n        ),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      id,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseMove,\n      onTouchEnd,\n      onTouchStart,\n      readOnly,\n      rest,\n      value,\n    ],\n  )\n\n  return {\n    id,\n    name,\n    count,\n    decimal,\n    disabled,\n    displayValue,\n    fractions,\n    highlightSelectedOnly,\n    hoveredValue,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    value,\n    ariaProps,\n    dataProps,\n    eventProps,\n    getRootProps,\n  }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n  groupValue: number\n  index: number\n}\n\nexport const useRatingItem = ({\n  groupValue,\n  index,\n  ...rest\n}: UseRatingItemProps) => {\n  const {\n    id: rootId,\n    name,\n    decimal,\n    disabled,\n    displayValue,\n    highlightSelectedOnly,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useRatingContext()\n  const fractionValue = decimal * (groupValue === 1 ? index : index + 1)\n  const value = useMemo(\n    () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n    [decimal, fractionValue, groupValue],\n  )\n  const active = value === displayValue\n  const checked = value === roundedValue\n  const filled = highlightSelectedOnly\n    ? value === displayValue\n    : value <= displayValue\n  const id = `${rootId}-${groupValue}-${value}`\n\n  const onBlur = useCallback(() => {\n    if (outsideRef.current) setHoveredValue(-1)\n  }, [outsideRef, setHoveredValue])\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return\n\n      const value = parseFloat(ev.target.value)\n\n      setHoveredValue(value)\n    },\n    [interactive, setHoveredValue],\n  )\n\n  const onChange = useCallback(\n    (value: number) => {\n      if (!interactive) return\n\n      setValue(value)\n    },\n    [interactive, setValue],\n  )\n\n  const onMouseDown = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onTouchStart = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      runKeyAction(ev, {\n        Space: () => onChange(value),\n      })\n    },\n    [onChange, value],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    ({ style, ...props } = {}) =>\n      mergeProps(\n        dataProps,\n        ariaProps,\n        {\n          htmlFor: id,\n          \"data-active\": dataAttr(active),\n          \"data-filled\": dataAttr(filled),\n        },\n        rest,\n        props,\n        { style },\n        {\n          style: {\n            zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n          },\n        },\n        { onMouseDown, onTouchStart },\n      )(),\n    [\n      active,\n      ariaProps,\n      dataProps,\n      filled,\n      fractionValue,\n      id,\n      onMouseDown,\n      onTouchStart,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...eventProps,\n      ...ariaProps,\n      id,\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-label\": value.toString(),\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(checked),\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      onBlur: handlerAll(onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      id,\n      name,\n      value,\n      active,\n      checked,\n      dataProps,\n      eventProps,\n      ariaProps,\n      disabled,\n      readOnly,\n      required,\n      onBlur,\n      onInputChange,\n      onKeyDown,\n    ],\n  )\n\n  return {\n    active,\n    checked,\n    filled,\n    fractionValue,\n    groupValue,\n    value,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-rating.js","names":["createContext"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  clampNumber,\n  createContext,\n  dataAttr,\n  handlerAll,\n  runKeyAction,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n  const rounded = Math.round(value / to) * to\n  const precision = `${to}`.split(\".\")[1]?.length || 0\n\n  return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n  name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n  extends FieldProps, Omit<HTMLProps, \"color\" | \"defaultValue\" | \"onChange\"> {\n  /**\n   * Number of controls that should be rendered.\n   *\n   * @default 5\n   */\n  count?: number\n  /**\n   * The initial value of the rating.\n   *\n   * @default 0\n   */\n  defaultValue?: number\n  /**\n   * Number of fractions each item can be divided into,\n   *\n   * @default 1\n   */\n  fractions?: number\n  /**\n   * If `true`, only the selected icons will be filled.\n   *\n   * @default false\n   */\n  highlightSelectedOnly?: boolean\n  /**\n   * The top-level id string that will be applied to the rating.\n   * The index of the rating item will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The name of the input element.\n   */\n  name?: string\n  /**\n   * The value of the rating.\n   */\n  value?: number\n  /**\n   * The callback invoked when value state changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * The callback invoked when hovering over the rating.\n   */\n  onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      name = uuid,\n      count: countProp = 5,\n      defaultValue = 0,\n      disabled,\n      fractions: fractionsProp = 1,\n      highlightSelectedOnly = false,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onHover,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps({ ...props, notSupportReadOnly: true })\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hoveredValue, setHoveredValue] = useState(-1)\n  const outsideRef = useRef(true)\n  const fractions = Math.floor(fractionsProp)\n  const count = Math.floor(countProp)\n  const decimal = 1 / fractions\n  const roundedValue = useMemo(\n    () => getRoundedValue(value, decimal),\n    [decimal, value],\n  )\n  const interactive = !(readOnly || disabled)\n  const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n  const getHoveredValue = useCallback(\n    (x: number) => {\n      if (!rootRef.current) return -1\n\n      const { left, width } = rootRef.current.getBoundingClientRect()\n      const itemWidth = width / count\n\n      const hoveredValue = (x - left) / itemWidth\n\n      const value = clampNumber(\n        getRoundedValue(hoveredValue + decimal / 2, decimal),\n        decimal,\n        count,\n      )\n\n      return value\n    },\n    [count, decimal],\n  )\n\n  const onMouseEnter = useCallback(() => {\n    if (interactive) outsideRef.current = false\n  }, [interactive])\n\n  const onMouseLeave = useCallback(() => {\n    if (!interactive) return\n\n    setHoveredValue(-1)\n    outsideRef.current = true\n\n    if (hoveredValue !== -1) onHover?.(-1)\n  }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n  const onMouseMove = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) return\n\n      const roundedValue = getHoveredValue(ev.clientX)\n\n      setHoveredValue(roundedValue)\n\n      if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n    },\n    [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n  )\n\n  const onTouchStart = useCallback(\n    (ev: TouchEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const el = ev.touches[0]\n\n      if (!el) return\n\n      const value = getHoveredValue(el.clientX)\n\n      setValue(value)\n    },\n    [getHoveredValue, setValue],\n  )\n\n  const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n    ev.preventDefault()\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        eventProps,\n        ariaProps,\n        {\n          id,\n          \"aria-label\": `${value} Stars`,\n          \"aria-readonly\": ariaAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n        { ref },\n        { ref: rootRef },\n      )()\n      return {\n        ...merged,\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        onMouseMove: handlerAll(\n          props.onMouseMove,\n          rest.onMouseMove,\n          onMouseMove,\n        ),\n        onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n        onTouchStart: handlerAll(\n          props.onTouchStart,\n          rest.onTouchStart,\n          onTouchStart,\n        ),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      id,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseMove,\n      onTouchEnd,\n      onTouchStart,\n      readOnly,\n      rest,\n      value,\n    ],\n  )\n\n  return {\n    id,\n    name,\n    count,\n    decimal,\n    disabled,\n    displayValue,\n    fractions,\n    highlightSelectedOnly,\n    hoveredValue,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    value,\n    ariaProps,\n    dataProps,\n    eventProps,\n    getRootProps,\n  }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n  groupValue: number\n  index: number\n}\n\nexport const useRatingItem = ({\n  groupValue,\n  index,\n  ...rest\n}: UseRatingItemProps) => {\n  const {\n    id: rootId,\n    name,\n    decimal,\n    disabled,\n    displayValue,\n    highlightSelectedOnly,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useRatingContext()\n  const fractionValue = decimal * (groupValue === 1 ? index : index + 1)\n  const value = useMemo(\n    () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n    [decimal, fractionValue, groupValue],\n  )\n  const active = value === displayValue\n  const checked = value === roundedValue\n  const filled = highlightSelectedOnly\n    ? value === displayValue\n    : value <= displayValue\n  const id = `${rootId}-${groupValue}-${value}`\n\n  const onBlur = useCallback(() => {\n    if (outsideRef.current) setHoveredValue(-1)\n  }, [outsideRef, setHoveredValue])\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return\n\n      const value = parseFloat(ev.target.value)\n\n      setHoveredValue(value)\n    },\n    [interactive, setHoveredValue],\n  )\n\n  const onChange = useCallback(\n    (value: number) => {\n      if (!interactive) return\n\n      setValue(value)\n    },\n    [interactive, setValue],\n  )\n\n  const onMouseDown = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onTouchStart = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      runKeyAction(ev, {\n        Space: () => onChange(value),\n      })\n    },\n    [onChange, value],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    ({ style, ...props } = {}) =>\n      mergeProps(\n        dataProps,\n        ariaProps,\n        {\n          htmlFor: id,\n          \"data-active\": dataAttr(active),\n          \"data-filled\": dataAttr(filled),\n        },\n        rest,\n        props,\n        { style },\n        {\n          style: {\n            zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n          },\n        },\n        { onMouseDown, onTouchStart },\n      )(),\n    [\n      active,\n      ariaProps,\n      dataProps,\n      filled,\n      fractionValue,\n      id,\n      onMouseDown,\n      onTouchStart,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...eventProps,\n      ...ariaProps,\n      id,\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-label\": value.toString(),\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(checked),\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      onBlur: handlerAll(onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      id,\n      name,\n      value,\n      active,\n      checked,\n      dataProps,\n      eventProps,\n      ariaProps,\n      disabled,\n      readOnly,\n      required,\n      onBlur,\n      onInputChange,\n      onKeyDown,\n    ],\n  )\n\n  return {\n    active,\n    checked,\n    filled,\n    fractionValue,\n    groupValue,\n    value,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":"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"}

package/dist/esm/components/saturation-slider/saturation-slider.js

@@ -25,11 +25,12 @@ const SaturationSliderRoot = withProvider(({ children, inputProps, thumbProps, t
 		thumbProps,
 		trackProps
 	]);
+	const context = useMemo(() => ({
+		getThumbProps,
+		getTrackProps
+	}), [getThumbProps, getTrackProps]);
 	return /* @__PURE__ */ jsx(ComponentContext, {
-		value: useMemo(() => ({
-			getThumbProps,
-			getTrackProps
-		}), [getThumbProps, getTrackProps]),
+		value: context,
 		children: /* @__PURE__ */ jsxs(styled.div, {
 			...getRootProps(),
 			children: [/* @__PURE__ */ jsx(styled.input, { ...getInputProps(inputProps) }), computedChildren]