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

package/dist/esm/components/ui/field/index.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Label } from '../../../components/ui/label/index.js';
+declare function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>): import("react").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<'legend'> & {
+    variant?: 'legend' | 'label';
+}): import("react").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<'div'> & {
+    children?: React.ReactNode;
+}): import("react").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<'div'> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react").JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAG7C,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,+BAW1E;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,+BAYnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWvE;AAED,QAAA,MAAM,aAAa;;8EAgBlB,CAAA;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,+BAUlE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWzE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,+BAYpC;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,+BAa3E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,+BAsBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAA;CACjD,sCA0CA;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,EACX,CAAA"}

package/dist/esm/components/ui/field/index.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Label } from '../../../components/ui/label/index.js';
+import { Separator } from '../../../components/ui/separator/index.js';
+function FieldSet({ className, ...props }) {
+    return (_jsx("fieldset", { "data-slot": "field-set", className: cn('flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className), ...props }));
+}
+function FieldLegend({ className, variant = 'legend', ...props }) {
+    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn('mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className), ...props }));
+}
+function FieldGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-group", className: cn('group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4', className), ...props }));
+}
+const fieldVariants = cva('data-[invalid=true]:text-destructive gap-2 group/field flex w-full', {
+    variants: {
+        orientation: {
+            vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+            horizontal: 'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            responsive: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical'
+    }
+});
+function Field({ className, orientation = 'vertical', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
+}
+function FieldContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-content", className: cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return (_jsx(Label, { "data-slot": "field-label", className: cn('has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col', className), ...props }));
+}
+function FieldTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-label", className: cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "field-description", className: cn('text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5', 'last:mt-0 nth-last-2:-mt-1', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+function FieldSeparator({ children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "text-muted-foreground bg-background relative mx-auto block w-fit px-2", "data-slot": "field-separator-content", children: children }))] }));
+}
+function FieldError({ className, children, errors, ...props }) {
+    const content = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        if (!errors?.length) {
+            return null;
+        }
+        const uniqueErrors = [
+            ...new Map(errors.map((error) => [error?.message, error])).values()
+        ];
+        if (uniqueErrors?.length === 1) {
+            return uniqueErrors[0]?.message;
+        }
+        return (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn('text-destructive text-sm font-normal', className), ...props, children: content }));
+}
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };

package/dist/esm/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/esm/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/esm/components/ui/file-upload/index.js

@@ -0,0 +1,200 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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.
+ */
+import * as React from 'react';
+import { Upload, X } from 'lucide-react';
+import { IconButton } from '../../../components/ui/icon-button/index.js';
+import { cn } from '../../../lib/utils.js';
+/**
+ * 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 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.';
+    }
+}
+export const 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 (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: 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: [_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 }), _jsx(Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsx("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', _jsx("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), _jsx(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: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] })) : (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { className: "text-foreground font-medium", children: "Choose a file" }), ' ', "or drag and drop"] }))] }), error ? (_jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs font-medium", children: errorMessage(error) })) : null] }));
+});
+FileUpload.displayName = 'FileUpload';

package/dist/esm/components/ui/form.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { TooltipProviderProps } from '@radix-ui/react-tooltip';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+    required: boolean | undefined;
+};
+export type FormItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    required?: boolean;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    required?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export type FormLabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    extra?: React.ReactNode;
+};
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
+    extra?: React.ReactNode;
+} & React.RefAttributes<HTMLLabelElement>>;
+export declare const FormTooltip: ({ children, ...others }: TooltipProviderProps) => React.JSX.Element;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
+//# sourceMappingURL=form.d.ts.map

package/dist/esm/components/ui/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAS9D,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,sBAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;CAsBjB,CAAA;AAWD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,QAAQ;eAHD,OAAO;wCAanB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CACzD,OAAO,cAAc,CAAC,IAAI,CAC3B,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,SAAS;YAHL,KAAK,CAAC,SAAS;0CA2BvB,CAAA;AAGF,eAAO,MAAM,WAAW,GAAI,yBAAyB,oBAAoB,sBASxE,CAAA;AAED,QAAA,MAAM,WAAW;;gFAmBf,CAAA;AAGF,QAAA,MAAM,eAAe,yHAcnB,CAAA;AAGF,QAAA,MAAM,WAAW,yHAqBf,CAAA;AAGF,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACV,CAAA"}

package/dist/esm/components/ui/form.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
+import { cn } from '../../lib/utils.js';
+import { Label } from '../../components/ui/label/index.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip/index.js';
+import { HelpCircle } from 'lucide-react';
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
+};
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState, formState } = useFormContext();
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>');
+    }
+    const { id, required } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        required,
+        ...fieldState
+    };
+};
+const FormItemContext = React.createContext({});
+const FormItem = React.forwardRef(({ className, required, ...props }, ref) => {
+    const id = React.useId();
+    return (_jsx(FormItemContext.Provider, { value: { id, required }, children: _jsx("div", { ref: ref, className: cn('space-y-2', className), ...props }) }));
+});
+FormItem.displayName = 'FormItem';
+const FormLabel = React.forwardRef(({ className, extra, children, ...props }, ref) => {
+    const { required, error, formItemId } = useFormField();
+    return (_jsxs(Label, { ref: ref, className: cn('text-muted-foreground flex justify-between text-sm font-semibold', error && 'text-destructive', className), htmlFor: formItemId, ...props, children: [_jsxs("span", { children: [children, required ? ' *' : ''] }), extra] }));
+});
+FormLabel.displayName = 'FormLabel';
+export const FormTooltip = ({ children, ...others }) => (_jsx(TooltipProvider, { ...others, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(HelpCircle, { className: "text-container-text ml-2 h-4 w-4" }) }), _jsx(TooltipContent, { children: children })] }) }));
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot, { ref: ref, id: formItemId, "aria-describedby": !error
+            ? `${formDescriptionId}`
+            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+});
+FormControl.displayName = 'FormControl';
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { ref: ref, id: formDescriptionId, className: cn('text-shadcn-400 text-xs font-medium', className), ...props }));
+});
+FormDescription.displayName = 'FormDescription';
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", { ref: ref, id: formMessageId, className: cn('text-destructive text-sm font-medium', className), ...props, children: body }));
+});
+FormMessage.displayName = 'FormMessage';
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/esm/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/esm/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/esm/components/ui/hover-card/index.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { cn } from '../../../lib/utils.js';
+function HoverCard({ ...props }) {
+    return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return (_jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props }));
+}
+function HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }) {
+    return (_jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: 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 }) }));
+}
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/esm/components/ui/icon-button/index.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import { buttonVariants } from '../button/index.js';
+export declare const iconButtonVariants: (props?: ({
+    rounded?: boolean | null | undefined;
+    size?: "default" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    rounded?: boolean;
+    asChild?: boolean;
+    readOnly?: boolean;
+};
+export declare function IconButton({ className, variant, rounded, size, asChild, readOnly, onClick, ...props }: IconButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/icon-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/icon-button/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAG1C,eAAO,MAAM,kBAAkB;;;8EAiB9B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC1D,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,eAAe,+BAwBjB"}

package/dist/esm/components/ui/icon-button/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { buttonVariants } from '../button/index.js';
+import { cn } from '../../../lib/utils.js';
+export const iconButtonVariants = cva('icon-button-base icon-button-read-only icon-button-disabled', {
+    variants: {
+        rounded: {
+            true: 'icon-button-rounded',
+            false: ''
+        },
+        size: {
+            default: '',
+            small: 'icon-button-small'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+export function IconButton({ className, variant, rounded, size, asChild, readOnly, onClick, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    const handleClick = (e) => {
+        if (readOnly) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size }), iconButtonVariants({ rounded, size }), className), "data-read-only": readOnly, "data-slot": "button", ...props, onClick: handleClick }));
+}

package/dist/esm/components/ui/input/adornment.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const inputAdornmentVariants: (props?: ({
+    position?: "start" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputAdornmentProps = React.ComponentProps<'span'> & VariantProps<typeof inputAdornmentVariants> & {
+    position?: 'start' | 'end';
+};
+export declare function InputAdornment({ className, position, ...props }: InputAdornmentProps): import("react").JSX.Element;
+//# sourceMappingURL=adornment.d.ts.map

package/dist/esm/components/ui/input/adornment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adornment.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/input/adornment.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,eAAO,MAAM,sBAAsB;;8EAUjC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAC5D,YAAY,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAC3B,CAAA;AAEH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAkB,EAClB,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAQrB"}

package/dist/esm/components/ui/input/adornment.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+import { cva } from 'class-variance-authority';
+export const inputAdornmentVariants = cva('input-adornment', {
+    variants: {
+        position: {
+            start: 'input-adornment-start',
+            end: 'input-adornment-end'
+        }
+    },
+    defaultVariants: {
+        position: 'start'
+    }
+});
+export function InputAdornment({ className, position = 'start', ...props }) {
+    return (_jsx("span", { "data-slot": "input-adornment", className: cn(inputAdornmentVariants({ position }), className), ...props }));
+}