@neasg/design-system 0.2.1 → 0.4.2

package/dist/skeleton.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", className: cn("animate-pulse rounded-md bg-muted/80", className), ...props }));
+}
+export { Skeleton };

package/dist/spinner.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+type SpinnerSize = "sm" | "md" | "lg";
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: SpinnerSize;
+    /** Accessible label announced to screen readers. */
+    label?: string;
+}
+declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export interface PageLoaderProps extends Omit<SpinnerProps, "size"> {
+    size?: SpinnerSize;
+    /** Optional visible label shown beneath the spinner. */
+    message?: React.ReactNode;
+    /** Optional supporting description below the message. */
+    description?: React.ReactNode;
+}
+declare function PageLoader({ size, label, message, description, className, ...props }: PageLoaderProps): import("react/jsx-runtime").JSX.Element;
+export interface FullPageLoaderProps extends PageLoaderProps {
+    /** Background overlay. `"solid"` blocks the page; `"blur"` keeps content visible. */
+    surface?: "solid" | "blur";
+}
+declare function FullPageLoader({ size, label, message, description, surface, className, ...props }: FullPageLoaderProps): import("react/jsx-runtime").JSX.Element;
+export { Spinner, PageLoader, FullPageLoader };

package/dist/spinner.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+const SIZE_CLASS = {
+    sm: "h-4 w-4 border-2",
+    md: "h-6 w-6 border-2",
+    lg: "h-10 w-10 border-[3px]",
+};
+function Spinner({ size = "md", label = "Loading", className, ...props }) {
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn("inline-flex items-center justify-center", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn("shrink-0 animate-spin rounded-full border-current border-t-transparent text-primary", SIZE_CLASS[size]) }), _jsx("span", { className: "sr-only", children: label })] }));
+}
+function LoaderStack({ size, label, message, description, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4", children: _jsx(Spinner, { size: size, label: label }) }), message || description ? (_jsxs("div", { className: "space-y-1.5", children: [message ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message })) : null, description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] })) : null] }));
+}
+function PageLoader({ size = "lg", label = "Loading", message, description, className, ...props }) {
+    return (_jsx("div", { className: cn("flex flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: _jsx(LoaderStack, { size: size, label: label, message: message, description: description }) }));
+}
+function FullPageLoader({ size = "lg", label = "Loading", message, description, surface = "solid", className, ...props }) {
+    return (_jsx("div", { className: cn("fixed inset-0 z-50 flex flex-col items-center justify-center px-6 py-10 text-center", surface === "solid"
+            ? "bg-background"
+            : "bg-background/60 backdrop-blur-sm", className), ...props, children: _jsx(LoaderStack, { size: size, label: label, message: message, description: description }) }));
+}
+export { Spinner, PageLoader, FullPageLoader };

package/dist/styles.css

@@ -2,6 +2,43 @@
 @tailwind components;
 @tailwind utilities;
 
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
+}
+
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
+}
+
+[data-slot="collapsible-content"][data-state="open"] {
+  animation: collapsible-down 200ms ease-out;
+}
+
+[data-slot="collapsible-content"][data-state="closed"] {
+  animation: collapsible-up 200ms ease-out;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-3px);
+  }
+  40%,
+  80% {
+    transform: translateX(3px);
+  }
+}
+
+.animate-shake {
+  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
 @layer base {
   :root {
     --space-0: 0rem;
@@ -15,6 +52,8 @@
     --space-10: 2.5rem;
     --space-12: 3rem;
 
+    --size-control: 2.5rem;
+
     --nea-green-50: 140 57% 96%;
     --nea-green-100: 141 50% 90%;
     --nea-green-200: 142 45% 80%;
@@ -208,5 +247,8 @@
     @apply bg-background text-foreground;
     font-family: var(--font-sans);
     font-weight: var(--font-weight-regular);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smooth: never;
   }
 }

package/dist/switch.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    /** Label rendered next to the switch. When provided, wraps the control in a clickable `<label>`. */
+    label?: React.ReactNode;
+    /** Description shown below the label in smaller muted text. */
+    description?: React.ReactNode;
+    /** Optional class for the outer wrapping `<label>` (only used when `label` is set). */
+    wrapperClassName?: string;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/switch.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+const Switch = React.forwardRef(({ className, label, description, wrapperClassName, id, ...props }, ref) => {
+    const generatedId = React.useId();
+    const switchId = id !== null && id !== void 0 ? id : `switch-${generatedId}`;
+    const control = (_jsx(SwitchPrimitives.Root, { id: switchId, ref: ref, className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", !label && className), ...props, children: _jsx(SwitchPrimitives.Thumb, { className: "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" }) }));
+    if (!label)
+        return control;
+    return (_jsxs("label", { htmlFor: switchId, className: cn("inline-flex cursor-pointer items-center gap-2 text-sm", props.disabled && "cursor-not-allowed opacity-50", wrapperClassName, className), children: [control, _jsxs("div", { className: "select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-1", children: description })) : null] })] }));
+});
+Switch.displayName = "Switch";
+export { Switch };

package/dist/table.d.ts

@@ -67,6 +67,8 @@ export interface TableColumn<Row> {
     skeleton?: TableSkeletonConfig;
     headerClassName?: string;
     cellClassName?: string;
+    /** Pins the column to the left or right edge while the table scrolls horizontally. */
+    sticky?: "left" | "right";
 }
 export interface TableSortingProps {
     field: string | null;
@@ -102,6 +104,10 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
     loadingRows?: number;
+    /** When true, applies alternating row backgrounds for easier scanning. */
+    striped?: boolean;
+    /** When set, rows become interactive: cursor-pointer, hover highlight, and click handling. */
+    onRowClick?: (row: Row, index: number) => void;
 }
-declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading, loadingRows, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading, loadingRows, striped, onRowClick, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/table.js

@@ -5,18 +5,19 @@ import { ArrowDownIcon } from "./animated-icons/arrow-down";
 import { ArrowUpIcon } from "./animated-icons/arrow-up";
 import { EmptyState } from "./empty-state";
 import { Pagination } from "./pagination";
+import { Skeleton } from "./skeleton";
 import { cn } from "./lib/utils";
 const TableRoot = React.forwardRef(({ className, wrapperClassName: _wrapperClassName, ...props }, ref) => (_jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props })));
 TableRoot.displayName = "TableRoot";
 const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("overflow-x-auto rounded-lg border bg-card", className), ...props })));
 TableContainer.displayName = "TableContainer";
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-muted/50 [&_tr]:border-b", className), ...props })));
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-muted [&_tr]:border-b [&>tr]:bg-inherit", className), ...props })));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
 TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })));
 TableFooter.displayName = "TableFooter";
