@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/cjs/components/pagination/pagination.style.cjs

@@ -0,0 +1,103 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+const require_components_button_icon_button_style = require('../button/icon-button.style.cjs');
+
+//#region src/components/pagination/pagination.style.ts
+const paginationStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		item: {
+			fontWeight: "normal",
+			_current: {
+				cursor: "default",
+				pointerEvents: "none"
+			}
+		},
+		root: { "& > [data-ellipsis]": { pointerEvents: "none" } },
+		text: {
+			alignItems: "center",
+			display: "flex",
+			justifyContent: "center"
+		}
+	},
+	variants: {
+		outline: { item: {
+			...require_components_button_icon_button_style.iconButtonStyle.variants?.ghost,
+			_current: { ...require_components_button_icon_button_style.iconButtonStyle.variants?.outline }
+		} },
+		solid: { item: {
+			...require_components_button_icon_button_style.iconButtonStyle.variants?.ghost,
+			_current: { ...require_components_button_icon_button_style.iconButtonStyle.variants?.solid }
+		} },
+		subtle: { item: {
+			...require_components_button_icon_button_style.iconButtonStyle.variants?.ghost,
+			_current: { ...require_components_button_icon_button_style.iconButtonStyle.variants?.subtle }
+		} },
+		surface: { item: {
+			...require_components_button_icon_button_style.iconButtonStyle.variants?.ghost,
+			_current: { ...require_components_button_icon_button_style.iconButtonStyle.variants?.surface }
+		} }
+	},
+	sizes: {
+		xs: {
+			item: {
+				...require_components_button_icon_button_style.iconButtonStyle.sizes?.xs,
+				fontSize: "{font-size}",
+				_icon: { fontSize: require_components_button_icon_button_style.iconButtonStyle.sizes?.xs.fontSize }
+			},
+			root: { "--font-size": "fontSizes.sm" },
+			text: { fontSize: "{font-size}" }
+		},
+		sm: {
+			item: {
+				...require_components_button_icon_button_style.iconButtonStyle.sizes?.sm,
+				fontSize: "{font-size}",
+				_icon: { fontSize: require_components_button_icon_button_style.iconButtonStyle.sizes?.sm.fontSize }
+			},
+			root: { "--font-size": "fontSizes.md" },
+			text: { fontSize: "{font-size}" }
+		},
+		md: {
+			item: {
+				...require_components_button_icon_button_style.iconButtonStyle.sizes?.md,
+				fontSize: "{font-size}",
+				_icon: { fontSize: require_components_button_icon_button_style.iconButtonStyle.sizes?.md.fontSize }
+			},
+			root: { "--font-size": "fontSizes.lg" },
+			text: { fontSize: "{font-size}" }
+		},
+		lg: {
+			item: {
+				...require_components_button_icon_button_style.iconButtonStyle.sizes?.lg,
+				fontSize: "{font-size}",
+				_icon: { fontSize: require_components_button_icon_button_style.iconButtonStyle.sizes?.lg.fontSize }
+			},
+			root: { "--font-size": "fontSizes.xl" },
+			text: { fontSize: "{font-size}" }
+		},
+		xl: {
+			item: {
+				...require_components_button_icon_button_style.iconButtonStyle.sizes?.xl,
+				fontSize: "{font-size}",
+				_icon: { fontSize: require_components_button_icon_button_style.iconButtonStyle.sizes?.xl.fontSize }
+			},
+			root: { "--font-size": "fontSizes.2xl" },
+			text: { fontSize: "{font-size}" }
+		},
+		"2xl": {
+			item: {
+				...require_components_button_icon_button_style.iconButtonStyle.sizes?.["2xl"],
+				fontSize: "{font-size}",
+				_icon: { fontSize: require_components_button_icon_button_style.iconButtonStyle.sizes?.["2xl"].fontSize }
+			},
+			root: { "--font-size": "fontSizes.2xl" },
+			text: { fontSize: "{font-size}" }
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "solid"
+	}
+});
+
+//#endregion
+exports.paginationStyle = paginationStyle;
+//# sourceMappingURL=pagination.style.cjs.map

