frey-ui 1.0.11 → 1.0.13

package/dist/esm/Switch/switch.css

@@ -0,0 +1,123 @@
+.switch-container_63905009 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.switch_011a552d {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--switch-width);
+  height: var(--switch-height);
+}
+
+.switch-sm_3a85b947 {
+  font-size: 14px;
+
+  --switch-width: 2.8em;
+  --switch-height: 1.6em;
+  --thumb-size: 1.1em;
+  --thumb-padding: 0.25em;
+}
+
+.switch-md_e3005d26 {
+  font-size: 17px;
+
+  --switch-width: 3.5em;
+  --switch-height: 2em;
+  --thumb-size: 1.4em;
+  --thumb-padding: 0.3em;
+}
+
+.switch-lg_daceb03b {
+  font-size: 20px;
+
+  --switch-width: 4em;
+  --switch-height: 2.2em;
+  --thumb-size: 1.6em;
+  --thumb-padding: 0.3em;
+}
+
+.switch_011a552d input {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: pointer;
+  margin: 0;
+}
+
+.slider_5603991a {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background: var(--switch-track-inactive, var(--frey-switch-track-inactive));
+  border-radius: 50px;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.slider_5603991a::before {
+  position: absolute;
+  content: '';
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  left: var(--thumb-padding);
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--switch-thumb, var(--frey-switch-thumb));
+  border-radius: 50px;
+  box-shadow: var(--frey-shadow-thumb);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.switch-disabled_f3161357 .slider_5603991a {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.switch-disabled_f3161357 input {
+  cursor: not-allowed;
+}
+
+.switch_011a552d input:checked + .slider_5603991a {
+  background: var(--switch-track-active, var(--frey-switch-track-active));
+}
+
+.switch_011a552d input:focus-visible + .slider_5603991a {
+  outline: 2px solid var(--switch-focus-ring, var(--frey-focus-ring));
+  outline-offset: 2px;
+}
+
+.switch_011a552d input:checked + .slider_5603991a::before {
+  left: calc(var(--switch-width) - var(--thumb-size) - var(--thumb-padding));
+  transform: translateY(-50%);
+}
+
+.switch-disabled_f3161357 {
+  cursor: not-allowed;
+}
+
+.label_3314af1a {
+  cursor: pointer;
+  user-select: none;
+}
+
+.switch-disabled_f3161357 + .label_3314af1a {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.visually-hidden_75ccb710 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/esm/Switch/switch.module.css.mjs

@@ -1,5 +1,6 @@
 'use client';
-var styles = {"switch-container":"switch-module_switch-container__xDEo5","switch":"switch-module_switch__kA7Xe","switch-sm":"switch-module_switch-sm__7SvPY","switch-md":"switch-module_switch-md__loKg6","switch-lg":"switch-module_switch-lg__pU031","slider":"switch-module_slider__fJ2t2","switch-disabled":"switch-module_switch-disabled__4YjrP","label":"switch-module_label__JDK9V","visually-hidden":"switch-module_visually-hidden__-QPG1"};
+import './switch.css';
+var styles = {"switch-container":"switch-container_63905009","switch":"switch_011a552d","switch-sm":"switch-sm_3a85b947","switch-md":"switch-md_e3005d26","switch-lg":"switch-lg_daceb03b","slider":"slider_5603991a","switch-disabled":"switch-disabled_f3161357","label":"label_3314af1a","visually-hidden":"visually-hidden_75ccb710"};
 
 export { styles as default };
 //# sourceMappingURL=switch.module.css.mjs.map

package/dist/esm/Table/index.mjs

@@ -0,0 +1,50 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import React from 'react';
+import styles from './table.module.css.mjs';
+
+const TableRoot = React.forwardRef(function Table({ containerClassName, containerStyle, className, ...props }, ref) {
+    return (jsx("div", { className: clsx(styles.table_container, containerClassName), style: containerStyle, children: jsx("table", { ref: ref, className: clsx(styles.table, className), ...props }) }));
+});
+TableRoot.displayName = 'Table';
+const TableHeader = React.forwardRef(function TableHeader({ className, ...props }, ref) {
+    return (jsx("thead", { ref: ref, className: clsx(styles.table_header, className), ...props }));
+});
+TableHeader.displayName = 'Table.Header';
+const TableBody = React.forwardRef(function TableBody({ className, ...props }, ref) {
+    return (jsx("tbody", { ref: ref, className: clsx(styles.table_body, className), ...props }));
+});
+TableBody.displayName = 'Table.Body';
+const TableFooter = React.forwardRef(function TableFooter({ className, ...props }, ref) {
+    return (jsx("tfoot", { ref: ref, className: clsx(styles.table_footer, className), ...props }));
+});
+TableFooter.displayName = 'Table.Footer';
+const TableRow = React.forwardRef(function TableRow({ className, ...props }, ref) {
+    return (jsx("tr", { ref: ref, className: clsx(styles.table_row, className), ...props }));
+});
+TableRow.displayName = 'Table.Row';
+const TableHead = React.forwardRef(function TableHead({ className, scope, ...props }, ref) {
+    return (jsx("th", { ref: ref, scope: scope ?? 'col', className: clsx(styles.table_head, className), ...props }));
+});
+TableHead.displayName = 'Table.Head';
+const TableCell = React.forwardRef(function TableCell({ className, ...props }, ref) {
+    return (jsx("td", { ref: ref, className: clsx(styles.table_cell, className), ...props }));
+});
+TableCell.displayName = 'Table.Cell';
+const TableCaption = React.forwardRef(function TableCaption({ className, ...props }, ref) {
+    return (jsx("caption", { ref: ref, className: clsx(styles.table_caption, className), ...props }));
+});
+TableCaption.displayName = 'Table.Caption';
+const Table = Object.assign(TableRoot, {
+    Header: TableHeader,
+    Body: TableBody,
+    Footer: TableFooter,
+    Row: TableRow,
+    Head: TableHead,
+    Cell: TableCell,
+    Caption: TableCaption
+});
+
+export { Table, Table as default };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/Table/table.css

@@ -0,0 +1,57 @@
+.table_container_cf6dc21c {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--frey-color-border-subtle);
+  border-radius: var(--frey-radius-md);
+  background-color: var(--frey-color-surface);
+}
+
+.table_27cdf1b6 {
+  width: 100%;
+  min-width: 32rem;
+  border-collapse: collapse;
+  color: var(--frey-color-text);
+}
+
+.table_header_57ada4c2 {
+  background-color: var(--frey-color-surface-subtle);
+}
+
+.table_head_e4d54334 {
+  padding: 0.75rem 1rem;
+  color: var(--frey-color-text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  text-align: left;
+  border-bottom: 1px solid var(--frey-color-border-subtle);
+}
+
+.table_body_9c7a877f .table_row_a5c971f0:hover {
+  background-color: var(--frey-color-surface-hover);
+}
+
+.table_cell_5480c112 {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-bottom: 1px solid var(--frey-color-border-subtle);
+  vertical-align: middle;
+}
+
+.table_footer_17fb06bb {
+  background-color: var(--frey-color-surface-subtle);
+}
+
+.table_footer_17fb06bb .table_cell_5480c112 {
+  font-weight: 600;
+}
+
+.table_caption_f83ef240 {
+  caption-side: bottom;
+  text-align: left;
+  color: var(--frey-color-text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  padding: 0.75rem 1rem;
+}

package/dist/esm/Table/table.module.css.mjs

@@ -0,0 +1,6 @@
+'use client';
+import './table.css';
+var styles = {"table_container":"table_container_cf6dc21c","table":"table_27cdf1b6","table_header":"table_header_57ada4c2","table_head":"table_head_e4d54334","table_body":"table_body_9c7a877f","table_row":"table_row_a5c971f0","table_cell":"table_cell_5480c112","table_footer":"table_footer_17fb06bb","table_caption":"table_caption_f83ef240"};
+
+export { styles as default };
+//# sourceMappingURL=table.module.css.mjs.map

package/dist/esm/Tabs/index.mjs

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React, { createContext, useId, useState, useContext } from 'react';
+import { useRovingCollection } from '../hooks/useRovingCollection.mjs';
+import { mergeRefs } from '../utils/mergeRefs.mjs';
 import styles from './tabs.module.css.mjs';
 
 const TabsContext = createContext(null);
@@ -14,6 +16,7 @@ function useTabsContext() {
 }
 const TabsRoot = React.forwardRef(function Tabs({ value, defaultValue, onValueChange, className, ...props }, ref) {
     const idPrefix = useId();
+    const triggerCollection = useRovingCollection();
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');
     const currentValue = isControlled ? value : uncontrolledValue;
@@ -26,8 +29,9 @@ const TabsRoot = React.forwardRef(function Tabs({ value, defaultValue, onValueCh
     const contextValue = React.useMemo(() => ({
         value: currentValue,
         onValueChange: handleValueChange,
-        idPrefix
-    }), [currentValue, handleValueChange, idPrefix]);
+        idPrefix,
+        triggerCollection
+    }), [currentValue, handleValueChange, idPrefix, triggerCollection]);
     return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: clsx(styles.tabs, className), ...props }) }));
 });
 TabsRoot.displayName = 'Tabs';
