doom-design-system 0.1.14 → 0.2.0

package/dist/components/Modal/Modal.module.css

@@ -1,21 +1,3 @@
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes slideUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
 .overlay {
   position: fixed;
   inset: 0;
@@ -26,32 +8,85 @@
   padding: var(--spacing-md);
   backdrop-filter: blur(4px);
   background-color: rgba(0, 0, 0, var(--overlay-opacity));
-  animation: fadeIn 0.2s ease-out;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
+}
+.overlay.isOpen {
+  opacity: 1;
+  visibility: visible;
+}
+.overlay.isOpen .contentContainer {
+  transform: translateY(0);
+  opacity: 1;
 }
 
 .contentContainer {
   width: 100%;
-  max-width: 28rem;
-  animation: slideUp 0.3s ease-out;
+  max-width: 32rem;
+  transform: translateY(20px);
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.modalCard {
+  /* Prevent sub-pixel slivers by matching the card background to the header color */
+  background-color: var(--primary);
 }
 
 .header {
   padding: var(--spacing-lg);
-  border-bottom: var(--border-width) solid var(--card-border);
-  background: var(--background);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border-bottom: none;
+}
+
+.headerContent {
+  flex: 1;
+  max-width: 85%;
 }
-.header h2 {
-  font-size: var(--text-xl);
-  font-weight: bold;
-  margin: 0;
+
+.closeButton {
+  flex-shrink: 0;
+  background-color: var(--error) !important;
+  color: white !important;
+  border: var(--border-width) solid var(--card-border) !important;
+  border-radius: var(--radius) !important;
+  height: 36px !important;
+  width: 36px !important;
+  min-width: 36px !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+  /* Use a semi-transparent black shadow instead of a theme variable to guarantee visibility on dark primary headers */
+  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.4) !important;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.closeButton:hover {
+  filter: brightness(1.1);
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.4) !important;
+}
+.closeButton:active {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.4) !important;
+}
+
+.modalContent {
+  background-color: var(--card-bg);
+  /* Slight bleed to bridge any sub-pixel gaps at the header junction */
+  padding-top: 1px;
+  margin-top: -1px;
 }
 
 .body {
   padding: var(--spacing-lg);
+  color: var(--foreground);
 }
 
 .footer {
   padding: var(--spacing-lg);
-  border-top: var(--border-width) solid var(--card-border);
-  background: var(--background);
+  padding-top: 0;
 }

package/dist/components/Popover/Popover.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
 interface PopoverProps {
     trigger: React.ReactNode;
     content: React.ReactNode;
     isOpen: boolean;
     onClose: () => void;
-    placement?: 'bottom-start' | 'bottom-end' | 'bottom-center' | 'top-start' | 'top-end' | 'top-center';
+    placement?: "bottom-start" | "bottom-end" | "bottom-center" | "top-start" | "top-end" | "top-center";
     offset?: number;
 }