package/dist/cjs/components/pagination/pagination.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.style.cjs","names":["iconButtonStyle"],"sources":["../../../../src/components/pagination/pagination.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const paginationStyle = defineComponentSlotStyle({\n  base: {\n    item: {\n      fontWeight: \"normal\",\n      _current: {\n        cursor: \"default\",\n        pointerEvents: \"none\",\n      },\n    },\n    root: {\n      \"& > [data-ellipsis]\": {\n        pointerEvents: \"none\",\n      },\n    },\n    text: {\n      alignItems: \"center\",\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n  },\n\n  variants: {\n    outline: {\n      item: {\n        ...iconButtonStyle.variants?.ghost,\n        _current: {\n          ...iconButtonStyle.variants?.outline,\n        },\n      },\n    },\n    solid: {\n      item: {\n        ...iconButtonStyle.variants?.ghost,\n        _current: {\n          ...iconButtonStyle.variants?.solid,\n        },\n      },\n    },\n    subtle: {\n      item: {\n        ...iconButtonStyle.variants?.ghost,\n        _current: {\n          ...iconButtonStyle.variants?.subtle,\n        },\n      },\n    },\n    surface: {\n      item: {\n        ...iconButtonStyle.variants?.ghost,\n        _current: {\n          ...iconButtonStyle.variants?.surface,\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      item: {\n        ...iconButtonStyle.sizes?.xs,\n        fontSize: \"{font-size}\",\n        _icon: { fontSize: iconButtonStyle.sizes?.xs.fontSize },\n      },\n      root: {\n        \"--font-size\": \"fontSizes.sm\",\n      },\n      text: {\n        fontSize: \"{font-size}\",\n      },\n    },\n    sm: {\n      item: {\n        ...iconButtonStyle.sizes?.sm,\n        fontSize: \"{font-size}\",\n        _icon: { fontSize: iconButtonStyle.sizes?.sm.fontSize },\n      },\n      root: {\n        \"--font-size\": \"fontSizes.md\",\n      },\n      text: {\n        fontSize: \"{font-size}\",\n      },\n    },\n    md: {\n      item: {\n        ...iconButtonStyle.sizes?.md,\n        fontSize: \"{font-size}\",\n        _icon: { fontSize: iconButtonStyle.sizes?.md.fontSize },\n      },\n      root: {\n        \"--font-size\": \"fontSizes.lg\",\n      },\n      text: {\n        fontSize: \"{font-size}\",\n      },\n    },\n    lg: {\n      item: {\n        ...iconButtonStyle.sizes?.lg,\n        fontSize: \"{font-size}\",\n        _icon: { fontSize: iconButtonStyle.sizes?.lg.fontSize },\n      },\n      root: {\n        \"--font-size\": \"fontSizes.xl\",\n      },\n      text: {\n        fontSize: \"{font-size}\",\n      },\n    },\n    xl: {\n      item: {\n        ...iconButtonStyle.sizes?.xl,\n        fontSize: \"{font-size}\",\n        _icon: { fontSize: iconButtonStyle.sizes?.xl.fontSize },\n      },\n      root: {\n        \"--font-size\": \"fontSizes.2xl\",\n      },\n      text: {\n        fontSize: \"{font-size}\",\n      },\n    },\n    \"2xl\": {\n      item: {\n        ...iconButtonStyle.sizes?.[\"2xl\"],\n        fontSize: \"{font-size}\",\n        _icon: { fontSize: iconButtonStyle.sizes?.[\"2xl\"].fontSize },\n      },\n      root: {\n        \"--font-size\": \"fontSizes.2xl\",\n      },\n      text: {\n        fontSize: \"{font-size}\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n})\n\nexport type PaginationStyle = typeof paginationStyle\n"],"mappings":";;;;AAGA,MAAa,kBAAkB,oDAAyB;CACtD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,UAAU;IACR,QAAQ;IACR,eAAe;GAChB;EACF;EACD,MAAM,EACJ,uBAAuB,EACrB,eAAe,OAChB,EACF;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;EACjB;CACF;CAED,UAAU;EACR,SAAS,EACP,MAAM;GACJ,GAAGA,4DAAgB,UAAU;GAC7B,UAAU,EACR,GAAGA,4DAAgB,UAAU,QAC9B;EACF,EACF;EACD,OAAO,EACL,MAAM;GACJ,GAAGA,4DAAgB,UAAU;GAC7B,UAAU,EACR,GAAGA,4DAAgB,UAAU,MAC9B;EACF,EACF;EACD,QAAQ,EACN,MAAM;GACJ,GAAGA,4DAAgB,UAAU;GAC7B,UAAU,EACR,GAAGA,4DAAgB,UAAU,OAC9B;EACF,EACF;EACD,SAAS,EACP,MAAM;GACJ,GAAGA,4DAAgB,UAAU;GAC7B,UAAU,EACR,GAAGA,4DAAgB,UAAU,QAC9B;EACF,EACF;CACF;CAED,OAAO;EACL,IAAI;GACF,MAAM;IACJ,GAAGA,4DAAgB,OAAO;IAC1B,UAAU;IACV,OAAO,EAAE,UAAUA,4DAAgB,OAAO,GAAG,SAAU;GACxD;GACD,MAAM,EACJ,eAAe,eAChB;GACD,MAAM,EACJ,UAAU,cACX;EACF;EACD,IAAI;GACF,MAAM;IACJ,GAAGA,4DAAgB,OAAO;IAC1B,UAAU;IACV,OAAO,EAAE,UAAUA,4DAAgB,OAAO,GAAG,SAAU;GACxD;GACD,MAAM,EACJ,eAAe,eAChB;GACD,MAAM,EACJ,UAAU,cACX;EACF;EACD,IAAI;GACF,MAAM;IACJ,GAAGA,4DAAgB,OAAO;IAC1B,UAAU;IACV,OAAO,EAAE,UAAUA,4DAAgB,OAAO,GAAG,SAAU;GACxD;GACD,MAAM,EACJ,eAAe,eAChB;GACD,MAAM,EACJ,UAAU,cACX;EACF;EACD,IAAI;GACF,MAAM;IACJ,GAAGA,4DAAgB,OAAO;IAC1B,UAAU;IACV,OAAO,EAAE,UAAUA,4DAAgB,OAAO,GAAG,SAAU;GACxD;GACD,MAAM,EACJ,eAAe,eAChB;GACD,MAAM,EACJ,UAAU,cACX;EACF;EACD,IAAI;GACF,MAAM;IACJ,GAAGA,4DAAgB,OAAO;IAC1B,UAAU;IACV,OAAO,EAAE,UAAUA,4DAAgB,OAAO,GAAG,SAAU;GACxD;GACD,MAAM,EACJ,eAAe,gBAChB;GACD,MAAM,EACJ,UAAU,cACX;EACF;EACD,OAAO;GACL,MAAM;IACJ,GAAGA,4DAAgB,QAAQ;IAC3B,UAAU;IACV,OAAO,EAAE,UAAUA,4DAAgB,QAAQ,OAAO,SAAU;GAC7D;GACD,MAAM,EACJ,eAAe,gBAChB;GACD,MAAM,EACJ,UAAU,cACX;EACF;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;CACV;AACF,EAAC"}

package/dist/cjs/components/pagination/use-pagination.cjs

@@ -0,0 +1,162 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_context = require('../../utils/context.cjs');
+const require_utils_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
+const require_providers_i18n_provider_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/pagination/use-pagination.ts
+const [PaginationContext, usePaginationContext] = require_utils_context.createContext({ name: "PaginationContext" });
+const usePagination = ({ boundaries = 1, defaultPage = 1, disabled = false, page, siblings = 1, total, onChange: onChangeProp,...rest }) => {
+	const [currentPage, setCurrentPage] = require_hooks_use_controllable_state_index.useControllableState({
+		defaultValue: defaultPage,
+		value: page,
+		onChange: onChangeProp
+	});
+	const { t } = require_providers_i18n_provider_i18n_provider.useI18n("pagination");
+	const range = (0, react.useMemo)(() => {
+		const minimumTotal = siblings * 2 + 3 + boundaries * 2;
+		if (minimumTotal >= total) return computedRange(1, total);
+		const prevSiblings = Math.max(currentPage - siblings, boundaries);
+		const nextSiblings = Math.min(currentPage + siblings, total - boundaries);
+		const prevDots = prevSiblings > boundaries + 2;
+		const nextDots = nextSiblings < total - (boundaries + 1);
+		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 [
+				...computedRange(1, boundaries),
+				"ellipsis",
+				...computedRange(total - nextPages, total)
+			];
+		}
+		return [
+			...computedRange(1, boundaries),
+			"ellipsis",
+			...computedRange(prevSiblings, nextSiblings),
+			"ellipsis",
+			...computedRange(total - boundaries + 1, total)
+		];
+	}, [
+		boundaries,
+		siblings,
+		currentPage,
+		total
+	]);
+	const onChange = (0, react.useCallback)((page$1) => setCurrentPage(Math.max(1, Math.min(total, page$1))), [setCurrentPage, total]);
+	const onChangeStart = (0, react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
+	const onChangeEnd = (0, react.useCallback)(() => setCurrentPage(total), [setCurrentPage, total]);
+	const onChangePrev = (0, react.useCallback)(() => setCurrentPage((prev) => Math.max(1, prev - 1)), [setCurrentPage]);
+	const onChangeNext = (0, react.useCallback)(() => setCurrentPage((prev) => Math.min(total, prev + 1)), [setCurrentPage, total]);
+	const getRootProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
+		...rest,
+		...props,
+		ref: require_utils_ref.mergeRefs(ref, rest.ref),
+		"aria-label": t("Pagination"),
+		role: "navigation"
+	}), [rest, t]);
+	const getItemProps = (0, react.useCallback)(({ page: page$1,...props } = {}) => {
+		if ((0, require_utils_index.utils_exports.isNumber)(page$1)) return {
+			type: "button",
+			"aria-current": currentPage === page$1 ? "page" : void 0,
+			"aria-label": t("Go to page", { value: page$1 }),
+			disabled,
+			...props,
+			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, () => onChange(page$1))
+		};
+		else return {
+			...props,
+			"data-ellipsis": ""
+		};
+	}, [
+		currentPage,
+		t,
+		onChange,
+		disabled
+	]);
+	const getStartTriggerProps = (0, react.useCallback)((props = {}) => ({
+		type: "button",
+		"aria-label": t("Go to first page"),
+		disabled: disabled || currentPage === 1,
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onChangeStart)
+	}), [
+		onChangeStart,
+		t,
+		disabled,
+		currentPage
+	]);
+	const getEndTriggerProps = (0, react.useCallback)((props = {}) => ({
+		type: "button",
+		"aria-label": t("Go to last page"),
+		disabled: disabled || currentPage === total,
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onChangeEnd)
+	}), [
+		onChangeEnd,
+		t,
+		disabled,
+		currentPage,
+		total
+	]);
+	const getPrevTriggerProps = (0, react.useCallback)((props = {}) => ({
+		type: "button",
+		"aria-label": t("Go to previous page"),
+		disabled: disabled || currentPage === 1,
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onChangePrev)
+	}), [
+		onChangePrev,
+		t,
+		disabled,
+		currentPage
+	]);
+	const getNextTriggerProps = (0, react.useCallback)((props = {}) => ({
+		type: "button",
+		"aria-label": t("Go to next page"),
+		disabled: disabled || currentPage === total,
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onChangeNext)
+	}), [
+		onChangeNext,
+		t,
+		disabled,
+		currentPage,
+		total
+	]);
+	return {
+		currentPage,
+		disabled,
+		range,
+		total,
+		getEndTriggerProps,
+		getItemProps,
+		getNextTriggerProps,
+		getPrevTriggerProps,
+		getRootProps,
+		getStartTriggerProps,
+		onChange,
+		onChangeEnd,
+		onChangeNext,
+		onChangePrev,
+		onChangeStart
+	};
+};
+const computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => index + start);
+
+//#endregion
+exports.PaginationContext = PaginationContext;
+exports.usePagination = usePagination;
+exports.usePaginationContext = usePaginationContext;
+//# sourceMappingURL=use-pagination.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-pagination.cjs","names":["page: number","page","getRootProps: PropGetter","getItemProps: PropGetter<\"button\", { page?: Page }>","getStartTriggerProps: PropGetter<\"button\">","getEndTriggerProps: PropGetter<\"button\">","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","start: number","end: number"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\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\nexport const [PaginationContext, usePaginationContext] =\n  createContext<PaginationContext>({\n    name: \"PaginationContext\",\n  })\n\nexport interface UsePaginationProps\n  extends Omit<HTMLProps, \"onChange\" | \"page\"> {\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 [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      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n      \"aria-label\": t(\"Pagination\"),\n      role: \"navigation\",\n    }),\n    [rest, 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: page }),\n          disabled,\n          ...props,\n          onClick: handlerAll(props.onClick, () => onChange(page)),\n        }\n      } else {\n        return { ...props, \"data-ellipsis\": \"\" }\n      }\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/cjs/components/password-input/index.cjs

