doom-design-system 0.5.0 → 0.6.0

package/dist/components/Image/Image.module.css

@@ -1,55 +1,54 @@
-.image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-  background-color: transparent;
-}
-.image.visible {
-  opacity: 1;
-}
-.image.hidden {
-  opacity: 0;
-}
-.image.fit-cover {
-  object-fit: cover;
-}
-.image.fit-contain {
-  object-fit: contain;
-}
-.image.fit-fill {
-  object-fit: fill;
-}
-.image.fit-none {
-  object-fit: none;
-}
-.image.fit-scale-down {
-  object-fit: scale-down;
-}
-
-.wrapper {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  background-color: var(--surface-accent);
-  isolation: isolate;
-}
-
-.skeletonLayer {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: none;
-  transition: opacity 0.5s ease-in-out;
-  opacity: 1;
-}
-.skeletonLayer.fadeOut {
-  opacity: 0;
-}
-
-.rounded {
-  border-radius: var(--radius);
+@layer doom.components {
+  .image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+    background-color: transparent;
+  }
+  .image.visible {
+    opacity: 1;
+  }
+  .image.hidden {
+    opacity: 0;
+  }
+  .image.fit-cover {
+    object-fit: cover;
+  }
+  .image.fit-contain {
+    object-fit: contain;
+  }
+  .image.fit-fill {
+    object-fit: fill;
+  }
+  .image.fit-none {
+    object-fit: none;
+  }
+  .image.fit-scale-down {
+    object-fit: scale-down;
+  }
+  .wrapper {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background-color: var(--surface-accent);
+    isolation: isolate;
+  }
+  .skeletonLayer {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    transition: opacity 0.5s ease-in-out;
+    opacity: 1;
+  }
+  .skeletonLayer.fadeOut {
+    opacity: 0;
+  }
+  .rounded {
+    border-radius: var(--radius-md);
+  }
 }

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "title"> {
+import type { ControlSize } from "../../styles/types";
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "title" | "size"> {
+    size?: ControlSize;
     label?: string;
     error?: string;
     helperText?: string;
@@ -9,5 +11,5 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     format?: (value: string | number | readonly string[] | undefined) => string;
     validate?: (value: string | number | readonly string[] | undefined) => string | undefined;
 }
-export declare function Input({ label, error: errorProp, helperText, startAdornment, endAdornment, showCount, style, className, format, validate, onBlur, onFocus, onChange, value, defaultValue, id, required, maxLength, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ size, label, error: errorProp, helperText, startAdornment, endAdornment, showCount, style, className, format, validate, onBlur, onFocus, onChange, value, defaultValue, id, required, maxLength, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/Input.js

@@ -16,7 +16,7 @@ import React, { useId, useState } from "react";
 import { Label } from "../Label/Label.js";
 import styles from "./Input.module.css";
 export function Input(_a) {
-    var { label, error: errorProp, helperText, startAdornment, endAdornment, showCount, style, className, format, validate, onBlur, onFocus, onChange, value, defaultValue, id, required, maxLength } = _a, props = __rest(_a, ["label", "error", "helperText", "startAdornment", "endAdornment", "showCount", "style", "className", "format", "validate", "onBlur", "onFocus", "onChange", "value", "defaultValue", "id", "required", "maxLength"]);
+    var { size = "md", label, error: errorProp, helperText, startAdornment, endAdornment, showCount, style, className, format, validate, onBlur, onFocus, onChange, value, defaultValue, id, required, maxLength } = _a, props = __rest(_a, ["size", "label", "error", "helperText", "startAdornment", "endAdornment", "showCount", "style", "className", "format", "validate", "onBlur", "onFocus", "onChange", "value", "defaultValue", "id", "required", "maxLength"]);
     const [isFocused, setIsFocused] = useState(false);
     const [internalError, setInternalError] = useState(undefined);
     const [charCount, setCharCount] = useState(((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) || "").length);
@@ -54,5 +54,5 @@ export function Input(_a) {
     }, [value]);
     const displayValue = !isFocused && format && value !== undefined ? format(value) : value;
     const describedBy = clsx(helperText && helperId, error && errorId) || undefined;
-    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: styles.wrapper, children: [startAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.start), children: startAdornment })), _jsx("input", Object.assign({ "aria-describedby": describedBy, "aria-invalid": !!error, className: clsx(styles.input, startAdornment && styles.hasStartAdornment, endAdornment && styles.hasEndAdornment, error && styles.error), defaultValue: defaultValue, id: inputId, maxLength: maxLength, required: required, value: displayValue, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus }, props)), endAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.end), children: endAdornment }))] }), (error || helperText || (showCount !== null && showCount !== void 0 ? showCount : maxLength !== undefined)) && (_jsxs("div", { className: styles.bottomRow, children: [_jsx("div", { className: styles.messageArea, children: error ? (_jsx("span", { className: clsx(styles.helperText, styles.error), id: errorId, role: "alert", children: error })) : (helperText && (_jsx("span", { className: styles.helperText, id: helperId, children: helperText }))) }), (showCount !== null && showCount !== void 0 ? showCount : maxLength !== undefined) && (_jsxs("span", { className: styles.counter, children: [charCount, maxLength !== undefined ? ` / ${maxLength}` : ""] }))] }))] }));
+    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: clsx(styles.wrapper, size !== "md" && styles[size]), children: [startAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.start), children: startAdornment })), _jsx("input", Object.assign({ "aria-describedby": describedBy, "aria-invalid": !!error, className: clsx(styles.input, startAdornment && styles.hasStartAdornment, endAdornment && styles.hasEndAdornment, error && styles.error), defaultValue: defaultValue, id: inputId, maxLength: maxLength, required: required, value: displayValue, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus }, props)), endAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.end), children: endAdornment }))] }), (error || helperText || (showCount !== null && showCount !== void 0 ? showCount : maxLength !== undefined)) && (_jsxs("div", { className: styles.bottomRow, children: [_jsx("div", { className: styles.messageArea, children: error ? (_jsx("span", { className: clsx(styles.helperText, styles.error), id: errorId, role: "alert", children: error })) : (helperText && (_jsx("span", { className: styles.helperText, id: helperId, children: helperText }))) }), (showCount !== null && showCount !== void 0 ? showCount : maxLength !== undefined) && (_jsxs("span", { className: styles.counter, children: [charCount, maxLength !== undefined ? ` / ${maxLength}` : ""] }))] }))] }));
 }