-const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props })));
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b bg-card transition-colors cursor-pointer hover:bg-muted data-[state=selected]:bg-muted", className), ...props })));
 TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: {
         ...style,
@@ -35,6 +36,19 @@ const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidt
 TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
 TableCaption.displayName = "TableCaption";
+function stickyClassName(sticky, kind) {
+    if (!sticky)
+        return undefined;
+    const side = sticky === "left" ? "left-0" : "right-0";
+    const shadow = sticky === "left"
+        ? "shadow-[inset_-1px_0_0_0_var(--color-border)]"
+        : "shadow-[inset_1px_0_0_0_var(--color-border)]";
+    // bg-inherit follows the row's current bg (default/hover/striped/header),
+    // so sticky cells stay in sync with the rest of the row.
+    // z-20 on header cells so they layer above sticky body cells on the other axis.
+    const z = kind === "head" ? "z-20" : "z-10";
+    return cn("sticky bg-inherit", side, z, shadow);
+}
 function alignClassName(align) {
     switch (align) {
         case "center":
@@ -46,7 +60,7 @@ function alignClassName(align) {
     }
 }
 function SkeletonBlock({ width = "6rem", height = "1rem", badge = false, }) {
-    return (_jsx("div", { className: cn("animate-pulse bg-muted/80", badge ? "rounded-full" : "rounded"), style: { width, height }, "aria-hidden": "true" }));
+    return (_jsx(Skeleton, { className: badge ? "rounded-full" : "rounded", style: { width, height } }));
 }
 function SkeletonCell({ config }) {
     var _a;
@@ -101,24 +115,24 @@ function getDefaultSkeleton(column) {
         height: "1rem",
     };
 }
-function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading = false, loadingRows = 5, ...props }) {
-    const shouldUseFixedLayout = columns.some((column) => column.width !== undefined ||
-        column.minWidth !== undefined ||
-        column.maxWidth !== undefined);
-    const container = (_jsx(TableContainer, { className: cn("w-full", className, containerClassName), ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
+function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading = false, loadingRows = 5, striped = false, onRowClick, ...props }) {
+    // Use auto layout so the browser can grow a column to contain its (nowrap)
+    // header. Caller can opt back into fixed layout via `tableClassName="table-fixed"`.
+    const shouldUseFixedLayout = false;
+    const container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
                             var _a;
                             const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
                             const isSortable = column.sortable && sorting;
-                            return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: column.headerClassName, allowWrap: column.wrap, width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, align: column.align, sortLabel: column.sortLabel, children: column.header }, column.key)) : (_jsx(TableHead, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), column.headerClassName), children: column.header }, column.key)));
-                        }) }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: columns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => (_jsx(TableRow, { className: typeof rowClassName === "function"
+                            return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head"), column.headerClassName), allowWrap: column.wrap, width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, align: column.align, sortLabel: column.sortLabel, children: column.header }, column.key)) : (_jsx(TableHead, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "head"), column.headerClassName), children: column.header }, column.key)));
+                        }) }) }), _jsx(TableBody, { className: cn(striped && "[&>tr:nth-child(even)]:bg-muted/60"), children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: columns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, className: typeof rowClassName === "function"
                             ? rowClassName(row, rowIndex)
                             : rowClassName, children: columns.map((column) => {
                             var _a, _b;
                             const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
                                 ? row[column.accessorKey]
                                 : null);
-                            return (_jsx(TableCell, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), column.cellClassName), children: value }, column.key));
-                        }) }, getRowKey(row, rowIndex))))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "p-6", children: emptyState }) })) })] }) }));
+                            return (_jsx(TableCell, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell"), column.cellClassName), children: value }, column.key));
+                        }) }, getRowKey(row, rowIndex))))) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: columns.length, className: "p-6", children: emptyState }) })) })] }) }));
     if (!pagination) {
         return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
     }