-export declare function Popover({ trigger, content, isOpen, onClose, placement, offset }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, content, isOpen, onClose, placement, offset, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Popover/Popover.js

@@ -1,13 +1,13 @@
-'use client';
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-import styles from './Popover.module.css';
-import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
-export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom-start', offset = 8 }) {
+import { createPortal } from "react-dom";
+import styles from "./Popover.module.css";
+import { useState, useRef, useEffect, useCallback, useLayoutEffect, } from "react";
+export function Popover({ trigger, content, isOpen, onClose, placement = "bottom-start", offset = 8, }) {
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const [position, setPosition] = useState({ top: 0, left: 0 });
-    const [transformOrigin, setTransformOrigin] = useState('top left');
+    const [transformOrigin, setTransformOrigin] = useState("top left");
     const updatePosition = useCallback(() => {
         if (!isOpen || !triggerRef.current || !contentRef.current)
             return;
@@ -17,24 +17,24 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
         const viewportHeight = window.innerHeight;
         let top = 0;
         let left = 0;
-        let origin = 'top center';
+        let origin = "top center";
         // Edge Config
         const padding = 16;
-        const isTop = placement.startsWith('top');
+        const isTop = placement.startsWith("top");
         if (isTop) {
             top = triggerRect.top - contentRect.height - offset;
-            origin = 'bottom';
+            origin = "bottom";
             if (top < 0) {
                 top = triggerRect.bottom + offset;
-                origin = 'top';
+                origin = "top";
             }
         }
         else {
             top = triggerRect.bottom + offset;
-            origin = 'top';
+            origin = "top";
             if (top + contentRect.height > viewportHeight) {
                 top = triggerRect.top - contentRect.height - offset;
-                origin = 'bottom';
+                origin = "bottom";
                 if (top < 0)
                     top = padding;
             }
@@ -46,6 +46,19 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
         if (top + contentRect.height > viewportHeight - padding) {
             top = viewportHeight - contentRect.height - padding;
         }
+        const align = placement.split("-")[1];
+        if (align === "start") {
+            left = triggerRect.left;
+            origin += " left";
+        }
+        else if (align === "end") {
+            left = triggerRect.right - contentRect.width;
+            origin += " right";
+        }
+        else {
+            left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;
+            origin += " center";
+        }
         // Horizontal Clamping
         if (left + contentRect.width > viewportWidth - padding) {
             left = viewportWidth - contentRect.width - padding;
@@ -53,19 +66,6 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
         if (left < padding) {
             left = padding;
         }
-        const align = placement.split('-')[1];
-        if (align === 'start') {
-            left = triggerRect.left;
-            origin += ' left';
-        }
-        else if (align === 'end') {
-            left = triggerRect.right - contentRect.width;
-            origin += ' right';
-        }
-        else {
-            left = triggerRect.left + (triggerRect.width / 2) - (contentRect.width / 2);
-            origin += ' center';
-        }
         setPosition({ top, left });
         setTransformOrigin(origin);
     }, [isOpen, placement, offset]);
@@ -73,12 +73,12 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
     useLayoutEffect(() => {
         if (isOpen) {
             updatePosition();
-            window.addEventListener('resize', updatePosition);
-            window.addEventListener('scroll', updatePosition, true);
+            window.addEventListener("resize", updatePosition);
+            window.addEventListener("scroll", updatePosition, true);
         }
         return () => {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
         };
     }, [isOpen, updatePosition]);
     // Handle click outside
@@ -93,12 +93,14 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
                 onClose();
             }
         }
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, onClose]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: styles.triggerWrapper, children: trigger }), isOpen && typeof document !== 'undefined' && createPortal(_jsx("div", { ref: contentRef, className: styles.popover, style: {
-                    top: position.top,
-                    left: position.left,
-                    transformOrigin: transformOrigin,
-                }, children: content }), document.body)] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: styles.triggerWrapper, children: trigger }), isOpen &&
+                typeof document !== "undefined" &&
+                createPortal(_jsx("div", { ref: contentRef, className: styles.popover, style: {
+                        top: position.top,
+                        left: position.left,
+                        transformOrigin: transformOrigin,
+                    }, children: content }), document.body)] }));
 }

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -5,6 +5,7 @@ interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
     height?: string | number;
     color?: string;
     showStripes?: boolean;
+    label?: React.ReactNode;
 }
