doom-design-system 0.1.0

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+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;
+  margin-bottom: 0;
+  padding-left: 1rem;
+  position: relative;
+  /* z-index is managed by triggers */
+`;
+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: 5;
+  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;
+    const activeTab = isControlled ? value : internalActiveTab;
+    const setActiveTab = (newValue) => {
+        if (!isControlled) {
+            setInternalActiveTab(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    };
+    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 });
+}
+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: () => {
+            context.setActiveTab(value);
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, className: className, children: children }));
+}
+export function TabsBody({ children, className, style }) {
+    return _jsx(StyledTabsBody, { className: className, style: style, children: children });
+}
+export function TabsContent({ value, children, className }) {
+    const context = useContext(TabsContext);
+    if (!context)
+        throw new Error('TabsContent must be used within Tabs');
+    if (context.activeTab !== value)
+        return null;
+    return _jsx(StyledTabsContent, { className: className, children: children });
+}

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

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

package/dist/components/Tabs/index.js

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

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type BaseProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'color'>;
+interface CustomTextProps {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'small' | 'caption';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'black';
+    color?: 'primary' | 'secondary' | 'muted' | 'error' | 'success' | 'warning';
+    align?: 'left' | 'center' | 'right';
+    as?: React.ElementType;
+    htmlFor?: string;
+}
+export interface TextProps extends BaseProps, CustomTextProps {
+}
+export declare function Text({ variant, weight, color, align, className, style, children, as, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Text/Text.js

@@ -0,0 +1,123 @@
+'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';
+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'};
+`;
+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 })));
+}

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

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

package/dist/components/Text/index.js

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

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

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

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+const StyledTextarea = styled.textarea `
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: var(--text-base);
+  background: var(--card-bg);
+  color: var(--foreground);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  outline: none;
+  transition: all 0.1s ease;
+  font-family: inherit;
+  resize: vertical;
+
+  &:focus {
+    box-shadow: var(--shadow-hover);
+    transform: translate(-2px, -2px);
+    border-color: var(--primary);
+  }
+
+  &::placeholder {
+    color: var(--muted);
+  }
+`;
+export function Textarea(props) {
+    return _jsx(StyledTextarea, Object.assign({}, props));
+}

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

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

package/dist/components/Textarea/index.js

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+interface ToastContextType {
+    toast: (message: string, type?: ToastType) => void;
+    toastSuccess: (message: string) => void;
+    toastError: (message: string) => void;
+    toastWarning: (message: string) => void;
+    toastInfo: (message: string) => void;
+}
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useToast(): ToastContextType;
+export {};

package/dist/components/Toast/Toast.js

@@ -0,0 +1,109 @@
+'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 { createPortal } from 'react-dom';
+import { CheckCircle2, XCircle, AlertTriangle, Info, X } from 'lucide-react';
+// 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: 1rem;
+  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([]);
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    const removeToast = useCallback((id) => {
+        setToasts(prev => prev.map(t => t.id === id ? Object.assign(Object.assign({}, t), { isExiting: true }) : t));
+        setTimeout(() => {
+            setToasts(prev => prev.filter(t => t.id !== id));
+        }, 300); // Match animation duration
+    }, []);
+    const addToast = useCallback((message, type = 'info') => {
+        const id = Math.random().toString(36).substring(2, 9);
+        setToasts(prev => [...prev, { id, message, type }]);
+        // Auto remove after 5 seconds
+        setTimeout(() => {
+            removeToast(id);
+        }, 5000);
+    }, [removeToast]);
+    const toast = useCallback((message, type = 'info') => addToast(message, type), [addToast]);
+    const toastSuccess = useCallback((message) => addToast(message, 'success'), [addToast]);
+    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)] }));
+}
+// Hook
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+}

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

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

package/dist/components/Toast/index.js

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

package/dist/fonts.d.ts

@@ -0,0 +1 @@
+export declare const defaultFont: import("next/dist/compiled/@next/font").NextFontWithVariable;

package/dist/fonts.js

@@ -0,0 +1,6 @@
+import { Montserrat } from 'next/font/google';
+export const defaultFont = Montserrat({
+    subsets: ['latin'],
+    variable: '--font-montserrat',
+    display: 'swap',
+});

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/Card';
+export * from './components/Dropdown';
+export * from './components/Form';
+export * from './components/Input';
+export * from './components/Layout';
+export * from './components/Link';
+export * from './components/Modal';
+export * from './components/Page';
+export * from './components/Popover';
+export * from './components/ProgressBar';
+export * from './components/Select';
+export * from './components/SplitButton';
+export * from './components/Table';
+export * from './components/Tabs';
+export * from './components/Text';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/ActionRow';
+export * from './components/Skeleton';
+export * from './DesignSystemProvider';
+export * from './styles/themes';
+export * from './fonts';