@@ -0,0 +1,17 @@
+const require_components_password_input_password_input_style = require('./password-input.style.cjs');
+const require_components_password_input_use_password_input = require('./use-password-input.cjs');
+const require_components_password_input_password_input = require('./password-input.cjs');
+const require_components_password_input_strength_meter_style = require('./strength-meter.style.cjs');
+const require_components_password_input_use_strength_meter = require('./use-strength-meter.cjs');
+const require_components_password_input_strength_meter = require('./strength-meter.cjs');
+
+exports.PasswordInput = require_components_password_input_password_input.PasswordInput;
+exports.PasswordInputPropsContext = require_components_password_input_password_input.PasswordInputPropsContext;
+exports.StrengthMeter = require_components_password_input_strength_meter.StrengthMeter;
+exports.StrengthMeterPropsContext = require_components_password_input_strength_meter.StrengthMeterPropsContext;
+exports.passwordInputStyle = require_components_password_input_password_input_style.passwordInputStyle;
+exports.strengthMeterStyle = require_components_password_input_strength_meter_style.strengthMeterStyle;
+exports.usePasswordInput = require_components_password_input_use_password_input.usePasswordInput;
+exports.usePasswordInputPropsContext = require_components_password_input_password_input.usePasswordInputPropsContext;
+exports.useStrengthMeter = require_components_password_input_use_strength_meter.useStrengthMeter;
+exports.useStrengthMeterPropsContext = require_components_password_input_strength_meter.useStrengthMeterPropsContext;

