@class-kit/react 0.1.0

package/dist/components/number-input.js

@@ -0,0 +1,222 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useEffect, useContext, useSyncExternalStore, createContext } from 'react';
+import { getClassComponentsLocale } from '@class-kit/core';
+
+const FormContext = /*#__PURE__*/ createContext(null);
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function useFormInteractivity() {
+    const context = useContext(FormContext);
+    return {
+        disabled: context?.disabled ?? false,
+        readOnly: context?.readOnly ?? false,
+    };
+}
+function useOptionalFormInteractivity() {
+    return useFormInteractivity();
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly),
+    };
+}
+function useOptionalField(name, options = {}) {
+    const context = useContext(FormContext);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const state = useSyncExternalStore((listener) => context ? context.controller.subscribe(listener) : () => undefined, () => context?.controller.getState() ?? null, () => context?.controller.getState() ?? null);
+    const [localValue, setLocalValue] = React.useState(() => (options.initialValue ?? ""));
+    useEffect(() => {
+        if (!context || !name)
+            return undefined;
+        return context.controller.registerField(name, optionsRef.current);
+    }, [context, name]);
+    const field = name ? state?.fields[name] : undefined;
+    const usesFormField = Boolean(context && name);
+    return {
+        value: usesFormField ? (field?.value ?? "") : localValue,
+        errors: usesFormField ? (field?.errors ?? []) : [],
+        dirty: usesFormField ? (field?.meta.dirty ?? false) : false,
+        touched: usesFormField ? (field?.meta.touched ?? false) : false,
+        setValue: (value) => {
+            if (context && name) {
+                void context.controller.setValue(name, value);
+            }
+            else {
+                setLocalValue(value);
+            }
+        },
+        onBlur: () => {
+            if (context && name)
+                void context.controller.blur(name);
+        },
+    };
+}
+function FieldError({ errors, errorId, className, }) {
+    return errors.length > 0 ? (jsx("span", { className: className ?? "cc-field__error", id: errorId, role: "alert", children: errors[0] })) : null;
+}
+function countFractionDigits(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    const [, fraction = ""] = String(value).split(".");
+    return fraction.length;
+}
+function applyNumberStep(current, direction, options) {
+    const step = Number.isFinite(options.step) &&
+        options.step !== undefined &&
+        options.step > 0
+        ? options.step
+        : 1;
+    const base = current ?? options.min ?? 0;
+    const precision = Math.max(countFractionDigits(base), countFractionDigits(step));
+    const factor = 10 ** precision;
+    let next = (Math.round(base * factor) + direction * Math.round(step * factor)) /
+        factor;
+    if (options.min !== undefined)
+        next = Math.max(options.min, next);
+    if (options.max !== undefined)
+        next = Math.min(options.max, next);
+    return next;
+}
+function toOptionalNumber(value) {
+    if (value === undefined || value === "")
+        return undefined;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : undefined;
+}
+function numberInputValueToText(value) {
+    return value === undefined || value === null || value === ""
+        ? ""
+        : String(value);
+}
+function isIncompleteNumberDraft(value) {
+    return value === "-" || value === "." || value === "-.";
+}
+function isAllowedNumberDraft(value, options) {
+    if (value === "")
+        return true;
+    if (!/^-?(?:\d+|\d*\.?\d*)$/.test(value))
+        return false;
+    if (isIncompleteNumberDraft(value))
+        return options.min === undefined || options.min < 0;
+    const numericValue = Number(value);
+    if (!Number.isFinite(numericValue))
+        return false;
+    if (options.min !== undefined && numericValue < options.min)
+        return false;
+    if (options.max !== undefined && numericValue > options.max)
+        return false;
+    return true;
+}
+function parseNumberDraft(value) {
+    if (value === "" || isIncompleteNumberDraft(value))
+        return undefined;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : undefined;
+}
+function NumberInput({ name, label, className = "cc-field", labelClassName = "cc-field__label", controlClassName = "cc-field__control", controlWrapClassName = "cc-field__control-wrap", errorClassName, clearable = true, clearIcon = jsx(ClassIcon, { name: "x" }), clearLabel = getClassComponentsLocale().inputClearLabel, disabled, readOnly, initialValue, max, min, rules, step, validateOn, ...options }) {
+    const field = useOptionalField(name, {
+        initialValue,
+        rules,
+        validateOn,
+    });
+    const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
+    const { onFocus, onKeyDown, onWheel, ...inputOptions } = options;
+    const numericMax = toOptionalNumber(max);
+    const numericMin = toOptionalNumber(min);
+    const numericStep = toOptionalNumber(step);
+    const errorId = `${name}-error`;
+    const invalid = field.errors.length > 0;
+    const [draftValue, setDraftValue] = React.useState(() => numberInputValueToText(field.value));
+    const focusedRef = React.useRef(false);
+    const canClear = clearable &&
+        draftValue !== "" &&
+        !interactivity.disabled &&
+        !interactivity.readOnly;
+    useEffect(() => {
+        if (!focusedRef.current) {
+            setDraftValue(numberInputValueToText(field.value));
+        }
+    }, [field.value]);
+    const commitNumberText = React.useCallback((text) => {
+        const nextValue = parseNumberDraft(text);
+        if (nextValue === undefined) {
+            setDraftValue("");
+            field.setValue(undefined);
+            return;
+        }
+        if (!isAllowedNumberDraft(String(nextValue), {
+            max: numericMax,
+            min: numericMin,
+        })) {
+            setDraftValue(numberInputValueToText(field.value));
+            return;
+        }
+        setDraftValue(String(nextValue));
+        field.setValue(nextValue);
+    }, [field, numericMax, numericMin]);
+    return (jsxs("label", { className: className, "data-disabled": interactivity.disabled, "data-readonly": interactivity.readOnly, children: [label ? jsx("span", { className: labelClassName, children: label }) : null, jsxs("span", { className: controlWrapClassName, children: [jsx("input", { ...inputOptions, "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, className: `${controlClassName}${canClear ? " cc-field__control--clearable" : ""}`, "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, inputMode: "decimal", name: name, pattern: "-?[0-9]*[.]?[0-9]*", readOnly: interactivity.readOnly, type: "text", value: draftValue, onFocus: (event) => {
+                            focusedRef.current = true;
+                            onFocus?.(event);
+                        }, onBlur: (event) => {
+                            focusedRef.current = false;
+                            field.onBlur();
+                            commitNumberText(event.currentTarget.value);
+                        }, onChange: (event) => {
+                            if (interactivity.readOnly)
+                                return;
+                            const nextValue = event.currentTarget.value;
+                            if (!isAllowedNumberDraft(nextValue, {
+                                max: numericMax,
+                                min: numericMin,
+                            }))
+                                return;
+                            setDraftValue(nextValue);
+                            const parsed = parseNumberDraft(nextValue);
+                            field.setValue(parsed);
+                        }, onKeyDown: (event) => {
+                            onKeyDown?.(event);
+                            if (event.defaultPrevented ||
+                                interactivity.disabled ||
+                                interactivity.readOnly)
+                                return;
+                            if (event.key !== "ArrowUp" && event.key !== "ArrowDown")
+                                return;
+                            event.preventDefault();
+                            const next = applyNumberStep(toOptionalNumber(draftValue) ?? toOptionalNumber(field.value), event.key === "ArrowUp" ? 1 : -1, { max: numericMax, min: numericMin, step: numericStep });
+                            setDraftValue(String(next));
+                            field.setValue(next);
+                        }, onWheelCapture: (event) => {
+                            event.preventDefault();
+                        }, onWheel: (event) => {
+                            onWheel?.(event);
+                            if (event.defaultPrevented)
+                                return;
+                            event.preventDefault();
+                            event.currentTarget.blur();
+                        } }), canClear ? (jsx("button", { "aria-label": clearLabel, className: "cc-field__clear", type: "button", onClick: () => {
+                            setDraftValue("");
+                            field.setValue(undefined);
+                        }, children: clearIcon })) : null] }), jsx(FieldError, { className: errorClassName, errorId: errorId, errors: field.errors })] }));
+}
+
+export { NumberInput };
+//# sourceMappingURL=number-input.js.map

