frey-ui 1.0.12 → 1.0.13

package/dist/esm/Progress/progress.css

@@ -0,0 +1,86 @@
+.progress_root_6f94cd52 {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.progress_header_089eb6ee {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--frey-color-text-secondary, #6b7280);
+}
+
+.progress_label_06e22390,
+.progress_value_ae7b17e7 {
+  line-height: 1.2;
+}
+
+.progress_track_wrapper_46802392 {
+  width: 100%;
+}
+
+.progress_track_d33f2771 {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 9999px;
+  appearance: none;
+  background: var(--frey-color-border-subtle, #e5e7eb);
+  overflow: hidden;
+}
+
+.progress_track_d33f2771::-webkit-progress-bar {
+  background: var(--frey-color-border-subtle, #e5e7eb);
+  border-radius: 9999px;
+}
+
+.progress_track_d33f2771::-webkit-progress-value {
+  background: var(--frey-color-primary, #3b82f6);
+  border-radius: 9999px;
+  transition: width 0.24s ease;
+}
+
+.progress_track_d33f2771::-moz-progress-bar {
+  background: var(--frey-color-primary, #3b82f6);
+  border-radius: 9999px;
+  transition: width 0.24s ease;
+}
+
+.progress_sm_0cdfe5b3 .progress_track_d33f2771 {
+  height: 0.375rem;
+}
+
+.progress_md_69394849 .progress_track_d33f2771 {
+  height: 0.5rem;
+}
+
+.progress_lg_310e7535 .progress_track_d33f2771 {
+  height: 0.75rem;
+}
+
+.progress_track_indeterminate_50b31de5 {
+  position: relative;
+}
+
+.progress_track_indeterminate_50b31de5::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  width: 35%;
+  border-radius: inherit;
+  background: var(--frey-color-primary, #3b82f6);
+  animation: indeterminate_slide_868fc376 1.1s ease-in-out infinite;
+}
+
+@keyframes indeterminate_slide_868fc376 {
+  from {
+    transform: translateX(-120%);
+  }
+
+  to {
+    transform: translateX(320%);
+  }
+}

package/dist/esm/Progress/progress.module.css.mjs

@@ -1,4 +1,5 @@
 'use client';
+import './progress.css';
 var styles = {"progress_root":"progress_root_6f94cd52","progress_header":"progress_header_089eb6ee","progress_label":"progress_label_06e22390","progress_value":"progress_value_ae7b17e7","progress_track_wrapper":"progress_track_wrapper_46802392","progress_track":"progress_track_d33f2771","progress_sm":"progress_sm_0cdfe5b3","progress_md":"progress_md_69394849","progress_lg":"progress_lg_310e7535","progress_track_indeterminate":"progress_track_indeterminate_50b31de5"};
 
 export { styles as default };

package/dist/esm/RadioGroup/radiogroup.css

@@ -0,0 +1,59 @@
+.radio_group_2ca42a8d {
+  display: flex;
+  gap: 0.625rem;
+}
+
+.radio_group_vertical_a607eba4 {
+  flex-direction: column;
+}
+
+.radio_group_horizontal_22de4cd3 {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.radio_group_disabled_a27207ed {
+  opacity: 0.7;
+}
+
+.radio_option_4a7e8ab2 {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  cursor: pointer;
+  user-select: none;
+}
+
+.radio_option_disabled_94631095 {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.radio_input_9f1699c9 {
+  margin: 0;
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--frey-focus-ring, #9333ea);
+  transform: translateY(0.125rem);
+}
+
+.radio_input_9f1699c9:focus-visible {
+  outline: 2px solid var(--frey-focus-ring, #9333ea);
+  outline-offset: 2px;
+}
+
+.radio_text_content_f708c267 {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.radio_label_925f25a2 {
+  font-size: 0.875rem;
+  color: var(--frey-color-text-primary);
+}
+
+.radio_description_3b681168 {
+  font-size: 0.75rem;
+  color: var(--frey-color-text-secondary, #6b7280);
+}

package/dist/esm/RadioGroup/radiogroup.module.css.mjs

@@ -1,4 +1,5 @@
 'use client';
+import './radiogroup.css';
 var styles = {"radio_group":"radio_group_2ca42a8d","radio_group_vertical":"radio_group_vertical_a607eba4","radio_group_horizontal":"radio_group_horizontal_22de4cd3","radio_group_disabled":"radio_group_disabled_a27207ed","radio_option":"radio_option_4a7e8ab2","radio_option_disabled":"radio_option_disabled_94631095","radio_input":"radio_input_9f1699c9","radio_text_content":"radio_text_content_f708c267","radio_label":"radio_label_925f25a2","radio_description":"radio_description_3b681168"};
 
 export { styles as default };

package/dist/esm/Select/index.mjs

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import React from 'react';
 import Field from '../Field/index.mjs';
 import { ChevronDownIcon } from '../Icons/ChevronDownIcon.mjs';
+import { computeAriaProps } from '../utils/aria.mjs';
 import styles from './select.module.css.mjs';
 
 const SizeClassMap = {
@@ -13,9 +14,7 @@ const SizeClassMap = {
 };
 const Select = React.forwardRef(function Select({ label, hideLabel = false, error, helperText, placeholder, size = 'md', className, style, id, disabled = false, required = false, multiple = false, children, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...selectProps }, 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 (jsxs("div", { className: styles.select_wrapper, children: [jsxs("select", { id: inputId, ref: ref, disabled: disabled, required: required, multiple: multiple, "aria-invalid": isInvalid || undefined, "aria-describedby": mergedDescribedBy, className: clsx(styles.select, SizeClassMap[size], hasError && styles.select_error, multiple && styles.select_multiple), ...selectProps, children: [placeholder && !multiple && (jsx("option", { value: '', disabled: true, hidden: true, children: placeholder })), children] }), !multiple && (jsx(ChevronDownIcon, { className: styles.select_icon, size: 16 }))] }));
+            return (jsxs("div", { className: styles.select_wrapper, children: [jsxs("select", { id: inputId, ref: ref, disabled: disabled, required: required, multiple: multiple, className: clsx(styles.select, SizeClassMap[size], hasError && styles.select_error, multiple && styles.select_multiple), ...computeAriaProps(hasError, describedBy, ariaDescribedBy, ariaInvalid), ...selectProps, children: [placeholder && !multiple && (jsx("option", { value: '', disabled: true, hidden: true, children: placeholder })), children] }), !multiple && (jsx(ChevronDownIcon, { className: styles.select_icon, size: 16 }))] }));
         } }));
 });
 Select.displayName = 'Select';

package/dist/esm/Select/select.css

@@ -0,0 +1,77 @@
+.select_wrapper_93476027 {
+  position: relative;
+  width: 100%;
+}
+
+.select_7e1bae97 {
+  width: 100%;
+  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;
+  appearance: none;
+  padding-right: 2.25rem;
+}
+
+.select_7e1bae97:focus-visible {
+  border-color: var(--frey-focus-ring);
+  box-shadow: 0 0 0 2px var(--frey-focus-ring);
+}
+
+.select_7e1bae97:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--frey-color-surface-subtle, #f1f1f1);
+}
+
+.select_error_3ca10844 {
+  border-color: var(--frey-color-error, #dc2626);
+}
+
+.select_error_3ca10844:focus-visible {
+  border-color: var(--frey-color-error, #dc2626);
+  box-shadow: 0 0 0 2px var(--frey-color-error, #dc2626);
+}
+
+.select_sm_43ca3147 {
+  min-height: 2rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem 2rem;
+  font-size: 0.8125rem;
+}
+
+.select_md_873444f1 {
+  min-height: 2.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem 2rem;
+  font-size: 0.875rem;
+}
+
+.select_lg_ed67d954 {
+  min-height: 2.875rem;
+  padding-block: 0.625rem;
+  padding-inline: 0.875rem 2rem;
+  font-size: 0.9375rem;
+}
+
+.select_multiple_1959c17d {
+  min-height: 7rem;
+  padding-right: 0.75rem;
+}
+
+.select_icon_fa6ab9da {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--frey-color-text-secondary, #6b7280);
+  width: 1rem;
+  height: 1rem;
+}

package/dist/esm/Select/select.module.css.mjs

@@ -1,4 +1,5 @@
 'use client';
+import './select.css';
 var styles = {"select_wrapper":"select_wrapper_93476027","select":"select_7e1bae97","select_error":"select_error_3ca10844","select_sm":"select_sm_43ca3147","select_md":"select_md_873444f1","select_lg":"select_lg_ed67d954","select_multiple":"select_multiple_1959c17d","select_icon":"select_icon_fa6ab9da"};
 
 export { styles as default };

package/dist/esm/Skeleton/skeleton.css

@@ -0,0 +1,29 @@
+.skeleton_d765e404 {
+  display: block;
+  background: linear-gradient(
+    90deg,
+    var(--frey-skeleton-base) 25%,
+    var(--frey-skeleton-highlight) 50%,
+    var(--frey-skeleton-base) 75%
+  );
+  background-size: 200% 100%;
+  animation: pulse_cd58998f 1.5s ease-in-out infinite;
+}
+
+.skeleton-rectangle_dbfa61d3 {
+  border-radius: 0.25rem;
+}
+
+.skeleton-circle_74382494 {
+  border-radius: 50%;
+}
+
+@keyframes pulse_cd58998f {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}

package/dist/esm/Skeleton/skeleton.module.css.mjs

@@ -1,4 +1,5 @@
 'use client';
+import './skeleton.css';
 var styles = {"skeleton":"skeleton_d765e404","skeleton-rectangle":"skeleton-rectangle_dbfa61d3","skeleton-circle":"skeleton-circle_74382494"};
 
 export { styles as default };

package/dist/esm/Spinner/spinner.css

@@ -0,0 +1,35 @@
+.spinner_root_9db80026 {
+  --spinner-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+}
+
+.spinner_circle_c4c41be0 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid var(--frey-color-border, #d1d5db);
+  border-top-color: var(--frey-color-primary, #3b82f6);
+  animation: spinner_rotate_95d54008 0.75s linear infinite;
+}
+
+.visually_hidden_78665472 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes spinner_rotate_95d54008 {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/esm/Spinner/spinner.module.css.mjs

@@ -1,4 +1,5 @@
 'use client';
+import './spinner.css';
 var styles = {"spinner_root":"spinner_root_9db80026","spinner_circle":"spinner_circle_c4c41be0","visually_hidden":"visually_hidden_78665472"};
 
 export { styles as default };

package/dist/esm/Stack/index.mjs

@@ -4,7 +4,8 @@ import React from 'react';
 import Flex from '../Flex/index.mjs';
 
 const Stack = React.forwardRef(function Stack({ direction, ...restProps }, ref) {
-    const stackDirection = (direction ?? 'vertical');
+    const rawDirection = direction;
+    const stackDirection = rawDirection ?? 'vertical';
     return (jsx(Flex, { ref: ref, direction: stackDirection === 'horizontal' ? 'row' : 'column', ...restProps }));
 });
 Stack.displayName = 'Stack';

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,4 +1,5 @@
 'use client';
+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 };

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

@@ -1,4 +1,5 @@
 '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 };

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) {