package/dist/components/Input/Input.module.css

@@ -1,123 +1,139 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  width: 100%;
-}
-
-.wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.input {
-  width: 100%;
-  padding: var(--spacing-4) var(--spacing-6);
-  font-size: var(--text-base);
-  background: var(--card-bg);
-  color: var(--foreground);
-  min-height: var(--control-height-lg);
-  box-sizing: border-box;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  transition: all 0.1s ease;
-  outline: none;
-}
-.input:focus-visible, .input[aria-expanded=true] {
-  outline: none;
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-primary);
-  border-color: var(--primary);
-}
-.input:focus {
-  outline: none;
-}
-.input::placeholder {
-  color: var(--muted);
-}
-.input.error {
-  border-color: var(--error);
-  box-shadow: 5px 5px 0px 0px var(--shadow-error);
-}
-.input.error:focus, .input.error:focus-visible {
-  border-color: var(--error);
-  box-shadow: 6px 6px 0px 0px var(--shadow-error);
-}
-.input:disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-  background-color: var(--muted);
-  background-image: linear-gradient(45deg, transparent 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
-  background-size: var(--spacing-5) var(--spacing-5);
-  box-shadow: none;
-  transform: none;
-  color: var(--muted-foreground);
-}
-.input:disabled::placeholder {
-  color: var(--muted-foreground);
-}
-.input.hasStartAdornment {
-  padding-left: var(--spacing-8);
-}
-.input.hasEndAdornment {
-  padding-right: var(--spacing-8);
-}
-
-.adornment {
-  position: absolute;
-  color: var(--muted-foreground);
-  font-size: var(--text-sm);
-  z-index: 1;
-}
-.adornment.start {
-  left: var(--spacing-3);
-}
-.adornment.end {
-  right: var(--spacing-3);
-}
-
-.bottomRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--spacing-4);
-  margin-top: calc(-1 * var(--spacing-1));
-}
-
-.messageArea {
-  flex: 1;
-}
-
-.helperText {
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  color: var(--muted-foreground);
-  display: block;
-}
-.helperText.error {
-  color: var(--error);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  animation: input-shake 0.3s ease-in-out;
-}
-@keyframes input-shake {
-  0%, 100% {
-    transform: translateX(0);
+@layer doom.components {
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    width: 100%;
   }
-  25% {
-    transform: translateX(calc(-1 * var(--spacing-1)));
+  .wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
   }
-  75% {
-    transform: translateX(var(--spacing-1));
+  .input {
+    width: 100%;
+    background: var(--card-bg);
+    color: var(--foreground);
+    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;
+  }
+  .input: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);
+  }
+  .input:focus {
+    outline: none;
+  }
+  .input::placeholder {
+    color: var(--muted);
+  }
+  .input.error {
+    border-color: var(--error);
+    box-shadow: var(--shadow-offset-lg) var(--shadow-error);
+  }
+  .input.error:focus, .input.error:focus-visible {
+    border-color: var(--error);
+    box-shadow: var(--shadow-offset-xl) var(--shadow-error);
+  }
+  .input: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;
+  }
+  .input:disabled:hover {
+    transform: none !important;
+    filter: none !important;
+  }
+  .input:disabled {
+    box-shadow: none;
+    transform: none;
+    color: var(--muted-foreground);
+  }
+  .input:disabled::placeholder {
+    color: var(--muted-foreground);
+  }
+  .input.hasStartAdornment {
+    padding-left: var(--space-8);
+  }
+  .input.hasEndAdornment {
+    padding-right: var(--space-8);
+  }
+  .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);
+  }
+  .adornment {
+    position: absolute;
+    color: var(--muted-foreground);
+    font-size: var(--text-sm);
+    z-index: 1;
+  }
+  .adornment.start {
+    left: var(--space-3);
+  }
+  .adornment.end {
+    right: var(--space-3);
+  }
+  .bottomRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+  .messageArea {
+    flex: 1;
+  }
+  .helperText {
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+    display: block;
+  }
+  .helperText.error {
+    color: var(--error);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    animation: input-shake 0.3s ease-in-out;
+  }
+  @keyframes input-shake {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(calc(-1 * var(--space-1)));
+    }
+    75% {
+      transform: translateX(var(--space-1));
+    }
+  }
+  .counter {
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+    white-space: nowrap;
   }
