@lerianstudio/sindarian-ui 1.3.0-beta.1 → 1.3.0-beta.3
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/card/account-card/index.d.ts.map +1 -1
- package/dist/components/card/account-card/index.js +2 -2
- package/dist/components/dialog/confirmation-dialog/index.d.ts +10 -2
- package/dist/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
- package/dist/components/dialog/confirmation-dialog/index.js +72 -7
- package/dist/components/ui/accordion/index.js +1 -1
- package/dist/components/ui/alert/index.d.ts +1 -1
- package/dist/components/ui/alert-dialog/index.d.ts +5 -1
- package/dist/components/ui/alert-dialog/index.d.ts.map +1 -1
- package/dist/components/ui/alert-dialog/index.js +2 -2
- package/dist/components/ui/autocomplete/index.d.ts +1 -1
- package/dist/components/ui/autocomplete/index.d.ts.map +1 -1
- package/dist/components/ui/autocomplete/index.js +42 -6
- package/dist/components/ui/badge/index.d.ts +1 -1
- package/dist/components/ui/button/index.d.ts +2 -2
- package/dist/components/ui/button/index.d.ts.map +1 -1
- package/dist/components/ui/button/index.js +2 -1
- package/dist/components/ui/button/styles.css +17 -4
- package/dist/components/ui/dialog/styles.css +3 -3
- package/dist/components/ui/dropdown-menu/index.js +2 -2
- package/dist/components/ui/hover-card/index.js +1 -1
- package/dist/components/ui/input/adornment.d.ts +1 -1
- package/dist/components/ui/loading-button/index.js +1 -1
- package/dist/components/ui/multiple-select/index.js +1 -1
- package/dist/components/ui/otp-input/index.js +1 -1
- package/dist/components/ui/paper-collapsible/index.js +1 -1
- package/dist/components/ui/popover/index.js +1 -1
- package/dist/components/ui/select/styles.css +1 -1
- package/dist/components/ui/sheet/index.d.ts +1 -1
- package/dist/components/ui/sheet/index.js +2 -2
- package/dist/components/ui/sidebar/sidebar-item-collapsible.js +1 -1
- package/dist/components/ui/skeleton/index.js +1 -1
- package/dist/components/ui/tooltip/index.js +1 -1
- package/dist/enterprise/data-table/index.d.ts +13 -1
- package/dist/enterprise/data-table/index.d.ts.map +1 -1
- package/dist/enterprise/data-table/index.js +7 -3
- package/dist/esm/components/card/account-card/index.d.ts.map +1 -1
- package/dist/esm/components/card/account-card/index.js +2 -2
- package/dist/esm/components/dialog/confirmation-dialog/index.d.ts +10 -2
- package/dist/esm/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
- package/dist/esm/components/dialog/confirmation-dialog/index.js +39 -7
- package/dist/esm/components/ui/accordion/index.js +1 -1
- package/dist/esm/components/ui/alert/index.d.ts +1 -1
- package/dist/esm/components/ui/alert-dialog/index.d.ts +5 -1
- package/dist/esm/components/ui/alert-dialog/index.d.ts.map +1 -1
- package/dist/esm/components/ui/alert-dialog/index.js +2 -2
- package/dist/esm/components/ui/autocomplete/index.d.ts +1 -1
- package/dist/esm/components/ui/autocomplete/index.d.ts.map +1 -1
- package/dist/esm/components/ui/autocomplete/index.js +42 -6
- package/dist/esm/components/ui/badge/index.d.ts +1 -1
- package/dist/esm/components/ui/button/index.d.ts +2 -2
- package/dist/esm/components/ui/button/index.d.ts.map +1 -1
- package/dist/esm/components/ui/button/index.js +2 -1
- package/dist/esm/components/ui/dropdown-menu/index.js +2 -2
- package/dist/esm/components/ui/hover-card/index.js +1 -1
- package/dist/esm/components/ui/input/adornment.d.ts +1 -1
- package/dist/esm/components/ui/loading-button/index.js +1 -1
- package/dist/esm/components/ui/multiple-select/index.js +1 -1
- package/dist/esm/components/ui/otp-input/index.js +1 -1
- package/dist/esm/components/ui/paper-collapsible/index.js +1 -1
- package/dist/esm/components/ui/popover/index.js +1 -1
- package/dist/esm/components/ui/sheet/index.d.ts +1 -1
- package/dist/esm/components/ui/sheet/index.js +2 -2
- package/dist/esm/components/ui/sidebar/sidebar-item-collapsible.js +1 -1
- package/dist/esm/components/ui/skeleton/index.js +1 -1
- package/dist/esm/components/ui/tooltip/index.js +1 -1
- package/dist/esm/enterprise/data-table/index.d.ts +13 -1
- package/dist/esm/enterprise/data-table/index.d.ts.map +1 -1
- package/dist/esm/enterprise/data-table/index.js +8 -4
- package/dist/esm/lib/utils.d.ts.map +1 -1
- package/dist/esm/lib/utils.js +27 -1
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +27 -1
- package/package.json +1 -1
|
@@ -18,9 +18,9 @@ function SheetPortal({ ...props }) {
|
|
|
18
18
|
return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
19
19
|
}
|
|
20
20
|
function SheetOverlay({ className, ...props }) {
|
|
21
|
-
return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), ...props }));
|
|
21
|
+
return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn('motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), ...props }));
|
|
22
22
|
}
|
|
23
|
-
const sheetVariants = cva('fixed z-50 gap-4 bg-background p-12 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
|
|
23
|
+
const sheetVariants = cva('fixed z-50 gap-4 bg-background p-12 shadow-lg transition ease-in-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
|
|
24
24
|
variants: {
|
|
25
25
|
side: {
|
|
26
26
|
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
|
|
@@ -38,7 +38,7 @@ export function SidebarItemCollapsibleTrigger({ className, icon, title, children
|
|
|
38
38
|
}
|
|
39
39
|
export function SidebarItemCollapsibleContent({ className, children, ...props }) {
|
|
40
40
|
const { isCollapsed } = useSidebar();
|
|
41
|
-
return (_jsx(CollapsibleContent, { "data-slot": "sidebar-item-collapsible-content", className: cn('mt-1 flex flex-col gap-1', 'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all duration-200 ease-in-out', {
|
|
41
|
+
return (_jsx(CollapsibleContent, { "data-slot": "sidebar-item-collapsible-content", className: cn('mt-1 flex flex-col gap-1', 'motion-safe:data-[state=closed]:animate-collapsible-up motion-safe:data-[state=open]:animate-collapsible-down overflow-hidden transition-all duration-200 ease-in-out', {
|
|
42
42
|
'items-center': isCollapsed
|
|
43
43
|
}, className), ...props, children: isCollapsed ? (children) : (_jsxs("div", { className: "flex items-stretch gap-3", children: [_jsx(Separator, { className: "ml-5 h-auto", orientation: "vertical" }), _jsx("div", { className: "flex w-full flex-col gap-1", children: children })] })) }));
|
|
44
44
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '../../../lib/utils.js';
|
|
3
3
|
function Skeleton({ className, ...props }) {
|
|
4
|
-
return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-muted animate-pulse
|
|
4
|
+
return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-muted rounded-md motion-safe:animate-pulse', className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
export { Skeleton };
|
|
@@ -23,6 +23,6 @@ function TooltipTrigger({ ...props }) {
|
|
|
23
23
|
return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
24
24
|
}
|
|
25
25
|
function TooltipContent({ className, sideOffset = 0, children, ...props }) {
|
|
26
|
-
return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-shadcn-600 text-shadcn-400 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md px-3 py-1.5 text-sm shadow-md', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-shadcn-600 fill-shadcn-600 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
|
|
26
|
+
return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-shadcn-600 text-shadcn-400 motion-safe:animate-in fade-in-0 zoom-in-95 motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md px-3 py-1.5 text-sm shadow-md', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-shadcn-600 fill-shadcn-600 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
|
|
27
27
|
}
|
|
28
28
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -81,8 +81,20 @@ type DataTableBaseProps<TData> = {
|
|
|
81
81
|
*/
|
|
82
82
|
rowHref?: (row: TData) => string;
|
|
83
83
|
className?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Extra classes merged onto every header cell, after the kit label voice —
|
|
86
|
+
* so a caller can override the voice's size/tracking/color for one table
|
|
87
|
+
* without restating the cluster. Per-column alignment stays `meta.numeric`.
|
|
88
|
+
*/
|
|
89
|
+
headClassName?: string;
|
|
90
|
+
/**
|
|
91
|
+
* Footed-total row(s) rendered inside the kit `TableFooter` after the body.
|
|
92
|
+
* The caller supplies the row markup (`<tr><td>…</td></tr>`) so the footer
|
|
93
|
+
* can span, align and format its own figures. Omitted → no `tfoot`.
|
|
94
|
+
*/
|
|
95
|
+
footer?: React.ReactNode;
|
|
84
96
|
};
|
|
85
97
|
export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData>;
|
|
86
|
-
export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className }: DataTableProps<TData>): import("react").JSX.Element;
|
|
98
|
+
export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
|
|
87
99
|
export {};
|
|
88
100
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,EAEvB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,CAAA;AA4E1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACP,EAAE,cAAc,CAAC,KAAK,CAAC,+BAiSvB"}
|
|
@@ -10,6 +10,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
10
10
|
* - empty → EmptyState (data resolved, zero rows)
|
|
11
11
|
* - data → semantic table rows; cells own any links/actions
|
|
12
12
|
*
|
|
13
|
+
* Column heads speak the kit's LABEL_VOICE_CLASS; `headClassName` overrides it
|
|
14
|
+
* per table. An optional `footer` node renders in a `tfoot` for footed totals.
|
|
15
|
+
*
|
|
13
16
|
* Columns are standard TanStack `ColumnDef<T>`; cells receive the row's
|
|
14
17
|
* `original` value, so screens compose money / date / status cells directly in
|
|
15
18
|
* their column `cell` renderers.
|
|
@@ -34,8 +37,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
34
37
|
*/
|
|
35
38
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
36
39
|
import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
|
|
37
|
-
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../components/ui/table/index.js';
|
|
40
|
+
import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '../../components/ui/table/index.js';
|
|
38
41
|
import { Skeleton } from '../../components/ui/skeleton/index.js';
|
|
42
|
+
import { LABEL_VOICE_CLASS } from '../../lib/typography.js';
|
|
39
43
|
import { cn } from '../../lib/utils.js';
|
|
40
44
|
import { EmptyState } from '../empty-state/index.js';
|
|
41
45
|
const SELECTION_COLUMN_ID = '__select__';
|
|
@@ -75,7 +79,7 @@ function createSelectionColumn(getLabel) {
|
|
|
75
79
|
cell: ({ row }) => _jsx(RowSelectionCheckbox, { row: row, getLabel: getLabel })
|
|
76
80
|
};
|
|
77
81
|
}
|
|
78
|
-
export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className }) {
|
|
82
|
+
export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }) {
|
|
79
83
|
const tableColumns = useMemo(() => enableRowSelection
|
|
80
84
|
? [createSelectionColumn(getRowSelectionLabel), ...columns]
|
|
81
85
|
: columns, [columns, enableRowSelection, getRowSelectionLabel]);
|
|
@@ -213,7 +217,7 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
|
|
|
213
217
|
? 'No rows'
|
|
214
218
|
: `${rowCount} rows` }), _jsxs(Table, { "aria-busy": loading ? 'true' : undefined, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
|
|
215
219
|
const numeric = header.column.columnDef.meta?.numeric;
|
|
216
|
-
return (_jsx(TableHead, { align: numeric ? 'right' : undefined, className: cn(
|
|
220
|
+
return (_jsx(TableHead, { align: numeric ? 'right' : undefined, className: cn(LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), children: header.isPlaceholder
|
|
217
221
|
? null
|
|
218
222
|
: flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
|
|
219
223
|
}) }, headerGroup.id))) }), _jsx(TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => (_jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: colCount }).map((__, cellIndex) => (_jsx(TableCell, { className: cellDensityClass, children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, `skeleton-${rowIndex}-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : rowCount === 0 ? (_jsx(TableRow, { className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colCount, className: "p-0", children: _jsx(EmptyState, { title: empty?.title ?? 'Nothing here yet', description: empty?.description, icon: empty?.icon, action: empty?.action,
|
|
@@ -238,5 +242,5 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
|
|
|
238
242
|
? 'selected'
|
|
239
243
|
: undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { className: cn(cell.column.columnDef.meta?.numeric && NUMERIC_CELL_CLASS, cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10'), onClick: cell.column.id === SELECTION_COLUMN_ID
|
|
240
244
|
? stopPropagation
|
|
241
|
-
: undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] })] }));
|
|
245
|
+
: undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) }), footer ? _jsx(TableFooter, { children: footer }) : null] })] }));
|
|
242
246
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AA8B5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
|
package/dist/esm/lib/utils.js
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
|
-
import {
|
|
2
|
+
import { extendTailwindMerge } from 'tailwind-merge';
|
|
3
|
+
/**
|
|
4
|
+
* The kit's button variants are component classes in `@layer components`, not
|
|
5
|
+
* Tailwind utilities, so stock tailwind-merge has no group for them: it kept
|
|
6
|
+
* `button-primary button-destructive` together and let stylesheet source order
|
|
7
|
+
* pick the winner. Declaring the group makes the last one win, like every other
|
|
8
|
+
* conflict `cn` resolves.
|
|
9
|
+
*
|
|
10
|
+
* Variant classes only. `button-base`, `button-disabled`, `button-read-only`
|
|
11
|
+
* and `button-small` compose with a variant instead of conflicting with it, so
|
|
12
|
+
* they stay out of the group and are never merged away.
|
|
13
|
+
*/
|
|
14
|
+
const twMerge = extendTailwindMerge({
|
|
15
|
+
extend: {
|
|
16
|
+
classGroups: {
|
|
17
|
+
'sindarian-button-variant': [
|
|
18
|
+
'button-plain',
|
|
19
|
+
'button-primary',
|
|
20
|
+
'button-secondary',
|
|
21
|
+
'button-tertiary',
|
|
22
|
+
'button-outline',
|
|
23
|
+
'button-link',
|
|
24
|
+
'button-destructive'
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
});
|
|
3
29
|
export function cn(...inputs) {
|
|
4
30
|
return twMerge(clsx(inputs));
|
|
5
31
|
}
|
package/dist/lib/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AA8B5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
|
package/dist/lib/utils.js
CHANGED
|
@@ -3,6 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.cn = cn;
|
|
4
4
|
const clsx_1 = require("clsx");
|
|
5
5
|
const tailwind_merge_1 = require("tailwind-merge");
|
|
6
|
+
/**
|
|
7
|
+
* The kit's button variants are component classes in `@layer components`, not
|
|
8
|
+
* Tailwind utilities, so stock tailwind-merge has no group for them: it kept
|
|
9
|
+
* `button-primary button-destructive` together and let stylesheet source order
|
|
10
|
+
* pick the winner. Declaring the group makes the last one win, like every other
|
|
11
|
+
* conflict `cn` resolves.
|
|
12
|
+
*
|
|
13
|
+
* Variant classes only. `button-base`, `button-disabled`, `button-read-only`
|
|
14
|
+
* and `button-small` compose with a variant instead of conflicting with it, so
|
|
15
|
+
* they stay out of the group and are never merged away.
|
|
16
|
+
*/
|
|
17
|
+
const twMerge = (0, tailwind_merge_1.extendTailwindMerge)({
|
|
18
|
+
extend: {
|
|
19
|
+
classGroups: {
|
|
20
|
+
'sindarian-button-variant': [
|
|
21
|
+
'button-plain',
|
|
22
|
+
'button-primary',
|
|
23
|
+
'button-secondary',
|
|
24
|
+
'button-tertiary',
|
|
25
|
+
'button-outline',
|
|
26
|
+
'button-link',
|
|
27
|
+
'button-destructive'
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
6
32
|
function cn(...inputs) {
|
|
7
|
-
return
|
|
33
|
+
return twMerge((0, clsx_1.clsx)(inputs));
|
|
8
34
|
}
|