@neasg/design-system 0.3.0 → 0.4.2

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,11 +1,17 @@
-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";
@@ -32,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";
@@ -60,12 +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 { TabWithDropdown } from "./tab-with-dropdown";
-export type { TabWithDropdownProps, TabDropdownSection } from "./tab-with-dropdown";
+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,8 +1,11 @@
-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";
@@ -16,26 +19,44 @@ 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 { TabWithDropdown } from "./tab-with-dropdown";
+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 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 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,6 @@
 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 === "")
@@ -10,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(Typography, { as: "p", variant: "label", className: 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;

package/dist/layout.js

@@ -44,7 +44,7 @@ export function useSidebar() {
     }
     return context;
 }
-function DashboardLayout({ className, masthead, prototypeBanner, children, style, ...props }) {
+function DashboardLayout({ className, masthead, prototypeBanner, sidebar, surfaceClassName, contentClassName, children, style, ...props }) {
     const chromeRef = React.useRef(null);
     const [topOffset, setTopOffset] = React.useState(0);
     const layoutStyle = React.useMemo(() => ({
@@ -69,7 +69,7 @@ function DashboardLayout({ className, masthead, prototypeBanner, children, style
         observer.observe(node);
         return () => observer.disconnect();
     }, [masthead, prototypeBanner]);
-    return (_jsxs("div", { className: cn("flex min-h-screen flex-col bg-[hsl(var(--layout-shell-background))]", className), style: layoutStyle, ...props, children: [masthead || prototypeBanner ? (_jsxs("div", { ref: chromeRef, className: "sticky top-0 z-40 shrink-0", children: [masthead, prototypeBanner] })) : null, _jsx("div", { className: "flex min-h-0 flex-1", children: children })] }));
+    return (_jsx(SidebarProvider, { children: _jsxs("div", { className: cn("flex min-h-screen flex-col bg-[hsl(var(--layout-shell-background))]", className), style: layoutStyle, ...props, children: [masthead || prototypeBanner ? (_jsxs("div", { ref: chromeRef, className: "sticky top-0 z-40 shrink-0", children: [masthead, prototypeBanner] })) : null, _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx(DashboardContent, { className: contentClassName, surfaceClassName: surfaceClassName, children: children })] })] }) }));
 }
 function SidebarShell({ isCollapsed, className, children, ...props }) {
     return (_jsx("aside", { className: cn("fixed left-0 top-[var(--layout-top-offset)] z-30 flex h-[calc(100dvh-var(--layout-top-offset))] shrink-0 flex-col overflow-hidden bg-[hsl(var(--layout-shell-background))] pb-2 pl-[var(--layout-sidebar-padding-inline)] pt-[var(--layout-sidebar-padding-top)] transition-all duration-300 ease-in-out", isCollapsed
@@ -98,7 +98,7 @@ function SidebarMenuItem({ className, children, }) {
     return _jsx("li", { className: className, children: children });
 }
 function SidebarMenuButton({ active = false, collapsed = false, disabled = false, className, asChild = false, children, ...props }) {
-    return (_jsx(Button, { asChild: asChild, variant: "ghost", disabled: disabled, className: cn("h-10 w-full justify-start gap-3 rounded-lg text-sm font-medium shadow-none", collapsed ? "justify-center px-3" : "px-3", disabled
+    return (_jsx(Button, { asChild: asChild, variant: "ghost", disabled: disabled, className: cn("h-control w-full justify-start gap-3 rounded-lg text-sm font-medium shadow-none", collapsed ? "justify-center px-3" : "px-3", disabled
             ? "text-muted-foreground/50 hover:bg-transparent hover:text-muted-foreground/50"
             : active
                 ? "bg-white text-foreground hover:bg-white hover:text-foreground"

package/dist/lib/date-utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Parse a date string in DD/MM/YYYY HH:MM AM/PM format to a timestamp (ms).
+ */
+export declare function parseDateTime(dateStr: string): number;
+/**
+ * Format a Date object or ISO string to DD/MM/YYYY HH:MM AM/PM format.
+ * Returns `"-"` for null/undefined/invalid input.
+ */
+export declare function formatDateTime(date: Date | string | null | undefined): string;

package/dist/lib/date-utils.js

@@ -0,0 +1,34 @@
+/**
+ * Parse a date string in DD/MM/YYYY HH:MM AM/PM format to a timestamp (ms).
+ */
+export function parseDateTime(dateStr) {
+    const [datePart, timePart, ampm] = dateStr.split(" ");
+    const [day, month, year] = datePart.split("/");
+    const [hours, minutes] = timePart.split(":");
+    let hour = parseInt(hours);
+    if (ampm === "PM" && hour !== 12)
+        hour += 12;
+    if (ampm === "AM" && hour === 12)
+        hour = 0;
+    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day), hour, parseInt(minutes)).getTime();
+}
+/**
+ * Format a Date object or ISO string to DD/MM/YYYY HH:MM AM/PM format.
+ * Returns `"-"` for null/undefined/invalid input.
+ */
+export function formatDateTime(date) {
+    if (!date)
+        return "-";
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    if (isNaN(dateObj.getTime()))
+        return "-";
+    const day = dateObj.getDate().toString().padStart(2, "0");
+    const month = (dateObj.getMonth() + 1).toString().padStart(2, "0");
+    const year = dateObj.getFullYear();
+    let hours = dateObj.getHours();
+    const minutes = dateObj.getMinutes().toString().padStart(2, "0");
+    const ampm = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12;
+    hours = hours ? hours : 12;
+    return `${day}/${month}/${year} ${hours}:${minutes} ${ampm}`;
+}

package/dist/link.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const linkVariants: (props?: ({
+    variant?: "default" | "inherit" | "subtle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof linkVariants> {
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { Link, linkVariants };

package/dist/link.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "./lib/utils";
+const linkVariants = cva("rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "text-primary underline-offset-4 hover:underline",
+            subtle: "text-foreground underline-offset-4 hover:text-primary hover:underline",
+            inherit: "text-inherit no-underline hover:no-underline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Link = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("a", { ref: ref, className: cn(linkVariants({ variant }), className), ...props })));
+Link.displayName = "Link";
+export { Link, linkVariants };

package/dist/multi-select.d.ts

@@ -18,6 +18,8 @@ export interface MultiSelectProps {
     hideLabel?: boolean;
     searchable?: boolean;
     searchPlaceholder?: string;
+    /** Cap how many selected tags render in the trigger; the rest collapse into a `+N` badge. */
+    maxVisibleTags?: number;
     className?: string;
     triggerClassName?: string;
     labelClassName?: string;
@@ -25,5 +27,5 @@ export interface MultiSelectProps {
     errorClassName?: string;
     id?: string;
 }
-declare function MultiSelect({ label, options, value, onValueChange, placeholder, description, error, invalid, disabled, hideLabel, searchable, searchPlaceholder, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+declare function MultiSelect({ label, options, value, onValueChange, placeholder, description, error, invalid, disabled, hideLabel, searchable, searchPlaceholder, maxVisibleTags, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export { MultiSelect };

package/dist/multi-select.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { XIcon } from "./animated-icons/x";
 import { Badge } from "./badge";
-import { Button } from "./button";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { Checkbox } from "./checkbox";
 import { InputControl } from "./input-control";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
-function MultiSelect({ label, options, value, onValueChange, placeholder = "Select options", description, error, invalid = false, disabled = false, hideLabel = false, searchable = false, searchPlaceholder = "Search...", className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }) {
+function MultiSelect({ label, options, value, onValueChange, placeholder = "Select options", description, error, invalid = false, disabled = false, hideLabel = false, searchable = false, searchPlaceholder = "Search...", maxVisibleTags = 2, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }) {
     const generatedId = React.useId();
     const selectId = id !== null && id !== void 0 ? id : `multi-select-${generatedId}`;
     const errorId = error ? `${selectId}-error` : undefined;
@@ -64,14 +64,15 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
             return () => document.removeEventListener("mousedown", handleClickOutside);
         }
     }, [open]);
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { ref: containerRef, className: "relative", children: [_jsx("button", { type: "button", id: selectId, disabled: disabled, onClick: () => setOpen((prev) => !prev), "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background md:text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", isInvalid ? "border-destructive" : "border-input", triggerClassName), children: selectedLabels.length > 0 ? (selectedLabels.map((opt) => (_jsxs(Badge, { variant: "secondary", className: "gap-1 pr-1", children: [opt.label, _jsx(Button, { variant: "ghost", size: "icon", className: "h-4 w-4 p-0 hover:bg-transparent", onClick: (e) => {
-                                        e.stopPropagation();
-                                        removeOption(opt.value);
-                                    }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 10 }) })] }, opt.value)))) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })) }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b p-2", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", onKeyDown: (e) => e.stopPropagation() }) })) : null, _jsx("div", { role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { ref: containerRef, className: "relative", children: [_jsx("button", { type: "button", id: selectId, disabled: disabled, onClick: () => setOpen((prev) => !prev), "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("flex h-control w-full items-center gap-1.5 overflow-hidden rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", isInvalid ? "border-destructive" : "border-input", triggerClassName), children: selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium normal-case", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (e) => {
+                                                e.stopPropagation();
+                                                removeOption(opt.value);
+                                            }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium normal-case", title: selectedLabels
+                                        .slice(maxVisibleTags)
+                                        .map((o) => o.label)
+                                        .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })) }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b px-2 py-1", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", onKeyDown: (e) => e.stopPropagation() }) })) : null, _jsx("div", { role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
                                     const isSelected = value.includes(option.value);
-                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, onClick: () => toggleOption(option.value), className: cn("flex h-10 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected && "bg-accent"), children: [_jsx("div", { className: cn("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border", isSelected
-                                                    ? "border-primary bg-primary text-primary-foreground"
-                                                    : "border-input"), children: isSelected ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "h-3 w-3", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
-                                })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No options found." })) })] })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, onClick: () => toggleOption(option.value), className: cn("flex min-h-control w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected && "bg-accent"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
+                                })) : (_jsx("div", { className: "px-3 py-2 text-center text-sm text-muted-foreground", children: "No options found." })) })] })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 }
 export { MultiSelect };

package/dist/page-section.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface PageSectionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function PageSectionGroup({ className, ...props }: PageSectionGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface PageSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    headerAction?: React.ReactNode;
+    titleAdornment?: React.ReactNode;
+    headerClassName?: string;
+    contentClassName?: string;
+}
+declare function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
+export { PageSection, PageSectionGroup };