@refraktor/core 0.0.3 → 0.0.5

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMergedRefs } from "@refraktor/utils";
+import { useMemo, useRef, useState } from "react";
+import { XIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getSize, getVariant } from "../input/input-field/input-field.styles";
+import { InputWrapper } from "../input/input-wrapper";
+import { formatFileSummary, validateFiles } from "./file-input.utils";
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default",
+    clearable: true
+};
+const FileInput = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, label, description, error, required, withAsterisk, variant, size, radius, multiple, placeholder, clearable, maxSize, minSize, maxFiles, onChange, onReject, className, classNames, disabled, accept, ...props } = useProps("FileInput", defaultProps, _props);
+    const classes = useClassNames("FileInput", classNames);
+    const _id = useId(id);
+    const localRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, localRef);
+    const [files, setFiles] = useState([]);
+    const hasWrapper = label || description || error;
+    const hasValue = files.length > 0;
+    const describedBy = error
+        ? `${_id}-error`
+        : description
+            ? `${_id}-description`
+            : undefined;
+    const summary = useMemo(() => formatFileSummary(files), [files]);
+    const resolvedPlaceholder = placeholder ?? (multiple ? "Select files" : "Select file");
+    const openPicker = () => {
+        if (disabled) {
+            return;
+        }
+        localRef.current?.click();
+    };
+    const handleInputChange = (event) => {
+        const selectedFiles = Array.from(event.currentTarget.files ?? []);
+        if (selectedFiles.length === 0) {
+            return;
+        }
+        const { accepted, rejections } = validateFiles(selectedFiles, {
+            accept,
+            minSize,
+            maxSize,
+            maxFiles,
+            multiple
+        });
+        setFiles(accepted);
+        onChange?.(accepted);
+        if (rejections.length > 0) {
+            onReject?.(rejections);
+        }
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openPicker();
+        }
+    };
+    const handleClear = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        if (localRef.current) {
+            localRef.current.value = "";
+        }
+        setFiles([]);
+        onChange?.([]);
+    };
+    const field = (_jsxs("div", { className: cx("relative w-full", classes.root), children: [_jsx("input", { ...props, id: _id, ref: mergedRef, type: "file", accept: accept, multiple: multiple, disabled: disabled, required: required, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, className: "pointer-events-none absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 opacity-0", onClick: (event) => {
+                    event.currentTarget.value = "";
+                }, onChange: handleInputChange }), _jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, className: cx("w-full flex items-center gap-2 transition-all", "focus-visible:border-[var(--refraktor-primary)]", "select-none", getSize(size), getVariant(variant), getRadius(radius), error && "border-[var(--refraktor-colors-red-6)]", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", classes.trigger, className), onClick: openPicker, onKeyDown: handleTriggerKeyDown, children: [_jsx("span", { className: cx("min-w-0 flex-1 truncate", classes.value, hasValue
+                            ? cx("text-[var(--refraktor-text)]", classes.files)
+                            : cx("text-[var(--refraktor-text-tertiary)]", classes.placeholder)), children: hasValue ? summary : resolvedPlaceholder }), clearable && hasValue && !disabled && (_jsx("button", { type: "button", className: cx("inline-flex h-4 w-4 items-center justify-center rounded-full border-0 bg-transparent p-0", "text-[var(--refraktor-text-secondary)] transition-colors hover:text-[var(--refraktor-text)]", classes.clear), "aria-label": files.length > 1 ? "Clear files" : "Clear file", onClick: handleClear, children: _jsx(XIcon, { size: 12 }) }))] })] }));
+    if (!hasWrapper) {
+        return field;
+    }
+    return (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: _id, children: field }));
+});
+FileInput.displayName = "@refraktor/core/FileInput";
+FileInput.configure = createComponentConfig();
+FileInput.classNames = createClassNamesConfig();
+export default FileInput;

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

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

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

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

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import FileInput from "./file-input";
+const createFile = (name, type, size) => new File([new Uint8Array(size)], name, { type });
+describe("@refraktor/core/FileInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(_jsx(FileInput, { label: "Documents", description: "Upload PDF files", error: "At least one file is required" }));
+        const input = screen.getByLabelText("Documents");
+        expect(input).toHaveAttribute("type", "file");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Upload PDF files")).toBeInTheDocument();
+        expect(screen.getByText("At least one file is required")).toBeInTheDocument();
+    });
+    it("handles single file selection", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(FileInput, { label: "Upload", onChange: onChange }));
+        const input = screen.getByLabelText("Upload");
+        const file = new File(["hello"], "hello.txt", { type: "text/plain" });
+        await user.upload(input, file);
+        expect(onChange).toHaveBeenLastCalledWith([file]);
+        expect(screen.getByText("hello.txt")).toBeInTheDocument();
+    });
+    it("enforces max files in multiple mode", async () => {
+        const user = userEvent.setup({ applyAccept: false });
+        const onChange = vi.fn();
+        const onReject = vi.fn();
+        await render(_jsx(FileInput, { label: "Attachments", multiple: true, maxFiles: 2, onChange: onChange, onReject: onReject }));
+        const input = screen.getByLabelText("Attachments");
+        const first = createFile("first.txt", "text/plain", 2);
+        const second = createFile("second.txt", "text/plain", 3);
+        const third = createFile("third.txt", "text/plain", 4);
+        await user.upload(input, [first, second, third]);
+        expect(onChange).toHaveBeenLastCalledWith([first, second]);
+        expect(onReject).toHaveBeenCalledWith(expect.arrayContaining([
+            expect.objectContaining({
+                file: third,
+                code: "too-many-files"
+            })
+        ]));
+    });
+    it("rejects invalid type and invalid size files", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const onReject = vi.fn();
+        await render(_jsx(FileInput, { label: "Media", multiple: true, accept: "image/*,.pdf", minSize: 2, maxSize: 4, onChange: onChange, onReject: onReject }));
+        const input = screen.getByLabelText("Media");
+        const valid = createFile("photo.png", "image/png", 3);
+        const invalidType = createFile("script.js", "application/javascript", 3);
+        const tooSmall = createFile("tiny.png", "image/png", 1);
+        const tooLarge = createFile("large.pdf", "application/pdf", 6);
+        await user.upload(input, [valid, invalidType, tooSmall, tooLarge]);
+        expect(onChange).toHaveBeenLastCalledWith([valid]);
+        const rejectionPayload = onReject.mock.calls[onReject.mock.calls.length - 1]?.[0] ?? [];
+        const rejectionCodes = rejectionPayload.map((item) => item.code);
+        expect(rejectionCodes).toEqual(expect.arrayContaining([
+            "file-too-small",
+            "file-too-large"
+        ]));
+    });
+    it("clears selected files", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(FileInput, { label: "Receipt", onChange: onChange }));
+        const input = screen.getByLabelText("Receipt");
+        const file = createFile("receipt.pdf", "application/pdf", 3);
+        await user.upload(input, file);
+        const clearButton = screen.getByRole("button", { name: "Clear file" });
+        await user.click(clearButton);
+        expect(onChange).toHaveBeenLastCalledWith([]);
+        expect(screen.getByText("Select file")).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,46 @@
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import type { InputProps } from "../input";
+export type FileInputRejectCode = "invalid-type" | "file-too-large" | "file-too-small" | "too-many-files";
+export interface FileInputRejection {
+    /** Rejected file */
+    file: File;
+    /** Rejection reason code */
+    code: FileInputRejectCode;
+    /** Human-readable rejection reason */
+    message: string;
+}
+export type FileInputClassNames = {
+    root?: string;
+    trigger?: string;
+    value?: string;
+    placeholder?: string;
+    files?: string;
+    clear?: string;
+};
+export interface FileInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "leftSection" | "rightSection"> {
+    /** Placeholder shown when no files are selected */
+    placeholder?: string;
+    /** Whether to show clear button when value exists @default `true` */
+    clearable?: boolean;
+    /** Maximum allowed file size in bytes */
+    maxSize?: number;
+    /** Minimum allowed file size in bytes */
+    minSize?: number;
+    /** Maximum allowed number of files */
+    maxFiles?: number;
+    /** Callback called with accepted files */
+    onChange?: (files: File[]) => void;
+    /** Callback called with rejected files */
+    onReject?: (rejections: FileInputRejection[]) => void;
+    /** Used for styling different parts of the component */
+    classNames?: FileInputClassNames;
+}
+export interface FileInputFactoryPayload extends FactoryPayload {
+    props: FileInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<FileInputProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<FileInputClassNames>>;
+    };
+}
+//# sourceMappingURL=file-input.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/file-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GACzB,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,CAAC;AAEvB,MAAM,WAAW,kBAAkB;IAC/B,oBAAoB;IACpB,IAAI,EAAE,IAAI,CAAC;IAEX,4BAA4B;IAC5B,IAAI,EAAE,mBAAmB,CAAC;IAE1B,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cACb,SAAQ,IAAI,CACR,UAAU,EACR,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,aAAa,GACb,cAAc,CACnB;IACD,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAEnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAEtD,wDAAwD;IACxD,UAAU,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC3D,KAAK,EAAE,cAAc,CAAC;IACtB,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC;QACpE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,mBAAmB,CAAC,CACrD,CAAC;KACL,CAAC;CACL"}

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

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

