@getgreenline/blaze-ui 1.0.37 → 1.0.38

package/dist/components/collapsible.d.ts

@@ -1,6 +1,6 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
 declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
 //# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAEnE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAOtE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAOtE;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAInE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAWtE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAOtE;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/collapsible.js

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { cn } from '../lib/utils.js';
 
 function Collapsible({ ...props }) {
     return jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
-function CollapsibleTrigger({ ...props }) {
-    return (jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props }));
+function CollapsibleTrigger({ className, ...props }) {
+    return (jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", className: cn("tw:cursor-pointer tw:transition-colors tw:hover:bg-accent/60", className), ...props }));
 }
 function CollapsibleContent({ ...props }) {
     return (jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props }));

package/dist/components/data-table.d.ts

@@ -44,6 +44,7 @@ export interface DataTablePaginationProps {
 export interface DataTableProps<T extends DataTableRow> {
     columns: DataTableColumn<T>[];
     data: T[];
+    onRowClick?: (row: T) => void;
     onSelectionChange?: (selectedIds: string[]) => void;
     selectedRowIds?: string[];
     onSort?: (key: string, direction: SortDirection) => void;
@@ -78,6 +79,6 @@ export interface DataTableProps<T extends DataTableRow> {
     selectContentClassName?: string;
     menuPopupClassName?: string;
 }
-export declare function DataTable<T extends DataTableRow>({ columns, data, onSelectionChange, selectedRowIds, onSort, sortState, expandable, renderExpandedRow, actions, className, pagination, treeData, reorderable, onReorder, onDragReorder, customFilterColumnsWhiteList, loading, loadingRows, emptyState, clickableFields, showColumnVisibility, footerContent, expandedRowIds, onExpandedChange, reservePaginationSpace, striped, selectContentClassName, menuPopupClassName, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T extends DataTableRow>({ columns, data, onRowClick, onSelectionChange, selectedRowIds, onSort, sortState, expandable, renderExpandedRow, actions, className, pagination, treeData, reorderable, onReorder, onDragReorder, customFilterColumnsWhiteList, loading, loadingRows, emptyState, clickableFields, showColumnVisibility, footerContent, expandedRowIds, onExpandedChange, reservePaginationSpace, striped, selectContentClassName, menuPopupClassName, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export { CheckIcon, XIcon };
 //# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-table.js

@@ -10,7 +10,7 @@ import { Button } from './button.js';
 import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext, PaginationLink, PaginationEllipsis } from './pagination.js';
 
 const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
-function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, sortState, expandable = false, renderExpandedRow, actions, className, pagination, treeData = false, reorderable = false, onReorder, onDragReorder, customFilterColumnsWhiteList, loading = false, loadingRows = 5, emptyState, clickableFields, showColumnVisibility = true, footerContent, expandedRowIds, onExpandedChange, reservePaginationSpace = false, striped = true, selectContentClassName, menuPopupClassName, }) {
+function DataTable({ columns, data, onRowClick, onSelectionChange, selectedRowIds, onSort, sortState, expandable = false, renderExpandedRow, actions, className, pagination, treeData = false, reorderable = false, onReorder, onDragReorder, customFilterColumnsWhiteList, loading = false, loadingRows = 5, emptyState, clickableFields, showColumnVisibility = true, footerContent, expandedRowIds, onExpandedChange, reservePaginationSpace = false, striped = true, selectContentClassName, menuPopupClassName, }) {
     const [internalSelectedRows, setInternalSelectedRows] = React.useState(new Set());
     const [internalExpandedRows, setInternalExpandedRows] = React.useState(new Set());
     const [internalSortConfig, setInternalSortConfig] = React.useState({ key: "", direction: null });
@@ -172,6 +172,22 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
         const isDragging = draggedRowId === row.id;
         const isDragOver = dragOverRowId === row.id;
         const totalSiblings = siblingCount ?? data.length;
+        const isRowClickable = !!onRowClick;
+        const handleRowClick = (event) => {
+            const target = event.target;
+            if (target?.closest('button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"]')) {
+                return;
+            }
+            onRowClick?.(row);
+        };
+        const handleRowKeyDown = (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            onRowClick?.(row);
+        };
         const handleDragStart = (e) => {
             setDraggedRowId(row.id);
             e.dataTransfer.effectAllowed = "move";
@@ -200,7 +216,8 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
             setDraggedRowId(null);
             setDragOverRowId(null);
         };
-        return (jsxs(React.Fragment, { children: [jsxs("tr", { className: cn("tw:border-b tw:transition-colors hover:tw:bg-accent/50", rowBgClass, isDragging && "tw:opacity-50", isDragOver && "tw:ring-2 tw:ring-primary tw:ring-inset"), draggable: reorderable, onDragStart: reorderable ? handleDragStart : undefined, onDragEnd: reorderable ? handleDragEnd : undefined, onDragOver: reorderable ? handleDragOver : undefined, onDragLeave: reorderable ? handleDragLeave : undefined, onDrop: reorderable ? handleDrop : undefined, children: [isExpandable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), children: jsx("div", { style: { paddingLeft: indentPadding }, children: canExpand ? (jsx("button", { onClick: () => toggleRowExpansion(row.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-1", "aria-label": isExpanded ? "Collapse row" : "Expand row", "aria-expanded": isExpanded, children: isExpanded ? (jsx(ChevronDownIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) : (jsx(ChevronRightIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) })) : (jsx("span", { className: "tw:w-6" })) }) })), hasRowSelection && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: selectedRows.has(row.id), onCheckedChange: () => toggleRowSelection(row.id), "aria-label": `Select row ${rowIndex + 1}`, className: "tw:h-[22px] tw:w-[22px]" }) }) })), reorderable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:gap-0.5", children: [jsx("button", { onClick: () => onReorder?.(row.id, "up", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === 0, "aria-label": "Move row up", children: jsx(ChevronUpIcon, { className: cn("tw:size-4", rowIndex === 0 && "tw:opacity-30") }) }), jsx("button", { onClick: () => onReorder?.(row.id, "down", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === totalSiblings - 1, "aria-label": "Move row down", children: jsx(ChevronDownIcon, { className: cn("tw:size-4", rowIndex === totalSiblings - 1 && "tw:opacity-30") }) })] }) })), visibleColumns.map((column, colIndex) => {
+        return (jsxs(React.Fragment, { children: [jsxs("tr", { className: cn("tw:border-b tw:transition-colors hover:tw:bg-accent/50", isRowClickable &&
+                        "tw:cursor-pointer tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-inset", rowBgClass, isDragging && "tw:opacity-50", isDragOver && "tw:ring-2 tw:ring-primary tw:ring-inset"), tabIndex: isRowClickable ? 0 : undefined, onClick: isRowClickable ? handleRowClick : undefined, onKeyDown: isRowClickable ? handleRowKeyDown : undefined, draggable: reorderable, onDragStart: reorderable ? handleDragStart : undefined, onDragEnd: reorderable ? handleDragEnd : undefined, onDragOver: reorderable ? handleDragOver : undefined, onDragLeave: reorderable ? handleDragLeave : undefined, onDrop: reorderable ? handleDrop : undefined, children: [isExpandable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsx("div", { style: { paddingLeft: indentPadding }, children: canExpand ? (jsx("button", { onClick: () => toggleRowExpansion(row.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-1", "aria-label": isExpanded ? "Collapse row" : "Expand row", "aria-expanded": isExpanded, children: isExpanded ? (jsx(ChevronDownIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) : (jsx(ChevronRightIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) })) : (jsx("span", { className: "tw:w-6" })) }) })), hasRowSelection && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: selectedRows.has(row.id), onCheckedChange: () => toggleRowSelection(row.id), "aria-label": `Select row ${rowIndex + 1}`, className: "tw:h-[22px] tw:w-[22px]" }) }) })), reorderable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:gap-0.5", children: [jsx("button", { onClick: () => onReorder?.(row.id, "up", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === 0, "aria-label": "Move row up", children: jsx(ChevronUpIcon, { className: cn("tw:size-4", rowIndex === 0 && "tw:opacity-30") }) }), jsx("button", { onClick: () => onReorder?.(row.id, "down", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === totalSiblings - 1, "aria-label": "Move row down", children: jsx(ChevronDownIcon, { className: cn("tw:size-4", rowIndex === totalSiblings - 1 && "tw:opacity-30") }) })] }) })), visibleColumns.map((column, colIndex) => {
                             const clickableField = getClickableField(column.key);
                             const cellContent = column.render
                                 ? column.render(row[column.key], row, rowIndex, depth)
@@ -213,8 +230,11 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
                                                     : 0
                                                 : indentPadding
                                             : 0,
-                                    }, children: clickableField ? (jsx("span", { onClick: () => clickableField.onClick(row), className: "hover:tw:!text-primary/80 hover:tw:underline tw:cursor-pointer tw:transition-colors", children: cellContent })) : (cellContent) }) }, column.key));
-                        }), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), children: visibleActionsForRow.length > 0 && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: `base-ui-row-action-${row.id}`, render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Row actions", ...props, id: `base-ui-row-action-${row.id}`, children: jsx(MoreHorizontalIcon, { className: "tw:size-4" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": "base-ui-toggle-columns-trigger", className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: visibleActionsForRow.map((action, index) => (jsxs(Menu.Item, { onClick: () => action.onClick(row), className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50", action.variant === "destructive" &&
+                                    }, children: clickableField ? (jsx("button", { type: "button", onClick: (event) => {
+                                            event.stopPropagation();
+                                            clickableField.onClick(row);
+                                        }, className: "tw:inline tw:cursor-pointer tw:appearance-none tw:border-0 tw:bg-transparent tw:p-0 tw:text-inherit tw:font-[inherit] tw:transition-colors hover:tw:!text-primary/80 hover:tw:underline", children: cellContent })) : (cellContent) }) }, column.key));
+                        }), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), onClick: (event) => event.stopPropagation(), children: visibleActionsForRow.length > 0 && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: `base-ui-row-action-${row.id}`, render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Row actions", ...props, id: `base-ui-row-action-${row.id}`, children: jsx(MoreHorizontalIcon, { className: "tw:size-4" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": "base-ui-toggle-columns-trigger", className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: visibleActionsForRow.map((action, index) => (jsxs(Menu.Item, { onClick: () => action.onClick(row), className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50", action.variant === "destructive" &&
                                                         "tw:text-destructive focus:tw:text-destructive"), children: [action.icon && (jsx("span", { className: "tw:mr-2", children: action.icon })), action.label] }, index))) }) }) })] })) }))] }), expandable && !treeData && isExpanded && renderExpandedRow && (jsx("tr", { className: "tw:border-b tw:bg-muted/30", children: jsx("td", { colSpan: visibleColumns.length +
                             (showActionsColumn ? 1 : 0) +
                             (hasRowSelection ? 1 : 0) +

package/dist/components/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAI7C,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA0BvE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GAClD,YAAY,CAAC,OAAO,wBAAwB,CAAC,2CAU9C;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAW/B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAWlC;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAI7C,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA8BvE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GAClD,YAAY,CAAC,OAAO,wBAAwB,CAAC,2CAU9C;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAW/B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAWlC;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAA"}

package/dist/components/input-group.js

@@ -6,21 +6,23 @@ import { Input } from './input.js';
 import { Textarea } from './textarea.js';
 
 function InputGroup({ className, ...props }) {
-    return (jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group tw:border-input dark:tw:bg-input/30 tw:relative tw:flex tw:w-full tw:items-center tw:rounded-md tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none", "tw:h-9 tw:min-w-0 has-[>textarea]:tw:h-auto", 
+    return (jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group tw:border-input tw:dark:bg-input/30 tw:relative tw:flex tw:w-full tw:items-center tw:rounded-md tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none", "tw:h-9 tw:min-w-0 tw:has-[>textarea]:h-auto", 
         // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:tw:pl-2", "has-[>[data-align=inline-end]]:[&>input]:tw:pr-2", "has-[>[data-align=block-start]]:tw:h-auto has-[>[data-align=block-start]]:tw:flex-col has-[>[data-align=block-start]]:[&>input]:tw:pb-3", "has-[>[data-align=block-end]]:tw:h-auto has-[>[data-align=block-end]]:tw:flex-col has-[>[data-align=block-end]]:[&>input]:tw:pt-3", 
+        "tw:has-[>[data-align=inline-start]]:[&>input]:pl-2", "tw:has-[>[data-align=inline-end]]:[&>input]:pr-2", "tw:has-[>[data-align=block-start]]:h-auto tw:has-[>[data-align=block-start]]:flex-col tw:has-[>[data-align=block-start]]:[&>input]:pb-3", "tw:has-[>[data-align=block-end]]:h-auto tw:has-[>[data-align=block-end]]:flex-col tw:has-[>[data-align=block-end]]:[&>input]:pt-3", 
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:tw:border-ring has-[[data-slot=input-group-control]:focus-visible]:tw:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:tw:ring-[3px]", 
+        "tw:focus-within:border-ring tw:focus-within:ring-ring/50 tw:focus-within:ring-[3px]", 
         // Error state.
-        "has-[[data-slot][aria-invalid=true]]:tw:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:tw:border-destructive dark:has-[[data-slot][aria-invalid=true]]:tw:ring-destructive/40", className), ...props }));
+        "tw:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 tw:has-[[data-slot][aria-invalid=true]]:border-destructive tw:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", 
+        // Disabled state.
+        "tw:has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed tw:has-[[data-slot=input-group-control]:disabled]:opacity-50", "tw:[&:has([data-slot=input-group-control]:disabled)_[data-slot=input-group-addon]]:cursor-not-allowed tw:[&:has([data-slot=input-group-control]:disabled)_[data-slot=input-group-addon]]:opacity-50", className), ...props }));
 }