-export declare function ProgressBar({ value, max, height, color, showStripes, className, style, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ value, max, height, color, showStripes, label, className, style, id, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ProgressBar/ProgressBar.js

@@ -13,13 +13,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import styles from "./ProgressBar.module.css";
+import React from "react";
+import { Label } from "../Label/Label.js";
 export function ProgressBar(_a) {
-    var { value, max = 100, height = "24px", color = "var(--primary)", showStripes = true, className, style } = _a, props = __rest(_a, ["value", "max", "height", "color", "showStripes", "className", "style"]);
+    var { value, max = 100, height = "24px", color = "var(--primary)", showStripes = true, label, className, style, id } = _a, props = __rest(_a, ["value", "max", "height", "color", "showStripes", "label", "className", "style", "id"]);
+    const reactId = React.useId();
+    const barId = id || `progress-${reactId}`;
+    const labelId = `label-${reactId}`;
     const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
     const clampedValue = Math.min(Math.max(value, 0), max);
     const heightStyle = typeof height === "number" ? `${height}px` : height;
-    return (_jsxs("div", Object.assign({ role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, className: clsx(styles.container, className), style: Object.assign({ "--height": heightStyle }, style) }, props, { children: [_jsx("div", { className: styles.fill, style: {
-                    "--percentage": `${percentage}%`,
-                    "--color": color,
-                }, "data-complete": percentage >= 100 }), showStripes && _jsx("div", { className: styles.stripes })] })));
+    return (_jsxs("div", { className: clsx(styles.wrapper, className), children: [label && _jsx(Label, { id: labelId, children: label }), _jsxs("div", Object.assign({ id: barId, role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? props["aria-label"] || "Progress" : undefined, className: styles.container, style: Object.assign({ "--height": heightStyle }, style) }, props, { children: [_jsx("div", { className: styles.fill, style: {
+                            "--percentage": `${percentage}%`,
+                            "--color": color,
+                        }, "data-complete": percentage >= 100 }), showStripes && _jsx("div", { className: styles.stripes })] }))] }));
 }

package/dist/components/ProgressBar/ProgressBar.module.css

@@ -1,3 +1,10 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
 .container {
   height: var(--height, 24px);
   width: 100%;

package/dist/components/Select/Select.js

@@ -13,9 +13,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useId, } from "react";
 import clsx from "clsx";
-import { Text } from "../Text/Text.js";
 import { Popover } from "../Popover/Popover.js";
 import { Check, ChevronDown } from "lucide-react";
+import { Label } from "../Label/Label.js";
 import styles from "./Select.module.css";
 export function Select(_a) {
     var _b;
@@ -101,11 +101,13 @@ export function Select(_a) {
                 break;
         }
     };
-    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Text, { as: "label", id: labelId, variant: "small", weight: "bold", color: "muted", className: "mb-1 block", htmlFor: selectId, children: label })), _jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs("button", Object.assign({ ref: triggerRef, className: styles.trigger, type: "button", id: selectId, onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-required": required, disabled: disabled, autoFocus: autoFocus }, props, { children: [_jsx("span", { children: selectedOption
+    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Label, { htmlFor: selectId, required: required, children: label })), _jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs("button", Object.assign({ ref: triggerRef, className: styles.trigger, type: "button", id: selectId, onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": isOpen ? listboxId : undefined, "aria-labelledby": label ? labelId : undefined, "aria-label": !label
+                        ? (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder || "Select option"
+                        : undefined, "aria-required": required, disabled: disabled, autoFocus: autoFocus }, props, { children: [_jsx("span", { children: selectedOption
                                 ? selectedOption.label
-                                : placeholder || "Select..." }), _jsx(ChevronDown, { size: 16, strokeWidth: 2.5, style: { marginLeft: "0.5rem" } })] })), content: _jsx("ul", { id: listboxId, role: "listbox", "aria-labelledby": label ? labelId : undefined, className: styles.optionsList, style: { width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, children: options.map((opt, index) => {
+                                : placeholder || "Select..." }), _jsx(ChevronDown, { size: 16, strokeWidth: 2.5, style: { marginLeft: "0.5rem" }, "aria-hidden": "true" })] })), content: _jsx("ul", { id: listboxId, role: "listbox", "aria-labelledby": label ? labelId : selectId, className: styles.optionsList, style: { width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, children: options.map((opt, index) => {
                         const isSelected = String(opt.value) === String(currentValue);
                         const isHighlighted = index === highlightedIndex;
                         return (_jsxs("li", { id: `${listboxId}-option-${index}`, role: "option", "aria-selected": isSelected, className: clsx(styles.optionItem, isSelected && styles.selected, isHighlighted && styles.highlighted), onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), children: [_jsx("span", { children: opt.label }), isSelected && (_jsx(Check, { size: 14, strokeWidth: 3, "aria-hidden": "true" }))] }, opt.value));
-                    }) }) }), _jsx("input", { type: "hidden", name: name, value: currentValue, required: required, "aria-hidden": "true" })] }));
+                    }) }) }), _jsx("input", { type: "hidden", name: name, value: currentValue, required: required, "aria-hidden": "true", "aria-labelledby": label ? labelId : undefined })] }));
 }

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