package/dist/components/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","sources":["../../src/index.tsx"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/pagination.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsxRuntime.jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsxRuntime.jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function Pagination({ boundaryCount = 1, className = "cc-pagination", current = 1, pageSize = 10, siblingCount = 1, total = 0, previousIcon = jsxRuntime.jsx(ClassIcon, { name: "chevronLeft" }), nextIcon = jsxRuntime.jsx(ClassIcon, { name: "chevronRight" }), onChange, ...props }) {
+    const state = React.useMemo(() => new core.PaginationController({
+        boundaryCount,
+        current,
+        pageSize,
+        siblingCount,
+        total,
+    }).getState(), [boundaryCount, current, pageSize, siblingCount, total]);
+    return (jsxRuntime.jsxs("div", { className: className, ...props, children: [jsxRuntime.jsx("button", { disabled: state.current <= 1, type: "button", onClick: () => onChange?.(state.current - 1), children: previousIcon }), state.pages.map((page, index) => page === "ellipsis" ? (jsxRuntime.jsx("span", { "aria-hidden": "true", className: "cc-pagination__ellipsis", children: "\u2022\u2022\u2022" }, `ellipsis-${index}`)) : (jsxRuntime.jsx("button", { "data-active": page === state.current, type: "button", onClick: () => onChange?.(page), children: page }, page))), jsxRuntime.jsx("button", { disabled: state.current >= state.pageCount, type: "button", onClick: () => onChange?.(state.current + 1), children: nextIcon })] }));
+}
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=pagination.cjs.map