package/build/components/file-input/file-input.utils.d.ts

@@ -0,0 +1,11 @@
+import { FileInputRejection, FileInputProps } from "./file-input.types";
+type ValidationOptions = Pick<FileInputProps, "accept" | "maxFiles" | "maxSize" | "minSize" | "multiple">;
+type ValidationResult = {
+    accepted: File[];
+    rejections: FileInputRejection[];
+};
+export declare const matchesAccept: (file: File, accept?: string) => boolean;
+export declare const validateFiles: (files: File[], { accept, minSize, maxSize, maxFiles, multiple }: ValidationOptions) => ValidationResult;
+export declare const formatFileSummary: (files: File[]) => string;
+export {};
+//# sourceMappingURL=file-input.utils.d.ts.map

package/build/components/file-input/file-input.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.utils.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/file-input.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,kBAAkB,EAClB,cAAc,EACjB,MAAM,oBAAoB,CAAC;AAE5B,KAAK,iBAAiB,GAAG,IAAI,CACzB,cAAc,EACd,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAC7D,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjB,UAAU,EAAE,kBAAkB,EAAE,CAAC;CACpC,CAAC;AAQF,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI,EAAE,SAAS,MAAM,KAAG,OAgC3D,CAAC;AAEF,eAAO,MAAM,aAAa,GACtB,OAAO,IAAI,EAAE,EACb,kDAAkD,iBAAiB,KACpE,gBA0DF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,IAAI,EAAE,KAAG,MAUjD,CAAC"}

