@getgreenline/blaze-ui 1.0.36 → 1.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/components/collapsible.d.ts +1 -1
  2. package/dist/components/collapsible.d.ts.map +1 -1
  3. package/dist/components/collapsible.js +3 -2
  4. package/dist/components/data-table.d.ts +2 -1
  5. package/dist/components/data-table.d.ts.map +1 -1
  6. package/dist/components/data-table.js +24 -4
  7. package/dist/components/hierarchical-select.d.ts +13 -4
  8. package/dist/components/hierarchical-select.d.ts.map +1 -1
  9. package/dist/components/hierarchical-select.js +55 -10
  10. package/dist/components/input-group.d.ts.map +1 -1
  11. package/dist/components/input-group.js +18 -16
  12. package/dist/components/input.js +1 -1
  13. package/dist/components/multi-select.d.ts +17 -0
  14. package/dist/components/multi-select.d.ts.map +1 -0
  15. package/dist/components/multi-select.js +80 -0
  16. package/dist/components/page-header/actions.d.ts +9 -0
  17. package/dist/components/page-header/actions.d.ts.map +1 -0
  18. package/dist/components/page-header/actions.js +21 -0
  19. package/dist/components/page-header/types.d.ts +33 -0
  20. package/dist/components/page-header/types.d.ts.map +1 -0
  21. package/dist/components/page-header/utils.d.ts +4 -0
  22. package/dist/components/page-header/utils.d.ts.map +1 -0
  23. package/dist/components/page-header/utils.js +17 -0
  24. package/dist/components/page-header.d.ts +4 -0
  25. package/dist/components/page-header.d.ts.map +1 -0
  26. package/dist/components/page-header.js +12 -0
  27. package/dist/components/textarea.js +1 -1
  28. package/dist/components/toggle.js +3 -3
  29. package/dist/globals.css +40 -1
  30. package/dist/index.d.ts +2 -0
  31. package/dist/index.d.ts.map +1 -1
  32. package/dist/index.js +2 -0
  33. package/package.json +1 -1
package/dist/components/collapsible.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
2
2
  declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