package/dist/tabs.d.ts

@@ -20,12 +20,35 @@ interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPri
     value: string;
 }
 declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabDropdownSection {
+    id: string;
+    label: React.ReactNode;
+}
 export interface TabsItem {
     value: string;
     label: React.ReactNode;
     content: React.ReactNode;
     disabled?: boolean;
+    /** When provided, the tab shows a chevron and opens a dropdown menu of in-page sections. */
+    sections?: TabDropdownSection[];
+    /** Scroll offset in pixels when scrolling to a section (default 200). */
+    scrollOffset?: number;
+    /** Override the default scroll-to-id behavior when a section is picked. */
+    onSectionSelect?: (sectionId: string) => void;
+    /** Currently-active section id. When set, the parent tab renders as active and the item is highlighted in the dropdown. */
+    activeSection?: string;
+}
+export interface TabWithDropdownProps {
+    value: string;
+    label: React.ReactNode;
+    sections?: TabDropdownSection[];
+    disabled?: boolean;
+    scrollOffset?: number;
+    onSectionSelect?: (sectionId: string) => void;
+    activeSection?: string;
+    className?: string;
 }
+declare function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, }: TabWithDropdownProps): import("react/jsx-runtime").JSX.Element;
 export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "children" | "value" | "defaultValue" | "onValueChange"> {
     items: TabsItem[];
     defaultValue?: string;
@@ -36,4 +59,4 @@ export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof Ta
     panelClassName?: string;
 }
 declare function Tabs({ items, defaultValue, value, onValueChange, className, listClassName, triggerClassName, panelClassName, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
-export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent, TabWithDropdown };

package/dist/tabs.js

@@ -2,7 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+import { PopoverMenuItem, PopoverMenuSection } from "./popover-menu";
 const TabsContext = React.createContext(null);
 export function useTabsContext() {
     return React.useContext(TabsContext);
@@ -23,16 +26,71 @@ const TabsRoot = React.forwardRef(({ defaultValue = "", value: valueProp, onValu
 TabsRoot.displayName = TabsPrimitive.Root.displayName;
 const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-fit items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, value: value, className: cn("inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
+const TabsTrigger = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, value: value, className: cn("inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:hover:bg-background/50 data-[state=inactive]:hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, value: value, className: cn("focus-visible:outline-none", className), ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
+function TabTriggerWithDropdown({ item, triggerClassName, }) {
+    var _a, _b, _c, _d, _e;
+    const [open, setOpen] = React.useState(false);
+    const sections = (_a = item.sections) !== null && _a !== void 0 ? _a : [];
+    const [internalActiveSection, setInternalActiveSection] = React.useState((_c = (_b = sections[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null);
+    const tabsContext = useTabsContext();
+    const scrollOffset = (_d = item.scrollOffset) !== null && _d !== void 0 ? _d : 200;
+    const activeSection = (_e = item.activeSection) !== null && _e !== void 0 ? _e : internalActiveSection;
+    const handleSectionClick = (sectionId) => {
+        setOpen(false);
+        setInternalActiveSection(sectionId);
+        if (item.onSectionSelect) {
+            item.onSectionSelect(sectionId);
+            return;
+        }
+        const doScroll = () => {
+            const el = document.getElementById(sectionId);
+            if (!el)
+                return;
+            const top = el.getBoundingClientRect().top + window.scrollY - scrollOffset;
+            window.scrollTo({ top, behavior: "smooth" });
+        };
+        if (tabsContext && tabsContext.value !== item.value) {
+            tabsContext.setValue(item.value);
+            setTimeout(doScroll, 50);
+        }
+        else {
+            doScroll();
+        }
+    };
+    // Clear the internal "active section" when the user switches away from
+    // this tab, so we don't leave a stale highlight in the dropdown menu.
+    const isTabSelected = tabsContext
+        ? tabsContext.value === item.value
+        : false;
+    React.useEffect(() => {
+        var _a, _b;
+        if (!isTabSelected && item.activeSection === undefined) {
+            setInternalActiveSection((_b = (_a = sections[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+        }
+    }, [isTabSelected, item.activeSection, sections]);
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", contentClassName: "min-w-[12rem]", trigger: _jsxs(TabsTrigger, { value: item.value, disabled: item.disabled, "data-state": isTabSelected ? "active" : "inactive", className: cn("flex items-center gap-1", triggerClassName), children: [item.label, _jsx(ChevronDownIcon, { size: 12, className: cn("transition-transform duration-200", open && "rotate-180") })] }), children: _jsx(PopoverMenuSection, { children: sections.map((section) => (_jsx(PopoverMenuItem, { active: isTabSelected && activeSection === section.id, className: "py-2 pl-2 pr-8", onClick: () => handleSectionClick(section.id), children: section.label }, section.id))) }) }));
+}
+function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, }) {
+    return (_jsx(TabTriggerWithDropdown, { item: {
+            value,
+            label,
+            content: null,
+            sections,
+            disabled,
+            scrollOffset,
+            onSectionSelect,
+            activeSection,
+        }, triggerClassName: className }));
+}
 function Tabs({ items, defaultValue, value, onValueChange, className, listClassName, triggerClassName, panelClassName, ...props }) {
     var _a, _b;
     const fallbackValue = (_b = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
     if (!items.length) {
         return null;
     }
-    return (_jsxs(TabsRoot, { defaultValue: fallbackValue, value: value, onValueChange: onValueChange, className: cn("space-y-4", className), ...props, children: [_jsx(TabsList, { className: listClassName, children: items.map((item) => (_jsx(TabsTrigger, { value: item.value, disabled: item.disabled, className: triggerClassName, children: item.label }, item.value))) }), items.map((item) => (_jsx(TabsContent, { value: item.value, className: cn("rounded-md border p-4", panelClassName), children: item.content }, item.value)))] }));
+    return (_jsxs(TabsRoot, { defaultValue: fallbackValue, value: value, onValueChange: onValueChange, className: cn("space-y-4", className), ...props, children: [_jsx(TabsList, { className: listClassName, children: items.map((item) => item.sections && item.sections.length > 0 ? (_jsx(TabTriggerWithDropdown, { item: item, triggerClassName: triggerClassName }, item.value)) : (_jsx(TabsTrigger, { value: item.value, disabled: item.disabled, className: triggerClassName, children: item.label }, item.value))) }), items.map((item) => (_jsx(TabsContent, { value: item.value, className: cn("pt-4", panelClassName), children: item.content }, item.value)))] }));
 }
-export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent, TabWithDropdown };

package/dist/tailwind-preset.js

@@ -64,6 +64,15 @@ export const neaTailwindPreset = {
                 semibold: "var(--font-weight-semibold)",
                 bold: "var(--font-weight-bold)",
             },
+            height: {
+                control: "var(--size-control)",
+            },
+            width: {
+                control: "var(--size-control)",
+            },
+            minHeight: {
+                control: "var(--size-control)",
+            },
             spacing: {
                 0: "var(--space-0)",
                 1: "var(--space-1)",

package/dist/textarea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { cn } from "./lib/utils";
-const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 md:text-sm", className), ...props })));
+const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20", className), ...props })));
 TextareaControl.displayName = "TextareaControl";
 const Textarea = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, textareaClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
     const generatedId = React.useId();

package/dist/toaster.d.ts

@@ -0,0 +1,13 @@
+import { toast } from "sonner";
+export interface ToasterProps {
+    /** Position of the toast container. */
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    /** Maximum number of toasts visible at once. */
+    visibleToasts?: number;
+    /** Whether to show the close button on each toast. */
+    closeButton?: boolean;
+    /** Duration in milliseconds before auto-dismiss. */
+    duration?: number;
+}
+declare function Toaster({ position, visibleToasts, closeButton, duration, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export { Toaster, toast };

package/dist/toaster.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as SonnerToaster, toast } from "sonner";
+import { buttonVariants } from "./button";
+import { XIcon } from "./animated-icons/x";
+import { cn } from "./lib/utils";
+function Toaster({ position = "top-right", visibleToasts = 3, closeButton = true, duration = 4000, }) {
+    return (_jsx(SonnerToaster, { position: position, visibleToasts: visibleToasts, closeButton: closeButton, duration: duration, icons: {
+            close: _jsx(XIcon, { size: 14 }),
+        }, toastOptions: {
+            classNames: {
+                toast: "group relative border border-border bg-background text-foreground shadow-md rounded-lg p-4 pr-10 flex items-start gap-3",
+                content: "min-w-0 flex-1 gap-1",
+                title: "text-sm font-medium leading-5",
+                description: "text-sm text-muted-foreground leading-5",
+                icon: "mt-0.5 text-muted-foreground",
+                actionButton: cn(buttonVariants({ variant: "link" }), "!h-auto !min-h-0 !self-start !p-0 !text-sm !font-medium !text-primary !no-underline hover:!text-primary/80 hover:!no-underline"),
+                cancelButton: cn(buttonVariants({ variant: "link" }), "!h-auto !min-h-0 !self-start !bg-transparent !p-0 !text-sm !font-medium !text-muted-foreground !no-underline hover:!bg-transparent hover:!text-foreground hover:!no-underline"),
+                closeButton: "!absolute !left-auto !right-2 !top-2 !h-6 !w-6 !translate-x-0 !translate-y-0 !rounded-md !border-0 !bg-transparent !text-muted-foreground hover:!bg-accent hover:!text-foreground",
+                success: "border-[hsl(var(--status-success-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-success-foreground))]",
+                error: "border-destructive/20 [&_[data-icon]]:text-[hsl(var(--status-destructive-foreground))]",
+                warning: "border-[hsl(var(--status-warning-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-warning-foreground))]",
+                info: "border-[hsl(var(--status-info-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-info-foreground))]",
+            },
+        } }));
+}
+export { Toaster, toast };

package/dist/typography.d.ts

@@ -6,6 +6,8 @@ declare const typographyVariants: (props?: ({
 export interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: keyof React.JSX.IntrinsicElements;
     asChild?: boolean;
+    /** Override the built-in text colour. Use "inherit" to inherit from a parent container. */
+    color?: "inherit" | "foreground" | "muted";
 }
 declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
 export { Typography, typographyVariants };

package/dist/typography.js

@@ -30,12 +30,19 @@ const defaultElementByVariant = {
     caption: "span",
     eyebrow: "span",
 };
-const Typography = React.forwardRef(({ as, asChild = false, className, variant, ...props }, ref) => {
+const Typography = React.forwardRef(({ as, asChild = false, className, variant, color, ...props }, ref) => {
     const resolvedVariant = (variant !== null && variant !== void 0 ? variant : "body");
     const Comp = asChild
         ? Slot
         : as !== null && as !== void 0 ? as : defaultElementByVariant[resolvedVariant];
-    return (_jsx(Comp, { ref: ref, className: cn(typographyVariants({ variant: resolvedVariant }), className), ...props }));
+    const colorClass = color === "inherit"
+        ? "text-inherit"
+        : color === "foreground"
+            ? "text-foreground"
+            : color === "muted"
+                ? "text-muted-foreground"
+                : undefined;
+    return (_jsx(Comp, { ref: ref, className: cn(typographyVariants({ variant: resolvedVariant }), colorClass, className), ...props }));
 });
 Typography.displayName = "Typography";
 export { Typography, typographyVariants };

package/dist/use-error-shake.d.ts

@@ -0,0 +1,7 @@
+export interface UseErrorShakeOptions {
+    durationMs?: number;
+}
+export declare function useErrorShake(options?: UseErrorShakeOptions): {
+    shouldShake: boolean;
+    triggerShake: () => void;
+};

package/dist/use-error-shake.js

@@ -0,0 +1,36 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+const DEFAULT_SHAKE_DURATION_MS = 500;
+export function useErrorShake(options = {}) {
+    const { durationMs = DEFAULT_SHAKE_DURATION_MS } = options;
+    const [shouldShake, setShouldShake] = useState(false);
+    const timeoutRef = useRef(null);
+    const frameRef = useRef(null);
+    const clearPendingAnimation = useCallback(() => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (frameRef.current !== null) {
+            window.cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+    }, []);
+    const triggerShake = useCallback(() => {
+        clearPendingAnimation();
+        setShouldShake(false);
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            setShouldShake(true);
+            timeoutRef.current = window.setTimeout(() => {
+                setShouldShake(false);
+                timeoutRef.current = null;
+            }, durationMs);
+        });
+    }, [clearPendingAnimation, durationMs]);
+    useEffect(() => clearPendingAnimation, [clearPendingAnimation]);
+    return {
+        shouldShake,
+        triggerShake,
+    };
+}

package/dist/use-file-upload.d.ts

@@ -0,0 +1,34 @@
+export type FileUploadStatus = "pending" | "uploading" | "complete" | "error";
+export interface FileUploadResult {
+    name: string;
+    size: string;
+    sizeBytes: number;
+    type: string;
+    key: string;
+    url: string;
+}
+export interface FileUploadProgress {
+    name: string;
+    progress: number;
+    status: FileUploadStatus;
+    error?: string;
+    result?: FileUploadResult;
+}
+export interface UseFileUploadOptions {
+    /** Upload endpoint URL. Defaults to `/api/upload`. */
+    endpoint?: string;
+    /** Folder path sent alongside each file as form field `folder`. */
+    folder?: string;
+    /** Additional form fields appended to every request. */
+    extraFields?: Record<string, string>;
+    onComplete?: (results: FileUploadProgress[]) => void;
+    onError?: (error: Error) => void;
+}
+export interface UseFileUploadReturn {
+    uploadProgress: Map<string, FileUploadProgress>;
+    isUploading: boolean;
+    uploadFiles: (files: File[], folder?: string) => Promise<FileUploadProgress[]>;
+    reset: () => void;
+    cancel: () => void;
+}
+export declare function useFileUpload(options?: UseFileUploadOptions): UseFileUploadReturn;