doom-design-system 0.1.0

package/dist/components/Select/Select.js

@@ -0,0 +1,202 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useId } from 'react';
+import styled from '@emotion/styled';
+import { Text, Popover } from '../..';
+import { Check, ChevronDown } from 'lucide-react';
+const SelectContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+`;
+const SelectTrigger = styled.button `
+  width: 100%;
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  color: var(--foreground);
+  padding: 0.75rem 1rem;
+  font-size: var(--text-base);
+  cursor: pointer;
+  box-shadow: var(--shadow-hard);
+  border-radius: var(--radius);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.1s ease;
+  min-height: 42px;
+
+  &:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-hover);
+  }
+
+  &:focus {
+    outline: none;
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-hover);
+    border-color: var(--primary);
+  }
+
+  &[aria-expanded="true"] {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-hover);
+    border-color: var(--primary);
+  }
+`;
+const OptionsList = styled.ul `
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--primary);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hover);
+  min-width: 200px;
+  max-height: 300px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  margin: 0;
+  list-style: none;
+`;
+const OptionItem = styled.li `
+  text-align: left;
+  padding: 0.75rem 1rem;
+  background: ${props => props.isSelected ? 'var(--primary)' : (props.isHighlighted ? 'color-mix(in srgb, var(--primary), transparent 85%)' : 'transparent')};
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  color: ${props => props.isSelected ? 'var(--primary-foreground)' : (props.isHighlighted ? 'var(--primary)' : 'var(--foreground)')};
+  cursor: pointer;
+  font-size: var(--text-base);
+  font-weight: ${props => props.isSelected ? '700' : '400'};
+  transition: all 0.1s ease;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--primary), transparent 85%);
+    color: var(--primary);
+  }
+  
+  ${props => props.isSelected && `
+    &:hover {
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+      filter: brightness(1.1);
+    }
+  `}
+`;
+export function Select(_a) {
+    var _b;
+    var { options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, form, autoFocus } = _a, props = __rest(_a, ["options", "className", "label", "style", "value", "defaultValue", "onChange", "placeholder", "id", "required", "disabled", "name", "form", "autoFocus"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const reactId = useId();
+    const triggerRef = useRef(null);
+    const listboxId = id ? `${id}-listbox` : `select-listbox-${reactId}`;
+    const labelId = id ? `${id}-label` : `select-label-${reactId}`;
+    const currentValue = value !== undefined ? value : internalValue;
+    const selectedOption = options.find(opt => String(opt.value) === String(currentValue));
+    // Reset highlighted index when opening
+    useEffect(() => {
+        if (isOpen) {
+            const index = options.findIndex(opt => String(opt.value) === String(currentValue));
+            setHighlightedIndex(index >= 0 ? index : 0);
+        }
+    }, [isOpen, currentValue, options]);
+    const handleSelect = (newValue) => {
+        var _a;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        if (onChange) {
+            const syntheticEvent = {
+                target: { value: newValue, name: name },
+                currentTarget: { value: newValue, name: name },
+                preventDefault: () => { },
+                stopPropagation: () => { },
+            };
+            onChange(syntheticEvent);
+        }
+        setIsOpen(false);
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleKeyDown = (e) => {
+        var _a;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (isOpen) {
+                    if (highlightedIndex >= 0 && highlightedIndex < options.length) {
+                        handleSelect(options[highlightedIndex].value);
+                    }
+                }
+                else {
+                    setIsOpen(true);
+                }
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setHighlightedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setHighlightedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+                }
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    e.preventDefault();
+                    setIsOpen(false);
+                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                break;
+            case 'Tab':
+                if (isOpen) {
+                    setIsOpen(false);
+                }
+                break;
+        }
+    };
+    return (_jsxs(SelectContainer, { className: className, style: style, children: [label && (_jsx(Text, { as: "label", id: labelId, variant: "small", weight: "bold", color: "muted", className: "mb-1 block", htmlFor: id, children: label })), _jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs(SelectTrigger, Object.assign({ ref: triggerRef, type: "button", id: id, onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, disabled: disabled, autoFocus: autoFocus }, props, { children: [_jsx("span", { children: selectedOption ? selectedOption.label : (placeholder || 'Select...') }), _jsx(ChevronDown, { size: 16, strokeWidth: 2.5, style: { marginLeft: '0.5rem' } })] })), content: _jsx(OptionsList, { id: listboxId, role: "listbox", "aria-labelledby": label ? labelId : undefined, style: { width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, children: options.map((opt, index) => {
+                        const isSelected = String(opt.value) === String(currentValue);
+                        const isHighlighted = index === highlightedIndex;
+                        return (_jsxs(OptionItem, { id: `${listboxId}-option-${index}`, role: "option", "aria-selected": isSelected, isSelected: isSelected, isHighlighted: isHighlighted, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), children: [_jsx("span", { children: opt.label }), isSelected && _jsx(Check, { size: 14, strokeWidth: 3 })] }, opt.value));
+                    }) }) }), _jsx("input", { type: "text", name: name, value: currentValue, required: required, form: form, tabIndex: -1, readOnly: true, style: {
+                    opacity: 0,
+                    height: '1px',
+                    width: '1px',
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    pointerEvents: 'none',
+                } })] }));
+}

package/dist/components/Select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/dist/components/Select/index.js

@@ -0,0 +1 @@
+export * from './Select';

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: string;
+    height?: string;
+    variant?: 'text' | 'circular' | 'rectangular';
+}
+export declare function Skeleton({ width, height, variant, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,65 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+const shimmer = keyframes `
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+const StyledSkeleton = styled.div `
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.12) 37%,
+    rgba(0, 0, 0, 0.06) 63%
+  );
+  background-size: 200% 100%;
+  animation: ${shimmer} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  
+  /* Dimensions */
+  width: ${props => props.$width || '100%'};
+  height: ${props => props.$height || 'auto'};
+
+  /* Variant Styles */
+  ${props => {
+    switch (props.$variant) {
+        case 'circular':
+            return `
+          border-radius: 50%;
+          height: ${props.$height || props.$width || '3rem'};
+          width: ${props.$width || props.$height || '3rem'};
+        `;
+        case 'text':
+            return `
+          height: ${props.$height || '1em'};
+          border-radius: var(--radius);
+          margin-bottom: 0.5rem;
+        `;
+        case 'rectangular':
+        default:
+            return `
+          height: ${props.$height || '10rem'};
+          border-radius: var(--radius);
+        `;
+    }
+}}
+`;
+export function Skeleton(_a) {
+    var { width, height, variant = 'rectangular', className, style } = _a, props = __rest(_a, ["width", "height", "variant", "className", "style"]);
+    return (_jsx(StyledSkeleton, Object.assign({ "$width": width, "$height": height, "$variant": variant, className: className, style: style }, props)));
+}

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

