doom-design-system 0.1.7 → 0.1.8

package/dist/components/Modal/Modal.module.css

@@ -0,0 +1,57 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
+  backdrop-filter: blur(4px);
+  background-color: rgba(0, 0, 0, var(--overlay-opacity));
+  animation: fadeIn 0.2s ease-out;
+}
+
+.contentContainer {
+  width: 100%;
+  max-width: 28rem;
+  animation: slideUp 0.3s ease-out;
+}
+
+.header {
+  padding: var(--spacing-lg);
+  border-bottom: var(--border-width) solid var(--card-border);
+  background: var(--background);
+}
+.header h2 {
+  font-size: var(--text-xl);
+  font-weight: bold;
+  margin: 0;
+}
+
+.body {
+  padding: var(--spacing-lg);
+}
+
+.footer {
+  padding: var(--spacing-lg);
+  border-top: var(--border-width) solid var(--card-border);
+  background: var(--background);
+}

package/dist/components/Page/Page.js

@@ -1,27 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const PageContainer = styled.main `
-  flex: 1;
-  width: 100%;
-  
-  /* Variant Styles */
-  ${props => props.variant === 'default' ? `
-    width: 90%;
-    max-width: 1920px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
-
-    @media (max-width: 1024px) {
-      width: 95%;
-      padding: 1rem;
-    }
-  ` : `
-    max-width: 100%;
-    margin: 0;
-    padding: 0;
-  `}
-`;
+import clsx from 'clsx';
+import styles from './Page.module.css';
 export function Page({ children, variant = 'default', className, style }) {
-    return (_jsx(PageContainer, { variant: variant, className: className, style: style, children: children }));
+    return (_jsx("main", { className: clsx(styles.container, styles[variant], className), style: style, children: children }));
 }

package/dist/components/Page/Page.module.css

@@ -0,0 +1,23 @@
+.container {
+  flex: 1;
+  width: 100%;
+}
+
+.default {
+  width: 90%;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+@media (max-width: 1024px) {
+  .default {
+    width: 95%;
+    padding: 1rem;
+  }
+}
+
+.fullWidth {
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}

package/dist/components/Pagination/Pagination.js

@@ -1,46 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
+import clsx from 'clsx';
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-const PaginationNav = styled.nav `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-`;
-const PageButton = styled.button `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  background-color: ${props => props.isActive ? 'var(--primary)' : 'var(--card-bg)'};
-  color: ${props => props.isActive ? 'var(--primary-foreground)' : 'var(--foreground)'};
-  font-family: var(--font-heading);
-  font-weight: 700;
-  cursor: pointer;
-  box-shadow: ${props => props.isActive ? 'var(--shadow-sm)' : 'none'};
-
-  &:hover:not(:disabled) {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-sm);
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-  }
-
-  &:active:not(:disabled) {
-    transform: translate(0, 0);
-    box-shadow: none;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background-color: var(--muted);
-  }
-`;
+import styles from './Pagination.module.css';
 export function Pagination({ currentPage, totalPages, onPageChange, className }) {
     const handlePageChange = (page) => {
         if (page >= 1 && page <= totalPages && page !== currentPage) {
@@ -87,8 +49,8 @@ export function Pagination({ currentPage, totalPages, onPageChange, className })
                 return (_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: _jsx(MoreHorizontal, { size: 20 }) }, `ellipsis-${index}`));
             }
             const pageNum = page;
-            return (_jsx(PageButton, { isActive: currentPage === pageNum, onClick: () => handlePageChange(pageNum), "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum));
+            return (_jsx("button", { className: clsx(styles.button, currentPage === pageNum && styles.active), onClick: () => handlePageChange(pageNum), "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum));
         });
     };
-    return (_jsxs(PaginationNav, { "aria-label": "pagination", className: className, children: [_jsx(PageButton, { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeft, { size: 20, strokeWidth: 2.5 }) }), renderPageNumbers(), _jsx(PageButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, "aria-label": "Go to next page", children: _jsx(ChevronRight, { size: 20, strokeWidth: 2.5 }) })] }));
+    return (_jsxs("nav", { "aria-label": "pagination", className: clsx(styles.nav, className), children: [_jsx("button", { className: styles.button, onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeft, { size: 20, strokeWidth: 2.5 }) }), renderPageNumbers(), _jsx("button", { className: styles.button, onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, "aria-label": "Go to next page", children: _jsx(ChevronRight, { size: 20, strokeWidth: 2.5 }) })] }));
 }