package/build/components/file-input/file-input.utils.js

@@ -0,0 +1,67 @@
+const createRejection = (file, code, message) => ({ file, code, message });
+export const matchesAccept = (file, accept) => {
+    if (!accept) {
+        return true;
+    }
+    const tokens = accept
+        .split(",")
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean);
+    if (tokens.length === 0) {
+        return true;
+    }
+    const fileType = file.type.toLowerCase();
+    const fileName = file.name.toLowerCase();
+    return tokens.some((token) => {
+        if (token === "*/*") {
+            return true;
+        }
+        if (token.startsWith(".")) {
+            return fileName.endsWith(token);
+        }
+        if (token.endsWith("/*")) {
+            return fileType.startsWith(token.slice(0, -1));
+        }
+        return fileType === token;
+    });
+};
+export const validateFiles = (files, { accept, minSize, maxSize, maxFiles, multiple }) => {
+    const accepted = [];
+    const rejections = [];
+    const isMinSizeDefined = typeof minSize === "number" && minSize >= 0;
+    const isMaxSizeDefined = typeof maxSize === "number" && maxSize >= 0;
+    const maxAllowedFiles = typeof maxFiles === "number"
+        ? Math.max(0, Math.floor(maxFiles))
+        : multiple
+            ? Number.POSITIVE_INFINITY
+            : 1;
+    files.forEach((file, index) => {
+        if (index >= maxAllowedFiles) {
+            rejections.push(createRejection(file, "too-many-files", `Only ${maxAllowedFiles} file${maxAllowedFiles === 1 ? "" : "s"} allowed`));
+            return;
+        }
+        if (!matchesAccept(file, accept)) {
+            rejections.push(createRejection(file, "invalid-type", "File type is not allowed"));
+            return;
+        }
+        if (isMinSizeDefined && file.size < minSize) {
+            rejections.push(createRejection(file, "file-too-small", `File is smaller than ${minSize} bytes`));
+            return;
+        }
+        if (isMaxSizeDefined && file.size > maxSize) {
+            rejections.push(createRejection(file, "file-too-large", `File exceeds ${maxSize} bytes`));
+            return;
+        }
+        accepted.push(file);
+    });
+    return { accepted, rejections };
+};
+export const formatFileSummary = (files) => {
+    if (files.length === 0) {
+        return "";
+    }
+    if (files.length === 1) {
+        return files[0].name;
+    }
+    return `${files.length} files selected`;
+};