package/dist/components/Skeleton/index.js

@@ -0,0 +1 @@
+export * from './Skeleton';

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

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

package/dist/components/SplitButton/SplitButton.js

@@ -0,0 +1,90 @@
+'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 { 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' }) {
+    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: () => {
+                    item.onClick();
+                    setIsOpen(false);
+                }, children: item.label }, index))) }) }));
+}

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

@@ -0,0 +1 @@
+export * from './SplitButton';

package/dist/components/SplitButton/index.js

@@ -0,0 +1 @@
+export * from './SplitButton';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+interface TableProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    enablePagination?: boolean;
+    enableFiltering?: boolean;
+    enableSorting?: boolean;
+    pageSize?: number;
+    height?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    variant?: 'default' | 'flat';
+    density?: 'compact' | 'standard' | 'relaxed';
+    toolbarContent?: React.ReactNode;
+    striped?: boolean;
+}
+export declare function Table<T>({ data, columns, enablePagination, enableFiltering, enableSorting, pageSize, height, className, style, variant, density, toolbarContent, striped, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/Table.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, flexRender, } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Button, Input, Select, Flex, Text } from '../..';
+// --- Styled Components ---
+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: 1rem;
+  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: 1rem;
+  border-top: var(--border-width) solid var(--card-border);
+  background: var(--background);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+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('');
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: pageSize,
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+            globalFilter,
+            pagination,
+        },
+        enableSorting, // Pass this to useReactTable
+        onSortingChange: setSorting,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(), // Always provide the model, enableSorting controls if it's used
+        getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
+        getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
+    });
+    // Virtualization Logic (Simplified for rows)
+    const parentRef = React.useRef(null);
+    const { rows } = table.getRowModel();
+    const rowVirtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 50, // Estimate row height
+        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: {
+                    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) => {
+                                        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 = {
+                                                        asc: ' ▲',
+                                                        desc: ' ▼',
+                                                    }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : null)] }) }, header.id));
+                                    }) }, headerGroup.id))) }), isVirtual ? (_jsx("tbody", { style: {
+                                    height: `${rowVirtualizer.getTotalSize()}px`,
+                                    width: '100%',
+                                    position: 'relative',
+                                }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                                    const row = rows[virtualRow.index];
+                                    return (_jsx(Tr, { "$striped": 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 && (_jsxs(PaginationContainer, { children: [_jsxs(Flex, { gap: "1rem", align: "center", children: [_jsxs(Text, { color: "muted", className: "min-w-fit", children: ["Page ", table.getState().pagination.pageIndex + 1, " of", ' ', table.getPageCount()] }), _jsx(Select, { value: table.getState().pagination.pageSize, onChange: (e) => {
+                                    table.setPageSize(Number(e.target.value));
+                                }, options: [
+                                    { value: 10, label: '10 rows' },
+                                    { value: 20, label: '20 rows' },
+                                    { value: 50, label: '50 rows' },
+                                    { value: 100, label: '100 rows' },
+                                ] })] }), _jsxs(Flex, { gap: "0.5rem", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: "Previous" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: "Next" })] })] }))] }));
+}

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

@@ -0,0 +1 @@
+export * from './Table';

package/dist/components/Table/index.js

@@ -0,0 +1 @@
+export * from './Table';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Tabs({ defaultValue, value, onValueChange, children, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+interface TabsListProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function TabsList({ children, className }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+export declare function TabsTrigger({ value, children, className, onClick }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+interface TabsBodyProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function TabsBody({ children, className, style }: TabsBodyProps): import("react/jsx-runtime").JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function TabsContent({ value, children, className }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};