doom-design-system 0.2.0 → 0.3.0

package/dist/components/Slider/Slider.js

@@ -10,26 +10,63 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import styles from "./Slider.module.css";
 import React from "react";
 import { Label } from "../Label/Label.js";
+import { Text } from "../Text/Text.js";
 export function Slider(_a) {
     var { label, showValue, value, defaultValue, onChange, min = 0, max = 100, step = 1, className, id } = _a, props = __rest(_a, ["label", "showValue", "value", "defaultValue", "onChange", "min", "max", "step", "className", "id"]);
     const reactId = React.useId();
     const inputId = id || `slider-${reactId}`;
-    const [internalValue, setInternalValue] = React.useState(defaultValue !== undefined ? defaultValue : min);
+    // Normalize initial value
+    const initialValue = defaultValue !== undefined
+        ? defaultValue
+        : Array.isArray(value)
+            ? value
+            : min;
+    const [internalValue, setInternalValue] = React.useState(initialValue);
     const isControlled = value !== undefined;
     const currentValue = isControlled ? value : internalValue;
-    const handleChange = (e) => {
+    const isRange = Array.isArray(currentValue);
+    // Helper to ensure types match logic
+    const valArray = isRange
+        ? currentValue
+        : [currentValue, currentValue];
+    const minLimit = Number(min);
+    const maxLimit = Number(max);
+    const handleChange = (e, index) => {
         const newVal = Number(e.target.value);
-        if (!isControlled) {
-            setInternalValue(newVal);
+        if (!isRange) {
+            if (!isControlled)
+                setInternalValue(newVal);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
+        }
+        else {
+            const newArray = [...valArray];
+            if (index === 0) {
+                // Changing Min: Don't exceed Max
+                newArray[0] = Math.min(newVal, valArray[1]);
+            }
+            else {
+                // Changing Max: Don't go below Min
+                newArray[1] = Math.max(newVal, valArray[0]);
+            }
+            if (!isControlled)
+                setInternalValue(newArray);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newArray);
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
     };
-    const percentage = ((currentValue - min) / (max - min)) *
-        100;
-    return (_jsxs("div", { className: clsx(styles.container, className), children: [(label || showValue) && (_jsxs("div", { className: styles.labelRow, children: [label && _jsx(Label, { htmlFor: inputId, children: label }), showValue && (_jsx("span", { className: styles.valueDisplay, children: currentValue }))] })), _jsxs("div", { className: styles.trackWrapper, children: [_jsx("div", { className: styles.progressFill, style: { "--percentage": `${percentage}%` } }), _jsx("input", Object.assign({ id: inputId, className: styles.rangeInput, type: "range", min: min, max: max, step: step, value: currentValue, onChange: handleChange, "aria-label": !label ? props["aria-label"] || "Slider" : undefined, "aria-valuenow": currentValue, "aria-valuemin": Number(min), "aria-valuemax": Number(max) }, props))] })] }));
+    // Calculate Percentage for Track Fill
+    const getPercentage = (val) => ((val - minLimit) / (maxLimit - minLimit)) * 100;
+    const startPercent = isRange ? getPercentage(valArray[0]) : 0;
+    const endPercent = isRange
+        ? getPercentage(valArray[1])
+        : getPercentage(valArray[0]);
+    const widthPercent = endPercent - startPercent;
+    return (_jsxs("div", { className: clsx(styles.container, className), children: [(label || showValue) && (_jsxs("div", { className: styles.labelRow, children: [label && _jsx(Label, { htmlFor: inputId, children: label }), showValue && (_jsx(Text, { variant: "small", weight: "bold", className: styles.valueDisplay, children: isRange ? `${valArray[0]} - ${valArray[1]}` : valArray[0] }))] })), _jsxs("div", { className: styles.trackWrapper, children: [_jsx("div", { className: styles.trackInner, children: _jsx("div", { className: styles.progressFill, style: {
+                                left: `${startPercent}%`,
+                                width: `${widthPercent}%`,
+                            } }) }), !isRange ? (_jsx("input", Object.assign({ id: inputId, className: styles.rangeInput, type: "range", min: min, max: max, step: step, value: valArray[0], onChange: (e) => handleChange(e), "aria-label": !label ? props["aria-label"] || "Slider" : undefined, "aria-valuenow": valArray[0], "aria-valuemin": minLimit, "aria-valuemax": maxLimit }, props))) : (_jsxs(_Fragment, { children: [_jsx("input", { id: `${inputId}-min`, className: styles.multiRangeInput, type: "range", min: min, max: max, step: step, value: valArray[0], onChange: (e) => handleChange(e, 0), "aria-label": "Minimum value", style: { zIndex: valArray[0] > maxLimit - 10 ? 21 : 20 } }), _jsx("input", { id: `${inputId}-max`, className: styles.multiRangeInput, type: "range", min: min, max: max, step: step, value: valArray[1], onChange: (e) => handleChange(e, 1), "aria-label": "Maximum value", style: { zIndex: 20 } })] }))] })] }));
 }

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

@@ -3,128 +3,120 @@
   flex-direction: column;
   gap: 0.75rem;
   width: 100%;
+  padding: 0 12px;
 }
 
 .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: color-mix(in srgb, var(--primary), var(--foreground) 25%);
-  font-size: var(--text-base);
-  min-width: 3ch;
-  text-align: right;
+  background-color: var(--card-bg);
+  padding: 0.125rem 0.5rem;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .trackWrapper {
   position: relative;
   width: 100%;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--muted);
+  height: 12px;
   overflow: visible;
 }
 
