@neasg/design-system 0.4.8 → 0.4.9

package/dist/draggable-tabs.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { XIcon } from "./animated-icons/x";
+import { Badge } from "./badge";
 import { cn } from "./lib/utils";
 import { Tooltip } from "./tooltip";
 function TabButton({ item, dragHandleProps, }) {
@@ -14,13 +15,13 @@ function TabButton({ item, dragHandleProps, }) {
         : item.active
             ? "text-foreground"
             : "text-muted-foreground hover:text-foreground";
-    const content = (_jsxs("div", { className: cn("group flex items-center gap-2 rounded-t-md border-b-2 px-3 transition-colors select-none", item.disabled
+    const content = (_jsxs("div", { className: cn("group flex items-center gap-1.5 border-b-2 px-2.5 transition-colors select-none", item.disabled
             ? "cursor-not-allowed opacity-50"
             : isDraggable
                 ? "cursor-grab active:cursor-grabbing"
                 : "cursor-pointer", item.active
-            ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-green-500 hover:bg-muted"
-            : (_b = item.inactiveClassName) !== null && _b !== void 0 ? _b : "border-transparent hover:bg-muted", item.className), ...dragHandleProps, children: [_jsxs("button", { type: "button", onClick: item.disabled ? undefined : item.onSelect, disabled: item.disabled, className: cn("flex cursor-pointer items-center gap-2 py-3 pr-1 text-sm font-medium whitespace-nowrap disabled:cursor-not-allowed", labelClassName), children: [item.leading, item.label, item.trailing] }), item.onClose ? (_jsx("button", { type: "button", onClick: (event) => {
+            ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-[hsl(var(--tab-indicator))] bg-transparent hover:bg-transparent"
+            : (_b = item.inactiveClassName) !== null && _b !== void 0 ? _b : "border-transparent hover:bg-[hsl(var(--tab-trigger-hover-background))]", item.className), ...dragHandleProps, children: [_jsxs("button", { type: "button", onClick: item.disabled ? undefined : item.onSelect, disabled: item.disabled, className: cn("flex cursor-pointer items-center gap-1.5 py-2 pr-1 text-sm font-medium whitespace-nowrap disabled:cursor-not-allowed", labelClassName), children: [item.badge ? (_jsx(Badge, { variant: item.badge.variant, bordered: item.badge.bordered, size: "icon", children: item.badge.label })) : null, item.leading, item.label, item.trailing] }), item.onClose ? (_jsx("button", { type: "button", onClick: (event) => {
                     var _a;
                     event.stopPropagation();
                     (_a = item.onClose) === null || _a === void 0 ? void 0 : _a.call(item);
@@ -56,6 +57,6 @@ function DraggableTabs({ staticTabs = [], tabs, onReorder, className, ...props }
             onReorder(oldIndex, newIndex);
         }
     };
-    return (_jsxs("div", { className: cn("flex items-end gap-1 border-b overflow-x-auto overflow-y-hidden bg-background", className), ...props, children: [staticTabs.map((tab) => (_jsx(TabButton, { item: tab }, tab.id))), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabs.map((tab) => tab.id), strategy: horizontalListSortingStrategy, children: tabs.map((tab) => (_jsx(SortableTab, { item: tab }, tab.id))) }) })] }));
+    return (_jsxs("div", { "data-slot": "draggable-tabs", className: cn("flex items-end gap-1 border-b overflow-x-auto overflow-y-hidden bg-transparent", "border-[hsl(var(--layout-surface-border))]", className), ...props, children: [staticTabs.map((tab) => (_jsx(TabButton, { item: tab }, tab.id))), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabs.map((tab) => tab.id), strategy: horizontalListSortingStrategy, children: tabs.map((tab) => (_jsx(SortableTab, { item: tab }, tab.id))) }) })] }));
 }
 export { DraggableTabs };

package/dist/drawer.js

@@ -34,7 +34,7 @@ function renderDrawerAction({ action, close, defaultVariant, }) {
             }
         }, children: label }));
 }
-const drawerSurfaceVariants = cva("fixed z-50 flex flex-col gap-4 overflow-y-auto bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", {
+const drawerSurfaceVariants = cva("fixed z-50 flex flex-col gap-3 overflow-y-auto bg-background p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", {
     variants: {
         side: {
             left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-lg",
@@ -46,7 +46,7 @@ const drawerSurfaceVariants = cva("fixed z-50 flex flex-col gap-4 overflow-y-aut
     },
 });
 function DrawerSurface({ side, className, children, hideCloseButton, ...props }) {
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { className: cn(drawerSurfaceVariants({ side }), className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { className: cn(drawerSurfaceVariants({ side }), className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-control text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
 }
 function Drawer({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, side = "right", contentClassName, bodyClassName, hideCloseButton, }) {
     const [isOpen, setIsOpen] = useControllableOpen({

package/dist/dropdown-button.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+import { type PopoverProps } from "./popover";
+type DropdownButtonPopoverProps = Pick<PopoverProps, "align" | "alignOffset" | "avoidCollisions" | "collisionPadding" | "defaultOpen" | "hideWhenDetached" | "modal" | "onOpenChange" | "open" | "side" | "sideOffset" | "sticky">;
+export interface DropdownButtonProps extends Omit<ButtonProps, "children">, DropdownButtonPopoverProps {
+    label: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    children: React.ReactNode;
+    contentClassName?: string;
+    dropdownAriaLabel?: string;
+    menuWidth?: "trigger" | "content";
+    /**
+     * Renders separate primary and menu triggers. Set `false` to keep one popover trigger even when `onClick` is provided.
+     */
+    split?: boolean;
+}
+declare function DropdownButton({ label, leadingIcon, children, className, contentClassName, dropdownAriaLabel, menuWidth, align, alignOffset, avoidCollisions, collisionPadding, defaultOpen, disabled, hideWhenDetached, loading, loadingIndicator, loadingText, modal, onClick, onOpenChange, open, side, sideOffset, split: splitProp, sticky, type, variant, size, ...buttonProps }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownButton };

package/dist/dropdown-button.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "./animated-icons";
+import { Button } from "./button";
+import { Popover } from "./popover";
+import { PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, } from "./popover-primitive";
+import { cn } from "./lib/utils";
+const splitButtonDividerClassNames = {
+    default: "before:bg-primary-foreground/30",
+    destructive: "before:bg-destructive-foreground/30",
+    outline: "before:bg-[hsl(var(--button-outline-border))]",
+    secondary: "before:bg-secondary-foreground/20",
+    ghost: "before:bg-border",
+    link: "before:bg-primary/25",
+};
+function DropdownButton({ label, leadingIcon, children, className, contentClassName, dropdownAriaLabel, menuWidth = "trigger", align = "end", alignOffset, avoidCollisions, collisionPadding, defaultOpen, disabled, hideWhenDetached, loading, loadingIndicator, loadingText, modal, onClick, onOpenChange, open, side, sideOffset = 4, split: splitProp, sticky, type = "button", variant, size, ...buttonProps }) {
+    const menuContentClassName = cn("shadow-overlay-strong border-border/80 bg-popover ring-1 ring-border/50", menuWidth === "trigger" &&
+        "w-[var(--radix-popover-trigger-width)] min-w-56", contentClassName);
+    const labelContent = (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [leadingIcon ? (_jsx("span", { className: "inline-flex shrink-0 items-center", children: leadingIcon })) : null, _jsx("span", { className: "truncate", children: label })] }));
+    const menuButtonLabel = dropdownAriaLabel !== null && dropdownAriaLabel !== void 0 ? dropdownAriaLabel : (typeof label === "string" ? `${label} menu` : "Open menu");
+    const menuButtonSizeClassName = size === "sm" || size === "compact" || size === "compactIcon"
+        ? "w-8"
+        : "w-control";
+    const resolvedVariant = variant !== null && variant !== void 0 ? variant : "default";
+    const split = splitProp !== null && splitProp !== void 0 ? splitProp : Boolean(onClick);
+    if (split) {
+        return (_jsxs(PopoverRoot, { defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { className: cn("inline-flex items-stretch", className), children: [_jsx(Button, { type: type, variant: variant, size: size, className: cn("min-w-0 flex-1 justify-start rounded-r-none", variant === "outline" && "border-r-0"), disabled: disabled, loading: loading, loadingIndicator: loadingIndicator, loadingText: loadingText, onClick: onClick, ...buttonProps, children: labelContent }), _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: variant, size: size, "aria-label": menuButtonLabel, className: cn("relative shrink-0 rounded-l-none px-0 before:absolute before:inset-y-0 before:left-0 before:w-px before:content-['']", menuButtonSizeClassName, splitButtonDividerClassNames[resolvedVariant], variant === "outline" && "border-l-0"), disabled: disabled || loading, children: _jsx(ChevronDownIcon, { size: 14 }) }) })] }) }), _jsx(PopoverContent, { align: align, alignOffset: alignOffset, avoidCollisions: avoidCollisions, collisionPadding: collisionPadding, hideWhenDetached: hideWhenDetached, side: side, sideOffset: sideOffset, sticky: sticky, className: cn("overflow-hidden p-1", menuContentClassName), children: children })] }));
+    }
+    return (_jsx(Popover, { surface: "menu", align: align, alignOffset: alignOffset, avoidCollisions: avoidCollisions, collisionPadding: collisionPadding, defaultOpen: defaultOpen, hideWhenDetached: hideWhenDetached, modal: modal, onOpenChange: onOpenChange, open: open, side: side, sideOffset: sideOffset, sticky: sticky, contentClassName: menuContentClassName, trigger: _jsxs(Button, { type: type, variant: variant, size: size, className: cn("justify-between", className), disabled: disabled, loading: loading, loadingIndicator: loadingIndicator, loadingText: loadingText, onClick: onClick, ...buttonProps, children: [labelContent, _jsx(ChevronDownIcon, { className: "ml-auto", size: 14 })] }), children: children }));
+}
+export { DropdownButton };

package/dist/edit-button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+export interface EditButtonProps extends Omit<ButtonProps, "children" | "size" | "variant"> {
+    label?: React.ReactNode;
+    targetLabel?: string;
+    size?: Extract<ButtonProps["size"], "sm" | "compact" | "default">;
+    variant?: Extract<ButtonProps["variant"], "outline" | "ghost" | "secondary">;
+}
+declare function EditButton({ label, targetLabel, size, variant, "aria-label": ariaLabel, ...props }: EditButtonProps): import("react/jsx-runtime").JSX.Element;
+export { EditButton };

package/dist/edit-button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PencilIcon } from "./animated-icons";
+import { Button } from "./button";
+function EditButton({ label = "Edit", targetLabel, size = "compact", variant = "outline", "aria-label": ariaLabel, ...props }) {
+    return (_jsxs(Button, { variant: variant, size: size, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (targetLabel ? `Edit ${targetLabel}` : undefined), ...props, children: [_jsx(PencilIcon, { size: 14 }), label] }));
+}
+export { EditButton };

package/dist/editable-table.d.ts

@@ -23,10 +23,12 @@ export interface EditableTableProps {
     className?: string;
     emptyPlaceholder?: string;
     checkable?: boolean;
+    checkableHeader?: React.ReactNode;
     activeField?: string;
+    addRowLabel?: React.ReactNode;
     renderRowActions?: (context: EditableTableRowActionContext) => React.ReactNode;
 }
-declare function EditableTable({ value, onChange, columns, isEditing, className, emptyPlaceholder, checkable, activeField, renderRowActions, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
+declare function EditableTable({ value, onChange, columns, isEditing, className, emptyPlaceholder, checkable, checkableHeader, activeField, addRowLabel, renderRowActions, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
 declare namespace EditableTable {
     var displayName: string;
 }

package/dist/editable-table.js

@@ -4,6 +4,7 @@ import { Button } from "./button";
 import { PlusIcon } from "./animated-icons/plus";
 import { TrashIcon } from "./animated-icons/trash";
 import { Checkbox } from "./checkbox";
+import { EmptyState } from "./empty-state";
 import { InputControl } from "./input-control";
 import { TableRoot as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table";
 import { cn } from "./lib/utils";
@@ -32,7 +33,7 @@ function setNestedValue(obj, path, value) {
     current[parts[parts.length - 1]] = value;
     return result;
 }
-function EditableTable({ value, onChange, columns, isEditing = false, className, emptyPlaceholder = "-", checkable = false, activeField = "active", renderRowActions, }) {
+function EditableTable({ value, onChange, columns, isEditing = false, className, emptyPlaceholder = "Enter text...", checkable = false, checkableHeader, activeField = "active", addRowLabel = "Add Row", renderRowActions, }) {
     const [editingCell, setEditingCell] = React.useState(null);
     const [editValue, setEditValue] = React.useState("");
     const inputRef = React.useRef(null);
@@ -48,8 +49,12 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
         if (!isEditing) {
             return;
         }
+        if ((editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
+            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === colPath) {
+            return;
+        }
         const cellValue = getNestedValue(value[rowIndex], colPath);
-        setEditValue(cellValue !== undefined && cellValue !== null ? String(cellValue) : "");
+        setEditValue(isEmptyCellValue(cellValue) ? "" : String(cellValue));
         setEditingCell({ rowIndex, colPath });
     };
     const commitEdit = () => {
@@ -102,27 +107,35 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
         };
         onChange(nextRows);
     }, [activeField, onChange, value]);
+    const isEmptyCellValue = (cellValue) => cellValue === null ||
+        cellValue === undefined ||
+        cellValue === "" ||
+        (typeof cellValue === "string" && cellValue.trim() === "-");
     const formatCellValue = (cellValue) => {
-        if (cellValue === null || cellValue === undefined || cellValue === "") {
-            return emptyPlaceholder;
+        if (isEmptyCellValue(cellValue)) {
+            return "";
         }
         return String(cellValue);
     };
     const hasActionsColumn = isEditing || Boolean(renderRowActions);
-    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border overflow-x-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [checkable ? _jsx(TableHead, { width: "48px", minWidth: "48px" }) : null, columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length +
+    const checkableColumnWidth = checkableHeader ? "9rem" : "48px";
+    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "overflow-x-auto rounded-surface border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [checkable ? (_jsx(TableHead, { width: checkableColumnWidth, minWidth: checkableColumnWidth, children: checkableHeader })) : null, columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length +
                                         (checkable ? 1 : 0) +
-                                        (hasActionsColumn ? 1 : 0), className: "py-8 text-center text-muted-foreground", children: "No data available" }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0 ? "bg-muted/30" : undefined, children: [checkable ? (_jsx(TableCell, { width: "48px", minWidth: "48px", children: _jsx("div", { onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: Boolean(row[activeField]), disabled: !isEditing, onChange: isEditing
+                                        (hasActionsColumn ? 1 : 0), className: "p-0", children: _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-[var(--space-6)]" }) }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0
+                                    ? "bg-[hsl(var(--table-row-striped-background))]"
+                                    : undefined, children: [checkable ? (_jsx(TableCell, { width: checkableColumnWidth, minWidth: checkableColumnWidth, children: _jsx("div", { className: "flex items-center", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: Boolean(row[activeField]), disabled: !isEditing, onChange: isEditing
                                                     ? (event) => handleToggleRow(rowIndex, event.currentTarget.checked)
                                                     : undefined }) }) })) : null, columns.map((column, columnIndex) => {
                                         const cellValue = getNestedValue(row, column.path);
+                                        const isEmptyCell = isEmptyCellValue(cellValue);
                                         const isEditingCell = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
                                             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === column.path;
-                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), width: column.width, minWidth: getColumnMinWidth(column), maxWidth: getColumnMaxWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-control w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
-                                                    cellValue === undefined ||
-                                                    cellValue === ""
+                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), width: column.width, minWidth: getColumnMinWidth(column), maxWidth: getColumnMaxWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx("div", { className: "flex min-h-8 items-center", children: _jsx(InputControl, { ref: inputRef, value: editValue, placeholder: emptyPlaceholder, onChange: (event) => setEditValue(event.target.value), onClick: (event) => event.stopPropagation(), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-8 w-full px-2 py-1 text-sm" }) })) : (_jsx("span", { className: cn("flex min-h-8 items-center whitespace-normal break-words", isEmptyCell
                                                     ? "text-muted-foreground"
-                                                    : undefined), style: { maxWidth: getColumnMaxWidth(column) }, children: formatCellValue(cellValue) })) }, `cell-${rowIndex}-${columnIndex}`));
-                                    }), hasActionsColumn ? (_jsx(TableCell, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [renderRowActions
+                                                    : undefined), style: { maxWidth: getColumnMaxWidth(column) }, children: isEmptyCell && isEditing
+                                                    ? emptyPlaceholder
+                                                    : formatCellValue(cellValue) })) }, `cell-${rowIndex}-${columnIndex}`));
+                                    }), hasActionsColumn ? (_jsx(TableCell, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px", children: _jsxs("div", { className: "flex min-h-8 items-center justify-end gap-1", children: [renderRowActions
                                                     ? renderRowActions({
                                                         row,
                                                         rowIndex,
@@ -132,7 +145,7 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
                                                         insertRow: (nextRow, index = rowIndex + 1) => handleInsertRow(nextRow, index),
                                                         removeRow: () => handleDeleteRow(rowIndex),
                                                     })
-                                                    : null, isEditing ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-destructive hover:bg-destructive/10 hover:text-destructive", onClick: () => handleDeleteRow(rowIndex), "aria-label": `Delete row ${rowIndex + 1}`, children: _jsx(TrashIcon, { size: 16 }) })) : null] }) })) : null] }, `row-${rowIndex}`)))) })] }) }), isEditing ? (_jsxs(Button, { type: "button", variant: "outline", onClick: handleAddRow, className: "w-full justify-center", children: [_jsx(PlusIcon, { size: 16 }), "Add Row"] })) : null] }));
+                                                    : null, isEditing ? (_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:text-destructive", onClick: () => handleDeleteRow(rowIndex), "aria-label": `Delete row ${rowIndex + 1}`, children: _jsx(TrashIcon, { size: 16 }) })) : null] }) })) : null] }, `row-${rowIndex}`)))) })] }) }), isEditing ? (_jsxs(Button, { type: "button", variant: "outline", onClick: handleAddRow, className: "w-full justify-center", children: [_jsx(PlusIcon, { size: 16 }), addRowLabel] })) : null] }));
 }
 EditableTable.displayName = "EditableTable";
 export { EditableTable };

package/dist/field.d.ts

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

package/dist/field.js

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

package/dist/file-upload-status-toast.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { FileUploadProgress, FileUploadResult, FileUploadStatus } from "./use-file-upload";
+export interface FileUploadStatusToastFile {
+    name: string;
+    size?: number | string;
+    type?: string;
+    progress?: number;
+    status?: FileUploadStatus;
+    error?: string;
+    result?: FileUploadResult;
+}
+export interface FileUploadStatusToastProps {
+    files: FileUploadStatusToastFile[];
+    uploadProgress?: Map<string, FileUploadProgress> | FileUploadProgress[];
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+    onCancel?: (file: FileUploadStatusToastFile) => void;
+    onRemove?: (file: FileUploadStatusToastFile) => void;
+    onDismiss?: () => void;
+}
+export interface ShowFileUploadStatusToastOptions extends FileUploadStatusToastProps {
+    id?: string | number;
+    duration?: number;
+    dismissible?: boolean;
+}
+export declare function FileUploadStatusToast({ files, uploadProgress, title, description, className, onCancel, onRemove, onDismiss, }: FileUploadStatusToastProps): import("react/jsx-runtime").JSX.Element;
+export declare function showFileUploadStatusToast({ id, duration, dismissible, onDismiss, ...props }: ShowFileUploadStatusToastOptions): string | number;

package/dist/file-upload-status-toast.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, Paperclip, Trash2, X, } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+import { Progress } from "./progress";
+import { toast } from "./toaster";
+import { Typography } from "./typography";
+const DEFAULT_TOAST_ID = "file-upload-status";
+function formatUploadFileSize(size) {
+    if (typeof size === "string")
+        return size;
+    if (typeof size !== "number")
+        return "";
+    if (size === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.min(Math.floor(Math.log(size) / Math.log(k)), sizes.length - 1);
+    return `${parseFloat((size / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+function getProgress(uploadProgress, fileName) {
+    if (!uploadProgress)
+        return undefined;
+    if (Array.isArray(uploadProgress)) {
+        return uploadProgress.find((progress) => progress.name === fileName);
+    }
+    return uploadProgress.get(fileName);
+}
+function normalizeFiles({ files, uploadProgress, }) {
+    return files.map((file) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const progress = getProgress(uploadProgress, file.name);
+        const result = (_a = progress === null || progress === void 0 ? void 0 : progress.result) !== null && _a !== void 0 ? _a : file.result;
+        return {
+            ...file,
+            progress: (_c = (_b = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _b !== void 0 ? _b : file.progress) !== null && _c !== void 0 ? _c : 0,
+            status: (_e = (_d = progress === null || progress === void 0 ? void 0 : progress.status) !== null && _d !== void 0 ? _d : file.status) !== null && _e !== void 0 ? _e : "pending",
+            error: (_f = progress === null || progress === void 0 ? void 0 : progress.error) !== null && _f !== void 0 ? _f : file.error,
+            result,
+            size: (_g = result === null || result === void 0 ? void 0 : result.size) !== null && _g !== void 0 ? _g : file.size,
+            type: (_h = result === null || result === void 0 ? void 0 : result.type) !== null && _h !== void 0 ? _h : file.type,
+        };
+    });
+}
+function pluralize(count, singular, plural = `${singular}s`) {
+    return `${count} ${count === 1 ? singular : plural}`;
+}
+function getDefaultTitle(files) {
+    const failed = files.filter((file) => file.status === "error").length;
+    const uploading = files.filter((file) => file.status === "pending" || file.status === "uploading").length;
+    const complete = files.filter((file) => file.status === "complete").length;
+    if (failed > 0)
+        return `${pluralize(failed, "file")} failed to upload`;
+    if (uploading > 0)
+        return `Uploading ${pluralize(files.length, "file")}`;
+    if (complete === files.length && files.length > 0) {
+        return `Uploaded ${pluralize(files.length, "file")}`;
+    }
+    return "File upload status";
+}
+function getDefaultDescription(files) {
+    const complete = files.filter((file) => file.status === "complete").length;
+    const failed = files.filter((file) => file.status === "error").length;
+    const uploading = files.filter((file) => file.status === "uploading").length;
+    const pending = files.filter((file) => file.status === "pending").length;
+    const parts = [
+        complete > 0 ? `${complete} complete` : null,
+        uploading > 0 ? `${uploading} uploading` : null,
+        pending > 0 ? `${pending} pending` : null,
+        failed > 0 ? `${failed} failed` : null,
+    ].filter(Boolean);
+    return parts.length > 0 ? parts.join(" / ") : undefined;
+}
+function getStatusIcon(status) {
+    if (status === "complete") {
+        return (_jsx(CheckCircle2, { "aria-hidden": "true", className: "h-4 w-4 text-[hsl(var(--status-success-foreground))]" }));
+    }
+    if (status === "error") {
+        return (_jsx(AlertCircle, { "aria-hidden": "true", className: "h-4 w-4 text-[hsl(var(--status-destructive-foreground))]" }));
+    }
+    return (_jsx(Paperclip, { "aria-hidden": "true", className: "h-4 w-4 text-muted-foreground" }));
+}
+function FileUploadStatusRow({ file, onCancel, onRemove, }) {
+    var _a;
+    const isUploading = file.status === "uploading";
+    const isPending = file.status === "pending";
+    const isComplete = file.status === "complete";
+    const isError = file.status === "error";
+    const sizeLabel = formatUploadFileSize(file.size);
+    const canCancel = (isUploading || isPending) && onCancel;
+    const canRemove = (isComplete || isError) && onRemove;
+    const action = canCancel ? "cancel" : canRemove ? "remove" : null;
+    return (_jsxs("li", { className: cn("rounded-control border bg-background px-2.5 py-2", isError && "border-destructive/80 bg-destructive/5"), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center", children: getStatusIcon(file.status) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "p", variant: "label", className: cn("truncate", isComplete && "text-[hsl(var(--status-success-foreground))]"), title: file.name, children: file.name }), isError ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "mt-0.5 text-destructive", children: (_a = file.error) !== null && _a !== void 0 ? _a : "Upload failed" })) : null] }), sizeLabel ? (_jsx(Typography, { as: "span", variant: "bodySm", className: "shrink-0 text-muted-foreground", children: sizeLabel })) : null, action ? (_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-7 w-7 shrink-0", onClick: () => {
+                            if (action === "cancel") {
+                                onCancel === null || onCancel === void 0 ? void 0 : onCancel(file);
+                            }
+                            else {
+                                onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
+                            }
+                        }, "aria-label": action === "cancel"
+                            ? `Cancel upload for ${file.name}`
+                            : `Remove ${file.name}`, children: action === "cancel" ? (_jsx(X, { "aria-hidden": "true" })) : (_jsx(Trash2, { "aria-hidden": "true" })) })) : null] }), (isUploading || isPending) ? (_jsx(Progress, { className: "mt-2", value: file.progress, size: "sm", label: `Uploading ${file.name}` })) : null] }));
+}
+export function FileUploadStatusToast({ files, uploadProgress, title, description, className, onCancel, onRemove, onDismiss, }) {
+    const normalizedFiles = normalizeFiles({ files, uploadProgress });
+    const resolvedTitle = title !== null && title !== void 0 ? title : getDefaultTitle(normalizedFiles);
+    const resolvedDescription = description !== null && description !== void 0 ? description : getDefaultDescription(normalizedFiles);
+    return (_jsxs("section", { className: cn("w-[min(40rem,calc(100vw-2rem))] overflow-hidden rounded-overlay border border-border bg-background text-foreground shadow-overlay", className), "aria-label": "File upload status", children: [_jsxs("div", { className: "flex items-start gap-3 border-b px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: resolvedTitle }), resolvedDescription ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-0.5", children: resolvedDescription })) : null] }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-7 w-7 shrink-0", onClick: onDismiss, "aria-label": "Dismiss file upload status", children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsx("ul", { className: "max-h-80 space-y-2 overflow-y-auto p-2.5", children: normalizedFiles.map((file, index) => {
+                    var _a;
+                    return (_jsx(FileUploadStatusRow, { file: file, onCancel: onCancel, onRemove: onRemove }, `${file.name}-${(_a = file.size) !== null && _a !== void 0 ? _a : "unknown"}-${index}`));
+                }) })] }));
+}
+export function showFileUploadStatusToast({ id = DEFAULT_TOAST_ID, duration = Number.POSITIVE_INFINITY, dismissible = true, onDismiss, ...props }) {
+    if (props.files.length === 0) {
+        toast.dismiss(id);
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        return id;
+    }
+    return toast.custom((toastId) => (_jsx(FileUploadStatusToast, { ...props, onDismiss: dismissible
+            ? () => {
+                toast.dismiss(toastId);
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            }
+            : undefined })), {
+        id,
+        duration,
+        dismissible,
+        onDismiss,
+        classNames: {
+            toast: "!block !rounded-none !border-0 !bg-transparent !p-0 !pr-0 !shadow-none",
+            content: "!block !min-w-0 !flex-none !gap-0",
+            title: "!block !font-normal !leading-normal !text-foreground",
+        },
+    });
+}

package/dist/file-upload.js

@@ -2,7 +2,7 @@
 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 { File as FileIcon, ImageIcon } from "lucide-react";
 import { CheckIcon } from "./animated-icons/check";
 import { FileTextIcon } from "./animated-icons/file-text";
 import { UploadIcon } from "./animated-icons/upload";
@@ -10,6 +10,7 @@ import { XIcon } from "./animated-icons/x";
 import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Progress } from "./progress";
+import { Typography } from "./typography";
 const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 function formatFileSize(bytes) {
     if (bytes === 0)
@@ -21,12 +22,12 @@ function formatFileSize(bytes) {
 }
 function getFileIcon(file) {
     if (file.type.startsWith("image/")) {
-        return _jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" });
+        return _jsx(ImageIcon, { className: "h-4 w-4 text-muted-foreground" });
     }
     if (file.type === "application/pdf") {
-        return _jsx(FileTextIcon, { className: "text-red-500", size: 16 });
+        return _jsx(FileTextIcon, { className: "text-muted-foreground", size: 16 });
     }
-    return _jsx(File, { className: "h-4 w-4 text-muted-foreground" });
+    return _jsx(FileIcon, { 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);
@@ -89,15 +90,15 @@ export function FileUpload({ accept, maxSize = DEFAULT_MAX_FILE_SIZE, maxFiles =
         (_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
+    return (_jsxs("div", { className: cn("space-y-2", 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-1.5 rounded-surface border border-dashed p-4 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) => {
+                    : "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: 28 }), _jsxs("div", { className: "text-center", children: [_jsx(Typography, { as: "p", variant: "label", children: isDragOver ? "Drop files here" : "Drag & drop files here" }), _jsxs(Typography, { as: "p", variant: "caption", className: "mt-1", children: ["or click to browse (max ", formatFileSize(maxSize), " each)"] })] })] }), error ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "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) => {
+                    return (_jsxs("div", { className: "rounded-control border bg-muted/30 px-2.5 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [getFileIcon(file), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: file.name }), _jsxs(Typography, { as: "p", variant: "caption", 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-[hsl(var(--status-success-foreground))]", 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 ||

package/dist/filter-popover.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { type PopoverProps } from "./popover";
+export interface FilterPopoverOption {
+    id: string;
+    label: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    searchValue?: string;
+    ariaLabel?: string;
+    onSelect?: () => void;
+}
+export interface FilterPopoverGroup {
+    id: string;
+    label: React.ReactNode;
+    options: FilterPopoverOption[];
+    selectedCount?: number;
+    selectionLabel?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyLabel?: React.ReactNode;
+    ariaLabel?: string;
+}
+export interface FilterPopoverProps extends Pick<PopoverProps, "align" | "defaultOpen" | "modal" | "onOpenChange" | "open" | "side"> {
+    groups: FilterPopoverGroup[];
+    selectedCount?: number;
+    trigger?: React.ReactElement;
+    triggerLabel?: React.ReactNode;
+    groupListLabel?: React.ReactNode;
+    resetLabel?: React.ReactNode;
+    emptyLabel?: React.ReactNode;
+    onReset?: () => void;
+    contentClassName?: string;
+    maxHeight?: string;
+}
+declare function getFilterSelectionLabel(count: number): string;
+declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
+export { FilterPopover, getFilterSelectionLabel };