doom-design-system 0.1.15 → 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;
+}