package/build/components/file-input/file-input.utils.test.d.ts

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

package/build/components/file-input/file-input.utils.test.d.ts.map

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

package/build/components/file-input/file-input.utils.test.js

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { matchesAccept, validateFiles } from "./file-input.utils";
+const createFile = (name, type, size) => new File([new Uint8Array(size)], name, { type });
+describe("@refraktor/core/FileInput utils", () => {
+    it("matches files against accept rules", () => {
+        const image = createFile("avatar.png", "image/png", 3);
+        const pdf = createFile("sheet.pdf", "application/pdf", 3);
+        expect(matchesAccept(image, "image/*")).toBe(true);
+        expect(matchesAccept(pdf, "image/*")).toBe(false);
+        expect(matchesAccept(pdf, ".pdf")).toBe(true);
+    });
+    it("rejects invalid file types", () => {
+        const image = createFile("avatar.png", "image/png", 3);
+        const script = createFile("script.js", "application/javascript", 3);
+        const result = validateFiles([image, script], {
+            multiple: true,
+            accept: "image/*"
+        });
+        expect(result.accepted).toEqual([image]);
+        expect(result.rejections).toEqual(expect.arrayContaining([
+            expect.objectContaining({
+                file: script,
+                code: "invalid-type"
+            })
+        ]));
+    });
+});

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

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

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

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

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

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

package/build/components/for/for.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from "react";
+import type { ForProps } from "./for.types";
+declare const For: {
+    <T>({ each, children, fallback, keyExtractor }: ForProps<T>): JSX.Element | null;
+    displayName: string;
+};
+export default For;
+//# sourceMappingURL=for.d.ts.map

package/build/components/for/for.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"for.d.ts","sourceRoot":"","sources":["../../../src/components/for/for.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAc5C,QAAA,MAAM,GAAG;KAAI,CAAC,8CAKX,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI;;CA2BlC,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/build/components/for/for.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+const normalize = (collection) => {
+    if (!collection) {
+        return [];
+    }
+    if (Array.isArray(collection)) {
+        return collection.slice();
+    }
+    return Array.from(collection);
+};
+const For = ({ each, children, fallback = null, keyExtractor }) => {
+    const items = normalize(each);
+    if (items.length === 0) {
+        return fallback === null ? null : _jsx(_Fragment, { children: fallback });
+    }
+    const lastIndex = items.length - 1;
+    return (_jsx(_Fragment, { children: items.map((item, index) => {
+            const meta = {
+                index,
+                length: items.length,
+                isFirst: index === 0,
+                isLast: index === lastIndex,
+                previous: index > 0 ? items[index - 1] : undefined,
+                next: index < lastIndex ? items[index + 1] : undefined
+            };
+            const key = keyExtractor?.(item, index) ?? index;
+            return _jsx(Fragment, { children: children(item, meta) }, key);
+        }) }));
+};
+For.displayName = "@refraktor/core/For";
+export default For;

package/build/components/for/for.test.d.ts

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

