@pk-design/react-tailwind 1.5.1 → 1.5.2
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/react-tailwind.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--ui-primary:#2563eb;--ui-primary-hover:#1d4ed8;--ui-primary-ring:#2563eb;--ui-primary-light:#eff6ff;--ui-primary-text:#1d4ed8;--ui-primary-disabled:#93c5fd;--ui-danger:#dc2626;--ui-danger-hover:#b91c1c;--ui-danger-ring:#dc2626;--ui-danger-light:#fef2f2;--ui-danger-text:#991b1b;--ui-danger-disabled:#fca5a5;--ui-success:#16a34a;--ui-success-ring:#16a34a;--ui-success-light:#f0fdf4;--ui-success-text:#15803d;--ui-warning:#d97706;--ui-warning-ring:#d97706;--ui-warning-light:#fffbeb;--ui-warning-text:#92400e;--ui-info:#2563eb;--ui-info-ring:#2563eb;--ui-info-light:#eff6ff;--ui-info-text:#1d4ed8;--ui-success-ring-subtle:rgba(22,163,74,.2);--ui-danger-ring-subtle:rgba(220,38,38,.2);--ui-warning-ring-subtle:rgba(217,119,6,.2);--ui-info-ring-subtle:rgba(37,99,235,.2);--ui-secondary-ring-subtle:hsla(220,9%,46%,.2);--ui-focus-ring:#2563eb;--ui-text:#111827;--ui-text-muted:#6b7280;--ui-text-danger:#ef4444;--ui-radius-sm:0.25rem;--ui-radius:0.375rem;--ui-radius-md:0.5rem;--ui-radius-lg:0.75rem;--ui-radius-xl:1rem;--ui-radius-full:9999px}.dark{--ui-primary:#3b82f6;--ui-primary-hover:#2563eb;--ui-primary-ring:#3b82f6;--ui-primary-light:#1e3a8a;--ui-primary-text:#93c5fd;--ui-primary-disabled:#1e40af;--ui-danger:#ef4444;--ui-danger-hover:#dc2626;--ui-danger-ring:#ef4444;--ui-danger-light:#7f1d1d;--ui-danger-text:#fca5a5;--ui-danger-disabled:#991b1b;--ui-success:#22c55e;--ui-success-ring:#22c55e;--ui-success-light:#14532d;--ui-success-text:#86efac;--ui-warning:#f59e0b;--ui-warning-ring:#f59e0b;--ui-warning-light:#78350f;--ui-warning-text:#fcd34d;--ui-info:#3b82f6;--ui-info-ring:#3b82f6;--ui-info-light:#1e3a8a;--ui-info-text:#93c5fd;--ui-success-ring-subtle:rgba(34,197,94,.2);--ui-danger-ring-subtle:rgba(239,68,68,.2);--ui-warning-ring-subtle:rgba(245,158,11,.2);--ui-info-ring-subtle:rgba(59,130,246,.2);--ui-secondary-ring-subtle:rgba(156,163,175,.2);--ui-focus-ring:#3b82f6;--ui-text:#f3f4f6;--ui-text-muted:#9ca3af;--ui-text-danger:#f87171}.spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}.spinner .path{-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
|
|
1
|
+
:root{--ui-primary:#2563eb;--ui-primary-hover:#1d4ed8;--ui-primary-ring:#2563eb;--ui-primary-light:#eff6ff;--ui-primary-text:#1d4ed8;--ui-primary-disabled:#93c5fd;--ui-danger:#dc2626;--ui-danger-hover:#b91c1c;--ui-danger-ring:#dc2626;--ui-danger-light:#fef2f2;--ui-danger-text:#991b1b;--ui-danger-disabled:#fca5a5;--ui-success:#16a34a;--ui-success-ring:#16a34a;--ui-success-light:#f0fdf4;--ui-success-text:#15803d;--ui-warning:#d97706;--ui-warning-ring:#d97706;--ui-warning-light:#fffbeb;--ui-warning-text:#92400e;--ui-info:#2563eb;--ui-info-ring:#2563eb;--ui-info-light:#eff6ff;--ui-info-text:#1d4ed8;--ui-success-ring-subtle:rgba(22,163,74,.2);--ui-danger-ring-subtle:rgba(220,38,38,.2);--ui-warning-ring-subtle:rgba(217,119,6,.2);--ui-info-ring-subtle:rgba(37,99,235,.2);--ui-secondary-ring-subtle:hsla(220,9%,46%,.2);--ui-focus-ring:#2563eb;--ui-text:#111827;--ui-text-muted:#6b7280;--ui-text-danger:#ef4444;--ui-border:#e5e7eb;--ui-border-muted:#f3f4f6;--ui-radius-sm:0.25rem;--ui-radius:0.375rem;--ui-radius-md:0.5rem;--ui-radius-lg:0.75rem;--ui-radius-xl:1rem;--ui-radius-full:9999px}.dark{--ui-primary:#3b82f6;--ui-primary-hover:#2563eb;--ui-primary-ring:#3b82f6;--ui-primary-light:#1e3a8a;--ui-primary-text:#93c5fd;--ui-primary-disabled:#1e40af;--ui-danger:#ef4444;--ui-danger-hover:#dc2626;--ui-danger-ring:#ef4444;--ui-danger-light:#7f1d1d;--ui-danger-text:#fca5a5;--ui-danger-disabled:#991b1b;--ui-success:#22c55e;--ui-success-ring:#22c55e;--ui-success-light:#14532d;--ui-success-text:#86efac;--ui-warning:#f59e0b;--ui-warning-ring:#f59e0b;--ui-warning-light:#78350f;--ui-warning-text:#fcd34d;--ui-info:#3b82f6;--ui-info-ring:#3b82f6;--ui-info-light:#1e3a8a;--ui-info-text:#93c5fd;--ui-success-ring-subtle:rgba(34,197,94,.2);--ui-danger-ring-subtle:rgba(239,68,68,.2);--ui-warning-ring-subtle:rgba(245,158,11,.2);--ui-info-ring-subtle:rgba(59,130,246,.2);--ui-secondary-ring-subtle:rgba(156,163,175,.2);--ui-focus-ring:#3b82f6;--ui-text:#f3f4f6;--ui-text-muted:#9ca3af;--ui-text-danger:#f87171;--ui-border:#374151;--ui-border-muted:#374151}.spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}.spinner .path{-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
|
|
2
2
|
/*# sourceMappingURL=react-tailwind.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["tokens.css","loader.css"],"names":[],"mappings":"AAgBA,MAEE,oBAAqB,CACrB,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAC1B,6BAA8B,CAG9B,mBAAoB,CACpB,yBAA0B,CAC1B,wBAAyB,CACzB,yBAA0B,CAC1B,wBAAyB,CACzB,4BAA6B,CAG7B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAG1B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAG1B,iBAAkB,CAClB,sBAAuB,CACvB,uBAAwB,CACxB,sBAAuB,CAGvB,2CAAgD,CAChD,0CAA+C,CAC/C,2CAAgD,CAChD,wCAA6C,CAC7C,8CAAoD,CAGpD,uBAAwB,CAGxB,iBAAkB,CAClB,uBAAwB,CACxB,wBAAyB,CAGzB,sBAAuB,CACvB,oBAAqB,CACrB,qBAAsB,CACtB,sBAAuB,CACvB,mBAAoB,CACpB,uBACF,CAGA,MACE,oBAAqB,CACrB,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAC1B,6BAA8B,CAE9B,mBAAoB,CACpB,yBAA0B,CAC1B,wBAAyB,CACzB,yBAA0B,CAC1B,wBAAyB,CACzB,4BAA6B,CAE7B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAE1B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAE1B,iBAAkB,CAClB,sBAAuB,CACvB,uBAAwB,CACxB,sBAAuB,CAEvB,2CAAgD,CAChD,0CAA+C,CAC/C,4CAAiD,CACjD,yCAA8C,CAC9C,+CAAoD,CAEpD,uBAAwB,CAExB,iBAAkB,CAClB,uBAAwB,CACxB,
|
|
1
|
+
{"version":3,"sources":["tokens.css","loader.css"],"names":[],"mappings":"AAgBA,MAEE,oBAAqB,CACrB,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAC1B,6BAA8B,CAG9B,mBAAoB,CACpB,yBAA0B,CAC1B,wBAAyB,CACzB,yBAA0B,CAC1B,wBAAyB,CACzB,4BAA6B,CAG7B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAG1B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAG1B,iBAAkB,CAClB,sBAAuB,CACvB,uBAAwB,CACxB,sBAAuB,CAGvB,2CAAgD,CAChD,0CAA+C,CAC/C,2CAAgD,CAChD,wCAA6C,CAC7C,8CAAoD,CAGpD,uBAAwB,CAGxB,iBAAkB,CAClB,uBAAwB,CACxB,wBAAyB,CAGzB,mBAAoB,CACpB,yBAA0B,CAG1B,sBAAuB,CACvB,oBAAqB,CACrB,qBAAsB,CACtB,sBAAuB,CACvB,mBAAoB,CACpB,uBACF,CAGA,MACE,oBAAqB,CACrB,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAC1B,6BAA8B,CAE9B,mBAAoB,CACpB,yBAA0B,CAC1B,wBAAyB,CACzB,yBAA0B,CAC1B,wBAAyB,CACzB,4BAA6B,CAE7B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAE1B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAE1B,iBAAkB,CAClB,sBAAuB,CACvB,uBAAwB,CACxB,sBAAuB,CAEvB,2CAAgD,CAChD,0CAA+C,CAC/C,4CAAiD,CACjD,yCAA8C,CAC9C,+CAAoD,CAEpD,uBAAwB,CAExB,iBAAkB,CAClB,uBAAwB,CACxB,wBAAyB,CAEzB,mBAAoB,CACpB,yBACF,CC3HA,SACE,2CAA4C,CAC5C,mCACF,CACA,eACE,gDAAiD,CACjD,wCACF,CAEA,0BACE,GACE,+BAAiC,CACjC,uBACF,CACF,CAEA,kBACE,GACE,+BAAiC,CACjC,uBACF,CACF,CACA,wBACE,GACE,sBAAwB,CACxB,mBACF,CACA,IACE,uBAAyB,CACzB,qBACF,CACA,GACE,uBAAyB,CACzB,sBACF,CACF,CACA,gBACE,GACE,sBAAwB,CACxB,mBACF,CACA,IACE,uBAAyB,CACzB,qBACF,CACA,GACE,uBAAyB,CACzB,sBACF,CACF","file":"react-tailwind.css","sourcesContent":["/*\n * Design tokens for @pk-design/react-tailwind.\n *\n * Override any variable in your app's CSS to rebrand the entire library:\n *\n * :root {\n * --ui-primary: #7c3aed;\n * --ui-primary-hover: #6d28d9;\n * --ui-primary-ring: #7c3aed;\n * --ui-primary-light: #f5f3ff;\n * --ui-primary-text: #5b21b6;\n * --ui-primary-disabled:#c4b5fd;\n * }\n */\n\n/* ─── Light mode ────────────────────────────────────────────────────────────── */\n:root {\n /* Primary (blue-600 family) */\n --ui-primary: #2563eb;\n --ui-primary-hover: #1d4ed8;\n --ui-primary-ring: #2563eb;\n --ui-primary-light: #eff6ff;\n --ui-primary-text: #1d4ed8;\n --ui-primary-disabled: #93c5fd;\n\n /* Danger (red-600 family) */\n --ui-danger: #dc2626;\n --ui-danger-hover: #b91c1c;\n --ui-danger-ring: #dc2626;\n --ui-danger-light: #fef2f2;\n --ui-danger-text: #991b1b;\n --ui-danger-disabled: #fca5a5;\n\n /* Success (green-600 family) */\n --ui-success: #16a34a;\n --ui-success-ring: #16a34a;\n --ui-success-light: #f0fdf4;\n --ui-success-text: #15803d;\n\n /* Warning (amber-600 family) */\n --ui-warning: #d97706;\n --ui-warning-ring: #d97706;\n --ui-warning-light: #fffbeb;\n --ui-warning-text: #92400e;\n\n /* Info (same as primary by default) */\n --ui-info: #2563eb;\n --ui-info-ring: #2563eb;\n --ui-info-light: #eff6ff;\n --ui-info-text: #1d4ed8;\n\n /* Badge / Alert ring colors (with opacity pre-baked) */\n --ui-success-ring-subtle: rgba(22, 163, 74, 0.2);\n --ui-danger-ring-subtle: rgba(220, 38, 38, 0.2);\n --ui-warning-ring-subtle: rgba(217, 119, 6, 0.2);\n --ui-info-ring-subtle: rgba(37, 99, 235, 0.2);\n --ui-secondary-ring-subtle: rgba(107, 114, 128, 0.2);\n\n /* Global focus ring */\n --ui-focus-ring: #2563eb;\n\n /* Neutral text (used by BodyText, TextContent, HeadingText) */\n --ui-text: #111827; /* gray-900 */\n --ui-text-muted: #6b7280; /* gray-500 */\n --ui-text-danger: #ef4444; /* red-500 */\n\n /* Neutral structural borders (containers, dividers — not interactive form controls) */\n --ui-border: #e5e7eb; /* gray-200 */\n --ui-border-muted: #f3f4f6; /* gray-100 */\n\n /* Border radius scale */\n --ui-radius-sm: 0.25rem;\n --ui-radius: 0.375rem;\n --ui-radius-md: 0.5rem;\n --ui-radius-lg: 0.75rem;\n --ui-radius-xl: 1rem;\n --ui-radius-full: 9999px;\n}\n\n/* ─── Dark mode overrides ───────────────────────────────────────────────────── */\n.dark {\n --ui-primary: #3b82f6;\n --ui-primary-hover: #2563eb;\n --ui-primary-ring: #3b82f6;\n --ui-primary-light: #1e3a8a;\n --ui-primary-text: #93c5fd;\n --ui-primary-disabled: #1e40af;\n\n --ui-danger: #ef4444;\n --ui-danger-hover: #dc2626;\n --ui-danger-ring: #ef4444;\n --ui-danger-light: #7f1d1d;\n --ui-danger-text: #fca5a5;\n --ui-danger-disabled: #991b1b;\n\n --ui-success: #22c55e;\n --ui-success-ring: #22c55e;\n --ui-success-light: #14532d;\n --ui-success-text: #86efac;\n\n --ui-warning: #f59e0b;\n --ui-warning-ring: #f59e0b;\n --ui-warning-light: #78350f;\n --ui-warning-text: #fcd34d;\n\n --ui-info: #3b82f6;\n --ui-info-ring: #3b82f6;\n --ui-info-light: #1e3a8a;\n --ui-info-text: #93c5fd;\n\n --ui-success-ring-subtle: rgba(34, 197, 94, 0.2);\n --ui-danger-ring-subtle: rgba(239, 68, 68, 0.2);\n --ui-warning-ring-subtle: rgba(245, 158, 11, 0.2);\n --ui-info-ring-subtle: rgba(59, 130, 246, 0.2);\n --ui-secondary-ring-subtle: rgba(156, 163, 175, 0.2);\n\n --ui-focus-ring: #3b82f6;\n\n --ui-text: #f3f4f6; /* gray-100 */\n --ui-text-muted: #9ca3af; /* gray-400 */\n --ui-text-danger: #f87171; /* red-400 */\n\n --ui-border: #374151; /* gray-700 */\n --ui-border-muted: #374151; /* gray-700 */\n}\n","/* SVG spinner icon animation */\n.spinner {\n -webkit-animation: rotate 2s linear infinite;\n animation: rotate 2s linear infinite;\n}\n.spinner .path {\n -webkit-animation: dash 1.5s ease-in-out infinite;\n animation: dash 1.5s ease-in-out infinite;\n}\n\n@-webkit-keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@-webkit-keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n@keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n"]}
|
|
@@ -530,7 +530,7 @@ const Card = forwardRef(({ as, ...props }, ref) => {
|
|
|
530
530
|
const Component = as || 'div';
|
|
531
531
|
// Extract className safely from rest
|
|
532
532
|
const { className, ...cleanRest } = rest;
|
|
533
|
-
const classes = buildClassName(BASE_CARD_CLASS, zeroPadding ? '' : compact ? 'p-2' : 'p-6', hoverable && 'transition-background duration-200 hover:bg-gray-100 dark:hover:bg-gray-800', bordered && 'border border-
|
|
533
|
+
const classes = buildClassName(BASE_CARD_CLASS, zeroPadding ? '' : compact ? 'p-2' : 'p-6', hoverable && 'transition-background duration-200 hover:bg-gray-100 dark:hover:bg-gray-800', bordered && 'border border-[var(--ui-border)]', className);
|
|
534
534
|
return jsx(Component, { ref: ref, className: classes, ...cleanRest });
|
|
535
535
|
});
|
|
536
536
|
Card.displayName = 'Card';
|
|
@@ -603,7 +603,7 @@ const TableRowLoader = ({ colSize, rowSize }) => (jsx(Fragment, { children: Arra
|
|
|
603
603
|
/* ----------------------------------------------
|
|
604
604
|
* Table
|
|
605
605
|
* ---------------------------------------------- */
|
|
606
|
-
const Table = ({ children, layout = 'auto', className = '', caption, }) => (jsxs("table", { className: buildClassName('border-collapse w-full divide-y divide-
|
|
606
|
+
const Table = ({ children, layout = 'auto', className = '', caption, }) => (jsxs("table", { className: buildClassName('border-collapse w-full divide-y divide-[var(--ui-border)]', TABLE_LAYOUT[layout], className), children: [caption && (jsx("caption", { className: "mb-2 text-sm text-left text-gray-500 dark:text-gray-400", children: caption })), children] }));
|
|
607
607
|
/* ----------------------------------------------
|
|
608
608
|
* Head
|
|
609
609
|
* ---------------------------------------------- */
|
|
@@ -611,7 +611,7 @@ const TableHead = ({ children, className = '' }) => (jsx("thead", { className: b
|
|
|
611
611
|
/* ----------------------------------------------
|
|
612
612
|
* Body
|
|
613
613
|
* ---------------------------------------------- */
|
|
614
|
-
const TableBody = ({ children, loading, colSize = 1, rowSize = 5, className, }) => (jsx("tbody", { className: buildClassName('text-sm text-gray-700 dark:text-white divide-y divide-
|
|
614
|
+
const TableBody = ({ children, loading, colSize = 1, rowSize = 5, className, }) => (jsx("tbody", { className: buildClassName('text-sm text-gray-700 dark:text-white divide-y divide-[var(--ui-border)]', className), children: loading ? jsx(TableRowLoader, { colSize: colSize, rowSize: rowSize }) : children }));
|
|
615
615
|
/* ----------------------------------------------
|
|
616
616
|
* Foot
|
|
617
617
|
* ---------------------------------------------- */
|
|
@@ -619,7 +619,7 @@ const TableFoot = ({ children }) => (jsx("tfoot", { children: jsx("tr", { childr
|
|
|
619
619
|
/* ----------------------------------------------
|
|
620
620
|
* Rows
|
|
621
621
|
* ---------------------------------------------- */
|
|
622
|
-
const TableRow = ({ children, hoverable = false, className, ...props }) => (jsx("tr", { ...props, className: buildClassName('last:border-b border-
|
|
622
|
+
const TableRow = ({ children, hoverable = false, className, ...props }) => (jsx("tr", { ...props, className: buildClassName('last:border-b border-[var(--ui-border)]', hoverable && 'group', className), children: children }));
|
|
623
623
|
/* ----------------------------------------------
|
|
624
624
|
* Cells
|
|
625
625
|
* ---------------------------------------------- */
|
|
@@ -990,7 +990,7 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
|
|
|
990
990
|
});
|
|
991
991
|
const densityCellClass = DENSITY_CELL_CLASS$2[density];
|
|
992
992
|
const colSize = columns.length + (selectable ? 1 : 0);
|
|
993
|
-
return (jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsx("div", { className: buildClassName('overflow-x-auto overflow-y-hidden rounded-lg border border-
|
|
993
|
+
return (jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsx("div", { className: buildClassName('overflow-x-auto overflow-y-hidden rounded-lg border border-[var(--ui-border)]', wrapperClass, pagination && 'rounded-b-none border-b-0'), children: jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxs(TableHead, { className: headClass, children: [selectable && (jsx(TableHeaderCell, { className: buildClassName('bg-gray-50 dark:bg-gray-800 w-px', densityCellClass), children: jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
|
|
994
994
|
if (el)
|
|
995
995
|
el.indeterminate = someSelected;
|
|
996
996
|
}, onChange: toggleAll }) })), columns.map((column) => (jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', densityCellClass, column.sticky === 'left' &&
|
|
@@ -1006,7 +1006,7 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
|
|
|
1006
1006
|
? column.render(item)
|
|
1007
1007
|
: ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
|
|
1008
1008
|
})] }, key));
|
|
1009
|
-
})) }), footerRow && jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsx(Pagination, { ...pagination, className: "rounded-b-lg border border-t-0 border-
|
|
1009
|
+
})) }), footerRow && jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsx(Pagination, { ...pagination, className: "rounded-b-lg border border-t-0 border-[var(--ui-border)]", onChange: setPagination }))] }));
|
|
1010
1010
|
}
|
|
1011
1011
|
DataTable.displayName = 'DataTable';
|
|
1012
1012
|
|
|
@@ -1024,10 +1024,10 @@ const HeadingText = {
|
|
|
1024
1024
|
};
|
|
1025
1025
|
|
|
1026
1026
|
const DetailedInformation = forwardRef((props, ref) => {
|
|
1027
|
-
const { className, title, subTitle, details, compact = false, divider = true, titleClass, detailsClass, ...divProps } = props;
|
|
1027
|
+
const { className, title, subTitle, details, compact = false, divider = true, titleClass, detailsClass, bordered = false, ...divProps } = props;
|
|
1028
1028
|
const hasTitles = title || subTitle;
|
|
1029
1029
|
const filteredDetails = details.filter((detail) => !detail.hidden);
|
|
1030
|
-
return (jsxs("div", { className: buildClassName('p-2 md:p-4', compact ? 'md:p-2' : '', className), ref: ref, ...divProps, children: [hasTitles && (jsxs("div", { className: "px-4 sm:px-0 pt-2 sm:pt-0 mb-2", children: [title && (jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-300", children: subTitle }))] })), filteredDetails.length ? (jsx("div", { className: buildClassName('border-
|
|
1030
|
+
return (jsxs("div", { className: buildClassName('p-2 md:p-4', compact ? 'md:p-2' : '', bordered ? 'border border-[var(--ui-border)]' : '', className), ref: ref, ...divProps, children: [hasTitles && (jsxs("div", { className: "px-4 sm:px-0 pt-2 sm:pt-0 mb-2", children: [title && (jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-300", children: subTitle }))] })), filteredDetails.length ? (jsx("div", { className: buildClassName('border-[var(--ui-border-muted)]', hasTitles && 'border-t', detailsClass), children: jsx("dl", { className: buildClassName(divider && 'divide-y divide-[var(--ui-border-muted)]'), children: filteredDetails.map((detail) => (jsxs("div", { className: buildClassName('px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center', compact ? 'py-1.5' : 'py-2.5'), children: [jsx("dt", { className: "text-sm/6 font-medium text-gray-900 dark:text-gray-100", children: detail.label }), jsx("dd", { className: buildClassName('mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.value || '- -' })] }, detail.label))) }) })) : null] }));
|
|
1031
1031
|
});
|
|
1032
1032
|
DetailedInformation.displayName = 'DetailedInformation';
|
|
1033
1033
|
|
|
@@ -1067,7 +1067,7 @@ Drawer.displayName = 'Drawer';
|
|
|
1067
1067
|
|
|
1068
1068
|
const BASE_ITEM_CLASS = 'flex w-full px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg';
|
|
1069
1069
|
const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', menuItemClass, onMenuClick, }) => {
|
|
1070
|
-
return (jsxs(Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsx(MenuButton, { as: Fragment$1, children: (state) => renderTriggerButton(state) })) : (jsx(MenuButton, { as: Fragment$1, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('w-52 origin-top-right rounded-xl shadow-sm p-1 text-sm transition duration-100 ease-out', 'border border-
|
|
1070
|
+
return (jsxs(Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsx(MenuButton, { as: Fragment$1, children: (state) => renderTriggerButton(state) })) : (jsx(MenuButton, { as: Fragment$1, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('w-52 origin-top-right rounded-xl shadow-sm p-1 text-sm transition duration-100 ease-out', 'border border-[var(--ui-border-muted)] bg-white text-gray-800', 'dark:bg-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment$1, { children: [jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled }) => (jsx("div", { onClick: () => !disabled && (onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx)), className: buildClassName(BASE_ITEM_CLASS, menuItemClass, disabled && 'cursor-not-allowed opacity-70'), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? renderItem(item) : item.label })) }), item.divider && (jsx("li", { className: "my-1 h-px bg-gray-200 dark:bg-white/5", "data-testid": "dropdown-divider" }, item.id))] }, item.id))) })] }));
|
|
1071
1071
|
};
|
|
1072
1072
|
Dropdown.displayName = 'Dropdown';
|
|
1073
1073
|
|
|
@@ -1692,15 +1692,15 @@ const VirtualizedRow = ({ index, style, data, }) => {
|
|
|
1692
1692
|
return col.cellClass;
|
|
1693
1693
|
};
|
|
1694
1694
|
const densityCellClass = DENSITY_CELL_CLASS$1[density];
|
|
1695
|
-
return (jsxs("div", { role: "row", className: buildClassName('grid border-b border-
|
|
1695
|
+
return (jsxs("div", { role: "row", className: buildClassName('grid border-b border-[var(--ui-border)] bg-white dark:bg-gray-900 group', onRowClick && 'cursor-pointer', isStriped && 'bg-gray-50 dark:bg-gray-800/40', resolvedRowClass), style: {
|
|
1696
1696
|
...style,
|
|
1697
1697
|
display: 'grid',
|
|
1698
1698
|
gridTemplateColumns: gridTemplate,
|
|
1699
1699
|
minWidth: 'fit-content',
|
|
1700
|
-
}, onClick: onRowClick ? () => onRowClick(item, index) : undefined, children: [selectable && (jsx("div", { role: "cell", className: buildClassName('flex items-center whitespace-nowrap border-r last:border-r-0 border-
|
|
1700
|
+
}, onClick: onRowClick ? () => onRowClick(item, index) : undefined, children: [selectable && (jsx("div", { role: "cell", className: buildClassName('flex items-center whitespace-nowrap border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass, isStriped && 'bg-gray-50 dark:bg-gray-800/40'), onClick: (e) => e.stopPropagation(), children: jsx(Checkbox, { "aria-label": "Select row", checked: (_b = isSelected === null || isSelected === void 0 ? void 0 : isSelected(key)) !== null && _b !== void 0 ? _b : false, disabled: !rowSelectable, onChange: () => toggleRow === null || toggleRow === void 0 ? void 0 : toggleRow(key) }) })), columns.map((col) => {
|
|
1701
1701
|
var _a;
|
|
1702
1702
|
const content = col.render ? col.render(item) : ((_a = get(item, col.name)) !== null && _a !== void 0 ? _a : 'Not set');
|
|
1703
|
-
return (jsx("div", { role: "cell", className: buildClassName('whitespace-nowrap border-r last:border-r-0 border-
|
|
1703
|
+
return (jsx("div", { role: "cell", className: buildClassName('whitespace-nowrap border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.sticky === 'left' &&
|
|
1704
1704
|
'sticky left-0 z-10 bg-white dark:bg-gray-900 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
|
|
1705
1705
|
'sticky right-0 z-10 bg-white dark:bg-gray-900 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', isStriped && 'bg-gray-50 dark:bg-gray-800/40', getCellClass(col)), children: content }, col.name));
|
|
1706
1706
|
})] }));
|
|
@@ -1788,18 +1788,18 @@ function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading =
|
|
|
1788
1788
|
/* -------------------------------------------------------
|
|
1789
1789
|
* Header
|
|
1790
1790
|
* ------------------------------------------------------- */
|
|
1791
|
-
const Header = (jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxs("div", { className: "grid bg-gray-50 dark:bg-gray-800 border-b border-
|
|
1791
|
+
const Header = (jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxs("div", { className: "grid bg-gray-50 dark:bg-gray-800 border-b border-[var(--ui-border)]", style: { gridTemplateColumns: gridTemplate, minWidth: 'fit-content' }, children: [selectable && (jsx("div", { role: "columnheader", className: buildClassName('flex items-center border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass), children: jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
|
|
1792
1792
|
if (el)
|
|
1793
1793
|
el.indeterminate = someSelected;
|
|
1794
|
-
}, onChange: toggleAll }) })), columns.map((col) => (jsx("div", { role: "columnheader", className: buildClassName('font-semibold text-sm whitespace-nowrap flex items-center', densityCellClass, 'border-r last:border-r-0 border-
|
|
1794
|
+
}, onChange: toggleAll }) })), columns.map((col) => (jsx("div", { role: "columnheader", className: buildClassName('font-semibold text-sm whitespace-nowrap flex items-center', densityCellClass, 'border-r last:border-r-0 border-[var(--ui-border)]', col.sticky === 'left' &&
|
|
1795
1795
|
'sticky left-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
|
|
1796
1796
|
'sticky right-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', col.headerClass), children: jsxs(TextContent, { role: col.sortable ? 'button' : undefined, className: buildClassName(col.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(col), children: [col.label, col.sortable ? getSortIcon(sorting[col.name]) : null] }) }, col.name)))] }) }));
|
|
1797
|
-
const wrapperCls = buildClassName('rounded-lg border border-
|
|
1797
|
+
const wrapperCls = buildClassName('rounded-lg border border-[var(--ui-border)] overflow-hidden', wrapperClass);
|
|
1798
1798
|
/* -------------------------------------------------------
|
|
1799
1799
|
* Loading state
|
|
1800
1800
|
* ------------------------------------------------------- */
|
|
1801
1801
|
if (loading) {
|
|
1802
|
-
return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: wrapperCls, children: [Header, jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxs("div", { "data-testid": "skeleton-row", className: "grid animate-pulse bg-white dark:bg-gray-900 border-b border-
|
|
1802
|
+
return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: wrapperCls, children: [Header, jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxs("div", { "data-testid": "skeleton-row", className: "grid animate-pulse bg-white dark:bg-gray-900 border-b border-[var(--ui-border-muted)]", style: { gridTemplateColumns: gridTemplate, height: rowHeight }, children: [selectable && jsx("div", { className: densityCellClass }), columns.map((col) => (jsx("div", { className: densityCellClass, children: jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name)))] }, idx))) })] }) }));
|
|
1803
1803
|
}
|
|
1804
1804
|
/* -------------------------------------------------------
|
|
1805
1805
|
* Empty state
|