package/dist/components/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs","sources":["../../src/index.tsx"],"names":["_jsx","useMemo","PaginationController","_jsxs"],"mappings":"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"}

package/dist/components/pagination.d.ts

@@ -0,0 +1,3 @@
+export { Pagination } from "../index";
+export type { PaginationProps } from "../index";
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/pagination.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { PaginationController } from '@class-kit/core';
+
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function Pagination({ boundaryCount = 1, className = "cc-pagination", current = 1, pageSize = 10, siblingCount = 1, total = 0, previousIcon = jsx(ClassIcon, { name: "chevronLeft" }), nextIcon = jsx(ClassIcon, { name: "chevronRight" }), onChange, ...props }) {
+    const state = useMemo(() => new PaginationController({
+        boundaryCount,
+        current,
+        pageSize,
+        siblingCount,
+        total,
+    }).getState(), [boundaryCount, current, pageSize, siblingCount, total]);
+    return (jsxs("div", { className: className, ...props, children: [jsx("button", { disabled: state.current <= 1, type: "button", onClick: () => onChange?.(state.current - 1), children: previousIcon }), state.pages.map((page, index) => page === "ellipsis" ? (jsx("span", { "aria-hidden": "true", className: "cc-pagination__ellipsis", children: "\u2022\u2022\u2022" }, `ellipsis-${index}`)) : (jsx("button", { "data-active": page === state.current, type: "button", onClick: () => onChange?.(page), children: page }, page))), jsx("button", { disabled: state.current >= state.pageCount, type: "button", onClick: () => onChange?.(state.current + 1), children: nextIcon })] }));
+}
+
+export { Pagination };
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../src/index.tsx"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/password-input.cjs

