@neasg/design-system 0.4.8 → 0.4.10

package/dist/table.js

@@ -9,30 +9,36 @@ 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("min-h-0 overflow-auto rounded-lg border bg-card", className), ...props })));
+const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("min-h-0 overflow-auto rounded-lg border border-[hsl(var(--table-border))] bg-card text-card-foreground", 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 [&_tr]:border-b [&>tr]:bg-inherit", className), ...props })));
+function getTableColumnSizingStyle({ style, width, minWidth, maxWidth, }) {
+    const resolvedMinWidth = minWidth !== null && minWidth !== void 0 ? minWidth : width;
+    return {
+        ...style,
+        ...(width ? { width } : {}),
+        ...(resolvedMinWidth ? { minWidth: resolvedMinWidth } : {}),
+        ...(maxWidth ? { maxWidth } : {}),
+    };
+}
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-[hsl(var(--table-header-background))] [&_tr]:border-b [&_tr]:border-[hsl(var(--table-border))] [&>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 })));
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn("border-t border-[hsl(var(--table-border))] bg-card 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 bg-card transition-colors data-[state=selected]:bg-muted", className), ...props })));
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b border-[hsl(var(--table-border))] bg-card text-card-foreground transition-colors 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,
-        fontWeight: 500,
-        ...(width ? { width } : {}),
-        ...(minWidth ? { minWidth } : {}),
-        ...(maxWidth ? { maxWidth } : {}),
-    }, ...props })));
+const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-11 px-4 py-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: getTableColumnSizingStyle({
+        style: {
+            ...style,
+            fontWeight: 500,
+        },
+        width,
+        minWidth,
+        maxWidth,
+    }), ...props })));
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: {
-        ...style,
-        ...(width ? { width } : {}),
-        ...(minWidth ? { minWidth } : {}),
-        ...(maxWidth ? { maxWidth } : {}),
-    }, ...props })));
+const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("h-12 px-4 py-2 align-middle text-card-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: getTableColumnSizingStyle({ style, width, minWidth, maxWidth }), ...props })));
 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";
@@ -43,11 +49,10 @@ function stickyClassName(sticky, kind) {
     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.
+    const background = kind === "head" ? "bg-[hsl(var(--table-header-background))]" : "bg-card";
     // 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);
+    return cn("sticky", background, side, z, shadow);
 }
 function alignClassName(align) {
     switch (align) {
@@ -104,8 +109,8 @@ export const TABLE_SKELETON_PRESETS = {
 };
 function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, }) {
     const isSorted = currentSortField === field;
-    return (_jsx(TableHead, { className: cn(alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, children: _jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("flex cursor-pointer items-center gap-1 rounded px-2 py-1 font-medium transition-colors hover:text-foreground -ml-2", allowWrap
-                ? "max-w-full items-start whitespace-normal text-left"
+    return (_jsx(TableHead, { className: cn(alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, children: _jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", allowWrap
+                ? "max-w-full whitespace-normal text-left"
                 : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${sortLabel !== null && sortLabel !== void 0 ? sortLabel : field}`, children: [children, _jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }) }));
 }
 function getDefaultSkeleton(column) {
@@ -115,27 +120,56 @@ 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, maxHeight, sorting, pagination, loading = false, loadingRows = 5, striped = false, onRowClick, style, ...props }) {
+function tableRowToneClassName(tone) {
+    switch (tone) {
+        case "muted":
+            return "bg-card";
+        case "warning":
+            return "bg-card";
+        default:
+            return undefined;
+    }
+}
+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, rowTone, maxHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, striped = false, onRowClick, style, ...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 visibleColumnSet = visibleColumnKeys
+        ? new Set(visibleColumnKeys)
+        : undefined;
+    const visibleColumns = visibleColumnSet
+        ? columns.filter((column) => visibleColumnSet.has(column.key))
+        : columns;
     const container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
             ...style,
             ...(maxHeight !== undefined ? { maxHeight } : {}),
-        }, ...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) => {
+        }, ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx("colgroup", { children: visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
+                            width: column.width,
+                            minWidth: column.minWidth,
+                            maxWidth: column.maxWidth,
+                        }) }, column.key))) }), _jsx(TableHeader, { children: _jsx(TableRow, { children: visibleColumns.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: 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: cn(onRowClick && "cursor-pointer hover:bg-muted", 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), 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 }) })) })] }) }));
+                        }) }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: visibleColumns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => {
+                        const resolvedTone = typeof rowTone === "function"
+                            ? rowTone(row, rowIndex)
+                            : rowTone;
+                        return (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, className: cn(onRowClick &&
+                                "cursor-pointer hover:bg-muted", striped &&
+                                rowIndex % 2 === 1 &&
+                                !resolvedTone &&
+                                "bg-[hsl(var(--table-row-striped-background))]", tableRowToneClassName(resolvedTone), typeof rowClassName === "function"
+                                ? rowClassName(row, rowIndex)
+                                : rowClassName), children: visibleColumns.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), 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: Math.max(visibleColumns.length, 1), className: "p-6", children: emptyState }) })) })] }) }));
     if (!pagination) {
         return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
     }

package/dist/tabs.d.ts

@@ -24,11 +24,19 @@ export interface TabDropdownSection {
     id: string;
     label: React.ReactNode;
 }
+export interface TabsItemLabelProps {
+    active: boolean;
+}
+export type TabsItemLabel = React.ReactNode | ((props: TabsItemLabelProps) => React.ReactNode);
 export interface TabsItem {
     value: string;
-    label: React.ReactNode;
+    label: TabsItemLabel;
     content: React.ReactNode;
     disabled?: boolean;
+    /** Renders a close control next to the tab trigger. */
+    onClose?: () => void;
+    /** Accessible label for the close control. */
+    closeLabel?: string;
     /** 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). */
@@ -40,7 +48,7 @@ export interface TabsItem {
 }
 export interface TabWithDropdownProps {
     value: string;
-    label: React.ReactNode;
+    label: TabsItemLabel;
     sections?: TabDropdownSection[];
     disabled?: boolean;
     scrollOffset?: number;
@@ -54,9 +62,12 @@ export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof Ta
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string) => void;
+    size?: "default" | "compact";
+    renderPanels?: boolean;
+    listWrapperClassName?: string;
     listClassName?: string;
     triggerClassName?: string;
     panelClassName?: string;
 }
-declare function Tabs({ items, defaultValue, value, onValueChange, className, listClassName, triggerClassName, panelClassName, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
+declare function Tabs({ items, defaultValue, value, onValueChange, size, renderPanels, className, listWrapperClassName, listClassName, triggerClassName, panelClassName, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
 export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent, TabWithDropdown };

package/dist/tabs.js

@@ -3,10 +3,17 @@ 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 { XIcon } from "./animated-icons/x";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
 import { PopoverMenuItem, PopoverMenuSection } from "./popover-menu";
 const TabsContext = React.createContext(null);
+const getTabValueSelector = (value) => {
+    const escapedValue = typeof CSS !== "undefined" && typeof CSS.escape === "function"
+        ? CSS.escape(value)
+        : value.replace(/["\\]/g, "\\$&");
+    return `[data-tab-value="${escapedValue}"]`;
+};
 export function useTabsContext() {
     return React.useContext(TabsContext);
 }
@@ -24,12 +31,15 @@ const TabsRoot = React.forwardRef(({ defaultValue = "", value: valueProp, onValu
     return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(TabsPrimitive.Root, { ref: ref, value: value, onValueChange: setValue, className: cn(className), ...props, children: children }) }));
 });
 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 })));
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-fit items-stretch justify-center overflow-hidden rounded-control border border-[hsl(var(--tab-list-border))] bg-[hsl(var(--tab-list-background))] p-1 text-[hsl(var(--tab-trigger-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=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 })));
+const TabsTrigger = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, value: value, className: cn("inline-flex min-h-8 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-sm bg-[hsl(var(--tab-list-background))] px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--tab-list-background))] disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:hover:bg-[hsl(var(--tab-trigger-hover-background))] data-[state=inactive]:hover:text-[hsl(var(--tab-trigger-active-foreground))] data-[state=active]:bg-[hsl(var(--tab-trigger-active-background))] data-[state=active]:text-[hsl(var(--tab-trigger-active-foreground))] data-[state=active]:shadow-[0_1px_3px_rgb(15_23_42_/_0.12)]", 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 })));
+const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, value: value, className: cn("focus-visible:outline-none data-[state=inactive]:hidden", className), ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
+function renderTabsItemLabel(label, active) {
+    return typeof label === "function" ? label({ active }) : label;
+}
 function TabTriggerWithDropdown({ item, triggerClassName, }) {
     var _a, _b, _c, _d, _e;
     const [open, setOpen] = React.useState(false);
@@ -71,7 +81,7 @@ function TabTriggerWithDropdown({ item, triggerClassName, }) {
             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))) }) }));
+    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", "data-tab-value": item.value, className: cn("flex items-center gap-1", triggerClassName), children: [renderTabsItemLabel(item.label, isTabSelected), _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: {
@@ -85,12 +95,56 @@ function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSec
             activeSection,
         }, triggerClassName: className }));
 }
-function Tabs({ items, defaultValue, value, onValueChange, className, listClassName, triggerClassName, panelClassName, ...props }) {
+function TabTriggerItem({ item, triggerClassName }) {
+    var _a;
+    const tabsContext = useTabsContext();
+    const isSelected = tabsContext ? tabsContext.value === item.value : false;
+    const label = renderTabsItemLabel(item.label, isSelected);
+    if (!item.onClose) {
+        return (_jsx(TabsTrigger, { value: item.value, disabled: item.disabled, "data-tab-value": item.value, className: triggerClassName, children: label }));
+    }
+    return (_jsxs("div", { className: "inline-flex min-w-max shrink-0 items-stretch whitespace-nowrap", "data-tab-value": item.value, children: [_jsx(TabsTrigger, { value: item.value, disabled: item.disabled, className: cn("shrink-0 rounded-r-none pr-1 data-[state=active]:shadow-none", triggerClassName), children: label }), _jsx("button", { type: "button", "aria-label": (_a = item.closeLabel) !== null && _a !== void 0 ? _a : "Close tab", "data-state": isSelected ? "active" : "inactive", className: cn("inline-flex min-h-8 cursor-pointer items-center justify-center rounded-r-sm bg-[hsl(var(--tab-list-background))] px-2 text-muted-foreground transition-all hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--tab-list-background))] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[hsl(var(--tab-trigger-active-background))] data-[state=active]:text-[hsl(var(--tab-trigger-active-foreground))]", item.disabled && "cursor-not-allowed opacity-50"), disabled: item.disabled, onClick: (event) => {
+                    var _a;
+                    event.stopPropagation();
+                    (_a = item.onClose) === null || _a === void 0 ? void 0 : _a.call(item);
+                }, children: _jsx(XIcon, { size: 12 }) })] }));
+}
+function Tabs({ items, defaultValue, value, onValueChange, size = "default", renderPanels = true, className, listWrapperClassName, 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 : "";
+    const [activeValue, setActiveValue] = React.useState(value !== null && value !== void 0 ? value : fallbackValue);
+    const listWrapperRef = React.useRef(null);
+    const selectedValue = value !== null && value !== void 0 ? value : activeValue;
+    const handleValueChange = React.useCallback((nextValue) => {
+        setActiveValue(nextValue);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
+    }, [onValueChange]);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setActiveValue(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        const listWrapper = listWrapperRef.current;
+        if (!listWrapper || !selectedValue) {
+            return;
+        }
+        const selectedTab = listWrapper.querySelector(getTabValueSelector(selectedValue));
+        if (typeof (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.scrollIntoView) !== "function") {
+            return;
+        }
+        selectedTab.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+        });
+    }, [items.length, selectedValue]);
     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) => 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)))] }));
+    return (_jsxs(TabsRoot, { defaultValue: fallbackValue, value: value, onValueChange: handleValueChange, className: cn("space-y-4", className), ...props, children: [_jsx("div", { ref: listWrapperRef, className: listWrapperClassName, children: _jsx(TabsList, { className: cn(size === "compact" && "p-0.5", listClassName), children: items.map((item) => item.sections && item.sections.length > 0 ? (_jsx(TabTriggerWithDropdown, { item: item, triggerClassName: cn(size === "compact" &&
+                            "min-h-7 px-2.5 py-0.5 data-[state=active]:shadow-sm", triggerClassName) }, item.value)) : (_jsx(TabTriggerItem, { item: item, triggerClassName: cn(size === "compact" &&
+                            "min-h-7 px-2.5 py-0.5 data-[state=active]:shadow-sm", triggerClassName) }, item.value))) }) }), renderPanels
+                ? items.map((item) => (_jsx(TabsContent, { value: item.value, className: cn("pt-4", panelClassName), children: item.content }, item.value)))
+                : null] }));
 }
 export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent, TabWithDropdown };

package/dist/tailwind-preset.js

@@ -12,6 +12,21 @@ export const neaTailwindPreset = {
                 "2xl": "1400px",
             },
         },
+        fontSize: {
+            xs: ["0.9rem", { lineHeight: "1.125rem" }],
+            sm: ["1rem", { lineHeight: "1.375rem" }],
+            base: ["1.12rem", { lineHeight: "1.5rem" }],
+            lg: ["1.25rem", { lineHeight: "1.75rem" }],
+            xl: ["1.375rem", { lineHeight: "1.875rem" }],
+            "2xl": ["1.5rem", { lineHeight: "2rem" }],
+            "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+            "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+            "5xl": ["3rem", { lineHeight: "1" }],
+            "6xl": ["3.75rem", { lineHeight: "1" }],
+            "7xl": ["4.5rem", { lineHeight: "1" }],
+            "8xl": ["6rem", { lineHeight: "1" }],
+            "9xl": ["8rem", { lineHeight: "1" }],
+        },
         extend: {
             colors: {
                 border: "hsl(var(--border))",
@@ -47,12 +62,37 @@ export const neaTailwindPreset = {
                     DEFAULT: "hsl(var(--card))",
                     foreground: "hsl(var(--card-foreground))",
                 },
+                status: {
+                    success: {
+                        DEFAULT: "hsl(var(--status-success))",
+                        foreground: "hsl(var(--status-success-foreground))",
+                    },
+                    warning: {
+                        DEFAULT: "hsl(var(--status-warning))",
+                        foreground: "hsl(var(--status-warning-foreground))",
+                    },
+                    info: {
+                        DEFAULT: "hsl(var(--status-info))",
+                        foreground: "hsl(var(--status-info-foreground))",
+                    },
+                    accent: {
+                        DEFAULT: "hsl(var(--status-accent))",
+                        foreground: "hsl(var(--status-accent-foreground))",
+                    },
+                    destructive: {
+                        DEFAULT: "hsl(var(--status-destructive))",
+                        foreground: "hsl(var(--status-destructive-foreground))",
+                    },
+                },
             },
             borderRadius: {
                 lg: "var(--radius-lg)",
                 md: "var(--radius-md)",
                 sm: "var(--radius-sm)",
                 xl: "var(--radius-xl)",
+                control: "var(--radius-control)",
+                surface: "var(--radius-surface)",
+                overlay: "var(--radius-overlay)",
             },
             fontFamily: {
                 sans: ["var(--font-sans)"],
@@ -70,6 +110,12 @@ export const neaTailwindPreset = {
             width: {
                 control: "var(--size-control)",
             },
+            minWidth: {
+                control: "var(--size-control)",
+            },
+            maxWidth: {
+                control: "var(--size-control)",
+            },
             minHeight: {
                 control: "var(--size-control)",
             },

package/dist/task-mode-shell.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface TaskModeShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    header: React.ReactNode;
+    children: React.ReactNode;
+    loadingProgress?: number;
+    showLoadingBar?: boolean;
+    loadingLabel?: string;
+    ready?: boolean;
+    exiting?: boolean;
+    headerClassName?: string;
+    contentOffsetClassName?: string;
+    bodyClassName?: string;
+    mainPanelClassName?: string;
+    sidePanel?: React.ReactNode;
+    sidePanelOpen?: boolean;
+    sidePanelClassName?: string;
+    sidePanelAriaLabel?: string;
+    sidePanelResizable?: boolean;
+    sidePanelDefaultSize?: number;
+    sidePanelMinSize?: number;
+    sidePanelMaxSize?: number;
+    splitDividerClassName?: string;
+}
+export declare const TaskModeShell: React.ForwardRefExoticComponent<TaskModeShellProps & React.RefAttributes<HTMLDivElement>>;

package/dist/task-mode-shell.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical } from "lucide-react";
+import { cn } from "./lib/utils";
+import { rightPanelEdgeClassName, rightPanelEdgeClosedClassName, rightPanelEdgeDividerClassName, rightPanelEdgeOpenClassName, rightPanelResizeHandleSurfaceClassName, } from "./layout-right-panel-edge";
+import { Progress } from "./progress";
+const TASK_MODE_SIDE_PANEL_DEFAULT_SIZE = 50;
+const TASK_MODE_SIDE_PANEL_MIN_SIZE = 28;
+const TASK_MODE_SIDE_PANEL_MAX_SIZE = 72;
+const TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR = "--task-mode-side-panel-size";
+function clampSidePanelSize(size, minSize, maxSize) {
+    return Math.min(Math.max(size, minSize), maxSize);
+}
+function getResizableSplitTemplate() {
+    return `minmax(0, calc(100% - var(${TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR}))) minmax(0, var(${TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR}))`;
+}
+export const TaskModeShell = React.forwardRef(({ className, header, children, loadingProgress = 0, showLoadingBar = false, loadingLabel = "Loading task", ready = true, exiting = false, headerClassName, contentOffsetClassName = "pt-16", bodyClassName, mainPanelClassName, sidePanel, sidePanelOpen = false, sidePanelClassName, sidePanelAriaLabel, sidePanelResizable = false, sidePanelDefaultSize = TASK_MODE_SIDE_PANEL_DEFAULT_SIZE, sidePanelMinSize = TASK_MODE_SIDE_PANEL_MIN_SIZE, sidePanelMaxSize = TASK_MODE_SIDE_PANEL_MAX_SIZE, splitDividerClassName, ...props }, ref) => {
+    const hasSidePanel = sidePanel !== undefined && sidePanel !== null;
+    const splitOpen = hasSidePanel && sidePanelOpen;
+    const splitContainerRef = React.useRef(null);
+    const resolvedSidePanelMinSize = Math.min(sidePanelMinSize, sidePanelMaxSize);
+    const resolvedSidePanelMaxSize = Math.max(sidePanelMinSize, sidePanelMaxSize);
+    const [sidePanelSize, setSidePanelSize] = React.useState(() => clampSidePanelSize(sidePanelDefaultSize, resolvedSidePanelMinSize, resolvedSidePanelMaxSize));
+    const sidePanelSizeRef = React.useRef(sidePanelSize);
+    React.useEffect(() => {
+        sidePanelSizeRef.current = sidePanelSize;
+    }, [sidePanelSize]);
+    React.useEffect(() => {
+        if (!sidePanelResizable) {
+            return;
+        }
+        setSidePanelSize((size) => clampSidePanelSize(size, resolvedSidePanelMinSize, resolvedSidePanelMaxSize));
+    }, [
+        resolvedSidePanelMaxSize,
+        resolvedSidePanelMinSize,
+        sidePanelResizable,
+    ]);
+    const splitGridTemplateColumns = React.useMemo(() => {
+        if (!splitOpen) {
+            return "minmax(0, 100%) minmax(0, 0%)";
+        }
+        if (sidePanelResizable) {
+            return getResizableSplitTemplate();
+        }
+        return "minmax(0, 50%) minmax(0, 50%)";
+    }, [sidePanelResizable, splitOpen]);
+    const splitStyle = React.useMemo(() => ({
+        [TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR]: `${sidePanelSize}%`,
+        gridTemplateColumns: splitGridTemplateColumns,
+    }), [sidePanelSize, splitGridTemplateColumns]);
+    const handleSidePanelResizePointerDown = React.useCallback((event) => {
+        var _a;
+        if (!sidePanelResizable || !splitOpen || event.button !== 0) {
+            return;
+        }
+        const splitContainer = splitContainerRef.current;
+        const splitContainerWidth = (_a = splitContainer === null || splitContainer === void 0 ? void 0 : splitContainer.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0;
+        if (!splitContainer || splitContainerWidth <= 0) {
+            return;
+        }
+        event.preventDefault();
+        const startX = event.clientX;
+        const startSize = sidePanelSizeRef.current;
+        const previousCursor = document.body.style.cursor;
+        const previousUserSelect = document.body.style.userSelect;
+        const previousTransition = splitContainer.style.transition;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        splitContainer.style.transition = "none";
+        let pendingSize = startSize;
+        const applyPendingSize = () => {
+            splitContainer.style.setProperty(TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR, `${pendingSize}%`);
+        };
+        const handlePointerMove = (moveEvent) => {
+            const nextSize = startSize +
+                ((startX - moveEvent.clientX) / splitContainerWidth) * 100;
+            pendingSize = clampSidePanelSize(nextSize, resolvedSidePanelMinSize, resolvedSidePanelMaxSize);
+            applyPendingSize();
+        };
+        const finishResize = () => {
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousUserSelect;
+            splitContainer.style.transition = previousTransition;
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", finishResize);
+            window.removeEventListener("pointercancel", finishResize);
+            setSidePanelSize(pendingSize);
+        };
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", finishResize, { once: true });
+        window.addEventListener("pointercancel", finishResize, { once: true });
+    }, [
+        resolvedSidePanelMaxSize,
+        resolvedSidePanelMinSize,
+        sidePanelResizable,
+        splitOpen,
+    ]);
+    return (_jsxs("div", { ref: ref, className: cn("relative min-h-screen w-full bg-background text-foreground", className), ...props, children: [showLoadingBar || loadingProgress > 0 ? (_jsx(Progress, { value: loadingProgress, size: "xs", shape: "square", label: loadingLabel, className: cn("absolute left-0 top-0 z-50 transition-opacity duration-300 ease-out", showLoadingBar ? "opacity-100" : "pointer-events-none opacity-0"), trackClassName: "bg-transparent", indicatorClassName: "bg-emerald-600" })) : null, _jsxs("div", { className: cn("transition-all duration-[250ms] ease-out", ready && !exiting
+                    ? "translate-y-0 opacity-100"
+                    : "translate-y-4 opacity-0"), children: [_jsx("header", { className: cn("fixed left-0 right-0 top-0 z-30 border-b bg-background", headerClassName), children: header }), _jsx("main", { className: cn("w-full", contentOffsetClassName), children: hasSidePanel ? (_jsxs("div", { ref: splitContainerRef, className: cn("relative grid min-h-0 w-full overflow-hidden transition-[grid-template-columns] duration-300 ease-in-out", bodyClassName), style: splitStyle, children: [_jsx("section", { className: cn("min-h-0 min-w-0", mainPanelClassName), children: children }), _jsx("aside", { "aria-hidden": !splitOpen, "aria-label": sidePanelAriaLabel, className: cn("min-h-0 min-w-0 bg-[hsl(var(--layout-right-panel-background))] transition-[border-color,box-shadow,opacity] duration-300 ease-in-out", rightPanelEdgeClassName, sidePanelClassName, splitOpen
+                                        ? ["opacity-100", rightPanelEdgeOpenClassName]
+                                        : [
+                                            "pointer-events-none overflow-hidden opacity-0",
+                                            rightPanelEdgeClosedClassName,
+                                        ]), children: sidePanel }), splitOpen && sidePanelResizable ? (_jsxs("button", { type: "button", "aria-label": "Resize side panel", "data-slot": "task-mode-shell-split-divider", className: "group absolute inset-y-0 z-40 flex w-6 -translate-x-1/2 cursor-col-resize touch-none items-center justify-center rounded-none outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", style: {
+                                        left: `calc(100% - var(${TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR}))`,
+                                    }, onPointerDown: handleSidePanelResizePointerDown, children: [_jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-px", rightPanelEdgeDividerClassName, splitDividerClassName) }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none flex h-10 w-4 items-center justify-center rounded-full border text-muted-foreground/80 shadow-sm transition-[border-color,color,box-shadow] group-hover:border-ring group-hover:text-foreground group-hover:shadow-md group-focus-visible:border-ring group-focus-visible:text-foreground group-focus-visible:shadow-md", rightPanelResizeHandleSurfaceClassName), children: _jsx(GripVertical, { className: "h-3.5 w-3.5 stroke-[2.25]" }) })] })) : splitOpen ? (_jsx("div", { "aria-hidden": "true", "data-slot": "task-mode-shell-split-divider", className: cn("pointer-events-none absolute inset-y-0 left-1/2 z-40 w-px -translate-x-px", rightPanelEdgeDividerClassName, splitDividerClassName) })) : null] })) : (children) })] })] }));
+});
+TaskModeShell.displayName = "TaskModeShell";

package/dist/textarea.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { inputControlPaddingClassName } from "./input-control";
 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-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 })));
+const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-16 w-full rounded-control border border-input bg-background 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", inputControlPaddingClassName, 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/theme-switcher.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { type SwitchProps } from "./switch";
+export interface ThemeSwitcherProps extends Omit<SwitchProps, "checked" | "defaultChecked" | "onCheckedChange" | "label" | "description" | "wrapperClassName" | "className"> {
+    /** Controlled state. `true` means dark theme is selected. */
+    checked?: boolean;
+    /** Uncontrolled initial state. `true` means dark theme is selected. */
+    defaultChecked?: boolean;
+    /** Fires when the selected theme changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Icon-only mode for collapsed sidebars. */
+    isCollapsed?: boolean;
+    /** Text shown before the switch. Defaults to the active theme label. */
+    label?: React.ReactNode;
+    /** Label shown when light theme is active and no `label` is provided. */
+    lightLabel?: React.ReactNode;
+    /** Label shown when dark theme is active and no `label` is provided. */
+    darkLabel?: React.ReactNode;
+    /** Accessible action label for the collapsed button when light theme is active. */
+    useDarkLabel?: string;
+    /** Accessible action label for the collapsed button when dark theme is active. */
+    useLightLabel?: string;
+    className?: string;
+}
+declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ThemeSwitcher {
+    var displayName: string;
+}
+export { ThemeSwitcher };

package/dist/theme-switcher.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+import { Switch } from "./switch";
+function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCollapsed = false, label, lightLabel = "Light theme", darkLabel = "Dark theme", useDarkLabel = "Use dark theme", useLightLabel = "Use light theme", className, disabled, ...props }) {
+    const isControlled = checked !== undefined;
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+    const isDark = isControlled ? checked : uncontrolledChecked;
+    const activeLabel = label !== null && label !== void 0 ? label : (isDark ? darkLabel : lightLabel);
+    const ActiveIcon = isDark ? Moon : Sun;
+    const CollapsedIcon = isDark ? Sun : Moon;
+    const handleCheckedChange = React.useCallback((nextChecked) => {
+        if (!isControlled) {
+            setUncontrolledChecked(nextChecked);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
+    }, [isControlled, onCheckedChange]);
+    if (isCollapsed) {
+        return (_jsx("div", { "data-slot": "theme-switcher", className: cn("flex w-full justify-center py-1", className), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled, "aria-label": isDark ? useLightLabel : useDarkLabel, "aria-pressed": isDark, onClick: () => handleCheckedChange(!isDark), children: _jsx(CollapsedIcon, { "aria-hidden": "true", className: "h-4 w-4" }) }) }));
+    }
+    return (_jsx("div", { "data-slot": "theme-switcher", className: "px-1.5 py-1", children: _jsx(Switch, { checked: isDark, onCheckedChange: handleCheckedChange, disabled: disabled, label: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: activeLabel })] }), wrapperClassName: cn("w-full flex-row-reverse justify-between rounded-control px-3 py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", className), ...props }) }));
+}
+ThemeSwitcher.displayName = "ThemeSwitcher";
+export { ThemeSwitcher };