package/dist/cjs/components/password-input/password-input.cjs

@@ -0,0 +1,60 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_eye_icon = require('../icon/icons/eye-icon.cjs');
+const require_eye_off_icon = require('../icon/icons/eye-off-icon.cjs');
+const require_components_group_use_group = require('../group/use-group.cjs');
+const require_components_input_input = require('../input/input.cjs');
+const require_components_input_input_element = require('../input/input-element.cjs');
+const require_components_input_input_group = require('../input/input-group.cjs');
+const require_components_password_input_password_input_style = require('./password-input.style.cjs');
+const require_components_password_input_use_password_input = require('./use-password-input.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/password-input/password-input.tsx
+const { PropsContext: PasswordInputPropsContext, usePropsContext: usePasswordInputPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("password-input", require_components_password_input_password_input_style.passwordInputStyle);
+/**
+* `PasswordInput` is a component that allows users to input passwords with a visibility toggle.
+*
+* @see https://yamada-ui.com/components/password-input
+*/
+const PasswordInput = withProvider(({ className, css, colorScheme, visibilityIcon = {
+	off: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_eye_off_icon.EyeOffIcon, {}),
+	on: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_eye_icon.EyeIcon, {})
+}, buttonProps, elementProps, rootProps,...props }) => {
+	const [groupItemProps, rest] = require_components_group_use_group.useGroupItemProps(props);
+	const { visible, getButtonProps, getInputProps } = require_components_password_input_use_password_input.usePasswordInput(rest);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_input_input_group.InputGroupRoot, {
+		className,
+		css,
+		colorScheme,
+		...groupItemProps,
+		...rootProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordInputField, { ...getInputProps() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input_input_element.InputElement, {
+			clickable: true,
+			...elementProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordInputButton, {
+				...getButtonProps(buttonProps),
+				children: visible ? visibilityIcon.off : visibilityIcon.on
+			})
+		})]
+	});
+}, "root")((props) => {
+	const context = require_components_input_input.useInputPropsContext();
+	return {
+		...context,
+		...props
+	};
+});
+const PasswordInputField = withContext(require_components_input_input.Input, "field")({ "data-group-propagate": "" });
+const PasswordInputButton = withContext("button", "button")();
+
+//#endregion
+exports.PasswordInput = PasswordInput;
+exports.PasswordInputPropsContext = PasswordInputPropsContext;
+exports.usePasswordInputPropsContext = usePasswordInputPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=password-input.cjs.map

