@getgreenline/blaze-ui 1.0.20 → 1.0.22
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/badge.js +5 -5
- package/dist/components/button.d.ts +5 -2
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +16 -14
- package/dist/components/checkbox.js +1 -1
- package/dist/components/data-table.d.ts +4 -4
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +72 -33
- package/dist/components/dropdown-menu.js +9 -9
- package/dist/components/pagination.d.ts.map +1 -1
- package/dist/components/pagination.js +6 -6
- package/dist/components/popover.js +1 -1
- package/dist/components/select.js +9 -9
- package/dist/components/table.js +8 -8
- package/dist/globals.css +3 -1
- package/package.json +6 -4
package/dist/components/badge.js
CHANGED
|
@@ -3,13 +3,13 @@ import { Slot } from '@radix-ui/react-slot';
|
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { cn } from '../lib/utils.js';
|
|
5
5
|
|
|
6
|
-
const badgeVariants = cva("tw
|
|
6
|
+
const badgeVariants = cva("tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-md tw:!border tw:!px-2 tw:!py-0.5 tw:!text-[12px] tw:!font-medium tw:!w-fit tw:!whitespace-nowrap tw:!shrink-0 [&>svg]:tw:!size-3 tw:!gap-1 [&>svg]:tw:!pointer-events-none focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px] aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40 aria-invalid:tw:!border-destructive tw:!transition-[color,box-shadow] tw:!overflow-hidden", {
|
|
7
7
|
variants: {
|
|
8
8
|
variant: {
|
|
9
|
-
default: "tw
|
|
10
|
-
secondary: "tw
|
|
11
|
-
destructive: "tw
|
|
12
|
-
outline: "tw
|
|
9
|
+
default: "tw:!border-transparent tw:!bg-primary tw:!text-primary-foreground [a&]:hover:tw:!bg-primary/90",
|
|
10
|
+
secondary: "tw:!border-transparent tw:!bg-secondary tw:!text-secondary-foreground [a&]:hover:tw:!bg-secondary/90",
|
|
11
|
+
destructive: "tw:!border-transparent tw:!bg-destructive tw:!text-white [a&]:hover:tw:!bg-destructive/90 focus-visible:tw:!ring-destructive/20 dark:focus-visible:tw:!ring-destructive/40 dark:tw:!bg-destructive/60",
|
|
12
|
+
outline: "tw:!text-foreground [a&]:hover:tw:!bg-accent [a&]:hover:tw:!text-accent-foreground",
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
defaultVariants: {
|
|
@@ -4,10 +4,13 @@ declare const buttonVariants: (props?: ({
|
|
|
4
4
|
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
5
5
|
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
-
declare
|
|
7
|
+
declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
|
|
8
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
9
|
+
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
10
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
8
11
|
asChild?: boolean;
|
|
9
12
|
loading?: boolean;
|
|
10
13
|
loadingText?: string;
|
|
11
|
-
}
|
|
14
|
+
}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
12
15
|
export { Button, buttonVariants };
|
|
13
16
|
//# sourceMappingURL=button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;8EA6BnB,CAAA;AAED,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;8EA6BnB,CAAA;AAED,QAAA,MAAM,MAAM;;;;cAEE,OAAO;cACP,OAAO;kBACH,MAAM;mDAmDtB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { Slot } from '@radix-ui/react-slot';
|
|
3
4
|
import { cva } from 'class-variance-authority';
|
|
4
5
|
import { LoaderCircleIcon } from 'lucide-react';
|
|
5
6
|
import { cn } from '../lib/utils.js';
|
|
6
7
|
|
|
7
|
-
const buttonVariants = cva("tw
|
|
8
|
+
const buttonVariants = cva("tw:!relative tw:!inline-flex tw:!items-center tw:!justify-center tw:!gap-2 tw:!whitespace-nowrap tw:!rounded-md tw:!text-sm tw:!font-medium tw:!transition-all tw:!cursor-pointer disabled:tw:!cursor-not-allowed disabled:tw:!pointer-events-none data-[disabled]:tw:!pointer-events-none data-[loading]:tw:!pointer-events-none disabled:tw:!opacity-50 data-[disabled]:tw:!opacity-50 [&_svg]:tw:!pointer-events-none [&_svg:not([class*='size-'])]:tw:!size-4 tw:!shrink-0 [&_svg]:tw:!shrink-0 tw:!outline-none focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px] aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40 aria-invalid:tw:!border-destructive", {
|
|
8
9
|
variants: {
|
|
9
10
|
variant: {
|
|
10
|
-
default: "tw
|
|
11
|
-
destructive: "tw
|
|
12
|
-
outline: "tw
|
|
13
|
-
secondary: "tw
|
|
14
|
-
ghost: "
|
|
15
|
-
link: "tw
|
|
11
|
+
default: "tw:!bg-primary tw:!text-primary-foreground tw:!shadow-xs hover:tw:!bg-primary/90",
|
|
12
|
+
destructive: "tw:!bg-destructive tw:!text-white tw:!shadow-xs hover:tw:!bg-destructive/90 focus-visible:tw:!ring-destructive/20 dark:focus-visible:tw:!ring-destructive/40 dark:tw:!bg-destructive/60",
|
|
13
|
+
outline: "tw:!border tw:!bg-background tw:!shadow-xs hover:tw:!bg-accent hover:tw:!text-accent-foreground dark:tw:!bg-input/30 dark:tw:!border-input dark:hover:tw:!bg-input/50",
|
|
14
|
+
secondary: "tw:!bg-secondary tw:!text-secondary-foreground tw:!shadow-xs hover:tw:!bg-secondary/80",
|
|
15
|
+
ghost: "hover:tw:!bg-accent hover:tw:!text-accent-foreground dark:hover:tw:!bg-accent/50",
|
|
16
|
+
link: "tw:!text-primary tw:!underline-offset-4 hover:tw:!underline",
|
|
16
17
|
},
|
|
17
18
|
size: {
|
|
18
|
-
default: "tw
|
|
19
|
-
sm: "tw
|
|
20
|
-
lg: "tw
|
|
21
|
-
icon: "tw
|
|
19
|
+
default: "tw:!h-9 tw:!px-4 tw:!py-2 has-[>svg]:tw:!px-3",
|
|
20
|
+
sm: "tw:!h-8 tw:!rounded-md tw:!gap-1.5 tw:!px-3 has-[>svg]:tw:!px-2.5",
|
|
21
|
+
lg: "tw:!h-10 tw:!rounded-md tw:!px-6 has-[>svg]:tw:!px-4",
|
|
22
|
+
icon: "tw:!size-9",
|
|
22
23
|
},
|
|
23
24
|
},
|
|
24
25
|
defaultVariants: {
|
|
@@ -26,10 +27,11 @@ const buttonVariants = cva("tw:relative tw:inline-flex tw:items-center tw:justif
|
|
|
26
27
|
size: "default",
|
|
27
28
|
},
|
|
28
29
|
});
|
|
29
|
-
|
|
30
|
+
const Button = React.forwardRef(({ className, variant, size, asChild = false, loading = false, loadingText = "Loading", children, disabled: buttonDisabled, ...rest }, ref) => {
|
|
30
31
|
const Comp = asChild ? Slot : "button";
|
|
31
32
|
const isDisabled = Boolean(buttonDisabled || loading);
|
|
32
|
-
return (jsxs(Comp, { "data-slot": "button", "data-loading": loading ? "" : undefined, "data-disabled": isDisabled ? "" : undefined, className: cn(buttonVariants({ variant, size, className }), loading && "tw:cursor-progress"), disabled: !asChild ? isDisabled : undefined, "aria-disabled": isDisabled ? true : undefined, "aria-busy": loading || undefined, ...rest, children: [jsx("span", { className: cn("tw:inline-flex tw:items-center tw:justify-center tw:gap-[inherit] tw:transition-opacity", loading && "tw:opacity-0"), children: children }), loading ? (jsxs("span", { "data-slot": "button-spinner", className: "tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center", role: "status", "aria-live": "polite", children: [jsx(LoaderCircleIcon, { className: "tw:size-4 tw:animate-spin", "aria-hidden": "true" }), jsx("span", { className: "tw:sr-only", children: loadingText })] })) : null] }));
|
|
33
|
-
}
|
|
33
|
+
return (jsxs(Comp, { "data-slot": "button", "data-loading": loading ? "" : undefined, "data-disabled": isDisabled ? "" : undefined, className: cn(buttonVariants({ variant, size, className }), loading && "tw:cursor-progress"), disabled: !asChild ? isDisabled : undefined, "aria-disabled": isDisabled ? true : undefined, "aria-busy": loading || undefined, ref: ref, ...rest, children: [jsx("span", { className: cn("tw:inline-flex tw:items-center tw:justify-center tw:gap-[inherit] tw:transition-opacity", loading && "tw:opacity-0"), children: children }), loading ? (jsxs("span", { "data-slot": "button-spinner", className: "tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center", role: "status", "aria-live": "polite", children: [jsx(LoaderCircleIcon, { className: "tw:size-4 tw:animate-spin", "aria-hidden": "true" }), jsx("span", { className: "tw:sr-only", children: loadingText })] })) : null] }));
|
|
34
|
+
});
|
|
35
|
+
Button.displayName = "Button";
|
|
34
36
|
|
|
35
37
|
export { Button, buttonVariants };
|
|
@@ -4,7 +4,7 @@ import { CheckIcon } from 'lucide-react';
|
|
|
4
4
|
import { cn } from '../lib/utils.js';
|
|
5
5
|
|
|
6
6
|
function Checkbox({ className, ...props }) {
|
|
7
|
-
return (jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("tw
|
|
7
|
+
return (jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("tw:!peer tw:!border-border dark:tw:!bg-input/30 data-[state=checked]:tw:!bg-primary data-[state=checked]:tw:!text-primary-foreground dark:data-[state=checked]:tw:!bg-primary data-[state=checked]:tw:!border-primary focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40 aria-invalid:tw:!border-destructive tw:!size-4 tw:!shrink-0 tw:!rounded-[4px] tw:!border tw:!shadow-xs tw:!transition-shadow tw:!outline-none focus-visible:tw:!ring-[3px] disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50 tw:!align-middle", className), ...props, children: jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "tw:!flex tw:!items-center tw:!justify-center tw:!text-current tw:!transition-none", children: jsx(CheckIcon, { className: "tw:size-3.5" }) }) }));
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export { Checkbox };
|
|
@@ -7,7 +7,8 @@ export interface DataTableColumn<T> {
|
|
|
7
7
|
sortable?: boolean;
|
|
8
8
|
align?: "left" | "center" | "right";
|
|
9
9
|
width?: string;
|
|
10
|
-
|
|
10
|
+
className?: string;
|
|
11
|
+
render?: (value: any, row: T, index: number, depth: number) => React.ReactNode;
|
|
11
12
|
}
|
|
12
13
|
export interface DataTableRow {
|
|
13
14
|
id: string;
|
|
@@ -59,8 +60,7 @@ export interface DataTableProps<T extends DataTableRow> {
|
|
|
59
60
|
reorderable?: boolean;
|
|
60
61
|
onReorder?: (rowId: string, direction: "up" | "down", parentId?: string) => void;
|
|
61
62
|
onDragReorder?: (draggedId: string, targetId: string, parentId?: string) => void;
|
|
62
|
-
|
|
63
|
-
onColumnVisibilityChange?: (hiddenColumns: string[]) => void;
|
|
63
|
+
customFilterColumnsWhiteList?: string[];
|
|
64
64
|
loading?: boolean;
|
|
65
65
|
loadingRows?: number;
|
|
66
66
|
emptyState?: {
|
|
@@ -73,6 +73,6 @@ export interface DataTableProps<T extends DataTableRow> {
|
|
|
73
73
|
expandedRowIds?: string[];
|
|
74
74
|
onExpandedChange?: (expandedIds: string[]) => void;
|
|
75
75
|
}
|
|
76
|
-
export declare function DataTable<T extends DataTableRow>({ columns, data, onSelectionChange, selectedRowIds, onSort, sortState, expandable, renderExpandedRow, actions, className, pagination, treeData, reorderable, onReorder, onDragReorder,
|
|
76
|
+
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, expandedRowIds, onExpandedChange, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
77
77
|
export { Check, X };
|
|
78
78
|
//# 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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { Settings, Inbox, ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, MoreHorizontal } from 'lucide-react';
|
|
3
|
+
import { Settings, Check, Inbox, Loader2, ArrowUpDown, ArrowUp, ArrowDown, ChevronDown, ChevronRight, ChevronUp, MoreHorizontal } from 'lucide-react';
|
|
4
4
|
export { Check, X } from 'lucide-react';
|
|
5
|
+
import { Menu } from '@base-ui/react/menu';
|
|
6
|
+
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select.js';
|
|
5
7
|
import { cn } from '../lib/utils.js';
|
|
6
8
|
import { Checkbox } from './checkbox.js';
|
|
7
9
|
import { Button } from './button.js';
|
|
8
|
-
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from './dropdown-menu.js';
|
|
9
|
-
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select.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,
|
|
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, expandedRowIds, onExpandedChange, }) {
|
|
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 });
|
|
17
|
+
const [hiddenColumns, setHiddenColumns] = React.useState([]);
|
|
17
18
|
const [draggedRowId, setDraggedRowId] = React.useState(null);
|
|
18
19
|
const [dragOverRowId, setDragOverRowId] = React.useState(null);
|
|
19
20
|
const scrollContainerRef = React.useRef(null);
|
|
@@ -52,7 +53,7 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
52
53
|
}, [expandedRowIds]);
|
|
53
54
|
const hasRowSelection = !!onSelectionChange;
|
|
54
55
|
const hasActions = actions && actions.length > 0;
|
|
55
|
-
const showActionsColumn = hasActions ||
|
|
56
|
+
const showActionsColumn = hasActions || showColumnVisibility;
|
|
56
57
|
const toggleRowSelection = (rowId) => {
|
|
57
58
|
const newSelected = new Set(selectedRows);
|
|
58
59
|
if (newSelected.has(rowId)) {
|
|
@@ -109,27 +110,28 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
109
110
|
};
|
|
110
111
|
const getSortIcon = (columnKey) => {
|
|
111
112
|
if (sortConfig.key !== columnKey) {
|
|
112
|
-
return jsx(ArrowUpDown, { className: "tw:ml-2 tw
|
|
113
|
+
return jsx(ArrowUpDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:opacity-50" });
|
|
113
114
|
}
|
|
114
115
|
if (sortConfig.direction === "asc") {
|
|
115
|
-
return jsx(
|
|
116
|
+
return jsx(ArrowUp, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:text-foreground" });
|
|
116
117
|
}
|
|
117
118
|
if (sortConfig.direction === "desc") {
|
|
118
|
-
return jsx(
|
|
119
|
+
return jsx(ArrowDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:text-foreground" });
|
|
119
120
|
}
|
|
120
|
-
return jsx(ArrowUpDown, { className: "tw:ml-2 tw
|
|
121
|
+
return jsx(ArrowUpDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:opacity-50" });
|
|
121
122
|
};
|
|
122
123
|
const hasChildren = (row) => treeData && row.children && row.children.length > 0;
|
|
123
124
|
const isExpandable = expandable || treeData;
|
|
124
125
|
const visibleColumns = columns.filter((col) => !hiddenColumns.includes(col.key));
|
|
125
126
|
const toggleColumnVisibility = (columnKey) => {
|
|
126
|
-
if (!onColumnVisibilityChange)
|
|
127
|
-
return;
|
|
128
127
|
const newHidden = hiddenColumns.includes(columnKey)
|
|
129
|
-
? hiddenColumns.filter((
|
|
128
|
+
? hiddenColumns.filter((key) => key !== columnKey)
|
|
130
129
|
: [...hiddenColumns, columnKey];
|
|
131
|
-
|
|
130
|
+
setHiddenColumns(newHidden);
|
|
132
131
|
};
|
|
132
|
+
const filterableColumns = customFilterColumnsWhiteList
|
|
133
|
+
? columns.filter((col) => customFilterColumnsWhiteList.includes(col.key))
|
|
134
|
+
: columns;
|
|
133
135
|
const getRowBackgroundClass = (row, rowIndex, depth) => {
|
|
134
136
|
if (selectedRows.has(row.id))
|
|
135
137
|
return "tw:bg-accent";
|
|
@@ -184,11 +186,11 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
184
186
|
setDraggedRowId(null);
|
|
185
187
|
setDragOverRowId(null);
|
|
186
188
|
};
|
|
187
|
-
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(ChevronDown, { className: "tw
|
|
189
|
+
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(ChevronDown, { className: "tw:!h-[16px] tw:!w-[16px]" })) : (jsx(ChevronRight, { className: "tw:!h-[16px] tw:!w-[16px]" })) })) : (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}` }) }) })), 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(ChevronUp, { className: cn("tw:h-4 tw:w-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(ChevronDown, { className: cn("tw:h-4 tw:w-4", rowIndex === totalSiblings - 1 && "tw:opacity-30") }) })] }) })), visibleColumns.map((column, colIndex) => {
|
|
188
190
|
const clickableField = getClickableField(column.key);
|
|
189
|
-
const cellContent = column.render ? column.render(row[column.key], row, rowIndex) : row[column.key];
|
|
190
|
-
return (jsx("td", { className: cn("tw:p-4 tw:align-middle tw:
|
|
191
|
-
}), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), children: visibleActionsForRow.length > 0 && (jsxs(
|
|
191
|
+
const cellContent = column.render ? column.render(row[column.key], row, rowIndex, depth) : row[column.key];
|
|
192
|
+
return (jsx("td", { className: cn("tw:p-4 tw:align-middle tw:max-w-0 tw:overflow-hidden", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right", column.className, rowBgClass), children: jsx("div", { className: cn("tw:truncate", clickableField && "tw:!text-primary"), style: { paddingLeft: colIndex === 0 ? (isExpandable ? (depth > 0 ? 16 : 0) : indentPadding) : 0 }, children: clickableField ? (jsx("span", { onClick: () => clickableField.onClick(row), className: "hover:tw:!text-primary/80 hover:tw:underline tw:cursor-pointer tw:transition-colors", children: cellContent })) : (cellContent) }) }, column.key));
|
|
193
|
+
}), 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(MoreHorizontal, { className: "tw:!h-[16px] tw:!w-[16px]" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": "base-ui-toggle-columns-trigger", className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: visibleActionsForRow.map((action, index) => (jsxs(Menu.Item, { onClick: () => action.onClick(row), className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50", action.variant === "destructive" && "tw:text-destructive focus:tw:text-destructive"), children: [action.icon && jsx("span", { className: "tw:mr-2", children: action.icon }), action.label] }, index))) }) }) })] })) }))] }), expandable && !treeData && isExpanded && renderExpandedRow && (jsx("tr", { className: "tw:border-b tw:bg-muted/30", children: jsx("td", { colSpan: visibleColumns.length + (showActionsColumn ? 1 : 0) + (hasRowSelection ? 1 : 0) + (isExpandable ? 1 : 0) + (reorderable ? 1 : 0), className: "tw:p-4", children: renderExpandedRow(row) }) })), treeData && isExpanded && row.children && row.children.map((child, childIndex) => renderRow(child, childIndex, depth + 1, row, row.children?.length))] }, row.id));
|
|
192
194
|
};
|
|
193
195
|
const renderPaginationItems = () => {
|
|
194
196
|
if (!pagination)
|
|
@@ -230,25 +232,62 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
230
232
|
}
|
|
231
233
|
return items;
|
|
232
234
|
};
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
const calculateMinTableWidth = () => {
|
|
236
|
+
let totalWidth = 0;
|
|
237
|
+
// Add fixed column widths (48px each for expand, selection, reorder, actions)
|
|
238
|
+
if (isExpandable)
|
|
239
|
+
totalWidth += 48;
|
|
240
|
+
if (hasRowSelection)
|
|
241
|
+
totalWidth += 48;
|
|
242
|
+
if (reorderable)
|
|
243
|
+
totalWidth += 48;
|
|
244
|
+
if (showActionsColumn)
|
|
245
|
+
totalWidth += 48;
|
|
246
|
+
// Add specified column widths
|
|
247
|
+
visibleColumns.forEach((col) => {
|
|
248
|
+
if (col.width) {
|
|
249
|
+
// Parse width value (e.g., "80px" -> 80, "10%" -> skip)
|
|
250
|
+
const widthMatch = col.width.match(/^(\d+)px$/);
|
|
251
|
+
if (widthMatch && widthMatch[1]) {
|
|
252
|
+
totalWidth += parseInt(widthMatch[1], 10);
|
|
253
|
+
}
|
|
254
|
+
else {
|
|
255
|
+
// If width is not in px (e.g., percentage), use default
|
|
256
|
+
totalWidth += 150;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
else {
|
|
260
|
+
// No width specified, use default minimum
|
|
261
|
+
totalWidth += 150;
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
return `${totalWidth}px`;
|
|
265
|
+
};
|
|
266
|
+
return (jsxs("div", { className: cn("tw:w-full tw:h-full tw:flex tw:flex-col", className), children: [jsxs("div", { className: "tw:relative tw:flex-1 tw:flex tw:flex-col tw:min-h-0", children: [jsx("div", { ref: scrollContainerRef, className: "tw:flex-1 tw:overflow-auto [&::-webkit-scrollbar]:tw:h-2 [&::-webkit-scrollbar]:tw:w-2 [&::-webkit-scrollbar-track]:tw:bg-muted [&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/30 [&::-webkit-scrollbar-thumb]:tw:rounded-full hover:[&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/50", children: jsxs("table", { className: "tw:w-full tw:table-fixed tw:caption-bottom tw:text-sm", role: "grid", "aria-busy": loading, style: { minWidth: calculateMinTableWidth() }, children: [jsx("thead", { className: "tw:border-b tw:sticky tw:top-0 tw:z-10 tw:bg-background", children: jsxs("tr", { children: [isExpandable && jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2" }), hasRowSelection && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: data.length > 0 && data.every(row => selectedRows.has(row.id)), onCheckedChange: toggleAllRows, "aria-label": "Select all rows" }) }) })), reorderable && jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2" }), visibleColumns.map((column) => (jsx("th", { scope: "col", "aria-sort": column.sortable && sortConfig.key === column.key
|
|
267
|
+
? sortConfig.direction === "asc"
|
|
268
|
+
? "ascending"
|
|
269
|
+
: sortConfig.direction === "desc"
|
|
270
|
+
? "descending"
|
|
271
|
+
: "none"
|
|
272
|
+
: undefined, className: cn("tw:!h-[40px] tw:px-4 tw:text-left tw:align-middle tw:font-medium tw:text-foreground tw:whitespace-nowrap", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right"), style: { width: column.width }, children: column.sortable && onSort ? (jsxs("button", { onClick: () => !loading && handleSort(column.key), disabled: loading, "aria-label": `Sort by ${column.label}${sortConfig.key === column.key ? (sortConfig.direction === 'asc' ? ', currently sorted ascending' : sortConfig.direction === 'desc' ? ', currently sorted descending' : '') : ''}`, className: cn("tw:flex tw:items-center hover:tw:text-foreground/80 tw:transition-colors", loading && "tw:opacity-50 tw:cursor-not-allowed"), children: [column.label, getSortIcon(column.key)] })) : (column.label) }, column.key))), showActionsColumn && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-20 tw:px-2 tw:sticky tw:right-0 tw:bg-background", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-end tw:pr-1", children: showColumnVisibility && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: "base-ui-toggle-columns-trigger", render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Toggle column visibility", ...props, id: "base-ui-toggle-columns-trigger", children: jsx(Settings, { className: "tw:!h-[20px] tw:!w-[20px] tw:text-muted-foreground" }) })) }), 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: jsxs(Menu.Group, { children: [jsx(Menu.GroupLabel, { className: "tw:px-2 tw:py-1.5 tw:text-[14px] tw:font-medium", children: "Toggle Columns" }), jsx("div", { className: "tw:bg-border tw:-mx-1 tw:my-1 tw:h-px" }), filterableColumns.map((column) => {
|
|
273
|
+
const isVisible = !hiddenColumns.includes(column.key);
|
|
274
|
+
return (jsxs(Menu.Item, { onClick: () => toggleColumnVisibility(column.key), closeOnClick: false, 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:py-1.5 tw:pr-2 tw:pl-8 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50"), children: [jsx("span", { className: "tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center", children: isVisible && jsx(Check, { className: "tw:size-4" }) }), column.label] }, column.key));
|
|
275
|
+
})] }) }) }) })] })) }) }))] }) }), jsx("tbody", { className: "tw:relative", children: data.length === 0 && !loading ? (jsx("tr", { children: jsx("td", { colSpan: visibleColumns.length + (showActionsColumn ? 1 : 0) + (hasRowSelection ? 1 : 0) + (isExpandable ? 1 : 0) + (reorderable ? 1 : 0), className: "tw:h-48", children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:text-center", children: [emptyState?.icon || (jsx("div", { className: "tw:h-12 tw:w-12 tw:rounded-full tw:bg-muted tw:flex tw:items-center tw:justify-center tw:mb-3", children: jsx(Inbox, { className: "tw:h-6 tw:w-6 tw:text-muted-foreground" }) })), jsx("p", { className: "tw:text-base tw:font-medium tw:text-foreground", children: emptyState?.title || "No results found" }), jsx("p", { className: "tw:text-sm tw:text-muted-foreground tw:mt-1", children: emptyState?.description || "There are no items to display." })] }) }) })) : (data.map((row, rowIndex) => renderRow(row, rowIndex, 0))) })] }) }), loading && (jsx("div", { className: "tw:absolute tw:inset-0 tw:z-20 tw:flex tw:items-center tw:justify-center tw:bg-background/50 tw:backdrop-blur-[1px]", children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center", children: [jsx(Loader2, { className: "tw:h-8 tw:w-8 tw:animate-spin tw:text-primary" }), data.length === 0 && jsx("p", { className: "tw:text-sm tw:text-muted-foreground tw:mt-3", children: "Loading..." })] }) }))] }), pagination && (pagination.totalPages > 1 || pagination.mode === "cursor" || pagination.showTotalItems || (pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS).length > 0) && (jsxs("div", { className: "tw:relative tw:flex tw:items-center tw:justify-between tw:border-t tw:px-4 tw:py-4 tw:bg-background", children: [(() => {
|
|
237
276
|
const options = pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
|
|
238
277
|
if (options.length === 0)
|
|
239
278
|
return jsx("div", {});
|
|
240
|
-
return (jsxs("div", { className: "tw:flex tw:items-center tw:gap-2", children: [jsx("span", { className: "tw:text-
|
|
241
|
-
})(), pagination.showTotalItems && pagination.totalItems !== undefined && (jsx("div", { className: "tw:
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
279
|
+
return (jsxs("div", { className: "tw:flex tw:items-center tw:gap-2 tw:z-10", children: [jsx("span", { className: "tw:text-[14px] tw:text-muted-foreground tw:whitespace-nowrap", id: "rows-per-page-label", children: "Rows per page:" }), jsxs(Select, { value: String(pagination.pageSize ?? options[0]), onValueChange: (val) => !loading && pagination.onPageSizeChange?.(Number(val)), disabled: loading, children: [jsx(SelectTrigger, { id: "base-ui-pagination-trigger", className: "tw:flex tw:h-[32px] tw:w-[70px] tw:items-center tw:justify-between tw:rounded-md tw:border tw:border-input tw:bg-transparent tw:px-3 tw:py-2 tw:text-[14px] tw:shadow-sm tw:ring-offset-background placeholder:tw:text-muted-foreground focus:tw:outline-none focus:tw:ring-1 focus:tw:ring-ring disabled:tw:cursor-not-allowed disabled:tw:opacity-50", children: jsx(SelectValue, {}) }), jsx(SelectContent, { side: "top", align: "end", children: options.map((size) => (jsx(SelectItem, { value: String(size), children: size }, size))) })] })] }));
|
|
280
|
+
})(), pagination.showTotalItems && pagination.totalItems !== undefined && (jsx("div", { className: "tw:absolute tw:left-1/2 tw:-translate-x-1/2 tw:flex tw:justify-center tw:items-center", children: jsxs("span", { className: "tw:text-[14px] tw:text-muted-foreground", children: ["Total: ", pagination.totalItems] }) })), jsx("div", { className: "tw:z-10", children: jsx(Pagination, { className: "tw:!mx-0 tw:!w-auto", "aria-label": "Table pagination", children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsx(PaginationPrevious, { href: "#", onClick: (e) => {
|
|
281
|
+
e.preventDefault();
|
|
282
|
+
if (!loading && !pagination.disablePrevious && pagination.currentPage > 1) {
|
|
283
|
+
pagination.onPageChange(pagination.currentPage - 1);
|
|
284
|
+
}
|
|
285
|
+
}, "aria-label": "Go to previous page", "aria-disabled": loading || pagination.disablePrevious || pagination.currentPage <= 1, className: cn((loading || pagination.disablePrevious || pagination.currentPage <= 1) && "tw:pointer-events-none tw:opacity-50") }) }), pagination.mode !== "cursor" && renderPaginationItems(), jsx(PaginationItem, { children: jsx(PaginationNext, { href: "#", onClick: (e) => {
|
|
286
|
+
e.preventDefault();
|
|
287
|
+
if (!loading && !pagination.disableNext && pagination.currentPage < pagination.totalPages) {
|
|
288
|
+
pagination.onPageChange(pagination.currentPage + 1);
|
|
289
|
+
}
|
|
290
|
+
}, "aria-label": "Go to next page", "aria-disabled": loading || pagination.disableNext || pagination.currentPage >= pagination.totalPages, className: cn((loading || pagination.disableNext || pagination.currentPage >= pagination.totalPages) && "tw:pointer-events-none tw:opacity-50") }) })] }) }) })] }))] }));
|
|
252
291
|
}
|
|
253
292
|
|
|
254
293
|
export { DataTable };
|
|
@@ -13,40 +13,40 @@ function DropdownMenuTrigger({ ...props }) {
|
|
|
13
13
|
return (jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
|
|
14
14
|
}
|
|
15
15
|
function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
16
|
-
return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("tw
|
|
16
|
+
return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("tw:!bg-popover tw:!text-popover-foreground 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 tw:!z-50 tw:!max-h-(--radix-dropdown-menu-content-available-height) tw:!min-w-[8rem] tw:!origin-(--radix-dropdown-menu-content-transform-origin) tw:!overflow-x-hidden tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!p-1 tw:!shadow-md", className), ...props }) }));
|
|
17
17
|
}
|
|
18
18
|
function DropdownMenuGroup({ ...props }) {
|
|
19
19
|
return (jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
|
|
20
20
|
}
|
|
21
21
|
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
22
|
-
return (jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("
|
|
22
|
+
return (jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:tw:!bg-accent focus:tw:!text-accent-foreground data-[variant=destructive]:tw:!text-destructive data-[variant=destructive]:focus:tw:!bg-destructive/10 dark:data-[variant=destructive]:focus:tw:!bg-destructive/20 data-[variant=destructive]:focus:tw:!text-destructive data-[variant=destructive]:*:svg:tw:!text-destructive [&_svg:not([class*='text-'])]:tw:!text-muted-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 data-[disabled]:tw:!pointer-events-none data-[disabled]:tw:!opacity-50 data-[inset]:tw:!pl-8 [&_svg]:tw:!pointer-events-none [&_svg]:tw:!shrink-0 [&_svg:not([class*='size-'])]:tw:!size-4", className), ...props }));
|
|
23
23
|
}
|
|
24
24
|
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
25
|
-
return (jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", 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:py-1.5 tw:pr-2 tw:pl-8 tw:text-
|
|
25
|
+
return (jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", 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:py-1.5 tw:pr-2 tw:pl-8 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [jsx("span", { className: "tw:!pointer-events-none tw:!absolute tw:!left-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsx(CheckIcon, { className: "tw:!size-4" }) }) }), children] }));
|
|
26
26
|
}
|
|
27
27
|
function DropdownMenuRadioGroup({ ...props }) {
|
|
28
28
|
return (jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
|
|
29
29
|
}
|
|
30
30
|
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
31
|
-
return (jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("
|
|
31
|
+
return (jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:tw:!bg-accent focus:tw:!text-accent-foreground tw:!relative tw:!flex tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pr-2 tw:!pl-8 tw:!text-[14px] tw:!outline-hidden tw:!select-none data-[disabled]:tw:!pointer-events-none data-[disabled]:tw:!opacity-50 [&_svg]:tw:!pointer-events-none [&_svg]:tw:!shrink-0 [&_svg:not([class*='size-'])]:tw:!size-4", className), ...props, children: [jsx("span", { className: "tw:!pointer-events-none tw:!absolute tw:!left-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsx(CircleIcon, { className: "tw:!size-2 tw:!fill-current" }) }) }), children] }));
|
|
32
32
|
}
|
|
33
33
|
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
34
|
-
return (jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("tw
|
|
34
|
+
return (jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!font-medium data-[inset]:tw:!pl-8", className), ...props }));
|
|
35
35
|
}
|
|
36
36
|
function DropdownMenuSeparator({ className, ...props }) {
|
|
37
|
-
return (jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("tw
|
|
37
|
+
return (jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("tw:!bg-border tw:!-mx-1 tw:!my-1 tw:!h-px", className), ...props }));
|
|
38
38
|
}
|
|
39
39
|
function DropdownMenuShortcut({ className, ...props }) {
|
|
40
|
-
return (jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("tw
|
|
40
|
+
return (jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("tw:!text-muted-foreground tw:!ml-auto tw:!text-[12px] tw:!tracking-widest", className), ...props }));
|
|
41
41
|
}
|
|
42
42
|
function DropdownMenuSub({ ...props }) {
|
|
43
43
|
return jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
|
|
44
44
|
}
|
|
45
45
|
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
46
|
-
return (jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("
|
|
46
|
+
return (jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("focus:tw:!bg-accent focus:tw:!text-accent-foreground data-[state=open]:tw:!bg-accent data-[state=open]:tw:!text-accent-foreground [&_svg:not([class*='text-'])]:tw:!text-muted-foreground 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 data-[inset]:tw:!pl-8 [&_svg]:tw:!pointer-events-none [&_svg]:tw:!shrink-0 [&_svg:not([class*='size-'])]:tw:!size-4", className), ...props, children: [children, jsx(ChevronRightIcon, { className: "tw:ml-auto tw:size-4" })] }));
|
|
47
47
|
}
|
|
48
48
|
function DropdownMenuSubContent({ className, ...props }) {
|
|
49
|
-
return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("tw
|
|
49
|
+
return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("tw:!bg-popover tw:!text-popover-foreground 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 tw:!z-50 tw:!min-w-[8rem] tw:!origin-(--radix-dropdown-menu-content-transform-origin) tw:!overflow-hidden tw:!rounded-md tw:!border tw:!p-1 tw:!shadow-lg", className), ...props }));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EAAE,MAAM,EAAkB,MAAM,sBAAsB,CAAA;AAE7D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAUvE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ5B;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE/D;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAE3B,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EAAE,MAAM,EAAkB,MAAM,sBAAsB,CAAA;AAE7D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAUvE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ5B;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE/D;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAE3B,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAkBrB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY7C;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY7C;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAY9B;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,GACnB,CAAA"}
|
|
@@ -4,10 +4,10 @@ import { cn } from '../lib/utils.js';
|
|
|
4
4
|
import { buttonVariants } from './button.js';
|
|
5
5
|
|
|
6
6
|
function Pagination({ className, ...props }) {
|
|
7
|
-
return (jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("tw
|
|
7
|
+
return (jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("tw:!mx-auto tw:!flex tw:!w-full tw:!justify-end", className), ...props }));
|
|
8
8
|
}
|
|
9
9
|
function PaginationContent({ className, ...props }) {
|
|
10
|
-
return (jsx("ul", { "data-slot": "pagination-content", className: cn("tw
|
|
10
|
+
return (jsx("ul", { "data-slot": "pagination-content", className: cn("tw:!flex tw:!flex-row tw:!items-center tw:!gap-1", className), ...props }));
|
|
11
11
|
}
|
|
12
12
|
function PaginationItem({ ...props }) {
|
|
13
13
|
return jsx("li", { "data-slot": "pagination-item", ...props });
|
|
@@ -16,16 +16,16 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
|
|
|
16
16
|
return (jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
|
|
17
17
|
variant: isActive ? "outline" : "ghost",
|
|
18
18
|
size,
|
|
19
|
-
}), className), ...props }));
|
|
19
|
+
}), "tw:!text-foreground tw:!text-[14px] tw:!no-underline hover:tw:!bg-accent hover:tw:!text-accent-foreground data-[active=true]:tw:!text-accent-foreground data-[active=true]:tw:!border data-[active=true]:tw:!border-input tw:!h-[32px]", size === "icon" && "tw:!w-[32px]", className), ...props }));
|
|
20
20
|
}
|
|
21
21
|
function PaginationPrevious({ className, ...props }) {
|
|
22
|
-
return (jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("tw
|
|
22
|
+
return (jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("tw:!gap-1 tw:!px-2.5 sm:tw:!pl-2.5 tw:!h-[32px]", className), ...props, children: [jsx(ChevronLeftIcon, { className: "tw:!size-4" }), jsx("span", { className: "tw:!hidden sm:tw:!block", children: "Previous" })] }));
|
|
23
23
|
}
|
|
24
24
|
function PaginationNext({ className, ...props }) {
|
|
25
|
-
return (jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("tw
|
|
25
|
+
return (jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("tw:!gap-1 tw:!px-2.5 sm:tw:!pr-2.5 tw:!h-8", className), ...props, children: [jsx("span", { className: "tw:!hidden sm:tw:!block", children: "Next" }), jsx(ChevronRightIcon, { className: "tw:!size-4" })] }));
|
|
26
26
|
}
|
|
27
27
|
function PaginationEllipsis({ className, ...props }) {
|
|
28
|
-
return (jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("tw
|
|
28
|
+
return (jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("tw:!flex tw:!size-9 tw:!items-center tw:!justify-center", className), ...props, children: [jsx(MoreHorizontalIcon, { className: "tw:!size-4" }), jsx("span", { className: "tw:sr-only", children: "More pages" })] }));
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
|
|
@@ -9,7 +9,7 @@ function PopoverTrigger({ ...props }) {
|
|
|
9
9
|
return jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
10
10
|
}
|
|
11
11
|
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
12
|
-
return (jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("tw
|
|
12
|
+
return (jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("tw:!bg-popover tw:!text-popover-foreground 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 tw:!z-50 tw:!w-72 tw:!origin-(--radix-popover-content-transform-origin) tw:!rounded-md tw:!border tw:!p-4 tw:!shadow-md tw:!outline-hidden", className), ...props }) }));
|
|
13
13
|
}
|
|
14
14
|
function PopoverAnchor({ ...props }) {
|
|
15
15
|
return jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
@@ -13,27 +13,27 @@ function SelectValue({ ...props }) {
|
|
|
13
13
|
return jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
|
|
14
14
|
}
|
|
15
15
|
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
16
|
-
return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("tw
|
|
16
|
+
return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("tw:!flex tw:!w-fit 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", "data-[placeholder]:tw:!text-muted-foreground [&_svg:not([class*='text-'])]:tw:!text-muted-foreground", "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:!h-9 data-[size=sm]:tw:!h-8", "*:data-[slot=select-value]:tw:!line-clamp-1 *:data-[slot=select-value]:tw:!flex *:data-[slot=select-value]:tw:!items-center *:data-[slot=select-value]:tw:!gap-2", "[&_svg]:tw:!pointer-events-none [&_svg]:tw:!shrink-0 [&_svg:not([class*='size-'])]:tw:!size-4", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!opacity-50" }) })] }));
|
|
17
17
|
}
|
|
18
18
|
function SelectContent({ className, children, position = "popper", ...props }) {
|
|
19
|
-
return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("tw
|
|
20
|
-
"
|
|
21
|
-
"tw
|
|
19
|
+
return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("tw:!relative tw:!z-50 tw:!min-w-[8rem] tw:!max-h-(--radix-select-content-available-height) tw:!origin-(--radix-select-content-transform-origin) tw:!overflow-x-hidden tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!text-popover-foreground tw:!shadow-md", "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", position === "popper" &&
|
|
20
|
+
"data-[side=bottom]:tw:!translate-y-1 data-[side=left]:tw:!-translate-x-1 data-[side=right]:tw:!translate-x-1 data-[side=top]:tw:!-translate-y-1", className), position: position, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { className: cn("tw:!p-1", position === "popper" &&
|
|
21
|
+
"tw:!h-[var(--radix-select-trigger-height)] tw:!w-full tw:!min-w-[var(--radix-select-trigger-width)] tw:!scroll-my-1"), children: children }), jsx(SelectScrollDownButton, {})] }) }));
|
|
22
22
|
}
|
|
23
23
|
function SelectLabel({ className, ...props }) {
|
|
24
|
-
return (jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("tw
|
|
24
|
+
return (jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("tw:!text-muted-foreground tw:!px-2 tw:!py-1.5 tw:!text-[12px]", className), ...props }));
|
|
25
25
|
}
|
|
26
26
|
function SelectItem({ className, children, ...props }) {
|
|
27
|
-
return (jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("tw
|
|
27
|
+
return (jsxs(SelectPrimitive.Item, { "data-slot": "select-item", 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-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "focus:tw:!bg-accent focus:tw:!text-accent-foreground", "data-[disabled]:tw:!pointer-events-none data-[disabled]:tw:!opacity-50", "[&>span]:tw:!line-clamp-1 [&>span]:tw:!flex [&>span]:tw:!items-center [&>span]:tw:!gap-2", "[&_svg]:tw:!pointer-events-none [&_svg]:tw:!shrink-0 [&_svg:not([class*='size-'])]:tw:!size-4 [&_svg:not([class*='text-'])]:tw:!text-muted-foreground", className), ...props, children: [jsx("span", { className: "tw:!absolute tw:!right-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(CheckIcon, { className: "tw:!size-4" }) }) }), jsx(SelectPrimitive.ItemText, { children: children })] }));
|
|
28
28
|
}
|
|
29
29
|
function SelectSeparator({ className, ...props }) {
|
|
30
|
-
return (jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("tw
|
|
30
|
+
return (jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("tw:!bg-border tw:!pointer-events-none tw:!-mx-1 tw:!my-1 tw:!h-px", className), ...props }));
|
|
31
31
|
}
|
|
32
32
|
function SelectScrollUpButton({ className, ...props }) {
|
|
33
|
-
return (jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("tw
|
|
33
|
+
return (jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("tw:!flex tw:!cursor-default tw:!items-center tw:!justify-center tw:!py-1", className), ...props, children: jsx(ChevronUpIcon, { className: "tw:!size-4" }) }));
|
|
34
34
|
}
|
|
35
35
|
function SelectScrollDownButton({ className, ...props }) {
|
|
36
|
-
return (jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("tw
|
|
36
|
+
return (jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("tw:!flex tw:!cursor-default tw:!items-center tw:!justify-center tw:!py-1", className), ...props, children: jsx(ChevronDownIcon, { className: "tw:!size-4" }) }));
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
|
package/dist/components/table.js
CHANGED
|
@@ -2,28 +2,28 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { cn } from '../lib/utils.js';
|
|
3
3
|
|
|
4
4
|
function Table({ className, ...props }) {
|
|
5
|
-
return (jsx("div", { "data-slot": "table-container", className: "tw
|
|
5
|
+
return (jsx("div", { "data-slot": "table-container", className: "tw:!relative tw:!w-full tw:!overflow-x-auto", children: jsx("table", { "data-slot": "table", className: cn("tw:!w-full tw:!caption-bottom tw:!text-sm", className), ...props }) }));
|
|
6
6
|
}
|
|
7
7
|
function TableHeader({ className, ...props }) {
|
|
8
|
-
return (jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:tw
|
|
8
|
+
return (jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:tw:!border-b", className), ...props }));
|
|
9
9
|
}
|
|
10
10
|
function TableBody({ className, ...props }) {
|
|
11
|
-
return (jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:tw
|
|
11
|
+
return (jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:tw:!border-0", className), ...props }));
|
|
12
12
|
}
|
|
13
13
|
function TableFooter({ className, ...props }) {
|
|
14
|
-
return (jsx("tfoot", { "data-slot": "table-footer", className: cn("tw
|
|
14
|
+
return (jsx("tfoot", { "data-slot": "table-footer", className: cn("tw:!bg-muted/50 tw:!border-t tw:!font-medium [&>tr]:last:tw:!border-b-0", className), ...props }));
|
|
15
15
|
}
|
|
16
16
|
function TableRow({ className, ...props }) {
|
|
17
|
-
return (jsx("tr", { "data-slot": "table-row", className: cn("hover:tw
|
|
17
|
+
return (jsx("tr", { "data-slot": "table-row", className: cn("hover:tw:!bg-muted/50 data-[state=selected]:tw:!bg-muted tw:!border-b tw:!transition-colors", className), ...props }));
|
|
18
18
|
}
|
|
19
19
|
function TableHead({ className, ...props }) {
|
|
20
|
-
return (jsx("th", { "data-slot": "table-head", className: cn("tw
|
|
20
|
+
return (jsx("th", { "data-slot": "table-head", className: cn("tw:!text-foreground tw:!h-10 tw:!px-2 tw:!text-left tw:!align-middle tw:!font-medium tw:!whitespace-nowrap [&:has([role=checkbox])]:tw:!pr-0 [&>[role=checkbox]]:tw:!translate-y-[2px]", className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function TableCell({ className, ...props }) {
|
|
23
|
-
return (jsx("td", { "data-slot": "table-cell", className: cn("tw
|
|
23
|
+
return (jsx("td", { "data-slot": "table-cell", className: cn("tw:!p-2 tw:!align-middle tw:!whitespace-nowrap [&:has([role=checkbox])]:tw:!pr-0 [&>[role=checkbox]]:tw:!translate-y-[2px]", className), ...props }));
|
|
24
24
|
}
|
|
25
25
|
function TableCaption({ className, ...props }) {
|
|
26
|
-
return (jsx("caption", { "data-slot": "table-caption", className: cn("tw
|
|
26
|
+
return (jsx("caption", { "data-slot": "table-caption", className: cn("tw:!text-muted-foreground tw:!mt-4 tw:!text-sm", className), ...props }));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
|
package/dist/globals.css
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
--card-foreground: oklch(0.3152 0.0198 242.4463);
|
|
15
15
|
--popover: oklch(1.0000 0 0);
|
|
16
16
|
--popover-foreground: oklch(0.3152 0.0198 242.4463);
|
|
17
|
-
--primary: oklch(0.
|
|
17
|
+
--primary: oklch(0.6890 0.1379 230.8);
|
|
18
18
|
--primary-foreground: oklch(1.0000 0 0);
|
|
19
19
|
--secondary: oklch(0.6723 0.1606 244.9955);
|
|
20
20
|
--secondary-foreground: oklch(1.0000 0 0);
|
|
@@ -163,6 +163,8 @@
|
|
|
163
163
|
--shadow-lg: var(--shadow-lg);
|
|
164
164
|
--shadow-xl: var(--shadow-xl);
|
|
165
165
|
--shadow-2xl: var(--shadow-2xl);
|
|
166
|
+
--color-sky-500: #0ea5e9;
|
|
167
|
+
--color-sky-600: #0284c7;
|
|
166
168
|
}
|
|
167
169
|
|
|
168
170
|
@layer base {
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getgreenline/blaze-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.22",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
|
+
"@base-ui/react": "^1.1.0",
|
|
6
7
|
"@hookform/resolvers": "^5.2.2",
|
|
7
8
|
"@radix-ui/react-accordion": "^1.2.12",
|
|
8
9
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
@@ -48,7 +49,8 @@
|
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
50
51
|
"react": ">=16.14",
|
|
51
|
-
"react-dom": ">=16.14"
|
|
52
|
+
"react-dom": ">=16.14",
|
|
53
|
+
"@base-ui/react": "^1.0.0"
|
|
52
54
|
},
|
|
53
55
|
"devDependencies": {
|
|
54
56
|
"@rollup/plugin-commonjs": "^28.0.0",
|
|
@@ -62,8 +64,8 @@
|
|
|
62
64
|
"rollup": "^4.52.0",
|
|
63
65
|
"tailwindcss": "^4.1.11",
|
|
64
66
|
"typescript": "^5.9.2",
|
|
65
|
-
"@workspace/
|
|
66
|
-
"@workspace/
|
|
67
|
+
"@workspace/eslint-config": "0.0.0",
|
|
68
|
+
"@workspace/typescript-config": "0.0.0"
|
|
67
69
|
},
|
|
68
70
|
"main": "./dist/index.js",
|
|
69
71
|
"module": "./dist/index.js",
|