doom-design-system 0.1.15 → 0.2.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,17 +1,18 @@
-import React from 'react';
+import React from "react";
 interface AccordionItemProps {
     value: string;
     trigger: string;
     children: React.ReactNode;
-    isOpen?: boolean;
-    onToggle?: () => void;
+    className?: string;
 }
-export declare function AccordionItem({ value, trigger, children, isOpen, onToggle }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ value, trigger, children, className, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
 interface AccordionProps {
-    type?: 'single' | 'multiple';
+    type?: "single" | "multiple";
     children: React.ReactNode;
     defaultValue?: string | string[];
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
     className?: string;
 }
-export declare function Accordion({ type, children, defaultValue, className }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Accordion({ type, children, defaultValue, value: controlledValue, onValueChange, className, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Accordion/Accordion.js

@@ -1,36 +1,44 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { ChevronDown } from 'lucide-react';
-import styles from './Accordion.module.css';
-import React, { useState } from 'react';
-export function AccordionItem({ value, trigger, children, isOpen, onToggle }) {
-    return (_jsxs("div", { className: styles.item, children: [_jsx("h3", { className: styles.header, children: _jsxs("button", { className: styles.trigger, type: "button", onClick: onToggle, "aria-expanded": isOpen, children: [trigger, _jsx(ChevronDown, { size: 20, strokeWidth: 2.5, className: styles.icon })] }) }), _jsx("div", { className: styles.contentWrapper, "aria-hidden": !isOpen, role: "region", children: _jsx("div", { className: styles.contentBody, children: children }) })] }));
+import clsx from "clsx";
+import { ChevronDown } from "lucide-react";
+import { Stack } from "../Layout/Layout.js";
+import { Button } from "../Button/Button.js";
+import { Text } from "../Text/Text.js";
+import styles from "./Accordion.module.css";
+import React, { useState } from "react";
+const AccordionContext = React.createContext(null);
+export function AccordionItem({ value, trigger, children, className, }) {
+    const context = React.useContext(AccordionContext);
+    if (!context)
+        throw new Error("AccordionItem must be used within Accordion");
+    const reactId = React.useId();
+    const triggerId = `accordion-trigger-${reactId}`;
+    const contentId = `accordion-content-${reactId}`;
+    const isOpen = Array.isArray(context.value)
+        ? context.value.includes(value)
+        : context.value === value;
+    return (_jsxs("div", { className: clsx(styles.item, isOpen && styles.isOpen, className), children: [_jsx(Text, { variant: "h3", className: styles.header, children: _jsxs(Button, { id: triggerId, variant: "ghost", className: styles.trigger, onClick: () => context.onToggle(value), "aria-expanded": isOpen, "aria-controls": contentId, children: [trigger, _jsx(ChevronDown, { size: 20, strokeWidth: 2.5, className: styles.icon })] }) }), _jsx("div", { id: contentId, className: styles.contentWrapper, "aria-hidden": !isOpen, role: "region", "aria-labelledby": triggerId, children: _jsx("div", { className: styles.contentBody, children: children }) })] }));
 }
-export function Accordion({ type = 'single', children, defaultValue, className }) {
-    const [value, setValue] = useState(defaultValue || (type === 'multiple' ? [] : ''));
+export function Accordion({ type = "single", children, defaultValue, value: controlledValue, onValueChange, className, }) {
+    const [internalValue, setInternalValue] = useState(defaultValue || (type === "multiple" ? [] : ""));
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
     const handleToggle = (itemValue) => {
-        if (type === 'single') {
-            setValue(prev => prev === itemValue ? '' : itemValue);
+        let newValue;
+        if (type === "single") {
+            newValue = currentValue === itemValue ? "" : itemValue;
         }
         else {
-            setValue(prev => {
-                const arr = Array.isArray(prev) ? prev : [];
-                if (arr.includes(itemValue)) {
-                    return arr.filter(v => v !== itemValue);
-                }
-                return [...arr, itemValue];
-            });
+            const arr = Array.isArray(currentValue) ? currentValue : [];
+            newValue = arr.includes(itemValue)
+                ? arr.filter((v) => v !== itemValue)
+                : [...arr, itemValue];
         }
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
     };
-    return (_jsx("div", { className: clsx(styles.root, className), children: React.Children.map(children, (child) => {
-            if (!React.isValidElement(child))
-                return null;
-            const itemValue = child.props.value;
-            const isOpen = Array.isArray(value) ? value.includes(itemValue) : value === itemValue;
-            return React.cloneElement(child, {
-                isOpen,
-                onToggle: () => handleToggle(itemValue),
-            });
-        }) }));
+    return (_jsx(AccordionContext.Provider, { value: { value: currentValue, onToggle: handleToggle, type }, children: _jsx(Stack, { gap: 0, className: clsx(styles.root, className), children: children }) }));
 }

package/dist/components/Accordion/Accordion.module.css

@@ -1,52 +1,108 @@
 .root {
   display: flex;
   flex-direction: column;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  background-color: var(--card-bg);
-  overflow: hidden;
+  padding: var(--spacing-lg);
 }
 
 .item {
-  border-bottom: var(--border-width) solid var(--card-border);
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  box-shadow: var(--shadow-hard);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  overflow: hidden;
+}
+.item:not(:first-child) {
+  margin-top: calc(var(--border-width) * -1);
+}
+.item:first-child {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
 }
 .item:last-child {
-  border-bottom: none;
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+.item.isOpen + .item {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  margin-top: var(--spacing-sm);
+}
+.item:has(+ .item.isOpen) {
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+  margin-bottom: var(--spacing-sm);
+}
+.item.isOpen {
+  margin: var(--spacing-sm) 0;
+  transform: translate(-2px, -2px);
+  border-radius: var(--radius);
+  z-index: 10;
+  box-shadow: var(--shadow-hard);
+}
+.item.isOpen + .item.isOpen {
+  margin-top: var(--spacing-sm);
+}
+.item.isOpen .trigger.trigger {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.item.isOpen .trigger.trigger:hover {
+  background-color: var(--primary);
+  filter: brightness(1.1);
+}
+.item.isOpen .contentBody {
+  border-top: var(--border-width) solid var(--card-border);
+  padding-top: var(--spacing-md);
 }
 
 .header {
-  display: flex;
   margin: 0;
+  display: flex;
 }
 
-.trigger {
-  all: unset;
-  flex: 1;
-  display: flex;
-  align-items: center;
+/* Specificity bridge to override Button defaults without !important */
+.trigger.trigger {
+  width: 100%;
+  height: auto;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  transform: none;
   justify-content: space-between;
   padding: var(--spacing-md);
+  background-color: var(--card-bg);
+  color: var(--foreground);
+  text-transform: none;
+  letter-spacing: normal;
   font-family: var(--font-heading);
   font-weight: 700;
   font-size: var(--text-base);
-  background-color: var(--card-bg);
-  color: var(--foreground);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
 }
-.trigger:hover {
+.trigger.trigger::after {
+  display: none;
+}
+.trigger.trigger:hover {
   background-color: color-mix(in srgb, var(--primary) 25%, transparent);
+  transform: none;
+  box-shadow: none;
 }
-.trigger:focus-visible {
-  outline: 2px solid var(--primary);
+.trigger.trigger:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
+  box-shadow: inset 0 0 0 2px var(--primary);
   position: relative;
   z-index: 1;
 }
-.trigger .icon {
-  transition: transform 0.2s ease;
+.trigger.trigger[aria-expanded=true] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.trigger.trigger .icon {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   transform: rotate(0deg);
 }
-.trigger[aria-expanded=true] .icon {
+.trigger.trigger[aria-expanded=true] .icon {
   transform: rotate(180deg);
 }
 

package/dist/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
-export type AvatarShape = 'circle' | 'square';
+import React from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "square";
 interface AvatarProps {
     src?: string;
     alt?: string;
@@ -9,5 +9,5 @@ interface AvatarProps {
     shape?: AvatarShape;
     className?: string;
 }
-export declare function Avatar({ src, alt, fallback, size, shape, className }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ src, alt, fallback, size, shape, className, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Avatar/Avatar.js

@@ -1,9 +1,9 @@
-'use client';
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import clsx from 'clsx';
-import styles from './Avatar.module.css';
-export function Avatar({ src, alt = 'Avatar', fallback, size = 'md', shape = 'circle', className }) {
+import { useState } from "react";
+import clsx from "clsx";
+import styles from "./Avatar.module.css";
+export function Avatar({ src, alt = "Avatar", fallback, size = "md", shape = "square", className, }) {
     const [hasError, setHasError] = useState(false);
-    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx("img", { src: src, alt: alt, className: styles.image, onError: () => setHasError(true) })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === 'string' ? fallback.slice(0, 2) : fallback })) }));
+    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx("img", { src: src, alt: alt, className: styles.image, onError: () => setHasError(true) })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === "string" ? fallback.slice(0, 2) : fallback })) }));
 }

package/dist/components/Badge/Badge.module.css

@@ -15,15 +15,15 @@
 }
 .badge.success {
   background-color: var(--success);
-  color: var(--card-bg);
+  color: var(--success-foreground);
 }
 .badge.warning {
   background-color: var(--warning);
-  color: var(--card-bg);
+  color: var(--warning-foreground);
 }
 .badge.error {
   background-color: var(--error);
-  color: var(--card-bg);
+  color: var(--error-foreground);
 }
 .badge.secondary {
   background-color: var(--secondary);

package/dist/components/Button/Button.module.css

@@ -64,7 +64,7 @@
   --btn-focus-border: var(--card-border);
   --btn-focus-shadow: #000000;
   background-color: var(--success);
-  color: var(--card-bg);
+  color: var(--success-foreground);
 }
 .success:hover {
   filter: brightness(1.1);

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     label?: string;
     error?: boolean;
 }

package/dist/components/Checkbox/Checkbox.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)
@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from 'react';
-import clsx from 'clsx';
-import { Check } from 'lucide-react';
-import { Label } from '../Label/index.js';
-import styles from './Checkbox.module.css';
+import { forwardRef, useId } from "react";
+import clsx from "clsx";
+import { Check } from "lucide-react";
+import { Label } from "../Label/index.js";
+import styles from "./Checkbox.module.css";
 export const Checkbox = forwardRef((_a, ref) => {
     var { className, label, error, disabled, checked, defaultChecked, onChange, id: propsId } = _a, props = __rest(_a, ["className", "label", "error", "disabled", "checked", "defaultChecked", "onChange", "id"]);
     const generatedId = useId();
     const id = propsId || generatedId;
-    return (_jsxs("div", { className: clsx(styles.checkboxWrapper, disabled && styles.disabled, className), children: [_jsx("input", Object.assign({ id: id, type: "checkbox", className: styles.checkboxInput, ref: ref, disabled: disabled, checked: checked, defaultChecked: defaultChecked, onChange: onChange }, props)), _jsx("label", { htmlFor: id, className: clsx(styles.checkboxDisplay), "aria-hidden": "true", children: _jsx(Check, { className: styles.icon }) }), label && (_jsx(Label, { htmlFor: id, className: styles.labelOverride, children: label }))] }));
+    return (_jsxs(Label, { htmlFor: id, className: clsx(styles.checkboxWrapper, disabled && styles.disabled, className), children: [_jsx("input", Object.assign({ id: id, type: "checkbox", className: styles.checkboxInput, ref: ref, disabled: disabled, checked: checked, defaultChecked: defaultChecked, onChange: onChange }, props)), _jsx("span", { className: clsx(styles.checkboxDisplay), "aria-hidden": "true", children: _jsx(Check, { className: styles.icon }) }), label && _jsx("span", { className: styles.labelOverride, children: label })] }));
 });

package/dist/components/Drawer/Drawer.js

@@ -5,8 +5,10 @@ import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { Button } from "../Button/Button.js";
 import styles from "./Drawer.module.css";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 export function Drawer({ isOpen, onClose, title, side = "right", children, footer, className, }) {
+    const reactId = React.useId();
+    const titleId = `drawer-title-${reactId}`;
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
@@ -29,7 +31,7 @@ export function Drawer({ isOpen, onClose, title, side = "right", children, foote
             window.addEventListener("keydown", handleEsc);
         return () => window.removeEventListener("keydown", handleEsc);
     }, [isOpen, onClose]);
-    if (!mounted || !isOpen)
+    if (!mounted)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.open), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], isOpen && styles.open, className), role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: styles.header, children: [_jsx("h2", { className: styles.title, children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Drawer" : undefined, children: [_jsxs("div", { className: styles.header, children: [title && (_jsx("h2", { id: titleId, className: styles.title, children: title })), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
 }

package/dist/components/Drawer/Drawer.module.css

@@ -4,12 +4,14 @@
   background-color: rgba(0, 0, 0, var(--overlay-opacity));
   backdrop-filter: blur(4px);
   opacity: 0;
-  transition: opacity 0.2s ease-in-out;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   pointer-events: none;
   z-index: var(--z-dropdown);
 }
-.overlay.open {
+.overlay.isOpen {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
 }
 
@@ -19,7 +21,7 @@
   z-index: var(--z-modal);
   display: flex;
   flex-direction: column;
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   top: 0;
   bottom: 0;
   width: 100%;
@@ -31,16 +33,16 @@
   box-shadow: 8px 0px 0px 0px var(--card-border);
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% - 20px));
 }
 .panel.right {
   right: 0;
   box-shadow: -8px 0px 0px 0px var(--card-border);
   border-top-left-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
-  transform: translateX(100%);
+  transform: translateX(calc(100% + 20px));
 }