@@ -71,11 +71,11 @@
 }
 .optionItem:hover {
   background-color: color-mix(in srgb, var(--primary), transparent 85%);
-  color: var(--primary);
+  color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
 }
 .optionItem.highlighted {
   background: color-mix(in srgb, var(--primary), transparent 85%);
-  color: var(--primary);
+  color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
 }
 .optionItem.selected {
   background: var(--primary);

package/dist/components/Sheet/Sheet.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface SheetProps {
     isOpen: boolean;
     onClose: () => void;
@@ -6,5 +6,5 @@ interface SheetProps {
     children: React.ReactNode;
     className?: string;
 }
-export declare function Sheet({ isOpen, onClose, title, children, className }: SheetProps): React.ReactPortal | null;
+export declare function Sheet({ isOpen, onClose, title, children, className, }: SheetProps): React.ReactPortal | null;
 export {};

package/dist/components/Sheet/Sheet.js

@@ -1,36 +1,38 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import clsx from 'clsx';
-import { Button } from '../Button/Button.js';
-import { Flex } from '../Layout/Layout.js';
-import styles from './Sheet.module.css';
-import { X } from 'lucide-react';
-export function Sheet({ isOpen, onClose, title, children, className }) {
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { Flex } from "../Layout/Layout.js";
+import styles from "./Sheet.module.css";
+import { X } from "lucide-react";
+export function Sheet({ isOpen, onClose, title, children, className, }) {
+    const reactId = React.useId();
+    const titleId = `sheet-title-${reactId}`;
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
         if (isOpen) {
-            document.body.style.overflow = 'hidden';
+            document.body.style.overflow = "hidden";
         }
         else {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         }
         return () => {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         };
     }, [isOpen]);
     useEffect(() => {
         const handleEsc = (e) => {
-            if (e.key === 'Escape')
+            if (e.key === "Escape")
                 onClose();
         };
         if (isOpen)
-            window.addEventListener('keydown', handleEsc);
-        return () => window.removeEventListener('keydown', handleEsc);
+            window.addEventListener("keydown", handleEsc);
+        return () => window.removeEventListener("keydown", handleEsc);
     }, [isOpen, onClose]);
     if (!mounted)
         return null;
-    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, isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", children: [_jsx("div", { className: styles.handleBar }), _jsxs(Flex, { align: "center", justify: "space-between", className: styles.header, children: [_jsx("h2", { className: styles.title, children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close sheet", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children })] })] }), 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, isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Sheet" : undefined, children: [_jsx("div", { className: styles.handleBar }), _jsxs(Flex, { align: "center", justify: "space-between", 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 sheet", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children })] })] }), document.body);
 }

package/dist/components/Sheet/Sheet.module.css

@@ -18,8 +18,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  max-height: 65vh;
-  min-height: 45vh;
+  height: 85vh;
   background-color: var(--card-bg);
   border-top: var(--border-width) solid var(--card-border);
   border-left: var(--border-width) solid var(--card-border);

package/dist/components/Slider/Slider.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+import React from "react";
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     label?: string;
     showValue?: boolean;
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;
 }