package/dist/components/Pagination/Pagination.module.css

@@ -0,0 +1,43 @@
+.nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  background-color: var(--card-bg);
+  color: var(--foreground);
+  font-family: var(--font-heading);
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: none;
+  transition: all 0.2s ease;
+}
+.button:hover:not(:disabled) {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-sm);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.button:active:not(:disabled) {
+  transform: translate(0, 0);
+  box-shadow: none;
+}
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--muted);
+}
+.button.active {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: var(--shadow-sm);
+}

package/dist/components/Popover/Popover.js

@@ -1,12 +1,8 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { keyframes } from '@emotion/react';
-const popoverScale = keyframes `
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-`;
+import styles from './Popover.module.css';
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom-start', offset = 8 }) {
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
@@ -22,6 +18,8 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
         let top = 0;
         let left = 0;
         let origin = 'top center';
+        // Edge Config
+        const padding = 16;
         const isTop = placement.startsWith('top');
         if (isTop) {
             top = triggerRect.top - contentRect.height - offset;
@@ -37,8 +35,24 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
             if (top + contentRect.height > viewportHeight) {
                 top = triggerRect.top - contentRect.height - offset;
                 origin = 'bottom';
+                if (top < 0)
+                    top = padding;
             }
         }
+        // Vertical Clamping (Fail-safe)
+        if (top < padding) {
+            top = padding;
+        }
+        if (top + contentRect.height > viewportHeight - padding) {
+            top = viewportHeight - contentRect.height - padding;
+        }
+        // Horizontal Clamping
+        if (left + contentRect.width > viewportWidth - padding) {
+            left = viewportWidth - contentRect.width - padding;
+        }
+        if (left < padding) {
+            left = padding;
+        }
         const align = placement.split('-')[1];
         if (align === 'start') {
             left = triggerRect.left;
@@ -52,22 +66,6 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
             left = triggerRect.left + (triggerRect.width / 2) - (contentRect.width / 2);
             origin += ' center';
         }
-        // Edge Config
-        const padding = 16;
-        // Horizontal Clamping
-        if (left + contentRect.width > viewportWidth - padding) {
-            left = viewportWidth - contentRect.width - padding;
-        }
-        if (left < padding) {
-            left = padding;
-        }
-        // Vertical Clamping (Fail-safe)
-        if (top < padding) {
-            top = padding;
-        }
-        if (top + contentRect.height > viewportHeight - padding) {
-            top = viewportHeight - contentRect.height - padding;
-        }
         setPosition({ top, left });
         setTransformOrigin(origin);
     }, [isOpen, placement, offset]);
@@ -98,12 +96,9 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, [isOpen, onClose]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, style: { display: 'inline-block' }, children: trigger }), isOpen && typeof document !== 'undefined' && createPortal(_jsx("div", { ref: contentRef, style: {
-                    position: 'fixed',
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: styles.triggerWrapper, children: trigger }), isOpen && typeof document !== 'undefined' && createPortal(_jsx("div", { ref: contentRef, className: styles.popover, style: {
                     top: position.top,
                     left: position.left,
-                    zIndex: 9999, // High z-index to ensure it's on top
                     transformOrigin: transformOrigin,
-                    animation: `${popoverScale} 0.1s ease-out`,
                 }, children: content }), document.body)] }));
 }

package/dist/components/Popover/Popover.module.css