+.trackInner {
+  position: absolute;
+  inset: 0;
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
 .progressFill {
   position: absolute;
-  left: 0;
   top: 0;
-  height: 100%;
-  width: var(--percentage, 0%);
+  bottom: 0;
   background: var(--primary);
-  border-radius: 999px;
   z-index: 1;
+  pointer-events: none;
 }
 
-.rangeInput {
+.rangeInput, .multiRangeInput {
   appearance: none;
   -webkit-appearance: none;
   position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
+  left: -12px;
+  width: calc(100% + 24px);
   height: 100%;
   background: transparent;
   cursor: pointer;
-  margin: 0;
   z-index: 10;
+  margin: 0;
 }
-.rangeInput::-webkit-slider-runnable-track {
+.rangeInput::-webkit-slider-runnable-track, .multiRangeInput::-webkit-slider-runnable-track {
   width: 100%;
-  height: 8px;
+  height: 12px;
   background: transparent;
   border: none;
 }
-.rangeInput::-moz-range-track {
+.rangeInput::-moz-range-track, .multiRangeInput::-moz-range-track {
   width: 100%;
-  height: 8px;
+  height: 12px;
   background: transparent;
   border: none;
 }
-.rangeInput::-webkit-slider-thumb {
+.rangeInput::-webkit-slider-thumb, .multiRangeInput::-webkit-slider-thumb {
   -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
+  height: 24px;
+  width: 24px;
   background: var(--primary);
-  border: 3px solid var(--background);
+  border: var(--border-width) solid var(--border-strong);
   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;
+  margin-top: -7px; /* Center thumb on track */
+  position: relative;
+  z-index: 20;
 }
-.rangeInput::-moz-range-thumb {
-  height: 20px;
-  width: 20px;
+.rangeInput::-moz-range-thumb, .multiRangeInput::-moz-range-thumb {
+  height: 24px;
+  width: 24px;
   background: var(--primary);
-  border: 3px solid var(--background);
+  border: var(--border-width) solid var(--border-strong);
   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 {
+.rangeInput:focus, .multiRangeInput:focus {
   outline: none;
 }
-.rangeInput:focus-visible::-webkit-slider-thumb {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+.rangeInput:focus-visible::-webkit-slider-thumb, .multiRangeInput:focus-visible::-webkit-slider-thumb {
+  outline: var(--border-width) solid var(--foreground);
+  outline-offset: 4px;
 }
-.rangeInput:focus-visible::-moz-range-thumb {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+.rangeInput:focus-visible::-moz-range-thumb, .multiRangeInput:focus-visible::-moz-range-thumb {
+  outline: var(--border-width) solid var(--foreground);
+  outline-offset: 4px;
 }
-.rangeInput:disabled {
+.rangeInput:disabled, .multiRangeInput:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.rangeInput:disabled::-webkit-slider-thumb {
-  background: var(--muted-foreground);
-  cursor: not-allowed;
+.rangeInput:disabled::-webkit-slider-thumb, .multiRangeInput:disabled::-webkit-slider-thumb {
+  background: var(--muted);
+  filter: grayscale(1);
 }
-.rangeInput:disabled::-moz-range-thumb {
-  background: var(--muted-foreground);
-  cursor: not-allowed;
+
+.multiRangeInput {
+  pointer-events: none !important;
+}
+.multiRangeInput::-webkit-slider-thumb {
+  pointer-events: auto !important;
+}
+.multiRangeInput::-moz-range-thumb {
+  pointer-events: auto !important;
 }

package/dist/components/SplitButton/SplitButton.js

@@ -7,7 +7,7 @@ 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("div", { className: clsx(styles.container, styles[variant], className), children: [_jsx("button", { className: styles.mainButton, onClick: onPrimaryClick, children: primaryLabel }), _jsx("button", { className: styles.dropdownTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": `More ${primaryLabel} options`, children: _jsx(ChevronDown, { size: 16, strokeWidth: 3, "aria-hidden": "true" }) })] }), content: _jsx("div", { className: styles.menu, children: items.map((item, index) => (_jsx("button", { className: styles.item, onClick: () => {
+    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-end", trigger: _jsxs("div", { className: clsx(styles.container, styles[variant], className), "data-state": isOpen ? "open" : "closed", children: [_jsx("button", { className: styles.mainButton, onClick: onPrimaryClick, children: primaryLabel }), _jsx("button", { className: styles.dropdownTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": `More ${primaryLabel} options`, children: _jsx(ChevronDown, { size: 16, strokeWidth: 3, "aria-hidden": "true" }) })] }), 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

@@ -13,10 +13,15 @@
   background-color: var(--secondary);
   color: var(--secondary-foreground);
 }
-.container:hover, .container[aria-expanded=true] {
+.container:hover {
   transform: translate(-2px, -2px);
   box-shadow: var(--shadow-hover);
 }
+.container[data-state=open] {
+  transform: translate(-2px, -2px);
+  box-shadow: 8px 8px 0px 0px var(--shadow-primary);
+  border: var(--border-width) solid var(--shadow-primary);
+}
 
 .mainButton {
   border: none;
@@ -52,7 +57,7 @@
   background: var(--card-bg);
   border: var(--border-width) solid var(--primary);
   border-radius: var(--radius);
-  box-shadow: var(--shadow-hover);
+  box-shadow: 8px 8px 0px 0px var(--shadow-primary);
   min-width: 200px;
   overflow: hidden;
   display: flex;

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

@@ -1,5 +1,5 @@
-import { ColumnDef } from '@tanstack/react-table';
-import React from 'react';
+import { ColumnDef } from "@tanstack/react-table";
+import React from "react";
 interface TableProps<T> {
     data: T[];
     columns: ColumnDef<T>[];
@@ -10,8 +10,8 @@ interface TableProps<T> {
     height?: string | number;
     className?: string;
     style?: React.CSSProperties;
-    variant?: 'default' | 'flat';
-    density?: 'compact' | 'standard' | 'relaxed';
+    variant?: "default" | "flat";
+    density?: "compact" | "standard" | "relaxed";
     toolbarContent?: React.ReactNode;
     striped?: boolean;
 }

package/dist/components/Table/Table.js

@@ -1,17 +1,17 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, flexRender, } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { Input } from '../Input/Input.js';
-import { Select } from '../Select/Select.js';
-import { Flex } from '../Layout/Layout.js';
-import { Pagination } from '../Pagination/Pagination.js';
-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, }) {
+import clsx from "clsx";
+import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, flexRender, } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Input } from "../Input/Input.js";
+import { Select } from "../Select/Select.js";
+import { Flex } from "../Layout/Layout.js";
+import { Pagination } from "../Pagination/Pagination.js";
+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('');
+    const [globalFilter, setGlobalFilter] = useState("");
     const [pagination, setPagination] = useState({
         pageIndex: 0,
         pageSize: pageSize,
@@ -30,7 +30,9 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
         onPaginationChange: setPagination,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(), // Always provide the model, enableSorting controls if it's used
-        getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
+        getPaginationRowModel: enablePagination
+            ? getPaginationRowModel()
+            : undefined,
         getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
     });
     // Virtualization Logic (Simplified for rows)
@@ -43,38 +45,35 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
         overscan: 5,
     });
     const isVirtual = !!height;
-    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%'
+    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, tabIndex: 0, style: {
+                    height: height ? height : "auto",
+                    overflowY: height ? "auto" : "visible",
+                    overflowX: "auto",
+                    width: "100%",
                 }, 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() }, 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));
-                                    }) }, 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", { 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", { 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) => {
+                                        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));
+                                    }) }, headerGroup.id))) }), isVirtual ? (_jsxs("tbody", { children: [rowVirtualizer.getVirtualItems().length > 0 && (_jsx("tr", { style: {
+                                            height: `${rowVirtualizer.getVirtualItems()[0].start}px`,
+                                        }, children: _jsx("td", { colSpan: columns.length, style: { border: 0, padding: 0 } }) })), rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                                        const row = rows[virtualRow.index];
+                                        return (_jsx("tr", { className: clsx(styles.tr, striped && styles.striped), 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));
+                                    }), rowVirtualizer.getVirtualItems().length > 0 && (_jsx("tr", { style: {
+                                            height: `${rowVirtualizer.getTotalSize() -
+                                                rowVirtualizer.getVirtualItems()[rowVirtualizer.getVirtualItems().length - 1].end}px`,
+                                        }, children: _jsx("td", { colSpan: columns.length, style: { border: 0, padding: 0 } }) }))] })) : (_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' },
-                                    { value: 20, label: '20 rows' },
-                                    { value: 50, label: '50 rows' },
-                                    { value: 100, label: '100 rows' },
+                                    { value: 10, label: "10 rows" },
+                                    { value: 20, label: "20 rows" },
+                                    { value: 50, label: "50 rows" },
+                                    { value: 100, label: "100 rows" },
                                 ] }) }), _jsx(Pagination, { currentPage: table.getState().pagination.pageIndex + 1, totalPages: table.getPageCount(), onPageChange: (page) => table.setPageIndex(page - 1) })] }) }))] }));
 }

