doom-design-system 0.1.14 → 0.2.0

package/dist/components/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,10 +10,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Textarea.module.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useId } from "react";
+import clsx from "clsx";
+import { Label } from "../Label/Label.js";
+import styles from "./Textarea.module.css";
 export function Textarea(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return _jsx("textarea", Object.assign({ className: clsx(styles.textarea, className) }, props));
+    var { label, error, helperText, showCount, className, style, id, required, maxLength, value, defaultValue, onChange } = _a, props = __rest(_a, ["label", "error", "helperText", "showCount", "className", "style", "id", "required", "maxLength", "value", "defaultValue", "onChange"]);
+    const reactId = useId();
+    const textareaId = id || `textarea-${reactId}`;
+    const helperId = `${textareaId}-helper`;
+    const errorId = `${textareaId}-error`;
+    const [charCount, setCharCount] = useState(((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) || "").length);
+    const handleChange = (e) => {
+        setCharCount(e.target.value.length);
+        if (onChange)
+            onChange(e);
+    };
+    // Sync charCount if value is updated externally (controlled)
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setCharCount(value.toString().length);
+        }
+    }, [value]);
+    const describedBy = clsx(helperText && helperId, error && errorId) || undefined;
+    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Label, { htmlFor: textareaId, required: required, children: label })), _jsx("textarea", Object.assign({ className: clsx(styles.textarea, error && styles.error), id: textareaId, required: required, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: handleChange, "aria-invalid": !!error, "aria-describedby": describedBy }, props)), (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", { id: errorId, className: clsx(styles.helperText, styles.error), role: "alert", children: error })) : (helperText && (_jsx("span", { id: helperId, className: styles.helperText, children: helperText }))) }), (showCount !== null && showCount !== void 0 ? showCount : maxLength !== undefined) && (_jsxs("span", { className: styles.counter, children: [charCount, maxLength !== undefined ? ` / ${maxLength}` : ""] }))] }))] }));
 }

package/dist/components/Textarea/Textarea.module.css

@@ -1,3 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
 .textarea {
   width: 100%;
   padding: 0.75rem 1rem;
@@ -6,6 +13,7 @@
   color: var(--foreground);
   font-family: inherit;
   resize: vertical;
+  min-height: 100px;
   border: var(--border-width) solid var(--card-border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-hard);
@@ -21,3 +29,66 @@
 .textarea::placeholder {
   color: var(--muted);
 }
+.textarea.error {
+  border-color: var(--error);
+  box-shadow: 5px 5px 0px 0px var(--shadow-error);
+}
+.textarea.error:focus, .textarea.error:focus-visible {
+  border-color: var(--error);
+  box-shadow: 7px 7px 0px 0px var(--shadow-error);
+}
+.textarea: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: 20px 20px;
+  box-shadow: none;
+  transform: none;
+  color: var(--muted-foreground);
+}
+.textarea:disabled::placeholder {
+  color: var(--muted-foreground);
+}
+
+.bottomRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.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: textarea-shake 0.3s ease-in-out;
+}
+@keyframes textarea-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+.counter {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
+  white-space: nowrap;
+}

package/dist/styles/globals.css

@@ -31,7 +31,12 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 /* Typography Base Styles */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-heading, var(--font-montserrat)), sans-serif;
   font-weight: var(--heading-weight, 700);
   text-transform: var(--heading-transform, none);
@@ -356,6 +361,18 @@ body .py-0 {
   padding-top: 0;
   padding-bottom: 0;
 }
+body .top-0 {
+  top: 0;
+}
+body .bottom-0 {
+  bottom: 0;
+}
+body .left-0 {
+  left: 0;
+}
+body .right-0 {
+  right: 0;
+}
 body .gap-1 {
   gap: 0.25rem;
 }
@@ -411,6 +428,18 @@ body .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+body .top-1 {
+  top: 0.25rem;
+}
+body .bottom-1 {
+  bottom: 0.25rem;
+}
+body .left-1 {
+  left: 0.25rem;
+}
+body .right-1 {
+  right: 0.25rem;
+}
 body .gap-2 {
   gap: 0.5rem;
 }
@@ -466,6 +495,18 @@ body .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+body .top-2 {
+  top: 0.5rem;
+}
+body .bottom-2 {
+  bottom: 0.5rem;
+}
+body .left-2 {
+  left: 0.5rem;
+}
+body .right-2 {
+  right: 0.5rem;
+}
 body .gap-3 {
   gap: 0.75rem;
 }
@@ -521,6 +562,18 @@ body .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+body .top-3 {
+  top: 0.75rem;
+}
+body .bottom-3 {
+  bottom: 0.75rem;
+}
+body .left-3 {
+  left: 0.75rem;
+}
+body .right-3 {
+  right: 0.75rem;
+}
 body .gap-4 {
   gap: 1rem;
 }
@@ -576,6 +629,18 @@ body .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+body .top-4 {
+  top: 1rem;
+}
+body .bottom-4 {
+  bottom: 1rem;
+}
+body .left-4 {
+  left: 1rem;
+}
+body .right-4 {
+  right: 1rem;
+}
 body .gap-5 {
   gap: 1.25rem;
 }
@@ -631,6 +696,18 @@ body .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+body .top-5 {
+  top: 1.25rem;
+}
+body .bottom-5 {
+  bottom: 1.25rem;
+}
+body .left-5 {
+  left: 1.25rem;
+}
+body .right-5 {
+  right: 1.25rem;
+}
 body .gap-6 {
   gap: 1.5rem;
 }
@@ -686,6 +763,18 @@ body .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+body .top-6 {
+  top: 1.5rem;
+}
+body .bottom-6 {
+  bottom: 1.5rem;
+}
+body .left-6 {
+  left: 1.5rem;
+}
+body .right-6 {
+  right: 1.5rem;
+}
 body .gap-7 {
   gap: 1.75rem;
 }
@@ -741,6 +830,18 @@ body .py-7 {
   padding-top: 1.75rem;
   padding-bottom: 1.75rem;
 }
+body .top-7 {
+  top: 1.75rem;
+}
+body .bottom-7 {
+  bottom: 1.75rem;
+}
+body .left-7 {
+  left: 1.75rem;
+}
+body .right-7 {
+  right: 1.75rem;
+}
 body .gap-8 {
   gap: 2rem;
 }
@@ -796,6 +897,18 @@ body .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+body .top-8 {
+  top: 2rem;
+}
+body .bottom-8 {
+  bottom: 2rem;
+}
+body .left-8 {
+  left: 2rem;
+}
+body .right-8 {
+  right: 2rem;
+}
 body .gap-9 {
   gap: 2.25rem;
 }
@@ -851,6 +964,18 @@ body .py-9 {
   padding-top: 2.25rem;
   padding-bottom: 2.25rem;
 }
+body .top-9 {
+  top: 2.25rem;
+}
+body .bottom-9 {
+  bottom: 2.25rem;
+}
+body .left-9 {
+  left: 2.25rem;
+}
+body .right-9 {
+  right: 2.25rem;
+}
 body .gap-10 {
   gap: 2.5rem;
 }
@@ -906,6 +1031,18 @@ body .py-10 {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
+body .top-10 {
+  top: 2.5rem;
+}
+body .bottom-10 {
+  bottom: 2.5rem;
+}
+body .left-10 {
+  left: 2.5rem;
+}
+body .right-10 {
+  right: 2.5rem;
+}
 @media (min-width: 640px) {
   body .sm\:hidden {
     display: none;