@@ -0,0 +1,19 @@
+.popover {
+  position: fixed;
+  z-index: 9999;
+  animation: popoverScale 0.1s ease-out;
+}
+
+@keyframes popoverScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.triggerWrapper {
+  display: inline-block;
+}

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,42 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const StyledContainer = styled.div `
-  height: ${props => typeof props.height === 'number' ? `${props.height}px` : props.height};
-  width: 100%;
-  background: var(--card-bg);
-  border-radius: var(--radius);
-  overflow: hidden;
-  border: var(--border-width) solid var(--card-border);
-  position: relative;
-`;
-const StyledFill = styled.div `
-  height: 100%;
-  width: ${props => props.percentage}%;
-  background: ${props => props.color};
-  border-right: ${props => props.percentage < 100 ? `var(--border-width) solid var(--card-border)` : 'none'};
-  transition: width 0.5s ease-out;
-`;
-const StyledStripes = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: linear-gradient(
-    45deg, 
-    rgba(0, 0, 0, 0.05) 25%, 
-    transparent 25%, 
-    transparent 50%, 
-    rgba(0, 0, 0, 0.05) 50%, 
-    rgba(0, 0, 0, 0.05) 75%, 
-    transparent 75%, 
-    transparent
-  );
-  background-size: 20px 20px;
-  pointer-events: none;
-`;
+import clsx from 'clsx';
+import styles from './ProgressBar.module.css';
 export function ProgressBar({ value, max = 100, height = '24px', color = 'var(--primary)', showStripes = true, className, style }) {
     const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-    return (_jsxs(StyledContainer, { height: height, className: className, style: style, children: [_jsx(StyledFill, { percentage: percentage, color: color }), showStripes && _jsx(StyledStripes, {})] }));
+    const heightStyle = typeof height === 'number' ? `${height}px` : height;
+    return (_jsxs("div", { className: clsx(styles.container, className), style: Object.assign({ '--height': heightStyle }, style), children: [_jsx("div", { className: styles.fill, style: {
+                    '--percentage': `${percentage}%`,
+                    '--color': color
+                }, "data-complete": percentage >= 100 }), showStripes && _jsx("div", { className: styles.stripes })] }));
 }

package/dist/components/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,31 @@
+.container {
+  height: var(--height, 24px);
+  width: 100%;
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: var(--border-width) solid var(--card-border);
+  position: relative;
+}
+
+.fill {
+  height: 100%;
+  width: var(--percentage, 0%);
+  background: var(--color, var(--primary));
+  border-right: var(--border-width) solid var(--card-border);
+  transition: width 0.5s ease-out;
+}
+.fill[data-complete=true] {
+  border-right: none;
+}
+
+.stripes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent);
+  background-size: 20px 20px;
+  pointer-events: none;
+}

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,83 +1,8 @@
 '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;
-`;
+import clsx from 'clsx';
+import styles from './RadioGroup.module.css';
 const RadioGroupContext = createContext(undefined);
 export function RadioGroup({ name, value: controlledValue, defaultValue, onValueChange, disabled, children, className }) {
     const [internalValue, setInternalValue] = React.useState(defaultValue || '');
@@ -89,7 +14,7 @@ export function RadioGroup({ name, value: controlledValue, defaultValue, onValue
         }
         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 }) }));
+    return (_jsx(RadioGroupContext.Provider, { value: { name, value: currentValue, onChange: handleChange, disabled }, children: _jsx("div", { role: "radiogroup", className: clsx(styles.group, className), children: children }) }));
 }
 export function RadioGroupItem({ value, children, disabled, className }) {
     const context = useContext(RadioGroupContext);
@@ -97,5 +22,5 @@ export function RadioGroupItem({ value, children, disabled, className }) {
         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 })] }));
+    return (_jsxs("label", { className: clsx(styles.itemLabel, isDisabled && styles.disabled, className), "aria-disabled": isDisabled, children: [_jsx("input", { className: styles.hiddenInput, type: "radio", name: context.name, value: value, checked: checked, onChange: () => !isDisabled && context.onChange(value), disabled: isDisabled }), _jsx("div", { className: clsx(styles.radioCircle, checked && styles.checked), "aria-hidden": "true", children: checked && _jsx("div", { className: styles.innerDot }) }), _jsx("span", { className: styles.labelText, children: children })] }));
 }

package/dist/components/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,81 @@
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.itemLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  position: relative;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  transition: all 0.15s ease;
+  opacity: 1;
+}
+.itemLabel:hover:not([aria-disabled=true]) {
+  background-color: var(--muted);
+  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
+}
+.itemLabel.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.radioCircle {
+  width: 22px;
+  height: 22px;
+  border: 2px solid 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;
+}
+.radioCircle.checked {
+  border-color: var(--primary);
+  background: var(--primary);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
+}
+
+.innerDot {
+  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);
+  }
+}
+.hiddenInput {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+.hiddenInput:focus-visible ~ .radioCircle {
+  outline: var(--outline-width) solid var(--primary);
+  outline-offset: var(--outline-offset);
+}
+
+.labelText {
+  font-family: var(--font-body);
+  font-weight: 500;
+  font-size: var(--text-base);
+  color: var(--foreground);
+  user-select: none;
+}