3
- declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
3
+ declare function CollapsibleTrigger({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
4
4
  declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
5
5
  export { Collapsible, CollapsibleTrigger, CollapsibleContent };
6
6
  //# sourceMappingURL=collapsible.d.ts.map
package/dist/components/collapsible.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,11 +1,12 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
3
+ import { cn } from '../lib/utils.js';
3
4
 
4
5
  function Collapsible({ ...props }) {
5
6
  return jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
6
7
  }
7
- function CollapsibleTrigger({ ...props }) {
8
- return (jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props }));
8
+ function CollapsibleTrigger({ className, ...props }) {
9
+ return (jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", className: cn("tw:cursor-pointer tw:transition-colors tw:hover:bg-accent/60", className), ...props }));
9
10
  }
10
11
  function CollapsibleContent({ ...props }) {
11
12
  return (jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props }));
package/dist/components/data-table.d.ts CHANGED
@@ -44,6 +44,7 @@ export interface DataTablePaginationProps {
44
44
  export interface DataTableProps<T extends DataTableRow> {
45
45
  columns: DataTableColumn<T>[];
46
46
  data: T[];
47
+ onRowClick?: (row: T) => void;
47
48
  onSelectionChange?: (selectedIds: string[]) => void;
48
49
  selectedRowIds?: string[];
49
50
  onSort?: (key: string, direction: SortDirection) => void;
@@ -78,6 +79,6 @@ export interface DataTableProps<T extends DataTableRow> {
78
79
  selectContentClassName?: string;
79
80
  menuPopupClassName?: string;
80
81
  }
81
- 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;
82
+ 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;
82
83
  export { CheckIcon, XIcon };
83
84
  //# sourceMappingURL=data-table.d.ts.map
package/dist/components/data-table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}
1
+ {"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 CHANGED
@@ -10,7 +10,7 @@ import { Button } from './button.js';
10
10
  import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext, PaginationLink, PaginationEllipsis } from './pagination.js';
11
11
 
12
12
  const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
13
- 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, }) {
13
+ 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, }) {
14
14
  const [internalSelectedRows, setInternalSelectedRows] = React.useState(new Set());
15
15
  const [internalExpandedRows, setInternalExpandedRows] = React.useState(new Set());
16
16
  const [internalSortConfig, setInternalSortConfig] = React.useState({ key: "", direction: null });
@@ -172,6 +172,22 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
172
172
  const isDragging = draggedRowId === row.id;
173
173
  const isDragOver = dragOverRowId === row.id;
174
174
  const totalSiblings = siblingCount ?? data.length;
175
+ const isRowClickable = !!onRowClick;
176
+ const handleRowClick = (event) => {
177
+ const target = event.target;
178
+ if (target?.closest('button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"]')) {
179
+ return;
180
+ }
181
+ onRowClick?.(row);
182
+ };
183
+ const handleRowKeyDown = (event) => {
184
+ if (event.target !== event.currentTarget)
185
+ return;
186
+ if (event.key !== "Enter" && event.key !== " ")
187
+ return;
188
+ event.preventDefault();
189
+ onRowClick?.(row);
190
+ };
175
191
  const handleDragStart = (e) => {
176
192
  setDraggedRowId(row.id);
177
193
  e.dataTransfer.effectAllowed = "move";
@@ -200,7 +216,8 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
200
216
  setDraggedRowId(null);
201
217
  setDragOverRowId(null);
202
218
  };
203
- 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) => {
219
+ return (jsxs(React.Fragment, { children: [jsxs("tr", { className: cn("tw:border-b tw:transition-colors hover:tw:bg-accent/50", isRowClickable &&
220
+ "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) => {
204
221
  const clickableField = getClickableField(column.key);
205
222
  const cellContent = column.render
206
223
  ? column.render(row[column.key], row, rowIndex, depth)
@@ -213,8 +230,11 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
213
230
  : 0
214
231
  : indentPadding
215
232
  : 0,
216
- }, 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));
217
- }), 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" &&
233
+ }, children: clickableField ? (jsx("button", { type: "button", onClick: (event) => {
234
+ event.stopPropagation();
235
+ clickableField.onClick(row);
236
+ }, 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));
237
+ }), 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" &&
218
238
  "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 +
219
239
  (showActionsColumn ? 1 : 0) +
220
240
  (hasRowSelection ? 1 : 0) +
package/dist/components/hierarchical-select.d.ts CHANGED
@@ -4,10 +4,8 @@ interface HierarchicalSelectItem {
4
4
  label: string;
5
5
  parentId?: string | null;
6
6
  }
7
- interface HierarchicalSelectProps {
7
+ interface HierarchicalSelectBaseProps {
8
8
  items: HierarchicalSelectItem[];
9
- value?: string;
10
- onValueChange?: (value: string) => void;
11
9
  placeholder?: string;
12
10
  searchPlaceholder?: string;
13
11
  emptyMessage?: string;
@@ -16,7 +14,18 @@ interface HierarchicalSelectProps {
16
14
  disabled?: boolean;
17
15
  label?: string;
18
16
  }
19
- declare function HierarchicalSelect({ items, value, onValueChange, placeholder, searchPlaceholder, emptyMessage, className, triggerStyle, disabled, label, }: HierarchicalSelectProps): import("react/jsx-runtime").JSX.Element;
17
+ interface HierarchicalSelectSingleProps extends HierarchicalSelectBaseProps {
18
+ multi?: false;
19
+ value?: string;
20
+ onValueChange?: (value: string) => void;
21
+ }
22
+ interface HierarchicalSelectMultiProps extends HierarchicalSelectBaseProps {
23
+ multi: true;
24
+ value?: string[];
25
+ onValueChange?: (values: string[]) => void;
26
+ }
27
+ type HierarchicalSelectProps = HierarchicalSelectSingleProps | HierarchicalSelectMultiProps;
28
+ declare function HierarchicalSelect(props: HierarchicalSelectProps): import("react/jsx-runtime").JSX.Element;
20
29
  export { HierarchicalSelect };
21
30
  export type { HierarchicalSelectItem, HierarchicalSelectProps };
22
31
  //# sourceMappingURL=hierarchical-select.d.ts.map
package/dist/components/hierarchical-select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hierarchical-select.d.ts","sourceRoot":"","sources":["../../src/components/hierarchical-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,UAAU,sBAAsB;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACzB;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,sBAAsB,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAuED,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAmC,EACnC,iBAA+B,EAC/B,YAAiC,EACjC,SAAS,EACT,YAAY,EACZ,QAAgB,EAChB,KAAK,GACN,EAAE,uBAAuB,2CA+QzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAC7B,YAAY,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,CAAA"}
1
+ {"version":3,"file":"hierarchical-select.d.ts","sourceRoot":"","sources":["../../src/components/hierarchical-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,UAAU,sBAAsB;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACzB;AAED,UAAU,2BAA2B;IACnC,KAAK,EAAE,sBAAsB,EAAE,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,UAAU,6BAA8B,SAAQ,2BAA2B;IACzE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,UAAU,4BAA6B,SAAQ,2BAA2B;IACxE,KAAK,EAAE,IAAI,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC3C;AAED,KAAK,uBAAuB,GACxB,6BAA6B,GAC7B,4BAA4B,CAAA;AAgFhC,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA+UzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAC7B,YAAY,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,CAAA"}
package/dist/components/hierarchical-select.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import * as PopoverPrimitive from '@radix-ui/react-popover';
4
- import { ChevronDownIcon, SearchIcon, FolderTreeIcon, CheckIcon } from 'lucide-react';
4
+ import { XIcon, ChevronDownIcon, SearchIcon, FolderTreeIcon, CheckIcon } from 'lucide-react';
5
5
  import { cn } from '../lib/utils.js';
6
6
 
7
7
  function buildHierarchy(items) {
@@ -48,10 +48,21 @@ function getDisplayValue(items, value) {
48
48
  }
49
49
  return selected.label;
50
50
  }
51
+ function getDisplayValueMulti(items, values) {
52
+ if (values.length === 0)
53
+ return undefined;
54
+ if (values.length === 1)
55
+ return getDisplayValue(items, values[0]);
56
+ return `${values.length} categories selected`;
57
+ }
51
58
  function countVisibleCategories(groups) {
52
59
  return groups.reduce((count, group) => count + 1 + group.children.length, 0);
53
60
  }
54
- function HierarchicalSelect({ items, value, onValueChange, placeholder = "Select an option...", searchPlaceholder = "Search...", emptyMessage = "No results found", className, triggerStyle, disabled = false, label, }) {
61
+ function HierarchicalSelect(props) {
62
+ const { items, placeholder = "Select an option...", searchPlaceholder = "Search...", emptyMessage = "No results found", className, triggerStyle, disabled = false, label, } = props;
63
+ const isMulti = props.multi === true;
64
+ const multiValues = isMulti ? (props.value ?? []) : [];
65
+ const singleValue = !isMulti ? props.value : undefined;
55
66
  const [open, setOpen] = React.useState(false);
56
67
  const [search, setSearch] = React.useState("");
57
68
  const searchInputRef = React.useRef(null);
@@ -69,7 +80,12 @@ function HierarchicalSelect({ items, value, onValueChange, placeholder = "Select
69
80
  }, []);
70
81
  const hierarchy = React.useMemo(() => buildHierarchy(items), [items]);
71
82
  const filtered = React.useMemo(() => filterHierarchy(hierarchy, search), [hierarchy, search]);
72
- const displayValue = React.useMemo(() => getDisplayValue(items, value), [items, value]);
83
+ const displayValue = React.useMemo(() => {
84
+ if (isMulti)
85
+ return getDisplayValueMulti(items, multiValues);
86
+ return getDisplayValue(items, singleValue);
87
+ }, [isMulti, items, multiValues, singleValue]);
88
+ const hasSelection = isMulti ? multiValues.length > 0 : !!singleValue;
73
89
  const visibleCount = React.useMemo(() => countVisibleCategories(filtered), [filtered]);
74
90
  const handleOpenChange = React.useCallback((nextOpen) => {
75
91
  setOpen(nextOpen);
@@ -77,11 +93,34 @@ function HierarchicalSelect({ items, value, onValueChange, placeholder = "Select
77
93
  setSearch("");
78
94
  }
79
95
  }, []);
96
+ const selectedIds = React.useMemo(() => {
97
+ if (isMulti)
98
+ return new Set(multiValues);
99
+ return new Set(singleValue ? [singleValue] : []);
100
+ }, [isMulti, multiValues, singleValue]);
101
+ const isSelected = React.useCallback((id) => selectedIds.has(id), [selectedIds]);
80
102
  const handleSelect = React.useCallback((id) => {
81
- onValueChange?.(id);
82
- setOpen(false);
83
- setSearch("");
84
- }, [onValueChange]);
103
+ if (isMulti) {
104
+ const next = selectedIds.has(id)
105
+ ? multiValues.filter((v) => v !== id)
106
+ : [...multiValues, id];
107
+ props.onValueChange?.(next);
108
+ // keep popover open in multi mode
109
+ }
110
+ else {
111
+ props.onValueChange?.(id);
112
+ setOpen(false);
113
+ setSearch("");
114
+ }
115
+ },
116
+ // eslint-disable-next-line react-hooks/exhaustive-deps
117
+ [isMulti, selectedIds, multiValues, props.onValueChange]);
118
+ const handleClear = React.useCallback((e) => {
119
+ e.stopPropagation();
120
+ props.onValueChange?.([]);
121
+ },
122
+ // eslint-disable-next-line react-hooks/exhaustive-deps
123
+ [props.onValueChange]);
85
124
  React.useEffect(() => {
86
125
  if (open) {
87
126
  const frame = requestAnimationFrame(() => {
@@ -90,9 +129,15 @@ function HierarchicalSelect({ items, value, onValueChange, placeholder = "Select
90
129
  return () => cancelAnimationFrame(frame);
91
130
  }
92
131
  }, [open]);
93
- return (jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxs(PopoverPrimitive.Trigger, { "data-slot": "hierarchical-select-trigger", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-label": label ?? placeholder, className: cn("tw:!flex tw:!w-full tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:px-3 tw:py-2 tw:!text-[14px] tw:!whitespace-nowrap tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none tw:h-9", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", "disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50", "dark:tw:!bg-input/30 dark:hover:tw:!bg-input/50", !displayValue && "tw:!text-muted-foreground", className), style: triggerStyle, children: [jsx("span", { "data-slot": "hierarchical-select-value", className: "tw:!truncate tw:!flex-1 tw:!text-left", children: displayValue ?? placeholder }), jsx(ChevronDownIcon, { "data-slot": "hierarchical-select-chevron", "aria-hidden": true, className: cn("tw:!size-4 tw:!shrink-0 tw:!opacity-50 tw:!transition-transform tw:!duration-200", open && "tw:!rotate-180") })] }), jsx(PopoverPrimitive.Portal, { container: portalContainer, children: jsxs(PopoverPrimitive.Content, { "data-slot": "hierarchical-select-content", align: "start", sideOffset: 4, className: cn("tw:!bg-popover tw:!text-popover-foreground tw:!z-[9999] tw:!w-[var(--radix-popover-trigger-width)] tw:!origin-(--radix-popover-content-transform-origin) tw:!rounded-md tw:!border tw:!shadow-md tw:!outline-hidden", "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", "data-[side=bottom]:tw:!slide-in-from-top-2 data-[side=left]:tw:!slide-in-from-right-2 data-[side=right]:tw:!slide-in-from-left-2 data-[side=top]:tw:!slide-in-from-bottom-2"), children: [jsxs("div", { "data-slot": "hierarchical-select-search", className: "tw:!flex tw:!items-center tw:!gap-2 tw:!border-b tw:!px-3 tw:!sticky tw:!top-0 tw:!bg-popover tw:!z-10", children: [jsx(SearchIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("input", { ref: searchInputRef, id: searchId, "data-slot": "hierarchical-select-search-input", type: "text", role: "searchbox", "aria-label": searchPlaceholder, "aria-autocomplete": "list", value: search, onChange: (e) => setSearch(e.target.value), placeholder: searchPlaceholder, className: "tw:!flex tw:!h-9 tw:!w-full tw:!bg-transparent tw:!py-2 tw:!text-[14px] tw:!outline-none placeholder:tw:!text-muted-foreground" })] }), jsx("div", { id: listboxId, "data-slot": "hierarchical-select-list", role: "listbox", "aria-label": label ?? placeholder, className: "tw:!max-h-[320px] tw:!overflow-y-auto tw:!overflow-x-hidden tw:!p-1", children: filtered.length === 0 ? (jsxs("div", { "data-slot": "hierarchical-select-empty", role: "status", "aria-live": "polite", className: "tw:!flex tw:!flex-col tw:!items-center tw:!justify-center tw:!gap-2 tw:!py-8 tw:!text-center", children: [jsx("div", { className: "tw:!flex tw:!size-10 tw:!items-center tw:!justify-center tw:!rounded-full tw:!bg-muted", children: jsx(SearchIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!text-muted-foreground" }) }), jsx("div", { className: "tw:!text-[14px] tw:!font-medium", children: emptyMessage }), jsx("p", { className: "tw:!text-[12px] tw:!text-muted-foreground", children: "Try adjusting your search query" })] })) : (filtered.map((group) => (jsxs("div", { "data-slot": "hierarchical-select-group", role: "group", "aria-label": group.parent.label, className: "tw:!mb-1", children: [jsxs("button", { type: "button", "data-slot": "hierarchical-select-parent", role: "option", "aria-selected": value === group.parent.id, onClick: () => handleSelect(group.parent.id), className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!font-semibold tw:!outline-hidden tw:!select-none tw:!transition-colors", "hover:tw:!bg-accent hover:tw:!text-accent-foreground", value === group.parent.id &&
94
- "tw:!bg-accent tw:!text-accent-foreground"), children: [jsx(FolderTreeIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("span", { className: "tw:!flex-1 tw:!text-left tw:!truncate", children: group.parent.label }), group.children.length > 0 && (jsx("span", { "data-slot": "hierarchical-select-badge", className: "tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-full tw:!bg-muted tw:!px-1.5 tw:!py-0.5 tw:!text-[10px] tw:!font-medium tw:!text-muted-foreground tw:!leading-none", children: group.children.length })), value === group.parent.id && (jsx(CheckIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0" }))] }), group.children.length > 0 && (jsx("div", { "data-slot": "hierarchical-select-children", role: "group", "aria-label": `${group.parent.label} subcategories`, className: "tw:!ml-4 tw:!border-l tw:!border-border tw:!pl-2", children: group.children.map((child) => (jsxs("button", { type: "button", "data-slot": "hierarchical-select-child", role: "option", "aria-selected": value === child.id, onClick: () => handleSelect(child.id), className: cn("tw:!relative tw:!flex tw:!w-full 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:!transition-colors", "hover:tw:!bg-accent hover:tw:!text-accent-foreground", "tw:!text-muted-foreground", value === child.id &&
95
- "tw:!bg-accent tw:!text-accent-foreground"), children: [jsx("span", { "aria-hidden": true, className: "tw:!size-1.5 tw:!rounded-full tw:!bg-muted-foreground/50 tw:!shrink-0" }), jsx("span", { className: "tw:!flex-1 tw:!text-left tw:!truncate", children: child.label }), value === child.id && (jsx(CheckIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0" }))] }, child.id))) }))] }, group.parent.id)))) }), jsx("div", { "data-slot": "hierarchical-select-footer", "aria-live": "polite", "aria-atomic": "true", className: "tw:!border-t tw:!px-3 tw:!py-2 tw:!text-[12px] tw:!text-muted-foreground", children: search ? (jsxs("span", { children: [visibleCount, " result", visibleCount !== 1 ? "s" : "", " for \u201C", search, "\u201D"] })) : (jsxs("span", { children: [visibleCount, " categor", visibleCount !== 1 ? "ies" : "y"] })) })] }) })] }));
132
+ return (jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("div", { "data-slot": "hierarchical-select-trigger", role: "combobox", tabIndex: disabled ? -1 : 0, "aria-label": label ?? placeholder, "aria-disabled": disabled || undefined, onKeyDown: (e) => {
133
+ if (!disabled && (e.key === "Enter" || e.key === " ")) {
134
+ e.preventDefault();
135
+ e.currentTarget.click();
136
+ }
137
+ }, className: cn("tw:!flex tw:!w-full tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:px-3 tw:py-2 tw:!text-[length:var(--hs-font-size,14px)] tw:!whitespace-nowrap tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none tw:h-9 tw:!cursor-default", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", disabled &&
138
+ "tw:!cursor-not-allowed tw:!opacity-50 tw:!pointer-events-none", "dark:tw:!bg-input/30 dark:hover:tw:!bg-input/50", !displayValue && "tw:!text-muted-foreground", className), style: triggerStyle, children: [jsx("span", { "data-slot": "hierarchical-select-value", className: "tw:!truncate tw:!flex-1 tw:!text-left", children: displayValue ?? placeholder }), isMulti && hasSelection && (jsx("button", { type: "button", "data-slot": "hierarchical-select-clear", "aria-label": "Clear selection", onClick: handleClear, className: "tw:!shrink-0 tw:!flex tw:!items-center tw:!justify-center tw:!size-4 tw:!rounded-sm tw:!text-muted-foreground hover:tw:!text-foreground tw:!transition-colors tw:!pointer-events-auto", children: jsx(XIcon, { className: "tw:!size-3" }) })), jsx(ChevronDownIcon, { "data-slot": "hierarchical-select-chevron", "aria-hidden": true, className: cn("tw:!size-4 tw:!shrink-0 tw:!opacity-50 tw:!transition-transform tw:!duration-200", open && "tw:!rotate-180") })] }) }), jsx(PopoverPrimitive.Portal, { container: portalContainer, children: jsxs(PopoverPrimitive.Content, { "data-slot": "hierarchical-select-content", align: "start", sideOffset: 4, className: cn("tw:!bg-popover tw:!text-popover-foreground tw:!z-[9999] tw:!w-[var(--radix-popover-trigger-width)] tw:!origin-(--radix-popover-content-transform-origin) tw:!rounded-md tw:!border tw:!shadow-md tw:!outline-hidden", "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", "data-[side=bottom]:tw:!slide-in-from-top-2 data-[side=left]:tw:!slide-in-from-right-2 data-[side=right]:tw:!slide-in-from-left-2 data-[side=top]:tw:!slide-in-from-bottom-2"), children: [jsxs("div", { "data-slot": "hierarchical-select-search", className: "tw:!flex tw:!items-center tw:!gap-2 tw:!border-b tw:!px-3 tw:!sticky tw:!top-0 tw:!bg-popover tw:!z-10", children: [jsx(SearchIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("input", { ref: searchInputRef, id: searchId, "data-slot": "hierarchical-select-search-input", type: "text", role: "searchbox", "aria-label": searchPlaceholder, "aria-autocomplete": "list", value: search, onChange: (e) => setSearch(e.target.value), placeholder: searchPlaceholder, className: "tw:!flex tw:!h-9 tw:!w-full tw:!bg-transparent tw:!py-2 tw:!text-[14px] tw:!outline-none placeholder:tw:!text-muted-foreground" })] }), jsx("div", { id: listboxId, "data-slot": "hierarchical-select-list", role: "listbox", "aria-multiselectable": isMulti, "aria-label": label ?? placeholder, className: "tw:!max-h-[320px] tw:!overflow-y-auto tw:!overflow-x-hidden tw:!p-1", children: filtered.length === 0 ? (jsxs("div", { "data-slot": "hierarchical-select-empty", role: "status", "aria-live": "polite", className: "tw:!flex tw:!flex-col tw:!items-center tw:!justify-center tw:!gap-2 tw:!py-8 tw:!text-center", children: [jsx("div", { className: "tw:!flex tw:!size-10 tw:!items-center tw:!justify-center tw:!rounded-full tw:!bg-muted", children: jsx(SearchIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!text-muted-foreground" }) }), jsx("div", { className: "tw:!text-[14px] tw:!font-medium", children: emptyMessage }), jsx("p", { className: "tw:!text-[12px] tw:!text-muted-foreground", children: "Try adjusting your search query" })] })) : (filtered.map((group) => (jsxs("div", { "data-slot": "hierarchical-select-group", role: "group", "aria-label": group.parent.label, className: "tw:!mb-1", children: [jsxs("button", { type: "button", "data-slot": "hierarchical-select-parent", role: "option", "aria-selected": isSelected(group.parent.id), onClick: () => handleSelect(group.parent.id), className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!font-semibold tw:!outline-hidden tw:!select-none tw:!transition-colors", "hover:tw:!bg-accent hover:tw:!text-accent-foreground", isSelected(group.parent.id) &&
139
+ "tw:!bg-accent tw:!text-accent-foreground"), children: [jsx(FolderTreeIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("span", { className: "tw:!flex-1 tw:!text-left tw:!truncate", children: group.parent.label }), group.children.length > 0 && (jsx("span", { "data-slot": "hierarchical-select-badge", className: "tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-full tw:!bg-muted tw:!px-1.5 tw:!py-0.5 tw:!text-[10px] tw:!font-medium tw:!text-muted-foreground tw:!leading-none", children: group.children.length })), isSelected(group.parent.id) && (jsx(CheckIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0" }))] }), group.children.length > 0 && (jsx("div", { "data-slot": "hierarchical-select-children", role: "group", "aria-label": `${group.parent.label} subcategories`, className: "tw:!ml-4 tw:!border-l tw:!border-border tw:!pl-2", children: group.children.map((child) => (jsxs("button", { type: "button", "data-slot": "hierarchical-select-child", role: "option", "aria-selected": isSelected(child.id), onClick: () => handleSelect(child.id), className: cn("tw:!relative tw:!flex tw:!w-full 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:!transition-colors", "hover:tw:!bg-accent hover:tw:!text-accent-foreground", "tw:!text-muted-foreground", isSelected(child.id) &&
140
+ "tw:!bg-accent tw:!text-accent-foreground"), children: [jsx("span", { "aria-hidden": true, className: "tw:!size-1.5 tw:!rounded-full tw:!bg-muted-foreground/50 tw:!shrink-0" }), jsx("span", { className: "tw:!flex-1 tw:!text-left tw:!truncate", children: child.label }), isSelected(child.id) && (jsx(CheckIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0" }))] }, child.id))) }))] }, group.parent.id)))) }), jsx("div", { "data-slot": "hierarchical-select-footer", "aria-live": "polite", "aria-atomic": "true", className: "tw:!border-t tw:!px-3 tw:!py-2 tw:!text-[12px] tw:!text-muted-foreground", children: search ? (jsxs("span", { children: [visibleCount, " result", visibleCount !== 1 ? "s" : "", " for \u201C", search, "\u201D"] })) : (jsxs("span", { children: [visibleCount, " categor", visibleCount !== 1 ? "ies" : "y"] })) })] }) })] }));
96
141
  }
97
142
 
98
143
  export { HierarchicalSelect };
package/dist/components/input-group.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -6,21 +6,23 @@ import { Input } from './input.js';
6
6
  import { Textarea } from './textarea.js';
7
7
 
8
8
  function InputGroup({ className, ...props }) {
9
- 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",
9
+ 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",
10
10
  // Variants based on alignment.
11
- "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",
11
+ "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",
12
12
  // Focus state.
13
- "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]",
13
+ "tw:focus-within:border-ring tw:focus-within:ring-ring/50 tw:focus-within:ring-[3px]",
14
14
  // Error state.
15
- "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 }));
15
+ "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",
16
+ // Disabled state.
17
+ "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 }));
16
18
  }
17
- 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", {
19
+ 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", {
18
20
  variants: {
19
21
  align: {
20
- "inline-start": "tw:order-first tw:pl-3 has-[>button]:tw:ml-[-0.45rem] has-[>kbd]:tw:ml-[-0.35rem]",
21
- "inline-end": "tw:order-last tw:pr-3 has-[>button]:tw:mr-[-0.45rem] has-[>kbd]:tw:mr-[-0.35rem]",
22
- "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",
23
- "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",
22
+ "inline-start": "tw:order-first tw:pl-3 tw:has-[>button]:ml-[-0.45rem] tw:has-[>kbd]:ml-[-0.35rem]",
23
+ "inline-end": "tw:order-last tw:pr-3 tw:has-[>button]:mr-[-0.45rem] tw:has-[>kbd]:mr-[-0.35rem]",
24
+ "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",
25
+ "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",
24
26
  },
25
27
  },
26
28
  defaultVariants: {
@@ -38,10 +40,10 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
38
40
  const inputGroupButtonVariants = cva("tw:text-sm tw:shadow-none tw:flex tw:gap-2 tw:items-center", {
39
41
  variants: {
40
42
  size: {
41
- 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",
42
- sm: "tw:h-8 tw:px-2.5 tw:gap-1.5 tw:rounded-md has-[>svg]:tw:px-2.5",
43
- "icon-xs": "tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 has-[>svg]:tw:p-0",
44
- "icon-sm": "tw:size-8 tw:p-0 has-[>svg]:tw:p-0",
43
+ 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",
44
+ sm: "tw:h-8 tw:px-2.5 tw:gap-1.5 tw:rounded-md tw:has-[>svg]:px-2.5",
45
+ "icon-xs": "tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 tw:has-[>svg]:p-0",
46
+ "icon-sm": "tw:size-8 tw:p-0 tw:has-[>svg]:p-0",
45
47
  },
46
48
  },
47
49
  defaultVariants: {
@@ -52,13 +54,13 @@ function InputGroupButton({ className, type = "button", variant = "ghost", size
52
54
  return (jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
53
55
  }
54
56
  function InputGroupText({ className, ...props }) {
55
- 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 }));
57
+ 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 }));
56
58
  }
57
59
  function InputGroupInput({ className, ...props }) {
58
- 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 }));
60
+ 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 }));
59
61
  }
60
62
  function InputGroupTextarea({ className, ...props }) {
61
- 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 }));
63
+ 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 }));
62
64
  }
63
65
 
64
66
  export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
package/dist/components/input.js CHANGED
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { cn } from '../lib/utils.js';
3
3
 
4
4
  function Input({ className, type, ...props }) {
5
- 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 }));
5
+ 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 }));
6
6
  }
7
7
 
8
8
  export { Input };
package/dist/components/multi-select.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+ export interface MultiSelectOption {
3
+ value: string;
4
+ label: string;
5
+ disabled?: boolean;
6
+ }
7
+ export interface MultiSelectProps extends Omit<React.ComponentProps<"button">, "value" | "onChange"> {
8
+ options: MultiSelectOption[];
9
+ value: string[];
10
+ onValueChange: (value: string[]) => void;
11
+ placeholder?: string;
12
+ size?: "sm" | "default";
13
+ emptyMessage?: string;
14
+ }
15
+ declare function MultiSelect({ className, options, value, onValueChange, placeholder, size, emptyMessage, disabled, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
16
+ export { MultiSelect };
17
+ //# sourceMappingURL=multi-select.d.ts.map
package/dist/components/multi-select.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,80 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import * as PopoverPrimitive from '@radix-ui/react-popover';
4
+ import { ChevronDownIcon, CheckIcon } from 'lucide-react';
5
+ import { cn } from '../lib/utils.js';
6
+
7
+ function MultiSelect({ className, options, value, onValueChange, placeholder = "Select options", size = "default", emptyMessage = "No options available", disabled, ...props }) {
8
+ const valueRef = React.useRef(null);
9
+ const selectedOptions = React.useMemo(() => options.filter((option) => value.includes(option.value)), [options, value]);
10
+ const selectedLabels = React.useMemo(() => selectedOptions.map((option) => option.label), [selectedOptions]);
11
+ const [displayValue, setDisplayValue] = React.useState("");
12
+ React.useLayoutEffect(() => {
13
+ const valueElement = valueRef.current;
14
+ if (!valueElement || selectedLabels.length === 0) {
15
+ setDisplayValue("");
16
+ return;
17
+ }
18
+ const updateDisplayValue = () => {
19
+ setDisplayValue(getCollapsedDisplayValue(selectedLabels, valueElement.clientWidth, valueElement));
20
+ };
21
+ updateDisplayValue();
22
+ if (typeof ResizeObserver === "undefined") {
23
+ return;
24
+ }
25
+ const resizeObserver = new ResizeObserver(updateDisplayValue);
26
+ resizeObserver.observe(valueElement);
27
+ return () => resizeObserver.disconnect();
28
+ }, [selectedLabels]);
29
+ function toggleValue(optionValue) {
30
+ const nextValue = value.includes(optionValue)
31
+ ? value.filter((currentValue) => currentValue !== optionValue)
32
+ : [...value, optionValue];
33
+ onValueChange(nextValue);
34
+ }
35
+ 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) => {
36
+ const isSelected = value.includes(option.value);
37
+ 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 &&
38
+ "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));
39
+ })) }) })] }));
40
+ }
41
+ function getCollapsedDisplayValue(labels, availableWidth, valueElement) {
42
+ if (labels.length === 0) {
43
+ return "";
44
+ }
45
+ if (availableWidth <= 0) {
46
+ return labels.join(", ");
47
+ }
48
+ const fullDisplayValue = labels.join(", ");
49
+ if (measureTextWidth(fullDisplayValue, valueElement) <= availableWidth) {
50
+ return fullDisplayValue;
51
+ }
52
+ for (let visibleCount = labels.length - 1; visibleCount > 0; visibleCount--) {
53
+ const remainingCount = labels.length - visibleCount;
54
+ const displayValue = `${labels
55
+ .slice(0, visibleCount)
56
+ .join(", ")}, +${remainingCount}`;
57
+ if (measureTextWidth(displayValue, valueElement) <= availableWidth) {
58
+ return displayValue;
59
+ }
60
+ }
61
+ return `${labels.length} selected`;
62
+ }
63
+ function measureTextWidth(text, valueElement) {
64
+ if (typeof document === "undefined" || typeof window === "undefined") {
65
+ return 0;
66
+ }
67
+ const computedStyle = window.getComputedStyle(valueElement);
68
+ const measuringElement = document.createElement("span");
69
+ measuringElement.style.position = "absolute";
70
+ measuringElement.style.visibility = "hidden";
71
+ measuringElement.style.whiteSpace = "nowrap";
72
+ measuringElement.style.font = computedStyle.font;
73
+ measuringElement.textContent = text;
74
+ document.body.appendChild(measuringElement);
75
+ const width = measuringElement.getBoundingClientRect().width;
76
+ measuringElement.remove();
77
+ return width;
78
+ }
79
+
80
+ export { MultiSelect };
package/dist/components/page-header/actions.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { PageHeaderAction, PageHeaderOverflowItem } from "./types";
2
+ declare function PageHeaderActions({ actions, primaryAction, secondaryAction, overflowMenu, }: {
3
+ actions?: React.ReactNode;
4
+ primaryAction?: PageHeaderAction;
5
+ secondaryAction?: PageHeaderAction;
6
+ overflowMenu?: PageHeaderOverflowItem[];
7
+ }): import("react/jsx-runtime").JSX.Element | null;
8
+ export { PageHeaderActions };
9
+ //# sourceMappingURL=actions.d.ts.map
package/dist/components/page-header/actions.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,21 @@
1
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
+ import { MoreHorizontalIcon } from 'lucide-react';
3
+ import { Button } from '../button.js';
4
+ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../dropdown-menu.js';
5
+ import { cn } from '../../lib/utils.js';
6
+ import { getTextContent } from './utils.js';
7
+
8
+ function PageHeaderActionButton({ label, icon, variant = "default", "aria-label": ariaLabel, ...props }) {
9
+ 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 })] }));
10
+ }
11
+ function PageHeaderActions({ actions, primaryAction, secondaryAction, overflowMenu, }) {
12
+ const hasDefaultActions = Boolean(primaryAction) ||
13
+ Boolean(secondaryAction) ||
14
+ Boolean(overflowMenu?.length);
15
+ if (!actions && !hasDefaultActions) {
16
+ return null;
17
+ }
18
+ 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] })) }));
19
+ }
20
+
21
+ export { PageHeaderActions };
package/dist/components/page-header/types.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import * as React from "react";
2
+ import { Button } from "../button";
3
+ import { DropdownMenuItem } from "../dropdown-menu";
4
+ type PageHeaderAction = Omit<React.ComponentProps<typeof Button>, "children"> & {
5
+ label: React.ReactNode;
6
+ icon?: React.ReactNode;
7
+ };
8
+ type PageHeaderOverflowItem = Omit<React.ComponentProps<typeof DropdownMenuItem>, "children"> & {
9
+ label: React.ReactNode;
10
+ icon?: React.ReactNode;
11
+ };
12
+ type PageHeaderBaseProps = Omit<React.ComponentProps<"section">, "title"> & {
13
+ title: string;
14
+ subtitle?: string;
15
+ variant?: "card" | "plain";
16
+ actions?: React.ReactNode;
17
+ primaryAction?: PageHeaderAction;
18
+ secondaryAction?: PageHeaderAction;
19
+ overflowMenu?: PageHeaderOverflowItem[];
20
+ as?: "h1" | "h2";
21
+ };
22
+ type PageHeaderLeadingProps = {
23
+ showBackButton: true;
24
+ onBack: () => void;
25
+ icon?: React.ReactNode;
26
+ } | {
27
+ showBackButton?: false;
28
+ onBack?: never;
29
+ icon?: React.ReactNode;
30
+ };
31
+ type PageHeaderProps = PageHeaderBaseProps & PageHeaderLeadingProps;
32
+ export type { PageHeaderAction, PageHeaderOverflowItem, PageHeaderProps, };
33
+ //# sourceMappingURL=types.d.ts.map
package/dist/components/page-header/types.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ declare function getTextContent(node: React.ReactNode): string | undefined;
3
+ export { getTextContent };
4
+ //# sourceMappingURL=utils.d.ts.map
package/dist/components/page-header/utils.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,17 @@
1
+ import * as React from 'react';
2
+
3
+ function getTextContent(node) {
4
+ if (typeof node === "string" || typeof node === "number") {
5
+ return String(node);
6
+ }
7
+ if (Array.isArray(node)) {
8
+ const text = node.map(getTextContent).filter(Boolean).join(" ").trim();
9
+ return text || undefined;
10
+ }
11
+ if (React.isValidElement(node)) {
12
+ return getTextContent(node.props.children);
13
+ }
14
+ return undefined;
15
+ }
16
+
17
+ export { getTextContent };
package/dist/components/page-header.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { PageHeaderAction, PageHeaderOverflowItem, PageHeaderProps } from "./page-header/types";
2
+ declare function PageHeader({ className, title, subtitle, variant, showBackButton, onBack, icon, actions, primaryAction, secondaryAction, overflowMenu, as: Heading, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
3
+ export { PageHeader, type PageHeaderAction, type PageHeaderOverflowItem, type PageHeaderProps, };
4
+ //# sourceMappingURL=page-header.d.ts.map
package/dist/components/page-header.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,12 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { ArrowLeftIcon } from 'lucide-react';
3
+ import { Button } from './button.js';
4
+ import { cn } from '../lib/utils.js';
5
+ import { PageHeaderActions } from './page-header/actions.js';
6
+
7
+ function PageHeader({ className, title, subtitle, variant = "card", showBackButton = false, onBack, icon, actions, primaryAction, secondaryAction, overflowMenu, as: Heading = "h1", ...props }) {
8
+ 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" &&
9
+ "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 })] }));
10
+ }
11
+
12
+ export { PageHeader };
package/dist/components/textarea.js CHANGED
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { cn } from '../lib/utils.js';
3
3
 
4
4
  function Textarea({ className, ...props }) {
5
- 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 }));
5
+ 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 }));
6
6
  }
7
7
 
8
8
  export { Textarea };
package/dist/components/toggle.js CHANGED
@@ -3,11 +3,11 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
3
3
  import { cva } from 'class-variance-authority';
4
4
  import { cn } from '../lib/utils.js';
5
5
 
6
- 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", {
6
+ 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", {
7
7
  variants: {
8
8
  variant: {
9
- default: "tw:bg-transparent",
10
- outline: "tw:border tw:border-input tw:bg-transparent tw:shadow-xs hover:tw:bg-accent hover:tw:text-accent-foreground",
9
+ default: "",
10
+ outline: "tw:bg-transparent tw:hover:bg-accent tw:hover:text-accent-foreground",
11
11
  },
12
12
  size: {
13
13
  default: "tw:h-9 tw:px-2 tw:min-w-9",
package/dist/globals.css CHANGED
@@ -20,6 +20,8 @@
20
20
  --secondary-foreground: oklch(1 0 0);
21
21
  --muted: oklch(0.968 0.007 247.896);
22
22
  --muted-foreground: oklch(0.1884 0.0128 248.5103);
23
+ --input-placeholder: oklch(0.6822 0.0118 248.5103);
24
+ --page-header-subtitle: oklch(0.6822 0.0118 248.5103);
23
25
  --accent: oklch(0.9632 0.0127 244.2532);
24
26
  --accent-foreground: oklch(0.6723 0.1606 244.9955);
25
27
  --destructive: oklch(0.6188 0.2376 25.7658);
@@ -75,6 +77,8 @@
75
77
  --secondary-foreground: oklch(0.1884 0.0128 248.5103);
76
78
  --muted: oklch(0.209 0 0);
77
79
  --muted-foreground: oklch(0.5637 0.0078 247.9662);
80
+ --input-placeholder: oklch(0.5637 0.0078 247.9662);
81
+ --page-header-subtitle: oklch(0.5637 0.0078 247.9662);
78
82
  --accent: oklch(0.1928 0.0331 242.5459);
79
83
  --accent-foreground: oklch(0.6692 0.1607 245.011);
80
84
  --destructive: oklch(0.6188 0.2376 25.7658);
@@ -128,6 +132,8 @@
128
132
  --color-secondary-foreground: var(--secondary-foreground);
129
133
  --color-muted: var(--muted);
130
134
  --color-muted-foreground: var(--muted-foreground);
135
+ --color-input-placeholder: var(--input-placeholder);
136
+ --color-page-header-subtitle: var(--page-header-subtitle);
131
137
  --color-accent: var(--accent);
132
138
  --color-accent-foreground: var(--accent-foreground);
133
139
  --color-destructive: var(--destructive);
@@ -198,7 +204,9 @@
198
204
  }
199
205
 
200
206
  .blaze-ui-root button[data-slot="button"],
201
- .blaze-ui-root button[data-slot="switch"] {
207
+ .blaze-ui-root button[data-slot="switch"],
208
+ .blaze-ui-root button[data-slot="toggle"],
209
+ .blaze-ui-root button[data-slot="toggle-group-item"] {
202
210
  color: inherit;
203
211
  box-shadow: none;
204
212
  font: inherit;
@@ -442,6 +450,37 @@
442
450
  height: var(--blaze-420-thumb-size);
443
451
  }
444
452
 
453
+ .blaze-ui-root button[data-slot="toggle"],
454
+ .blaze-ui-root button[data-slot="toggle-group-item"] {
455
+ appearance: none;
456
+ background-color: var(--background);
457
+ border: 1px solid var(--input);
458
+ border-radius: var(--blaze-420-radius-md);
459
+ box-shadow: var(--shadow-xs);
460
+ color: var(--foreground);
461
+ gap: var(--blaze-420-space-2);
462
+ text-transform: none;
463
+ }
464
+
465
+ .blaze-ui-root button[data-slot="toggle"]:hover,
466
+ .blaze-ui-root button[data-slot="toggle-group-item"]:hover {
467
+ background-color: var(--accent);
468
+ color: var(--accent-foreground);
469
+ }
470
+
471
+ .blaze-ui-root button[data-slot="toggle"][data-state="on"],
472
+ .blaze-ui-root button[data-slot="toggle-group-item"][data-state="on"] {
473
+ background-color: var(--primary);
474
+ border-color: var(--primary);
475
+ color: var(--primary-foreground);
476
+ }
477
+
478
+ .blaze-ui-root button[data-slot="toggle"][data-state="on"]:hover,
479
+ .blaze-ui-root button[data-slot="toggle-group-item"][data-state="on"]:hover {
480
+ background-color: var(--primary);
481
+ color: var(--primary-foreground);
482
+ }
483
+
445
484
  .blaze-ui-root button[data-slot="button"].tw\:bg-primary {
446
485
  @apply tw:bg-primary;
447
486
  }
package/dist/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export * from "./components/switch";
11
11
  export * from "./components/radio-group";
12
12
  export * from "./components/scroll-area";
13
13
  export * from "./components/select";
14
+ export * from "./components/multi-select";
14
15
  export * from "./components/sheet";
15
16
  export * from "./components/segmented-control";
16
17
  export * from "./components/accordion";
@@ -56,6 +57,7 @@ export * from "./components/chart";
56
57
  export * from "./components/field";
57
58
  export * from "./components/form";
58
59
  export * from "./components/input-group";
60
+ export * from "./components/page-header";
59
61
  export * from "./components/sidebar";
60
62
  export * from "./components/header-app-switcher";
61
63
  export * from "./lib/portal-wrapper";
package/dist/index.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -11,6 +11,7 @@ export { Switch } from './components/switch.js';
11
11
  export { RadioGroup, RadioGroupItem } from './components/radio-group.js';
12
12
  export { ScrollArea, ScrollBar } from './components/scroll-area.js';
13
13
  export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/select.js';
14
+ export { MultiSelect } from './components/multi-select.js';
14
15
  export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from './components/sheet.js';
15
16
  export { SegmentedControl, segmentedControlItemVariants, segmentedControlVariants } from './components/segmented-control.js';
16
17
  export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/accordion.js';
@@ -56,6 +57,7 @@ export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartToolt
56
57
  export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from './components/field.js';
57
58
  export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './components/form.js';
58
59
  export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from './components/input-group.js';
60
+ export { PageHeader } from './components/page-header.js';
59
61
  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';
60
62
  export { HeaderAppSwitcher } from './components/header-app-switcher.js';
61
63
  export { PortalWrapper } from './lib/portal-wrapper.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@getgreenline/blaze-ui",
3
- "version": "1.0.36",
3
+ "version": "1.0.38",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "@base-ui/react": "^1.1.0",