@@ -35,32 +39,57 @@ const TabsList = React.forwardRef(function TabsList({ className, ...props }, ref
     return (jsx("div", { ref: ref, role: 'tablist', className: clsx(styles.tabs_list, className), ...props }));
 });
 TabsList.displayName = 'Tabs.List';
-const TabsTrigger = React.forwardRef(function TabsTrigger({ value: triggerValue, className, ...props }, ref) {
-    const { value: selectedValue, onValueChange, idPrefix } = useTabsContext();
+const TabsTrigger = React.forwardRef(function TabsTrigger({ value: triggerValue, className, disabled = false, ...props }, ref) {
+    const { value: selectedValue, onValueChange, idPrefix, triggerCollection } = useTabsContext();
     const isSelected = selectedValue === triggerValue;
+    const triggerRef = React.useRef(null);
+    const mergedRef = mergeRefs(ref, triggerRef);
+    React.useEffect(() => {
+        triggerCollection.registerItem(triggerValue, triggerRef.current, {
+            disabled,
+            value: triggerValue
+        });
+        return () => {
+            triggerCollection.unregisterItem(triggerValue);
+        };
+    }, [triggerCollection, triggerValue, disabled]);
     const handleKeyDown = (e) => {
-        // Basic Arrow Right / Arrow Left navigation handling
-        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-            const triggerElements = Array.from(e.currentTarget.parentElement?.querySelectorAll('[role="tab"]') ?? []);
-            const currentIndex = triggerElements.indexOf(e.currentTarget);
-            if (currentIndex === -1)
-                return;
-            let nextIndex = currentIndex;
-            if (e.key === 'ArrowRight') {
-                nextIndex = (currentIndex + 1) % triggerElements.length;
+        const currentId = triggerCollection.findItemIdByElement(e.currentTarget);
+        if (!currentId)
+            return;
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            const nextId = triggerCollection.focusNext(currentId);
+            if (nextId) {
+                onValueChange(nextId);
             }
-            else if (e.key === 'ArrowLeft') {
-                nextIndex =
-                    (currentIndex - 1 + triggerElements.length) % triggerElements.length;
+            return;
+        }
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const previousId = triggerCollection.focusPrevious(currentId);
+            if (previousId) {
+                onValueChange(previousId);
+            }
+            return;
+        }
+        if (e.key === 'Home') {
+            e.preventDefault();
+            const firstId = triggerCollection.focusFirst();
+            if (firstId) {
+                onValueChange(firstId);
             }
-            const nextTrigger = triggerElements[nextIndex];
-            if (nextTrigger) {
-                nextTrigger.focus();
-                nextTrigger.click(); // Standard behavior for tabs to switch on arrow focus
+            return;
+        }
+        if (e.key === 'End') {
+            e.preventDefault();
+            const lastId = triggerCollection.focusLast();
+            if (lastId) {
+                onValueChange(lastId);
             }
         }
     };
-    return (jsx("button", { ref: ref, type: 'button', role: 'tab', id: `${idPrefix}-tab-${triggerValue}`, "aria-controls": `${idPrefix}-panel-${triggerValue}`, "aria-selected": isSelected, tabIndex: isSelected ? 0 : -1, onClick: () => onValueChange(triggerValue), onKeyDown: handleKeyDown, className: clsx(styles.tabs_trigger, className), ...props }));
+    return (jsx("button", { ref: mergedRef, type: 'button', role: 'tab', id: `${idPrefix}-tab-${triggerValue}`, "aria-controls": `${idPrefix}-panel-${triggerValue}`, "aria-selected": isSelected, tabIndex: isSelected ? 0 : -1, disabled: disabled, onClick: () => onValueChange(triggerValue), onKeyDown: handleKeyDown, className: clsx(styles.tabs_trigger, className), ...props }));
 });
 TabsTrigger.displayName = 'Tabs.Trigger';
 const TabsContent = React.forwardRef(function TabsContent({ value: contentValue, className, children, ...props }, ref) {

package/dist/esm/Tabs/tabs.css

@@ -0,0 +1,62 @@
+.tabs_761198d1 {
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs_list_a61ad952 {
+  display: flex;
+  position: relative;
+  align-items: center;
+  border-bottom: 1px solid var(--frey-color-border-subtle);
+}
+
+.tabs_trigger_b24ac187 {
+  background: none;
+  border: none;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--frey-color-text-muted);
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s ease-in-out;
+  outline: none;
+}
+
+.tabs_trigger_b24ac187:hover {
+  color: var(--frey-color-text);
+}
+
+.tabs_trigger_b24ac187:focus-visible {
+  border-radius: var(--frey-radius-sm);
+  box-shadow:
+    0 0 0 2px var(--frey-color-surface),
+    0 0 0 4px var(--frey-color-focus-ring);
+}
+
+.tabs_trigger_b24ac187[aria-selected='true'] {
+  color: var(--frey-color-text-title);
+}
+
+.tabs_trigger_b24ac187::after {
+  content: '';
+  position: absolute;
+  bottom: -1px; /* Align with the border-bottom of tabs_list */
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: transparent;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.tabs_trigger_b24ac187[aria-selected='true']::after {
+  background-color: var(--frey-color-primary);
+}
+
+.tabs_content_53dbeb4b {
+  padding-top: 1rem;
+}
+
+.tabs_content_53dbeb4b[hidden] {
+  display: none;
+}

package/dist/esm/Tabs/tabs.module.css.mjs

@@ -1,5 +1,6 @@
 'use client';
-var styles = {"tabs":"tabs-module_tabs__8GreJ","tabs_list":"tabs-module_tabs_list__ydVOj","tabs_trigger":"tabs-module_tabs_trigger__SHLcN","tabs_content":"tabs-module_tabs_content__xbq59"};
+import './tabs.css';
+var styles = {"tabs":"tabs_761198d1","tabs_list":"tabs_list_a61ad952","tabs_trigger":"tabs_trigger_b24ac187","tabs_content":"tabs_content_53dbeb4b"};
 
 export { styles as default };
 //# sourceMappingURL=tabs.module.css.mjs.map

package/dist/esm/TextInput/index.mjs

@@ -1,25 +1,17 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { useId } from 'react';
+import React from 'react';
+import Field from '../Field/index.mjs';
+import { computeAriaProps } from '../utils/aria.mjs';
 import styles from './textinput.module.css.mjs';
 
-const TextInput = React.forwardRef(function TextInput({ label, hideLabel = false, error, helperText, type = 'text', className, style, id, disabled = false, ...inputProps }, ref) {
-    const generatedId = useId();
-    const inputId = id ?? generatedId;
-    const errorId = `${inputId}-error`;
-    const helperId = `${inputId}-helper`;
-    const hasError = typeof error === 'string' && error.length > 0;
-    const hasHelper = typeof helperText === 'string' && helperText.length > 0;
-    const describedBy = [hasError ? errorId : undefined, hasHelper ? helperId : undefined]
-        .filter(Boolean)
-        .join(' ') || undefined;
-    return (jsxs("div", { className: clsx(styles['text-input-container'], className), style: style, children: [jsx("label", { htmlFor: inputId, className: clsx(styles.label, {
-                    [styles['label-disabled']]: disabled,
-                    [styles['visually-hidden']]: hideLabel
-                }), children: label }), jsx("input", { ref: ref, id: inputId, type: type, disabled: disabled, "aria-invalid": hasError || undefined, "aria-describedby": describedBy, className: clsx(styles.input, {
+const TextInput = React.forwardRef(function TextInput({ label, hideLabel = false, error, helperText, type = 'text', className, style, id, disabled = false, required = false, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...inputProps }, ref) {
+    return (jsx(Field, { label: label, hideLabel: hideLabel, error: error, helperText: helperText, disabled: disabled, required: required, id: id, className: className, style: style, children: ({ inputId, describedBy, hasError }) => {
+            return (jsx("input", { ref: ref, id: inputId, type: type, disabled: disabled, required: required, className: clsx(styles.input, {
                     [styles['input-error']]: hasError
-                }), ...inputProps }), hasError && (jsx("p", { id: errorId, className: styles['error-text'], role: 'alert', children: error })), hasHelper && (jsx("p", { id: helperId, className: styles['helper-text'], children: helperText }))] }));
+                }), ...computeAriaProps(hasError, describedBy, ariaDescribedBy, ariaInvalid), ...inputProps }));
+        } }));
 });
 TextInput.displayName = 'TextInput';
 

package/dist/esm/TextInput/textinput.css

@@ -0,0 +1,93 @@
+.text-input-container_b4870d4b {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.label_574cc423 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--frey-color-text-primary);
+  cursor: pointer;
+  user-select: none;
+}
+
+.label-disabled_600875f2 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input_7f7ceaef {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--frey-color-text-primary);
+  background-color: var(--frey-color-surface);
+  border: 1px solid var(--frey-color-border, #d1d5db);
+  border-radius: 0.375rem;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+.input_7f7ceaef::placeholder {
+  color: var(--frey-color-text-secondary, #6b7280);
+}
+
+.input_7f7ceaef:focus-visible {
+  border-color: var(--frey-focus-ring);
+  box-shadow: 0 0 0 2px var(--frey-focus-ring);
+}
+
+.input-error_f537f299 {
+  border-color: var(--frey-color-error, #dc2626);
+}
+
+.input-error_f537f299:focus-visible {
+  border-color: var(--frey-color-error, #dc2626);
+  box-shadow: 0 0 0 2px var(--frey-color-error, #dc2626);
+}
+
+.input_7f7ceaef:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--frey-color-surface-subtle, #f1f1f1);
+}
+
+.input_7f7ceaef:read-only {
+  background-color: var(--frey-color-surface-subtle, #f1f1f1);
+  cursor: default;
+}
+
+.input_7f7ceaef:read-only:focus-visible {
+  border-color: var(--frey-color-border, #d1d5db);
+  box-shadow: none;
+}
+
+.helper-text_c8d95bc3 {
+  font-size: 0.75rem;
+  color: var(--frey-color-text-secondary, #6b7280);
+  margin: 0;
+}
+
+.error-text_ba810e6e {
+  font-size: 0.75rem;
+  color: var(--frey-color-error, #dc2626);
+  margin: 0;
+}
+
+.visually-hidden_2e7218f5 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/esm/TextInput/textinput.module.css.mjs

@@ -1,5 +1,6 @@
 'use client';
-var styles = {"text-input-container":"textinput-module_text-input-container__LaD6P","label":"textinput-module_label__2iW7l","label-disabled":"textinput-module_label-disabled__Aqrto","input":"textinput-module_input__SmSfZ","input-error":"textinput-module_input-error__8RSkp","helper-text":"textinput-module_helper-text__nygYX","error-text":"textinput-module_error-text__DFYQv","visually-hidden":"textinput-module_visually-hidden__w42hp"};
+import './textinput.css';
+var styles = {"input":"input_7f7ceaef","input-error":"input-error_f537f299"};
 
 export { styles as default };
 //# sourceMappingURL=textinput.module.css.mjs.map

package/dist/esm/Textarea/index.mjs

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
 import Field from '../Field/index.mjs';
+import { computeAriaProps } from '../utils/aria.mjs';
 import styles from './textarea.module.css.mjs';
 
 const ResizeClassMap = {
@@ -13,9 +14,7 @@ const ResizeClassMap = {
 };
 const Textarea = React.forwardRef(function Textarea({ label, hideLabel = false, error, helperText, resize = 'vertical', className, style, id, disabled = false, required = false, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...textareaProps }, ref) {
     return (jsx(Field, { label: label, hideLabel: hideLabel, error: error, helperText: helperText, disabled: disabled, required: required, id: id, className: className, style: style, children: ({ inputId, describedBy, hasError }) => {
-            const mergedDescribedBy = [describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
-            const isInvalid = hasError || ariaInvalid === true || ariaInvalid === 'true';
-            return (jsx("textarea", { id: inputId, ref: ref, disabled: disabled, required: required, "aria-invalid": isInvalid || undefined, "aria-describedby": mergedDescribedBy, className: clsx(styles.textarea, ResizeClassMap[resize], hasError && styles.textarea_error), ...textareaProps }));
+            return (jsx("textarea", { id: inputId, ref: ref, disabled: disabled, required: required, className: clsx(styles.textarea, ResizeClassMap[resize], hasError && styles.textarea_error), ...computeAriaProps(hasError, describedBy, ariaDescribedBy, ariaInvalid), ...textareaProps }));
         } }));
 });
 Textarea.displayName = 'Textarea';

package/dist/esm/Textarea/textarea.css

@@ -0,0 +1,62 @@
+.textarea_fc665b4d {
+  width: 100%;
+  min-height: 6rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--frey-color-text-primary);
+  background-color: var(--frey-color-surface);
+  border: 1px solid var(--frey-color-border, #d1d5db);
+  border-radius: 0.375rem;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+.textarea_fc665b4d::placeholder {
+  color: var(--frey-color-text-secondary, #6b7280);
+}
+
+.textarea_fc665b4d:focus-visible {
+  border-color: var(--frey-focus-ring);
+  box-shadow: 0 0 0 2px var(--frey-focus-ring);
+}
+
+.textarea_error_786d519c {
+  border-color: var(--frey-color-error, #dc2626);
+}
+
+.textarea_error_786d519c:focus-visible {
+  border-color: var(--frey-color-error, #dc2626);
+  box-shadow: 0 0 0 2px var(--frey-color-error, #dc2626);
+}
+
+.textarea_fc665b4d:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--frey-color-surface-subtle, #f1f1f1);
+}
+
+.textarea_fc665b4d:read-only {
+  background-color: var(--frey-color-surface-subtle, #f1f1f1);
+  cursor: default;
+}
+
+.resize_none_97e1813b {
+  resize: none;
+}
+
+.resize_vertical_8f383889 {
+  resize: vertical;
+}
+
+.resize_horizontal_cff4bc94 {
+  resize: horizontal;
+}
+
+.resize_both_60104c5b {
+  resize: both;
+}

package/dist/esm/Textarea/textarea.module.css.mjs

@@ -1,5 +1,6 @@
 'use client';
-var styles = {"textarea":"textarea-module_textarea__2ZcDH","textarea_error":"textarea-module_textarea_error__g--Z6","resize_none":"textarea-module_resize_none__91Cdb","resize_vertical":"textarea-module_resize_vertical__kA0Sk","resize_horizontal":"textarea-module_resize_horizontal__YDww4","resize_both":"textarea-module_resize_both__mzsFr"};
+import './textarea.css';
+var styles = {"textarea":"textarea_fc665b4d","textarea_error":"textarea_error_786d519c","resize_none":"resize_none_97e1813b","resize_vertical":"resize_vertical_8f383889","resize_horizontal":"resize_horizontal_cff4bc94","resize_both":"resize_both_60104c5b"};
 
 export { styles as default };
 //# sourceMappingURL=textarea.module.css.mjs.map