package/build/components/for/for.test.d.ts.map

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

package/build/components/for/for.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "../../vitest";
+import For from "./for";
+describe("@refraktor/core/For", () => {
+    it("renders fallback for empty collections", async () => {
+        const children = vi.fn(() => _jsx("span", { children: "Should not render" }));
+        await render(_jsx(For, { each: [], fallback: _jsx("span", { children: "No items" }), children: children }));
+        expect(screen.getByText("No items")).toBeInTheDocument();
+        expect(children).not.toHaveBeenCalled();
+    });
+    it("renders nothing when collection is empty and fallback is not set", async () => {
+        const { container } = await render(_jsx(For, { each: [], children: () => _jsx("span", { children: "Should not render" }) }));
+        expect(container).toBeEmptyDOMElement();
+    });
+    it("passes item metadata to children", async () => {
+        await render(_jsx(For, { each: ["alpha", "beta", "gamma"], children: (item, meta) => (_jsxs("div", { "data-testid": item, children: [item, ":", meta.index, ":", meta.length, ":", String(meta.isFirst), ":", String(meta.isLast), ":", meta.previous ?? "none", ":", meta.next ?? "none"] })) }));
+        expect(screen.getByTestId("alpha")).toHaveTextContent("alpha:0:3:true:false:none:beta");
+        expect(screen.getByTestId("beta")).toHaveTextContent("beta:1:3:false:false:alpha:gamma");
+        expect(screen.getByTestId("gamma")).toHaveTextContent("gamma:2:3:false:true:beta:none");
+    });
+    it("supports iterable collections and calls key extractor", async () => {
+        const values = new Set(["one", "two"]);
+        const keyExtractor = vi.fn((item) => item);
+        await render(_jsx(For, { each: values, keyExtractor: keyExtractor, children: (item) => _jsx("span", { children: item }) }));
+        expect(screen.getByText("one")).toBeInTheDocument();
+        expect(screen.getByText("two")).toBeInTheDocument();
+        expect(keyExtractor).toHaveBeenNthCalledWith(1, "one", 0);
+        expect(keyExtractor).toHaveBeenNthCalledWith(2, "two", 1);
+    });
+});

package/build/components/for/for.types.d.ts

@@ -0,0 +1,33 @@
+import { Key, ReactNode } from "react";
+/**
+ * Supported collections for the For component. Accepts arrays, array-likes and iterables.
+ */
+export type ForList<T> = readonly T[] | Iterable<T> | ArrayLike<T>;
+/**
+ * Metadata passed to the render function for each item in the collection.
+ */
+export type ForRenderMeta<T> = {
+    /** Index of the current item in the collection. */
+    index: number;
+    /** Total number of items in the collection. */
+    length: number;
+    /** Indicates whether the current item is the first in the collection. */
+    isFirst: boolean;
+    /** Indicates whether the current item is the last in the collection. */
+    isLast: boolean;
+    /** Previous item in the collection if it exists. */
+    previous?: T;
+    /** Next item in the collection if it exists. */
+    next?: T;
+};
+export type ForProps<T> = {
+    /** Collection that should be iterated. */
+    each?: ForList<T> | null;
+    /** Render function that receives the current item and helpful metadata. */
+    children: (item: T, meta: ForRenderMeta<T>) => ReactNode;
+    /** Node rendered when the collection is empty. */
+    fallback?: ReactNode;
+    /** Optional function to derive a stable React key for each item. */
+    keyExtractor?: (item: T, index: number) => Key;
+};
+//# sourceMappingURL=for.types.d.ts.map

package/build/components/for/for.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"for.types.d.ts","sourceRoot":"","sources":["../../../src/components/for/for.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,SAAS,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC3B,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IAEf,yEAAyE;IACzE,OAAO,EAAE,OAAO,CAAC;IAEjB,wEAAwE;IACxE,MAAM,EAAE,OAAO,CAAC;IAEhB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEb,gDAAgD;IAChD,IAAI,CAAC,EAAE,CAAC,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACzB,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACzD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;CAClD,CAAC"}

package/build/components/for/for.types.js

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

