doom-design-system 0.1.7 → 0.1.8

package/dist/components/Slider/Slider.module.css

@@ -0,0 +1,130 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.labelRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-heading);
+  font-weight: 600;
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.valueDisplay {
+  font-family: var(--font-mono, monospace);
+  font-weight: 700;
+  color: var(--primary);
+  font-size: var(--text-base);
+  min-width: 3ch;
+  text-align: right;
+}
+
+.trackWrapper {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--muted);
+  overflow: visible;
+}
+
+.progressFill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: var(--percentage, 0%);
+  background: var(--primary);
+  border-radius: 999px;
+  z-index: 1;
+}
+
+.rangeInput {
+  appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+  z-index: 10;
+}
+.rangeInput::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  background: transparent;
+  border: none;
+}
+.rangeInput::-moz-range-track {
+  width: 100%;
+  height: 8px;
+  background: transparent;
+  border: none;
+}
+.rangeInput::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  background: var(--primary);
+  border: 3px solid var(--background);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--card-border);
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: -6px;
+}
+.rangeInput::-moz-range-thumb {
+  height: 20px;
+  width: 20px;
+  background: var(--primary);
+  border: 3px solid var(--background);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--card-border);
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rangeInput:hover::-webkit-slider-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+.rangeInput:hover::-moz-range-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+.rangeInput:active::-webkit-slider-thumb {
+  transform: scale(1.05);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+.rangeInput:active::-moz-range-thumb {
+  transform: scale(1.05);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+.rangeInput:focus {
+  outline: none;
+}
+.rangeInput:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+.rangeInput:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+.rangeInput:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rangeInput:disabled::-webkit-slider-thumb {
+  background: var(--muted-foreground);
+  cursor: not-allowed;
+}
+.rangeInput:disabled::-moz-range-thumb {
+  background: var(--muted-foreground);
+  cursor: not-allowed;
+}

package/dist/components/SplitButton/SplitButton.d.ts

@@ -7,6 +7,7 @@ interface SplitButtonProps {
     onPrimaryClick: () => void;
     items: SplitButtonItem[];
     variant?: 'primary' | 'secondary';
+    className?: string;
 }
-export declare function SplitButton({ primaryLabel, onPrimaryClick, items, variant }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitButton({ primaryLabel, onPrimaryClick, items, variant, className }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SplitButton/SplitButton.js

@@ -1,89 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import styled from '@emotion/styled';
-import { Popover } from '../..';
+import clsx from 'clsx';
+import { Popover } from '../Popover/Popover';
 import { ChevronDown } from 'lucide-react';
-const StyledContainer = styled.div `
-  display: inline-flex;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  background-color: ${props => props.variant === 'primary' ? 'var(--primary)' : 'var(--secondary)'};
-  color: ${props => props.variant === 'primary' ? 'var(--primary-foreground)' : 'var(--secondary-foreground)'};
-  transition: all 0.1s ease;
-  &:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
-  }
-
-  &[aria-expanded="true"] {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
-  }
-`;
-const StyledMainButton = styled.button `
-  border: none;
-  background: transparent;
-  color: inherit;
-  padding: 0.75rem 1rem;
-  padding-right: 0.75rem;
-  font-weight: 700;
-  font-size: var(--text-base);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  border-right: 2px solid rgba(0,0,0,0.2);
-
-  &:hover {
-    background-color: rgba(0,0,0,0.25);
-  }
-`;
-const StyledDropdownTrigger = styled.button `
-  border: none;
-  background: transparent;
-  color: inherit;
-  padding: 0.75rem 0.75rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    background-color: rgba(0,0,0,0.25);
-  }
-`;
-const StyledDropdownMenu = styled.div `
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--primary);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hover);
-  min-width: 200px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.25rem;
-`;
-const StyledDropdownItem = styled.button `
-  text-align: left;
-  padding: 0.75rem 1rem;
-  background: transparent;
-  border: none;
-  color: var(--foreground);
-  cursor: pointer;
-  border-radius: calc(var(--radius) - 2px);
-  font-size: var(--text-base);
-  font-weight: 600;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: color-mix(in srgb, var(--primary), transparent 85%);
-    color: var(--primary);
-  }
-`;
-export function SplitButton({ primaryLabel, onPrimaryClick, items, variant = 'primary' }) {
+import styles from './SplitButton.module.css';
+import { useState } from 'react';
+export function SplitButton({ primaryLabel, onPrimaryClick, items, variant = 'primary', className }) {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-end", trigger: _jsxs(StyledContainer, { variant: variant, children: [_jsx(StyledMainButton, { onClick: onPrimaryClick, children: primaryLabel }), _jsx(StyledDropdownTrigger, { onClick: () => setIsOpen(!isOpen), children: _jsx(ChevronDown, { size: 16, strokeWidth: 3 }) })] }), content: _jsx(StyledDropdownMenu, { children: items.map((item, index) => (_jsx(StyledDropdownItem, { onClick: () => {
+    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-end", trigger: _jsxs("div", { className: clsx(styles.container, styles[variant], className), "aria-expanded": isOpen, children: [_jsx("button", { className: styles.mainButton, onClick: onPrimaryClick, children: primaryLabel }), _jsx("button", { className: styles.dropdownTrigger, onClick: () => setIsOpen(!isOpen), children: _jsx(ChevronDown, { size: 16, strokeWidth: 3 }) })] }), content: _jsx("div", { className: styles.menu, children: items.map((item, index) => (_jsx("button", { className: styles.item, onClick: () => {
                     item.onClick();
                     setIsOpen(false);
                 }, children: item.label }, index))) }) }));

