doom-design-system 0.1.12 → 0.1.14

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     error?: string;

package/dist/components/Input/Input.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,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import clsx from 'clsx';
-import { Label } from '../Label/Label.js';
-import styles from './Input.module.css';
+import { 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"]);
     const [isFocused, setIsFocused] = useState(false);
     const [internalError, setInternalError] = useState(undefined);
+    const reactId = useId();
+    const inputId = id || `input-${reactId}`;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
     const error = errorProp || internalError;
     const handleBlur = (e) => {
         setIsFocused(false);
@@ -33,8 +37,7 @@ export function Input(_a) {
         if (onFocus)
             onFocus(e);
     };
-    const displayValue = (!isFocused && format && value !== undefined)
-        ? format(value)
-        : value;
-    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Label, { htmlFor: id, 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: id, required: required, value: displayValue, onBlur: handleBlur, onFocus: handleFocus }, props)), endAdornment && (_jsx("span", { className: clsx(styles.adornment, styles.end), children: endAdornment }))] }), helperText && !error && (_jsx("span", { className: styles.helperText, children: helperText })), error && (_jsx("span", { className: clsx(styles.helperText, styles.error), children: error }))] }));
+    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 }))] }));
 }

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

@@ -1,22 +1,23 @@
-import React from 'react';
-interface ModalProps {
+import React from "react";
+interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
     children: React.ReactNode;
     footer?: React.ReactNode;
 }