-.panel.open {
+.panel.isOpen {
   visibility: visible;
   transform: translateX(0);
 }

package/dist/components/Form/Form.module.css

@@ -16,6 +16,7 @@
 .message {
   font-size: 0.75rem;
   font-weight: 500;
+  margin-top: -0.25rem;
 }
 
 .error {

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

@@ -1,12 +1,13 @@
 import React from "react";
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "title"> {
     label?: string;
     error?: string;
     helperText?: string;
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
+    showCount?: boolean;
     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, style, className, format, validate, onBlur, onFocus, value, id, required, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+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 {};

package/dist/components/Input/Input.js

@@ -11,14 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useId } from "react";
+import React, { useState, useId } from "react";
 import clsx from "clsx";
 import { Label } from "../Label/Label.js";
 import styles from "./Input.module.css";
 export function Input(_a) {
-    var { label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value, id, required } = _a, props = __rest(_a, ["label", "error", "helperText", "startAdornment", "endAdornment", "style", "className", "format", "validate", "onBlur", "onFocus", "value", "id", "required"]);
+    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"]);
     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);
     const reactId = useId();
     const inputId = id || `input-${reactId}`;
     const helperId = `${inputId}-helper`;
@@ -37,7 +38,18 @@ export function Input(_a) {
         if (onFocus)
             onFocus(e);
     };
+    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 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({ className: clsx(styles.input, startAdornment && styles.hasStartAdornment, endAdornment && styles.hasEndAdornment, error && styles.error), id: inputId, required: required, value: displayValue, onBlur: handleBlur, onFocus: handleFocus, "aria-invalid": !!error, "aria-describedby": describedBy }, props)), endAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.end), children: endAdornment }))] }), helperText && !error && (_jsx("span", { id: helperId, className: styles.helperText, children: helperText })), error && (_jsx("span", { id: errorId, className: clsx(styles.helperText, styles.error), role: "alert", children: error }))] }));
+    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({ className: clsx(styles.input, startAdornment && styles.hasStartAdornment, endAdornment && styles.hasEndAdornment, error && styles.error), id: inputId, required: required, value: displayValue, defaultValue: defaultValue, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, maxLength: maxLength, "aria-invalid": !!error, "aria-describedby": describedBy }, 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", { 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/Input/Input.module.css

@@ -41,6 +41,19 @@
   border-color: var(--error);
   box-shadow: 7px 7px 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: 20px 20px;
+  box-shadow: none;
+  transform: none;
+  color: var(--muted-foreground);
+}
+.input:disabled::placeholder {
+  color: var(--muted-foreground);
+}
 .input.hasStartAdornment {
   padding-left: 2rem;
 }
