doom-design-system 0.1.3 → 0.1.4

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext } from 'react';
+import styled from '@emotion/styled';
+const Group = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+const ItemLabel = styled.label `
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  position: relative;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  transition: all 0.15s ease;
+  opacity: ${props => props.disabled ? 0.5 : 1};
+  
+  &:hover:not([aria-disabled="true"]) {
+    background-color: var(--muted);
+    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
+  }
+`;
+const RadioCircle = styled.div `
+  width: 22px;
+  height: 22px;
+  border: 2px solid ${props => props.checked ? 'var(--primary)' : 'var(--foreground)'};
+  border-radius: 50%;
+  background: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  position: relative;
+
+  ${props => props.checked && `
+    border-color: var(--primary);
+    background: var(--primary);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
+  `}
+`;
+const InnerDot = styled.div `
+  width: 10px;
+  height: 10px;
+  background: var(--primary-foreground);
+  border-radius: 50%;
+  transform: scale(0);
+  animation: radioScale 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+
+  @keyframes radioScale {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+`;
+const HiddenInput = styled.input `
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+
+  &:focus-visible ~ div {
+    outline: var(--outline-width) solid var(--primary);
+    outline-offset: var(--outline-offset);
+  }
+`;
+const LabelText = styled.span `
+  font-family: var(--font-body);
+  font-weight: 500;
+  font-size: var(--text-base);
+  color: var(--foreground);
+  user-select: none;
+`;
+const RadioGroupContext = createContext(undefined);
+export function RadioGroup({ name, value: controlledValue, defaultValue, onValueChange, disabled, children, className }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue || '');
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const handleChange = (newValue) => {
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    };
+    return (_jsx(RadioGroupContext.Provider, { value: { name, value: currentValue, onChange: handleChange, disabled }, children: _jsx(Group, { role: "radiogroup", className: className, children: children }) }));
+}
+export function RadioGroupItem({ value, children, disabled, className }) {
+    const context = useContext(RadioGroupContext);
+    if (!context)
+        throw new Error('RadioGroupItem must be used within RadioGroup');
+    const checked = context.value === value;
+    const isDisabled = disabled || context.disabled;
+    return (_jsxs(ItemLabel, { disabled: isDisabled, "aria-disabled": isDisabled, className: className, children: [_jsx(HiddenInput, { type: "radio", name: context.name, value: value, checked: checked, onChange: () => !isDisabled && context.onChange(value), disabled: isDisabled }), _jsx(RadioCircle, { checked: checked, "aria-hidden": "true", children: checked && _jsx(InnerDot, {}) }), _jsx(LabelText, { children: children })] }));
+}

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

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from './RadioGroup';

package/dist/components/RadioGroup/index.js

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from './RadioGroup';

package/dist/components/Select/Select.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useId } from 'react';
+import { baseInteractiveStyles, focusStyles } from '../../styles/mixins';
 import styled from '@emotion/styled';
 import { Text, Popover } from '../..';
 import { Check, ChevronDown } from 'lucide-react';