-const inputGroupAddonVariants = cva("tw:text-muted-foreground tw:flex tw:h-auto tw:cursor-text tw:items-center tw:justify-center tw:gap-2 tw:py-1.5 tw:text-sm tw:font-medium tw:select-none [&>svg:not([class*='size-'])]:tw:size-4 [&>kbd]:tw:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:tw:opacity-50", {
+const inputGroupAddonVariants = cva("tw:text-muted-foreground tw:flex tw:h-auto tw:cursor-text tw:items-center tw:justify-center tw:gap-2 tw:py-1.5 tw:text-sm tw:font-medium tw:select-none tw:[&>svg:not([class*='size-'])]:size-4 tw:[&>kbd]:rounded-[calc(var(--radius)-5px)] tw:group-data-[disabled=true]/input-group:opacity-50 tw:group-has-[[data-slot=input-group-control]:disabled]/input-group:cursor-not-allowed tw:group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50", {
     variants: {
         align: {
-            "inline-start": "tw:order-first tw:pl-3 has-[>button]:tw:ml-[-0.45rem] has-[>kbd]:tw:ml-[-0.35rem]",
-            "inline-end": "tw:order-last tw:pr-3 has-[>button]:tw:mr-[-0.45rem] has-[>kbd]:tw:mr-[-0.35rem]",
-            "block-start": "tw:order-first tw:w-full tw:justify-start tw:px-3 tw:pt-3 [.tw:border-b]:tw:pb-3 group-has-[>input]/input-group:tw:pt-2.5",
-            "block-end": "tw:order-last tw:w-full tw:justify-start tw:px-3 tw:pb-3 [.tw:border-t]:tw:pt-3 group-has-[>input]/input-group:tw:pb-2.5",
+            "inline-start": "tw:order-first tw:pl-3 tw:has-[>button]:ml-[-0.45rem] tw:has-[>kbd]:ml-[-0.35rem]",
+            "inline-end": "tw:order-last tw:pr-3 tw:has-[>button]:mr-[-0.45rem] tw:has-[>kbd]:mr-[-0.35rem]",
+            "block-start": "tw:order-first tw:w-full tw:justify-start tw:px-3 tw:pt-3 tw:[.tw:border-b]:pb-3 tw:group-has-[>input]/input-group:pt-2.5",
+            "block-end": "tw:order-last tw:w-full tw:justify-start tw:px-3 tw:pb-3 tw:[.tw:border-t]:pt-3 tw:group-has-[>input]/input-group:pb-2.5",
         },
     },
     defaultVariants: {
@@ -38,10 +40,10 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 const inputGroupButtonVariants = cva("tw:text-sm tw:shadow-none tw:flex tw:gap-2 tw:items-center", {
     variants: {
         size: {
-            xs: "tw:h-6 tw:gap-1 tw:px-2 tw:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:tw:size-3.5 has-[>svg]:tw:px-2",
-            sm: "tw:h-8 tw:px-2.5 tw:gap-1.5 tw:rounded-md has-[>svg]:tw:px-2.5",
-            "icon-xs": "tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 has-[>svg]:tw:p-0",
-            "icon-sm": "tw:size-8 tw:p-0 has-[>svg]:tw:p-0",
+            xs: "tw:h-6 tw:gap-1 tw:px-2 tw:rounded-[calc(var(--radius)-5px)] tw:[&>svg:not([class*='size-'])]:size-3.5 tw:has-[>svg]:px-2",
+            sm: "tw:h-8 tw:px-2.5 tw:gap-1.5 tw:rounded-md tw:has-[>svg]:px-2.5",
+            "icon-xs": "tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 tw:has-[>svg]:p-0",
+            "icon-sm": "tw:size-8 tw:p-0 tw:has-[>svg]:p-0",
         },
     },
     defaultVariants: {
@@ -52,13 +54,13 @@ function InputGroupButton({ className, type = "button", variant = "ghost", size
     return (jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
 }
 function InputGroupText({ className, ...props }) {
-    return (jsx("span", { className: cn("tw:text-muted-foreground tw:flex tw:items-center tw:gap-2 tw:text-sm [&_svg]:tw:pointer-events-none [&_svg:not([class*='size-'])]:tw:size-4", className), ...props }));
+    return (jsx("span", { className: cn("tw:text-muted-foreground tw:flex tw:items-center tw:gap-2 tw:text-sm tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function InputGroupInput({ className, ...props }) {
-    return (jsx(Input, { "data-slot": "input-group-control", className: cn("tw:flex-1 tw:rounded-none tw:border-0 tw:bg-transparent tw:shadow-none focus-visible:tw:ring-0 dark:tw:bg-transparent", className), ...props }));
+    return (jsx(Input, { "data-slot": "input-group-control", className: cn("tw:flex-1 tw:rounded-none tw:border-0 tw:bg-transparent tw:shadow-none tw:focus-visible:ring-0 tw:dark:bg-transparent", className), ...props }));
 }
 function InputGroupTextarea({ className, ...props }) {
-    return (jsx(Textarea, { "data-slot": "input-group-control", className: cn("tw:flex-1 tw:resize-none tw:rounded-none tw:border-0 tw:bg-transparent tw:py-3 tw:shadow-none focus-visible:tw:ring-0 dark:tw:bg-transparent", className), ...props }));
+    return (jsx(Textarea, { "data-slot": "input-group-control", className: cn("tw:flex-1 tw:resize-none tw:rounded-none tw:border-0 tw:bg-transparent tw:py-3 tw:shadow-none tw:focus-visible:ring-0 tw:dark:bg-transparent", className), ...props }));
 }
 
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../lib/utils.js';
 
 function Input({ className, type, ...props }) {
-    return (jsx("input", { type: type, "data-slot": "input", className: cn("tw:file:text-foreground tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:border-border tw:h-10 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...props }));
+    return (jsx("input", { type: type, "data-slot": "input", className: cn("tw:file:text-foreground tw:placeholder:text-input-placeholder tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:border-border tw:h-10 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:disabled:cursor-not-allowed tw:disabled:select-none tw:disabled:bg-input tw:disabled:text-muted-foreground tw:disabled:placeholder:text-muted-foreground tw:disabled:opacity-50 tw:disabled:shadow-none tw:dark:disabled:bg-input/80 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...props }));
 }
 
 export { Input };

package/dist/components/multi-select.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MultiSelectProps extends Omit<React.ComponentProps<"button">, "value" | "onChange"> {
+    options: MultiSelectOption[];
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    placeholder?: string;
+    size?: "sm" | "default";
+    emptyMessage?: string;
+}
+declare function MultiSelect({ className, options, value, onValueChange, placeholder, size, emptyMessage, disabled, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelect };
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/components/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAClE,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,KAAK,EACL,aAAa,EACb,WAA8B,EAC9B,IAAgB,EAChB,YAAqC,EACrC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA4HlB;AAqDD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/multi-select.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { ChevronDownIcon, CheckIcon } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+
+function MultiSelect({ className, options, value, onValueChange, placeholder = "Select options", size = "default", emptyMessage = "No options available", disabled, ...props }) {
+    const valueRef = React.useRef(null);
+    const selectedOptions = React.useMemo(() => options.filter((option) => value.includes(option.value)), [options, value]);
+    const selectedLabels = React.useMemo(() => selectedOptions.map((option) => option.label), [selectedOptions]);
+    const [displayValue, setDisplayValue] = React.useState("");
+    React.useLayoutEffect(() => {
+        const valueElement = valueRef.current;
+        if (!valueElement || selectedLabels.length === 0) {
+            setDisplayValue("");
+            return;
+        }
+        const updateDisplayValue = () => {
+            setDisplayValue(getCollapsedDisplayValue(selectedLabels, valueElement.clientWidth, valueElement));
+        };
+        updateDisplayValue();
+        if (typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(updateDisplayValue);
+        resizeObserver.observe(valueElement);
+        return () => resizeObserver.disconnect();
+    }, [selectedLabels]);
+    function toggleValue(optionValue) {
+        const nextValue = value.includes(optionValue)
+            ? value.filter((currentValue) => currentValue !== optionValue)
+            : [...value, optionValue];
+        onValueChange(nextValue);
+    }
+    return (jsxs(PopoverPrimitive.Root, { children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", "data-slot": "multi-select-trigger", "data-size": size, disabled: disabled, className: cn("tw:!flex tw:!w-fit tw:!min-w-0 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-border tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", "aria-invalid:tw:!border-destructive aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40", "dark:tw:!bg-input/30 dark:hover:tw:!bg-input/50", "disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50", "data-[size=default]:tw:!min-h-9 data-[size=sm]:tw:!min-h-8", className), ...props, children: [jsx("span", { ref: valueRef, "data-slot": "multi-select-value", className: cn("tw:!block tw:!min-w-0 tw:!flex-1 tw:!truncate tw:!text-left", selectedOptions.length === 0 && "tw:!text-muted-foreground"), children: selectedOptions.length === 0 ? placeholder : displayValue }), jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!opacity-50" })] }) }), jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "multi-select-content", align: "start", sideOffset: 4, className: "tw:!z-50 tw:!max-h-72 tw:!min-w-[var(--radix-popover-trigger-width)] tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!p-1 tw:!text-popover-foreground tw:!shadow-md tw:!outline-none data-[state=open]:tw:!animate-in data-[state=closed]:tw:!animate-out data-[state=closed]:tw:!fade-out-0 data-[state=open]:tw:!fade-in-0 data-[state=closed]:tw:!zoom-out-95 data-[state=open]:tw:!zoom-in-95", children: options.length === 0 ? (jsx("div", { className: "tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!text-muted-foreground", children: emptyMessage })) : (options.map((option) => {
+                        const isSelected = value.includes(option.value);
+                        return (jsxs("button", { type: "button", "data-slot": "multi-select-item", disabled: option.disabled, className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pr-2 tw:!pl-8 tw:!text-left tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "hover:tw:!bg-accent hover:tw:!text-accent-foreground focus:tw:!bg-accent focus:tw:!text-accent-foreground", option.disabled &&
+                                "tw:!cursor-not-allowed tw:!bg-muted/50 tw:!text-muted-foreground tw:!opacity-60 hover:tw:!bg-muted/50 hover:tw:!text-muted-foreground"), onClick: () => toggleValue(option.value), children: [jsx("span", { className: "tw:!absolute tw:!left-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: isSelected ? jsx(CheckIcon, { className: "tw:!size-4" }) : null }), jsx("span", { className: "tw:!min-w-0 tw:!flex-1 tw:!truncate", children: option.label })] }, option.value));
+                    })) }) })] }));
+}
+function getCollapsedDisplayValue(labels, availableWidth, valueElement) {
+    if (labels.length === 0) {
+        return "";
+    }
+    if (availableWidth <= 0) {
+        return labels.join(", ");
+    }
+    const fullDisplayValue = labels.join(", ");
+    if (measureTextWidth(fullDisplayValue, valueElement) <= availableWidth) {
+        return fullDisplayValue;
+    }
+    for (let visibleCount = labels.length - 1; visibleCount > 0; visibleCount--) {
+        const remainingCount = labels.length - visibleCount;
+        const displayValue = `${labels
+            .slice(0, visibleCount)
+            .join(", ")}, +${remainingCount}`;
+        if (measureTextWidth(displayValue, valueElement) <= availableWidth) {
+            return displayValue;
+        }
+    }
+    return `${labels.length} selected`;
+}
+function measureTextWidth(text, valueElement) {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+        return 0;
+    }
+    const computedStyle = window.getComputedStyle(valueElement);
+    const measuringElement = document.createElement("span");
+    measuringElement.style.position = "absolute";
+    measuringElement.style.visibility = "hidden";
+    measuringElement.style.whiteSpace = "nowrap";
+    measuringElement.style.font = computedStyle.font;
+    measuringElement.textContent = text;
+    document.body.appendChild(measuringElement);
+    const width = measuringElement.getBoundingClientRect().width;
+    measuringElement.remove();
+    return width;
+}
+
+export { MultiSelect };

package/dist/components/page-header/actions.d.ts

@@ -0,0 +1,9 @@
+import type { PageHeaderAction, PageHeaderOverflowItem } from "./types";
+declare function PageHeaderActions({ actions, primaryAction, secondaryAction, overflowMenu, }: {
+    actions?: React.ReactNode;
+    primaryAction?: PageHeaderAction;
+    secondaryAction?: PageHeaderAction;
+    overflowMenu?: PageHeaderOverflowItem[];
+}): import("react/jsx-runtime").JSX.Element | null;
+export { PageHeaderActions };
+//# sourceMappingURL=actions.d.ts.map

package/dist/components/page-header/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/actions.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAuBvE,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,aAAa,EACb,eAAe,EACf,YAAY,GACb,EAAE;IACD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,gBAAgB,CAAA;IAChC,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,YAAY,CAAC,EAAE,sBAAsB,EAAE,CAAA;CACxC,kDAkDA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/page-header/actions.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MoreHorizontalIcon } from 'lucide-react';
+import { Button } from '../button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../dropdown-menu.js';
+import { cn } from '../../lib/utils.js';
+import { getTextContent } from './utils.js';
+
+function PageHeaderActionButton({ label, icon, variant = "default", "aria-label": ariaLabel, ...props }) {
+    return (jsxs(Button, { variant: variant, "aria-label": ariaLabel ?? (icon ? getTextContent(label) : undefined), ...props, children: [icon, jsx("span", { className: cn(icon && "tw:hidden tw:sm:inline-flex"), children: label })] }));
+}
+function PageHeaderActions({ actions, primaryAction, secondaryAction, overflowMenu, }) {
+    const hasDefaultActions = Boolean(primaryAction) ||
+        Boolean(secondaryAction) ||
+        Boolean(overflowMenu?.length);
+    if (!actions && !hasDefaultActions) {
+        return null;
+    }
+    return (jsx("div", { "data-slot": "page-header-actions", className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2", children: actions ? (actions) : (jsxs(Fragment, { children: [secondaryAction ? (jsx(PageHeaderActionButton, { variant: "secondary", ...secondaryAction })) : null, primaryAction ? jsx(PageHeaderActionButton, { ...primaryAction }) : null, overflowMenu?.length ? (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": "More actions", "aria-haspopup": "menu", children: jsx(MoreHorizontalIcon, { className: "tw:size-4" }) }) }), jsx(DropdownMenuContent, { align: "end", children: overflowMenu.map(({ label, icon, ...item }, index) => (jsxs(DropdownMenuItem, { ...item, children: [icon, label] }, index))) })] })) : null] })) }));
+}
+
+export { PageHeaderActions };

package/dist/components/page-header/types.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { Button } from "../button";
+import { DropdownMenuItem } from "../dropdown-menu";
+type PageHeaderAction = Omit<React.ComponentProps<typeof Button>, "children"> & {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+};
+type PageHeaderOverflowItem = Omit<React.ComponentProps<typeof DropdownMenuItem>, "children"> & {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+};
+type PageHeaderBaseProps = Omit<React.ComponentProps<"section">, "title"> & {
+    title: string;
+    subtitle?: string;
+    variant?: "card" | "plain";
+    actions?: React.ReactNode;
+    primaryAction?: PageHeaderAction;
+    secondaryAction?: PageHeaderAction;
+    overflowMenu?: PageHeaderOverflowItem[];
+    as?: "h1" | "h2";
+};
+type PageHeaderLeadingProps = {
+    showBackButton: true;
+    onBack: () => void;
+    icon?: React.ReactNode;
+} | {
+    showBackButton?: false;
+    onBack?: never;
+    icon?: React.ReactNode;
+};
+type PageHeaderProps = PageHeaderBaseProps & PageHeaderLeadingProps;
+export type { PageHeaderAction, PageHeaderOverflowItem, PageHeaderProps, };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/page-header/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,UAAU,CACX,GAAG;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,KAAK,sBAAsB,GAAG,IAAI,CAChC,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,EAC7C,UAAU,CACX,GAAG;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,gBAAgB,CAAA;IAChC,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,YAAY,CAAC,EAAE,sBAAsB,EAAE,CAAA;IACvC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACjB,CAAA;AAED,KAAK,sBAAsB,GACvB;IACE,cAAc,EAAE,IAAI,CAAA;IACpB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,GACD;IACE,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAEL,KAAK,eAAe,GAAG,mBAAmB,GAAG,sBAAsB,CAAA;AAEnE,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,GAChB,CAAA"}

package/dist/components/page-header/utils.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function getTextContent(node: React.ReactNode): string | undefined;
+export { getTextContent };
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/page-header/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,iBAAS,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAejE;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/page-header/utils.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+function getTextContent(node) {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        const text = node.map(getTextContent).filter(Boolean).join(" ").trim();
+        return text || undefined;
+    }
+    if (React.isValidElement(node)) {
+        return getTextContent(node.props.children);
+    }
+    return undefined;
+}
+
+export { getTextContent };

package/dist/components/page-header.d.ts

@@ -0,0 +1,4 @@
+import type { PageHeaderAction, PageHeaderOverflowItem, PageHeaderProps } from "./page-header/types";
+declare function PageHeader({ className, title, subtitle, variant, showBackButton, onBack, icon, actions, primaryAction, secondaryAction, overflowMenu, as: Heading, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { PageHeader, type PageHeaderAction, type PageHeaderOverflowItem, type PageHeaderProps, };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../src/components/page-header.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAE5B,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAgB,EAChB,cAAsB,EACtB,MAAM,EACN,IAAI,EACJ,OAAO,EACP,aAAa,EACb,eAAe,EACf,YAAY,EACZ,EAAE,EAAE,OAAc,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,2CA6DjB;AAED,OAAO,EACL,UAAU,EACV,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,eAAe,GACrB,CAAA"}

package/dist/components/page-header.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowLeftIcon } from 'lucide-react';
+import { Button } from './button.js';
+import { cn } from '../lib/utils.js';
+import { PageHeaderActions } from './page-header/actions.js';
+
+function PageHeader({ className, title, subtitle, variant = "card", showBackButton = false, onBack, icon, actions, primaryAction, secondaryAction, overflowMenu, as: Heading = "h1", ...props }) {
+    return (jsxs("section", { "data-slot": "page-header", className: cn("tw:text-card-foreground tw:flex tw:items-center tw:justify-between tw:gap-4", variant === "card" &&
+            "tw:bg-card tw:rounded-xl tw:border tw:px-5 tw:py-4 tw:shadow-sm", className), ...props, children: [jsxs("div", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-4", children: [showBackButton ? (jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": "Go back", onClick: onBack, className: "tw:!size-12 tw:shrink-0 tw:rounded-[10px]", children: jsx(ArrowLeftIcon, { className: "tw:size-4" }) })) : icon ? (jsx("div", { "data-slot": "page-header-icon", "aria-hidden": "true", className: "tw:bg-background tw:text-muted-foreground tw:flex tw:size-12 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-[10px] tw:border", children: icon })) : null, jsxs("div", { "data-slot": "page-header-content", className: "tw:min-w-0 tw:flex-1", children: [jsx(Heading, { "data-slot": "page-header-title", className: "tw:truncate tw:text-[21px] tw:leading-7 tw:font-bold", children: title }), subtitle ? (jsx("p", { "data-slot": "page-header-subtitle", className: "tw:text-page-header-subtitle tw:mt-1 tw:truncate tw:text-sm", children: subtitle })) : null] })] }), jsx(PageHeaderActions, { actions: actions, primaryAction: primaryAction, secondaryAction: secondaryAction, overflowMenu: overflowMenu })] }));
+}
+
+export { PageHeader };

