@refraktor/core 0.0.3 → 0.0.5

package/build/components/password-input/password-input.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUncontrolled } from "@refraktor/utils";
+import { EyeIcon, EyeOffIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import { createComponentConfig, factory, useProps } from "../../utils";
+import { Input } from "../input";
+const defaultProps = {
+    withVisibilityToggle: true,
+    showPasswordLabel: "Show password",
+    hidePasswordLabel: "Hide password"
+};
+const PasswordInput = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { visible, defaultVisible, onVisibilityChange, withVisibilityToggle, showPasswordLabel, hidePasswordLabel, rightSection, disabled, ...props } = useProps("PasswordInput", defaultProps, _props);
+    const [isVisible, setVisible] = useUncontrolled({
+        value: visible,
+        defaultValue: defaultVisible,
+        finalValue: false,
+        onChange: onVisibilityChange
+    });
+    const Icon = isVisible ? EyeOffIcon : EyeIcon;
+    const toggleLabel = isVisible ? hidePasswordLabel : showPasswordLabel;
+    const visibilityToggle = (_jsx("button", { type: "button", disabled: disabled, "aria-label": toggleLabel, "aria-pressed": isVisible, className: cx("inline-flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[var(--refraktor-text-secondary)] transition-colors hover:text-[var(--refraktor-text)]", disabled && "cursor-not-allowed opacity-50"), onMouseDown: (event) => event.preventDefault(), onClick: () => setVisible(!isVisible), children: _jsx(Icon, { size: 16 }) }));
+    let resolvedRightSection = rightSection;
+    if (withVisibilityToggle) {
+        resolvedRightSection = rightSection ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [rightSection, visibilityToggle] })) : (visibilityToggle);
+    }
+    return (_jsx(Input, { ...props, ref: ref, type: isVisible ? "text" : "password", disabled: disabled, rightSection: resolvedRightSection }));
+});
+PasswordInput.displayName = "@refraktor/core/PasswordInput";
+PasswordInput.configure = createComponentConfig();
+export default PasswordInput;

package/build/components/password-input/password-input.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=password-input.test.d.ts.map

package/build/components/password-input/password-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.test.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/password-input.test.tsx"],"names":[],"mappings":""}

package/build/components/password-input/password-input.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import PasswordInput from "./password-input";
+describe("@refraktor/core/PasswordInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(_jsx(PasswordInput, { label: "Password", description: "Use at least 8 characters", error: "Password is required" }));
+        const input = screen.getByLabelText("Password");
+        expect(input).toHaveAttribute("type", "password");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Use at least 8 characters")).toBeInTheDocument();
+        expect(screen.getByText("Password is required")).toBeInTheDocument();
+    });
+    it("toggles password visibility", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PasswordInput, { label: "Password" }));
+        const input = screen.getByLabelText("Password");
+        const showButton = screen.getByRole("button", {
+            name: "Show password"
+        });
+        expect(input).toHaveAttribute("type", "password");
+        await user.click(showButton);
+        expect(input).toHaveAttribute("type", "text");
+        const hideButton = screen.getByRole("button", {
+            name: "Hide password"
+        });
+        await user.click(hideButton);
+        expect(input).toHaveAttribute("type", "password");
+    });
+    it("respects disabled state", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PasswordInput, { label: "Password", disabled: true }));
+        const input = screen.getByLabelText("Password");
+        const toggle = screen.getByRole("button", {
+            name: "Show password"
+        });
+        expect(toggle).toBeDisabled();
+        await user.click(toggle);
+        expect(input).toHaveAttribute("type", "password");
+    });
+    it("allows disabling visibility toggle", async () => {
+        await render(_jsx(PasswordInput, { label: "Password", withVisibilityToggle: false }));
+        const input = screen.getByLabelText("Password");
+        expect(input).toHaveAttribute("type", "password");
+        expect(screen.queryByRole("button", { name: "Show password" })).not.toBeInTheDocument();
+    });
+});

package/build/components/password-input/password-input.types.d.ts

