doom-design-system 0.1.1 → 0.1.4

package/dist/components/Textarea/Textarea.js

@@ -1,25 +1,18 @@
 'use client';
 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);
-  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);
-  }
+  ${baseInteractiveStyles}
+  ${focusStyles}
 
   &::placeholder {
     color: var(--muted);

package/dist/components/Toast/Toast.js

@@ -23,7 +23,7 @@ const ToastItem = styled.div `
   border: var(--border-width) solid var(--card-border);
   color: var(--foreground);
   box-shadow: var(--shadow-hard);
-  padding: 1rem;
+  padding: var(--spacing-md);
   display: flex;
   align-items: center;
   gap: 0.75rem;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TooltipProps {
+    content: string;
+    children: React.ReactNode;
+    delay?: number;
+    placement?: 'top' | 'bottom';
+}
+export declare function Tooltip({ content, children, delay, placement }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { Popover } from '../Popover';
+const TooltipTriggerWrapper = styled.div `
+  display: inline-block;
+  cursor: help; /* Optional hint */
+`;
+const TooltipBody = styled.div `
+  padding: 0.5rem 0.75rem;
+  background-color: var(--foreground);
+  color: var(--background);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: var(--radius);
+  border: var(--border-width) solid var(--card-border);
+  box-shadow: var(--shadow-sm);
+  z-index: var(--z-tooltip);
+`;
+export function Tooltip({ content, children, delay = 200, placement = 'top' }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [timeoutId, setTimeoutId] = useState(null);
+    const show = () => {
+        const id = setTimeout(() => setIsVisible(true), delay);
+        setTimeoutId(id);
+    };
+    const hide = () => {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        setIsVisible(false);
+    };
+    // Map simplified placement to Popover placement
+    const popoverPlacement = placement === 'top' ? 'top-center' : 'bottom-center';
+    return (_jsx(Popover, { isOpen: isVisible, onClose: hide, placement: popoverPlacement, offset: 8, trigger: _jsx(TooltipTriggerWrapper, { onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: children }), content: _jsx(TooltipBody, { role: "tooltip", children: content }) }));
+}

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

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

package/dist/components/Tooltip/index.js

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

package/dist/index.d.ts

@@ -19,5 +19,17 @@ export * from './components/Textarea';
 export * from './components/Toast';
 export * from './components/ActionRow';
 export * from './components/Skeleton';
+export * from './components/Switch';
+export * from './components/Alert';
+export * from './components/Tooltip';
+export * from './components/Avatar';
+export * from './components/Label';
+export * from './components/Accordion';
+export * from './components/Breadcrumbs';
+export * from './components/Pagination';
+export * from './components/RadioGroup';
+export * from './components/Slider';
+export * from './components/Drawer';
+export * from './components/Sheet';
 export * from './DesignSystemProvider';
 export * from './styles/themes';

package/dist/index.js

@@ -19,5 +19,17 @@ export * from './components/Textarea';
 export * from './components/Toast';
 export * from './components/ActionRow';
 export * from './components/Skeleton';
+export * from './components/Switch';
+export * from './components/Alert';
+export * from './components/Tooltip';
+export * from './components/Avatar';
+export * from './components/Label';
+export * from './components/Accordion';
+export * from './components/Breadcrumbs';
+export * from './components/Pagination';
+export * from './components/RadioGroup';
+export * from './components/Slider';
+export * from './components/Drawer';
+export * from './components/Sheet';
 export * from './DesignSystemProvider';
 export * from './styles/themes';

package/dist/styles/mixins.d.ts

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

package/dist/styles/mixins.js

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+export const baseInteractiveStyles = css `
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  transition: all 0.1s ease;
+  outline: none;
+`;
+export const focusStyles = css `
+  &:focus, &:focus-visible, &[aria-expanded="true"] {
+    outline: none;
+    transform: translate(-2px, -2px);
+    box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+    border-color: var(--primary);
+  }
+`;
+export const errorStyles = css `
+  border-color: var(--error);
+  box-shadow: 5px 5px 0px 0px var(--shadow-error);
+
+  &:focus, &:focus-visible {
+    border-color: var(--error);
+    box-shadow: 7px 7px 0px 0px var(--shadow-error);
+  }
+`;

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

@@ -9,6 +9,7 @@ export declare const themes: {
             readonly '--primary': "#a855f7";
             readonly '--primary-hover': "#9333ea";
             readonly '--primary-foreground': "#000000";
+            readonly '--shadow-primary': "#7e22ce";
             readonly '--secondary': "#fbbf24";
             readonly '--secondary-foreground': "#000000";
             readonly '--accent': "#ec4899";
@@ -17,6 +18,7 @@ export declare const themes: {
             readonly '--success': "#22c55e";
             readonly '--warning': "#f59e0b";
             readonly '--error': "#ef4444";
+            readonly '--shadow-error': "#b91c1c";
             readonly '--border-width': "3px";
             readonly '--radius': "8px";
             readonly '--shadow-hard': "5px 5px 0px 0px #000000";
@@ -43,12 +45,38 @@ export declare const themes: {
             readonly '--font-bold': string;
             readonly '--font-extrabold': string;
             readonly '--font-black': string;
+            readonly '--spacing-xs': string;
+            readonly '--spacing-sm': string;
+            readonly '--spacing-md': string;
+            readonly '--spacing-lg': string;
+            readonly '--spacing-xl': string;
+            readonly '--spacing-2xl': string;
             readonly '--z-base': string;
             readonly '--z-elevated': string;
             readonly '--z-header': string;
             readonly '--z-dropdown': string;
             readonly '--z-modal': string;
             readonly '--z-tooltip': string;
+            readonly '--duration-fast': string;
+            readonly '--duration-normal': string;
+            readonly '--duration-slow': string;
+            readonly '--ease-in-out': string;
+            readonly '--ease-out': string;
+            readonly '--ease-in': string;
+            readonly '--radius-pill': string;
+            readonly '--radius-full': string;
+            readonly '--outline-width': string;
+            readonly '--outline-offset': string;
+            readonly '--overlay-opacity': string;
+            readonly '--size-icon-sm': string;
+            readonly '--size-icon-md': string;
+            readonly '--size-icon-lg': string;
+            readonly '--size-touch-target': string;
+            readonly '--shadow-sm': string;
+            readonly '--shadow-sm-hover': string;
+            readonly '--shadow-sm-checked': string;
+            readonly '--shadow-sm-checked-hover': string;
+            readonly '--shadow-lg': string;
         };
     };
     readonly doom: {
@@ -61,6 +89,7 @@ export declare const themes: {
             readonly '--primary': "#10b981";
             readonly '--primary-hover': "#059669";
             readonly '--primary-foreground': "#020617";
+            readonly '--shadow-primary': "#000000";
             readonly '--secondary': "#334155";
             readonly '--secondary-foreground': "#f8fafc";
             readonly '--accent': "#fbbf24";
@@ -69,6 +98,7 @@ export declare const themes: {
             readonly '--success': "#10b981";
             readonly '--warning': "#fbbf24";
             readonly '--error': "#ef4444";
+            readonly '--shadow-error': "#000000";
             readonly '--border-width': "2px";
             readonly '--radius': "2px";
             readonly '--shadow-hard': "5px 5px 0px 0px #000000";
@@ -95,12 +125,38 @@ export declare const themes: {
             readonly '--font-bold': string;
             readonly '--font-extrabold': string;
             readonly '--font-black': string;
+            readonly '--spacing-xs': string;
+            readonly '--spacing-sm': string;
+            readonly '--spacing-md': string;
+            readonly '--spacing-lg': string;
+            readonly '--spacing-xl': string;
+            readonly '--spacing-2xl': string;
             readonly '--z-base': string;
             readonly '--z-elevated': string;
             readonly '--z-header': string;
             readonly '--z-dropdown': string;
             readonly '--z-modal': string;
             readonly '--z-tooltip': string;
+            readonly '--duration-fast': string;
+            readonly '--duration-normal': string;
+            readonly '--duration-slow': string;
+            readonly '--ease-in-out': string;
+            readonly '--ease-out': string;
+            readonly '--ease-in': string;
+            readonly '--radius-pill': string;
+            readonly '--radius-full': string;
+            readonly '--outline-width': string;
+            readonly '--outline-offset': string;
+            readonly '--overlay-opacity': string;
+            readonly '--size-icon-sm': string;
+            readonly '--size-icon-md': string;
+            readonly '--size-icon-lg': string;
+            readonly '--size-touch-target': string;
+            readonly '--shadow-sm': string;
+            readonly '--shadow-sm-hover': string;
+            readonly '--shadow-sm-checked': string;
+            readonly '--shadow-sm-checked-hover': string;
+            readonly '--shadow-lg': string;
         };
     };
     readonly neighbor: {
@@ -113,6 +169,7 @@ export declare const themes: {
             readonly '--primary': "#002D72";
             readonly '--primary-hover': "#1E3A8A";
             readonly '--primary-foreground': "#FFFFFF";
+            readonly '--shadow-primary': "#001533";
             readonly '--secondary': "#B91C1C";
             readonly '--secondary-foreground': "#FFFFFF";
             readonly '--accent': "#C0C0C0";
@@ -121,6 +178,7 @@ export declare const themes: {
             readonly '--success': "#15803D";
             readonly '--warning': "#B45309";
             readonly '--error': "#B91C1C";
+            readonly '--shadow-error': "#7f1d1d";
             readonly '--border-width': "3px";
             readonly '--radius': "8px";
             readonly '--shadow-hard': "6px 6px 0px 0px #0F172A";
@@ -147,12 +205,38 @@ export declare const themes: {
             readonly '--font-bold': string;
             readonly '--font-extrabold': string;
             readonly '--font-black': string;
+            readonly '--spacing-xs': string;
+            readonly '--spacing-sm': string;
+            readonly '--spacing-md': string;
+            readonly '--spacing-lg': string;
+            readonly '--spacing-xl': string;
+            readonly '--spacing-2xl': string;
             readonly '--z-base': string;
             readonly '--z-elevated': string;
             readonly '--z-header': string;
             readonly '--z-dropdown': string;
             readonly '--z-modal': string;
             readonly '--z-tooltip': string;
+            readonly '--duration-fast': string;
+            readonly '--duration-normal': string;
+            readonly '--duration-slow': string;
+            readonly '--ease-in-out': string;
+            readonly '--ease-out': string;
+            readonly '--ease-in': string;
+            readonly '--radius-pill': string;
+            readonly '--radius-full': string;
+            readonly '--outline-width': string;
+            readonly '--outline-offset': string;
+            readonly '--overlay-opacity': string;
+            readonly '--size-icon-sm': string;
+            readonly '--size-icon-md': string;
+            readonly '--size-icon-lg': string;
+            readonly '--size-touch-target': string;
+            readonly '--shadow-sm': string;
+            readonly '--shadow-sm-hover': string;
+            readonly '--shadow-sm-checked': string;
+            readonly '--shadow-sm-checked-hover': string;
+            readonly '--shadow-lg': string;
         };
     };
     readonly vigilante: {
@@ -165,6 +249,7 @@ export declare const themes: {
             readonly '--primary': "#F7B731";
             readonly '--primary-hover': "#F5A623";
             readonly '--primary-foreground': "#0F1419";
+            readonly '--shadow-primary': "#000000";
             readonly '--secondary': "#4A5568";
             readonly '--secondary-foreground': "#E8E9ED";
             readonly '--accent': "#3B82F6";
@@ -173,6 +258,7 @@ export declare const themes: {
             readonly '--success': "#48BB78";
             readonly '--warning': "#ED8936";
             readonly '--error': "#F56565";
+            readonly '--shadow-error': "#000000";
             readonly '--border-width': "2px";
             readonly '--radius': "6px";
             readonly '--shadow-hard': "5px 5px 0px 0px #000000";
@@ -199,12 +285,38 @@ export declare const themes: {
             readonly '--font-bold': string;
             readonly '--font-extrabold': string;
             readonly '--font-black': string;
+            readonly '--spacing-xs': string;
+            readonly '--spacing-sm': string;
+            readonly '--spacing-md': string;
+            readonly '--spacing-lg': string;
+            readonly '--spacing-xl': string;
+            readonly '--spacing-2xl': string;
             readonly '--z-base': string;
             readonly '--z-elevated': string;
             readonly '--z-header': string;
             readonly '--z-dropdown': string;
             readonly '--z-modal': string;
             readonly '--z-tooltip': string;
+            readonly '--duration-fast': string;
+            readonly '--duration-normal': string;
+            readonly '--duration-slow': string;
+            readonly '--ease-in-out': string;
+            readonly '--ease-out': string;
+            readonly '--ease-in': string;
+            readonly '--radius-pill': string;
+            readonly '--radius-full': string;
+            readonly '--outline-width': string;
+            readonly '--outline-offset': string;
+            readonly '--overlay-opacity': string;
+            readonly '--size-icon-sm': string;
+            readonly '--size-icon-md': string;
+            readonly '--size-icon-lg': string;
+            readonly '--size-touch-target': string;
+            readonly '--shadow-sm': string;
+            readonly '--shadow-sm-hover': string;
+            readonly '--shadow-sm-checked': string;
+            readonly '--shadow-sm-checked-hover': string;
+            readonly '--shadow-lg': string;
         };
     };
 };

package/dist/styles/themes/definitions.js

@@ -20,6 +20,13 @@ const baseVariables = {
     '--font-bold': '700',
     '--font-extrabold': '800',
     '--font-black': '900',
+    // Spacing Scale
+    '--spacing-xs': '0.25rem',
+    '--spacing-sm': '0.5rem',
+    '--spacing-md': '1rem',
+    '--spacing-lg': '1.5rem',
+    '--spacing-xl': '2rem',
+    '--spacing-2xl': '3rem',
     // Z-Indices
     '--z-base': '0',
     '--z-elevated': '10',
@@ -27,22 +34,48 @@ const baseVariables = {
     '--z-dropdown': '50',
     '--z-modal': '100',
     '--z-tooltip': '200',
+    // Motion
+    '--duration-fast': '150ms',
+    '--duration-normal': '250ms',
+    '--duration-slow': '350ms',
+    '--ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    '--ease-out': 'cubic-bezier(0.0, 0, 0.2, 1)',
+    '--ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    // Border Radius
+    '--radius-pill': '9999px',
+    '--radius-full': '50%',
+    // Outline
+    '--outline-width': '2px',
+    '--outline-offset': '2px',
+    // Overlay
+    '--overlay-opacity': '0.5',
+    // Common Sizes
+    '--size-icon-sm': '20px',
+    '--size-icon-md': '24px',
+    '--size-icon-lg': '32px',
+    '--size-touch-target': '44px',
+    // Shadows (consistent relative to theme colors)
+    '--shadow-sm': '2px 2px 0px 0px var(--card-border)',
+    '--shadow-sm-hover': '3px 3px 0px 0px var(--card-border)',
+    '--shadow-sm-checked': '3px 3px 0px 0px var(--card-border)',
+    '--shadow-sm-checked-hover': '4px 4px 0px 0px var(--card-border)',
+    '--shadow-lg': '8px 8px 0px 0px var(--card-border)',
 };
 export const themes = {
     default: {
         name: 'Default',
-        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#e0e7ff', '--foreground': '#000000', '--card-bg': '#ffffff', '--card-border': '#000000', '--primary': '#a855f7', '--primary-hover': '#9333ea', '--primary-foreground': '#000000', '--secondary': '#fbbf24', '--secondary-foreground': '#000000', '--accent': '#ec4899', '--muted': '#94a3b8', '--muted-foreground': '#334155', '--success': '#22c55e', '--warning': '#f59e0b', '--error': '#ef4444', '--border-width': '3px', '--radius': '8px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '900' })
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#e0e7ff', '--foreground': '#000000', '--card-bg': '#ffffff', '--card-border': '#000000', '--primary': '#a855f7', '--primary-hover': '#9333ea', '--primary-foreground': '#000000', '--shadow-primary': '#7e22ce', '--secondary': '#fbbf24', '--secondary-foreground': '#000000', '--accent': '#ec4899', '--muted': '#94a3b8', '--muted-foreground': '#334155', '--success': '#22c55e', '--warning': '#f59e0b', '--error': '#ef4444', '--shadow-error': '#b91c1c', '--border-width': '3px', '--radius': '8px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '900' })
     },
     doom: {
         name: 'DOOMSDAY',
-        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#020617', '--foreground': '#e2e8f0', '--card-bg': '#0f172a', '--card-border': '#1e293b', '--primary': '#10b981', '--primary-hover': '#059669', '--primary-foreground': '#020617', '--secondary': '#334155', '--secondary-foreground': '#f8fafc', '--accent': '#fbbf24', '--muted': '#64748b', '--muted-foreground': '#94a3b8', '--success': '#10b981', '--warning': '#fbbf24', '--error': '#ef4444', '--border-width': '2px', '--radius': '2px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '700' })
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#020617', '--foreground': '#e2e8f0', '--card-bg': '#0f172a', '--card-border': '#1e293b', '--primary': '#10b981', '--primary-hover': '#059669', '--primary-foreground': '#020617', '--shadow-primary': '#000000', '--secondary': '#334155', '--secondary-foreground': '#f8fafc', '--accent': '#fbbf24', '--muted': '#64748b', '--muted-foreground': '#94a3b8', '--success': '#10b981', '--warning': '#fbbf24', '--error': '#ef4444', '--shadow-error': '#000000', '--border-width': '2px', '--radius': '2px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '700' })
     },
     neighbor: {
         name: 'THE CAPTAIN',
-        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#F8FAFC', '--foreground': '#0F172A', '--card-bg': '#FFFFFF', '--card-border': '#002D72', '--primary': '#002D72', '--primary-hover': '#1E3A8A', '--primary-foreground': '#FFFFFF', '--secondary': '#B91C1C', '--secondary-foreground': '#FFFFFF', '--accent': '#C0C0C0', '--muted': '#64748B', '--muted-foreground': '#475569', '--success': '#15803D', '--warning': '#B45309', '--error': '#B91C1C', '--border-width': '3px', '--radius': '8px', '--shadow-hard': '6px 6px 0px 0px #0F172A', '--shadow-hover': '8px 8px 0px 0px #0F172A', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '900' })
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#F8FAFC', '--foreground': '#0F172A', '--card-bg': '#FFFFFF', '--card-border': '#002D72', '--primary': '#002D72', '--primary-hover': '#1E3A8A', '--primary-foreground': '#FFFFFF', '--shadow-primary': '#001533', '--secondary': '#B91C1C', '--secondary-foreground': '#FFFFFF', '--accent': '#C0C0C0', '--muted': '#64748B', '--muted-foreground': '#475569', '--success': '#15803D', '--warning': '#B45309', '--error': '#B91C1C', '--shadow-error': '#7f1d1d', '--border-width': '3px', '--radius': '8px', '--shadow-hard': '6px 6px 0px 0px #0F172A', '--shadow-hover': '8px 8px 0px 0px #0F172A', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '900' })
     },
     vigilante: {
         name: 'DARK KNIGHT',
-        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#0F1419', '--foreground': '#E8E9ED', '--card-bg': '#1A1F29', '--card-border': '#2D3748', '--primary': '#F7B731', '--primary-hover': '#F5A623', '--primary-foreground': '#0F1419', '--secondary': '#4A5568', '--secondary-foreground': '#E8E9ED', '--accent': '#3B82F6', '--muted': '#718096', '--muted-foreground': '#A0AEC0', '--success': '#48BB78', '--warning': '#ED8936', '--error': '#F56565', '--border-width': '2px', '--radius': '6px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '700' })
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#0F1419', '--foreground': '#E8E9ED', '--card-bg': '#1A1F29', '--card-border': '#2D3748', '--primary': '#F7B731', '--primary-hover': '#F5A623', '--primary-foreground': '#0F1419', '--shadow-primary': '#000000', '--secondary': '#4A5568', '--secondary-foreground': '#E8E9ED', '--accent': '#3B82F6', '--muted': '#718096', '--muted-foreground': '#A0AEC0', '--success': '#48BB78', '--warning': '#ED8936', '--error': '#F56565', '--shadow-error': '#000000', '--border-width': '2px', '--radius': '6px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '700' })
     }
 };