package/dist/index.js

@@ -0,0 +1,24 @@
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/Card';
+export * from './components/Dropdown';
+export * from './components/Form';
+export * from './components/Input';
+export * from './components/Layout';
+export * from './components/Link';
+export * from './components/Modal';
+export * from './components/Page';
+export * from './components/Popover';
+export * from './components/ProgressBar';
+export * from './components/Select';
+export * from './components/SplitButton';
+export * from './components/Table';
+export * from './components/Tabs';
+export * from './components/Text';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/ActionRow';
+export * from './components/Skeleton';
+export * from './DesignSystemProvider';
+export * from './styles/themes';
+export * from './fonts';

package/dist/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './reset';
+export * from './utilities';
+export * from './theme';

package/dist/styles/index.js

@@ -0,0 +1,3 @@
+export * from './reset';
+export * from './utilities';
+export * from './theme';

package/dist/styles/reset.d.ts

@@ -0,0 +1 @@
+export declare const resetStyles: import("@emotion/utils").SerializedStyles;

package/dist/styles/reset.js

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+export const resetStyles = css `
+  * {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+  }
+
+  html {
+    overflow-y: scroll; /* Force scrollbar to prevent layout shift */
+    overflow-x: hidden;
+    background-color: var(--background);
+  }
+
+  body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-montserrat), system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+`;

package/dist/styles/theme.d.ts

@@ -0,0 +1 @@
+export declare const themeDefaults: import("@emotion/utils").SerializedStyles;

package/dist/styles/theme.js

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+import { themes } from './themes';
+// Use the default theme as the baseline for the design system
+const defaultTheme = themes.default.variables;
+export const themeDefaults = css `
+  :root {
+    ${Object.entries(defaultTheme)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join('\n    ')}
+  }
+`;

package/dist/styles/themes/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { themes, ThemeKey } from './definitions';
+interface ThemeContextType {
+    theme: ThemeKey;
+    setTheme: (theme: ThemeKey) => void;
+    availableThemes: typeof themes;
+}
+export declare function ThemeProvider({ children, initialTheme }: {
+    children: React.ReactNode;
+    initialTheme: ThemeKey;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextType;
+export {};

package/dist/styles/themes/ThemeProvider.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { Global, css } from '@emotion/react';
+import { themes } from './definitions';
+import { setThemePreference } from './actions';
+const ThemeContext = createContext(undefined);
+export function ThemeProvider({ children, initialTheme }) {
+    var _a;
+    const [currentTheme, setCurrentTheme] = useState(initialTheme);
+    const handleSetTheme = async (newTheme) => {
+        setCurrentTheme(newTheme);
+        await setThemePreference(newTheme);
+    };
+    // Get the variables for the current theme
+    const themeVars = ((_a = themes[currentTheme]) === null || _a === void 0 ? void 0 : _a.variables) || themes.default.variables;
+    // Generate CSS variables block
+    const themeStyles = css `
+    :root {
+      ${Object.entries(themeVars)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('\n      ')}
+    }
+  `;
+    return (_jsxs(ThemeContext.Provider, { value: {
+            theme: currentTheme,
+            setTheme: handleSetTheme,
+            availableThemes: themes
+        }, children: [_jsx(Global, { styles: themeStyles }), children] }));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

package/dist/styles/themes/actions.d.ts

@@ -0,0 +1,3 @@
+import { ThemeKey } from './definitions';
+export declare function getThemePreference(): Promise<ThemeKey>;
+export declare function setThemePreference(theme: ThemeKey): Promise<void>;

package/dist/styles/themes/actions.js

@@ -0,0 +1,16 @@
+'use server';
+import { cookies } from 'next/headers';
+const THEME_COOKIE_NAME = 'theme-preference';
+export async function getThemePreference() {
+    const cookieStore = await cookies();
+    const theme = cookieStore.get(THEME_COOKIE_NAME);
+    return (theme === null || theme === void 0 ? void 0 : theme.value) || 'doom';
+}
+export async function setThemePreference(theme) {
+    const cookieStore = await cookies();
+    cookieStore.set(THEME_COOKIE_NAME, theme, {
+        path: '/',
+        maxAge: 60 * 60 * 24 * 365, // 1 year
+        sameSite: 'lax',
+    });
+}