package/dist/cjs/components/password-input/password-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.cjs","names":["passwordInputStyle","EyeOffIcon","EyeIcon","Input"],"sources":["../../../../src/components/password-input/password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { PasswordInputStyle } from \"./password-input.style\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { createSlotComponent } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { EyeIcon, EyeOffIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { passwordInputStyle } from \"./password-input.style\"\nimport { usePasswordInput } from \"./use-password-input\"\n\nexport interface PasswordInputProps\n  extends WithoutThemeProps<InputProps, PasswordInputStyle>,\n    ThemeProps<PasswordInputStyle>,\n    UsePasswordInputProps {\n  /**\n   * The icons to be used for the visibility toggle.\n   */\n  visibilityIcon?: { off: ReactNode; on: ReactNode }\n  /**\n   * The props for the button element.\n   */\n  buttonProps?: PasswordInputButtonProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nexport const {\n  PropsContext: PasswordInputPropsContext,\n  usePropsContext: usePasswordInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PasswordInputProps, PasswordInputStyle>(\n  \"password-input\",\n  passwordInputStyle,\n)\n\n/**\n * `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n *\n * @see https://yamada-ui.com/components/password-input\n */\nexport const PasswordInput = withProvider<\"input\", PasswordInputProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n    buttonProps,\n    elementProps,\n    rootProps,\n    ...props\n  }) => {\n    const [groupItemProps, rest] = useGroupItemProps(props)\n    const { visible, getButtonProps, getInputProps } = usePasswordInput(rest)\n\n    return (\n      <InputGroup.Root\n        className={className}\n        css={css}\n        colorScheme={colorScheme}\n        {...groupItemProps}\n        {...rootProps}\n      >\n        <PasswordInputField {...getInputProps()} />\n\n        <InputGroup.Element clickable {...elementProps}>\n          <PasswordInputButton {...getButtonProps(buttonProps)}>\n            {visible ? visibilityIcon.off : visibilityIcon.on}\n          </PasswordInputButton>\n        </InputGroup.Element>\n      </InputGroup.Root>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface PasswordInputFieldProps extends InputProps {}\n\nconst PasswordInputField = withContext<\"input\", PasswordInputFieldProps>(\n  Input,\n  \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface PasswordInputButtonProps extends HTMLStyledProps<\"button\"> {}\n\nconst PasswordInputButton = withContext<\"button\", PasswordInputButtonProps>(\n  \"button\",\n  \"button\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAa,EACX,cAAc,2BACd,iBAAiB,8BACjB,aACA,cACD,GAAG,6DACF,kBACAA,0EACD;;;;;;AAOD,MAAa,gBAAgB,aAC3B,CAAC,EACC,WACA,KACA,aACA,iBAAiB;CAAE,qBAAK,2BAACC,oCAAa;CAAE,oBAAI,2BAACC,6BAAU;AAAE,GACzD,aACA,cACA,UACA,GAAG,OACJ,KAAK;CACJ,MAAM,CAAC,gBAAgB,KAAK,GAAG,qDAAkB,MAAM;CACvD,MAAM,EAAE,SAAS,gBAAgB,eAAe,GAAG,sEAAiB,KAAK;AAEzE,wBACE;EACa;EACN;EACQ;EACb,GAAI;EACJ,GAAI;6BAEJ,2BAAC,sBAAmB,GAAI,eAAe,GAAI,kBAE3C;GAAoB;GAAU,GAAI;6BAChC,2BAAC;IAAoB,GAAI,eAAe,YAAY;cACjD,UAAU,eAAe,MAAM,eAAe;KAC3B;IACH;GACL;AAErB,GACD,OACD,CAAC,CAAC,UAAU;CACX,MAAM,UAAU,qDAAsB;AAEtC,QAAO;EAAE,GAAG;EAAS,GAAG;CAAO;AAChC,EAAC;AAIF,MAAM,qBAAqB,YACzBC,sCACA,QACD,CAAC,EAAE,wBAAwB,GAAI,EAAC;AAIjC,MAAM,sBAAsB,YAC1B,UACA,SACD,EAAE"}

package/dist/cjs/components/password-input/password-input.style.cjs

@@ -0,0 +1,89 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+const require_components_button_button_style = require('../button/button.style.cjs');
+const require_components_input_input_style = require('../input/input.style.cjs');
+
+//#region src/components/password-input/password-input.style.ts
+const passwordInputStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		button: {
+			...require_components_button_button_style.buttonStyle.base,
+			rounded: "l1",
+			_readOnly: { cursor: "pointer" }
+		},
+		field: require_components_input_input_style.inputStyle.base,
+		root: {}
+	},
+	variants: {
+		base: { button: {
+			layerStyle: "ghost",
+			focusVisibleRing: "none",
+			_hover: { layerStyle: "ghost.hover" },
+			_focusVisible: { layerStyle: "ghost.hover" }
+		} },
+		filled: { field: require_components_input_input_style.inputStyle.variants?.filled },
+		flushed: {
+			field: require_components_input_input_style.inputStyle.variants?.flushed,
+			root: require_components_input_input_style.getInputPaddingResetStyle("& > input")
+		},
+		outline: { field: require_components_input_input_style.inputStyle.variants?.outline },
+		plain: { field: require_components_input_input_style.inputStyle.variants?.plain }
+	},
+	sizes: {
+		xs: {
+			button: {
+				boxSize: `calc({--input-height} - {spaces.2})`,
+				fontSize: require_components_input_input_style.inputStyle.sizes?.xs.fontSize
+			},
+			field: require_components_input_input_style.inputStyle.sizes?.xs,
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.xs.minH, "& > input")
+		},
+		sm: {
+			button: {
+				boxSize: `calc({--input-height} - {spaces.2})`,
+				fontSize: require_components_input_input_style.inputStyle.sizes?.sm.fontSize
+			},
+			field: require_components_input_input_style.inputStyle.sizes?.sm,
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.sm.minH, "& > input")
+		},
+		md: {
+			button: {
+				boxSize: `calc({--input-height} - {spaces.2})`,
+				fontSize: require_components_input_input_style.inputStyle.sizes?.md.fontSize
+			},
+			field: require_components_input_input_style.inputStyle.sizes?.md,
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.md.minH, "& > input")
+		},
+		lg: {
+			button: {
+				boxSize: `calc({--input-height} - {spaces.2.5})`,
+				fontSize: require_components_input_input_style.inputStyle.sizes?.lg.fontSize
+			},
+			field: require_components_input_input_style.inputStyle.sizes?.lg,
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.lg.minH, "& > input")
+		},
+		xl: {
+			button: {
+				boxSize: `calc({--input-height} - {spaces.3})`,
+				fontSize: require_components_input_input_style.inputStyle.sizes?.xl.fontSize
+			},
+			field: require_components_input_input_style.inputStyle.sizes?.xl,
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.xl.minH, "& > input")
+		},
+		"2xl": {
+			button: {
+				boxSize: `calc({--input-height} - {spaces.3})`,
+				fontSize: require_components_input_input_style.inputStyle.sizes?.["2xl"].fontSize
+			},
+			field: require_components_input_input_style.inputStyle.sizes?.["2xl"],
+			root: require_components_input_input_style.getInputHeightStyle(require_components_input_input_style.inputStyle.sizes?.["2xl"]?.minH, "& > input")
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "outline"
+	}
+});
+
+//#endregion
+exports.passwordInputStyle = passwordInputStyle;
+//# sourceMappingURL=password-input.style.cjs.map

