@lerianstudio/sindarian-ui 1.2.0 → 1.3.0-beta.2

package/dist/components/ui/copy-field/index.js

@@ -0,0 +1,155 @@
+'use client';
+"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.CopyField = CopyField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const icon_button_1 = require("../../../components/ui/icon-button");
+const use_toast_1 = require("../../../hooks/use-toast");
+const DEFAULT_COPY_LABEL = 'Copied to clipboard!';
+const FALLBACK_COPY_LABEL = 'Copy not available — text selected, press Ctrl/Cmd+C';
+const COPIED_ICON_TIMEOUT = 1500;
+const isClipboardAvailable = () => typeof navigator !== 'undefined' &&
+    typeof navigator.clipboard?.writeText === 'function';
+const isClipboardReadable = () => typeof navigator !== 'undefined' &&
+    typeof navigator.clipboard?.readText === 'function';
+/**
+ * Wipes the clipboard, but only if it still holds `copiedValue` — the user may
+ * have copied something else in the meantime, and clobbering that would be
+ * worse than leaving the secret behind. Unverifiable (no `readText`, permission
+ * denied, unfocused document) means "leave it alone".
+ */
+const clearClipboardIfUnchanged = async (copiedValue) => {
+    if (!isClipboardReadable()) {
+        return;
+    }
+    try {
+        if ((await navigator.clipboard.readText()) !== copiedValue) {
+            return;
+        }
+        await navigator.clipboard.writeText('');
+    }
+    catch {
+        // Read or write refused; the clipboard stays as-is.
+    }
+};
+function CopyField({ value, label, masked = false, onCopyLabel, revealLabel = 'Show value', hideLabel = 'Hide value', valueLabel = 'Value to copy', clearClipboardAfter }) {
+    const { toast } = (0, use_toast_1.useToast)();
+    const generatedId = React.useId();
+    const inputId = `${generatedId}-copy-field`;
+    const inputRef = React.useRef(null);
+    const copiedTimerRef = React.useRef(null);
+    const clearTimerRef = React.useRef(null);
+    const [revealed, setRevealed] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const showAsText = !masked || revealed;
+    const copyAccessibleName = label ? `Copy ${label}` : 'Copy value';
+    React.useEffect(() => {
+        return () => {
+            if (copiedTimerRef.current) {
+                clearTimeout(copiedTimerRef.current);
+            }
+            // The clipboard-clear timer is deliberately *not* cancelled here: it
+            // touches no state (so it can't warn about an unmounted update) and the
+            // secret must still leave the clipboard when the dialog holding this
+            // field closes before the timeout elapses.
+        };
+    }, []);
+    const selectFieldText = () => {
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        // Reveal so the user can copy the selection manually. Flip the DOM `type`
+        // imperatively *before* select(): `setRevealed` is batched, so a plain
+        // state update would leave the input as type="password" at select() time,
+        // and React's subsequent type -> "text" re-render clears the selection —
+        // the fallback would then select nothing. We still push the state update so
+        // the re-render stays consistent with the DOM we just mutated.
+        if (masked) {
+            input.type = 'text';
+            setRevealed(true);
+        }
+        input.focus();
+        input.select();
+    };
+    const handleFallback = () => {
+        selectFieldText();
+        toast({ title: FALLBACK_COPY_LABEL });
+    };
+    const handleCopy = async () => {
+        if (!isClipboardAvailable()) {
+            handleFallback();
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(value);
+            toast({ variant: 'success', title: onCopyLabel ?? DEFAULT_COPY_LABEL });
+            setCopied(true);
+            if (copiedTimerRef.current) {
+                clearTimeout(copiedTimerRef.current);
+            }
+            copiedTimerRef.current = setTimeout(() => setCopied(false), COPIED_ICON_TIMEOUT);
+            // Only a confirmed write earns a clear — the fallback path never wrote to
+            // the clipboard, so it has nothing of ours to wipe. `value` is captured
+            // per copy so a later prop change can't make us clear the wrong string.
+            if (clearTimerRef.current) {
+                clearTimeout(clearTimerRef.current);
+            }
+            if (clearClipboardAfter !== undefined && clearClipboardAfter > 0) {
+                const copiedValue = value;
+                clearTimerRef.current = setTimeout(() => {
+                    void clearClipboardIfUnchanged(copiedValue);
+                }, clearClipboardAfter);
+            }
+        }
+        catch {
+            handleFallback();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow]", children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true, 
+                        // This field holds secrets: TOTP manual-entry secrets, recovery
+                        // codes. While masked it renders as type="password", which invites
+                        // browsers and password managers to autofill it or offer to SAVE its
+                        // value, and spellcheck can ship the text to a remote service.
+                        autoComplete: "off", spellCheck: false, "aria-label": label ? undefined : valueLabel, 
+                        // `min-w-0` lets this flex item shrink below its content width so a
+                        // long value (e.g. a UUID recovery code) scrolls inside the field
+                        // instead of overflowing its container. No `font-mono`: the value
+                        // inherits the app sans font (Inter) so it matches every other field.
+                        className: "text-input-foreground h-full min-w-0 flex-1 cursor-text border-none bg-transparent text-sm outline-none select-text focus:ring-0 focus:ring-offset-0" }), masked ? ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-pressed": revealed, "aria-label": revealed ? hideLabel : revealLabel, onClick: () => setRevealed((prev) => !prev), children: revealed ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, {}) })) : null, (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-label": copyAccessibleName, onClick: handleCopy, children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, {}) })] })] }));
+}