-export declare function Slider({ label, showValue, value, defaultValue, onChange, min, max, step, className, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ label, showValue, value, defaultValue, onChange, min, max, step, className, id, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Slider/Slider.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,11 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Slider.module.css';
-import React from 'react';
+import clsx from "clsx";
+import styles from "./Slider.module.css";
+import React from "react";
+import { Label } from "../Label/Label.js";
 export function Slider(_a) {
-    var { label, showValue, value, defaultValue, onChange, min = 0, max = 100, step = 1, className } = _a, props = __rest(_a, ["label", "showValue", "value", "defaultValue", "onChange", "min", "max", "step", "className"]);
+    var { label, showValue, value, defaultValue, onChange, min = 0, max = 100, step = 1, className, id } = _a, props = __rest(_a, ["label", "showValue", "value", "defaultValue", "onChange", "min", "max", "step", "className", "id"]);
+    const reactId = React.useId();
+    const inputId = id || `slider-${reactId}`;
     const [internalValue, setInternalValue] = React.useState(defaultValue !== undefined ? defaultValue : min);
     const isControlled = value !== undefined;
     const currentValue = isControlled ? value : internalValue;
@@ -26,6 +29,7 @@ export function Slider(_a) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
     };
-    const percentage = ((currentValue - min) / (max - min)) * 100;
-    return (_jsxs("div", { className: clsx(styles.container, className), children: [(label || showValue) && (_jsxs("div", { className: styles.labelRow, children: [label && _jsx("span", { children: label }), showValue && _jsx("span", { className: styles.valueDisplay, children: currentValue })] })), _jsxs("div", { className: styles.trackWrapper, children: [_jsx("div", { className: styles.progressFill, style: { '--percentage': `${percentage}%` } }), _jsx("input", Object.assign({ className: styles.rangeInput, type: "range", min: min, max: max, step: step, value: currentValue, onChange: handleChange }, props))] })] }));
+    const percentage = ((currentValue - min) / (max - min)) *
+        100;
+    return (_jsxs("div", { className: clsx(styles.container, className), children: [(label || showValue) && (_jsxs("div", { className: styles.labelRow, children: [label && _jsx(Label, { htmlFor: inputId, children: label }), showValue && (_jsx("span", { className: styles.valueDisplay, children: currentValue }))] })), _jsxs("div", { className: styles.trackWrapper, children: [_jsx("div", { className: styles.progressFill, style: { "--percentage": `${percentage}%` } }), _jsx("input", Object.assign({ id: inputId, className: styles.rangeInput, type: "range", min: min, max: max, step: step, value: currentValue, onChange: handleChange, "aria-label": !label ? props["aria-label"] || "Slider" : undefined, "aria-valuenow": currentValue, "aria-valuemin": Number(min), "aria-valuemax": Number(max) }, props))] })] }));
 }

package/dist/components/Slider/Slider.module.css

@@ -18,7 +18,7 @@
 .valueDisplay {
   font-family: var(--font-mono, monospace);
   font-weight: 700;
-  color: var(--primary);
+  color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
   font-size: var(--text-base);
   min-width: 3ch;
   text-align: right;

package/dist/components/SplitButton/SplitButton.d.ts

@@ -6,8 +6,8 @@ interface SplitButtonProps {
     primaryLabel: string;
     onPrimaryClick: () => void;
     items: SplitButtonItem[];
-    variant?: 'primary' | 'secondary';
+    variant?: "primary" | "secondary";
     className?: string;
 }
-export declare function SplitButton({ primaryLabel, onPrimaryClick, items, variant, className }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitButton({ primaryLabel, onPrimaryClick, items, variant, className, }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SplitButton/SplitButton.js

@@ -1,13 +1,13 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { Popover } from '../Popover/Popover.js';
-import { ChevronDown } from 'lucide-react';
-import styles from './SplitButton.module.css';
-import { useState } from 'react';
-export function SplitButton({ primaryLabel, onPrimaryClick, items, variant = 'primary', className }) {
+import clsx from "clsx";
+import { Popover } from "../Popover/Popover.js";
+import { ChevronDown } from "lucide-react";
+import styles from "./SplitButton.module.css";
+import { useState } from "react";
+export function SplitButton({ primaryLabel, onPrimaryClick, items, variant = "primary", className, }) {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-end", trigger: _jsxs("div", { className: clsx(styles.container, styles[variant], className), "aria-expanded": isOpen, children: [_jsx("button", { className: styles.mainButton, onClick: onPrimaryClick, children: primaryLabel }), _jsx("button", { className: styles.dropdownTrigger, onClick: () => setIsOpen(!isOpen), children: _jsx(ChevronDown, { size: 16, strokeWidth: 3 }) })] }), content: _jsx("div", { className: styles.menu, children: items.map((item, index) => (_jsx("button", { className: styles.item, onClick: () => {
+    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-end", trigger: _jsxs("div", { className: clsx(styles.container, styles[variant], className), children: [_jsx("button", { className: styles.mainButton, onClick: onPrimaryClick, children: primaryLabel }), _jsx("button", { className: styles.dropdownTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": `More ${primaryLabel} options`, children: _jsx(ChevronDown, { size: 16, strokeWidth: 3, "aria-hidden": "true" }) })] }), content: _jsx("div", { className: styles.menu, children: items.map((item, index) => (_jsx("button", { className: styles.item, onClick: () => {
                     item.onClick();
                     setIsOpen(false);
                 }, children: item.label }, index))) }) }));