package/dist/cjs/components/password-input/password-input.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.style.cjs","names":["buttonStyle","inputStyle"],"sources":["../../../../src/components/password-input/password-input.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { buttonStyle } from \"../button\"\nimport {\n  getInputHeightStyle,\n  getInputPaddingResetStyle,\n  inputStyle,\n} from \"../input\"\n\nexport const passwordInputStyle = defineComponentSlotStyle({\n  base: {\n    button: {\n      ...buttonStyle.base,\n      rounded: \"l1\",\n      _readOnly: { cursor: \"pointer\" },\n    },\n    field: inputStyle.base,\n    root: {},\n  },\n\n  variants: {\n    base: {\n      button: {\n        layerStyle: \"ghost\",\n        focusVisibleRing: \"none\",\n        _hover: {\n          layerStyle: \"ghost.hover\",\n        },\n        _focusVisible: {\n          layerStyle: \"ghost.hover\",\n        },\n      },\n    },\n\n    filled: {\n      field: inputStyle.variants?.filled,\n    },\n    flushed: {\n      field: inputStyle.variants?.flushed,\n      root: getInputPaddingResetStyle(\"& > input\"),\n    },\n    outline: {\n      field: inputStyle.variants?.outline,\n    },\n    plain: {\n      field: inputStyle.variants?.plain,\n    },\n  },\n\n  sizes: {\n    xs: {\n      button: {\n        boxSize: `calc({--input-height} - {spaces.2})`,\n        fontSize: inputStyle.sizes?.xs.fontSize,\n      },\n      field: inputStyle.sizes?.xs,\n      root: getInputHeightStyle(inputStyle.sizes?.xs.minH, \"& > input\"),\n    },\n    sm: {\n      button: {\n        boxSize: `calc({--input-height} - {spaces.2})`,\n        fontSize: inputStyle.sizes?.sm.fontSize,\n      },\n      field: inputStyle.sizes?.sm,\n      root: getInputHeightStyle(inputStyle.sizes?.sm.minH, \"& > input\"),\n    },\n    md: {\n      button: {\n        boxSize: `calc({--input-height} - {spaces.2})`,\n        fontSize: inputStyle.sizes?.md.fontSize,\n      },\n      field: inputStyle.sizes?.md,\n      root: getInputHeightStyle(inputStyle.sizes?.md.minH, \"& > input\"),\n    },\n    lg: {\n      button: {\n        boxSize: `calc({--input-height} - {spaces.2.5})`,\n        fontSize: inputStyle.sizes?.lg.fontSize,\n      },\n      field: inputStyle.sizes?.lg,\n      root: getInputHeightStyle(inputStyle.sizes?.lg.minH, \"& > input\"),\n    },\n    xl: {\n      button: {\n        boxSize: `calc({--input-height} - {spaces.3})`,\n        fontSize: inputStyle.sizes?.xl.fontSize,\n      },\n      field: inputStyle.sizes?.xl,\n      root: getInputHeightStyle(inputStyle.sizes?.xl.minH, \"& > input\"),\n    },\n    \"2xl\": {\n      button: {\n        boxSize: `calc({--input-height} - {spaces.3})`,\n        fontSize: inputStyle.sizes?.[\"2xl\"].fontSize,\n      },\n      field: inputStyle.sizes?.[\"2xl\"],\n      root: getInputHeightStyle(inputStyle.sizes?.[\"2xl\"]?.minH, \"& > input\"),\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n  },\n})\n\nexport type PasswordInputStyle = typeof passwordInputStyle\n"],"mappings":";;;;;AAQA,MAAa,qBAAqB,oDAAyB;CACzD,MAAM;EACJ,QAAQ;GACN,GAAGA,mDAAY;GACf,SAAS;GACT,WAAW,EAAE,QAAQ,UAAW;EACjC;EACD,OAAOC,gDAAW;EAClB,MAAM,CAAE;CACT;CAED,UAAU;EACR,MAAM,EACJ,QAAQ;GACN,YAAY;GACZ,kBAAkB;GAClB,QAAQ,EACN,YAAY,cACb;GACD,eAAe,EACb,YAAY,cACb;EACF,EACF;EAED,QAAQ,EACN,OAAOA,gDAAW,UAAU,OAC7B;EACD,SAAS;GACP,OAAOA,gDAAW,UAAU;GAC5B,MAAM,+DAA0B,YAAY;EAC7C;EACD,SAAS,EACP,OAAOA,gDAAW,UAAU,QAC7B;EACD,OAAO,EACL,OAAOA,gDAAW,UAAU,MAC7B;CACF;CAED,OAAO;EACL,IAAI;GACF,QAAQ;IACN,UAAU;IACV,UAAUA,gDAAW,OAAO,GAAG;GAChC;GACD,OAAOA,gDAAW,OAAO;GACzB,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,YAAY;EAClE;EACD,IAAI;GACF,QAAQ;IACN,UAAU;IACV,UAAUA,gDAAW,OAAO,GAAG;GAChC;GACD,OAAOA,gDAAW,OAAO;GACzB,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,YAAY;EAClE;EACD,IAAI;GACF,QAAQ;IACN,UAAU;IACV,UAAUA,gDAAW,OAAO,GAAG;GAChC;GACD,OAAOA,gDAAW,OAAO;GACzB,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,YAAY;EAClE;EACD,IAAI;GACF,QAAQ;IACN,UAAU;IACV,UAAUA,gDAAW,OAAO,GAAG;GAChC;GACD,OAAOA,gDAAW,OAAO;GACzB,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,YAAY;EAClE;EACD,IAAI;GACF,QAAQ;IACN,UAAU;IACV,UAAUA,gDAAW,OAAO,GAAG;GAChC;GACD,OAAOA,gDAAW,OAAO;GACzB,MAAM,yDAAoBA,gDAAW,OAAO,GAAG,MAAM,YAAY;EAClE;EACD,OAAO;GACL,QAAQ;IACN,UAAU;IACV,UAAUA,gDAAW,QAAQ,OAAO;GACrC;GACD,OAAOA,gDAAW,QAAQ;GAC1B,MAAM,yDAAoBA,gDAAW,QAAQ,QAAQ,MAAM,YAAY;EACxE;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;CACV;AACF,EAAC"}