package/dist/components/textarea.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../lib/utils.js';
 
 function Textarea({ className, ...props }) {
-    return (jsx("textarea", { "data-slot": "textarea", className: cn("tw:border-input tw:placeholder:text-muted-foreground tw:dark:bg-input/30 tw:flex tw:field-sizing-content tw:min-h-16 tw:w-full tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...props }));
+    return (jsx("textarea", { "data-slot": "textarea", className: cn("tw:border-input tw:placeholder:text-input-placeholder tw:dark:bg-input/30 tw:flex tw:field-sizing-content tw:min-h-16 tw:w-full tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:disabled:cursor-not-allowed tw:disabled:select-none tw:disabled:bg-input tw:disabled:text-muted-foreground tw:disabled:placeholder:text-muted-foreground tw:disabled:opacity-50 tw:disabled:shadow-none tw:dark:disabled:bg-input/80 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...props }));
 }
 
 export { Textarea };

package/dist/components/toggle.js

@@ -3,11 +3,11 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { cva } from 'class-variance-authority';
 import { cn } from '../lib/utils.js';
 
-const toggleVariants = cva("tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:rounded-md tw:text-sm tw:font-medium hover:tw:bg-muted hover:tw:text-muted-foreground disabled:tw:pointer-events-none disabled:tw:opacity-50 data-[state=on]:tw:bg-accent data-[state=on]:tw:text-accent-foreground [&_svg]:tw:pointer-events-none [&_svg:not([class*='size-'])]:tw:size-4 [&_svg]:tw:shrink-0 focus-visible:tw:border-ring focus-visible:tw:ring-ring/50 focus-visible:tw:ring-[3px] tw:outline-none tw:transition-[color,box-shadow] aria-invalid:tw:ring-destructive/20 dark:aria-invalid:tw:ring-destructive/40 aria-invalid:tw:border-destructive tw:whitespace-nowrap", {
+const toggleVariants = cva("tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:rounded-md tw:border tw:border-input tw:bg-background tw:text-sm tw:font-medium tw:text-foreground tw:shadow-xs tw:hover:bg-accent tw:hover:text-accent-foreground tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:data-[state=on]:border-primary tw:data-[state=on]:bg-primary tw:data-[state=on]:text-primary-foreground tw:data-[state=on]:hover:bg-primary/90 tw:data-[state=on]:hover:text-primary-foreground [&_svg]:tw:pointer-events-none [&_svg:not([class*='size-'])]:tw:size-4 [&_svg]:tw:shrink-0 tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:outline-none tw:transition-[color,box-shadow,background-color,border-color] tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:whitespace-nowrap", {
     variants: {
         variant: {
-            default: "tw:bg-transparent",
-            outline: "tw:border tw:border-input tw:bg-transparent tw:shadow-xs hover:tw:bg-accent hover:tw:text-accent-foreground",
+            default: "",
+            outline: "tw:bg-transparent tw:hover:bg-accent tw:hover:text-accent-foreground",
         },
         size: {
             default: "tw:h-9 tw:px-2 tw:min-w-9",

package/dist/globals.css

@@ -20,6 +20,8 @@
   --secondary-foreground: oklch(1 0 0);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.1884 0.0128 248.5103);
+  --input-placeholder: oklch(0.6822 0.0118 248.5103);
+  --page-header-subtitle: oklch(0.6822 0.0118 248.5103);
   --accent: oklch(0.9632 0.0127 244.2532);
   --accent-foreground: oklch(0.6723 0.1606 244.9955);
   --destructive: oklch(0.6188 0.2376 25.7658);
@@ -75,6 +77,8 @@
   --secondary-foreground: oklch(0.1884 0.0128 248.5103);
   --muted: oklch(0.209 0 0);
   --muted-foreground: oklch(0.5637 0.0078 247.9662);
+  --input-placeholder: oklch(0.5637 0.0078 247.9662);
+  --page-header-subtitle: oklch(0.5637 0.0078 247.9662);
   --accent: oklch(0.1928 0.0331 242.5459);
   --accent-foreground: oklch(0.6692 0.1607 245.011);
   --destructive: oklch(0.6188 0.2376 25.7658);
@@ -128,6 +132,8 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-input-placeholder: var(--input-placeholder);
+  --color-page-header-subtitle: var(--page-header-subtitle);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
@@ -198,7 +204,9 @@
 }
 
 .blaze-ui-root button[data-slot="button"],
-.blaze-ui-root button[data-slot="switch"] {
+.blaze-ui-root button[data-slot="switch"],
+.blaze-ui-root button[data-slot="toggle"],
+.blaze-ui-root button[data-slot="toggle-group-item"] {
   color: inherit;
   box-shadow: none;
   font: inherit;
@@ -442,6 +450,37 @@
   height: var(--blaze-420-thumb-size);
 }
 
+.blaze-ui-root button[data-slot="toggle"],
+.blaze-ui-root button[data-slot="toggle-group-item"] {
+  appearance: none;
+  background-color: var(--background);
+  border: 1px solid var(--input);
+  border-radius: var(--blaze-420-radius-md);
+  box-shadow: var(--shadow-xs);
+  color: var(--foreground);
+  gap: var(--blaze-420-space-2);
+  text-transform: none;
+}
+
+.blaze-ui-root button[data-slot="toggle"]:hover,
+.blaze-ui-root button[data-slot="toggle-group-item"]:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.blaze-ui-root button[data-slot="toggle"][data-state="on"],
+.blaze-ui-root button[data-slot="toggle-group-item"][data-state="on"] {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.blaze-ui-root button[data-slot="toggle"][data-state="on"]:hover,
+.blaze-ui-root button[data-slot="toggle-group-item"][data-state="on"]:hover {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
 .blaze-ui-root button[data-slot="button"].tw\:bg-primary {
   @apply tw:bg-primary;
 }

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from "./components/switch";
 export * from "./components/radio-group";
 export * from "./components/scroll-area";
 export * from "./components/select";
+export * from "./components/multi-select";
 export * from "./components/sheet";
 export * from "./components/segmented-control";
 export * from "./components/accordion";
@@ -56,6 +57,7 @@ export * from "./components/chart";
 export * from "./components/field";
 export * from "./components/form";
 export * from "./components/input-group";
+export * from "./components/page-header";
 export * from "./components/sidebar";
 export * from "./components/header-app-switcher";
 export * from "./lib/portal-wrapper";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,aAAa,CAAA"}

package/dist/index.js

@@ -11,6 +11,7 @@ export { Switch } from './components/switch.js';
 export { RadioGroup, RadioGroupItem } from './components/radio-group.js';
 export { ScrollArea, ScrollBar } from './components/scroll-area.js';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/select.js';
+export { MultiSelect } from './components/multi-select.js';
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from './components/sheet.js';
 export { SegmentedControl, segmentedControlItemVariants, segmentedControlVariants } from './components/segmented-control.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/accordion.js';
@@ -56,6 +57,7 @@ export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartToolt
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from './components/field.js';
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './components/form.js';
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from './components/input-group.js';
+export { PageHeader } from './components/page-header.js';
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from './components/sidebar.js';
 export { HeaderAppSwitcher } from './components/header-app-switcher.js';
 export { PortalWrapper } from './lib/portal-wrapper.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getgreenline/blaze-ui",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.1.0",