doom-design-system 0.1.0

package/README.md

@@ -0,0 +1,50 @@
+# Doom Design System
+
+A modern, premium design system built with React, Next.js, and Emotion.
+
+## Installation
+
+```bash
+npm install doom-design-system
+```
+
+## Usage
+
+Wrap your application with the `DesignSystemProvider` to ensure all styles and themes are applied correctly.
+
+```tsx
+import { DesignSystemProvider } from 'doom-design-system';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <DesignSystemProvider>
+      <Component {...pageProps} />
+    </DesignSystemProvider>
+  );
+}
+```
+
+### Importing Components
+
+```tsx
+import { Button, Card, Text } from 'doom-design-system';
+
+function MyComponent() {
+  return (
+    <Card>
+      <Text variant="h2">Hello World</Text>
+      <Button variant="primary">Click Me</Button>
+    </Card>
+  );
+}
+```
+
+## Requirements
+
+This library requires the following peer dependencies:
+
+- React >= 19
+- Next.js >= 15
+- @emotion/react
+- @emotion/styled
+- lucide-react

package/dist/DesignSystemProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ThemeKey } from './styles/themes';
+export declare function DesignSystemProvider({ children, initialTheme, withBody }: {
+    children: React.ReactNode;
+    initialTheme?: ThemeKey;
+    withBody?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DesignSystemProvider.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Global } from '@emotion/react';
+import { resetStyles, utilityStyles } from './styles';
+import { ThemeProvider } from './styles/themes';
+import { defaultFont } from './fonts';
+export function DesignSystemProvider({ children, initialTheme = 'default', withBody = false }) {
+    const content = (_jsxs(ThemeProvider, { initialTheme: initialTheme, children: [_jsx(Global, { styles: [resetStyles, utilityStyles] }), children] }));
+    if (withBody) {
+        return (_jsx("body", { className: defaultFont.variable, children: content }));
+    }
+    return (_jsx("div", { className: defaultFont.variable, style: { display: 'contents' }, children: content }));
+}

package/dist/components/ActionRow/ActionRow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ActionRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon: React.ReactNode;
+    title: string;
+    description?: string;
+    onClick?: () => void;
+}
+export declare function ActionRow({ icon, title, description, onClick, className, ...props }: ActionRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ActionRow/ActionRow.js

@@ -0,0 +1,47 @@
+'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 styled from '@emotion/styled';
+import { Text } from '../Text/Text';
+import { Flex } from '../Layout/Layout';
+import { ChevronRight } from 'lucide-react';
+// Extend Flex to add interactive styles
+const StyledActionRow = styled(Flex) `
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-bottom: var(--border-width) solid var(--card-border);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: rgba(var(--muted-rgb, 113, 128, 150), 0.1);
+  }
+`;
+const IconWrapper = styled.div `
+  width: 48px;
+  height: 48px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  flex-shrink: 0;
+`;
+export function ActionRow(_a) {
+    var { icon, title, description, onClick, className } = _a, props = __rest(_a, ["icon", "title", "description", "onClick", "className"]);
+    return (_jsxs(StyledActionRow, Object.assign({ align: "center", gap: "1.5rem", onClick: onClick, className: className }, props, { children: [_jsx(IconWrapper, { children: icon }), _jsxs(Flex, { direction: "column", gap: "0.25rem", style: { flex: 1 }, children: [_jsx(Text, { variant: "h6", weight: "bold", children: title }), description && (_jsx(Text, { color: "muted", variant: "small", children: description }))] }), _jsx(ChevronRight, { size: 20, strokeWidth: 2.5, style: { color: 'var(--muted-foreground)' } })] })));
+}

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

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

package/dist/components/ActionRow/index.js

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

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'secondary';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+}
+export declare function Badge({ variant, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,57 @@
+'use client';
+'use client';
+'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 { css } from '@emotion/react';
+const StyledBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  border: 2px solid var(--card-border);
+  box-shadow: 2px 2px 0px 0px var(--card-border);
+
+  ${props => props.variant === 'primary' && css `
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  `}
+
+  ${props => props.variant === 'success' && css `
+    background-color: var(--success);
+    color: var(--card-bg);
+  `}
+
+  ${props => props.variant === 'warning' && css `
+    background-color: var(--warning);
+    color: var(--card-bg);
+  `}
+
+  ${props => props.variant === 'error' && css `
+    background-color: var(--error);
+    color: var(--card-bg);
+  `}
+
+  ${props => props.variant === 'secondary' && css `
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  `}
+`;
+export function Badge(_a) {
+    var { variant = 'primary', children } = _a, props = __rest(_a, ["variant", "children"]);
+    return (_jsx(StyledBadge, Object.assign({ variant: variant }, props, { children: children })));
+}

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

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

package/dist/components/Badge/index.js

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'success';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+export declare function Button({ children, variant, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Button/Button.js

@@ -0,0 +1,110 @@
+'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 { css } from '@emotion/react';
+const StyledButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.1s ease;
+  cursor: pointer;
+  border: var(--border-width) solid var(--card-border);
+  box-shadow: var(--shadow-hard);
+  background-color: var(--card-bg);
+  color: var(--foreground);
+  font-size: var(--text-base);
+
+  &:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-hover);
+  }
+
+  &:active {
+    transform: translate(0px, 0px);
+    box-shadow: 0px 0px 0px 0px var(--card-border);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: var(--shadow-hard);
+  }
+
+  /* Variants */
+  ${props => props.variant === 'primary' && css `
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    &:hover {
+      filter: brightness(1.1);
+    }
+  `}
+
+  ${props => props.variant === 'secondary' && css `
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    &:hover {
+      filter: brightness(1.1);
+    }
+  `}
+
+  ${props => props.variant === 'success' && css `
+    background-color: var(--success);
+    color: var(--card-bg);
+    &:hover {
+      filter: brightness(1.1);
+    }
+  `}
+  
+  ${props => props.variant === 'outline' && css `
+    background-color: transparent;
+    /* Outline is default style basically */
+  `}
+
+  ${props => props.variant === 'ghost' && css `
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    &:hover {
+      background-color: color-mix(in srgb, var(--primary), transparent 90%);
+      color: var(--primary);
+      transform: none;
+      box-shadow: none;
+    }
+  `}
+
+  /* Sizes */
+  ${props => props.size === 'sm' && css `
+    padding: 0.25rem 0.5rem;
+    font-size: var(--text-sm);
+  `}
+
+  ${props => props.size === 'md' && css `
+    padding: 0.75rem 1.5rem;
+    font-size: var(--text-base);
+  `}
+
+  ${props => props.size === 'lg' && css `
+    padding: 1rem 2rem;
+    font-size: var(--text-lg);
+  `}
+`;
+export function Button(_a) {
+    var { children, variant = 'primary', size = 'md' } = _a, props = __rest(_a, ["children", "variant", "size"]);
+    return (_jsx(StyledButton, Object.assign({ variant: variant, size: size }, props, { children: children })));
+}

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

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

package/dist/components/Button/index.js

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

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    as?: React.ElementType;
+    disabled?: boolean;
+}
+export declare function Card({ children, className, as, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Card/Card.js

@@ -0,0 +1,28 @@
+'use client';
+'use client';
+'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 StyledCard = styled.div `
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-hard);
+  min-width: 0; /* Safe default for grid/flex items */
+`;
+export function Card(_a) {
+    var { children, className, as } = _a, props = __rest(_a, ["children", "className", "as"]);
+    return (_jsx(StyledCard, Object.assign({ as: as, className: className }, props, { children: children })));
+}

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

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

package/dist/components/Card/index.js

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

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,11 @@
+interface DropdownItemType {
+    label: string;
+    onClick: () => void;
+}
+interface DropdownProps {
+    triggerLabel: string;
+    items: DropdownItemType[];
+    variant?: 'primary' | 'secondary';
+}
+export declare function Dropdown({ triggerLabel, items, variant }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { Button, Popover } from '../..';
+const StyledDropdownMenu = styled.div `
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--primary);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hover);
+  min-width: 200px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+`;
+const DropdownItem = styled.button `
+  text-align: left;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  color: var(--foreground);
+  cursor: pointer;
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-base);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--primary), transparent 85%);
+    color: var(--primary);
+  }
+`;
+// Create a styled version of Button to handle the active state locally
+const TriggerButton = styled(Button) `
+  &[aria-expanded="true"] {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-hover);
+  }
+`;
+export function Dropdown({ triggerLabel, items, variant = 'primary' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs(TriggerButton, { variant: variant, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, children: [triggerLabel, " ", _jsx("span", { style: { marginLeft: '0.5rem', fontSize: '0.8em' }, children: "\u25BC" })] }), content: _jsx(StyledDropdownMenu, { children: items.map((item, index) => (_jsx(DropdownItem, { onClick: () => {
+                    item.onClick();
+                    setIsOpen(false);
+                }, children: item.label }, index))) }) }));
+}

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

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

package/dist/components/Dropdown/index.js

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

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    children: React.ReactNode;
+}
+export declare function Form({ children, className, style, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare function FormGroup({ children, className, style, ...props }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    children: React.ReactNode;
+}
+export declare function Label({ children, className, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Form/Form.js

@@ -0,0 +1,24 @@
+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";
+export function Form(_a) {
+    var { children, className = '', style } = _a, props = __rest(_a, ["children", "className", "style"]);
+    return (_jsx("form", Object.assign({ className: className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '1.5rem' }, style) }, props, { children: children })));
+}
+export function FormGroup(_a) {
+    var { children, className = '', style } = _a, props = __rest(_a, ["children", "className", "style"]);
+    return (_jsx("div", Object.assign({ className: className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '0.5rem' }, style) }, props, { children: children })));
+}
+export function Label(_a) {
+    var { children, className = '', style } = _a, props = __rest(_a, ["children", "className", "style"]);
+    return (_jsx("label", Object.assign({ className: className, style: Object.assign({ fontWeight: 700, fontSize: '0.9rem', color: '#000000', textTransform: 'uppercase', letterSpacing: '0.05em' }, style) }, props, { children: children })));
+}

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

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

package/dist/components/Form/index.js

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

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

@@ -0,0 +1,25 @@
+/**
+ * Icon component using Lucide React
+ *
+ * Usage examples:
+ *
+ * import { Home, User, Settings } from 'lucide-react';
+ *
+ * <Home />
+ * <User size={24} strokeWidth={2.5} />
+ * <Settings className="text-primary" />
+ *
+ * Common icons for finance app:
+ * - DollarSign, TrendingUp, TrendingDown
+ * - PiggyBank, Wallet, CreditCard
+ * - ArrowUpRight, ArrowDownRight
+ * - Plus, Minus, X, Check
+ * - Settings, User, LogOut
+ * - ChevronDown, ChevronUp, ChevronLeft, ChevronRight
+ * - Calendar, Clock
+ * - BarChart3, LineChart, PieChart
+ * - AlertTriangle, Info, CheckCircle2, XCircle
+ *
+ * For bold neubrutalism style, use strokeWidth={2.5} or strokeWidth={3}
+ */
+export { Home, Settings, LogOut, User, DollarSign, TrendingUp, TrendingDown, PiggyBank, Wallet, CreditCard, Banknote, Plus, Minus, X, Check, Edit, Trash2, Save, ArrowUpRight, ArrowDownRight, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Calendar, Clock, BarChart3, LineChart, PieChart, TrendingUp as ChartUp, AlertTriangle, Info, CheckCircle2, XCircle, AlertCircle, Search, Filter, Download, Upload, Eye, EyeOff, MoreVertical, MoreHorizontal, } from 'lucide-react';

package/dist/components/Icon/index.js

@@ -0,0 +1,41 @@
+/**
+ * Icon component using Lucide React
+ *
+ * Usage examples:
+ *
+ * import { Home, User, Settings } from 'lucide-react';
+ *
+ * <Home />
+ * <User size={24} strokeWidth={2.5} />
+ * <Settings className="text-primary" />
+ *
+ * Common icons for finance app:
+ * - DollarSign, TrendingUp, TrendingDown
+ * - PiggyBank, Wallet, CreditCard
+ * - ArrowUpRight, ArrowDownRight
+ * - Plus, Minus, X, Check
+ * - Settings, User, LogOut
+ * - ChevronDown, ChevronUp, ChevronLeft, ChevronRight
+ * - Calendar, Clock
+ * - BarChart3, LineChart, PieChart
+ * - AlertTriangle, Info, CheckCircle2, XCircle
+ *
+ * For bold neubrutalism style, use strokeWidth={2.5} or strokeWidth={3}
+ */
+export { 
+// Navigation
+Home, Settings, LogOut, User, 
+// Finance
+DollarSign, TrendingUp, TrendingDown, PiggyBank, Wallet, CreditCard, Banknote, 
+// Actions
+Plus, Minus, X, Check, Edit, Trash2, Save, 
+// Arrows & Chevrons
+ArrowUpRight, ArrowDownRight, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, 
+// Time
+Calendar, Clock, 
+// Charts
+BarChart3, LineChart, PieChart, TrendingUp as ChartUp, 
+// Status
+AlertTriangle, Info, CheckCircle2, XCircle, AlertCircle, 
+// Misc
+Search, Filter, Download, Upload, Eye, EyeOff, MoreVertical, MoreHorizontal, } from 'lucide-react';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    format?: (value: string | number | readonly string[] | undefined) => string;
+    validate?: (value: string | number | readonly string[] | undefined) => string | undefined;
+}
+export declare function Input({ label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};