package/dist/cjs/components/password-input/strength-meter.cjs

@@ -0,0 +1,56 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_password_input_strength_meter_style = require('./strength-meter.style.cjs');
+const require_components_password_input_use_strength_meter = require('./use-strength-meter.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/password-input/strength-meter.tsx
+const { PropsContext: StrengthMeterPropsContext, usePropsContext: useStrengthMeterPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("strength-meter", require_components_password_input_strength_meter_style.strengthMeterStyle);
+const StrengthMeter = withProvider(({ max = 4, value, withLabel = true, getIndicatorProps: getCustomIndicatorProps,...rest }) => {
+	const percent = value / max * 100;
+	const getDefaultIndicatorProps = (percent$1) => {
+		switch (true) {
+			case percent$1 < 33: return {
+				label: "Low",
+				_selected: { bg: "red.500" }
+			};
+			case percent$1 < 66: return {
+				label: "Medium",
+				_selected: { bg: "orange.500" }
+			};
+			default: return {
+				label: "High",
+				_selected: { bg: "green.500" }
+			};
+		}
+	};
+	getCustomIndicatorProps ??= getDefaultIndicatorProps;
+	const { label,...indicatorProps } = getCustomIndicatorProps(percent);
+	const { getIndicatorProps, getRootProps } = require_components_password_input_use_strength_meter.useStrengthMeter({
+		max,
+		value,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_core_system_factory.styled.div, {
+		...getRootProps(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrengthMeterIndicators, { children: Array.from({ length: max }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrengthMeterIndicator, { ...getIndicatorProps({
+			index,
+			...indicatorProps
+		}) }, index)) }), withLabel && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrengthMeterLabel, { children: label }) : null]
+	});
+}, "root")();
+const StrengthMeterIndicators = withContext("div", "indicators")();
+const StrengthMeterIndicator = withContext("div", "indicator")();
+const StrengthMeterLabel = withContext("span", "label")();
+
+//#endregion
+exports.StrengthMeter = StrengthMeter;
+exports.StrengthMeterPropsContext = StrengthMeterPropsContext;
+exports.useStrengthMeterPropsContext = useStrengthMeterPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=strength-meter.cjs.map

