@refraktor/core 0.0.3 → 0.0.4

package/src/components/modal/modal.types.ts

@@ -10,19 +10,23 @@ import { ModalRoot } from "./modal-root";
 import { ModalOverlay } from "./modal-overlay";
 import { ModalContent } from "./modal-content";
 import { ModalHeader } from "./modal-header";
+import { ModalBody } from "./modal-body";
 import { ModalClose } from "./modal-close";
 
+export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+
 export type ModalClassNames = {
     root?: string;
     overlay?: string;
     content?: string;
     header?: string;
+    body?: string;
     close?: string;
 };
 
-export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
+export interface ModalRootProps extends ComponentPropsWithoutRef<"div"> {
     /** Children containing modal subcomponents */
-    children: ReactNode;
+    children?: ReactNode;
 
     /** State of the modal (controlled) */
     opened?: boolean;
@@ -48,6 +52,18 @@ export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
     /** Radius for modal content @default `md` */
     radius?: RefraktorRadius;
 
+    /** Modal content width @default `md` */
+    size?: ModalSize;
+
+    /** Whether to center modal vertically @default `true` */
+    centered?: boolean;
+
+    /** Whether to trap focus within the modal @default `true` */
+    trapFocus?: boolean;
+
+    /** Whether to return focus to trigger after close @default `true` */
+    returnFocus?: boolean;
+
     /** Transition props for overlay/content, uses Transition internally */
     transitionProps?: Omit<TransitionProps, "children" | "mounted">;
 
@@ -58,7 +74,19 @@ export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
     classNames?: ModalClassNames;
 }
 
-export type ModalRootProps = ModalProps;
+export interface ModalProps extends Omit<ModalRootProps, "title"> {
+    /** Title text rendered in the header */
+    title?: ReactNode;
+
+    /** Whether to render the overlay @default `true` */
+    withOverlay?: boolean;
+
+    /** Whether to show the close button in the header @default `true` */
+    withCloseButton?: boolean;
+
+    /** Props passed to the Overlay subcomponent */
+    overlayProps?: ModalOverlayProps;
+}
 
 export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
     /** Whether clicking the overlay closes modal @default `true` */
@@ -86,9 +114,6 @@ export interface ModalHeaderProps extends ComponentPropsWithoutRef<"div"> {
     /** Header content */
     children?: ReactNode;
 
-    /** Shorthand header text */
-    text?: ReactNode;
-
     /** Whether to show close button inside header @default `true` */
     withClose?: boolean;
 
@@ -96,8 +121,18 @@ export interface ModalHeaderProps extends ComponentPropsWithoutRef<"div"> {
     className?: string;
 }
 
-export interface ModalCloseProps
-    extends Omit<ComponentPropsWithoutRef<"button">, "onClick"> {
+export interface ModalBodyProps extends ComponentPropsWithoutRef<"div"> {
+    /** Body content */
+    children?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface ModalCloseProps extends Omit<
+    ComponentPropsWithoutRef<"button">,
+    "onClick"
+> {
     /** Optional close content (defaults to `x`) */
     children?: ReactNode;
 
@@ -118,6 +153,7 @@ export interface ModalFactoryPayload extends FactoryPayload {
         Overlay: typeof ModalOverlay;
         Content: typeof ModalContent;
         Header: typeof ModalHeader;
+        Body: typeof ModalBody;
         Close: typeof ModalClose;
     };
 }
@@ -142,6 +178,11 @@ export interface ModalHeaderFactoryPayload extends FactoryPayload {
     ref: HTMLDivElement;
 }
 
+export interface ModalBodyFactoryPayload extends FactoryPayload {
+    props: ModalBodyProps;
+    ref: HTMLDivElement;
+}
+
 export interface ModalCloseFactoryPayload extends FactoryPayload {
     props: ModalCloseProps;
     ref: HTMLButtonElement;

package/src/components/modal/use-modal.ts

@@ -1,5 +1,12 @@
 import { useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
+import {
+    FloatingContext,
+    useDismiss,
+    useFloating,
+    useInteractions,
+    useRole
+} from "@floating-ui/react";
+import { useCallback } from "react";
 
 interface UseModalProps {
     opened?: boolean;
@@ -7,7 +14,6 @@ interface UseModalProps {
     onOpenedChange?: (opened: boolean) => void;
     closeOnClickOutside?: boolean;
     closeOnEscape?: boolean;
-    contentRef: React.MutableRefObject<HTMLElement | null>;
 }
 
 export interface UseModalReturn {
@@ -15,6 +21,15 @@ export interface UseModalReturn {
     open: () => void;
     close: () => void;
     toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    getFloatingProps: (
+        userProps?: React.HTMLAttributes<HTMLElement>
+    ) => Record<string, unknown>;
 }
 
 export function useModal(options: UseModalProps): UseModalReturn {
@@ -23,8 +38,7 @@ export function useModal(options: UseModalProps): UseModalReturn {
         defaultOpened,
         onOpenedChange,
         closeOnClickOutside = true,
-        closeOnEscape = true,
-        contentRef
+        closeOnEscape = true
     } = options;
 
     const [isOpen, setIsOpen] = useUncontrolled({
@@ -34,6 +48,23 @@ export function useModal(options: UseModalProps): UseModalReturn {
         onChange: onOpenedChange
     });
 
+    const floating = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen
+    });
+
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        outsidePressEvent: "mousedown",
+        escapeKey: closeOnEscape
+    });
+
+    const role = useRole(floating.context, {
+        role: "dialog"
+    });
+
+    const { getFloatingProps } = useInteractions([dismiss, role]);
+
     const open = useCallback(() => {
         setIsOpen(true);
     }, [setIsOpen]);
@@ -46,56 +77,18 @@ export function useModal(options: UseModalProps): UseModalReturn {
         setIsOpen(!isOpen);
     }, [isOpen, setIsOpen]);
 
-    useEffect(() => {
-        if (!isOpen || !closeOnEscape) {
-            return;
-        }
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener("keydown", handleKeyDown);
-
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [closeOnEscape, isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnClickOutside) {
-            return;
-        }
-
-        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
-            const target = event.target;
-
-            if (!(target instanceof Node)) {
-                return;
-            }
-
-            if (contentRef.current?.contains(target)) {
-                return;
-            }
-
-            setIsOpen(false);
-        };
-
-        document.addEventListener("mousedown", handlePointerDown);
-        document.addEventListener("touchstart", handlePointerDown);
-
-        return () => {
-            document.removeEventListener("mousedown", handlePointerDown);
-            document.removeEventListener("touchstart", handlePointerDown);
-        };
-    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
-
     return {
         opened: isOpen,
         open,
         close,
-        toggle
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            floating: floating.refs
+                .floating as React.MutableRefObject<HTMLElement | null>
+        },
+        getFloatingProps
     };
 }

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

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

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

@@ -0,0 +1,72 @@
+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(
+            <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(<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(<PasswordInput label="Password" disabled />);
+
+        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(
+            <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/src/components/password-input/password-input.tsx

@@ -0,0 +1,85 @@
+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

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

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

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

@@ -0,0 +1,149 @@
+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");
+    });
+});