package/dist/components/Table/Table.module.css

@@ -2,7 +2,7 @@
   width: 100%;
   border: var(--border-width) solid var(--card-border);
   border-radius: var(--radius);
-  background: var(--card-bg);
+  background: var(--surface-accent);
   box-shadow: var(--shadow-hard);
   overflow: hidden;
   display: flex;
@@ -18,17 +18,23 @@
 .toolbar {
   padding: var(--spacing-md);
   border-bottom: var(--border-width) solid var(--card-border);
-  background: var(--background);
+  background: transparent;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
 }
 
+.tableWrapper {
+  width: 100%;
+  overflow: hidden;
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-base);
+  background: var(--card-bg);
 }
 
 .th {
@@ -60,7 +66,7 @@
 .td {
   padding: 1rem;
   border-bottom: 1px solid var(--card-border);
-  color: var(--foreground);
+  color: var(--on-surface);
 }
 .td.compact {
   padding: 0.5rem 1rem;
@@ -92,7 +98,7 @@
 .paginationContainer {
   padding: var(--spacing-md);
   border-top: var(--border-width) solid var(--card-border);
-  background: var(--background);
+  background: transparent;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -101,7 +107,7 @@
 .noResults {
   padding: 2rem;
   text-align: center;
-  color: var(--muted-foreground);
+  color: var(--on-surface-muted);
 }
 
 .headerContent {

package/dist/components/Textarea/Textarea.module.css

@@ -23,7 +23,7 @@
 .textarea:focus, .textarea:focus-visible, .textarea[aria-expanded=true] {
   outline: none;
   transform: translate(-2px, -2px);
-  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  box-shadow: 8px 8px 0px 0px var(--shadow-primary);
   border-color: var(--primary);
 }
 .textarea::placeholder {

package/dist/styles/globals.css

@@ -1546,3 +1546,22 @@ body .transition-all {
 body .shadow-hard {
   box-shadow: var(--shadow-hard);
 }
+body {
+  /* Dynamically built directional shadows */
+}
+body .shadow-top-hard {
+  /* Top-Right heavy shadow */
+  box-shadow: 8px -8px 0 0 var(--border-strong);
+}
+body .shadow-bottom-hard {
+  /* Standard Bottom-Right shadow */
+  box-shadow: 8px 8px 0 0 var(--border-strong);
+}
+body .shadow-left-hard {
+  /* Bottom-Left shadow for right-anchored elements */
+  box-shadow: -8px 8px 0 0 var(--border-strong);
+}
+body .shadow-right-hard {
+  /* Bottom-Right shadow for left-anchored elements */
+  box-shadow: 8px 8px 0 0 var(--border-strong);
+}