@@ -24,45 +25,32 @@ const SelectContainer = styled.div `
 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);
-  }
+  ${baseInteractiveStyles}
 
-  &:focus {
-    outline: none;
+  &:hover {
     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);
-  }
+  ${focusStyles}
 `;
 const OptionsList = styled.ul `
   background: var(--card-bg);
   border: var(--border-width) solid var(--primary);
   border-radius: var(--radius);
-  box-shadow: var(--shadow-hover);
+  box-shadow: none;
   min-width: 200px;
   max-height: 300px;
   overflow-y: auto;

package/dist/components/Sheet/Sheet.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Sheet({ isOpen, onClose, title, children, className }: SheetProps): React.ReactPortal | null;
+export {};

package/dist/components/Sheet/Sheet.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import { X } from 'lucide-react';
+import { Button } from '../Button';
+import { Flex } from '../Layout';
+const Overlay = styled.div `
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, var(--overlay-opacity));
+  backdrop-filter: blur(4px);
+  opacity: ${props => props.isOpen ? 1 : 0};
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: ${props => props.isOpen ? 'auto' : 'none'};
+  z-index: var(--z-dropdown);
+`;
+const Panel = styled.div `
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 96vh;
+  min-height: 50vh;
+  background-color: var(--card-bg);
+  border-top: var(--border-width) solid var(--card-border);
+  border-left: var(--border-width) solid var(--card-border);
+  border-right: var(--border-width) solid var(--card-border);
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  z-index: var(--z-modal);
+  transform: ${props => props.isOpen ? 'translateY(0)' : 'translateY(100%)'};
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+`;
+const HandleBar = styled.div `
+  width: 48px;
+  height: 6px;
+  background-color: var(--card-border);
+  border-radius: 99px;
+  margin: 0.75rem auto;
+  opacity: 0.5;
+`;
+const Header = styled(Flex) `
+  padding: 0 var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
+`;
+const Title = styled.h2 `
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: var(--text-xl);
+  font-weight: 700;
+`;
+const Content = styled.div `
+  flex: 1;
+  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
+  overflow-y: auto;
+`;
+export function Sheet({ isOpen, onClose, title, children, className }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        const handleEsc = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        if (isOpen)
+            window.addEventListener('keydown', handleEsc);
+        return () => window.removeEventListener('keydown', handleEsc);
+    }, [isOpen, onClose]);
+    if (!mounted)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [_jsx(Overlay, { isOpen: isOpen, onClick: onClose, "aria-hidden": "true" }), _jsxs(Panel, { isOpen: isOpen, role: "dialog", "aria-modal": "true", className: className, children: [_jsx(HandleBar, {}), _jsxs(Header, { align: "center", justify: "space-between", children: [_jsx(Title, { children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close sheet", children: _jsx(X, { size: 24 }) })] }), _jsx(Content, { children: children })] })] }), document.body);
+}

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

@@ -0,0 +1 @@
+export { Sheet } from './Sheet';

package/dist/components/Sheet/index.js

@@ -0,0 +1 @@
+export { Sheet } from './Sheet';

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    showValue?: boolean;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+}
+export declare function Slider({ label, showValue, value, defaultValue, onChange, min, max, step, className, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Slider/Slider.js

@@ -0,0 +1,168 @@
+'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 React from 'react';
+import styled from '@emotion/styled';
+const SliderContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+`;
+const LabelRow = styled.div `
+  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);
+`;
+const ValueDisplay = styled.span `
+  font-family: var(--font-mono, monospace);
+  font-weight: 700;
+  color: var(--primary);
+  font-size: var(--text-base);
+  min-width: 3ch;
+  text-align: right;
+`;
+const TrackWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--muted);
+  overflow: visible;
+`;
+const ProgressFill = styled.div `
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: ${props => props.percentage}%;
+  background: var(--primary);
+  border-radius: 999px;
+  z-index: 1;
+`;
+const RangeInput = styled.input `
+  -webkit-appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+  z-index: 10;
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    background: transparent;
+    border: none;
+  }
+  
+  &::-moz-range-track {
+    width: 100%;
+    height: 8px;
+    background: transparent;
+    border: none;
+  }
+
+  &::-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;
+  }
+
+  &::-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);
+  }
+
+  &: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);
+  }
+
+  &: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);
+  }
+
+  &: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);
+  }
+
+  &: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);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+
+  &:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+  
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:disabled::-webkit-slider-thumb {
+    background: var(--muted-foreground);
+    cursor: not-allowed;
+  }
+
+  &:disabled::-moz-range-thumb {
+    background: var(--muted-foreground);
+    cursor: not-allowed;
+  }
+`;
+export function Slider(_a) {
+    var { label, showValue, value, defaultValue, onChange, min = 0, max = 100, step = 1, className } = _a, props = __rest(_a, ["label", "showValue", "value", "defaultValue", "onChange", "min", "max", "step", "className"]);
+    const [internalValue, setInternalValue] = React.useState(defaultValue !== undefined ? defaultValue : min);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const handleChange = (e) => {
+        const newVal = Number(e.target.value);
+        if (!isControlled) {
+            setInternalValue(newVal);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
+    };
+    const percentage = ((currentValue - min) / (max - min)) * 100;
+    return (_jsxs(SliderContainer, { className: className, children: [(label || showValue) && (_jsxs(LabelRow, { children: [label && _jsx("span", { children: label }), showValue && _jsx(ValueDisplay, { children: currentValue })] })), _jsxs(TrackWrapper, { children: [_jsx(ProgressFill, { percentage: percentage }), _jsx(RangeInput, Object.assign({ type: "range", min: min, max: max, step: step, value: currentValue, onChange: handleChange, percentage: percentage }, props))] })] }));
+}

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

@@ -0,0 +1 @@
+export { Slider } from './Slider';

package/dist/components/Slider/index.js

@@ -0,0 +1 @@
+export { Slider } from './Slider';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    className?: string;
+    readOnly?: boolean;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,77 @@
+'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 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) => {
+        if (disabled)
+            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 })] }));
+});
+Switch.displayName = 'Switch';

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

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

package/dist/components/Switch/index.js

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

package/dist/components/Table/Table.js

@@ -4,8 +4,8 @@ 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 ---
+import { Input, Select, Flex } from '../..';
+import { Pagination } from '../Pagination';
 const TableContainer = styled.div `
   width: 100%;
   border: var(--border-width) solid var(--card-border);