@@ -0,0 +1,125 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+const FormContext = /*#__PURE__*/ React.createContext(null);
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsxRuntime.jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsxRuntime.jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function useFormInteractivity() {
+    const context = React.useContext(FormContext);
+    return {
+        disabled: context?.disabled ?? false,
+        readOnly: context?.readOnly ?? false,
+    };
+}
+function useOptionalFormInteractivity() {
+    return useFormInteractivity();
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly),
+    };
+}
+function useOptionalField(name, options = {}) {
+    const context = React.useContext(FormContext);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const state = React.useSyncExternalStore((listener) => context ? context.controller.subscribe(listener) : () => undefined, () => context?.controller.getState() ?? null, () => context?.controller.getState() ?? null);
+    const [localValue, setLocalValue] = React.useState(() => (options.initialValue ?? ""));
+    React.useEffect(() => {
+        if (!context || !name)
+            return undefined;
+        return context.controller.registerField(name, optionsRef.current);
+    }, [context, name]);
+    const field = name ? state?.fields[name] : undefined;
+    const usesFormField = Boolean(context && name);
+    return {
+        value: usesFormField ? (field?.value ?? "") : localValue,
+        errors: usesFormField ? (field?.errors ?? []) : [],
+        dirty: usesFormField ? (field?.meta.dirty ?? false) : false,
+        touched: usesFormField ? (field?.meta.touched ?? false) : false,
+        setValue: (value) => {
+            if (context && name) {
+                void context.controller.setValue(name, value);
+            }
+            else {
+                setLocalValue(value);
+            }
+        },
+        onBlur: () => {
+            if (context && name)
+                void context.controller.blur(name);
+        },
+    };
+}
+function FieldError({ errors, errorId, className, }) {
+    return errors.length > 0 ? (jsxRuntime.jsx("span", { className: className ?? "cc-field__error", id: errorId, role: "alert", children: errors[0] })) : null;
+}
+function renderPasswordToggleImage(image, fallbackAlt) {
+    if (!image)
+        return null;
+    const src = typeof image === "string" ? image : image.src;
+    const alt = typeof image === "string" ? fallbackAlt : (image.alt ?? fallbackAlt);
+    return (jsxRuntime.jsx("img", { alt: alt, className: "cc-password-field__toggle-image", src: src }));
+}
+function PasswordEyeIcon({ visible, }) {
+    return (jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: "cc-password-field__eye", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("path", { d: "M2.4 12s3.2-6.2 9.6-6.2S21.6 12 21.6 12s-3.2 6.2-9.6 6.2S2.4 12 2.4 12Z" }), jsxRuntime.jsx("path", { d: "M12 8.8a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4Z" }), !visible ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { className: "cc-password-field__eye-mask", d: "M6.2 5.1 18.9 17.8" }), jsxRuntime.jsx("path", { className: "cc-password-field__eye-mask", d: "M3.7 3.9 20.3 20.1" })] })) : null] }));
+}
+function PasswordInput({ name, label, className = "cc-field cc-password-field", labelClassName = "cc-field__label", controlClassName = "cc-field__control", controlWrapClassName = "cc-field__control-wrap cc-password-field__wrap", errorClassName, clearable = true, clearIcon = jsxRuntime.jsx(ClassIcon, { name: "x" }), clearLabel = core.getClassComponentsLocale().passwordClearLabel, defaultVisible = false, disabled, hiddenIcon, hiddenImage, initialValue, onVisibleChange, readOnly, rules, showToggle = true, toggleLabel, toggleType = "icon", validateOn, visible, visibleIcon, visibleImage, ...options }) {
+    const field = useOptionalField(name, {
+        initialValue,
+        rules,
+        validateOn,
+    });
+    const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
+    const [innerVisible, setInnerVisible] = React.useState(defaultVisible);
+    const controller = React.useMemo(() => new core.PasswordInputController({ visible: visible ?? innerVisible }), [innerVisible, visible]);
+    const state = controller.getState();
+    const errorId = `${name}-error`;
+    const invalid = field.errors.length > 0;
+    const canClear = clearable &&
+        field.value !== "" &&
+        !interactivity.disabled &&
+        !interactivity.readOnly;
+    const canToggle = showToggle && !interactivity.disabled;
+    const toggleContent = toggleType === "image" ? (renderPasswordToggleImage(state.visible ? visibleImage : hiddenImage, state.visible
+        ? core.getClassComponentsLocale().passwordVisibleAlt
+        : core.getClassComponentsLocale().passwordHiddenAlt)) : toggleType === "icon" &&
+        (state.visible ? visibleIcon : hiddenIcon) === undefined ? (jsxRuntime.jsx(PasswordEyeIcon, { visible: state.visible })) : state.visible ? ((visibleIcon ?? core.getClassComponentsLocale().passwordVisibleIcon)) : ((hiddenIcon ?? core.getClassComponentsLocale().passwordHiddenIcon));
+    return (jsxRuntime.jsxs("label", { className: className, "data-disabled": interactivity.disabled, "data-readonly": interactivity.readOnly, children: [label ? jsxRuntime.jsx("span", { className: labelClassName, children: label }) : null, jsxRuntime.jsxs("span", { className: controlWrapClassName, children: [jsxRuntime.jsx("input", { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, className: `${controlClassName}${canClear || canToggle ? " cc-field__control--clearable cc-password-field__control" : ""}`, "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, name: name, readOnly: interactivity.readOnly, type: state.inputType, value: field.value, onBlur: field.onBlur, onChange: (event) => {
+                            if (interactivity.readOnly)
+                                return;
+                            field.setValue(event.currentTarget.value);
+                        }, ...options }), jsxRuntime.jsxs("span", { className: "cc-password-field__actions", children: [canClear ? (jsxRuntime.jsx("button", { "aria-label": clearLabel, className: "cc-field__clear cc-password-field__clear", type: "button", onClick: () => field.setValue(""), children: clearIcon })) : null, canToggle ? (jsxRuntime.jsx("button", { "aria-label": toggleLabel ??
+                                    (state.visible
+                                        ? core.getClassComponentsLocale().passwordToggleVisibleLabel
+                                        : core.getClassComponentsLocale().passwordToggleHiddenLabel), "aria-pressed": state.visible, className: "cc-password-field__toggle", "data-type": toggleType, type: "button", onClick: () => {
+                                    const next = !state.visible;
+                                    if (visible === undefined)
+                                        setInnerVisible(next);
+                                    onVisibleChange?.(next);
+                                }, children: toggleContent })) : null] })] }), jsxRuntime.jsx(FieldError, { className: errorClassName, errorId: errorId, errors: field.errors })] }));
+}
+
+exports.PasswordInput = PasswordInput;
+//# sourceMappingURL=password-input.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.cjs","sources":["../../src/index.tsx"],"names":["createContext","_jsx","useContext","useSyncExternalStore","useEffect","_jsxs","_Fragment","getClassComponentsLocale","PasswordInputController"],"mappings":";;;;;;AAsIA,MAAM,WAAW,iBAAiBA,mBAAa,CAC7C,IAAI,CACL;AAaD,MAAM,cAAc,GAAoC;IACtD,WAAW,EAAE,CAAC,cAAc,CAAC;IAC7B,WAAW,EAAE,CAAC,iBAAiB,CAAC;IAChC,YAAY,EAAE,CAAC,eAAe,CAAC;IAC/B,SAAS,EAAE,CAAC,iBAAiB,CAAC;IAC9B,KAAK,EAAE,CAAC,iBAAiB,CAAC;AAC1B,IAAA,QAAQ,EAAE;QACR,kDAAkD;QAClD,2oBAA2oB;AAC5oB,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,uFAAuF;AACxF,KAAA;AACD,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;CAChC;AAED,SAAS,SAAS,CAAC,EACjB,SAAS,GAAG,SAAS,EACrB,IAAI,GAIL,EAAA;AACC,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,cAAc,GAAG,MAAM,EAC/C,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EAAA,QAAA,EAElB,cAAc,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAC1BA,cAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAE,CAAC,EAEJ,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,IAJ/B,CAAC,CAKN,CACH,CAAC,EAAA,CACE;AAEV;AAuYA,SAAS,oBAAoB,GAAA;AAC3B,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,WAAW,CAAC;IACvC,OAAO;AACL,QAAA,QAAQ,EAAE,OAAO,EAAE,QAAQ,IAAI,KAAK;AACpC,QAAA,QAAQ,EAAE,OAAO,EAAE,QAAQ,IAAI,KAAK;KACrC;AACH;AAEA,SAAS,4BAA4B,GAAA;IACnC,OAAO,oBAAoB,EAAE;AAC/B;AAEA,SAAS,yBAAyB,CAChC,IAA8C,EAC9C,QAAkB,EAClB,QAAkB,EAAA;AAElB,IAAA,MAAM,gBAAgB,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ;IAClD,OAAO;AACL,QAAA,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE,CAAC,gBAAgB,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;KAC3D;AACH;AA+CA,SAAS,gBAAgB,CAIvB,IAA2B,EAC3B,UAAgC,EAAE,EAAA;AAElC,IAAA,MAAM,OAAO,GAAGA,gBAAU,CAAC,WAAW,CAAoC;IAC1E,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;AACxC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;IAC5B,MAAM,KAAK,GAAGC,0BAAoB,CAChC,CAAC,QAAQ,KACP,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,MAAM,SAAS,EACpE,MAAM,OAAO,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,IAAI,EAC5C,MAAM,OAAO,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,IAAI,CAC7C;IACD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,OAAO,OAAO,CAAC,YAAY,IAAI,EAAE,CAAU,CAC5C;IAEDC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,SAAS;AACvC,QAAA,OAAO,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAEnB,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS;IACpD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC;IAE9C,OAAO;AACL,QAAA,KAAK,EAAE,aAAa,IAAK,KAAK,EAAE,KAAK,IAAI,EAAE,IAAc,UAAU;AACnE,QAAA,MAAM,EAAE,aAAa,IAAI,KAAK,EAAE,MAAM,IAAI,EAAE,IAAI,EAAE;AAClD,QAAA,KAAK,EAAE,aAAa,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK;AAC3D,QAAA,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,KAAK;AAC/D,QAAA,QAAQ,EAAE,CAAC,KAAK,KAAI;AAClB,YAAA,IAAI,OAAO,IAAI,IAAI,EAAE;gBACnB,KAAK,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;YAC/C;iBAAO;gBACL,aAAa,CAAC,KAAK,CAAC;YACtB;QACF,CAAC;QACD,MAAM,EAAE,MAAK;YACX,IAAI,OAAO,IAAI,IAAI;gBAAE,KAAK,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;QACzD,CAAC;KACF;AACH;AAyBA,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,OAAO,EACP,SAAS,GAKV,EAAA;AACC,IAAA,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,IACtBH,yBAAM,SAAS,EAAE,SAAS,IAAI,iBAAiB,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,YACvE,MAAM,CAAC,CAAC,CAAC,GACL,IACL,IAAI;AACV;AAyGA,SAAS,yBAAyB,CAChC,KAAyD,EACzD,WAAmB,EAAA;AAEnB,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;AACvB,IAAA,MAAM,GAAG,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,GAAG;IACzD,MAAM,GAAG,GACP,OAAO,KAAK,KAAK,QAAQ,GAAG,WAAW,IAAI,KAAK,CAAC,GAAG,IAAI,WAAW,CAAC;AACtE,IAAA,QACEA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,GAAG,EAAA,CAAI;AAE3E;AAEA,SAAS,eAAe,CAAC,EACvB,OAAO,GAGR,EAAA;AACC,IAAA,QACEI,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,SAAS,EAAC,wBAAwB,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,CAEnBJ,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,yEAAyE,EAAA,CAAG,EACpFA,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,kDAAkD,EAAA,CAAG,EAC5D,CAAC,OAAO,IACPI,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEL,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,6BAA6B,EACvC,CAAC,EAAC,oBAAoB,EAAA,CACtB,EACFA,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,6BAA6B,EACvC,CAAC,EAAC,oBAAoB,EAAA,CACtB,CAAA,EAAA,CACD,IACD,IAAI,CAAA,EAAA,CACJ;AAEV;SAEgB,aAAa,CAAyC,EACpE,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,4BAA4B,EACxC,cAAc,GAAG,iBAAiB,EAClC,gBAAgB,GAAG,mBAAmB,EACtC,oBAAoB,GAAG,gDAAgD,EACvE,cAAc,EACd,SAAS,GAAG,IAAI,EAChB,SAAS,GAAGA,cAAA,CAAC,SAAS,EAAA,EAAC,IAAI,EAAC,GAAG,EAAA,CAAG,EAClC,UAAU,GAAGM,6BAAwB,EAAE,CAAC,kBAAkB,EAC1D,cAAc,GAAG,KAAK,EACtB,QAAQ,EACR,UAAU,EACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,KAAK,EACL,UAAU,GAAG,IAAI,EACjB,WAAW,EACX,UAAU,GAAG,MAAM,EACnB,UAAU,EACV,OAAO,EACP,WAAW,EACX,YAAY,EACZ,GAAG,OAAO,EACiB,EAAA;AAC3B,IAAA,MAAM,KAAK,GAAG,gBAAgB,CAAiB,IAAI,EAAE;QACnD,YAAY;QACZ,KAAK;QACL,UAAU;AACX,KAAA,CAAC;IACF,MAAM,aAAa,GAAG,yBAAyB,CAC7C,4BAA4B,EAAE,EAC9B,QAAQ,EACR,QAAQ,CACT;AACD,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACtE,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAC9B,MAAM,IAAIC,4BAAuB,CAAC,EAAE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,CAAC,EACvE,CAAC,YAAY,EAAE,OAAO,CAAC,CACxB;AACD,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;AACnC,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,IAAI,QAAQ;IAC/B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;IACvC,MAAM,QAAQ,GACZ,SAAS;QACT,KAAK,CAAC,KAAK,KAAK,EAAE;QAClB,CAAC,aAAa,CAAC,QAAQ;QACvB,CAAC,aAAa,CAAC,QAAQ;IACzB,MAAM,SAAS,GAAG,UAAU,IAAI,CAAC,aAAa,CAAC,QAAQ;IACvD,MAAM,aAAa,GACjB,UAAU,KAAK,OAAO,IACpB,yBAAyB,CACvB,KAAK,CAAC,OAAO,GAAG,YAAY,GAAG,WAAW,EAC1C,KAAK,CAAC;AACJ,UAAED,6BAAwB,EAAE,CAAC;AAC7B,UAAEA,6BAAwB,EAAE,CAAC,iBAAiB,CACjD,IACC,UAAU,KAAK,MAAM;AACvB,QAAA,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,GAAG,UAAU,MAAM,SAAS,IACxDN,cAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,IACzC,KAAK,CAAC,OAAO,KACd,WAAW,IAAIM,6BAAwB,EAAE,CAAC,mBAAmB,OAE7D,UAAU,IAAIA,6BAAwB,EAAE,CAAC,kBAAkB,EAC7D;IAEH,QACEF,eAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,SAAS,mBACL,aAAa,CAAC,QAAQ,EAAA,eAAA,EACtB,aAAa,CAAC,QAAQ,EAAA,QAAA,EAAA,CAEpC,KAAK,GAAGJ,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,GAAG,IAAI,EAC/DI,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,oBAAoB,EAAA,QAAA,EAAA,CACnCJ,cAAA,CAAA,OAAA,EAAA,EAAA,kBAAA,EACoB,OAAO,GAAG,OAAO,GAAG,SAAS,EAAA,cAAA,EACjC,OAAO,EACrB,SAAS,EAAE,CAAA,EAAG,gBAAgB,CAAA,EAAG,QAAQ,IAAI,SAAS,GAAG,0DAA0D,GAAG,EAAE,CAAA,CAAE,EAAA,eAAA,EAC3G,aAAa,CAAC,QAAQ,EACrC,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,KAAK,KAAI;4BAClB,IAAI,aAAa,CAAC,QAAQ;gCAAE;4BAC5B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;wBAC3C,CAAC,EAAA,GACG,OAAO,EAAA,CACX,EACFI,0BAAM,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzC,QAAQ,IACPJ,cAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACc,UAAU,EACtB,SAAS,EAAC,0CAA0C,EACpD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,QAAA,EAEhC,SAAS,EAAA,CACH,IACP,IAAI,EACP,SAAS,IACRA,cAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAEI,WAAW;qCACV,KAAK,CAAC;AACL,0CAAEM,6BAAwB,EAAE,CAAC;0CAC3BA,6BAAwB,EAAE,CAAC,yBAAyB,CAAC,EAAA,cAAA,EAE7C,KAAK,CAAC,OAAO,EAC3B,SAAS,EAAC,2BAA2B,EAAA,WAAA,EAC1B,UAAU,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAK;AACZ,oCAAA,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO;oCAC3B,IAAI,OAAO,KAAK,SAAS;wCAAE,eAAe,CAAC,IAAI,CAAC;AAChD,oCAAA,eAAe,GAAG,IAAI,CAAC;AACzB,gCAAA,CAAC,EAAA,QAAA,EAEA,aAAa,EAAA,CACP,IACP,IAAI,CAAA,EAAA,CACH,CAAA,EAAA,CACF,EACPN,cAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,CACpB,CAAA,EAAA,CACI;AAEZ;;;;"}