package/dist/components/ui/dialog/styles.css

@@ -9,11 +9,11 @@
   }
 
   .dialog-content {
-    @apply bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-8 border p-6 shadow-lg duration-200 sm:max-w-[425px] sm:rounded-lg;
+    @apply bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-8 border p-7 shadow-lg duration-200 sm:max-w-[425px] sm:rounded-lg;
   }
 
   .dialog-close {
-    @apply data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none;
+    @apply data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none;
   }
 
   .dialog-header {
@@ -25,7 +25,7 @@
   }
 
   .dialog-title {
-    @apply text-dialog-title-text text-lg font-bold leading-none tracking-tight;
+    @apply text-dialog-title-text text-lg leading-none font-bold tracking-tight;
   }
 
   .dialog-description {

package/dist/components/ui/file-upload/index.d.ts

@@ -0,0 +1,94 @@
+/**
+ * FileUpload — a controlled "pick a file, read it to text, hand back the text"
+ * primitive. The defining job: select one file (by click, keyboard, or
+ * drag-and-drop), validate it against an accept filter + a byte ceiling, read
+ * it as UTF-8 via FileReader.readAsText, and emit `{ file, text }`. Binary/DER
+ * (.pfx/.p12) is explicitly OUT of scope — readAsText only.
+ *
+ * The real `<input type="file">` IS the accessible control: it is `sr-only`
+ * (visually hidden) but focusable and labelable — never `aria-hidden`, never
+ * `tabIndex={-1}`. The FormControl-injected ARIA (`id`, `aria-invalid`,
+ * `aria-required`, `aria-describedby`) flows onto the input via `...rest`, so
+ * react-hook-form's `field.ref` (forwarded here) focuses the real control on
+ * error and FormLabel's `htmlFor` names it. The styled zone is a plain `<div>`
+ * with a click handler, NOT a wrapping `<label>`: a label would contribute its
+ * text to the input's accessible name and double-name it alongside a field's
+ * own label. Keyboard users Tab to the focusable input and Enter/Space opens
+ * the picker natively, so no key proxy is needed. Drag-and-drop is an
+ * enhancement layered on the zone.
+ *
+ * Errors are DUAL by design and both announced: size/type/read failures are
+ * the primitive's own concern, surfaced inline via `role="alert"` so it works
+ * standalone outside a form; a form wrapper (FileUploadField) adds the
+ * react-hook-form validation surface separately. A rejected pick never writes
+ * a value, so it cannot masquerade as valid. `accept` is validated against
+ * BOTH extension and MIME because the native `accept` attribute is only a
+ * browser hint and is bypassable via drag-drop.
+ */
+import * as React from 'react';
+export type FileUploadResult = {
+    file: File;
+    text: string;
+};
+export type FileUploadError = {
+    kind: 'too-large';
+    file: File;
+    maxSizeBytes: number;
+} | {
+    kind: 'wrong-type';
+    file: File;
+    accept: string;
+} | {
+    kind: 'read-failed';
+    file: File;
+};
+export type FileUploadProps = {
+    /** Comma-separated accept filter, e.g. ".pem,.key" or "text/plain". Mirrors the native input accept. */
+    accept?: string;
+    /** Inclusive byte ceiling. A file over this is rejected and announced, never selected. */
+    maxSizeBytes?: number;
+    /** Controlled selection. `null` = empty. The host owns state. */
+    value?: FileUploadResult | null;
+    /** Fires on accept (with {file,text}) or clear (null). Reads UTF-8 via FileReader.readAsText. */
+    onSelect: (result: FileUploadResult | null) => void;
+    /** Fires when a pick is rejected (size/type/read). Optional — the component also shows its own inline error. */
+    onError?: (error: FileUploadError) => void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'accept' | 'value' | 'disabled' | 'onChange' | 'onSelect' | 'className' | 'multiple'>;
+/**
+ * Validate a chosen file against an accept filter and a byte ceiling. Exported
+ * so hosts can pre-validate before handing a file over. `accept` is matched
+ * against BOTH the filename extension and the MIME type — a `.pem`/`text/plain`
+ * style filter passes if EITHER matches a token. When `accept` is omitted, any
+ * type passes. Returns the first error, or null when the file is acceptable.
+ */
+export declare function validateFile(file: File, opts: {
+    accept?: string;
+    maxSizeBytes?: number;
+}): FileUploadError | null;
+export declare const FileUpload: React.ForwardRefExoticComponent<{
+    /** Comma-separated accept filter, e.g. ".pem,.key" or "text/plain". Mirrors the native input accept. */
+    accept?: string;
+    /** Inclusive byte ceiling. A file over this is rejected and announced, never selected. */
+    maxSizeBytes?: number;
+    /** Controlled selection. `null` = empty. The host owns state. */
+    value?: FileUploadResult | null;
+    /** Fires on accept (with {file,text}) or clear (null). Reads UTF-8 via FileReader.readAsText. */
+    onSelect: (result: FileUploadResult | null) => void;
+    /** Fires when a pick is rejected (size/type/read). Optional — the component also shows its own inline error. */
+    onError?: (error: FileUploadError) => void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "type" | "value" | "onChange" | "onSelect" | "accept" | "multiple"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/file-upload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-upload/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3D,MAAM,MAAM,eAAe,GACvB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GACvD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,CAAA;AAEvC,MAAM,MAAM,eAAe,GAAG;IAC5B,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B,iGAAiG;IACjG,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,gHAAgH;IAChH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,GAAG,IAAI,CACN,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAEzC,MAAM,GACN,QAAQ,GACR,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GAEX,UAAU,CACb,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,IAAI,EACV,IAAI,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC/C,eAAe,GAAG,IAAI,CASxB;AA8CD,eAAO,MAAM,UAAU;IAhGrB,wGAAwG;aAC/F,MAAM;IACf,0FAA0F;mBAC3E,MAAM;IACrB,iEAAiE;YACzD,gBAAgB,GAAG,IAAI;IAC/B,iGAAiG;cACvF,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI;IACnD,gHAAgH;cACtG,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI;eAC/B,OAAO;SACb,MAAM;gBACC,MAAM;qBACD,OAAO;sBACN,OAAO;yBACJ,MAAM;mBACZ,MAAM;6LA6RtB,CAAA"}

package/dist/components/ui/file-upload/index.js

@@ -0,0 +1,237 @@
+'use client';
+"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.FileUpload = void 0;
+exports.validateFile = validateFile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * FileUpload — a controlled "pick a file, read it to text, hand back the text"
+ * primitive. The defining job: select one file (by click, keyboard, or
+ * drag-and-drop), validate it against an accept filter + a byte ceiling, read
+ * it as UTF-8 via FileReader.readAsText, and emit `{ file, text }`. Binary/DER
+ * (.pfx/.p12) is explicitly OUT of scope — readAsText only.
+ *
+ * The real `<input type="file">` IS the accessible control: it is `sr-only`
+ * (visually hidden) but focusable and labelable — never `aria-hidden`, never
+ * `tabIndex={-1}`. The FormControl-injected ARIA (`id`, `aria-invalid`,
+ * `aria-required`, `aria-describedby`) flows onto the input via `...rest`, so
+ * react-hook-form's `field.ref` (forwarded here) focuses the real control on
+ * error and FormLabel's `htmlFor` names it. The styled zone is a plain `<div>`
+ * with a click handler, NOT a wrapping `<label>`: a label would contribute its
+ * text to the input's accessible name and double-name it alongside a field's
+ * own label. Keyboard users Tab to the focusable input and Enter/Space opens
+ * the picker natively, so no key proxy is needed. Drag-and-drop is an
+ * enhancement layered on the zone.
+ *
+ * Errors are DUAL by design and both announced: size/type/read failures are
+ * the primitive's own concern, surfaced inline via `role="alert"` so it works
+ * standalone outside a form; a form wrapper (FileUploadField) adds the
+ * react-hook-form validation surface separately. A rejected pick never writes
+ * a value, so it cannot masquerade as valid. `accept` is validated against
+ * BOTH extension and MIME because the native `accept` attribute is only a
+ * browser hint and is bypassable via drag-drop.
+ */
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const icon_button_1 = require("../../../components/ui/icon-button");
+const utils_1 = require("../../../lib/utils");
+/**
+ * Validate a chosen file against an accept filter and a byte ceiling. Exported
+ * so hosts can pre-validate before handing a file over. `accept` is matched
+ * against BOTH the filename extension and the MIME type — a `.pem`/`text/plain`
+ * style filter passes if EITHER matches a token. When `accept` is omitted, any
+ * type passes. Returns the first error, or null when the file is acceptable.
+ */
+function validateFile(file, opts) {
+    const { accept, maxSizeBytes } = opts;
+    if (typeof maxSizeBytes === 'number' && file.size > maxSizeBytes) {
+        return { kind: 'too-large', file, maxSizeBytes };
+    }
+    if (accept && accept.trim() !== '' && !matchesAccept(file, accept)) {
+        return { kind: 'wrong-type', file, accept };
+    }
+    return null;
+}
+/**
+ * Does the file satisfy a comma-separated accept list? Each token is either a
+ * dot-extension (`.pem`, case-insensitive against the filename), an exact MIME
+ * (`text/plain`), or a MIME wildcard (`text/*`). True if ANY token matches.
+ */
+function matchesAccept(file, accept) {
+    const name = file.name.toLowerCase();
+    const mime = file.type.toLowerCase();
+    return accept
+        .split(',')
+        .map((t) => t.trim().toLowerCase())
+        .filter((t) => t !== '')
+        .some((token) => {
+        if (token.startsWith('.'))
+            return name.endsWith(token);
+        if (token.endsWith('/*'))
+            return mime.startsWith(token.slice(0, -1));
+        return mime === token;
+    });
+}
+/** Humanize a byte count for the selected-file chip. Binary units, 1 decimal. */
+function humanizeSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB'];
+    let size = bytes / 1024;
+    let unit = 0;
+    while (size >= 1024 && unit < units.length - 1) {
+        size /= 1024;
+        unit += 1;
+    }
+    return `${size.toFixed(1)} ${units[unit]}`;
+}
+/** A human-readable announcement for each rejection kind. */
+function errorMessage(error) {
+    switch (error.kind) {
+        case 'too-large':
+            return `File is too large (max ${humanizeSize(error.maxSizeBytes)}).`;
+        case 'wrong-type':
+            return `File type not allowed (expected ${error.accept}).`;
+        case 'read-failed':
+            return 'Could not read the file.';
+    }
+}
+exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes, value, onSelect, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    const reactId = React.useId();
+    const inputId = id ?? reactId;
+    const errorId = `${inputId}-file-upload-error`;
+    const [dragActive, setDragActive] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    // The destructive styling is driven by the consumer's aria-invalid OR the
+    // component's own validation/read error — a self-detected bad pick must read
+    // as invalid even outside a form.
+    const invalid = ariaInvalid || error !== null;
+    // Radix Slot OVERWRITES aria-describedby (it does not merge), so merge the
+    // primitive's own role=alert error id with the FormControl-injected one so
+    // both associations coexist on the input. A plain join, never `cn` —
+    // tailwind-merge treats these as class names and would drop an id that
+    // happens to look like a conflicting utility.
+    const describedBy = [ariaDescribedby, error ? errorId : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    // Last-resolved-wins: a slow read for pick A must not overwrite a newer
+    // pick B. Track the active reader and abort any in-flight read first.
+    const readerRef = React.useRef(null);
+    const handleFile = (file) => {
+        if (!file)
+            return;
+        readerRef.current?.abort();
+        const validationError = validateFile(file, { accept, maxSizeBytes });
+        if (validationError) {
+            setError(validationError);
+            onError?.(validationError);
+            return;
+        }
+        const reader = new FileReader();
+        readerRef.current = reader;
+        reader.onload = () => {
+            if (readerRef.current !== reader)
+                return;
+            readerRef.current = null;
+            setError(null);
+            onSelect({ file, text: String(reader.result ?? '') });
+        };
+        reader.onerror = () => {
+            if (readerRef.current !== reader)
+                return;
+            readerRef.current = null;
+            const readError = { kind: 'read-failed', file };
+            setError(readError);
+            onError?.(readError);
+        };
+        reader.readAsText(file);
+    };
+    const onInputChange = (event) => {
+        const file = event.target.files?.[0];
+        // Release the FileList the moment it has been read. The browser fires
+        // `change` only when the selection DIFFERS from what the input already
+        // holds, so keeping it meant re-picking the same file after a host reset
+        // (or retrying a rejected one) was silently a no-op — the picker opened,
+        // the user chose the file, and nothing happened.
+        event.target.value = '';
+        handleFile(file);
+    };
+    const onDragOver = (event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        setDragActive(true);
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        setDragActive(false);
+    };
+    const onDrop = (event) => {
+        if (disabled)
+            return;
+        event.preventDefault();
+        setDragActive(false);
+        handleFile(event.dataTransfer.files?.[0]);
+    };
+    // Mouse convenience only: clicking the styled zone opens the picker. A
+    // click that ORIGINATED on the input already opens it natively and bubbles
+    // up to here — re-firing .click() would open the picker twice, so ignore it.
+    const openPicker = (event) => {
+        if (disabled || event.target === internalRef.current)
+            return;
+        internalRef.current?.click();
+    };
+    const clear = () => {
+        readerRef.current?.abort();
+        readerRef.current = null;
+        setError(null);
+        onSelect(null);
+        // Reset the native input so re-picking the same filename fires onChange.
+        if (internalRef.current)
+            internalRef.current.value = '';
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
+                    'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', disabled
+                    ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
+                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", accept: accept, disabled: disabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": "Remove file", onClick: (event) => {
+                                    // Don't bubble to the zone's openPicker and re-open the dialog.
+                                    event.stopPropagation();
+                                    clear();
+                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": "true" }) })] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: "Choose a file" }), ' ', "or drag and drop"] }))] }), error ? ((0, jsx_runtime_1.jsx)("p", { id: errorId, role: "alert", className: "text-destructive text-xs font-medium", children: errorMessage(error) })) : null] }));
+});
+exports.FileUpload.displayName = 'FileUpload';

package/dist/components/ui/hover-card/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/hover-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/hover-card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAA;AAIhE,iBAAS,SAAS,CAAC,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,qBAEtD;AAED,iBAAS,gBAAgB,CAAC,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,qBAIzD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,qBAezD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/hover-card/index.js

@@ -0,0 +1,51 @@
+'use client';
+"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.HoverCard = HoverCard;
+exports.HoverCardTrigger = HoverCardTrigger;
+exports.HoverCardContent = HoverCardContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HoverCardPrimitive = __importStar(require("@radix-ui/react-hover-card"));
+const utils_1 = require("../../../lib/utils");
+function HoverCard({ ...props }) {
+    return (0, jsx_runtime_1.jsx)(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return ((0, jsx_runtime_1.jsx)(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props }));
+}
+function HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: (0, jsx_runtime_1.jsx)(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: (0, utils_1.cn)('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
+}

package/dist/components/ui/icon-button/styles.css

@@ -1,33 +1,33 @@
 @theme inline {
-    --spacing-icon-button-p: calc(var(--spacing) * 2)
+  --spacing-icon-button-p: calc(var(--spacing) * 2);
 }
 
 @layer components {
-    .icon-button-base {
-        @apply p-icon-button-p rounded-md size-10 [&>*]:size-6;
-    }
+  .icon-button-base {
+    @apply p-icon-button-p size-10 rounded-md [&>*]:size-6 [&>*]:shrink-0;
+  }
 
-    .icon-button-read-only {
-        @apply data-[read-only=true]:border data-[read-only=true]:border-button-border;
-    }
+  .icon-button-read-only {
+    @apply data-[read-only=true]:border-button-border data-[read-only=true]:border;
+  }
 
-    .icon-button-disabled {
-        @apply disabled:border disabled:border-button-border;
-    }
+  .icon-button-disabled {
+    @apply disabled:border-button-border disabled:border;
+  }
 
-    .icon-button-small {
-        @apply size-8 [&>*]:size-4;
-    }
+  .icon-button-small {
+    @apply size-8 [&>*]:size-4;
+  }
 
-    .icon-button-rounded {
-        @apply rounded-full;
-    }
+  .icon-button-rounded {
+    @apply rounded-full;
+  }
 
-    /* Overwrite for outline style */
-    .button-outline.icon-button-disabled {
-        @apply disabled:border-transparent
-    }
-    .button-outline.icon-button-read-only {
-        @apply data-[read-only=true]:border-transparent
-    }
-}
+  /* Overwrite for outline style */
+  .button-outline.icon-button-disabled {
+    @apply disabled:border-transparent;
+  }
+  .button-outline.icon-button-read-only {
+    @apply data-[read-only=true]:border-transparent;
+  }
+}

package/dist/components/ui/input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,QAAA,MAAM,aAAa;;;8EAejB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,YAAY,CAAC,OAAO,aAAa,CAAC,EAClC,gBAAgB,GAAG,cAAc,CAClC,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;CAC1B,CAAA;AAEH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,cAAc,EACd,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,qBAuEZ;AAED,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,QAAA,MAAM,aAAa;;;8EAejB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,YAAY,CAAC,OAAO,aAAa,CAAC,EAClC,gBAAgB,GAAG,cAAc,CAClC,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;CAC1B,CAAA;AAEH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,cAAc,EACd,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,qBAyEZ;AAED,cAAc,aAAa,CAAA"}