@getgreenline/blaze-ui 1.0.37 → 1.0.39
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.
- package/dist/components/breadcrumb.js +1 -1
- package/dist/components/carousel.js +1 -1
- package/dist/components/collapsible.d.ts +1 -1
- package/dist/components/collapsible.d.ts.map +1 -1
- package/dist/components/collapsible.js +3 -2
- package/dist/components/data-table.d.ts +2 -1
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +24 -4
- package/dist/components/form.js +1 -1
- package/dist/components/input-group.d.ts.map +1 -1
- package/dist/components/input-group.js +18 -16
- package/dist/components/input.js +1 -1
- package/dist/components/multi-select.d.ts +17 -0
- package/dist/components/multi-select.d.ts.map +1 -0
- package/dist/components/multi-select.js +81 -0
- package/dist/components/page-header/actions.d.ts +9 -0
- package/dist/components/page-header/actions.d.ts.map +1 -0
- package/dist/components/page-header/actions.js +21 -0
- package/dist/components/page-header/types.d.ts +33 -0
- package/dist/components/page-header/types.d.ts.map +1 -0
- package/dist/components/page-header/utils.d.ts +4 -0
- package/dist/components/page-header/utils.d.ts.map +1 -0
- package/dist/components/page-header/utils.js +17 -0
- package/dist/components/page-header.d.ts +4 -0
- package/dist/components/page-header.d.ts.map +1 -0
- package/dist/components/page-header.js +12 -0
- package/dist/components/pagination.js +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/toggle.js +3 -3
- package/dist/globals.css +40 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
-
import {
|
|
3
|
+
import { MoreHorizontal, ChevronRight } from 'lucide-react';
|
|
4
4
|
import { cn } from '../lib/utils.js';
|
|
5
5
|
|
|
6
6
|
function Breadcrumb({ ...props }) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import useEmblaCarousel from 'embla-carousel-react';
|
|
4
|
-
import {
|
|
4
|
+
import { ArrowRight, ArrowLeft } from 'lucide-react';
|
|
5
5
|
import { cn } from '../lib/utils.js';
|
|
6
6
|
import { Button } from './button.js';
|
|
7
7
|
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,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"}
|
|
@@ -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 }));
|
|
@@ -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
|
|
@@ -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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAOL,SAAS,EAKT,KAAK,EACN,MAAM,cAAc,CAAA;AAuBrB,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;AAEjD,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC/E;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAA;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,GAAG;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAA;CAChC;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAIhD,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,YAAY;IACpD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAA;IACxD,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,aAAa,CAAA;KAAE,CAAA;IACrD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC/C,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,wBAAwB,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,IAAI,GAAG,MAAM,EACxB,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAA;IACT,aAAa,CAAC,EAAE,CACd,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAA;IACT,4BAA4B,CAAC,EAAE,MAAM,EAAE,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KACvB,CAAA;IACD,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACtC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,YAAY,EAAE,EAChD,OAAO,EACP,IAAI,EACJ,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,MAAM,EACN,SAAS,EACT,UAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,UAAU,EACV,QAAgB,EAChB,WAAmB,EACnB,SAAS,EACT,aAAa,EACb,4BAA4B,EAC5B,OAAe,EACf,WAAe,EACf,UAAU,EACV,eAAe,EACf,oBAA2B,EAC3B,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,sBAA8B,EAC9B,OAAc,EACd,sBAAsB,EACtB,kBAAkB,GACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAo8BnB;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -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",
|
|
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("
|
|
217
|
-
|
|
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/form.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Slot } from '@radix-ui/react-slot';
|
|
4
|
-
import { FormProvider, useFormContext, useFormState
|
|
4
|
+
import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
|
|
5
5
|
import { cn } from '../lib/utils.js';
|
|
6
6
|
import { Label } from './label.js';
|
|
7
7
|
|
|
@@ -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,
|
|
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"}
|
|
@@ -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:
|
|
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]:
|
|
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
|
-
"
|
|
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]]:
|
|
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-'])]:
|
|
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]:
|
|
21
|
-
"inline-end": "tw:order-last tw:pr-3 has-[>button]:
|
|
22
|
-
"block-start": "tw:order-first tw:w-full tw:justify-start tw:px-3 tw:pt-3 [.tw:border-b]:
|
|
23
|
-
"block-end": "tw:order-last tw:w-full tw:justify-start tw:px-3 tw:pb-3 [.tw:border-t]:
|
|
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-'])]:
|
|
42
|
-
sm: "tw:h-8 tw:px-2.5 tw:gap-1.5 tw:rounded-md has-[>svg]:
|
|
43
|
-
"icon-xs": "tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 has-[>svg]:
|
|
44
|
-
"icon-sm": "tw:size-8 tw:p-0 has-[>svg]:
|
|
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]:
|
|
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:
|
|
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:
|
|
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-
|
|
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 };
|
|
@@ -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
|
|
@@ -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,2CA+HlB;AAqDD,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,81 @@
|
|
|
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 isInvalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
|
|
9
|
+
const valueRef = React.useRef(null);
|
|
10
|
+
const selectedOptions = React.useMemo(() => options.filter((option) => value.includes(option.value)), [options, value]);
|
|
11
|
+
const selectedLabels = React.useMemo(() => selectedOptions.map((option) => option.label), [selectedOptions]);
|
|
12
|
+
const [displayValue, setDisplayValue] = React.useState("");
|
|
13
|
+
React.useLayoutEffect(() => {
|
|
14
|
+
const valueElement = valueRef.current;
|
|
15
|
+
if (!valueElement || selectedLabels.length === 0) {
|
|
16
|
+
setDisplayValue("");
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const updateDisplayValue = () => {
|
|
20
|
+
setDisplayValue(getCollapsedDisplayValue(selectedLabels, valueElement.clientWidth, valueElement));
|
|
21
|
+
};
|
|
22
|
+
updateDisplayValue();
|
|
23
|
+
if (typeof ResizeObserver === "undefined") {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const resizeObserver = new ResizeObserver(updateDisplayValue);
|
|
27
|
+
resizeObserver.observe(valueElement);
|
|
28
|
+
return () => resizeObserver.disconnect();
|
|
29
|
+
}, [selectedLabels]);
|
|
30
|
+
function toggleValue(optionValue) {
|
|
31
|
+
const nextValue = value.includes(optionValue)
|
|
32
|
+
? value.filter((currentValue) => currentValue !== optionValue)
|
|
33
|
+
: [...value, optionValue];
|
|
34
|
+
onValueChange(nextValue);
|
|
35
|
+
}
|
|
36
|
+
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", isInvalid && "tw:!border-destructive", 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) => {
|
|
37
|
+
const isSelected = value.includes(option.value);
|
|
38
|
+
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:!pl-2 tw:!pr-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 &&
|
|
39
|
+
"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:!right-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));
|
|
40
|
+
})) }) })] }));
|
|
41
|
+
}
|
|
42
|
+
function getCollapsedDisplayValue(labels, availableWidth, valueElement) {
|
|
43
|
+
if (labels.length === 0) {
|
|
44
|
+
return "";
|
|
45
|
+
}
|
|
46
|
+
if (availableWidth <= 0) {
|
|
47
|
+
return labels.join(", ");
|
|
48
|
+
}
|
|
49
|
+
const fullDisplayValue = labels.join(", ");
|
|
50
|
+
if (measureTextWidth(fullDisplayValue, valueElement) <= availableWidth) {
|
|
51
|
+
return fullDisplayValue;
|
|
52
|
+
}
|
|
53
|
+
for (let visibleCount = labels.length - 1; visibleCount > 0; visibleCount--) {
|
|
54
|
+
const remainingCount = labels.length - visibleCount;
|
|
55
|
+
const displayValue = `${labels
|
|
56
|
+
.slice(0, visibleCount)
|
|
57
|
+
.join(", ")}, +${remainingCount}`;
|
|
58
|
+
if (measureTextWidth(displayValue, valueElement) <= availableWidth) {
|
|
59
|
+
return displayValue;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return `${labels.length} selected`;
|
|
63
|
+
}
|
|
64
|
+
function measureTextWidth(text, valueElement) {
|
|
65
|
+
if (typeof document === "undefined" || typeof window === "undefined") {
|
|
66
|
+
return 0;
|
|
67
|
+
}
|
|
68
|
+
const computedStyle = window.getComputedStyle(valueElement);
|
|
69
|
+
const measuringElement = document.createElement("span");
|
|
70
|
+
measuringElement.style.position = "absolute";
|
|
71
|
+
measuringElement.style.visibility = "hidden";
|
|
72
|
+
measuringElement.style.whiteSpace = "nowrap";
|
|
73
|
+
measuringElement.style.font = computedStyle.font;
|
|
74
|
+
measuringElement.textContent = text;
|
|
75
|
+
document.body.appendChild(measuringElement);
|
|
76
|
+
const width = measuringElement.getBoundingClientRect().width;
|
|
77
|
+
measuringElement.remove();
|
|
78
|
+
return width;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export { MultiSelect };
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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 };
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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 };
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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 };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { MoreHorizontalIcon, ChevronRightIcon, ChevronLeftIcon } from 'lucide-react';
|
|
3
3
|
import { cn } from '../lib/utils.js';
|
|
4
4
|
import { buttonVariants } from './button.js';
|
|
5
5
|
|
|
@@ -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-
|
|
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 };
|
|
@@ -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
|
|
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: "
|
|
10
|
-
outline: "tw:
|
|
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.
|
|
3
|
+
"version": "1.0.39",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@base-ui/react": "^1.1.0",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@types/node": "^20.19.9",
|
|
62
62
|
"@types/react": "^19.1.9",
|
|
63
63
|
"@types/react-dom": "^19.1.7",
|
|
64
|
-
"rollup": "^4.
|
|
64
|
+
"rollup": "^4.59.0",
|
|
65
65
|
"tailwindcss": "^4.1.11",
|
|
66
66
|
"typescript": "^5.9.2",
|
|
67
67
|
"@workspace/typescript-config": "0.0.0",
|