-export declare function ModalHeader({ children, className }: {
+export declare function ModalHeader({ children, className, id, }: {
     children: React.ReactNode;
     className?: string;
+    id?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ModalBody({ children, className }: {
+export declare function ModalBody({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ModalFooter({ children, className }: {
+export declare function ModalFooter({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function Modal({ isOpen, onClose, title, children, footer }: ModalProps): React.ReactPortal | null;
+export declare function Modal({ isOpen, onClose, title, children, footer, className, style, ...props }: ModalProps): React.ReactPortal | null;
 export {};

package/dist/components/Modal/Modal.js

@@ -1,38 +1,54 @@
-'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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-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 styles from './Modal.module.css';
-const ModalContext = React.createContext({ onClose: () => { } });
-export function ModalHeader({ children, className }) {
-    const { onClose } = React.useContext(ModalContext);
-    return (_jsxs(Flex, { align: "center", justify: "space-between", className: clsx(styles.header, className), children: [_jsx("h2", { children: children }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
+import React, { useEffect, useRef, useId } from "react";
+import { createPortal } from "react-dom";
+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 styles from "./Modal.module.css";
+const ModalContext = React.createContext({
+    onClose: () => { },
+});
+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 }) })] }));
 }
-export function ModalBody({ children, className }) {
-    return (_jsx("div", { className: clsx(styles.body, className), children: children }));
+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 }));
+export function ModalFooter({ children, className, }) {
+    return _jsx("div", { className: clsx(styles.footer, className), children: children });
 }
-export function Modal({ isOpen, onClose, title, children, footer }) {
+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}`;
     useEffect(() => {
         const handleEscape = (e) => {
-            if (e.key === 'Escape')
+            if (e.key === "Escape")
                 onClose();
         };
         if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
-            document.body.style.overflow = 'hidden';
+            document.addEventListener("keydown", handleEscape);
+            document.body.style.overflow = "hidden";
         }
         return () => {
-            document.removeEventListener('keydown', handleEscape);
-            document.body.style.overflow = 'unset';
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "unset";
         };
     }, [isOpen, onClose]);
     if (!isOpen)
@@ -42,5 +58,5 @@ export function Modal({ isOpen, onClose, title, children, footer }) {
             onClose();
         }
     };
-    return createPortal(_jsx(ModalContext.Provider, { value: { onClose }, children: _jsx("div", { className: styles.overlay, ref: overlayRef, onClick: handleOverlayClick, children: _jsx("div", { className: styles.contentContainer, 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, 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);
 }

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

@@ -1,12 +1,10 @@
-import React from 'react';
-interface ProgressBarProps {
+import React from "react";
+interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
     value: number;
     max?: number;
     height?: string | number;
     color?: string;
     showStripes?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
 }
-export declare function ProgressBar({ value, max, height, color, showStripes, className, style }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ value, max, height, color, showStripes, className, style, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,12 +1,25 @@
-'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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './ProgressBar.module.css';
-export function ProgressBar({ value, max = 100, height = '24px', color = 'var(--primary)', showStripes = true, className, style }) {
+import clsx from "clsx";
+import styles from "./ProgressBar.module.css";
+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"]);
     const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-    const heightStyle = typeof height === 'number' ? `${height}px` : height;
-    return (_jsxs("div", { className: clsx(styles.container, className), style: Object.assign({ '--height': heightStyle }, style), children: [_jsx("div", { className: styles.fill, style: {
-                    '--percentage': `${percentage}%`,
-                    '--color': color
-                }, "data-complete": percentage >= 100 }), showStripes && _jsx("div", { className: styles.stripes })] }));
+    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 })] })));
 }

package/dist/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+import React from "react";
+interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "defaultValue"> {
     options: {
         value: string | number;
         label: string;
@@ -7,6 +7,10 @@ interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>
     label?: string;
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     placeholder?: string;
+    value?: string | number;
+    defaultValue?: string | number;
+    name?: string;
+    required?: boolean;
 }
-export declare function Select({ options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, form, autoFocus, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, autoFocus, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select/Select.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,28 +11,29 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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 styles from './Select.module.css';
+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 styles from "./Select.module.css";
 export function Select(_a) {
     var _b;
-    var { options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, form, autoFocus } = _a, props = __rest(_a, ["options", "className", "label", "style", "value", "defaultValue", "onChange", "placeholder", "id", "required", "disabled", "name", "form", "autoFocus"]);
+    var { options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, autoFocus } = _a, props = __rest(_a, ["options", "className", "label", "style", "value", "defaultValue", "onChange", "placeholder", "id", "required", "disabled", "name", "autoFocus"]);
     const [isOpen, setIsOpen] = useState(false);
-    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const [internalValue, setInternalValue] = useState(defaultValue || "");
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const reactId = useId();
     const triggerRef = useRef(null);
-    const listboxId = id ? `${id}-listbox` : `select-listbox-${reactId}`;
-    const labelId = id ? `${id}-label` : `select-label-${reactId}`;
+    const selectId = id || `select-${reactId}`;
+    const listboxId = `${selectId}-listbox`;
+    const labelId = `${selectId}-label`;
     const currentValue = value !== undefined ? value : internalValue;
-    const selectedOption = options.find(opt => String(opt.value) === String(currentValue));
+    const selectedOption = options.find((opt) => String(opt.value) === String(currentValue));
     // Reset highlighted index when opening
     useEffect(() => {
         if (isOpen) {
-            const index = options.findIndex(opt => String(opt.value) === String(currentValue));
+            const index = options.findIndex((opt) => String(opt.value) === String(currentValue));
             setHighlightedIndex(index >= 0 ? index : 0);
         }
     }, [isOpen, currentValue, options]);
@@ -43,8 +44,8 @@ export function Select(_a) {
         }
         if (onChange) {
             const syntheticEvent = {
-                target: { value: newValue, name: name },
-                currentTarget: { value: newValue, name: name },
+                target: { value: newValue, name: name, id: selectId },
+                currentTarget: { value: newValue, name: name, id: selectId },
                 preventDefault: () => { },
                 stopPropagation: () => { },
             };
@@ -56,8 +57,8 @@ export function Select(_a) {
     const handleKeyDown = (e) => {
         var _a;
         switch (e.key) {
-            case 'Enter':
-            case ' ':
+            case "Enter":
+            case " ":
                 e.preventDefault();
                 if (isOpen) {
                     if (highlightedIndex >= 0 && highlightedIndex < options.length) {
@@ -68,49 +69,43 @@ export function Select(_a) {
                     setIsOpen(true);
                 }
                 break;
-            case 'ArrowDown':
+            case "ArrowDown":
                 e.preventDefault();
                 if (!isOpen) {
                     setIsOpen(true);
                 }
                 else {
-                    setHighlightedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+                    setHighlightedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
                 }
                 break;
-            case 'ArrowUp':
+            case "ArrowUp":
                 e.preventDefault();
                 if (!isOpen) {
                     setIsOpen(true);
                 }
                 else {
-                    setHighlightedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+                    setHighlightedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
                 }
                 break;
-            case 'Escape':
+            case "Escape":
                 if (isOpen) {
                     e.preventDefault();
                     setIsOpen(false);
                     (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }
                 break;
-            case 'Tab':
+            case "Tab":
                 if (isOpen) {
                     setIsOpen(false);
                 }
                 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: id, 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: id, onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, 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) => {
+    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
+                                ? 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) => {
                         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 })] }, opt.value));
-                    }) }) }), _jsx("input", { type: "text", name: name, value: currentValue, required: required, form: form, tabIndex: -1, readOnly: true, style: {
-                    opacity: 0,
-                    height: '1px',
-                    width: '1px',
-                    position: 'absolute',
-                    bottom: 0,
-                    left: 0,
-                    pointerEvents: 'none',
-                } })] }));
+                        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" })] }));
 }

package/dist/components/Tabs/Tabs.d.ts

@@ -1,34 +1,27 @@
-import React from 'react';
-interface TabsProps {
+import React from "react";
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string) => void;
     children: React.ReactNode;
-    className?: string;
 }
-export declare function Tabs({ defaultValue, value, onValueChange, children, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
-interface TabsListProps {
+export declare function Tabs({ defaultValue, value, onValueChange, children, className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    className?: string;
 }
-export declare function TabsList({ children, className }: TabsListProps): import("react/jsx-runtime").JSX.Element;
-interface TabsTriggerProps {
+export declare function TabsList({ children, className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
     children: React.ReactNode;
-    className?: string;
-    onClick?: () => void;
 }
-export declare function TabsTrigger({ value, children, className, onClick }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
-interface TabsBodyProps {
+export declare function TabsTrigger({ value, children, className, onClick, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+interface TabsBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
 }
-export declare function TabsBody({ children, className, style }: TabsBodyProps): import("react/jsx-runtime").JSX.Element;
-interface TabsContentProps {
+export declare function TabsBody({ children, className, style, ...props }: TabsBodyProps): import("react/jsx-runtime").JSX.Element;
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string;
     children: React.ReactNode;
-    className?: string;
 }
-export declare function TabsContent({ value, children, className }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TabsContent({ value, children, className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Tabs/Tabs.js

@@ -1,11 +1,24 @@
-'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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Tabs.module.css';
-import { createContext, useContext, useState } from 'react';
+import clsx from "clsx";
+import styles from "./Tabs.module.css";
+import { createContext, useContext, useState, useId } from "react";
 const TabsContext = createContext(null);
-export function Tabs({ defaultValue, value, onValueChange, children, className }) {
-    const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || '');
+export function Tabs(_a) {
+    var { defaultValue, value, onValueChange, children, className } = _a, props = __rest(_a, ["defaultValue", "value", "onValueChange", "children", "className"]);
+    const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || "");
+    const reactId = useId();
     const isControlled = value !== undefined;
     const activeTab = isControlled ? value : internalActiveTab;
     const setActiveTab = (newValue) => {
@@ -14,29 +27,38 @@ export function Tabs({ defaultValue, value, onValueChange, children, className }
         }
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
     };
-    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: _jsx("div", { className: className, children: children }) }));
+    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab, baseId: reactId }, children: _jsx("div", Object.assign({ className: className }, props, { children: children })) }));
 }
-export function TabsList({ children, className }) {
-    return _jsx("div", { className: clsx(styles.tabsList, className), children: children });
+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 })));
 }
-export function TabsTrigger({ value, children, className, onClick }) {
+export function TabsTrigger(_a) {
+    var { value, children, className, onClick } = _a, props = __rest(_a, ["value", "children", "className", "onClick"]);
     const context = useContext(TabsContext);
     if (!context)
-        throw new Error('TabsTrigger must be used within Tabs');
+        throw new Error("TabsTrigger must be used within Tabs");
     const isActive = context.activeTab === value;
-    return (_jsx("button", { className: clsx(styles.tabsTrigger, isActive && styles.active, className), onClick: () => {
+    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) => {
             context.setActiveTab(value);
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }, children: children }));
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        }, tabIndex: isActive ? 0 : -1 }, props, { children: children })));
 }
-export function TabsBody({ children, className, style }) {
-    return _jsx("div", { className: clsx(styles.tabsBody, className), style: style, children: children });
+export function TabsBody(_a) {
+    var { children, className, style } = _a, props = __rest(_a, ["children", "className", "style"]);
+    return (_jsx("div", Object.assign({ className: clsx(styles.tabsBody, className), style: style }, props, { children: children })));
 }
-export function TabsContent({ value, children, className }) {
+export function TabsContent(_a) {
+    var { value, children, className } = _a, props = __rest(_a, ["value", "children", "className"]);
     const context = useContext(TabsContext);
     if (!context)
-        throw new Error('TabsContent must be used within Tabs');
-    if (context.activeTab !== value)
+        throw new Error("TabsContent must be used within Tabs");
+    const isActive = context.activeTab === value;
+    const triggerId = `tabs-trigger-${context.baseId}-${value}`;
+    const contentId = `tabs-content-${context.baseId}-${value}`;
+    if (!isActive)
         return null;
-    return _jsx("div", { className: clsx(styles.tabsContent, className), children: children });
+    return (_jsx("div", Object.assign({ id: contentId, role: "tabpanel", "aria-labelledby": triggerId, tabIndex: 0, className: clsx(styles.tabsContent, className) }, props, { children: children })));
 }