@@ -0,0 +1,24 @@
+import { createComponentConfig, FactoryPayload } from "../../utils";
+import { InputProps } from "../input";
+export interface PasswordInputProps extends Omit<InputProps, "type"> {
+    /** Whether to render the visibility toggle icon @default `true` */
+    withVisibilityToggle?: boolean;
+    /** Controls visibility state */
+    visible?: boolean;
+    /** Initial visibility state */
+    defaultVisible?: boolean;
+    /** Callback called when visibility changes */
+    onVisibilityChange?: (visible: boolean) => void;
+    /** Accessible label for showing the password @default `Show password` */
+    showPasswordLabel?: string;
+    /** Accessible label for hiding the password @default `Hide password` */
+    hidePasswordLabel?: string;
+}
+export interface PasswordInputFactoryPayload extends FactoryPayload {
+    props: PasswordInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<PasswordInputProps>>;
+    };
+}
+//# sourceMappingURL=password-input.types.d.ts.map

package/build/components/password-input/password-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/password-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IAChE,mEAAmE;IACnE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,2BAA4B,SAAQ,cAAc;IAC/D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC3E,CAAC;CACL"}

package/build/components/password-input/password-input.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/pin-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PinInput } from "./pin-input";
+export * from "./pin-input.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/pin-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,cAAc,mBAAmB,CAAC"}

package/build/components/pin-input/index.js

@@ -0,0 +1,2 @@
+export { default as PinInput } from "./pin-input";
+export * from "./pin-input.types";

package/build/components/pin-input/pin-input.d.ts

@@ -0,0 +1,4 @@
+import { PinInputFactoryPayload } from "./pin-input.types";
+declare const PinInput: import("../..").RefraktorComponent<PinInputFactoryPayload>;
+export default PinInput;
+//# sourceMappingURL=pin-input.d.ts.map

package/build/components/pin-input/pin-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/pin-input.tsx"],"names":[],"mappings":"AAYA,OAAO,EAGH,sBAAsB,EAGzB,MAAM,mBAAmB,CAAC;AAyG3B,QAAA,MAAM,QAAQ,4DAuVZ,CAAC;AAMH,eAAe,QAAQ,CAAC"}