package/build/components/for/index.d.ts

@@ -0,0 +1,3 @@
+export { default as For } from "./for";
+export type { ForList, ForProps, ForRenderMeta } from "./for.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/for/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/for/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/build/components/for/index.js

@@ -0,0 +1 @@
+export { default as For } from "./for";

package/build/components/index.d.ts

@@ -4,19 +4,25 @@ export * from "./badge";
 export * from "./breadcrumbs";
 export * from "./button";
 export * from "./checkbox";
+export * from "./chip";
 export * from "./color-swatch";
 export * from "./drawer";
+export * from "./file-input";
+export * from "./for";
 export * from "./input";
 export * from "./loader";
 export * from "./modal";
 export * from "./menu";
 export * from "./number-input";
+export * from "./password-input";
+export * from "./pin-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./portal";
 export * from "./progress";
 export * from "./progress-circle";
 export * from "./radio";
+export * from "./scroll-area";
 export * from "./select";
 export * from "./segmented-control";
 export * from "./slider";

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/build/components/index.js

@@ -4,19 +4,25 @@ export * from "./badge";
 export * from "./breadcrumbs";
 export * from "./button";
 export * from "./checkbox";
+export * from "./chip";
 export * from "./color-swatch";
 export * from "./drawer";
+export * from "./file-input";
+export * from "./for";
 export * from "./input";
 export * from "./loader";
 export * from "./modal";
 export * from "./menu";
 export * from "./number-input";
+export * from "./password-input";
+export * from "./pin-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./portal";
 export * from "./progress";
 export * from "./progress-circle";
 export * from "./radio";
+export * from "./scroll-area";
 export * from "./select";
 export * from "./segmented-control";
 export * from "./slider";

package/build/components/modal/index.d.ts

@@ -3,6 +3,7 @@ export { ModalRoot } from "./modal-root";
 export { ModalOverlay } from "./modal-overlay";
 export { ModalContent } from "./modal-content";
 export { ModalHeader } from "./modal-header";
+export { ModalBody } from "./modal-body";
 export { ModalClose } from "./modal-close";
-export type { ModalProps, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalHeaderProps, ModalCloseProps, ModalClassNames } from "./modal.types";
+export type { ModalProps, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalHeaderProps, ModalBodyProps, ModalCloseProps, ModalClassNames, ModalSize } from "./modal.types";
 //# sourceMappingURL=index.d.ts.map

package/build/components/modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACR,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,eAAe,EAClB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACR,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,eAAe,EACf,SAAS,EACZ,MAAM,eAAe,CAAC"}

package/build/components/modal/index.js

@@ -3,4 +3,5 @@ export { ModalRoot } from "./modal-root";
 export { ModalOverlay } from "./modal-overlay";
 export { ModalContent } from "./modal-content";
 export { ModalHeader } from "./modal-header";
+export { ModalBody } from "./modal-body";
 export { ModalClose } from "./modal-close";

package/build/components/modal/modal-body/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalBody } from "./modal-body";
+//# sourceMappingURL=index.d.ts.map

package/build/components/modal/modal-body/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-body/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/build/components/modal/modal-body/index.js

@@ -0,0 +1 @@
+export { default as ModalBody } from "./modal-body";

package/build/components/modal/modal-body/modal-body.d.ts

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

package/build/components/modal/modal-body/modal-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-body.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-body/modal-body.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,SAAS,gEAmBd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/build/components/modal/modal-body/modal-body.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useModalContext } from "../modal.context";
+const ModalBody = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { getStyles } = useModalContext();
+    return (_jsx("div", { ref: ref, className: cx("overflow-y-auto", getStyles("body"), className), ...props, children: children }));
+});
+ModalBody.displayName = "@refraktor/core/Modal.Body";
+export default ModalBody;

package/build/components/modal/modal-content/modal-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-content/modal-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEA4DjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-content/modal-content.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAa,MAAM,gBAAgB,CAAC;AAWvE,QAAA,MAAM,YAAY,mEA+FjB,CAAC;AAIF,eAAe,YAAY,CAAC"}