@neasg/design-system 0.2.1 → 0.4.2

package/dist/date-input.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { format, parse } from "date-fns";
+import { Calendar } from "./calendar";
+import { inputControlClassName } from "./input-control";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { PopoverContent, PopoverRoot, PopoverTrigger } from "./popover-primitive";
+import { cn } from "./lib/utils";
+function parseDateString(dateStr) {
+    if (!(dateStr === null || dateStr === void 0 ? void 0 : dateStr.trim()))
+        return undefined;
+    try {
+        const nativeDate = new Date(dateStr);
+        if (!isNaN(nativeDate.getTime()))
+            return nativeDate;
+        const ddmmyyyyMatch = dateStr.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+        if (ddmmyyyyMatch) {
+            const [, day, month, year] = ddmmyyyyMatch;
+            const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+            if (!isNaN(date.getTime()))
+                return date;
+        }
+        const date = parse(dateStr, "yyyy-MM-dd", new Date());
+        if (!isNaN(date.getTime()))
+            return date;
+        return undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function formatISODate(date) {
+    return format(date, "yyyy-MM-dd");
+}
+const DateInput = React.forwardRef(({ label, value, onValueChange, description, error, invalid = false, hideLabel = false, placeholder = "Pick a date", disabled = false, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const generatedId = React.useId();
+    const inputId = id !== null && id !== void 0 ? id : `date-input-${generatedId}`;
+    const errorId = error ? `${inputId}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${inputId}-description` : undefined;
+    const isInvalid = invalid || Boolean(error);
+    const selectedDate = React.useMemo(() => parseDateString(value), [value]);
+    const displayValue = selectedDate
+        ? format(selectedDate, "d MMM yyyy")
+        : undefined;
+    const handleSelect = (date) => {
+        onValueChange(date ? formatISODate(date) : "");
+        setOpen(false);
+    };
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative w-full", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", style: { width: 14, height: 14 }, "aria-hidden": "true", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "cursor-pointer pl-9 text-left", !selectedDate && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: displayValue !== null && displayValue !== void 0 ? displayValue : _jsx("span", { children: placeholder }) })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: (date) => {
+                                if (minDate && date < minDate)
+                                    return true;
+                                if (maxDate && date > maxDate)
+                                    return true;
+                                return false;
+                            }, defaultMonth: selectedDate, autoFocus: true }) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+});
+DateInput.displayName = "DateInput";
+export { DateInput };

package/dist/dialog-primitive.js

@@ -10,7 +10,7 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogSurface = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
+const DialogSurface = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
 DialogSurface.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";

package/dist/draggable-tabs.js

