@nomos-ui/form 0.0.18 → 0.0.19

package/dist/components/file-input.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Represents a single file entry managed by `FileInput`.
+ *
+ * The `id` is a stable random key generated on ingestion so React
+ * reconciliation stays correct even when the same filename is added twice.
+ */
+export type FileInputFile = {
+    /** The native browser `File` object. */
+    file: File;
+    /**
+     * Stable random identifier assigned when the file is added.
+     * Use this as the React `key` and to target a specific file for removal.
+     */
+    id: string;
+};
+export type FileInputProps = {
+    /** Additional class name for the root container. */
+    className?: string;
+    /** Additional class name applied to the dashed dropzone area. */
+    dropzoneClassName?: string;
+    /** Label text rendered above the dropzone. */
+    label?: string;
+    /** Additional class name for the label row wrapper. */
+    labelClassName?: string;
+    /** Marks the field as required for native form validation. */
+    required?: boolean;
+    /**
+     * When `true`, renders a red asterisk next to the label.
+     * Only has an effect when `required` is also `true`.
+     */
+    showRequiredSign?: boolean;
+    /** Helper text rendered below the file list (hidden when `error` is set). */
+    tip?: string;
+    /** Validation error message rendered below the file list in destructive color. */
+    error?: string;
+    /**
+     * Accepted file types forwarded directly to the native `<input accept>`.
+     * Supports MIME types (e.g. `"image/*"`) and extensions (e.g. `".pdf,.docx"`).
+     */
+    accept?: string;
+    /**
+     * Human-readable format list shown inside the dropzone subtitle.
+     * Keep in sync with `accept` but written for end-users (e.g. `"JPEG, PNG, PDF"`).
+     */
+    acceptLabel?: string;
+    /**
+     * Maximum allowed file size **in bytes**.
+     * Files that exceed this limit are rejected — `onError` is called and the
+     * file is NOT added to the list.
+     *
+     * @example
+     * // 50 MB limit
+     * maxSize={50 * 1024 * 1024}
+     */
+    maxSize?: number;
+    /**
+     * Allow the user to pick or drop more than one file at a time.
+     * When `false` (default) a new selection replaces the existing file.
+     */
+    multiple?: boolean;
+    /**
+     * Controlled list of currently accepted files.
+     * Pass an empty array (`[]`) to represent an empty / reset state.
+     */
+    value?: FileInputFile[];
+    /**
+     * Fired whenever the file list changes — either a file was added or removed.
+     *
+     * @param files - The complete updated file list.
+     */
+    onChange?: (files: FileInputFile[]) => void;
+    /**
+     * Fired when a file is rejected before being added to the list.
+     * Common reasons: file exceeds `maxSize`.
+     *
+     * @param message - A human-readable description of why the file was rejected.
+     */
+    onError?: (message: string) => void;
+    /** Disables the dropzone click / drag and all per-file remove buttons. */
+    disabled?: boolean;
+};
+/**
+ * A file-upload input that follows the shadcn component ideology.
+ *
+ * Features:
+ * - Semantic design tokens (`foreground`, `muted-foreground`, `destructive`, …)
+ * - Label + required sign + tip + error pattern identical to `Input` / `Textarea`
+ * - Drag-and-drop with a clear visual drag state
+ * - Per-file rows listing name, size, and a remove button
+ * - Single or multiple file support
+ *
+ * @example
+ * ```tsx
+ * const [files, setFiles] = React.useState<FileInputFile[]>([]);
+ *
+ * <FileInput
+ *   label="Resume"
+ *   required
+ *   showRequiredSign
+ *   accept=".pdf,.doc,.docx"
+ *   acceptLabel="PDF, DOC, DOCX"
+ *   maxSize={50 * 1024 * 1024}
+ *   tip="Max 50 MB per file."
+ *   value={files}
+ *   onChange={setFiles}
+ *   onError={(msg) => toast.error(msg)}
+ * />
+ * ```
+ */
+export default function FileInput({ className, dropzoneClassName, label, labelClassName, required, showRequiredSign, tip, error, accept, acceptLabel, maxSize, multiple, value, onChange, onError, disabled, }: FileInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-input.d.ts.map

package/dist/components/file-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../src/components/file-input.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,wCAAwC;IACxC,IAAI,EAAE,IAAI,CAAC;IACX;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC5C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,SAAS,EACT,iBAAiB,EACjB,KAAK,EACL,cAAc,EACd,QAAgB,EAChB,gBAAwB,EACxB,GAAG,EACH,KAAK,EACL,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,KAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAgB,GACjB,EAAE,cAAc,2CAyJhB"}

package/dist/components/file-input.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FileInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../utils/shadcn-ui/utils");
+/** Converts a raw byte count into a human-readable string (B / KB / MB). */
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/** Generates a short random alphanumeric ID used as a stable React key. */
+function generateId() {
+    return Math.random().toString(36).slice(2, 9);
+}
+/**
+ * A file-upload input that follows the shadcn component ideology.
+ *
+ * Features:
+ * - Semantic design tokens (`foreground`, `muted-foreground`, `destructive`, …)
+ * - Label + required sign + tip + error pattern identical to `Input` / `Textarea`
+ * - Drag-and-drop with a clear visual drag state
+ * - Per-file rows listing name, size, and a remove button
+ * - Single or multiple file support
+ *
+ * @example
+ * ```tsx
+ * const [files, setFiles] = React.useState<FileInputFile[]>([]);
+ *
+ * <FileInput
+ *   label="Resume"
+ *   required
+ *   showRequiredSign
+ *   accept=".pdf,.doc,.docx"
+ *   acceptLabel="PDF, DOC, DOCX"
+ *   maxSize={50 * 1024 * 1024}
+ *   tip="Max 50 MB per file."
+ *   value={files}
+ *   onChange={setFiles}
+ *   onError={(msg) => toast.error(msg)}
+ * />
+ * ```
+ */
+function FileInput({ className, dropzoneClassName, label, labelClassName, required = false, showRequiredSign = false, tip, error, accept, acceptLabel, maxSize, multiple = false, value = [], onChange, onError, disabled = false, }) {
+    const inputRef = React.useRef(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    function processFiles(rawFiles) {
+        if (!rawFiles || disabled)
+            return;
+        const incoming = [];
+        Array.from(rawFiles).forEach((file) => {
+            if (maxSize && file.size > maxSize) {
+                onError?.(`"${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`);
+                return;
+            }
+            incoming.push({ file, id: generateId() });
+        });
+        if (!incoming.length)
+            return;
+        const next = multiple ? [...value, ...incoming] : [incoming[0]];
+        onChange?.(next);
+    }
+    function removeFile(id) {
+        onChange?.(value.filter((f) => f.id !== id));
+        if (inputRef.current)
+            inputRef.current.value = "";
+    }
+    function onDragOver(e) {
+        e.preventDefault();
+        if (!disabled)
+            setIsDragging(true);
+    }
+    function onDragLeave(e) {
+        e.preventDefault();
+        setIsDragging(false);
+    }
+    function onDrop(e) {
+        e.preventDefault();
+        setIsDragging(false);
+        processFiles(e.dataTransfer.files);
+    }
+    const hasFiles = value.length > 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("w-full space-y-1.5", className), children: [label && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-1", labelClassName), children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-bold text-foreground", children: label }), required && showRequiredSign && ((0, jsx_runtime_1.jsx)(lucide_react_1.AsteriskIcon, { className: "h-3 w-3 text-destructive" }))] })), (0, jsx_runtime_1.jsxs)("div", { onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)("relative flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors", "border-input bg-transparent", !disabled && "hover:border-ring/50 hover:bg-accent/40", isDragging && "border-ring bg-accent/60", error && "border-destructive", disabled && "cursor-not-allowed opacity-50", dropzoneClassName), children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", onChange: (e) => processFiles(e.target.files) }), (0, jsx_runtime_1.jsx)(lucide_react_1.CloudUploadIcon, { className: (0, utils_1.cn)("h-8 w-8 transition-colors", isDragging ? "text-ring" : "text-muted-foreground"), strokeWidth: 1.5 }), (0, jsx_runtime_1.jsxs)("div", { className: "pointer-events-none select-none space-y-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Choose a file or drag & drop it here" }), (acceptLabel || maxSize) && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted-foreground", children: [acceptLabel, maxSize ? `up to ${formatBytes(maxSize)}` : null]
+                                    .filter(Boolean)
+                                    .join(", ") }))] }), (0, jsx_runtime_1.jsx)("span", { className: "pointer-events-none select-none inline-flex items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-xs", children: "Browse File" })] }), hasFiles && ((0, jsx_runtime_1.jsx)("ul", { className: "space-y-2", children: value.map(({ file, id }) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex items-center gap-3 rounded-lg border border-input bg-background px-3 py-2.5 shadow-xs", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-input bg-muted", children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileIcon, { className: "h-4 w-4 text-muted-foreground" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: file.name }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted-foreground", children: formatBytes(file.size) })] }), !disabled && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => removeFile(id), className: "shrink-0 rounded-full p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `Remove ${file.name}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "h-4 w-4" }) }))] }, id))) })), tip && !error && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted-foreground tip-message", children: tip })), error && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-destructive error-message", children: ["*", error] }))] }));
+}
+//# sourceMappingURL=file-input.js.map

package/dist/components/file-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../src/components/file-input.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-file-input.d.ts

@@ -0,0 +1,44 @@
+import { Control, FieldValues, Path } from "react-hook-form";
+import { FileInputProps } from "./file-input";
+/**
+ * Props for the `FormFileInput` component with type-safe form integration.
+ *
+ * Omits the props that are managed internally by React Hook Form
+ * (`value`, `onChange`, `onError`, `error`) and adds the RHF-specific ones.
+ */
+export type FormFileInputProps<TFieldValues extends FieldValues> = Omit<FileInputProps, "value" | "onChange" | "onError" | "error"> & {
+    /** React Hook Form control instance. */
+    control: Control<TFieldValues>;
+    /** The name of the field (type-safe, must match the form schema). */
+    name: Path<TFieldValues>;
+};
+/**
+ * A file-upload field that integrates `FileInput` with React Hook Form.
+ *
+ * - Wires `value`, `onChange`, and `error` automatically via `Controller`
+ * - File rejection errors (e.g. size exceeded) are forwarded to RHF via `setError`
+ * - Supports the `required` rule out of the box
+ *
+ * @example
+ * ```tsx
+ * type FormData = {
+ *   resume: FileInputFile[];
+ * };
+ *
+ * const { control } = useForm<FormData>({ defaultValues: { resume: [] } });
+ *
+ * <FormFileInput
+ *   control={control}
+ *   name="resume"
+ *   label="Resume"
+ *   required
+ *   showRequiredSign
+ *   accept=".pdf,.doc,.docx"
+ *   acceptLabel="PDF, DOC, DOCX"
+ *   maxSize={50 * 1024 * 1024}
+ *   tip="Max 50 MB per file."
+ * />
+ * ```
+ */
+export default function FormFileInput<TFieldValues extends FieldValues>({ control, name, ...props }: FormFileInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=form-file-input.d.ts.map

package/dist/components/form-file-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-file-input.d.ts","sourceRoot":"","sources":["../../src/components/form-file-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGzD;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,CAAC,YAAY,SAAS,WAAW,IAAI,IAAI,CACrE,cAAc,EACd,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAC3C,GAAG;IACF,wCAAwC;IACxC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,qEAAqE;IACrE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,YAAY,SAAS,WAAW,EAAE,EACtE,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,YAAY,CAAC,2CAwBlC"}

package/dist/components/form-file-input.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FormFileInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const file_input_1 = __importDefault(require("./file-input"));
+const form_helpers_1 = require("../utils/helpers/form.helpers");
+/**
+ * A file-upload field that integrates `FileInput` with React Hook Form.
+ *
+ * - Wires `value`, `onChange`, and `error` automatically via `Controller`
+ * - File rejection errors (e.g. size exceeded) are forwarded to RHF via `setError`
+ * - Supports the `required` rule out of the box
+ *
+ * @example
+ * ```tsx
+ * type FormData = {
+ *   resume: FileInputFile[];
+ * };
+ *
+ * const { control } = useForm<FormData>({ defaultValues: { resume: [] } });
+ *
+ * <FormFileInput
+ *   control={control}
+ *   name="resume"
+ *   label="Resume"
+ *   required
+ *   showRequiredSign
+ *   accept=".pdf,.doc,.docx"
+ *   acceptLabel="PDF, DOC, DOCX"
+ *   maxSize={50 * 1024 * 1024}
+ *   tip="Max 50 MB per file."
+ * />
+ * ```
+ */
+function FormFileInput({ control, name, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, rules: {
+            required: props.required ? "Required" : false,
+        }, render: ({ field: { onChange, value }, formState: { errors } }) => ((0, jsx_runtime_1.jsx)(file_input_1.default, { ...props, value: value ?? [], onChange: onChange, onError: (errorMessage) => {
+                control.setError(name, {
+                    type: "manual",
+                    message: errorMessage,
+                });
+            }, error: (0, form_helpers_1.getNestedErrorMessage)(errors, name) })) }));
+}
+//# sourceMappingURL=form-file-input.js.map

package/dist/components/form-file-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-file-input.js","sourceRoot":"","sources":["../../src/components/form-file-input.tsx"],"names":[],"mappings":";;;;;AAgDA,gCA4BC;;AA5ED,qDAAyE;AACzE,8DAAyD;AACzD,gEAAsE;AAkBtE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAwB,aAAa,CAAmC,EACtE,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACyB;IACjC,OAAO,CACL,uBAAC,4BAAU,IACT,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK;SAC9C,EACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CACjE,uBAAC,oBAAS,OACJ,KAAK,EACT,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,YAAoB,EAAE,EAAE;gBAChC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;oBACrB,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE,YAAY;iBACtB,CAAC,CAAC;YACL,CAAC,EACD,KAAK,EAAE,IAAA,oCAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,GAC1C,CACH,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/exports/index.d.ts

@@ -7,9 +7,13 @@ import Textarea from "../components/textarea";
 import FormTextarea from "../components/form-textarea";
 import FormImageInput from "../components/form-image-input";
 import ImageInput from "../components/image-input";
-export { Button, FormInput, Input, Select, FormSelect, Textarea, FormTextarea, ImageInput, FormImageInput, };
-export type { SelectOption, SelectProps, FormSelectProps };
+import FileInput, { FileInputProps, FileInputFile } from "../components/file-input";
+import FormFileInput, { FormFileInputProps } from "../components/form-file-input";
+export { Button, FormInput, Input, Select, FormSelect, Textarea, FormTextarea, ImageInput, FormImageInput, FileInput, FormFileInput, };
+export type { SelectOption, SelectProps, FormSelectProps, FormFileInputProps, FileInputProps, FileInputFile, };
 export * from "../components/input";
 export * from "../components/form-input";
 export * from "../components/button";
+export * from "../components/file-input";
+export * from "../components/form-file-input";
 //# sourceMappingURL=index.d.ts.map

package/dist/exports/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,UAAU,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,cAAc,GACf,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;AAC3D,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,UAAU,MAAM,2BAA2B,CAAC;AACnD,OAAO,SAAS,EAAE,EAChB,cAAc,EACd,aAAa,EACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,aAAa,EAAE,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,GACd,CAAC;AACF,YAAY,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,GACd,CAAC;AACF,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC"}

package/dist/exports/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormImageInput = exports.ImageInput = exports.FormTextarea = exports.Textarea = exports.FormSelect = exports.Select = exports.Input = exports.FormInput = exports.Button = void 0;
+exports.FormFileInput = exports.FileInput = exports.FormImageInput = exports.ImageInput = exports.FormTextarea = exports.Textarea = exports.FormSelect = exports.Select = exports.Input = exports.FormInput = exports.Button = void 0;
 const button_1 = __importDefault(require("../components/button"));
 exports.Button = button_1.default;
 const form_input_1 = __importDefault(require("../components/form-input"));
@@ -36,7 +36,13 @@ const form_image_input_1 = __importDefault(require("../components/form-image-inp
 exports.FormImageInput = form_image_input_1.default;
 const image_input_1 = __importDefault(require("../components/image-input"));
 exports.ImageInput = image_input_1.default;
+const file_input_1 = __importDefault(require("../components/file-input"));
+exports.FileInput = file_input_1.default;
+const form_file_input_1 = __importDefault(require("../components/form-file-input"));
+exports.FormFileInput = form_file_input_1.default;
 __exportStar(require("../components/input"), exports);
 __exportStar(require("../components/form-input"), exports);
 __exportStar(require("../components/button"), exports);
+__exportStar(require("../components/file-input"), exports);
+__exportStar(require("../components/form-file-input"), exports);
 //# sourceMappingURL=index.js.map

package/dist/exports/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,kEAA0C;AAWxC,iBAXK,gBAAM,CAWL;AAVR,0EAAiD;AAW/C,oBAXK,oBAAS,CAWL;AAVX,gEAAwC;AAWtC,gBAXK,eAAK,CAWL;AAVP,kEAAyE;AAWvE,iBAXK,gBAAM,CAWL;AAVR,4EAAwE;AAWtE,qBAXK,qBAAU,CAWL;AAVZ,sEAA8C;AAW5C,mBAXK,kBAAQ,CAWL;AAVV,gFAAuD;AAWrD,uBAXK,uBAAY,CAWL;AAVd,sFAA4D;AAY1D,yBAZK,0BAAc,CAYL;AAXhB,4EAAmD;AAUjD,qBAVK,qBAAU,CAUL;AAIZ,sDAAoC;AACpC,2DAAyC;AACzC,uDAAqC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,kEAA0C;AAkBxC,iBAlBK,gBAAM,CAkBL;AAjBR,0EAAiD;AAkB/C,oBAlBK,oBAAS,CAkBL;AAjBX,gEAAwC;AAkBtC,gBAlBK,eAAK,CAkBL;AAjBP,kEAAyE;AAkBvE,iBAlBK,gBAAM,CAkBL;AAjBR,4EAAwE;AAkBtE,qBAlBK,qBAAU,CAkBL;AAjBZ,sEAA8C;AAkB5C,mBAlBK,kBAAQ,CAkBL;AAjBV,gFAAuD;AAkBrD,uBAlBK,uBAAY,CAkBL;AAjBd,sFAA4D;AAmB1D,yBAnBK,0BAAc,CAmBL;AAlBhB,4EAAmD;AAiBjD,qBAjBK,qBAAU,CAiBL;AAhBZ,0EAGkC;AAehC,oBAlBK,oBAAS,CAkBL;AAdX,oFAEuC;AAarC,wBAfK,yBAAa,CAeL;AAUf,sDAAoC;AACpC,2DAAyC;AACzC,uDAAqC;AACrC,2DAAyC;AACzC,gEAA8C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomos-ui/form",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "The Shadcn library for building robust React forms",
   "main": "dist/index.js",
   "module": "dist/exports/index.js",