package/dist/components/SplitButton/SplitButton.module.css

@@ -0,0 +1,79 @@
+.container {
+  display: inline-flex;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  transition: all 0.1s ease;
+}
+.container.primary {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.container.secondary {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+.container:hover, .container[aria-expanded=true] {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+}
+
+.mainButton {
+  border: none;
+  background: transparent;
+  color: inherit;
+  padding: 0.75rem 1rem;
+  padding-right: 0.75rem;
+  font-weight: 700;
+  font-size: var(--text-base);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  border-right: 2px solid rgba(0, 0, 0, 0.2);
+}
+.mainButton:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.dropdownTrigger {
+  border: none;
+  background: transparent;
+  color: inherit;
+  padding: 0.75rem 0.75rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.dropdownTrigger:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.menu {
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--primary);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hover);
+  min-width: 200px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.item {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  color: var(--foreground);
+  cursor: pointer;
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-base);
+  font-weight: 600;
+  transition: background-color 0.2s;
+}
+.item:hover {
+  background-color: color-mix(in srgb, var(--primary), transparent 85%);
+  color: var(--primary);
+}

package/dist/components/Switch/Switch.js

@@ -11,60 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './Switch.module.css';
 import React from 'react';
-import styled from '@emotion/styled';
-const SwitchContainer = styled.label `
-  display: inline-flex;
-  align-items: center;
-  gap: 1rem;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${props => props.disabled ? 0.6 : 1};
-  user-select: none;
-`;
-const Input = styled.input `
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-const Toggle = styled.div `
-  position: relative;
-  width: 58px;
-  height: 32px;
-  background-color: ${props => props.checked ? 'var(--primary)' : 'var(--card-bg)'};
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius-pill);
-  transition: background-color var(--duration-normal) var(--ease-in-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
-  box-shadow: var(--shadow-sm);
-  box-sizing: border-box;
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 4px;
-    width: 24px;
-    height: 24px;
-    background-color: ${props => props.checked ? 'var(--primary-foreground)' : 'var(--muted)'};
-    border: var(--border-width) solid var(--card-border);
-    border-radius: 50%;
-    transform: translateY(-50%) translateX(${props => props.checked ? '20px' : '0'});
-    transition: transform var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out);
-    box-sizing: border-box;
-  }
-
-`;
-const Label = styled.span `
-  font-family: var(--font-heading);
-  font-weight: 600;
-  color: var(--foreground);
-`;
 export const Switch = React.forwardRef((_a, ref) => {
     var { checked = false, onChange, disabled, label, id, className } = _a, props = __rest(_a, ["checked", "onChange", "disabled", "label", "id", "className"]);
     const handleChange = (e) => {
@@ -72,6 +21,6 @@ export const Switch = React.forwardRef((_a, ref) => {
             return;
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
     };
-    return (_jsxs(SwitchContainer, { disabled: disabled, className: className, children: [_jsx(Input, Object.assign({ type: "checkbox", role: "switch", id: id, ref: ref, checked: checked, onChange: handleChange, disabled: disabled, readOnly: props.readOnly, "aria-checked": checked }, props)), _jsx(Toggle, { checked: checked }), label && _jsx(Label, { children: label })] }));
+    return (_jsxs("label", { className: clsx(styles.switchContainer, disabled && styles.disabled, className), children: [_jsx("input", Object.assign({ className: styles.input, type: "checkbox", role: "switch", id: id, ref: ref, checked: checked, onChange: handleChange, disabled: disabled, readOnly: props.readOnly, "aria-checked": checked }, props)), _jsx("div", { className: clsx(styles.toggle, checked && styles.checked) }), label && _jsx("span", { className: styles.label, children: label })] }));
 });
 Switch.displayName = 'Switch';

package/dist/components/Switch/Switch.module.css

@@ -0,0 +1,64 @@
+.switchContainer {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  opacity: 1;
+  user-select: none;
+}
+.switchContainer.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.toggle {
+  position: relative;
+  width: 58px;
+  height: 32px;
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius-pill);
+  transition: background-color var(--duration-normal) var(--ease-in-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
+  box-shadow: var(--shadow-sm);
+  box-sizing: border-box;
+}
+.toggle::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 24px;
+  height: 24px;
+  background-color: var(--muted);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: 50%;
+  transform: translateY(-50%) translateX(0);
+  transition: transform var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out);
+  box-sizing: border-box;
+}
+.toggle.checked {
+  background-color: var(--primary);
+}
+.toggle.checked::after {
+  background-color: var(--primary-foreground);
+  transform: translateY(-50%) translateX(20px);
+}
+
+.label {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  color: var(--foreground);
+}

package/dist/components/Table/Table.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { ColumnDef } from '@tanstack/react-table';
+import React from 'react';
 interface TableProps<T> {
     data: T[];
     columns: ColumnDef<T>[];

package/dist/components/Table/Table.js

@@ -1,104 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import styled from '@emotion/styled';
+import clsx from 'clsx';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, flexRender, } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Input, Select, Flex } from '../..';
-import { Pagination } from '../Pagination';
-const TableContainer = styled.div `
-  width: 100%;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  background: var(--card-bg);
-  box-shadow: var(--shadow-hard);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-`;
-const Toolbar = styled.div `
-  padding: var(--spacing-md);
-  border-bottom: var(--border-width) solid var(--card-border);
-  background: var(--background);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-`;
-const StyledTable = styled.table `
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--text-base);
-`;
-const getDensityPadding = (density = 'standard') => {
-    switch (density) {
-        case 'compact': return '0.5rem 1rem';
-        case 'relaxed': return '1.5rem 1rem';
-        case 'standard':
-        default: return '1rem';
-    }
-};
-const Th = styled.th `
-  text-align: left;
-  padding: ${props => getDensityPadding(props.$density)};
-  background: var(--secondary);
-  border-bottom: var(--border-width) solid var(--card-border);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: ${props => props.isSortable ? 'pointer' : 'default'};
-  user-select: none;
-  white-space: nowrap;
-  color: var(--secondary-foreground);
-
-  ${props => props.isSortable && `
-    &:hover {
-      filter: brightness(0.95);
-      color: var(--secondary-foreground);
-    }
-  `}
-`;
-const Td = styled.td `
-  padding: ${props => getDensityPadding(props.$density)};
-  border-bottom: 1px solid var(--card-border);
-  color: var(--foreground);
-`;
-const Tr = styled.tr `
-  &:last-child td {
-    border-bottom: none;
-  }
-  &:hover {
-    background-color: rgba(var(--muted-rgb, 113, 128, 150), 0.1);
-  }
-
-  ${props => props.$striped && `
-    &:nth-of-type(even) {
-      background-color: rgba(var(--muted-rgb, 113, 128, 150), 0.05);
-    }
-    &:hover {
-      background-color: rgba(var(--muted-rgb, 113, 128, 150), 0.15);
-    }
-  `}
-
-  /* Hide actions by default */
-  & .row-actions {
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  /* Show actions on hover */
-  &:hover .row-actions {
-    opacity: 1;
-  }
-`;
-const PaginationContainer = styled.div `
-  padding: var(--spacing-md);
-  border-top: var(--border-width) solid var(--card-border);
-  background: var(--background);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
+import { Input } from '../Input/Input';
+import { Select } from '../Select/Select';
+import { Flex } from '../Layout/Layout';
+import { Pagination } from '../Pagination/Pagination';
+import styles from './Table.module.css';
+import React, { useState } from 'react';
 export function Table({ data, columns, enablePagination = true, enableFiltering = true, enableSorting = true, pageSize = 10, height, className, style, variant = 'default', density = 'standard', toolbarContent, striped = false, }) {
     const [sorting, setSorting] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
@@ -133,21 +43,15 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
         overscan: 5,
     });
     const isVirtual = !!height;
