doom-design-system 0.5.0 → 0.6.0

package/dist/components/Drawer/Drawer.module.css

@@ -1,146 +1,127 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, var(--overlay-opacity));
-  backdrop-filter: blur(var(--blur-standard));
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-  pointer-events: none;
-  z-index: var(--z-overlay);
-}
-.overlay.isOpen {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-}
-
-.panel {
-  position: fixed;
-  background-color: var(--card-bg);
-  z-index: var(--z-drawer);
-  display: flex;
-  flex-direction: column;
-  transition: transform var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  max-width: var(--drawer-width);
-  visibility: hidden;
-  border: var(--border-width) solid var(--card-border);
-}
-.panel.left {
-  left: 0;
-  /* Remove border on the edge touching the screen */
-  border-left: 0;
-  /* Standard directional shadow for left-anchored panel */
-  /* Bottom-Right shadow for left-anchored elements */
-  box-shadow: var(--spacing-2) var(--spacing-2) 0 0 var(--shadow-base);
-  border-top-right-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-  transform: translateX(calc(-100% - 20px));
-}
-.panel.right {
-  right: 0;
-  /* Remove border on the edge touching the screen */
-  border-right: 0;
-  /* Standard directional shadow for right-anchored panel */
-  /* Bottom-Left shadow for right-anchored elements */
-  box-shadow: calc(-1 * var(--spacing-2)) var(--spacing-2) 0 0 var(--shadow-base);
-  border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
-  transform: translateX(calc(100% + 20px));
-}
-.panel.isOpen {
-  visibility: visible;
-  transform: translateX(0);
-}
-.panel.solid {
-  /* ROOT CONTEXT (The Field) */
-  background-color: var(--solid-bg);
-  color: var(--solid-fg);
-  /* Root Variables */
-  --background: var(--solid-bg);
-  --foreground: var(--solid-fg);
-  --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
-  /*
-  * Standardized Brand Surface Logic
-  * Decouples Modals (Surface) from Buttons (Action)
-  */
-  --surface-brand: var(--solid-bg);
-  --surface-brand-foreground: var(--solid-fg);
-  /* SEMANTICS (True Semantic Colors) */
-  --success: var(--solid-success);
-  --success-foreground: var(--solid-fg);
-  --error: var(--solid-error);
-  --error-foreground: var(--solid-fg);
-  --warning: var(--solid-warning);
-  --warning-foreground: var(--solid-fg);
-  /* SURFACE COLORS */
-  --on-surface: var(--solid-bg);
-  --on-surface-muted: var(--solid-bg);
-  /* COMPONENT TOKENS */
-  --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --card-border: var(--solid-fg);
-  --card-foreground: var(--solid-fg);
-  /* POPOVER TOKENS */
-  --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --popover-foreground: var(--solid-bg);
-  /* INPUT TOKENS */
-  --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --border-strong: var(--solid-fg);
-  /* BUTTON TOKENS */
-  --primary: var(--solid-fg);
-  --primary-foreground: var(--solid-bg);
-  /* SECONDARY TOKENS */
-  --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
-  --secondary-foreground: var(--solid-fg);
-  /* MUTED TOKENS */
-  --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
-}
-.panel.solid .header {
-  background-color: transparent !important;
-  color: var(--solid-fg);
-}
-.panel.solid .content,
-.panel.solid .footer {
-  background-color: transparent !important;
-}
-
-.header {
-  padding: var(--spacing-6);
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  border-bottom: var(--border-width) solid var(--border-strong);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.title {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: var(--text-xl);
-  font-weight: 800;
-  min-height: var(--header-height);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.content {
-  flex: 1;
-  padding: var(--spacing-6);
-  overflow-y: auto;
-  background-color: var(--card-bg);
-}
-
-.footer {
-  padding: var(--spacing-6);
-  border-top: var(--border-width) solid var(--border-strong);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-4);
-  background-color: var(--card-bg);
-  flex-shrink: 0;
+@layer doom.components {
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, var(--overlay-opacity));
+    backdrop-filter: blur(var(--blur-standard));
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+    pointer-events: none;
+    z-index: var(--z-overlay);
+  }
+  .overlay.isOpen {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+  .panel {
+    position: fixed;
+    background-color: var(--card-bg);
+    z-index: var(--z-drawer);
+    display: flex;
+    flex-direction: column;
+    transition: transform var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: var(--drawer-width);
+    visibility: hidden;
+    border: var(--surface-border-width) solid var(--card-border);
+  }
+  .panel.left {
+    left: 0;
+    /* Remove border on the edge touching the screen */
+    border-left: 0;
+    /* Standard directional shadow for left-anchored panel */
+    box-shadow: var(--space-2) var(--space-2) 0 0 var(--shadow-base);
+    border-top-right-radius: var(--surface-radius);
+    border-bottom-right-radius: var(--surface-radius);
+    transform: translateX(calc(-100% - 20px));
+  }
+  .panel.right {
+    right: 0;
+    /* Remove border on the edge touching the screen */
+    border-right: 0;
+    /* Standard directional shadow for right-anchored panel */
+    box-shadow: calc(-1 * var(--space-2)) var(--space-2) 0 0 var(--shadow-base);
+    border-top-left-radius: var(--surface-radius);
+    border-bottom-left-radius: var(--surface-radius);
+    transform: translateX(calc(100% + 20px));
+  }
+  .panel.isOpen {
+    visibility: visible;
+    transform: translateX(0);
+  }
+  .panel.solid {
+    background-color: var(--solid-bg);
+    color: var(--solid-fg);
+    --background: var(--solid-bg);
+    --foreground: var(--solid-fg);
+    --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
+    --surface-brand: var(--solid-bg);
+    --surface-brand-foreground: var(--solid-fg);
+    --success: var(--solid-success);
+    --success-foreground: var(--solid-fg);
+    --error: var(--solid-error);
+    --error-foreground: var(--solid-fg);
+    --warning: var(--solid-warning);
+    --warning-foreground: var(--solid-fg);
+    --on-surface: var(--solid-bg);
+    --on-surface-muted: var(--solid-bg);
+    --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --card-border: var(--solid-fg);
+    --card-foreground: var(--solid-fg);
+    --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --popover-foreground: var(--solid-bg);
+    --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --border-strong: var(--solid-fg);
+    --primary: var(--solid-fg);
+    --primary-foreground: var(--solid-bg);
+    --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
+    --secondary-foreground: var(--solid-fg);
+    --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
+  }
+  .panel.solid .header {
+    background-color: transparent !important;
+    color: var(--solid-fg);
+  }
+  .panel.solid .content,
+  .panel.solid .footer {
+    background-color: transparent !important;
+  }
+  .header {
+    padding: var(--surface-padding);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-bottom: var(--surface-border-width) solid var(--border-strong);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  .title {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-size: var(--text-xl);
+    font-weight: 800;
+    min-height: var(--header-height);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .content {
+    flex: 1;
+    padding: var(--surface-padding);
+    overflow-y: auto;
+    background-color: var(--card-bg);
+  }
+  .footer {
+    padding: var(--surface-padding);
+    border-top: var(--surface-border-width) solid var(--border-strong);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-3);
+    background-color: var(--card-bg);
+    flex-shrink: 0;
+  }
 }

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

@@ -1,3 +1,4 @@
+import type { ControlSize } from "../../styles/types";
 interface DropdownItemType {
     label: string;
     onClick: () => void;
@@ -6,7 +7,8 @@ interface DropdownProps {
     triggerLabel: string;
     items: DropdownItemType[];
     variant?: "primary" | "secondary";
+    size?: ControlSize;
     className?: string;
 }
-export declare function Dropdown({ triggerLabel, items, variant, className, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown({ triggerLabel, items, variant, size, className, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dropdown/Dropdown.js

@@ -5,10 +5,10 @@ import { useState } from "react";
 import { Button } from "../Button/Button.js";
 import { Popover } from "../Popover/Popover.js";
 import styles from "./Dropdown.module.css";
-export function Dropdown({ triggerLabel, items, variant = "primary", className, }) {
+export function Dropdown({ triggerLabel, items, variant = "primary", size = "md", className, }) {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx(Popover, { content: _jsx("div", { className: styles.menu, children: items.map((item, index) => (_jsx("button", { className: styles.item, onClick: () => {
+    return (_jsx(Popover, { content: _jsx("div", { className: clsx(styles.menu, size !== "md" && styles[size]), children: items.map((item, index) => (_jsx("button", { className: styles.item, onClick: () => {
                     item.onClick();
                     setIsOpen(false);
-                }, children: item.label }, index))) }), isOpen: isOpen, placement: "bottom-start", trigger: _jsxs(Button, { "aria-expanded": isOpen, className: clsx(styles.trigger, className), variant: variant, onClick: () => setIsOpen(!isOpen), children: [triggerLabel, " ", _jsx("span", { style: { marginLeft: "0.5rem", fontSize: "0.8em" }, children: "\u25BC" })] }), onClose: () => setIsOpen(false) }));
+                }, children: item.label }, index))) }), isOpen: isOpen, placement: "bottom-start", trigger: _jsxs(Button, { "aria-expanded": isOpen, className: clsx(styles.trigger, className), size: size, variant: variant, onClick: () => setIsOpen(!isOpen), children: [triggerLabel, " ", _jsx("span", { style: { marginLeft: "0.5rem", fontSize: "0.8em" }, children: "\u25BC" })] }), onClose: () => setIsOpen(false) }));
 }

package/dist/components/Dropdown/Dropdown.module.css

@@ -1,33 +1,53 @@
-.menu {
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--primary);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hover);
-  min-width: var(--spacing-56);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-1);
-}
-
-.item {
-  text-align: left;
-  padding: var(--spacing-3) var(--spacing-4);
-  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;
-}
-.item:hover {
-  background-color: color-mix(in srgb, var(--primary), transparent 85%);
-  color: var(--primary);
-}
-
-.trigger[aria-expanded=true] {
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-hover);
+@layer doom.components {
+  .menu {
+    background: var(--card-bg);
+    border: var(--surface-border-width) solid var(--primary);
+    border-radius: var(--control-radius);
+    box-shadow: var(--shadow-lg);
+    min-width: 20ch;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-1);
+  }
+  .item {
+    text-align: left;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    background: transparent;
+    border: none;
+    color: var(--foreground);
+    cursor: pointer;
+    border-radius: calc(var(--control-radius) - var(--surface-border-width));
+    font-size: var(--control-font-size);
+    transition: background-color var(--duration-fast) var(--ease-in-out);
+  }
+  .item:hover {
+    background-color: color-mix(in srgb, var(--primary), transparent 85%);
+    color: var(--primary);
+  }
+  .trigger[aria-expanded=true] {
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-lg);
+    border-color: var(--card-border);
+  }
+  /* Sizes */
+  .sm {
+    --control-height: var(--size-7);
+    --control-padding-x: var(--space-2);
+    --control-padding-y: var(--space-1);
+    --control-font-size: var(--text-xs);
+    --control-icon-size: var(--size-4);
+    --control-gap: var(--space-1);
+    --control-radius: var(--radius-sm);
+  }
+  .lg {
+    --control-height: var(--size-10);
+    --control-padding-x: var(--space-4);
+    --control-padding-y: var(--space-2);
+    --control-font-size: var(--text-base);
+    --control-icon-size: var(--size-5);
+    --control-gap: var(--space-2);
+    --control-radius: var(--radius-md);
+  }
 }

package/dist/components/FileUpload/FileUpload.js

@@ -91,6 +91,26 @@ export const FileUpload = ({ label, helperText, accept, maxSize, multiple = fals
             setPreviews((prev) => (Object.assign(Object.assign({}, prev), { [file.name]: url })));
         }
     }, [showPreview]);
+    const isFileAccepted = (file) => {
+        if (!accept)
+            return true;
+        const acceptedTypes = accept.split(",").map((t) => t.trim().toLowerCase());
+        const fileName = file.name.toLowerCase();
+        const mimeType = file.type.toLowerCase();
+        return acceptedTypes.some((type) => {
+            // Extension match: ".pdf", ".doc"
+            if (type.startsWith(".")) {
+                return fileName.endsWith(type);
+            }
+            // Wildcard MIME: "image/*", "video/*"
+            if (type.endsWith("/*")) {
+                const category = type.slice(0, -2);
+                return mimeType.startsWith(category + "/");
+            }
+            // Exact MIME: "application/pdf"
+            return mimeType === type;
+        });
+    };
     const validateFiles = (fileList) => {
         if (!fileList) {
             return [];
@@ -98,6 +118,10 @@ export const FileUpload = ({ label, helperText, accept, maxSize, multiple = fals
         const validFiles = [];
         setUploadError("");
         Array.from(fileList).forEach((file) => {
+            if (!isFileAccepted(file)) {
+                setUploadError(`File "${file.name}" is not an accepted file type`);
+                return;
+            }
             if (maxSize && file.size > maxSize) {
                 setUploadError(`File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`);
                 return;