@@ -19,7 +19,7 @@ function TabButton({ item, dragHandleProps, }) {
             : isDraggable
                 ? "cursor-grab active:cursor-grabbing"
                 : "cursor-pointer", item.active
-            ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-green-500"
+            ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-green-500 hover:bg-muted"
             : (_b = item.inactiveClassName) !== null && _b !== void 0 ? _b : "border-transparent hover:bg-muted", item.className), ...dragHandleProps, children: [_jsxs("button", { type: "button", onClick: item.disabled ? undefined : item.onSelect, disabled: item.disabled, className: cn("flex cursor-pointer items-center gap-2 py-3 pr-1 text-sm font-medium whitespace-nowrap disabled:cursor-not-allowed", labelClassName), children: [item.leading, item.label, item.trailing] }), item.onClose ? (_jsx("button", { type: "button", onClick: (event) => {
                     var _a;
                     event.stopPropagation();

package/dist/drawer.js

@@ -46,7 +46,7 @@ const drawerSurfaceVariants = cva("fixed z-50 flex flex-col gap-4 overflow-y-aut
     },
 });
 function DrawerSurface({ side, className, children, hideCloseButton, ...props }) {
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { className: cn(drawerSurfaceVariants({ side }), className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { className: cn(drawerSurfaceVariants({ side }), className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
 }
 function Drawer({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, side = "right", contentClassName, bodyClassName, hideCloseButton, }) {
     const [isOpen, setIsOpen] = useControllableOpen({

package/dist/editable-table.js

@@ -97,11 +97,11 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
         return String(cellValue);
     };
     const hasActionsColumn = isEditing || Boolean(renderRowActions);
-    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { className: "table-fixed", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "56px", minWidth: renderRowActions ? "120px" : "56px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (hasActionsColumn ? 1 : 0), className: "py-8 text-center text-muted-foreground", children: "No data available" }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0 ? "bg-muted/30" : undefined, children: [columns.map((column, columnIndex) => {
+    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { className: "table-fixed", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (hasActionsColumn ? 1 : 0), className: "py-8 text-center text-muted-foreground", children: "No data available" }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0 ? "bg-muted/30" : undefined, children: [columns.map((column, columnIndex) => {
                                         const cellValue = getNestedValue(row, column.path);
                                         const isEditingCell = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
                                             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === column.path;
-                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), minWidth: getColumnMinWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-10 w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
+                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), minWidth: getColumnMinWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-control w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
                                                     cellValue === undefined ||
                                                     cellValue === ""
                                                     ? "text-muted-foreground"

package/dist/empty-state.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
 function EmptyState({ message, description, icon: Icon, action, className, ...props }) {
-    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [Icon ? (_jsx(Icon, { className: "mb-4 h-5 w-5 text-muted-foreground/70" })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] }), action ? _jsx("div", { className: "pt-4", children: action }) : null] }));
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [Icon ? (_jsx(Icon, { className: "mb-4 h-10 w-10 stroke-[1.5] text-muted-foreground/70" })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] }), action ? _jsx("div", { className: "pt-6", children: action }) : null] }));
 }
 export { EmptyState };

package/dist/field.d.ts

@@ -1,6 +1,9 @@
 import * as React from "react";
 declare function Field({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<"label">): import("react/jsx-runtime").JSX.Element;
+interface FieldLabelProps extends React.ComponentProps<"label"> {
+    required?: boolean;
+}
+declare function FieldLabel({ className, required, children, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
 declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
 declare function FieldError({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
 export { Field, FieldDescription, FieldError, FieldLabel };

package/dist/field.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
 function Field({ className, ...props }) {
     return (_jsx("div", { "data-slot": "field", className: cn("group/field flex w-full flex-col gap-2", className), ...props }));
 }
-function FieldLabel({ className, ...props }) {
-    return (_jsx("label", { "data-slot": "field-label", className: cn("text-sm font-medium leading-none group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:opacity-50 group-data-[invalid=true]/field:text-destructive", className), ...props }));
+function FieldLabel({ className, required, children, ...props }) {
+    return (_jsxs("label", { "data-slot": "field-label", className: cn("text-sm font-medium leading-none group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:opacity-50 group-data-[invalid=true]/field:text-destructive", className), ...props, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }));
 }
 function FieldDescription({ className, ...props }) {
     return (_jsx("p", { "data-slot": "field-description", className: cn("text-sm leading-normal text-muted-foreground", className), ...props }));

package/dist/file-upload.d.ts

@@ -0,0 +1,12 @@
+import type { FileUploadProgress } from "./use-file-upload";
+export interface FileUploadProps {
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    onFilesChange: (files: File[]) => void;
+    value?: File[];
+    disabled?: boolean;
+    className?: string;
+    uploadProgress?: Map<string, FileUploadProgress>;
+}
+export declare function FileUpload({ accept, maxSize, maxFiles, onFilesChange, value, disabled, className, uploadProgress, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/file-upload.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useCallback, useState } from "react";
+import { File, ImageIcon } from "lucide-react";
+import { CheckIcon } from "./animated-icons/check";
+import { FileTextIcon } from "./animated-icons/file-text";
+import { UploadIcon } from "./animated-icons/upload";
+import { XIcon } from "./animated-icons/x";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+import { Progress } from "./progress";
+const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+function getFileIcon(file) {
+    if (file.type.startsWith("image/")) {
+        return _jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" });
+    }
+    if (file.type === "application/pdf") {
+        return _jsx(FileTextIcon, { className: "text-red-500", size: 16 });
+    }
+    return _jsx(File, { className: "h-4 w-4 text-muted-foreground" });
+}
+export function FileUpload({ accept, maxSize = DEFAULT_MAX_FILE_SIZE, maxFiles = 10, onFilesChange, value = [], disabled = false, className, uploadProgress, }) {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [error, setError] = useState(null);
+    const inputRef = React.useRef(null);
+    const validateFiles = useCallback((files) => {
+        const validFiles = [];
+        const fileArray = Array.from(files);
+        for (const file of fileArray) {
+            if (value.length + validFiles.length >= maxFiles) {
+                setError(`Maximum ${maxFiles} files allowed`);
+                break;
+            }
+            if (file.size > maxSize) {
+                setError(`File "${file.name}" exceeds ${formatFileSize(maxSize)} limit`);
+                continue;
+            }
+            if (value.some((f) => f.name === file.name && f.size === file.size)) {
+                continue;
+            }
+            validFiles.push(file);
+        }
+        return validFiles;
+    }, [maxFiles, maxSize, value]);
+    const handleFiles = useCallback((files) => {
+        setError(null);
+        const validFiles = validateFiles(files);
+        if (validFiles.length > 0) {
+            onFilesChange([...value, ...validFiles]);
+        }
+    }, [validateFiles, value, onFilesChange]);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        if (disabled)
+            return;
+        handleFiles(e.dataTransfer.files);
+    }, [disabled, handleFiles]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    const handleInputChange = useCallback((e) => {
+        if (e.target.files) {
+            handleFiles(e.target.files);
+        }
+        e.target.value = "";
+    }, [handleFiles]);
+    const removeFile = useCallback((index) => {
+        const newFiles = value.filter((_, i) => i !== index);
+        onFilesChange(newFiles);
+        setError(null);
+    }, [value, onFilesChange]);
+    const openFilePicker = useCallback(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const fileInput = (_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: maxFiles > 1, onChange: handleInputChange, disabled: disabled, className: "hidden" }));
+    return (_jsxs("div", { className: cn("space-y-3", className), children: [fileInput, _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onClick: openFilePicker, className: cn("relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed p-6 transition-colors", isDragOver && !disabled
+                    ? "border-primary bg-primary/5"
+                    : "border-muted-foreground/25 hover:border-muted-foreground/50", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(UploadIcon, { className: cn(isDragOver ? "text-primary" : "text-muted-foreground"), size: 32 }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium", children: isDragOver ? "Drop files here" : "Drag & drop files here" }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["or click to browse (max ", formatFileSize(maxSize), " each)"] })] })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, value.length > 0 ? (_jsx("div", { className: "space-y-2", children: value.map((file, index) => {
+                    var _a;
+                    const progress = uploadProgress === null || uploadProgress === void 0 ? void 0 : uploadProgress.get(file.name);
+                    const isUploading = (progress === null || progress === void 0 ? void 0 : progress.status) === "uploading";
+                    const isComplete = (progress === null || progress === void 0 ? void 0 : progress.status) === "complete";
+                    const isError = (progress === null || progress === void 0 ? void 0 : progress.status) === "error";
+                    return (_jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [getFileIcon(file), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: file.name }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [formatFileSize(file.size), isUploading && ` • ${progress === null || progress === void 0 ? void 0 : progress.progress}%`, isComplete && " • Complete", isError && ` • ${(progress === null || progress === void 0 ? void 0 : progress.error) || "Error"}`] })] }), isComplete ? (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center text-green-500", children: _jsx(CheckIcon, { size: 16 }) })) : (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: (e) => {
+                                            e.stopPropagation();
+                                            removeFile(index);
+                                        }, disabled: disabled || isUploading, "aria-label": `Remove ${file.name}`, children: _jsx(XIcon, { size: 16 }) }))] }), (isUploading ||
+                                (progress && progress.status === "pending")) && (_jsx("div", { className: "mt-2", children: _jsx(Progress, { value: (_a = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _a !== void 0 ? _a : 0, size: "sm", variant: isError ? "error" : "default", label: `Uploading ${file.name}` }) }))] }, `${file.name}-${file.size}-${index}`));
+                }) })) : null] }));
+}