package/build/components/pin-input/pin-input.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useMemo, useRef } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getVariant } from "../input/input-field/input-field.styles";
+import { InputWrapper } from "../input/input-wrapper";
+const CHARACTER_SET_PATTERNS = {
+    numeric: /^[0-9]$/,
+    alphabetic: /^[A-Za-z]$/,
+    alphanumeric: /^[A-Za-z0-9]$/,
+    all: /^.$/
+};
+const CELL_SIZES = {
+    xs: "h-7 w-7 text-[10px]",
+    sm: "h-8 w-8 text-xs",
+    md: "h-10 w-10 text-sm",
+    lg: "h-12 w-12 text-base",
+    xl: "h-14 w-14 text-lg"
+};
+const defaultProps = {
+    length: 6,
+    variant: "default",
+    size: "md",
+    radius: "default",
+    mask: false,
+    characterSet: "numeric",
+    transform: "none",
+    ariaLabelPrefix: "Character",
+    autoComplete: "one-time-code"
+};
+function normalizeLength(value) {
+    const length = Number.isFinite(value) ? Math.trunc(value) : 6;
+    return Math.max(1, length);
+}
+function transformCharacter(char, transform) {
+    if (transform === "uppercase") {
+        return char.toUpperCase();
+    }
+    if (transform === "lowercase") {
+        return char.toLowerCase();
+    }
+    return char;
+}
+function isAllowedCharacter(char, characterSet, characterPattern) {
+    const pattern = characterPattern ?? CHARACTER_SET_PATTERNS[characterSet];
+    pattern.lastIndex = 0;
+    return pattern.test(char);
+}
+function toSanitizedChars(value, options) {
+    const result = [];
+    for (const rawChar of value) {
+        const transformedChar = transformCharacter(rawChar, options.transform);
+        if (transformedChar &&
+            isAllowedCharacter(transformedChar, options.characterSet, options.characterPattern)) {
+            result.push(transformedChar);
+        }
+    }
+    return result;
+}
+function toCellArray(value, length, options) {
+    const chars = toSanitizedChars(value, options).slice(0, length);
+    return Array.from({ length }, (_, index) => chars[index] ?? "");
+}
+function normalizeCells(cells, length) {
+    return Array.from({ length }, (_, index) => cells?.[index] ?? "");
+}
+const PinInput = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, label, description, error, required, withAsterisk, length, value, defaultValue, onChange, onComplete, mask, characterSet, characterPattern, transform, ariaLabelPrefix, name, variant, size, radius, disabled, className, classNames, inputMode, autoComplete, placeholder, ...props } = useProps("PinInput", defaultProps, _props);
+    const classes = useClassNames("PinInput", classNames);
+    const _id = useId(id);
+    const resolvedLength = normalizeLength(length);
+    const sanitizingOptions = useMemo(() => ({
+        characterSet,
+        characterPattern,
+        transform
+    }), [characterSet, characterPattern, transform]);
+    const emptyCells = useMemo(() => Array.from({ length: resolvedLength }, () => ""), [resolvedLength]);
+    const [_valueCells, setValueCells] = useUncontrolled({
+        value: value === undefined
+            ? undefined
+            : toCellArray(String(value), resolvedLength, sanitizingOptions),
+        defaultValue: defaultValue === undefined
+            ? undefined
+            : toCellArray(String(defaultValue), resolvedLength, sanitizingOptions),
+        finalValue: emptyCells,
+        onChange: (nextCells) => onChange?.(nextCells.join(""))
+    });
+    const chars = useMemo(() => normalizeCells(_valueCells, resolvedLength), [_valueCells, resolvedLength]);
+    const charsRef = useRef(chars);
+    charsRef.current = chars;
+    const completedValueRef = useRef(null);
+    const inputRefs = useRef([]);
+    const hasWrapper = label || description || error;
+    const describedBy = error
+        ? `${_id}-error`
+        : description
+            ? `${_id}-description`
+            : undefined;
+    const resolvedInputMode = inputMode ?? (characterSet === "numeric" ? "numeric" : "text");
+    const emitValue = useCallback((nextChars) => {
+        setValueCells(nextChars);
+        const nextValue = nextChars.join("");
+        if (!nextChars.includes("")) {
+            if (completedValueRef.current !== nextValue) {
+                onComplete?.(nextValue);
+                completedValueRef.current = nextValue;
+            }
+        }
+        else {
+            completedValueRef.current = null;
+        }
+    }, [onComplete, setValueCells]);
+    const focusCell = useCallback((index) => {
+        if (index < 0 || index >= resolvedLength) {
+            return;
+        }
+        setTimeout(() => {
+            const input = inputRefs.current[index];
+            if (!input) {
+                return;
+            }
+            input.focus();
+            input.select();
+        }, 0);
+    }, [resolvedLength]);
+    const fillFromIndex = useCallback((index, incoming) => {
+        const next = [...charsRef.current];
+        let writeIndex = index;
+        for (const char of incoming) {
+            if (writeIndex >= resolvedLength) {
+                break;
+            }
+            next[writeIndex] = char;
+            writeIndex += 1;
+        }
+        emitValue(next);
+        if (writeIndex < resolvedLength) {
+            focusCell(writeIndex);
+            return;
+        }
+        focusCell(resolvedLength - 1);
+    }, [emitValue, focusCell, resolvedLength]);
+    const handleCellChange = useCallback((index, event) => {
+        if (disabled) {
+            return;
+        }
+        const incoming = toSanitizedChars(event.currentTarget.value, sanitizingOptions);
+        if (incoming.length === 0) {
+            if (event.currentTarget.value !== "") {
+                return;
+            }
+            const next = [...charsRef.current];
+            next[index] = "";
+            emitValue(next);
+            return;
+        }
+        if (incoming.length === 1) {
+            const next = [...charsRef.current];
+            next[index] = incoming[0];
+            emitValue(next);
+            if (index < resolvedLength - 1) {
+                focusCell(index + 1);
+            }
+            return;
+        }
+        fillFromIndex(index, incoming);
+    }, [
+        disabled,
+        sanitizingOptions,
+        emitValue,
+        resolvedLength,
+        focusCell,
+        fillFromIndex
+    ]);
+    const handlePaste = useCallback((index, event) => {
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        const incoming = toSanitizedChars(event.clipboardData.getData("text"), sanitizingOptions);
+        if (incoming.length === 0) {
+            return;
+        }
+        fillFromIndex(index, incoming);
+    }, [disabled, sanitizingOptions, fillFromIndex]);
+    const handleKeyDown = useCallback((index, event) => {
+        if (disabled) {
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusCell(index - 1);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusCell(index + 1);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusCell(0);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusCell(resolvedLength - 1);
+            return;
+        }
+        if (event.key === "Backspace") {
+            event.preventDefault();
+            const next = [...charsRef.current];
+            if (next[index]) {
+                next[index] = "";
+                emitValue(next);
+                return;
+            }
+            if (index > 0) {
+                next[index - 1] = "";
+                emitValue(next);
+                focusCell(index - 1);
+            }
+            return;
+        }
+        if (event.key === "Delete") {
+            event.preventDefault();
+            const next = [...charsRef.current];
+            next[index] = "";
+            emitValue(next);
+        }
+    }, [disabled, emitValue, focusCell, resolvedLength]);
+    const field = (_jsxs("div", { ref: ref, className: cx("flex w-full items-center gap-2", className, classes.root), children: [chars.map((char, index) => (_jsx("input", { ...props, id: `${_id}-${index}`, ref: (node) => {
+                    inputRefs.current[index] = node;
+                }, type: mask ? "password" : "text", inputMode: resolvedInputMode, autoComplete: index === 0 ? autoComplete : "off", maxLength: resolvedLength, value: char, disabled: disabled, required: required && index === 0, placeholder: placeholder, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, "aria-label": `${ariaLabelPrefix} ${index + 1} of ${resolvedLength}`, className: cx("flex-none text-center font-medium tabular-nums outline-none transition-colors", "focus:border-[var(--refraktor-primary)]", getVariant(variant), getRadius(radius), CELL_SIZES[size], error && "border-[var(--refraktor-colors-red-6)]", disabled && "cursor-not-allowed opacity-50", classes.cell), onChange: (event) => handleCellChange(index, event), onKeyDown: (event) => handleKeyDown(index, event), onPaste: (event) => handlePaste(index, event), onFocus: (event) => event.currentTarget.select() }, `${_id}-cell-${index}`))), name && _jsx("input", { type: "hidden", name: name, value: chars.join("") })] }));
+    if (!hasWrapper) {
+        return field;
+    }
+    return (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: `${_id}-0`, children: field }));
+});
+PinInput.displayName = "@refraktor/core/PinInput";
+PinInput.configure = createComponentConfig();
+PinInput.classNames = createClassNamesConfig();
+export default PinInput;