-    const variantStyles = variant === 'flat' ? {
-        border: 'none',
-        boxShadow: 'none',
-        background: 'transparent',
-        borderRadius: 0,
-    } : {};
-    return (_jsxs(TableContainer, { className: className, style: Object.assign(Object.assign({}, variantStyles), style), children: [enableFiltering && (_jsxs(Toolbar, { children: [_jsx("div", { style: { width: '300px' }, children: _jsx(Input, { placeholder: "Search...", value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (e) => setGlobalFilter(e.target.value) }) }), toolbarContent && (_jsx(Flex, { gap: "1rem", align: "center", children: toolbarContent }))] })), _jsxs("div", { ref: parentRef, style: {
+    return (_jsxs("div", { className: clsx(styles.container, variant === 'flat' && styles.flat, className), style: style, children: [enableFiltering && (_jsxs("div", { className: styles.toolbar, children: [_jsx("div", { style: { width: '300px' }, children: _jsx(Input, { placeholder: "Search...", value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (e) => setGlobalFilter(e.target.value) }) }), toolbarContent && (_jsx(Flex, { gap: "1rem", align: "center", children: toolbarContent }))] })), _jsxs("div", { ref: parentRef, style: {
                     height: height ? height : 'auto',
                     overflowY: height ? 'auto' : 'visible',
                     overflowX: 'auto',
                     width: '100%'
-                }, children: [_jsxs(StyledTable, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => {
+                }, children: [_jsxs("table", { className: styles.table, children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => {
                                         var _a;
                                         const canSort = header.column.getCanSort();
-                                        return (_jsx(Th, { onClick: canSort ? header.column.getToggleSortingHandler() : undefined, style: { width: header.getSize() }, isSortable: canSort, "$density": density, children: _jsxs(Flex, { align: "center", gap: "0.5rem", children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && ((_a = {
+                                        return (_jsx("th", { onClick: canSort ? header.column.getToggleSortingHandler() : undefined, style: { width: header.getSize() }, className: clsx(styles.th, styles[density], canSort && styles.sortable), children: _jsxs("div", { className: styles.headerContent, children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && ((_a = {
                                                         asc: ' ▲',
                                                         desc: ' ▼',
                                                     }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : null)] }) }, header.id));
@@ -157,15 +61,15 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
                                     position: 'relative',
                                 }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
                                     const row = rows[virtualRow.index];
-                                    return (_jsx(Tr, { "$striped": striped, style: {
+                                    return (_jsx("tr", { className: clsx(styles.tr, striped && styles.striped), style: {
                                             position: 'absolute',
                                             top: 0,
                                             left: 0,
                                             width: '100%',
                                             height: `${virtualRow.size}px`,
                                             transform: `translateY(${virtualRow.start}px)`,
-                                        }, children: row.getVisibleCells().map((cell) => (_jsx(Td, { "$density": density, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
-                                }) })) : (_jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(Tr, { className: "group", "$striped": striped, children: row.getVisibleCells().map((cell) => (_jsx(Td, { "$density": density, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) }))] }), table.getRowModel().rows.length === 0 && (_jsx("div", { style: { padding: '2rem', textAlign: 'center', color: 'var(--muted-foreground)' }, children: "No results found." }))] }), enablePagination && !isVirtual && (_jsx(PaginationContainer, { children: _jsxs(Flex, { gap: "1rem", align: "center", style: { width: '100%', justifyContent: 'space-between' }, children: [_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { value: table.getState().pagination.pageSize, onChange: (e) => {
+                                        }, children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[density]), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                                }) })) : (_jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { className: clsx(styles.tr, striped && styles.striped, 'group'), children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[density]), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) }))] }), table.getRowModel().rows.length === 0 && (_jsx("div", { className: styles.noResults, children: "No results found." }))] }), enablePagination && !isVirtual && (_jsx("div", { className: styles.paginationContainer, children: _jsxs(Flex, { gap: "1rem", align: "center", style: { width: '100%', justifyContent: 'space-between' }, children: [_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { value: table.getState().pagination.pageSize, onChange: (e) => {
                                     table.setPageSize(Number(e.target.value));
                                 }, options: [
                                     { value: 10, label: '10 rows' },