@tonzxz/government-forms 0.1.0

package/dist/gam/utils/line-totals.d.ts

@@ -0,0 +1,6 @@
+export declare function computeLineTotal(physicalCountQty: string | number, unitValue: string | number): number;
+export declare function computeGrandTotal(lines: ReadonlyArray<{
+    physicalCountQty: string | number;
+    unitValue: string | number;
+}>): number;
+export declare function fmtAmount(value: number): string;

package/dist/gam/utils/line-totals.js

@@ -0,0 +1,18 @@
+// Shared Unit Value breakdown helpers for the physical-count reports
+// (RPCPPE, RPCI, RPCSP). The per-line total and the report grand total are
+// always derived from the line's physical-count quantity and unit value, so
+// the displayed total can never drift from the underlying line data.
+export function computeLineTotal(physicalCountQty, unitValue) {
+    const qty = Number(physicalCountQty) || 0;
+    const value = Number(unitValue) || 0;
+    return qty * value;
+}
+export function computeGrandTotal(lines) {
+    return lines.reduce((sum, line) => sum + computeLineTotal(line.physicalCountQty, line.unitValue), 0);
+}
+export function fmtAmount(value) {
+    return value.toLocaleString("en-PH", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+}

package/dist/gam/utils/monetary-input.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Keeps a monetary input non-negative and limited to two decimal places.
+ * Formatting separators and other non-numeric characters are removed so the
+ * returned value is always safe to keep in a controlled text input.
+ */
+export declare function sanitizeMonetaryInput(value: string): string;

package/dist/gam/utils/monetary-input.js

@@ -0,0 +1,18 @@
+/**
+ * Keeps a monetary input non-negative and limited to two decimal places.
+ * Formatting separators and other non-numeric characters are removed so the
+ * returned value is always safe to keep in a controlled text input.
+ */
+export function sanitizeMonetaryInput(value) {
+    const sanitized = value.replace(/[^\d.]/g, "");
+    const decimalPoint = sanitized.indexOf(".");
+    if (decimalPoint === -1) {
+        return sanitized;
+    }
+    const wholeNumber = sanitized.slice(0, decimalPoint) || "0";
+    const decimalPlaces = sanitized
+        .slice(decimalPoint + 1)
+        .replace(/\./g, "")
+        .slice(0, 2);
+    return `${wholeNumber}.${decimalPlaces}`;
+}

package/dist/gam/utils/print-element.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export declare function printElement(root: HTMLElement, title?: string): Promise<void>;
+/**
+ * Prints a fresh, naturally-sized React document. This is useful for previews
+ * displayed inside scaled modal panes, where capturing the live DOM can make
+ * Chromium mispaint row-spanning table headers in its native print pipeline.
+ */
+export declare function printReactElement(content: ReactNode, title?: string): Promise<void>;

package/dist/gam/utils/print-element.js

@@ -0,0 +1,157 @@
+"use client";
+import { createRoot } from "react-dom/client";
+/**
+ * print-element.ts
+ *
+ * Opens the browser print dialog so the DOCUMENT FORM itself is printed —
+ * never the screen, the modal, or anything else on the page.
+ *
+ * Why this approach can't fail:
+ *  - The preview is rendered with the SAME html2canvas pipeline the
+ *    "Download PDF" buttons use. html2canvas captures ONLY the target element,
+ *    so the modal/backdrop/app chrome are never part of the rendered output.
+ *  - The rendered form is placed inside a hidden same-page iframe and the
+ *    browser prints that iframe's document. There is no popup (popup blockers
+ *    can't interfere) and no dependence on @media print rules hiding the rest
+ *    of the page — the iframe document contains nothing but the form.
+ *  - The print document requests A4 paper via @page and the sheet itself is
+ *    sized exactly to A4 in millimeters (210×297 portrait, 297×210 landscape),
+ *    so output is A4 in standards-compliant browsers — not the default paper
+ *    size or a letterboxed/whitespace layout.
+ */
+import { renderPreviewToCanvas } from "./export-preview-pdf.js";
+// A4 dimensions in millimeters — portrait 210×297, landscape 297×210.
+const A4_PORTRAIT_MM = { width: 210, height: 297 };
+const A4_LANDSCAPE_MM = { width: 297, height: 210 };
+function buildPrintHtml({ imageSrc, title, landscape, }) {
+    const safeTitle = title.replace(/[<>&"']/g, "");
+    const pageMm = landscape ? A4_LANDSCAPE_MM : A4_PORTRAIT_MM;
+    return `<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>${safeTitle}</title>
+		<style>
+			@page {
+				size: A4 ${landscape ? "landscape" : "portrait"};
+				margin: 0;
+			}
+			html, body {
+				margin: 0;
+				padding: 0;
+				background: #fff;
+			}
+			/* The print sheet is exactly A4, so the form fills the sheet with no
+			   browser-default paper size (e.g. Letter) or letterboxing involved. */
+			.print-stage {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: ${pageMm.width}mm;
+				height: ${pageMm.height}mm;
+				background: #fff;
+			}
+			.print-stage img {
+				display: block;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="print-stage">
+			<img src="${imageSrc}" alt="" />
+		</div>
+	</body>
+</html>`;
+}
+export async function printElement(root, title = "Document") {
+    const cleanTitle = title.replace(/\.pdf$/i, "").trim() || "Document";
+    // Render the form exactly like the Download PDF buttons do. html2canvas
+    // only captures `root` (the document preview), so the modal can never
+    // appear in the printed output.
+    const { canvas, orientation } = await renderPreviewToCanvas(root);
+    const imageSrc = canvas.toDataURL("image/png");
+    const landscape = orientation === "landscape";
+    const iframe = document.createElement("iframe");
+    // Off-screen but not display:none — some browsers refuse to print
+    // display:none iframes. Sized to A4 proportions so layout is computed.
+    iframe.style.cssText = "position:fixed;top:0;left:-10000px;width:794px;height:1123px;border:0;";
+    iframe.srcdoc = buildPrintHtml({ imageSrc, title: cleanTitle, landscape });
+    iframe.setAttribute("aria-hidden", "true");
+    document.body.appendChild(iframe);
+    return new Promise(resolve => {
+        let settled = false;
+        let printTriggered = false;
+        let fallbackTimer;
+        const cleanup = () => {
+            if (settled)
+                return;
+            settled = true;
+            window.clearTimeout(safetyTimer);
+            if (fallbackTimer !== undefined)
+                window.clearTimeout(fallbackTimer);
+            iframe.remove();
+            resolve();
+        };
+        // Safety net — never leave the iframe behind if the dialog never closes.
+        const safetyTimer = window.setTimeout(cleanup, 60_000);
+        iframe.addEventListener("load", () => {
+            const frameWindow = iframe.contentWindow;
+            const frameDocument = iframe.contentDocument;
+            if (!frameWindow || !frameDocument) {
+                cleanup();
+                return;
+            }
+            const image = frameDocument.querySelector("img");
+            const firePrint = () => {
+                if (printTriggered)
+                    return;
+                printTriggered = true;
+                frameWindow.focus();
+                frameWindow.print();
+                // Chrome fires "afterprint" on the printed window once the dialog
+                // closes. Listen there so cleanup happens right after.
+                frameWindow.addEventListener("afterprint", () => cleanup());
+            };
+            if (image && !image.complete) {
+                image.addEventListener("load", () => firePrint(), { once: true });
+                image.addEventListener("error", () => firePrint(), { once: true });
+                // Fallback: if the image stalls, still open the dialog.
+                fallbackTimer = window.setTimeout(() => firePrint(), 3000);
+            }
+            else {
+                firePrint();
+            }
+        });
+        iframe.addEventListener("error", () => cleanup());
+    });
+}
+/**
+ * Prints a fresh, naturally-sized React document. This is useful for previews
+ * displayed inside scaled modal panes, where capturing the live DOM can make
+ * Chromium mispaint row-spanning table headers in its native print pipeline.
+ */
+export async function printReactElement(content, title = "Document") {
+    const container = document.createElement("div");
+    container.style.position = "fixed";
+    container.style.left = "-10000px";
+    container.style.top = "0";
+    container.style.width = "max-content";
+    container.style.background = "#fff";
+    container.style.zIndex = "-1";
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    try {
+        root.render(content);
+        await new Promise(resolve => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+        await printElement(container, title);
+    }
+    finally {
+        root.unmount();
+        container.remove();
+    }
+}

package/dist/government-form.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { type FormCode, type FormDefinition, type FormErrors, type FormValues } from './definitions.js';
+export type GovernmentFormProps = {
+    code: FormCode;
+    /** Override field definitions to match the agency. No configuration is sent to a server. */
+    definition?: FormDefinition;
+    value: FormValues;
+    onChange: (value: FormValues) => void;
+    onSubmit: (value: FormValues) => void | Promise<void>;
+    validate?: (value: FormValues) => FormErrors;
+    submitLabel?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+};
+/** A controlled entry form for the repository's configurable report definitions. */
+export declare function GovernmentForm({ code, definition, value, onChange, onSubmit, validate, submitLabel, disabled, children }: GovernmentFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/government-form.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { formDefinitions, validateFormValues } from './definitions.js';
+/** A controlled entry form for the repository's configurable report definitions. */
+export function GovernmentForm({ code, definition = formDefinitions[code], value, onChange, onSubmit, validate, submitLabel = 'Save document', disabled = false, children }) {
+    const prefix = useId();
+    const saving = useRef(false);
+    const [pending, setPending] = useState(false);
+    const [errors, setErrors] = useState({});
+    const [saveError, setSaveError] = useState('');
+    const summaryRef = useRef(null);
+    const locked = disabled || pending;
+    function input(field, current, key, change) {
+        const id = `${prefix}-${key}`;
+        const error = errors[key];
+        const readOnly = field.readonly || ('autoGenerate' in field && field.autoGenerate);
+        const props = { id, name: key, value: current, disabled: locked, required: field.required && !readOnly, 'aria-invalid': Boolean(error), 'aria-describedby': error ? `${id}-error` : undefined, className: 'qforms-input', onChange: (event) => change(event.target.value) };
+        return _jsxs("div", { className: "qforms-field", children: [_jsxs("label", { htmlFor: id, children: [field.label, props.required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), field.type === 'textarea' ? _jsx("textarea", { ...props, readOnly: readOnly, placeholder: field.placeholder, rows: 3 }) : field.type === 'select' ? _jsxs("select", { ...props, disabled: locked || readOnly, children: [_jsxs("option", { value: "", children: ["Select ", field.label] }), field.options?.map(option => _jsx("option", { value: option, children: option }, option))] }) : _jsx("input", { ...props, readOnly: readOnly, placeholder: field.placeholder, type: field.type, step: field.numberType === 'int' ? 1 : 'any' }), error && _jsx("p", { id: `${id}-error`, className: "qforms-error", children: error })] }, key);
+    }
+    return _jsxs("form", { className: "qforms", noValidate: true, "aria-busy": pending, onSubmit: async (event) => {
+            event.preventDefault();
+            if (saving.current || disabled)
+                return;
+            const nextErrors = { ...validateFormValues(definition, value), ...validate?.(value) };
+            setErrors(nextErrors);
+            setSaveError('');
+            if (Object.keys(nextErrors).length) {
+                requestAnimationFrame(() => summaryRef.current?.focus());
+                return;
+            }
+            saving.current = true;
+            setPending(true);
+            try {
+                await onSubmit({ values: { ...value.values }, rows: value.rows.map(row => ({ ...row })) });
+            }
+            catch (error) {
+                setSaveError(error instanceof Error ? error.message : 'Unable to save. Please try again.');
+            }
+            finally {
+                saving.current = false;
+                setPending(false);
+            }
+        }, children: [_jsxs("header", { className: "qforms-header", children: [_jsx("p", { className: "qforms-code", children: definition.reportCode }), _jsx("h2", { children: definition.title }), _jsx("p", { children: definition.description })] }), Object.keys(errors).length > 0 && _jsxs("div", { ref: summaryRef, tabIndex: -1, role: "alert", className: "qforms-errors", children: [_jsx("strong", { children: "Review the form before saving." }), _jsx("ul", { children: Object.entries(errors).map(([key, error]) => _jsx("li", { children: _jsx("a", { href: `#${prefix}-${key}`, children: error }) }, key)) })] }), _jsx("div", { className: "qforms-grid", children: definition.fields.map(field => input(field, value.values[field.id] ?? '', `values.${field.id}`, next => onChange({ ...value, values: { ...value.values, [field.id]: next } }))) }), !!definition.tableFields?.length && _jsxs("section", { className: "qforms-lines", "aria-label": "Line items", children: [_jsxs("div", { className: "qforms-line-heading", children: [_jsx("h3", { children: "Line items" }), _jsx("button", { type: "button", disabled: locked, onClick: () => onChange({ ...value, rows: [...value.rows, Object.fromEntries(definition.tableFields.map(field => [field.id, '']))] }), children: "Add item" })] }), value.rows.map((row, index) => _jsxs("fieldset", { className: "qforms-row", children: [_jsxs("legend", { children: ["Item ", index + 1] }), _jsx("div", { className: "qforms-grid", children: definition.tableFields.map(field => input(field, row[field.id] ?? '', `rows.${index}.${field.id}`, next => onChange({ ...value, rows: value.rows.map((item, i) => i === index ? { ...item, [field.id]: next } : item) }))) }), _jsx("button", { type: "button", disabled: locked, "aria-label": `Remove item ${index + 1}`, onClick: () => { setErrors({}); onChange({ ...value, rows: value.rows.filter((_, i) => i !== index) }); }, children: "Remove item" })] }, index))] }), children, saveError && _jsx("p", { role: "alert", className: "qforms-error", children: saveError }), _jsx("footer", { children: _jsx("button", { type: "submit", disabled: locked, children: pending ? 'Saving…' : submitLabel }) })] });
+}

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+export * from './gam/components/iar-preview.js';
+export * from './gam/components/ics-preview.js';
+export * from './gam/components/iirup-preview.js';
+export * from './gam/components/itr-preview.js';
+export * from './gam/components/par-preview.js';
+export * from './gam/components/ppelc-preview.js';
+export * from './gam/components/property-card-preview.js';
+export * from './gam/components/ptr-preview.js';
+export * from './gam/components/reg-spi-preview.js';
+export * from './gam/components/ris-form.js';
+export * from './gam/components/ris-preview.js';
+export * from './gam/components/rlsddp-preview.js';
+export * from './gam/components/rlsddsp-preview.js';
+export * from './gam/components/rpci-preview.js';
+export * from './gam/components/rpcppe-preview.js';
+export * from './gam/components/rpcsp-preview.js';
+export * from './gam/components/rspi-preview.js';
+export * from './gam/components/spc-preview.js';
+export * from './gam/components/splc-entry-form.js';
+export * from './gam/components/splc-preview.js';
+export * from './gam/components/stock-card-preview.js';
+export * from './reports/iar/_components/create-form.js';
+export * from './reports/iar/_components/document-preview.js';
+export * from './reports/iirusp/_components/create-form.js';
+export * from './reports/iirusp/_components/document-preview.js';
+export { CreateForm as ItrCreateForm } from './reports/itr/_components/create-form.js';
+export * from './reports/pr/_components/create-form.js';
+export * from './reports/pr/_components/document-preview.js';
+export { CreateForm as RegSpiCreateForm } from './reports/regspi/_components/create-form.js';
+export * from './reports/ris/_components/create-form.js';
+export * from './reports/ris/_components/document-preview.js';
+export * from './reports/rlsddp/_components/create-form.js';
+export * from './reports/rlsddp/_components/document-preview.js';
+export * from './reports/stock-card/_components/create-form.js';
+export * from './reports/stock-card/_components/document-preview.js';
+export * from './reports/wmr/_components/create-form.js';
+export * from './reports/wmr/_components/document-preview.js';
+export * from './reports/rsmi/components/rsmi-create-form.js';
+export * from './reports/rsmi/components/rsmi-document-body.js';
+export * from './reports/rrsp/components/rrsp-preview.js';
+export * from './reports/rsmp/components/rsmp-preview-modal.js';
+export * from './definitions.js';
+export * from './government-form.js';
+export { ConfigurableFormLayout, type FormFieldConfig } from './internal/components/configurable-form-layout.js';
+export { RsmpCreateForm } from './reports/rsmp/components/rsmp-create-modal.js';
+export * from './inventory/components/inventory-item-form.js';
+export * from './inventory/components/inventory-item-preview.js';
+export * from './inventory/types.js';
+export * from './gam/components/purchase-order-page-client.js';

package/dist/index.js

@@ -0,0 +1,50 @@
+"use client";
+export * from './gam/components/iar-preview.js';
+export * from './gam/components/ics-preview.js';
+export * from './gam/components/iirup-preview.js';
+export * from './gam/components/itr-preview.js';
+export * from './gam/components/par-preview.js';
+export * from './gam/components/ppelc-preview.js';
+export * from './gam/components/property-card-preview.js';
+export * from './gam/components/ptr-preview.js';
+export * from './gam/components/reg-spi-preview.js';
+export * from './gam/components/ris-form.js';
+export * from './gam/components/ris-preview.js';
+export * from './gam/components/rlsddp-preview.js';
+export * from './gam/components/rlsddsp-preview.js';
+export * from './gam/components/rpci-preview.js';
+export * from './gam/components/rpcppe-preview.js';
+export * from './gam/components/rpcsp-preview.js';
+export * from './gam/components/rspi-preview.js';
+export * from './gam/components/spc-preview.js';
+export * from './gam/components/splc-entry-form.js';
+export * from './gam/components/splc-preview.js';
+export * from './gam/components/stock-card-preview.js';
+export * from './reports/iar/_components/create-form.js';
+export * from './reports/iar/_components/document-preview.js';
+export * from './reports/iirusp/_components/create-form.js';
+export * from './reports/iirusp/_components/document-preview.js';
+export { CreateForm as ItrCreateForm } from './reports/itr/_components/create-form.js';
+export * from './reports/pr/_components/create-form.js';
+export * from './reports/pr/_components/document-preview.js';
+export { CreateForm as RegSpiCreateForm } from './reports/regspi/_components/create-form.js';
+export * from './reports/ris/_components/create-form.js';
+export * from './reports/ris/_components/document-preview.js';
+export * from './reports/rlsddp/_components/create-form.js';
+export * from './reports/rlsddp/_components/document-preview.js';
+export * from './reports/stock-card/_components/create-form.js';
+export * from './reports/stock-card/_components/document-preview.js';
+export * from './reports/wmr/_components/create-form.js';
+export * from './reports/wmr/_components/document-preview.js';
+export * from './reports/rsmi/components/rsmi-create-form.js';
+export * from './reports/rsmi/components/rsmi-document-body.js';
+export * from './reports/rrsp/components/rrsp-preview.js';
+export * from './reports/rsmp/components/rsmp-preview-modal.js';
+export * from './definitions.js';
+export * from './government-form.js';
+export { ConfigurableFormLayout } from './internal/components/configurable-form-layout.js';
+export { RsmpCreateForm } from './reports/rsmp/components/rsmp-create-modal.js';
+export * from './inventory/components/inventory-item-form.js';
+export * from './inventory/components/inventory-item-preview.js';
+export * from './inventory/types.js';
+export * from './gam/components/purchase-order-page-client.js';

package/dist/internal/components/configurable-form-layout.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+export interface FormFieldConfig {
+    id: string;
+    /** Label shown in the card header and in configure mode */
+    label: string;
+    /** When true, the card spans both columns of the grid */
+    fullWidth?: boolean;
+    /** Render ONLY the input/select/textarea — no label needed, the card provides it */
+    render: () => ReactNode;
+}
+interface ConfigurableFormLayoutProps {
+    /** Unique key used to persist field order in localStorage */
+    formKey: string;
+    fields: FormFieldConfig[];
+    /** Pinned slot rendered above the draggable grid (e.g. auto-number card) */
+    header?: ReactNode;
+    className?: string;
+}
+export declare function ConfigurableFormLayout({ formKey, fields, header, className, }: ConfigurableFormLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/internal/components/configurable-form-layout.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "../lib/utils.js";
+import { useFormFieldOrder } from "../hooks/use-form-field-order.js";
+function GripHandle() {
+    return (_jsxs("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", "aria-hidden": "true", className: "shrink-0 text-current", children: [_jsx("circle", { cx: "2", cy: "2.5", r: "1.5" }), _jsx("circle", { cx: "2", cy: "8", r: "1.5" }), _jsx("circle", { cx: "2", cy: "13.5", r: "1.5" }), _jsx("circle", { cx: "8", cy: "2.5", r: "1.5" }), _jsx("circle", { cx: "8", cy: "8", r: "1.5" }), _jsx("circle", { cx: "8", cy: "13.5", r: "1.5" })] }));
+}
+function SortableFieldCard({ field, isConfiguring }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: field.id,
+        disabled: !isConfiguring,
+    });
+    return (_jsxs("div", { ref: setNodeRef, style: {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            zIndex: isDragging ? 50 : undefined,
+        }, className: cn("rounded-lg border bg-card p-3 transition-shadow", field.fullWidth && "col-span-2", isConfiguring
+            ? [
+                "border-primary/40 bg-primary/5 ring-1 ring-primary/20",
+                isDragging && "scale-[1.02] shadow-xl opacity-75 ring-2 ring-primary/50",
+            ]
+            : "border-border"), children: [_jsxs("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-foreground/85 select-none text-xs font-medium", children: field.label }), isConfiguring && (_jsx("button", { type: "button", "aria-label": `Drag to reorder ${field.label}`, className: "cursor-grab rounded p-0.5 text-muted-foreground/60 hover:bg-primary/10 hover:text-primary active:cursor-grabbing", ...listeners, ...attributes, children: _jsx(GripHandle, {}) }))] }), field.render()] }));
+}
+export function ConfigurableFormLayout({ formKey, fields, header, className, }) {
+    const defaultIds = fields.map(f => f.id);
+    const { order, setOrder, resetOrder, isConfiguring, setIsConfiguring } = useFormFieldOrder(formKey, defaultIds);
+    const orderedFields = order
+        .map(id => fields.find(f => f.id === id))
+        .filter((f) => f !== undefined);
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 8 },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = order.indexOf(active.id);
+            const newIndex = order.indexOf(over.id);
+            setOrder(arrayMove(order, oldIndex, newIndex));
+        }
+    }
+    return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsxs("div", { className: "flex items-center justify-end gap-2.5", children: [isConfiguring && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[11px] text-muted-foreground", children: "Drag fields to reorder" }), _jsx("button", { type: "button", onClick: resetOrder, className: "text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground", children: "Reset" })] })), _jsx("button", { type: "button", onClick: () => setIsConfiguring(prev => !prev), className: cn("flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors", isConfiguring
+                            ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                            : "border border-input text-muted-foreground hover:bg-muted"), children: isConfiguring ? (_jsxs(_Fragment, { children: [_jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M1 5.5L3.5 8L9 2", stroke: "currentColor", strokeWidth: "1.5", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }), "Done"] })) : (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.4", "aria-hidden": "true", children: [_jsx("circle", { cx: "6", cy: "6", r: "1.5" }), _jsx("path", { d: "M6 1v1.5M6 9.5V11M1 6h1.5M9.5 6H11M2.4 2.4l1.06 1.06M8.54 8.54l1.06 1.06M2.4 9.6l1.06-1.06M8.54 3.46l1.06-1.06", strokeLinecap: "round" })] }), "Configure Fields"] })) })] }), header, _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: order, strategy: rectSortingStrategy, children: _jsx("div", { className: "grid grid-cols-2 gap-3", children: orderedFields.map(field => (_jsx(SortableFieldCard, { field: field, isConfiguring: isConfiguring }, field.id))) }) }) })] }));
+}

package/dist/internal/components/ui/badge.d.ts

@@ -0,0 +1,7 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Badge, badgeVariants };

package/dist/internal/components/ui/badge.js

@@ -0,0 +1,34 @@
+"use client";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const badgeVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all transition-colors focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+            destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant = "default", render, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        props: mergeProps({
+            className: cn(badgeVariants({ className, variant })),
+        }, props),
+        render,
+        state: {
+            slot: "badge",
+            variant,
+        },
+    });
+}
+export { Badge, badgeVariants };

package/dist/internal/components/ui/button.d.ts

@@ -0,0 +1,10 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+type ButtonProps = React.ComponentProps<typeof ButtonPrimitive> & ButtonVariants;
+declare function Button({ className, variant, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants, type ButtonVariants, type ButtonProps };

package/dist/internal/components/ui/button.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none hover:cursor-pointer focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+            destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            "default": "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            "xs": "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            "sm": "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            "lg": "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+            "icon": "size-8",
+            "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+            "icon-lg": "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), className), ...props }));
+}
+export { Button, buttonVariants };

package/dist/internal/components/ui/calendar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayPicker, type DayButton } from "react-day-picker";
+import { Button } from "./button.js";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };