doom-design-system 0.5.0 → 0.6.0

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

@@ -1,81 +1,78 @@
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-
-.itemLabel {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  cursor: pointer;
-  position: relative;
-  padding: var(--spacing-3) var(--spacing-4);
-  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: var(--spacing-6);
-  height: var(--spacing-6);
-  border: var(--border-width) 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 var(--spacing-1) color-mix(in srgb, var(--primary) 15%, transparent);
-}
-
-.innerDot {
-  width: var(--spacing-3);
-  height: var(--spacing-3);
-  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 {
+@layer doom.components {
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .itemLabel {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    position: relative;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    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: var(--toggle-size);
+    height: var(--toggle-size);
+    border: var(--surface-border-width) 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 var(--space-1) color-mix(in srgb, var(--primary) 15%, transparent);
+  }
+  .innerDot {
+    width: var(--space-3);
+    height: var(--space-3);
+    background: var(--primary-foreground);
+    border-radius: 50%;
     transform: scale(0);
+    animation: radioScale 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
-  to {
-    transform: scale(1);
+  @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;
   }
-}
-.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;
 }

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { ControlSize } from "../../styles/types";
 interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "defaultValue"> {
     options: {
         value: string | number;
@@ -11,7 +12,7 @@ interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     defaultValue?: string | number;
     name?: string;
     required?: boolean;
-    size?: "sm" | "md";
+    size?: ControlSize;
 }
 export declare function Select({ options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, autoFocus, size, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select/Select.js

@@ -106,7 +106,7 @@ export function Select(_a) {
                         return (_jsxs("li", { "aria-selected": isSelected, className: clsx(styles.optionItem, isSelected && styles.selected, isHighlighted && styles.highlighted), id: `${listboxId}-option-${index}`, role: "option", onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), children: [_jsx("span", { children: opt.label }), isSelected && (_jsx(Check, { "aria-hidden": "true", size: 14, strokeWidth: 3 }))] }, opt.value));
                     }) }), isOpen: isOpen, placement: "bottom-start", trigger: _jsxs("button", Object.assign({ ref: triggerRef, "aria-controls": isOpen ? listboxId : undefined, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-label": !label
                         ? (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder || "Select option"
-                        : undefined, "aria-labelledby": label ? labelId : undefined, "aria-required": required, autoFocus: autoFocus, className: clsx(styles.trigger, size === "sm" && styles.sm), disabled: disabled, id: selectId, role: "combobox", type: "button", onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown }, props, { children: [_jsx("span", { children: selectedOption
+                        : undefined, "aria-labelledby": label ? labelId : undefined, "aria-required": required, autoFocus: autoFocus, className: clsx(styles.trigger, size !== "md" && styles[size]), disabled: disabled, id: selectId, role: "combobox", type: "button", onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown }, props, { children: [_jsx("span", { children: selectedOption
                                 ? selectedOption.label
-                                : placeholder || "Select..." }), _jsx(ChevronDown, { "aria-hidden": "true", size: 16, strokeWidth: 2.5, style: { marginLeft: "var(--spacing-2)" } })] })), onClose: () => setIsOpen(false) }), _jsx("input", { "aria-hidden": "true", "aria-labelledby": label ? labelId : undefined, name: name, required: required, type: "hidden", value: currentValue })] }));
+                                : placeholder || "Select..." }), _jsx(ChevronDown, { "aria-hidden": "true", size: 20, strokeWidth: 2.5, style: { marginLeft: "var(--space-2)" } })] })), onClose: () => setIsOpen(false) }), _jsx("input", { "aria-hidden": "true", "aria-labelledby": label ? labelId : undefined, name: name, required: required, type: "hidden", value: currentValue })] }));
 }

package/dist/components/Select/Select.module.css

@@ -1,99 +1,134 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.trigger {
-  background: var(--card-bg);
-  color: var(--foreground);
-  padding: var(--spacing-4) var(--spacing-6);
-  font-size: var(--text-base);
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  min-height: var(--control-height-lg);
-  box-sizing: border-box;
-  width: 100%;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  transition: all 0.1s ease;
-  outline: none;
-}
-.trigger:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-base);
-}
-.trigger:focus-visible, .trigger[aria-expanded=true] {
-  outline: none;
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-primary);
-  border-color: var(--primary);
-}
-.trigger:focus {
-  outline: none;
-}
-.trigger.sm {
-  padding: var(--spacing-2) var(--spacing-4);
-  min-height: var(--control-height-md);
-  font-size: var(--text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.optionsList {
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--primary);
-  border-radius: var(--radius);
-  box-shadow: none;
-  min-width: var(--spacing-50);
-  max-height: var(--spacing-72);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-1);
-  margin: 0;
-  list-style: none;
-}
-
-.optionItem {
-  text-align: left;
-  padding: var(--spacing-4) var(--spacing-6);
-  background: transparent;
-  border: none;
-  border-radius: calc(var(--radius) - 2px);
-  color: var(--foreground);
-  cursor: pointer;
-  font-size: var(--text-base);
-  font-weight: var(--font-regular);
-  transition: all var(--duration-fast) var(--ease-in-out);
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  user-select: none;
-}
-.optionItem:hover {
-  background-color: color-mix(in srgb, var(--primary), transparent 85%);
-  color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
-}
-.optionItem.highlighted {
-  background: color-mix(in srgb, var(--primary), transparent 85%);
-  color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
-}
-.optionItem.selected {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-weight: var(--font-bold);
-}
-.optionItem.selected:hover {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  filter: brightness(1.1);
+@layer doom.components {
+  .container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  .trigger {
+    background: var(--card-bg);
+    color: var(--foreground);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    width: 100%;
+    box-sizing: border-box;
+    height: var(--control-height);
+    padding: var(--control-padding-y) var(--control-padding-x);
+    font-size: var(--control-font-size);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--control-radius);
+    box-shadow: var(--shadow-md);
+    transition: all var(--duration-fast) var(--ease-in-out);
+    outline: none;
+  }
+  .trigger:hover {
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-lg);
+  }
+  .trigger:focus-visible {
+    outline: none;
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-offset-xl) var(--shadow-primary);
+    border-color: var(--primary);
+  }
+  .trigger:focus {
+    outline: none;
+  }
+  .trigger[aria-expanded=true] {
+    outline: none;
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-offset-xl) var(--shadow-primary);
+    border-color: var(--primary);
+  }
+  .trigger:active {
+    transition: none;
+    transform: translate(var(--space-0\.5), var(--space-0\.5));
+    box-shadow: none;
+  }
+  .trigger:disabled {
+    opacity: 0.6;
+    cursor: not-allowed !important;
+    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) !important;
+  }
+  .trigger:disabled:hover {
+    transform: none !important;
+    filter: none !important;
+  }
+  .trigger:disabled {
+    transform: none;
+    box-shadow: var(--shadow-md);
+  }
+  /* 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);
+  }
+  .optionsList {
+    background: var(--card-bg);
+    border: var(--surface-border-width) solid var(--primary);
+    border-radius: var(--control-radius);
+    box-shadow: none;
+    min-width: 12.5rem;
+    max-height: 18rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-1);
+    margin: 0;
+    list-style: none;
+  }
+  .optionItem {
+    text-align: left;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    background: transparent;
+    border: none;
+    border-radius: calc(var(--control-radius) - var(--surface-border-width));
+    color: var(--foreground);
+    cursor: pointer;
+    font-size: var(--control-font-size);
+    font-weight: var(--font-regular);
+    transition: all var(--duration-fast) var(--ease-in-out);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+  }
+  .optionItem:hover {
+    background-color: color-mix(in srgb, var(--primary), transparent 85%);
+    color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
+  }
+  .optionItem.highlighted {
+    background: color-mix(in srgb, var(--primary), transparent 85%);
+    color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
+  }
+  .optionItem.selected {
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font-weight: var(--font-bold);
+  }
+  .optionItem.selected:hover {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    filter: brightness(1.1);
+  }
 }