doom-design-system 0.5.0 → 0.6.0

package/dist/components/Slat/Slat.module.css

@@ -1,101 +1,100 @@
-.slat {
-  background-color: var(--card-bg);
-  border: var(--border-width) solid var(--border-strong);
-  border-radius: var(--radius);
-  padding: var(--spacing-2) var(--spacing-4);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  user-select: none;
-  width: 100%;
-}
-@media (max-width: 640px) {
+@layer doom.components {
   .slat {
-    padding: var(--spacing-2);
+    background-color: var(--card-bg);
+    border: var(--surface-border-width) solid var(--border-strong);
+    border-radius: var(--radius-md);
+    padding: var(--space-2) var(--space-4);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    user-select: none;
+    width: 100%;
   }
-}
-@media (max-width: 360px) {
-  .slat {
-    padding: var(--spacing-2) var(--spacing-4);
+  @media (max-width: 640px) {
+    .slat {
+      padding: var(--space-2);
+    }
   }
-}
-.slat.danger {
-  background-color: var(--error);
-  color: var(--error-foreground);
-  border-color: var(--border-strong);
-}
-.slat.danger > * {
-  --primary: var(--primary-foreground);
-  --primary-foreground: var(--primary);
-  --foreground: var(--primary-foreground);
-  --muted-foreground: var(--primary-foreground);
-}
-.slat.success {
-  background-color: var(--success);
-  color: var(--success-foreground);
-  border-color: var(--border-strong);
-}
-.slat.success > * {
-  --primary: var(--primary-foreground);
-  --primary-foreground: var(--primary);
-  --foreground: var(--primary-foreground);
-  --muted-foreground: var(--primary-foreground);
-}
-.slat.hoverable {
-  cursor: pointer;
-}
-.slat.hoverable:hover {
-  background-color: var(--surface-accent);
-  color: var(--foreground);
-  transform: translate(calc(-1 * var(--spacing-half)), calc(-1 * var(--spacing-half)));
-  box-shadow: var(--spacing-1) var(--spacing-1) 0px 0px var(--border-strong);
-}
-.slat.hoverable:active {
-  transform: translate(0, 0);
-  box-shadow: none;
-}
-.slat.hoverable.danger:hover {
-  background-color: var(--error);
-  filter: brightness(1.1);
-}
-.slat.hoverable.success:hover {
-  background-color: var(--success);
-  filter: brightness(1.1);
-}
-
-.label {
-  font-weight: 500;
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: inherit;
-}
-@media (max-width: 640px) {
-  .label {
-    white-space: normal;
-    word-break: break-all;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
+  @media (max-width: 360px) {
+    .slat {
+      padding: var(--space-2) var(--space-4);
+    }
+  }
+  .slat.danger {
+    background-color: var(--error);
+    color: var(--error-foreground);
+    border-color: var(--border-strong);
+  }
+  .slat.danger > * {
+    --primary: var(--primary-foreground);
+    --primary-foreground: var(--primary);
+    --foreground: var(--primary-foreground);
+    --muted-foreground: var(--primary-foreground);
+  }
+  .slat.success {
+    background-color: var(--success);
+    color: var(--success-foreground);
+    border-color: var(--border-strong);
+  }
+  .slat.success > * {
+    --primary: var(--primary-foreground);
+    --primary-foreground: var(--primary);
+    --foreground: var(--primary-foreground);
+    --muted-foreground: var(--primary-foreground);
+  }
+  .slat.hoverable {
+    cursor: pointer;
+  }
+  .slat.hoverable:hover {
+    background-color: var(--surface-accent);
+    color: var(--foreground);
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--space-1) var(--space-1) 0px 0px var(--border-strong);
+  }
+  .slat.hoverable:active {
+    transform: translate(0, 0);
+    box-shadow: none;
+  }
+  .slat.hoverable.danger:hover {
+    background-color: var(--error);
+    filter: brightness(1.1);
+  }
+  .slat.hoverable.success:hover {
+    background-color: var(--success);
+    filter: brightness(1.1);
   }
-}
-@media (max-width: 360px) {
   .label {
-    -webkit-line-clamp: 2;
+    font-weight: 500;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: inherit;
+  }
+  @media (max-width: 640px) {
+    .label {
+      white-space: normal;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+  }
+  @media (max-width: 360px) {
+    .label {
+      -webkit-line-clamp: 2;
+    }
+  }
+  .secondaryLabel {
+    color: inherit;
+    opacity: 0.8;
+    font-size: var(--text-2xs);
+    font-family: var(--font-mono);
+  }
+  .prepend,
+  .append {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
   }
-}
-
-.secondaryLabel {
-  color: inherit;
-  opacity: 0.8;
-  font-size: var(--text-2xs);
-  font-family: var(--font-mono);
-}
-
-.prepend,
-.append {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
 }

package/dist/components/Slider/Slider.module.css

@@ -1,122 +1,117 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  width: 100%;
-  padding: 0 var(--spacing-3);
-}
-
-.labelRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.valueDisplay {
-  background-color: var(--card-bg);
-  padding: var(--spacing-half) var(--spacing-2);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.trackWrapper {
-  position: relative;
-  width: 100%;
-  height: var(--spacing-3);
-  overflow: visible;
-}
-
-.trackInner {
-  position: absolute;
-  inset: 0;
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.progressFill {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: var(--primary);
-  z-index: 1;
-  pointer-events: none;
-}
-
-.rangeInput, .multiRangeInput {
-  appearance: none;
-  -webkit-appearance: none;
-  position: absolute;
-  top: 0;
-  left: -12px;
-  width: calc(100% + 24px);
-  height: 100%;
-  background: transparent;
-  cursor: pointer;
-  z-index: 10;
-  margin: 0;
-}
-.rangeInput::-webkit-slider-runnable-track, .multiRangeInput::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 12px;
-  background: transparent;
-  border: none;
-}
-.rangeInput::-moz-range-track, .multiRangeInput::-moz-range-track {
-  width: 100%;
-  height: 12px;
-  background: transparent;
-  border: none;
-}
-.rangeInput::-webkit-slider-thumb, .multiRangeInput::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 24px;
-  width: 24px;
-  background: var(--primary);
-  border: var(--border-width) solid var(--border-strong);
-  border-radius: 50%;
-  margin-top: -7px; /* Center thumb on track */
-  position: relative;
-  z-index: 20;
-}
-.rangeInput::-moz-range-thumb, .multiRangeInput::-moz-range-thumb {
-  height: 24px;
-  width: 24px;
-  background: var(--primary);
-  border: var(--border-width) solid var(--border-strong);
-  border-radius: 50%;
-}
-.rangeInput:focus, .multiRangeInput:focus {
-  outline: none;
-}
-.rangeInput:focus-visible::-webkit-slider-thumb, .multiRangeInput:focus-visible::-webkit-slider-thumb {
-  outline: var(--border-width) solid var(--foreground);
-  outline-offset: 4px;
-}
-.rangeInput:focus-visible::-moz-range-thumb, .multiRangeInput:focus-visible::-moz-range-thumb {
-  outline: var(--border-width) solid var(--foreground);
-  outline-offset: 4px;
-}
-.rangeInput:disabled, .multiRangeInput:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.rangeInput:disabled::-webkit-slider-thumb, .multiRangeInput:disabled::-webkit-slider-thumb {
-  background: var(--muted);
-  filter: grayscale(1);
-}
-
-.multiRangeInput {
-  pointer-events: none !important;
-}
-.multiRangeInput::-webkit-slider-thumb {
-  pointer-events: auto !important;
-}
-.multiRangeInput::-moz-range-thumb {
-  pointer-events: auto !important;
+@layer doom.components {
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    width: 100%;
+    padding: 0 var(--space-3);
+  }
+  .labelRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .valueDisplay {
+    background-color: var(--card-bg);
+    padding: var(--space-half) var(--space-2);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .trackWrapper {
+    position: relative;
+    width: 100%;
+    height: var(--space-2);
+    overflow: visible;
+  }
+  .trackInner {
+    position: absolute;
+    inset: 0;
+    background: var(--card-bg);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .progressFill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: var(--primary);
+    z-index: 1;
+    pointer-events: none;
+  }
+  .rangeInput, .multiRangeInput {
+    appearance: none;
+    -webkit-appearance: none;
+    position: absolute;
+    top: 0;
+    left: -10px;
+    width: calc(100% + 20px);
+    height: 100%;
+    background: transparent;
+    cursor: pointer;
+    z-index: 10;
+    margin: 0;
+  }
+  .rangeInput::-webkit-slider-runnable-track, .multiRangeInput::-webkit-slider-runnable-track {
+    width: 100%;
+    height: var(--space-2);
+    background: transparent;
+    border: none;
+  }
+  .rangeInput::-moz-range-track, .multiRangeInput::-moz-range-track {
+    width: 100%;
+    height: var(--space-2);
+    background: transparent;
+    border: none;
+  }
+  .rangeInput::-webkit-slider-thumb, .multiRangeInput::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: var(--toggle-size);
+    width: var(--toggle-size);
+    background: var(--primary);
+    border: var(--surface-border-width) solid var(--border-strong);
+    border-radius: 50%;
+    margin-top: calc(-1 * var(--space-1\.5)); /* Center thumb on track */
+    position: relative;
+    z-index: 20;
+  }
+  .rangeInput::-moz-range-thumb, .multiRangeInput::-moz-range-thumb {
+    height: var(--toggle-size);
+    width: var(--toggle-size);
+    background: var(--primary);
+    border: var(--surface-border-width) solid var(--border-strong);
+    border-radius: 50%;
+  }
+  .rangeInput:focus, .multiRangeInput:focus {
+    outline: none;
+  }
+  .rangeInput:focus-visible::-webkit-slider-thumb, .multiRangeInput:focus-visible::-webkit-slider-thumb {
+    outline: var(--surface-border-width) solid var(--foreground);
+    outline-offset: 4px;
+  }
+  .rangeInput:focus-visible::-moz-range-thumb, .multiRangeInput:focus-visible::-moz-range-thumb {
+    outline: var(--surface-border-width) solid var(--foreground);
+    outline-offset: 4px;
+  }
+  .rangeInput:disabled, .multiRangeInput:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .rangeInput:disabled::-webkit-slider-thumb, .multiRangeInput:disabled::-webkit-slider-thumb {
+    background: var(--muted);
+    filter: grayscale(1);
+  }
+  .multiRangeInput {
+    pointer-events: none !important;
+  }
+  .multiRangeInput::-webkit-slider-thumb {
+    pointer-events: auto !important;
+  }
+  .multiRangeInput::-moz-range-thumb {
+    pointer-events: auto !important;
+  }
 }

package/dist/components/Spinner/Spinner.module.css

@@ -1,30 +1,31 @@
-.spinner {
-  display: inline-block;
-  animation: spin 1s linear infinite;
-  color: currentColor;
-}
-.spinner.sm {
-  width: var(--size-icon-sm);
-  height: var(--size-icon-sm);
-}
-.spinner.md {
-  width: var(--size-icon-md);
-  height: var(--size-icon-md);
-}
-.spinner.lg {
-  width: var(--size-icon-lg);
-  height: var(--size-icon-lg);
-}
-.spinner.xl {
-  width: var(--size-touch-target);
-  height: var(--size-touch-target);
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
+@layer doom.components {
+  .spinner {
+    display: inline-block;
+    animation: spin 1s linear infinite;
+    color: currentColor;
+  }
+  .spinner.sm {
+    width: var(--size-icon-sm);
+    height: var(--size-icon-sm);
+  }
+  .spinner.md {
+    width: var(--size-icon-md);
+    height: var(--size-icon-md);
+  }
+  .spinner.lg {
+    width: var(--size-icon-lg);
+    height: var(--size-icon-lg);
+  }
+  .spinner.xl {
+    width: var(--size-touch-target);
+    height: var(--size-touch-target);
   }
-  100% {
-    transform: rotate(360deg);
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 }

package/dist/components/SplitButton/SplitButton.d.ts

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

package/dist/components/SplitButton/SplitButton.js

@@ -5,10 +5,10 @@ import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 import { Popover } from "../Popover/Popover.js";
 import styles from "./SplitButton.module.css";
-export function SplitButton({ primaryLabel, onPrimaryClick, items, variant = "primary", className, }) {
+export function SplitButton({ primaryLabel, onPrimaryClick, 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: () => {
                     item.onClick();
                     setIsOpen(false);
-                }, children: item.label }, index))) }), isOpen: isOpen, placement: "bottom-end", trigger: _jsxs("div", { className: clsx(styles.container, styles[variant], className), "data-state": isOpen ? "open" : "closed", children: [_jsx("button", { className: styles.mainButton, onClick: onPrimaryClick, children: primaryLabel }), _jsx("button", { "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": `More ${primaryLabel} options`, className: styles.dropdownTrigger, onClick: () => setIsOpen(!isOpen), children: _jsx(ChevronDown, { "aria-hidden": "true", size: 16, strokeWidth: 3 }) })] }), onClose: () => setIsOpen(false) }));
+                }, children: item.label }, index))) }), isOpen: isOpen, placement: "bottom-end", trigger: _jsxs("div", { className: clsx(styles.container, styles[variant], size !== "md" && styles[size], className), "data-state": isOpen ? "open" : "closed", children: [_jsx("button", { className: styles.mainButton, onClick: onPrimaryClick, children: primaryLabel }), _jsx("button", { "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": `More ${primaryLabel} options`, className: styles.dropdownTrigger, onClick: () => setIsOpen(!isOpen), children: _jsx(ChevronDown, { "aria-hidden": "true", size: 20, strokeWidth: 3 }) })] }), onClose: () => setIsOpen(false) }));
 }