doom-design-system 0.1.7 → 0.1.9

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

@@ -0,0 +1,111 @@
+.container {
+  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;
+}
+.container.flat {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  border-radius: 0;
+}
+
+.toolbar {
+  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;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-base);
+}
+
+.th {
+  text-align: left;
+  padding: 1rem;
+  background: var(--secondary);
+  border-bottom: var(--border-width) solid var(--card-border);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--secondary-foreground);
+}
+.th.compact {
+  padding: 0.5rem 1rem;
+}
+.th.relaxed {
+  padding: 1.5rem 1rem;
+}
+.th.sortable {
+  cursor: pointer;
+}
+.th.sortable:hover {
+  filter: brightness(0.95);
+  color: var(--secondary-foreground);
+}
+
+.td {
+  padding: 1rem;
+  border-bottom: 1px solid var(--card-border);
+  color: var(--foreground);
+}
+.td.compact {
+  padding: 0.5rem 1rem;
+}
+.td.relaxed {
+  padding: 1.5rem 1rem;
+}
+
+.tr:last-child td {
+  border-bottom: none;
+}
+.tr:hover {
+  background-color: rgba(113, 128, 150, 0.1);
+}
+.tr.striped:nth-of-type(even) {
+  background-color: rgba(113, 128, 150, 0.05);
+}
+.tr.striped:hover {
+  background-color: rgba(113, 128, 150, 0.15);
+}
+.tr .row-actions {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+.tr:hover .row-actions {
+  opacity: 1;
+}
+
+.paginationContainer {
+  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;
+}
+
+.noResults {
+  padding: 2rem;
+  text-align: center;
+  color: var(--muted-foreground);
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

package/dist/components/Tabs/Tabs.js

@@ -1,58 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './Tabs.module.css';
 import { createContext, useContext, useState } from 'react';
-import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react';
-import { Flex } from '../Layout';
 const TabsContext = createContext(null);
-const fadeIn = keyframes `
-  from { opacity: 0; transform: translateY(5px); }
-  to { opacity: 1; transform: translateY(0); }
-`;
-const StyledTabsList = styled(Flex) `
-  margin-bottom: 0;
-  padding-left: var(--spacing-md);
-  position: relative;
-`;
-const StyledTabsTrigger = styled.button `
-  padding: 0.75rem 1.5rem;
-  font-size: 0.9rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  opacity: ${props => props.isActive ? '1' : '0.6'};
-  border: var(--border-width) solid var(--card-border);
-  border-bottom: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius) var(--radius) 0 0;
-  cursor: pointer;
-  position: relative;
-  z-index: ${props => props.isActive ? 'var(--z-elevated)' : '1'};
-  transition: all 0.2s ease;
-  transform: ${props => props.isActive ? 'translateY(0)' : 'translateY(4px)'};
-
-  &:hover {
-    ${props => !props.isActive && `
-      opacity: 0.8;
-      transform: translateY(2px);
-    `}
-  }
-`;
-const StyledTabsBody = styled.div `
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  padding: 2.5rem;
-  box-shadow: var(--shadow-hard);
-  position: relative;
-  z-index: var(--z-elevated);
-  min-height: 600px;
-  margin-top: -3px;
-`;
-const StyledTabsContent = styled.div `
-  animation: ${fadeIn} 0.3s ease-out forwards;
-`;
 export function Tabs({ defaultValue, value, onValueChange, children, className }) {
     const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || '');
     const isControlled = value !== undefined;
@@ -66,20 +17,20 @@ 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, { gap: "0.5rem", className: className, children: children });
+    return _jsx("div", { className: clsx(styles.tabsList, className), children: children });
 }
 export function TabsTrigger({ value, children, className, onClick }) {
     const context = useContext(TabsContext);
     if (!context)
         throw new Error('TabsTrigger must be used within Tabs');
     const isActive = context.activeTab === value;
-    return (_jsx(StyledTabsTrigger, { isActive: isActive, onClick: () => {
+    return (_jsx("button", { className: clsx(styles.tabsTrigger, isActive && styles.active, className), onClick: () => {
             context.setActiveTab(value);
             onClick === null || onClick === void 0 ? void 0 : onClick();
-        }, className: className, children: children }));
+        }, children: children }));
 }
 export function TabsBody({ children, className, style }) {
-    return _jsx(StyledTabsBody, { className: className, style: style, children: children });
+    return _jsx("div", { className: clsx(styles.tabsBody, className), style: style, children: children });
 }
 export function TabsContent({ value, children, className }) {
     const context = useContext(TabsContext);
@@ -87,5 +38,5 @@ export function TabsContent({ value, children, className }) {
         throw new Error('TabsContent must be used within Tabs');
     if (context.activeTab !== value)
         return null;
-    return _jsx(StyledTabsContent, { className: className, children: children });
+    return _jsx("div", { className: clsx(styles.tabsContent, className), children: children });
 }

package/dist/components/Tabs/Tabs.module.css

@@ -0,0 +1,65 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.tabsList {
+  display: flex;
+  margin-bottom: 0;
+  padding-left: var(--spacing-md);
+  position: relative;
+  gap: 0.5rem;
+}
+
+.tabsTrigger {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  opacity: 0.6;
+  border: var(--border-width) solid var(--card-border);
+  border-bottom: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius) var(--radius) 0 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  transition: all 0.2s ease;
+  transform: translateY(4px);
+}
+.tabsTrigger:hover {
+  opacity: 0.8;
+  transform: translateY(2px);
+}
+.tabsTrigger.active {
+  opacity: 1;
+  z-index: var(--z-elevated);
+  transform: translateY(0);
+}
+.tabsTrigger.active:hover {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.tabsBody {
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  padding: 2.5rem;
+  box-shadow: var(--shadow-hard);
+  position: relative;
+  z-index: var(--z-elevated);
+  min-height: 600px;
+  margin-top: -3px;
+}
+
+.tabsContent {
+  animation: fadeIn 0.3s ease-out forwards;
+}

package/dist/components/Text/Text.js

@@ -11,113 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const StyledText = styled.span `
-  /* Variant styles */
-  ${props => {
-    switch (props.$variant) {
-        case 'h1':
-            return `
-          font-size: var(--text-5xl);
-          font-weight: var(--font-black);
-          line-height: 1.1;
-          letter-spacing: -0.02em;
-        `;
-        case 'h2':
-            return `
-          font-size: var(--text-4xl);
-          font-weight: var(--font-black);
-          line-height: 1.1;
-          letter-spacing: -0.02em;
-        `;
-        case 'h3':
-            return `
-          font-size: var(--text-3xl);
-          font-weight: var(--font-black);
-          line-height: 1.1;
-        `;
-        case 'h4':
-            return `
-          font-size: var(--text-2xl);
-          font-weight: var(--font-bold);
-          line-height: 1.2;
-        `;
-        case 'h5':
-            return `
-          font-size: var(--text-xl);
-          font-weight: var(--font-bold);
-          line-height: 1.3;
-        `;
-        case 'h6':
-            return `
-          font-size: var(--text-lg);
-          font-weight: var(--font-bold);
-          line-height: 1.4;
-        `;
-        case 'small':
-            return `
-          font-size: var(--text-xs);
-          line-height: 1.5;
-        `;
-        case 'caption':
-            return `
-          font-size: var(--text-xs);
-          line-height: 1.5;
-          color: var(--muted-foreground);
-        `;
-        case 'body':
-        default:
-            return `
-          font-size: var(--text-base);
-          line-height: 1.6;
-        `;
-    }
-}}
-
-  /* Weight styles */
-  ${props => {
-    switch (props.$weight) {
-        case 'normal':
-            return 'font-weight: var(--font-regular);';
-        case 'medium':
-            return 'font-weight: var(--font-medium);';
-        case 'semibold':
-            return 'font-weight: var(--font-bold);'; // Mapping semibold to bold
-        case 'bold':
-            return 'font-weight: var(--font-bold);';
-        case 'black':
-            return 'font-weight: var(--font-black);';
-        default:
-            return '';
-    }
-}}
-
-  /* Color styles */
-  ${props => {
-    switch (props.$color) {
-        case 'primary':
-            return 'color: var(--primary);';
-        case 'secondary':
-            return 'color: var(--secondary);';
-        case 'muted':
-            return 'color: var(--muted-foreground);';
-        case 'error':
-            return 'color: var(--error);';
-        case 'success':
-            return 'color: var(--success);';
-        case 'warning':
-            return 'color: var(--warning);';
-        default:
-            return 'color: var(--foreground);';
-    }
-}}
-
-  /* Alignment */
-  text-align: ${props => props.$align || 'left'};
-`;
+import clsx from 'clsx';
+import styles from './Text.module.css';
 export function Text(_a) {
     var { variant = 'body', weight, color, align, className, style, children, as } = _a, props = __rest(_a, ["variant", "weight", "color", "align", "className", "style", "children", "as"]);
     // Determine the HTML element to use
-    const element = as || ((variant === null || variant === void 0 ? void 0 : variant.startsWith('h')) ? variant : 'span');
-    return (_jsx(StyledText, Object.assign({ as: element, "$variant": variant, "$weight": weight, "$color": color, "$align": align, className: className, style: style }, props, { children: children })));
+    const Component = as || ((variant === null || variant === void 0 ? void 0 : variant.startsWith('h')) ? variant : 'span');
+    return (_jsx(Component, Object.assign({ className: clsx(styles.text, styles[variant], weight && styles[`weight-${weight}`], color ? styles[`color-${color}`] : (!(variant === null || variant === void 0 ? void 0 : variant.startsWith('caption')) && styles['color-foreground']), align && styles[`align-${align}`], className), style: style }, props, { children: children })));
 }

package/dist/components/Text/Text.module.css

@@ -0,0 +1,123 @@
+/* Base styles */
+.text {
+  text-align: left;
+  /* Default align */
+}
+
+/* Alignment */
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+/* Variants */
+.h1 {
+  font-size: var(--text-5xl);
+  font-weight: var(--font-black);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.h2 {
+  font-size: var(--text-4xl);
+  font-weight: var(--font-black);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.h3 {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-black);
+  line-height: 1.1;
+}
+
+.h4 {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  line-height: 1.2;
+}
+
+.h5 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-bold);
+  line-height: 1.3;
+}
+
+.h6 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-bold);
+  line-height: 1.4;
+}
+
+.small {
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+.caption {
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  color: var(--muted-foreground);
+}
+
+.body {
+  font-size: var(--text-base);
+  line-height: 1.6;
+}
+
+/* Weights */
+.weight-normal {
+  font-weight: var(--font-regular);
+}
+
+.weight-medium {
+  font-weight: var(--font-medium);
+}
+
+.weight-semibold {
+  font-weight: var(--font-bold);
+}
+
+.weight-bold {
+  font-weight: var(--font-bold);
+}
+
+.weight-black {
+  font-weight: var(--font-black);
+}
+
+/* Colors */
+.color-primary {
+  color: var(--primary);
+}
+
+.color-secondary {
+  color: var(--secondary);
+}
+
+.color-muted {
+  color: var(--muted-foreground);
+}
+
+.color-error {
+  color: var(--error);
+}
+
+.color-success {
+  color: var(--success);
+}
+
+.color-warning {
+  color: var(--warning);
+}
+
+.color-foreground {
+  color: var(--foreground);
+}

package/dist/components/Textarea/Textarea.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-export declare function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare function Textarea({ className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Textarea/Textarea.js

@@ -1,23 +1,19 @@
 '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 { baseInteractiveStyles, focusStyles } from '../../styles/mixins';
-const StyledTextarea = styled.textarea `
-  width: 100%;
-  padding: 0.75rem 1rem;
-  font-size: var(--text-base);
-  background: var(--card-bg);
-  color: var(--foreground);
-  font-family: inherit;
-  resize: vertical;
-
-  ${baseInteractiveStyles}
-  ${focusStyles}
-
-  &::placeholder {
-    color: var(--muted);
-  }
-`;
-export function Textarea(props) {
-    return _jsx(StyledTextarea, Object.assign({}, props));
+import clsx from 'clsx';
+import styles from './Textarea.module.css';
+export function Textarea(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("textarea", Object.assign({ className: clsx(styles.textarea, className) }, props));
 }

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

@@ -0,0 +1,23 @@
+.textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: var(--text-base);
+  background: var(--card-bg);
+  color: var(--foreground);
+  font-family: inherit;
+  resize: vertical;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  transition: all 0.1s ease;
+  outline: none;
+}
+.textarea:focus, .textarea:focus-visible, .textarea[aria-expanded=true] {
+  outline: none;
+  transform: translate(-2px, -2px);
+  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  border-color: var(--primary);
+}
+.textarea::placeholder {
+  color: var(--muted);
+}

package/dist/components/Toast/Toast.js

@@ -1,76 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState, useCallback, useEffect } from 'react';
-import styled from '@emotion/styled';
+import clsx from 'clsx';
 import { createPortal } from 'react-dom';
 import { CheckCircle2, XCircle, AlertTriangle, Info, X } from 'lucide-react';
+import styles from './Toast.module.css';
 // Context
 const ToastContext = createContext(undefined);
-// Styled Components
-const ToastContainer = styled.div `
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  z-index: var(--z-tooltip);
-  pointer-events: none; /* Allow clicking through the container area */
-`;
-const ToastItem = styled.div `
-  min-width: 300px;
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  color: var(--foreground);
-  box-shadow: var(--shadow-hard);
-  padding: var(--spacing-md);
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  animation: ${props => props.isExiting ? 'slideOut 0.3s ease-in forwards' : 'slideIn 0.3s ease-out forwards'};
-  position: relative;
-  overflow: hidden;
-  pointer-events: auto; /* Re-enable pointer events for the toast itself */
-  border-radius: var(--radius);
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 6px;
-    background-color: ${props => {
-    switch (props.type) {
-        case 'success': return 'var(--success)';
-        case 'error': return 'var(--error)';
-        case 'warning': return 'var(--warning)';
-        default: return 'var(--primary)';
-    }
-}};
-  }
-
-  @keyframes slideIn {
-    from { transform: translateX(100%); opacity: 0; }
-    to { transform: translateX(0); opacity: 1; }
-  }
-
-  @keyframes slideOut {
-    from { transform: translateX(0); opacity: 1; }
-    to { transform: translateX(100%); opacity: 0; }
-  }
-`;
-const CloseButton = styled.button `
-  background: none;
-  border: none;
-  margin-left: auto;
-  cursor: pointer;
-  font-size: 1.25rem;
-  color: var(--foreground);
-  opacity: 0.5;
-  transition: opacity 0.2s;
-  &:hover { opacity: 1; }
-`;
 // Provider
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
@@ -97,7 +33,7 @@ export function ToastProvider({ children }) {
     const toastError = useCallback((message) => addToast(message, 'error'), [addToast]);
     const toastWarning = useCallback((message) => addToast(message, 'warning'), [addToast]);
     const toastInfo = useCallback((message) => addToast(message, 'info'), [addToast]);
-    return (_jsxs(ToastContext.Provider, { value: { toast, toastSuccess, toastError, toastWarning, toastInfo }, children: [children, isMounted && createPortal(_jsx(ToastContainer, { children: toasts.map(t => (_jsxs(ToastItem, { type: t.type, isExiting: t.isExiting, children: [t.type === 'success' && _jsx(CheckCircle2, { size: 20, strokeWidth: 2.5, color: "var(--success)" }), t.type === 'error' && _jsx(XCircle, { size: 20, strokeWidth: 2.5, color: "var(--error)" }), t.type === 'warning' && _jsx(AlertTriangle, { size: 20, strokeWidth: 2.5, color: "var(--warning)" }), t.type === 'info' && _jsx(Info, { size: 20, strokeWidth: 2.5, color: "var(--primary)" }), _jsx("span", { className: "font-semibold", children: t.message }), _jsx(CloseButton, { onClick: () => removeToast(t.id), children: _jsx(X, { size: 16, strokeWidth: 2.5 }) })] }, t.id))) }), document.body)] }));
+    return (_jsxs(ToastContext.Provider, { value: { toast, toastSuccess, toastError, toastWarning, toastInfo }, children: [children, isMounted && createPortal(_jsx("div", { className: styles.container, children: toasts.map(t => (_jsxs("div", { className: clsx(styles.toast, styles[t.type], t.isExiting && styles.exiting), children: [t.type === 'success' && _jsx(CheckCircle2, { size: 20, strokeWidth: 2.5, color: "var(--success)" }), t.type === 'error' && _jsx(XCircle, { size: 20, strokeWidth: 2.5, color: "var(--error)" }), t.type === 'warning' && _jsx(AlertTriangle, { size: 20, strokeWidth: 2.5, color: "var(--warning)" }), t.type === 'info' && _jsx(Info, { size: 20, strokeWidth: 2.5, color: "var(--primary)" }), _jsx("span", { className: "font-semibold", children: t.message }), _jsx("button", { className: styles.closeButton, onClick: () => removeToast(t.id), children: _jsx(X, { size: 16, strokeWidth: 2.5 }) })] }, t.id))) }), document.body)] }));
 }
 // Hook
 export function useToast() {