package/dist/components/Tabs/Tabs.js

@@ -31,7 +31,7 @@ export function Tabs(_a) {
 }
 export function TabsList(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (_jsx("div", Object.assign({ role: "tablist", "aria-orientation": "horizontal", className: clsx(styles.tabsList, className) }, props, { children: children })));
+    return (_jsx("div", Object.assign({ role: "tablist", "aria-orientation": "horizontal", "aria-label": props["aria-label"] || "Tabs", className: clsx(styles.tabsList, className) }, props, { children: children })));
 }
 export function TabsTrigger(_a) {
     var { value, children, className, onClick } = _a, props = __rest(_a, ["value", "children", "className", "onClick"]);
@@ -41,7 +41,7 @@ export function TabsTrigger(_a) {
     const isActive = context.activeTab === value;
     const triggerId = `tabs-trigger-${context.baseId}-${value}`;
     const contentId = `tabs-content-${context.baseId}-${value}`;
-    return (_jsx("button", Object.assign({ id: triggerId, role: "tab", type: "button", "aria-selected": isActive, "aria-controls": contentId, className: clsx(styles.tabsTrigger, isActive && styles.active, className), onClick: (e) => {
+    return (_jsx("button", Object.assign({ id: triggerId, role: "tab", type: "button", "aria-selected": isActive, "aria-controls": isActive ? contentId : undefined, className: clsx(styles.tabsTrigger, isActive && styles.active, className), onClick: (e) => {
             context.setActiveTab(value);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, tabIndex: isActive ? 0 : -1 }, props, { children: children })));

package/dist/components/Tabs/Tabs.module.css

@@ -22,11 +22,10 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  opacity: 0.6;
+  background-color: transparent;
+  color: var(--foreground);
   border: var(--border-width) solid var(--card-border);
-  border-bottom: var(--border-width) solid var(--card-border);
+  border-bottom: none;
   border-radius: var(--radius) var(--radius) 0 0;
   cursor: pointer;
   position: relative;
@@ -35,17 +34,20 @@
   transform: translateY(4px);
 }
 .tabsTrigger:hover {
-  opacity: 0.8;
+  background-color: color-mix(in srgb, var(--primary), transparent 90%);
   transform: translateY(2px);
 }
 .tabsTrigger.active {
-  opacity: 1;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
   z-index: var(--z-elevated);
   transform: translateY(0);
 }
 .tabsTrigger.active:hover {
-  opacity: 1;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
   transform: translateY(0);
+  filter: brightness(1.05);
 }
 
 .tabsBody {

package/dist/components/Textarea/Textarea.d.ts

@@ -1,3 +1,8 @@
-import React from 'react';
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-export declare function Textarea({ className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    showCount?: boolean;
+}
+export declare function Textarea({ label, error, helperText, showCount, className, style, id, required, maxLength, value, defaultValue, onChange, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;