@refraktor/core 0.0.3 → 0.0.4

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"}

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

@@ -1,14 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
+const sizeClasses = {
+    xs: "max-w-xs",
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    full: "max-w-full"
+};
 const ModalContent = factory(({ children, className, style, ...props }, ref) => {
     const { cx, getRadius } = useTheme();
-    const { modal, withinPortal, radius, transitionProps, headerId, contentRef, getStyles } = useModalContext();
+    const { modal, withinPortal, radius, size, centered, trapFocus, returnFocus, transitionProps, headerId, getStyles } = useModalContext();
     const setRefs = (node) => {
-        contentRef.current = node;
+        modal.refs.setFloating(node);
         if (typeof ref === "function") {
             ref(node);
         }
@@ -17,8 +25,8 @@ const ModalContent = factory(({ children, className, style, ...props }, ref) =>
         }
     };
     const { className: transitionClassName, ...resolvedTransitionProps } = transitionProps ?? {};
-    const content = (_jsx(Transition, { transition: "scale", duration: 150, mounted: modal.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 grid place-items-center pointer-events-none", transitionClassName), children: _jsx("div", { ref: setRefs, role: "dialog", "aria-modal": "true", "aria-labelledby": headerId, "data-opened": modal.opened, style: style, className: cx("pointer-events-auto relative z-50 w-full max-w-md", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md", getRadius(radius), getStyles("content"), className), ...props, children: children }) }));
-    return withinPortal ? _jsx(Portal, { children: content }) : content;
+    const content = (_jsx(Transition, { transition: "scale", duration: 150, mounted: modal.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 grid pointer-events-none", centered ? "place-items-center" : "items-start justify-center pt-12", transitionClassName), children: modal.opened ? (_jsx(FloatingFocusManager, { context: modal.context, modal: trapFocus, returnFocus: returnFocus, outsideElementsInert: false, children: _jsx("div", { ref: setRefs, "aria-labelledby": headerId, "data-opened": modal.opened, style: style, className: cx("pointer-events-auto relative z-50 w-full", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md", sizeClasses[size], getRadius(radius), getStyles("content"), className), ...modal.getFloatingProps(), ...props, children: children }) })) : (_jsx("div", { ref: setRefs, "aria-labelledby": headerId, "data-opened": modal.opened, style: style, className: cx("pointer-events-auto relative z-50 w-full", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md", sizeClasses[size], getRadius(radius), getStyles("content"), className), ...props, children: children })) }));
+    return withinPortal ? (_jsx(FloatingPortal, { children: content })) : (content);
 });
 ModalContent.displayName = "@refraktor/core/Modal.Content";
 export default ModalContent;

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

@@ -3,11 +3,11 @@ import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
 import { ModalClose } from "../modal-close";
 import { useModalContext } from "../modal.context";
-const ModalHeader = factory(({ children, className, id, text, withClose = true, ...props }, ref) => {
+const ModalHeader = factory(({ children, className, id, withClose = true, ...props }, ref) => {
     const { cx } = useTheme();
     const { headerId, getStyles } = useModalContext();
     const resolvedId = id ?? headerId;
-    return (_jsxs("div", { ref: ref, className: cx("mb-4 flex items-center justify-between", getStyles("header"), className), ...props, children: [_jsx("div", { id: resolvedId, className: "min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]", children: text ?? children }), withClose && (_jsx(ModalClose, { className: "static shrink-0 self-center" }))] }));
+    return (_jsxs("div", { ref: ref, className: cx("mb-4 flex items-center justify-between", getStyles("header"), className), ...props, children: [_jsx("div", { id: resolvedId, className: "min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]", children: children }), withClose && (_jsx(ModalClose, { className: "static shrink-0 self-center" }))] }));
 });
 ModalHeader.displayName = "@refraktor/core/Modal.Header";
 export default ModalHeader;

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

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

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
 const ModalOverlay = factory(({ closeOnClick = true, backgroundOpacity = 0.5, blur = 0, className, onMouseDown, style, ...props }, ref) => {
     const { cx } = useTheme();
-    const { modal, closeOnClickOutside, withinPortal, transitionProps, getStyles } = useModalContext();
+    const { modal, closeOnClickOutside, lockScroll, withinPortal, transitionProps, getStyles } = useModalContext();
     const blurValue = typeof blur === "number" ? `${blur}px` : blur;
     const backdropFilterValue = blurValue !== "0" && blurValue !== "0px"
         ? `blur(${blurValue})`
@@ -20,12 +20,12 @@ const ModalOverlay = factory(({ closeOnClick = true, backgroundOpacity = 0.5, bl
         }
         modal.close();
     };
-    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: modal.opened, ...transitionProps, children: _jsx("div", { ref: ref, "aria-hidden": "true", className: cx("fixed inset-0 z-40", getStyles("overlay"), className), style: {
+    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: modal.opened, ...transitionProps, children: _jsx(FloatingOverlay, { lockScroll: lockScroll, ref: ref, className: cx("z-40", getStyles("overlay"), className), style: {
                 backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
                 backdropFilter: backdropFilterValue,
                 ...style
             }, onMouseDown: handleMouseDown, ...props }) }));
-    return withinPortal ? (_jsx(Portal, { children: overlayContent })) : (overlayContent);
+    return withinPortal ? (_jsx(FloatingPortal, { children: overlayContent })) : (overlayContent);
 });
 ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";
 export default ModalOverlay;