package/build/components/pin-input/pin-input.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=pin-input.test.d.ts.map

package/build/components/pin-input/pin-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.test.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/pin-input.test.tsx"],"names":[],"mappings":""}

package/build/components/pin-input/pin-input.test.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import PinInput from "./pin-input";
+const getCells = (length) => Array.from({ length }, (_, index) => screen.getByLabelText(`Character ${index + 1} of ${length}`));
+describe("@refraktor/core/PinInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(_jsx(PinInput, { label: "Verification code", description: "Enter the code from your authenticator app", error: "Code is required" }));
+        const firstCell = screen.getByLabelText("Verification code");
+        expect(firstCell).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Enter the code from your authenticator app")).toBeInTheDocument();
+        expect(screen.getByText("Code is required")).toBeInTheDocument();
+    });
+    it("auto-advances focus and fires onComplete", async () => {
+        const user = userEvent.setup();
+        const onComplete = vi.fn();
+        await render(_jsx(PinInput, { length: 4, onComplete: onComplete }));
+        const cells = getCells(4);
+        await user.type(cells[0], "1");
+        expect(cells[1]).toHaveFocus();
+        await user.type(cells[1], "2");
+        await user.type(cells[2], "3");
+        await user.type(cells[3], "4");
+        expect(onComplete).toHaveBeenCalledTimes(1);
+        expect(onComplete).toHaveBeenCalledWith("1234");
+    });
+    it("handles backspace navigation", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PinInput, { length: 4 }));
+        const cells = getCells(4);
+        await user.type(cells[0], "1");
+        await user.type(cells[1], "2");
+        expect(cells[2]).toHaveFocus();
+        await user.keyboard("{Backspace}");
+        expect(cells[1]).toHaveFocus();
+        expect(cells[1]).toHaveValue("");
+    });
+    it("handles paste across cells", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PinInput, { length: 6, characterSet: "alphanumeric" }));
+        const cells = getCells(6);
+        cells[0].focus();
+        await user.paste("A1B2C3");
+        expect(cells.map((cell) => cell.value)).toEqual([
+            "A",
+            "1",
+            "B",
+            "2",
+            "C",
+            "3"
+        ]);
+    });
+    it("supports alphanumeric and custom filtering props", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(PinInput, { length: 4, characterPattern: /[A-F0-9]/, transform: "uppercase" }));
+        const cells = getCells(4);
+        await user.type(cells[0], "a");
+        await user.type(cells[1], "g");
+        await user.type(cells[1], "9");
+        expect(cells[0]).toHaveValue("A");
+        expect(cells[1]).toHaveValue("9");
+    });
+    it("supports controlled usage", async () => {
+        const user = userEvent.setup();
+        function Demo() {
+            const [value, setValue] = useState("");
+            return _jsx(PinInput, { length: 4, value: value, onChange: setValue });
+        }
+        await render(_jsx(Demo, {}));
+        const cells = getCells(4);
+        await user.type(cells[0], "1");
+        await user.type(cells[1], "2");
+        expect(cells[0]).toHaveValue("1");
+        expect(cells[1]).toHaveValue("2");
+    });
+    it("supports masking and hidden form value", async () => {
+        await render(_jsx(PinInput, { length: 4, defaultValue: "A1B2", characterSet: "alphanumeric", mask: true, name: "otp" }));
+        const cells = getCells(4);
+        for (const cell of cells) {
+            expect(cell).toHaveAttribute("type", "password");
+        }
+        const hidden = document.querySelector('input[type="hidden"][name="otp"]');
+        expect(hidden).not.toBeNull();
+        expect(hidden?.value).toBe("A1B2");
+    });
+});