package/dist/index.d.ts

@@ -1,8 +1,19 @@
-export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback, } from "./avatar";
+export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
 export type { AvatarProps, AvatarProfileProps, AvatarRootProps, } from "./avatar";
 export * from "./animated-icons";
+export { Alert, alertVariants } from "./alert";
+export type { AlertProps } from "./alert";
 export { Badge, badgeVariants } from "./badge";
+export { Card } from "./card";
+export type { CardProps } from "./card";
 export type { BadgeProps } from "./badge";
+export { Calendar, CalendarDayButton } from "./calendar";
+export { Checkbox } from "./checkbox";
+export type { CheckboxProps } from "./checkbox";
+export { Switch } from "./switch";
+export type { SwitchProps } from "./switch";
+export { DateInput } from "./date-input";
+export type { DateInputProps } from "./date-input";
 export { CountBadge } from "./count-badge";
 export type { CountBadgeProps } from "./count-badge";
 export { EmptyState } from "./empty-state";
@@ -15,6 +26,8 @@ export { Input } from "./input";
 export type { InputProps } from "./input";
 export { Select } from "./select";
 export type { SelectOption, SelectProps } from "./select";
+export { MultiSelect } from "./multi-select";
+export type { MultiSelectOption, MultiSelectProps } from "./multi-select";
 export { DEFAULT_COUNTRY_CODES, PhoneInput, } from "./phone-input";
 export type { CountryCode, PhoneInputProps, } from "./phone-input";
 export { OtpInput } from "./otp-input";