@@ -17,7 +17,7 @@ const TableContainer = styled.div `
   flex-direction: column;
 `;
 const Toolbar = styled.div `
-  padding: 1rem;
+  padding: var(--spacing-md);
   border-bottom: var(--border-width) solid var(--card-border);
   background: var(--background);
   display: flex;
@@ -92,7 +92,7 @@ const Tr = styled.tr `
   }
 `;
 const PaginationContainer = styled.div `
-  padding: 1rem;
+  padding: var(--spacing-md);
   border-top: var(--border-width) solid var(--card-border);
   background: var(--background);
   display: flex;
@@ -165,12 +165,12 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
                                             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) => {
+                                }) })) : (_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) => {
                                     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" })] })] }))] }));
+                                ] }) }), _jsx(Pagination, { currentPage: table.getState().pagination.pageIndex + 1, totalPages: table.getPageCount(), onPageChange: (page) => table.setPageIndex(page - 1) })] }) }))] }));
 }

package/dist/components/Tabs/Tabs.js

@@ -3,19 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState } from 'react';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
+import { Flex } from '../Layout';
 const TabsContext = createContext(null);
-// --- Styled Components ---
 const fadeIn = keyframes `
   from { opacity: 0; transform: translateY(5px); }
   to { opacity: 1; transform: translateY(0); }
 `;
-const StyledTabsList = styled.div `
-  display: flex;
-  gap: 0.5rem;
+const StyledTabsList = styled(Flex) `
   margin-bottom: 0;
-  padding-left: 1rem;
+  padding-left: var(--spacing-md);
   position: relative;
-  /* z-index is managed by triggers */
 `;
 const StyledTabsTrigger = styled.button `
   padding: 0.75rem 1.5rem;
@@ -31,7 +28,7 @@ const StyledTabsTrigger = styled.button `
   border-radius: var(--radius) var(--radius) 0 0;
   cursor: pointer;
   position: relative;
-  z-index: ${props => props.isActive ? 'var(--z-elevated)' : 1};
+  z-index: ${props => props.isActive ? 'var(--z-elevated)' : '1'};
   transition: all 0.2s ease;
   transform: ${props => props.isActive ? 'translateY(0)' : 'translateY(4px)'};
 
@@ -49,7 +46,7 @@ const StyledTabsBody = styled.div `
   padding: 2.5rem;
   box-shadow: var(--shadow-hard);
   position: relative;
-  z-index: 5;
+  z-index: var(--z-elevated);
   min-height: 600px;
   margin-top: -3px;
 `;
@@ -69,7 +66,7 @@ export function Tabs({ defaultValue, value, onValueChange, children, className }
     return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: _jsx("div", { className: className, children: children }) }));
 }
 export function TabsList({ children, className }) {
-    return _jsx(StyledTabsList, { className: className, children: children });
+    return _jsx(StyledTabsList, { gap: "0.5rem", className: className, children: children });
 }
 export function TabsTrigger({ value, children, className, onClick }) {
     const context = useContext(TabsContext);