package/build/components/pin-input/pin-input.types.d.ts

@@ -0,0 +1,44 @@
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { InputProps } from "../input";
+export type PinInputCharacterSet = "numeric" | "alphabetic" | "alphanumeric" | "all";
+export type PinInputTransform = "none" | "uppercase" | "lowercase";
+export type PinInputClassNames = {
+    root?: string;
+    cell?: string;
+};
+export interface _PinInputProps {
+    /** OTP length @default `6` */
+    length?: number;
+    /** Value (controlled) */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback called whenever the code value changes */
+    onChange?: (value: string) => void;
+    /** Callback called when all cells are filled */
+    onComplete?: (value: string) => void;
+    /** Masks entered characters @default `false` */
+    mask?: boolean;
+    /** Character set filter @default `numeric` */
+    characterSet?: PinInputCharacterSet;
+    /** Optional custom character pattern (overrides characterSet) */
+    characterPattern?: RegExp;
+    /** Character transform @default `none` */
+    transform?: PinInputTransform;
+    /** Accessible label prefix for each cell @default `Character` */
+    ariaLabelPrefix?: string;
+    /** Hidden input name for form submission */
+    name?: string;
+    /** Used for styling different parts of the component */
+    classNames?: PinInputClassNames;
+}
+export type PinInputProps = _PinInputProps & Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "leftSection" | "rightSection" | "maxLength">;
+export interface PinInputFactoryPayload extends FactoryPayload {
+    props: PinInputProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<PinInputProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<PinInputClassNames>>;
+    };
+}
+//# sourceMappingURL=pin-input.types.d.ts.map

package/build/components/pin-input/pin-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/pin-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAC1B,SAAS,GACT,YAAY,GACZ,cAAc,GACd,KAAK,CAAC;AAEZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAEpC,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE9B,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wDAAwD;IACxD,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,UAAU,EACR,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,aAAa,GACb,cAAc,GACd,WAAW,CAChB,CAAC;AAEN,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC1D,KAAK,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,aAAa,CAAC,CAAC,CAAC;QACnE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC7E,CAAC;CACL"}

package/build/components/pin-input/pin-input.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/progress-circle/progress-circle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-circle.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,4BAA4B,EAE/B,MAAM,yBAAyB,CAAC;AAYjC,QAAA,MAAM,cAAc,kEA4FlB,CAAC;AAMH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"progress-circle.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,4BAA4B,EAE/B,MAAM,yBAAyB,CAAC;AAajC,QAAA,MAAM,cAAc,kEA4FlB,CAAC;AAMH,eAAe,cAAc,CAAC"}