@@ -25,26 +38,50 @@ export { LabelValueGrid } from "./label-value-grid";
 export type { LabelValueGridItem, LabelValueGridProps, } from "./label-value-grid";
 export { Breadcrumb, BreadcrumbNav, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from "./breadcrumb";
 export type { BreadcrumbEntry, BreadcrumbProps } from "./breadcrumb";
+export { BackButton } from "./back-button";
+export type { BackButtonProps } from "./back-button";
 export { Button, buttonVariants } from "./button";
 export type { ButtonProps } from "./button";
+export { Link, linkVariants } from "./link";
+export type { LinkProps } from "./link";
 export { Dialog } from "./dialog";
 export type { DialogAction, DialogProps } from "./dialog";
 export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
 export { CommandSearch, type CommandSearchFilter, type CommandSearchItem, type CommandSearchProps, type CommandSearchSection, } from "./command-search";
+export { FileUpload } from "./file-upload";
+export type { FileUploadProps } from "./file-upload";
+export { Progress } from "./progress";
+export type { ProgressProps } from "./progress";
+export { useFileUpload } from "./use-file-upload";
+export type { FileUploadProgress, FileUploadResult, FileUploadStatus, UseFileUploadOptions, UseFileUploadReturn, } from "./use-file-upload";
+export { Popover } from "./popover";
+export type { PopoverProps } from "./popover";
+export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, } from "./popover-menu";
+export type { PopoverMenuContentProps, PopoverMenuHeaderProps, PopoverMenuSectionProps, PopoverMenuItemProps, PopoverMenuDividerProps, PopoverMenuGroupProps, PopoverMenuGroupLabelProps, PopoverMenuSearchProps, PopoverMenuScrollAreaProps, } from "./popover-menu";
 export { SearchInput } from "./search-input";
 export type { SearchInputProps } from "./search-input";
+export { SectionNav } from "./section-nav";
+export type { SectionNavItem, SectionNavProps } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
 export type { GovtMastheadProps } from "./govt-masthead";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
 export type { SearchHighlightProps, SearchHighlightSegment, } from "./use-search-highlight";