package/dist/components/password-input.d.ts

@@ -0,0 +1,3 @@
+export { PasswordInput } from "../index";
+export type { PasswordInputProps } from "../index";
+//# sourceMappingURL=password-input.d.ts.map

package/dist/components/password-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../src/components/password-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/password-input.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useContext, useSyncExternalStore, useEffect, createContext } from 'react';
+import { PasswordInputController, getClassComponentsLocale } from '@class-kit/core';
+
+const FormContext = /*#__PURE__*/ createContext(null);
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function useFormInteractivity() {
+    const context = useContext(FormContext);
+    return {
+        disabled: context?.disabled ?? false,
+        readOnly: context?.readOnly ?? false,
+    };
+}
+function useOptionalFormInteractivity() {
+    return useFormInteractivity();
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly),
+    };
+}
+function useOptionalField(name, options = {}) {
+    const context = useContext(FormContext);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const state = useSyncExternalStore((listener) => context ? context.controller.subscribe(listener) : () => undefined, () => context?.controller.getState() ?? null, () => context?.controller.getState() ?? null);
+    const [localValue, setLocalValue] = React.useState(() => (options.initialValue ?? ""));
+    useEffect(() => {
+        if (!context || !name)
+            return undefined;
+        return context.controller.registerField(name, optionsRef.current);
+    }, [context, name]);
+    const field = name ? state?.fields[name] : undefined;
+    const usesFormField = Boolean(context && name);
+    return {
+        value: usesFormField ? (field?.value ?? "") : localValue,
+        errors: usesFormField ? (field?.errors ?? []) : [],
+        dirty: usesFormField ? (field?.meta.dirty ?? false) : false,
+        touched: usesFormField ? (field?.meta.touched ?? false) : false,
+        setValue: (value) => {
+            if (context && name) {
+                void context.controller.setValue(name, value);
+            }
+            else {
+                setLocalValue(value);
+            }
+        },
+        onBlur: () => {
+            if (context && name)
+                void context.controller.blur(name);
+        },
+    };
+}
+function FieldError({ errors, errorId, className, }) {
+    return errors.length > 0 ? (jsx("span", { className: className ?? "cc-field__error", id: errorId, role: "alert", children: errors[0] })) : null;
+}
+function renderPasswordToggleImage(image, fallbackAlt) {
+    if (!image)
+        return null;
+    const src = typeof image === "string" ? image : image.src;
+    const alt = typeof image === "string" ? fallbackAlt : (image.alt ?? fallbackAlt);
+    return (jsx("img", { alt: alt, className: "cc-password-field__toggle-image", src: src }));
+}
+function PasswordEyeIcon({ visible, }) {
+    return (jsxs("svg", { "aria-hidden": "true", className: "cc-password-field__eye", fill: "none", viewBox: "0 0 24 24", children: [jsx("path", { d: "M2.4 12s3.2-6.2 9.6-6.2S21.6 12 21.6 12s-3.2 6.2-9.6 6.2S2.4 12 2.4 12Z" }), jsx("path", { d: "M12 8.8a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4Z" }), !visible ? (jsxs(Fragment, { children: [jsx("path", { className: "cc-password-field__eye-mask", d: "M6.2 5.1 18.9 17.8" }), jsx("path", { className: "cc-password-field__eye-mask", d: "M3.7 3.9 20.3 20.1" })] })) : null] }));
+}
+function PasswordInput({ name, label, className = "cc-field cc-password-field", labelClassName = "cc-field__label", controlClassName = "cc-field__control", controlWrapClassName = "cc-field__control-wrap cc-password-field__wrap", errorClassName, clearable = true, clearIcon = jsx(ClassIcon, { name: "x" }), clearLabel = getClassComponentsLocale().passwordClearLabel, defaultVisible = false, disabled, hiddenIcon, hiddenImage, initialValue, onVisibleChange, readOnly, rules, showToggle = true, toggleLabel, toggleType = "icon", validateOn, visible, visibleIcon, visibleImage, ...options }) {
+    const field = useOptionalField(name, {
+        initialValue,
+        rules,
+        validateOn,
+    });
+    const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
+    const [innerVisible, setInnerVisible] = React.useState(defaultVisible);
+    const controller = React.useMemo(() => new PasswordInputController({ visible: visible ?? innerVisible }), [innerVisible, visible]);
+    const state = controller.getState();
+    const errorId = `${name}-error`;
+    const invalid = field.errors.length > 0;
+    const canClear = clearable &&
+        field.value !== "" &&
+        !interactivity.disabled &&
+        !interactivity.readOnly;
+    const canToggle = showToggle && !interactivity.disabled;
+    const toggleContent = toggleType === "image" ? (renderPasswordToggleImage(state.visible ? visibleImage : hiddenImage, state.visible
+        ? getClassComponentsLocale().passwordVisibleAlt
+        : getClassComponentsLocale().passwordHiddenAlt)) : toggleType === "icon" &&
+        (state.visible ? visibleIcon : hiddenIcon) === undefined ? (jsx(PasswordEyeIcon, { visible: state.visible })) : state.visible ? ((visibleIcon ?? getClassComponentsLocale().passwordVisibleIcon)) : ((hiddenIcon ?? getClassComponentsLocale().passwordHiddenIcon));
+    return (jsxs("label", { className: className, "data-disabled": interactivity.disabled, "data-readonly": interactivity.readOnly, children: [label ? jsx("span", { className: labelClassName, children: label }) : null, jsxs("span", { className: controlWrapClassName, children: [jsx("input", { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, className: `${controlClassName}${canClear || canToggle ? " cc-field__control--clearable cc-password-field__control" : ""}`, "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, name: name, readOnly: interactivity.readOnly, type: state.inputType, value: field.value, onBlur: field.onBlur, onChange: (event) => {
+                            if (interactivity.readOnly)
+                                return;
+                            field.setValue(event.currentTarget.value);
+                        }, ...options }), jsxs("span", { className: "cc-password-field__actions", children: [canClear ? (jsx("button", { "aria-label": clearLabel, className: "cc-field__clear cc-password-field__clear", type: "button", onClick: () => field.setValue(""), children: clearIcon })) : null, canToggle ? (jsx("button", { "aria-label": toggleLabel ??
+                                    (state.visible
+                                        ? getClassComponentsLocale().passwordToggleVisibleLabel
+                                        : getClassComponentsLocale().passwordToggleHiddenLabel), "aria-pressed": state.visible, className: "cc-password-field__toggle", "data-type": toggleType, type: "button", onClick: () => {
+                                    const next = !state.visible;
+                                    if (visible === undefined)
+                                        setInnerVisible(next);
+                                    onVisibleChange?.(next);
+                                }, children: toggleContent })) : null] })] }), jsx(FieldError, { className: errorClassName, errorId: errorId, errors: field.errors })] }));
+}
+
+export { PasswordInput };
+//# sourceMappingURL=password-input.js.map