@refraktor/core 0.0.4 → 0.0.5

package/src/components/password-input/password-input.tsx

@@ -1,85 +0,0 @@
-import { useUncontrolled } from "@refraktor/utils";
-import { EyeIcon, EyeOffIcon } from "../../icons";
-import { useTheme } from "../../theme";
-import { createComponentConfig, factory, useProps } from "../../utils";
-import { Input } from "../input";
-import {
-    PasswordInputFactoryPayload,
-    PasswordInputProps
-} from "./password-input.types";
-
-const defaultProps = {
-    withVisibilityToggle: true,
-    showPasswordLabel: "Show password",
-    hidePasswordLabel: "Hide password"
-} satisfies Partial<PasswordInputProps>;
-
-const PasswordInput = factory<PasswordInputFactoryPayload>((_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 = (
-        <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)}
-        >
-            <Icon size={16} />
-        </button>
-    );
-
-    let resolvedRightSection = rightSection;
-
-    if (withVisibilityToggle) {
-        resolvedRightSection = rightSection ? (
-            <span className="inline-flex items-center gap-1">
-                {rightSection}
-                {visibilityToggle}
-            </span>
-        ) : (
-            visibilityToggle
-        );
-    }
-
-    return (
-        <Input
-            {...props}
-            ref={ref}
-            type={isVisible ? "text" : "password"}
-            disabled={disabled}
-            rightSection={resolvedRightSection}
-        />
-    );
-});
-
-PasswordInput.displayName = "@refraktor/core/PasswordInput";
-PasswordInput.configure = createComponentConfig<PasswordInputProps>();
-
-export default PasswordInput;

package/src/components/password-input/password-input.types.ts

@@ -1,30 +0,0 @@
-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>>;
-    };
-}

package/src/components/pin-input/index.ts

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

package/src/components/pin-input/pin-input.test.tsx

@@ -1,149 +0,0 @@
-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: number) =>
-    Array.from({ length }, (_, index) =>
-        screen.getByLabelText(`Character ${index + 1} of ${length}`)
-    ) as HTMLInputElement[];
-
-describe("@refraktor/core/PinInput", () => {
-    it("supports input wrapper props", async () => {
-        await render(
-            <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(<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(<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(<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(
-            <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 <PinInput length={4} value={value} onChange={setValue} />;
-        }
-
-        await render(<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(
-            <PinInput
-                length={4}
-                defaultValue="A1B2"
-                characterSet="alphanumeric"
-                mask
-                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"]'
-        ) as HTMLInputElement | null;
-
-        expect(hidden).not.toBeNull();
-        expect(hidden?.value).toBe("A1B2");
-    });
-});