package/dist/cjs/components/password-input/strength-meter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"strength-meter.cjs","names":["strengthMeterStyle","percent: number","percent","styled"],"sources":["../../../../src/components/password-input/strength-meter.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps } from \"../../core\"\nimport type { StrengthMeterStyle } from \"./strength-meter.style\"\nimport type { UseStrengthMeterProps } from \"./use-strength-meter\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { strengthMeterStyle } from \"./strength-meter.style\"\nimport { useStrengthMeter } from \"./use-strength-meter\"\n\ninterface IndicatorProps extends HTMLStyledProps {\n  label?: ReactNode\n}\n\nexport interface StrengthMeterProps\n  extends HTMLStyledProps,\n    UseStrengthMeterProps {\n  /**\n   * If `true`, the password strength meter will display the label.\n   *\n   * @default true\n   */\n  withLabel?: boolean\n  /**\n   * The props of the password strength meter indicator.\n   */\n  getIndicatorProps?: (percent: number) => IndicatorProps\n}\n\nexport const {\n  PropsContext: StrengthMeterPropsContext,\n  usePropsContext: useStrengthMeterPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StrengthMeterProps, StrengthMeterStyle>(\n  \"strength-meter\",\n  strengthMeterStyle,\n)\n\nexport const StrengthMeter = withProvider<\"div\", StrengthMeterProps>(\n  ({\n    max = 4,\n    value,\n    withLabel = true,\n    getIndicatorProps: getCustomIndicatorProps,\n    ...rest\n  }) => {\n    const percent = (value / max) * 100\n\n    const getDefaultIndicatorProps = (percent: number): IndicatorProps => {\n      switch (true) {\n        case percent < 33:\n          return { label: \"Low\", _selected: { bg: \"red.500\" } }\n        case percent < 66:\n          return { label: \"Medium\", _selected: { bg: \"orange.500\" } }\n        default:\n          return { label: \"High\", _selected: { bg: \"green.500\" } }\n      }\n    }\n\n    getCustomIndicatorProps ??= getDefaultIndicatorProps\n\n    const { label, ...indicatorProps } = getCustomIndicatorProps(percent)\n\n    const { getIndicatorProps, getRootProps } = useStrengthMeter({\n      max,\n      value,\n      ...rest,\n    })\n\n    return (\n      <styled.div {...getRootProps()}>\n        <StrengthMeterIndicators>\n          {Array.from({ length: max }).map((_, index) => (\n            <StrengthMeterIndicator\n              key={index}\n              {...getIndicatorProps({ index, ...indicatorProps })}\n            />\n          ))}\n        </StrengthMeterIndicators>\n\n        {withLabel && label ? (\n          <StrengthMeterLabel>{label}</StrengthMeterLabel>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\ninterface StrengthMeterIndicatorsProps extends HTMLStyledProps {}\n\nconst StrengthMeterIndicators = withContext<\n  \"div\",\n  StrengthMeterIndicatorsProps\n>(\"div\", \"indicators\")()\n\ninterface StrengthMeterIndicatorProps extends HTMLStyledProps {}\n\nconst StrengthMeterIndicator = withContext<\"div\", StrengthMeterIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\ninterface StrengthMeterLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst StrengthMeterLabel = withContext<\"span\", StrengthMeterLabelProps>(\n  \"span\",\n  \"label\",\n)()\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,EACX,cAAc,2BACd,iBAAiB,8BACjB,aACA,cACD,GAAG,6DACF,kBACAA,0EACD;AAED,MAAa,gBAAgB,aAC3B,CAAC,EACC,MAAM,GACN,OACA,YAAY,MACZ,mBAAmB,wBACnB,GAAG,MACJ,KAAK;CACJ,MAAM,UAAW,QAAQ,MAAO;CAEhC,MAAM,2BAA2B,CAACC,cAAoC;AACpE,UAAQ,MAAR;GACE,KAAKC,YAAU,GACb,QAAO;IAAE,OAAO;IAAO,WAAW,EAAE,IAAI,UAAW;GAAE;GACvD,KAAKA,YAAU,GACb,QAAO;IAAE,OAAO;IAAU,WAAW,EAAE,IAAI,aAAc;GAAE;GAC7D,QACE,QAAO;IAAE,OAAO;IAAQ,WAAW,EAAE,IAAI,YAAa;GAAE;EAC3D;CACF;AAED,6BAA4B;CAE5B,MAAM,EAAE,MAAO,GAAG,gBAAgB,GAAG,wBAAwB,QAAQ;CAErE,MAAM,EAAE,mBAAmB,cAAc,GAAG,sEAAiB;EAC3D;EACA;EACA,GAAG;CACJ,EAAC;AAEF,wBACE,4BAACC,mCAAO;EAAI,GAAI,cAAc;6BAC5B,2BAAC,qCACE,MAAM,KAAK,EAAE,QAAQ,IAAK,EAAC,CAAC,IAAI,CAAC,GAAG,0BACnC,2BAAC,0BAEC,GAAI,kBAAkB;GAAE;GAAO,GAAG;EAAgB,EAAC,IAD9C,MAEL,CACF,GACsB,EAEzB,aAAa,wBACZ,2BAAC,gCAAoB,QAA2B,GAC9C;GACO;AAEhB,GACD,OACD,EAAE;AAIH,MAAM,0BAA0B,YAG9B,OAAO,aAAa,EAAE;AAIxB,MAAM,yBAAyB,YAC7B,OACA,YACD,EAAE;AAIH,MAAM,qBAAqB,YACzB,QACA,QACD,EAAE"}

package/dist/cjs/components/password-input/strength-meter.style.cjs

@@ -0,0 +1,33 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/password-input/strength-meter.style.ts
+const strengthMeterStyle = require_core_system_config.defineComponentSlotStyle({ base: {
+	indicator: {
+		bg: "bg.subtle",
+		flex: "1",
+		h: "1",
+		rounded: "l1"
+	},
+	indicators: {
+		display: "flex",
+		gap: "sm",
+		transitionDuration: "moderate",
+		transitionProperty: "common",
+		w: "full"
+	},
+	label: {
+		color: "fg.muted",
+		fontSize: "xs"
+	},
+	root: {
+		alignItems: "end",
+		display: "flex",
+		flexDirection: "column",
+		gap: "xs",
+		w: "full"
+	}
+} });
+
+//#endregion
+exports.strengthMeterStyle = strengthMeterStyle;
+//# sourceMappingURL=strength-meter.style.cjs.map

package/dist/cjs/components/password-input/strength-meter.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"strength-meter.style.cjs","names":[],"sources":["../../../../src/components/password-input/strength-meter.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const strengthMeterStyle = defineComponentSlotStyle({\n  base: {\n    indicator: {\n      bg: \"bg.subtle\",\n      flex: \"1\",\n      h: \"1\",\n      rounded: \"l1\",\n    },\n    indicators: {\n      display: \"flex\",\n      gap: \"sm\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n    },\n    label: {\n      color: \"fg.muted\",\n      fontSize: \"xs\",\n    },\n    root: {\n      alignItems: \"end\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xs\",\n      w: \"full\",\n    },\n  },\n})\n\nexport type StrengthMeterStyle = typeof strengthMeterStyle\n"],"mappings":";;;AAEA,MAAa,qBAAqB,oDAAyB,EACzD,MAAM;CACJ,WAAW;EACT,IAAI;EACJ,MAAM;EACN,GAAG;EACH,SAAS;CACV;CACD,YAAY;EACV,SAAS;EACT,KAAK;EACL,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;CACJ;CACD,OAAO;EACL,OAAO;EACP,UAAU;CACX;CACD,MAAM;EACJ,YAAY;EACZ,SAAS;EACT,eAAe;EACf,KAAK;EACL,GAAG;CACJ;AACF,EACF,EAAC"}