+export { useErrorShake } from "./use-error-shake";
+export type { UseErrorShakeOptions } from "./use-error-shake";
+export { useStickySentinel } from "./use-sticky-sentinel";
+export type { UseStickySentinelOptions, UseStickySentinelReturn, } from "./use-sticky-sentinel";
+export { useViewportThreshold } from "./use-viewport-threshold";
+export type { UseViewportThresholdOptions, UseViewportThresholdReturn, } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export type { TextareaProps } from "./textarea";
 export { DraggableTabs, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
 export type { DrawerAction, DrawerProps, DrawerSide } from "./drawer";
-export { DashboardLayout, DashboardSidebar, DashboardContent, SidebarProvider, useSidebar, } from "./layout";
-export type { DashboardSidebarNavGroup, DashboardSidebarNavItem, } from "./layout";
+export { DashboardLayout, DashboardSidebar, useSidebar, } from "./layout";
+export type { DashboardLayoutProps, DashboardSidebarNavGroup, DashboardSidebarNavItem, } from "./layout";
 export { PageHeader } from "./page-header";
+export { PageSection, PageSectionGroup } from "./page-section";
+export type { PageSectionGroupProps, PageSectionProps } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
 export type { TypographyProps } from "./typography";
 export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
@@ -53,8 +90,23 @@ export { Pagination } from "./pagination";
 export type { PaginationProps } from "./pagination";
 export { TableToolbar } from "./table-toolbar";
 export type { TableToolbarProps } from "./table-toolbar";
+export { useTableSort } from "./use-table-sort";
+export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
 export type { TableColumn, TableProps, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
-export { Tabs, TabsRoot, type TabsItem, type TabsProps, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
+export { Tabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
+export { Toaster, toast } from "./toaster";
+export type { ToasterProps } from "./toaster";
+export { Separator } from "./separator";
+export type { SeparatorProps } from "./separator";
+export { Skeleton } from "./skeleton";
+export type { SkeletonProps } from "./skeleton";
+export { CopyButton } from "./copy-button";
+export type { CopyButtonProps } from "./copy-button";
+export { Spinner, PageLoader, FullPageLoader } from "./spinner";
+export type { SpinnerProps, PageLoaderProps, FullPageLoaderProps, } from "./spinner";
+export { Collapsible, CollapsibleSection } from "./collapsible";
+export type { CollapsibleProps } from "./collapsible";
 export { cn } from "./lib/utils";
+export { parseDateTime, formatDateTime } from "./lib/date-utils";

package/dist/index.js

@@ -1,35 +1,62 @@
-export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback, } from "./avatar";
+export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
 export * from "./animated-icons";
+export { Alert, alertVariants } from "./alert";
 export { Badge, badgeVariants } from "./badge";
+export { Card } from "./card";
+export { Calendar, CalendarDayButton } from "./calendar";
+export { Checkbox } from "./checkbox";
+export { Switch } from "./switch";
+export { DateInput } from "./date-input";
 export { CountBadge } from "./count-badge";
 export { EmptyState } from "./empty-state";
 export { EditableTable } from "./editable-table";
 export { EmailInput } from "./email-input";
 export { Input } from "./input";
 export { Select } from "./select";
+export { MultiSelect } from "./multi-select";
 export { DEFAULT_COUNTRY_CODES, PhoneInput, } from "./phone-input";
 export { OtpInput } from "./otp-input";
 export { LabelValue, isEmptyValue, } from "./label-value";
 export { LabelValueGrid } from "./label-value-grid";
 export { Breadcrumb, BreadcrumbNav, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from "./breadcrumb";
+export { BackButton } from "./back-button";
 export { Button, buttonVariants } from "./button";
+export { Link, linkVariants } from "./link";
 export { Dialog } from "./dialog";
 export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
 export { CommandSearch, } from "./command-search";
+export { FileUpload } from "./file-upload";
+export { Progress } from "./progress";
+export { useFileUpload } from "./use-file-upload";
+export { Popover } from "./popover";
+export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, } from "./popover-menu";
 export { SearchInput } from "./search-input";
+export { SectionNav } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
+export { useErrorShake } from "./use-error-shake";
+export { useStickySentinel } from "./use-sticky-sentinel";
+export { useViewportThreshold } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export { DraggableTabs, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
-export { DashboardLayout, DashboardSidebar, DashboardContent, SidebarProvider, useSidebar, } from "./layout";
+export { DashboardLayout, DashboardSidebar, useSidebar, } from "./layout";
 export { PageHeader } from "./page-header";
+export { PageSection, PageSectionGroup } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
 export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
 export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
 export { Pagination } from "./pagination";
 export { TableToolbar } from "./table-toolbar";
+export { useTableSort } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
-export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
+export { Tabs, TabsRoot, TabWithDropdown, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, } from "./tooltip";
+export { Toaster, toast } from "./toaster";
+export { Separator } from "./separator";
+export { Skeleton } from "./skeleton";
+export { CopyButton } from "./copy-button";
+export { Spinner, PageLoader, FullPageLoader } from "./spinner";
+export { Collapsible, CollapsibleSection } from "./collapsible";
 export { cn } from "./lib/utils";
+export { parseDateTime, formatDateTime } from "./lib/date-utils";

package/dist/input-control.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-declare const inputControlClassName = "h-10 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 md:text-sm";
+declare const inputControlClassName = "h-control w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20";
 declare const InputControl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { InputControl, inputControlClassName };

package/dist/input-control.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./lib/utils";
-const inputControlClassName = "h-10 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 md:text-sm";
+const inputControlClassName = "h-control w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20";
 const InputControl = React.forwardRef(({ className, type = "text", ...props }, ref) => (_jsx("input", { ref: ref, type: type, "data-slot": "input", className: cn(inputControlClassName, className), ...props })));
 InputControl.displayName = "InputControl";
 export { InputControl, inputControlClassName };

package/dist/input.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { InputControl } from "./input-control";
 import { cn } from "./lib/utils";
-const Input = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, inputClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+const Input = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, inputClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, required, ...props }, ref) => {
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${generatedId}`;
     const errorId = error ? `${inputId}-error` : undefined;
@@ -16,7 +16,7 @@ const Input = React.forwardRef(({ label, description, error, invalid = false, hi
     const describedBy = [ariaDescribedBy, descriptionId, errorId]
         .filter(Boolean)
         .join(" ") || undefined;
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(InputControl, { ref: ref, id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: inputClassName, ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, required: required, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(InputControl, { ref: ref, id: inputId, disabled: disabled, required: required, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: inputClassName, ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 Input.displayName = "Input";
 export { Input };

package/dist/label-value-grid.d.ts

@@ -8,6 +8,8 @@ export interface LabelValueGridProps extends React.HTMLAttributes<HTMLDivElement
     columns?: 1 | 2 | 3 | 4;
     itemClassName?: string;
     minColumnWidth?: number;
+    loading?: boolean;
+    loadingItems?: number;
 }
-declare function LabelValueGrid({ items, columns, className, itemClassName, minColumnWidth, style, ...props }: LabelValueGridProps): import("react/jsx-runtime").JSX.Element;
+declare function LabelValueGrid({ items, columns, className, itemClassName, minColumnWidth, loading, loadingItems, style, ...props }: LabelValueGridProps): import("react/jsx-runtime").JSX.Element;
 export { LabelValueGrid };

package/dist/label-value-grid.js

@@ -11,7 +11,20 @@ function getAvailableWidth(element) {
     var _a, _b, _c, _d, _e, _f;
     return Math.max(element.getBoundingClientRect().width, element.clientWidth, element.offsetWidth, (_b = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0, (_d = (_c = element.parentElement) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0, (_f = (_e = element.parentElement) === null || _e === void 0 ? void 0 : _e.offsetWidth) !== null && _f !== void 0 ? _f : 0);
 }
-function LabelValueGrid({ items, columns = 4, className, itemClassName, minColumnWidth = 192, style, ...props }) {
+function LabelValueGrid({ items, columns = 4, className, itemClassName, minColumnWidth = 192, loading = false, loadingItems = 4, style, ...props }) {
+    const resolvedItems = React.useMemo(() => {
+        if (!loading)
+            return items;
+        if (items.length > 0) {
+            return items.map((item) => ({ ...item, loading: true }));
+        }
+        return Array.from({ length: loadingItems }).map((_, index) => ({
+            id: `skeleton-${index}`,
+            label: "",
+            value: null,
+            loading: true,
+        }));
+    }, [items, loading, loadingItems]);
     const containerRef = React.useRef(null);
     const [resolvedColumns, setResolvedColumns] = React.useState(columns);
     React.useLayoutEffect(() => {
@@ -53,7 +66,7 @@ function LabelValueGrid({ items, columns = 4, className, itemClassName, minColum
     return (_jsx("div", { ref: containerRef, className: cn("grid auto-rows-fr items-start gap-x-6 gap-y-3", className), style: {
             ...style,
             gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
-        }, ...props, children: items.map((item, index) => {
+        }, ...props, children: resolvedItems.map((item, index) => {
             var _a;
             return (_jsx(LabelValue, { ...item, className: cn("min-w-0", itemClassName, item.className) }, (_a = item.id) !== null && _a !== void 0 ? _a : `${item.label}-${index}`));
         }) }));

package/dist/label-value.d.ts

@@ -5,7 +5,10 @@ export interface LabelValueProps {
     className?: string;
     labelClassName?: string;
     hideIfEmpty?: boolean;
+    hideLabel?: boolean;
+    loading?: boolean;
+    required?: boolean;
 }
 export declare function isEmptyValue(value: React.ReactNode): boolean;
-declare function LabelValue({ label, value, className, labelClassName, hideIfEmpty, }: LabelValueProps): import("react/jsx-runtime").JSX.Element | null;
+declare function LabelValue({ label, value, className, labelClassName, hideIfEmpty, hideLabel, loading, required, }: LabelValueProps): import("react/jsx-runtime").JSX.Element | null;
 export { LabelValue };

package/dist/label-value.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
+import { Skeleton } from "./skeleton";
+import { Typography } from "./typography";
 export function isEmptyValue(value) {
     if (value === null || value === undefined || value === "")
         return true;
@@ -9,11 +11,11 @@ export function isEmptyValue(value) {
     }
     return false;
 }
-function LabelValue({ label, value, className, labelClassName, hideIfEmpty = false, }) {
+function LabelValue({ label, value, className, labelClassName, hideIfEmpty = false, hideLabel = false, loading = false, required = false, }) {
     const empty = isEmptyValue(value);
-    if (hideIfEmpty && empty) {
+    if (!loading && hideIfEmpty && empty) {
         return null;
     }
-    return (_jsxs("div", { className: cn("min-w-0 h-full space-y-1", className), children: [_jsx("p", { className: cn("text-sm font-semibold text-foreground", labelClassName), children: label }), _jsx("div", { className: cn("min-w-0 break-words text-sm text-foreground", empty && "italic text-muted-foreground/60"), children: empty ? "-" : value })] }));
+    return (_jsxs("div", { className: cn("min-w-0 h-full space-y-1", className), children: [!hideLabel && (loading ? (_jsx(Skeleton, { className: "h-3.5 w-20" })) : (_jsxs(Typography, { as: "p", variant: "label", className: labelClassName, children: [label, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }))), loading ? (_jsx(Skeleton, { className: "h-4 w-32" })) : (_jsx("div", { className: cn("min-w-0 break-words text-sm text-foreground", empty && "italic text-muted-foreground/60"), children: empty ? "-" : value }))] }));
 }
 export { LabelValue };

package/dist/layout.d.ts

@@ -11,8 +11,14 @@ export declare function useSidebar(): SidebarContextType;
 export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     masthead?: React.ReactNode;
     prototypeBanner?: React.ReactNode;
+    /** Sidebar element, typically a <DashboardSidebar />. */
+    sidebar?: React.ReactNode;
+    /** Class names applied to the inner content surface (the rounded card around children). */
+    surfaceClassName?: string;
+    /** Class names applied to the content `<main>` wrapper. */
+    contentClassName?: string;
 }
-declare function DashboardLayout({ className, masthead, prototypeBanner, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardLayout({ className, masthead, prototypeBanner, sidebar, surfaceClassName, contentClassName, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
     logo?: React.ReactNode | ((context: {
         isCollapsed: boolean;