-}
-
-.counter {
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  color: var(--muted-foreground);
-  white-space: nowrap;
 }

package/dist/components/Label/Label.module.css

@@ -1,16 +1,18 @@
-.label {
-  font-family: var(--font-heading);
-  font-weight: var(--font-bold);
-  font-size: var(--text-sm);
-  color: var(--foreground);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-.label.required::after {
-  content: "*";
-  color: var(--error);
-  margin-left: var(--spacing-1);
+@layer doom.components {
+  .label {
+    font-family: var(--font-heading);
+    font-weight: var(--font-bold);
+    font-size: var(--text-sm);
+    color: var(--foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+  .label.required::after {
+    content: "*";
+    color: var(--error);
+    margin-left: var(--space-1);
+  }
 }

package/dist/components/Layout/Layout.module.css

@@ -1,118 +1,102 @@
-.grid {
-  display: grid;
-}
-
-.flex {
-  display: flex;
-}
-
-.direction-row {
-  flex-direction: row;
-}
-
-.direction-column {
-  flex-direction: column;
-}
-
-.direction-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.direction-column-reverse {
-  flex-direction: column-reverse;
-}
-
-.justify-flex-start {
-  justify-content: flex-start;
-}
-
-.justify-flex-end {
-  justify-content: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-space-between {
-  justify-content: space-between;
-}
-
-.justify-space-around {
-  justify-content: space-around;
-}
-
-.justify-space-evenly {
-  justify-content: space-evenly;
-}
-
-.align-flex-start {
-  align-items: flex-start;
-}
-
-.align-flex-end {
-  align-items: flex-end;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.align-baseline {
-  align-items: baseline;
-}
-
-.container {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
-}
-.container.sm {
-  max-width: 640px;
-}
-.container.md {
-  max-width: 768px;
-}
-.container.lg {
-  max-width: 1024px;
-}
-.container.xl {
-  max-width: 1280px;
-}
-.container.fluid {
-  max-width: 100%;
-}
-
-.switcher {
-  display: flex;
-}
-@media (max-width: 360px) {
-  .switcher.switch-xxs {
-    flex-direction: column;
-    align-items: flex-start;
+@layer doom.components {
+  .grid {
+    display: grid;
   }
-}
-@media (max-width: 480px) {
-  .switcher.switch-xs {
-    flex-direction: column;
-    align-items: flex-start;
+  .flex {
+    display: flex;
   }
-}
-@media (max-width: 640px) {
-  .switcher.switch-sm {
-    flex-direction: column;
-    align-items: flex-start;
+  .direction-row {
+    flex-direction: row;
   }
-}
-@media (max-width: 768px) {
-  .switcher.switch-md {
+  .direction-column {
     flex-direction: column;
+  }
+  .direction-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .direction-column-reverse {
+    flex-direction: column-reverse;
+  }
+  .justify-flex-start {
+    justify-content: flex-start;
+  }
+  .justify-flex-end {
+    justify-content: flex-end;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-space-between {
+    justify-content: space-between;
+  }
+  .justify-space-around {
+    justify-content: space-around;
+  }
+  .justify-space-evenly {
+    justify-content: space-evenly;
+  }
+  .align-flex-start {
     align-items: flex-start;
   }
+  .align-flex-end {
+    align-items: flex-end;
+  }
+  .align-center {
+    align-items: center;
+  }
+  .align-stretch {
+    align-items: stretch;
+  }
+  .align-baseline {
+    align-items: baseline;
+  }
+  .container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+  }
+  .container.sm {
+    max-width: 640px;
+  }
+  .container.md {
+    max-width: 768px;
+  }
+  .container.lg {
+    max-width: 1024px;
+  }
+  .container.xl {
+    max-width: 1280px;
+  }
+  .container.fluid {
+    max-width: 100%;
+  }
+  .switcher {
+    display: flex;
+  }
+  @media (max-width: 360px) {
+    .switcher.switch-xxs {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+  @media (max-width: 480px) {
+    .switcher.switch-xs {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+  @media (max-width: 640px) {
+    .switcher.switch-sm {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+  @media (max-width: 768px) {
+    .switcher.switch-md {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
 }