package/build/components/progress-circle/progress-circle.js

@@ -2,23 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clamp, useId } from "@refraktor/utils";
 import { useTheme } from "../../theme";
 import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
-import { getSize } from "./progress-circle.styles";
+import { defaultSize, defaultStroke } from "./progress-circle.styles";
 const defaultProps = {
     value: 0,
     min: 0,
     max: 100,
     indeterminate: false,
     animated: true,
-    size: "md"
+    size: defaultSize,
+    stroke: defaultStroke
 };
 const ProgressCircle = factory((_props, ref) => {
     const { cx } = useTheme();
-    const { id, value, min, max, indeterminate, animated, size, className, classNames, ...props } = useProps("ProgressCircle", defaultProps, _props);
+    const { id, value, min, max, indeterminate, animated, size, stroke, className, classNames, ...props } = useProps("ProgressCircle", defaultProps, _props);
     const classes = useClassNames("ProgressCircle", classNames);
     const _id = useId(id);
-    const sizeStyles = getSize(size);
-    const diameter = sizeStyles.size;
-    const strokeWidth = sizeStyles.stroke;
+    const diameter = size;
+    const strokeWidth = stroke;
     const radius = Math.max(0, diameter / 2 - strokeWidth / 2);
     const circumference = 2 * Math.PI * radius;
     const lowerBound = Math.min(min, max);

package/build/components/progress-circle/progress-circle.styles.d.ts

@@ -1,8 +1,3 @@
-import { RefraktorSize } from "../../theme";
-type ProgressCircleSizeStyles = {
-    size: number;
-    stroke: number;
-};
-export declare const getSize: (size?: RefraktorSize) => ProgressCircleSizeStyles;
-export {};
+export declare const defaultSize = 32;
+export declare const defaultStroke = 3;
 //# sourceMappingURL=progress-circle.styles.d.ts.map

package/build/components/progress-circle/progress-circle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-circle.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,wBAAwB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAyBF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,6BAAgB,CAAC"}
+{"version":3,"file":"progress-circle.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,aAAa,IAAI,CAAC"}

package/build/components/progress-circle/progress-circle.styles.js

@@ -1,23 +1,2 @@
-const sizes = {
-    xs: {
-        size: 16,
-        stroke: 2
-    },
-    sm: {
-        size: 20,
-        stroke: 2.5
-    },
-    md: {
-        size: 24,
-        stroke: 3
-    },
-    lg: {
-        size: 32,
-        stroke: 4
-    },
-    xl: {
-        size: 40,
-        stroke: 5
-    }
-};
-export const getSize = (size = "md") => sizes[size];
+export const defaultSize = 32;
+export const defaultStroke = 3;

package/build/components/progress-circle/progress-circle.types.d.ts

@@ -1,5 +1,4 @@
 import { ComponentPropsWithoutRef } from "react";
-import { RefraktorSize } from "../../theme";
 import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
 export type ProgressCircleClassNames = {
     root?: string;
@@ -18,8 +17,10 @@ export interface ProgressCircleProps extends Omit<ComponentPropsWithoutRef<"div"
     indeterminate?: boolean;
     /** Whether dash-offset transitions are animated @default `true` */
     animated?: boolean;
-    /** Circle size @default `md` */
-    size?: RefraktorSize;
+    /** Circle diameter in pixels @default `32` */
+    size?: number;
+    /** Stroke width in pixels @default `3` */
+    stroke?: number;
     /** Used for editing root class name */
     className?: string;
     /** Used for styling different parts of the component */

package/build/components/progress-circle/progress-circle.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-circle.types.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,mBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACzC;AAED,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAChE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACzE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,wBAAwB,CAAC,CAC1D,CAAC;KACL,CAAC;CACL"}
+{"version":3,"file":"progress-circle.types.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,mBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACzC;AAED,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAChE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACzE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,wBAAwB,CAAC,CAC1D,CAAC;KACL,CAAC;CACL"}

package/build/components/scroll-area/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ScrollArea } from "./scroll-area";
+export type { ScrollAreaProps, ScrollAreaClassNames, ScrollAreaOrientation } from "./scroll-area.types";
+//# sourceMappingURL=index.d.ts.map