@@ -62,10 +75,23 @@
   right: 0.75rem;
 }
 
+.bottomRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-top: -0.25rem;
+}
+
+.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);
@@ -84,3 +110,10 @@
     transform: translateX(4px);
   }
 }
+
+.counter {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
+  white-space: nowrap;
+}

package/dist/components/Modal/Modal.d.ts

@@ -1,16 +1,17 @@
 import React from "react";
-interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     isOpen: boolean;
     onClose: () => void;
-    title?: string;
+    title?: React.ReactNode;
     children: React.ReactNode;
     footer?: React.ReactNode;
 }
-export declare function ModalHeader({ children, className, id, }: {
+interface ModalHeaderProps {
     children: React.ReactNode;
     className?: string;
     id?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function ModalHeader({ children, className, id }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare function ModalBody({ children, className, }: {
     children: React.ReactNode;
     className?: string;

package/dist/components/Modal/Modal.js

@@ -17,26 +17,30 @@ import { X } from "lucide-react";
 import clsx from "clsx";
 import { Card } from "../Card/Card.js";
 import { Button } from "../Button/Button.js";
-import { Flex } from "../Layout/Layout.js";
+import { Stack, Flex } from "../Layout/Layout.js";
 import styles from "./Modal.module.css";
 const ModalContext = React.createContext({
     onClose: () => { },
 });
-export function ModalHeader({ children, className, id, }) {
+export function ModalHeader({ children, className, id }) {
     const { onClose, titleId } = React.useContext(ModalContext);
-    return (_jsxs(Flex, { align: "center", justify: "space-between", className: clsx(styles.header, className), children: [_jsx("h2", { id: id || titleId, children: children }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
+    return (_jsxs(Flex, { align: "center", justify: "space-between", className: clsx(styles.header, className), children: [_jsx("div", { id: id || titleId, className: styles.headerContent, children: children }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", className: styles.closeButton, children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
 }
 export function ModalBody({ children, className, }) {
     return _jsx("div", { className: clsx(styles.body, className), children: children });
 }
 export function ModalFooter({ children, className, }) {
-    return _jsx("div", { className: clsx(styles.footer, className), children: children });
+    return (_jsx(Flex, { justify: "flex-end", align: "center", gap: "var(--spacing-md)", className: clsx(styles.footer, className), children: children }));
 }
 export function Modal(_a) {
     var { isOpen, onClose, title, children, footer, className, style } = _a, props = __rest(_a, ["isOpen", "onClose", "title", "children", "footer", "className", "style"]);
     const overlayRef = useRef(null);
     const reactId = useId();
     const titleId = `modal-title-${reactId}`;
+    const [mounted, setMounted] = React.useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
     useEffect(() => {
         const handleEscape = (e) => {
             if (e.key === "Escape")
@@ -46,17 +50,20 @@ export function Modal(_a) {
             document.addEventListener("keydown", handleEscape);
             document.body.style.overflow = "hidden";
         }
+        else {
+            document.body.style.overflow = "unset";
+        }
         return () => {
             document.removeEventListener("keydown", handleEscape);
             document.body.style.overflow = "unset";
         };
     }, [isOpen, onClose]);
-    if (!isOpen)
+    if (!mounted)
         return null;
     const handleOverlayClick = (e) => {
         if (e.target === overlayRef.current) {
             onClose();
         }
     };
-    return createPortal(_jsx(ModalContext.Provider, { value: { onClose, titleId }, children: _jsx("div", { className: clsx(styles.overlay, className), ref: overlayRef, onClick: handleOverlayClick, style: style, children: _jsx("div", { className: styles.contentContainer, children: _jsx("div", Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined }, props, { children: _jsx(Card, { style: { padding: 0, overflow: "hidden" }, children: title ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: title }), _jsx(ModalBody, { children: children }), footer && _jsx(ModalFooter, { children: footer })] })) : (children) }) })) }) }) }), document.body);
+    return createPortal(_jsx(ModalContext.Provider, { value: { onClose, titleId }, children: _jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen, className), ref: overlayRef, onClick: handleOverlayClick, style: style, children: _jsx("div", { className: styles.contentContainer, children: _jsx("div", Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined }, props, { children: _jsx(Card, { className: styles.modalCard, style: { padding: 0, overflow: "hidden" }, children: title ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: title }), _jsxs(Stack, { gap: 0, className: styles.modalContent, children: [_jsx(ModalBody, { children: children }), footer && _jsx(ModalFooter, { children: footer })] })] })) : (children) }) })) }) }) }), document.body);
 }