@neynar/ui 0.4.0 → 1.0.0

package/dist/node_modules/@base-ui/react/esm/switch/root/SwitchRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchRoot.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/switch/root/SwitchRoot.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useControlled } from '@base-ui/utils/useControlled';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { useMergedRefs } from '@base-ui/utils/useMergedRefs';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { visuallyHidden } from '@base-ui/utils/visuallyHidden';\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { mergeProps } from \"../../merge-props/index.js\";\nimport { useBaseUiId } from \"../../utils/useBaseUiId.js\";\nimport { useButton } from \"../../use-button/index.js\";\nimport { SwitchRootContext } from \"./SwitchRootContext.js\";\nimport { stateAttributesMapping } from \"../stateAttributesMapping.js\";\nimport { useField } from \"../../field/useField.js\";\nimport { useFieldRootContext } from \"../../field/root/FieldRootContext.js\";\nimport { useFormContext } from \"../../form/FormContext.js\";\nimport { useLabelableContext } from \"../../labelable-provider/LabelableContext.js\";\nimport { useLabelableId } from \"../../labelable-provider/useLabelableId.js\";\nimport { createChangeEventDetails } from \"../../utils/createBaseUIEventDetails.js\";\nimport { REASONS } from \"../../utils/reasons.js\";\nimport { useValueChanged } from \"../../utils/useValueChanged.js\";\n\n/**\n * Represents the switch itself.\n * Renders a `<span>` element and a hidden `<input>` beside.\n *\n * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(componentProps, forwardedRef) {\n  const {\n    checked: checkedProp,\n    className,\n    defaultChecked,\n    id: idProp,\n    inputRef: externalInputRef,\n    name: nameProp,\n    nativeButton = false,\n    onCheckedChange: onCheckedChangeProp,\n    readOnly = false,\n    required = false,\n    disabled: disabledProp = false,\n    render,\n    uncheckedValue,\n    ...elementProps\n  } = componentProps;\n  const {\n    clearErrors\n  } = useFormContext();\n  const {\n    state: fieldState,\n    setTouched,\n    setDirty,\n    validityData,\n    setFilled,\n    setFocused,\n    shouldValidateOnChange,\n    validationMode,\n    disabled: fieldDisabled,\n    name: fieldName,\n    validation\n  } = useFieldRootContext();\n  const {\n    labelId\n  } = useLabelableContext();\n  const disabled = fieldDisabled || disabledProp;\n  const name = fieldName ?? nameProp;\n  const onCheckedChange = useStableCallback(onCheckedChangeProp);\n  const inputRef = React.useRef(null);\n  const handleInputRef = useMergedRefs(inputRef, externalInputRef, validation.inputRef);\n  const switchRef = React.useRef(null);\n  const id = useBaseUiId();\n  const inputId = useLabelableId({\n    id: idProp,\n    implicit: false,\n    controlRef: switchRef\n  });\n  const [checked, setCheckedState] = useControlled({\n    controlled: checkedProp,\n    default: Boolean(defaultChecked),\n    name: 'Switch',\n    state: 'checked'\n  });\n  useField({\n    id,\n    commit: validation.commit,\n    value: checked,\n    controlRef: switchRef,\n    name,\n    getValue: () => checked\n  });\n  useIsoLayoutEffect(() => {\n    if (inputRef.current) {\n      setFilled(inputRef.current.checked);\n    }\n  }, [inputRef, setFilled]);\n  useValueChanged(checked, () => {\n    clearErrors(name);\n    setDirty(checked !== validityData.initialValue);\n    setFilled(checked);\n    if (shouldValidateOnChange()) {\n      validation.commit(checked);\n    } else {\n      validation.commit(checked, true);\n    }\n  });\n  const {\n    getButtonProps,\n    buttonRef\n  } = useButton({\n    disabled,\n    native: nativeButton\n  });\n  const rootProps = {\n    id,\n    role: 'switch',\n    'aria-checked': checked,\n    'aria-readonly': readOnly || undefined,\n    'aria-labelledby': labelId,\n    onFocus() {\n      if (!disabled) {\n        setFocused(true);\n      }\n    },\n    onBlur() {\n      const element = inputRef.current;\n      if (!element || disabled) {\n        return;\n      }\n      setTouched(true);\n      setFocused(false);\n      if (validationMode === 'onBlur') {\n        validation.commit(element.checked);\n      }\n    },\n    onClick(event) {\n      if (readOnly || disabled) {\n        return;\n      }\n      event.preventDefault();\n      inputRef?.current?.click();\n    }\n  };\n  const inputProps = React.useMemo(() => mergeProps({\n    checked,\n    disabled,\n    id: inputId,\n    name,\n    required,\n    style: visuallyHidden,\n    tabIndex: -1,\n    type: 'checkbox',\n    'aria-hidden': true,\n    ref: handleInputRef,\n    onChange(event) {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented) {\n        return;\n      }\n      const nextChecked = event.target.checked;\n      const eventDetails = createChangeEventDetails(REASONS.none, event.nativeEvent);\n      onCheckedChange?.(nextChecked, eventDetails);\n      if (eventDetails.isCanceled) {\n        return;\n      }\n      setCheckedState(nextChecked);\n    },\n    onFocus() {\n      switchRef.current?.focus();\n    }\n  }, validation.getInputValidationProps), [checked, disabled, handleInputRef, inputId, name, onCheckedChange, required, setCheckedState, validation]);\n  const state = React.useMemo(() => ({\n    ...fieldState,\n    checked,\n    disabled,\n    readOnly,\n    required\n  }), [fieldState, checked, disabled, readOnly, required]);\n  const element = useRenderElement('span', componentProps, {\n    state,\n    ref: [forwardedRef, switchRef, buttonRef],\n    props: [rootProps, validation.getValidationProps, elementProps, getButtonProps],\n    stateAttributesMapping\n  });\n  return /*#__PURE__*/_jsxs(SwitchRootContext.Provider, {\n    value: state,\n    children: [element, !checked && name && uncheckedValue !== undefined && /*#__PURE__*/_jsx(\"input\", {\n      type: \"hidden\",\n      name: name,\n      value: uncheckedValue\n    }), /*#__PURE__*/_jsx(\"input\", {\n      ...inputProps\n    })]\n  });\n});\nif (process.env.NODE_ENV !== \"production\") SwitchRoot.displayName = \"SwitchRoot\";"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BY;AACV;AAAM;AACK;AACT;AACA;AACI;AACM;AACJ;AACS;AACE;AACN;AACA;AACc;AACzB;AACA;AACG;AAEL;AAAM;AACJ;AAEF;AAAM;AACG;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACU;AACJ;AACN;AAEF;AAAM;AACJ;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+B;AACzB;AACM;AACE;AAEd;AAAiD;AACnC;AACmB;AACzB;AACC;AAET;AAAS;AACP;AACmB;AACZ;AACK;AACZ;AACgB;AAElB;AACE;AACE;AAAkC;AACpC;AAEF;AACE;AACA;AACA;AACA;AACE;AAAyB;AAEzB;AAA+B;AACjC;AAEF;AAAM;AACJ;AACA;AACY;AACZ;AACQ;AAEV;AAAkB;AAChB;AACM;AACU;AACa;AACV;AAEjB;AACE;AAAe;AACjB;AACF;AAEE;AACA;AACE;AAAA;AAEF;AACA;AACA;AACE;AAAiC;AACnC;AACF;AAEE;AACE;AAAA;AAEF;AACA;AAAwB;AAC1B;AAEF;AAAkD;AAChD;AACA;AACI;AACJ;AACA;AACO;AACG;AACJ;AACS;AACV;AAGH;AACE;AAAA;AAEF;AACA;AACA;AACA;AACE;AAAA;AAEF;AAA2B;AAC7B;AAEE;AAAwB;AAC1B;AAEF;AAAmC;AAC9B;AACH;AACA;AACA;AACA;AAEF;AAAyD;AACvD;AACwC;AACsC;AAC9E;AAEF;AAAsD;AAC7C;AAC4F;AAC3F;AACN;AACO;AACsB;AAC1B;AACH;AAEN;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/switch/root/SwitchRootContext.js

@@ -0,0 +1,16 @@
+import formatErrorMessage from "../../../../utils/esm/formatErrorMessage.js";
+import * as React from "react";
+const SwitchRootContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") SwitchRootContext.displayName = "SwitchRootContext";
+function useSwitchRootContext() {
+  const context = React.useContext(SwitchRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>." : formatErrorMessage(63));
+  }
+  return context;
+}
+export {
+  SwitchRootContext,
+  useSwitchRootContext
+};
+//# sourceMappingURL=SwitchRootContext.js.map

package/dist/node_modules/@base-ui/react/esm/switch/root/SwitchRootContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchRootContext.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/switch/root/SwitchRootContext.js"],"sourcesContent":["import _formatErrorMessage from \"@base-ui/utils/formatErrorMessage\";\nimport * as React from 'react';\nexport const SwitchRootContext = /*#__PURE__*/React.createContext(undefined);\nif (process.env.NODE_ENV !== \"production\") SwitchRootContext.displayName = \"SwitchRootContext\";\nexport function useSwitchRootContext() {\n  const context = React.useContext(SwitchRootContext);\n  if (context === undefined) {\n    throw new Error(process.env.NODE_ENV !== \"production\" ? 'Base UI: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>.' : _formatErrorMessage(63));\n  }\n  return context;\n}"],"names":["_formatErrorMessage"],"mappings":";;AAEY,MAAC,oBAAiC,sBAAM,cAAc,MAAS;AAC3E,IAAI,QAAQ,IAAI,aAAa,aAAc,mBAAkB,cAAc;AACpE,SAAS,uBAAuB;AACrC,QAAM,UAAU,MAAM,WAAW,iBAAiB;AAClD,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,QAAQ,IAAI,aAAa,eAAe,6FAA6FA,mBAAoB,EAAE,CAAC;AAAA,EAC9K;AACA,SAAO;AACT;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/switch/root/SwitchRootDataAttributes.js

@@ -0,0 +1,18 @@
+let SwitchRootDataAttributes = /* @__PURE__ */ (function(SwitchRootDataAttributes2) {
+  SwitchRootDataAttributes2["checked"] = "data-checked";
+  SwitchRootDataAttributes2["unchecked"] = "data-unchecked";
+  SwitchRootDataAttributes2["disabled"] = "data-disabled";
+  SwitchRootDataAttributes2["readonly"] = "data-readonly";
+  SwitchRootDataAttributes2["required"] = "data-required";
+  SwitchRootDataAttributes2["valid"] = "data-valid";
+  SwitchRootDataAttributes2["invalid"] = "data-invalid";
+  SwitchRootDataAttributes2["touched"] = "data-touched";
+  SwitchRootDataAttributes2["dirty"] = "data-dirty";
+  SwitchRootDataAttributes2["filled"] = "data-filled";
+  SwitchRootDataAttributes2["focused"] = "data-focused";
+  return SwitchRootDataAttributes2;
+})({});
+export {
+  SwitchRootDataAttributes
+};
+//# sourceMappingURL=SwitchRootDataAttributes.js.map

package/dist/node_modules/@base-ui/react/esm/switch/root/SwitchRootDataAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchRootDataAttributes.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/switch/root/SwitchRootDataAttributes.js"],"sourcesContent":["export let SwitchRootDataAttributes = /*#__PURE__*/function (SwitchRootDataAttributes) {\n  /**\n   * Present when the switch is checked.\n   */\n  SwitchRootDataAttributes[\"checked\"] = \"data-checked\";\n  /**\n   * Present when the switch is not checked.\n   */\n  SwitchRootDataAttributes[\"unchecked\"] = \"data-unchecked\";\n  /**\n   * Present when the switch is disabled.\n   */\n  SwitchRootDataAttributes[\"disabled\"] = \"data-disabled\";\n  /**\n   * Present when the switch is readonly.\n   */\n  SwitchRootDataAttributes[\"readonly\"] = \"data-readonly\";\n  /**\n   * Present when the switch is required.\n   */\n  SwitchRootDataAttributes[\"required\"] = \"data-required\";\n  /**\n   * Present when the switch is in valid state (when wrapped in Field.Root).\n   */\n  SwitchRootDataAttributes[\"valid\"] = \"data-valid\";\n  /**\n   * Present when the switch is in invalid state (when wrapped in Field.Root).\n   */\n  SwitchRootDataAttributes[\"invalid\"] = \"data-invalid\";\n  /**\n   * Present when the switch has been touched (when wrapped in Field.Root).\n   */\n  SwitchRootDataAttributes[\"touched\"] = \"data-touched\";\n  /**\n   * Present when the switch's value has changed (when wrapped in Field.Root).\n   */\n  SwitchRootDataAttributes[\"dirty\"] = \"data-dirty\";\n  /**\n   * Present when the switch is active (when wrapped in Field.Root).\n   */\n  SwitchRootDataAttributes[\"filled\"] = \"data-filled\";\n  /**\n   * Present when the switch is focused (when wrapped in Field.Root).\n   */\n  SwitchRootDataAttributes[\"focused\"] = \"data-focused\";\n  return SwitchRootDataAttributes;\n}({});"],"names":["SwitchRootDataAttributes"],"mappings":"AAAU,IAAC,2BAAwC,0BAAUA,2BAA0B;AAIrF,EAAAA,0BAAyB,SAAS,IAAI;AAItC,EAAAA,0BAAyB,WAAW,IAAI;AAIxC,EAAAA,0BAAyB,UAAU,IAAI;AAIvC,EAAAA,0BAAyB,UAAU,IAAI;AAIvC,EAAAA,0BAAyB,UAAU,IAAI;AAIvC,EAAAA,0BAAyB,OAAO,IAAI;AAIpC,EAAAA,0BAAyB,SAAS,IAAI;AAItC,EAAAA,0BAAyB,SAAS,IAAI;AAItC,EAAAA,0BAAyB,OAAO,IAAI;AAIpC,EAAAA,0BAAyB,QAAQ,IAAI;AAIrC,EAAAA,0BAAyB,SAAS,IAAI;AACtC,SAAOA;AACT,GAAE,CAAA,CAAE;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/switch/stateAttributesMapping.js

@@ -0,0 +1,19 @@
+import { fieldValidityMapping } from "../field/utils/constants.js";
+import { SwitchRootDataAttributes } from "./root/SwitchRootDataAttributes.js";
+const stateAttributesMapping = {
+  ...fieldValidityMapping,
+  checked(value) {
+    if (value) {
+      return {
+        [SwitchRootDataAttributes.checked]: ""
+      };
+    }
+    return {
+      [SwitchRootDataAttributes.unchecked]: ""
+    };
+  }
+};
+export {
+  stateAttributesMapping
+};
+//# sourceMappingURL=stateAttributesMapping.js.map

package/dist/node_modules/@base-ui/react/esm/switch/stateAttributesMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateAttributesMapping.js","sources":["../../../../../../node_modules/@base-ui/react/esm/switch/stateAttributesMapping.js"],"sourcesContent":["import { fieldValidityMapping } from \"../field/utils/constants.js\";\nimport { SwitchRootDataAttributes } from \"./root/SwitchRootDataAttributes.js\";\nexport const stateAttributesMapping = {\n  ...fieldValidityMapping,\n  checked(value) {\n    if (value) {\n      return {\n        [SwitchRootDataAttributes.checked]: ''\n      };\n    }\n    return {\n      [SwitchRootDataAttributes.unchecked]: ''\n    };\n  }\n};"],"names":[],"mappings":";;AAEY,MAAC,yBAAyB;AAAA,EACpC,GAAG;AAAA,EACH,QAAQ,OAAO;AACb,QAAI,OAAO;AACT,aAAO;AAAA,QACL,CAAC,yBAAyB,OAAO,GAAG;AAAA,MAC5C;AAAA,IACI;AACA,WAAO;AAAA,MACL,CAAC,yBAAyB,SAAS,GAAG;AAAA,IAC5C;AAAA,EACE;AACF;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/switch/thumb/SwitchThumb.js

@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react";
+import { useSwitchRootContext } from "../root/SwitchRootContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { stateAttributesMapping } from "../stateAttributesMapping.js";
+const SwitchThumb = /* @__PURE__ */ React.forwardRef(function SwitchThumb2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState
+  } = useFieldRootContext();
+  const state = useSwitchRootContext();
+  const extendedState = {
+    ...fieldState,
+    ...state
+  };
+  return useRenderElement("span", componentProps, {
+    state: extendedState,
+    ref: forwardedRef,
+    stateAttributesMapping,
+    props: elementProps
+  });
+});
+if (process.env.NODE_ENV !== "production") SwitchThumb.displayName = "SwitchThumb";
+export {
+  SwitchThumb
+};
+//# sourceMappingURL=SwitchThumb.js.map

package/dist/node_modules/@base-ui/react/esm/switch/thumb/SwitchThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchThumb.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/switch/thumb/SwitchThumb.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSwitchRootContext } from \"../root/SwitchRootContext.js\";\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { useFieldRootContext } from \"../../field/root/FieldRootContext.js\";\nimport { stateAttributesMapping } from \"../stateAttributesMapping.js\";\n\n/**\n * The movable part of the switch that indicates whether the switch is on or off.\n * Renders a `<span>`.\n *\n * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)\n */\nexport const SwitchThumb = /*#__PURE__*/React.forwardRef(function SwitchThumb(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    ...elementProps\n  } = componentProps;\n  const {\n    state: fieldState\n  } = useFieldRootContext();\n  const state = useSwitchRootContext();\n  const extendedState = {\n    ...fieldState,\n    ...state\n  };\n  return useRenderElement('span', componentProps, {\n    state: extendedState,\n    ref: forwardedRef,\n    stateAttributesMapping,\n    props: elementProps\n  });\n});\nif (process.env.NODE_ENV !== \"production\") SwitchThumb.displayName = \"SwitchThumb\";"],"names":[],"mappings":";;;;;;AAcY;AACV;AAAM;AACJ;AACA;AACG;AAEL;AAAM;AACG;AAET;AACA;AAAsB;AACjB;AACA;AAEL;AAAgD;AACvC;AACF;AACL;AACO;AAEX;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/tabs/list/TabsList.js

@@ -0,0 +1,156 @@
+"use client";
+import * as React from "react";
+import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
+import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { useTabsRootContext } from "../root/TabsRootContext.js";
+import { TabsListContext } from "./TabsListContext.js";
+import { jsx } from "react/jsx-runtime";
+import { EMPTY_ARRAY } from "../../../../utils/esm/empty.js";
+const TabsList = /* @__PURE__ */ React.forwardRef(function TabsList2(componentProps, forwardedRef) {
+  const {
+    activateOnFocus = false,
+    className,
+    loopFocus = true,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    getTabElementBySelectedValue,
+    onValueChange,
+    orientation,
+    value,
+    setTabMap,
+    tabActivationDirection
+  } = useTabsRootContext();
+  const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);
+  const [tabsListElement, setTabsListElement] = React.useState(null);
+  const detectActivationDirection = useActivationDirectionDetector(
+    value,
+    // the old value
+    orientation,
+    tabsListElement,
+    getTabElementBySelectedValue
+  );
+  const onTabActivation = useStableCallback((newValue, eventDetails) => {
+    if (newValue !== value) {
+      const activationDirection = detectActivationDirection(newValue);
+      eventDetails.activationDirection = activationDirection;
+      onValueChange(newValue, eventDetails);
+    }
+  });
+  const state = React.useMemo(() => ({
+    orientation,
+    tabActivationDirection
+  }), [orientation, tabActivationDirection]);
+  const defaultProps = {
+    "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  };
+  const tabsListContextValue = React.useMemo(() => ({
+    activateOnFocus,
+    highlightedTabIndex,
+    onTabActivation,
+    setHighlightedTabIndex,
+    tabsListElement,
+    value
+  }), [activateOnFocus, highlightedTabIndex, onTabActivation, setHighlightedTabIndex, tabsListElement, value]);
+  return /* @__PURE__ */ jsx(TabsListContext.Provider, {
+    value: tabsListContextValue,
+    children: /* @__PURE__ */ jsx(CompositeRoot, {
+      render,
+      className,
+      state,
+      refs: [forwardedRef, setTabsListElement],
+      props: [defaultProps, elementProps],
+      stateAttributesMapping: tabsStateAttributesMapping,
+      highlightedIndex: highlightedTabIndex,
+      enableHomeAndEndKeys: true,
+      loopFocus,
+      orientation,
+      onHighlightedIndexChange: setHighlightedTabIndex,
+      onMapChange: setTabMap,
+      disabledIndices: EMPTY_ARRAY
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") TabsList.displayName = "TabsList";
+function getInset(tab, tabsList) {
+  const {
+    left: tabLeft,
+    top: tabTop
+  } = tab.getBoundingClientRect();
+  const {
+    left: listLeft,
+    top: listTop
+  } = tabsList.getBoundingClientRect();
+  const left = tabLeft - listLeft;
+  const top = tabTop - listTop;
+  return {
+    left,
+    top
+  };
+}
+function useActivationDirectionDetector(activeTabValue, orientation, tabsListElement, getTabElement) {
+  const [previousTabEdge, setPreviousTabEdge] = React.useState(null);
+  useIsoLayoutEffect(() => {
+    if (activeTabValue == null || tabsListElement == null) {
+      setPreviousTabEdge(null);
+      return;
+    }
+    const activeTab = getTabElement(activeTabValue);
+    if (activeTab == null) {
+      setPreviousTabEdge(null);
+      return;
+    }
+    const {
+      left,
+      top
+    } = getInset(activeTab, tabsListElement);
+    setPreviousTabEdge(orientation === "horizontal" ? left : top);
+  }, [orientation, getTabElement, tabsListElement, activeTabValue]);
+  return React.useCallback((newValue) => {
+    if (newValue === activeTabValue) {
+      return "none";
+    }
+    if (newValue == null) {
+      setPreviousTabEdge(null);
+      return "none";
+    }
+    if (newValue != null && tabsListElement != null) {
+      const activeTabElement = getTabElement(newValue);
+      if (activeTabElement != null) {
+        const {
+          left,
+          top
+        } = getInset(activeTabElement, tabsListElement);
+        if (previousTabEdge == null) {
+          setPreviousTabEdge(orientation === "horizontal" ? left : top);
+          return "none";
+        }
+        if (orientation === "horizontal") {
+          if (left < previousTabEdge) {
+            setPreviousTabEdge(left);
+            return "left";
+          }
+          if (left > previousTabEdge) {
+            setPreviousTabEdge(left);
+            return "right";
+          }
+        } else if (top < previousTabEdge) {
+          setPreviousTabEdge(top);
+          return "up";
+        } else if (top > previousTabEdge) {
+          setPreviousTabEdge(top);
+          return "down";
+        }
+      }
+    }
+    return "none";
+  }, [getTabElement, orientation, previousTabEdge, tabsListElement, activeTabValue]);
+}
+export {
+  TabsList
+};
+//# sourceMappingURL=TabsList.js.map

package/dist/node_modules/@base-ui/react/esm/tabs/list/TabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/tabs/list/TabsList.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { CompositeRoot } from \"../../composite/root/CompositeRoot.js\";\nimport { tabsStateAttributesMapping } from \"../root/stateAttributesMapping.js\";\nimport { useTabsRootContext } from \"../root/TabsRootContext.js\";\nimport { TabsListContext } from \"./TabsListContext.js\";\nimport { EMPTY_ARRAY } from \"../../utils/constants.js\";\n\n/**\n * Groups the individual tab buttons.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componentProps, forwardedRef) {\n  const {\n    activateOnFocus = false,\n    className,\n    loopFocus = true,\n    render,\n    ...elementProps\n  } = componentProps;\n  const {\n    getTabElementBySelectedValue,\n    onValueChange,\n    orientation,\n    value,\n    setTabMap,\n    tabActivationDirection\n  } = useTabsRootContext();\n  const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);\n  const [tabsListElement, setTabsListElement] = React.useState(null);\n  const detectActivationDirection = useActivationDirectionDetector(value,\n  // the old value\n  orientation, tabsListElement, getTabElementBySelectedValue);\n  const onTabActivation = useStableCallback((newValue, eventDetails) => {\n    if (newValue !== value) {\n      const activationDirection = detectActivationDirection(newValue);\n      eventDetails.activationDirection = activationDirection;\n      onValueChange(newValue, eventDetails);\n    }\n  });\n  const state = React.useMemo(() => ({\n    orientation,\n    tabActivationDirection\n  }), [orientation, tabActivationDirection]);\n  const defaultProps = {\n    'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,\n    role: 'tablist'\n  };\n  const tabsListContextValue = React.useMemo(() => ({\n    activateOnFocus,\n    highlightedTabIndex,\n    onTabActivation,\n    setHighlightedTabIndex,\n    tabsListElement,\n    value\n  }), [activateOnFocus, highlightedTabIndex, onTabActivation, setHighlightedTabIndex, tabsListElement, value]);\n  return /*#__PURE__*/_jsx(TabsListContext.Provider, {\n    value: tabsListContextValue,\n    children: /*#__PURE__*/_jsx(CompositeRoot, {\n      render: render,\n      className: className,\n      state: state,\n      refs: [forwardedRef, setTabsListElement],\n      props: [defaultProps, elementProps],\n      stateAttributesMapping: tabsStateAttributesMapping,\n      highlightedIndex: highlightedTabIndex,\n      enableHomeAndEndKeys: true,\n      loopFocus: loopFocus,\n      orientation: orientation,\n      onHighlightedIndexChange: setHighlightedTabIndex,\n      onMapChange: setTabMap,\n      disabledIndices: EMPTY_ARRAY\n    })\n  });\n});\nif (process.env.NODE_ENV !== \"production\") TabsList.displayName = \"TabsList\";\nfunction getInset(tab, tabsList) {\n  const {\n    left: tabLeft,\n    top: tabTop\n  } = tab.getBoundingClientRect();\n  const {\n    left: listLeft,\n    top: listTop\n  } = tabsList.getBoundingClientRect();\n  const left = tabLeft - listLeft;\n  const top = tabTop - listTop;\n  return {\n    left,\n    top\n  };\n}\nfunction useActivationDirectionDetector(\n// the old value\nactiveTabValue, orientation, tabsListElement, getTabElement) {\n  const [previousTabEdge, setPreviousTabEdge] = React.useState(null);\n  useIsoLayoutEffect(() => {\n    // Whenever orientation changes, reset the state.\n    if (activeTabValue == null || tabsListElement == null) {\n      setPreviousTabEdge(null);\n      return;\n    }\n    const activeTab = getTabElement(activeTabValue);\n    if (activeTab == null) {\n      setPreviousTabEdge(null);\n      return;\n    }\n    const {\n      left,\n      top\n    } = getInset(activeTab, tabsListElement);\n    setPreviousTabEdge(orientation === 'horizontal' ? left : top);\n  }, [orientation, getTabElement, tabsListElement, activeTabValue]);\n  return React.useCallback(newValue => {\n    if (newValue === activeTabValue) {\n      return 'none';\n    }\n    if (newValue == null) {\n      setPreviousTabEdge(null);\n      return 'none';\n    }\n    if (newValue != null && tabsListElement != null) {\n      const activeTabElement = getTabElement(newValue);\n      if (activeTabElement != null) {\n        const {\n          left,\n          top\n        } = getInset(activeTabElement, tabsListElement);\n        if (previousTabEdge == null) {\n          setPreviousTabEdge(orientation === 'horizontal' ? left : top);\n          return 'none';\n        }\n        if (orientation === 'horizontal') {\n          if (left < previousTabEdge) {\n            setPreviousTabEdge(left);\n            return 'left';\n          }\n          if (left > previousTabEdge) {\n            setPreviousTabEdge(left);\n            return 'right';\n          }\n        } else if (top < previousTabEdge) {\n          setPreviousTabEdge(top);\n          return 'up';\n        } else if (top > previousTabEdge) {\n          setPreviousTabEdge(top);\n          return 'down';\n        }\n      }\n    }\n    return 'none';\n  }, [getTabElement, orientation, previousTabEdge, tabsListElement, activeTabValue]);\n}"],"names":[],"mappings":";;;;;;;;;;AAkBY;AACV;AAAM;AACc;AAClB;AACY;AACZ;AACG;AAEL;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AAEF;AACA;AACA;AAAkC;AAA+B;AAAA;AAEjE;AAAa;AAAiB;AAC9B;AACE;AACE;AACA;AACA;AAAoC;AACtC;AAEF;AAAmC;AACjC;AACA;AAEF;AAAqB;AAC2C;AACxD;AAER;AAAkD;AAChD;AACA;AACA;AACA;AACA;AACA;AAEF;AAAmD;AAC1C;AACoC;AACzC;AACA;AACA;AACuC;AACL;AACV;AACN;AACI;AACtB;AACA;AAC0B;AACb;AACI;AAClB;AAEL;AACA;AACA;AACE;AAAM;AACE;AACD;AAEP;AAAM;AACE;AACD;AAEP;AACA;AACA;AAAO;AACL;AACA;AAEJ;AACA;AAGE;AACA;AAEE;AACE;AACA;AAAA;AAEF;AACA;AACE;AACA;AAAA;AAEF;AAAM;AACJ;AACA;AAEF;AAA4D;AAE9D;AACE;AACE;AAAO;AAET;AACE;AACA;AAAO;AAET;AACE;AACA;AACE;AAAM;AACJ;AACA;AAEF;AACE;AACA;AAAO;AAET;AACE;AACE;AACA;AAAO;AAET;AACE;AACA;AAAO;AACT;AAEA;AACA;AAAO;AAEP;AACA;AAAO;AACT;AACF;AAEF;AAAO;AAEX;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/tabs/list/TabsListContext.js

@@ -0,0 +1,17 @@
+"use client";
+import formatErrorMessage from "../../../../utils/esm/formatErrorMessage.js";
+import * as React from "react";
+const TabsListContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") TabsListContext.displayName = "TabsListContext";
+function useTabsListContext() {
+  const context = React.useContext(TabsListContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : formatErrorMessage(65));
+  }
+  return context;
+}
+export {
+  TabsListContext,
+  useTabsListContext
+};
+//# sourceMappingURL=TabsListContext.js.map

package/dist/node_modules/@base-ui/react/esm/tabs/list/TabsListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsListContext.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/tabs/list/TabsListContext.js"],"sourcesContent":["'use client';\n\nimport _formatErrorMessage from \"@base-ui/utils/formatErrorMessage\";\nimport * as React from 'react';\nexport const TabsListContext = /*#__PURE__*/React.createContext(undefined);\nif (process.env.NODE_ENV !== \"production\") TabsListContext.displayName = \"TabsListContext\";\nexport function useTabsListContext() {\n  const context = React.useContext(TabsListContext);\n  if (context === undefined) {\n    throw new Error(process.env.NODE_ENV !== \"production\" ? 'Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>.' : _formatErrorMessage(65));\n  }\n  return context;\n}"],"names":[],"mappings":";;;AAIY;AACZ;AACO;AACL;AACA;AACE;AAA0K;AAE5K;AACF;;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/tabs/panel/TabsPanel.js

@@ -0,0 +1,79 @@
+"use client";
+import * as React from "react";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { useTabsRootContext } from "../root/TabsRootContext.js";
+import { TabsPanelDataAttributes } from "./TabsPanelDataAttributes.js";
+const TabsPanel = /* @__PURE__ */ React.forwardRef(function TabPanel(componentProps, forwardedRef) {
+  const {
+    className,
+    value,
+    render,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    value: selectedValue,
+    getTabIdByPanelValue,
+    orientation,
+    tabActivationDirection,
+    registerMountedTabPanel,
+    unregisterMountedTabPanel
+  } = useTabsRootContext();
+  const id = useBaseUiId();
+  const metadata = React.useMemo(() => ({
+    id,
+    value
+  }), [id, value]);
+  const {
+    ref: listItemRef,
+    index
+  } = useCompositeListItem({
+    metadata
+  });
+  const hidden = value !== selectedValue;
+  const correspondingTabId = getTabIdByPanelValue(value);
+  const state = React.useMemo(() => ({
+    hidden,
+    orientation,
+    tabActivationDirection
+  }), [hidden, orientation, tabActivationDirection]);
+  const element = useRenderElement("div", componentProps, {
+    state,
+    ref: [forwardedRef, listItemRef],
+    props: [{
+      "aria-labelledby": correspondingTabId,
+      hidden,
+      id: id ?? void 0,
+      role: "tabpanel",
+      tabIndex: hidden ? -1 : 0,
+      [TabsPanelDataAttributes.index]: index
+    }, elementProps],
+    stateAttributesMapping: tabsStateAttributesMapping
+  });
+  useIsoLayoutEffect(() => {
+    if (hidden && !keepMounted) {
+      return void 0;
+    }
+    if (id == null) {
+      return void 0;
+    }
+    registerMountedTabPanel(value, id);
+    return () => {
+      unregisterMountedTabPanel(value, id);
+    };
+  }, [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel]);
+  const shouldRender = !hidden || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") TabsPanel.displayName = "TabsPanel";
+export {
+  TabsPanel
+};
+//# sourceMappingURL=TabsPanel.js.map

package/dist/node_modules/@base-ui/react/esm/tabs/panel/TabsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanel.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/tabs/panel/TabsPanel.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { useBaseUiId } from \"../../utils/useBaseUiId.js\";\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { useCompositeListItem } from \"../../composite/list/useCompositeListItem.js\";\nimport { tabsStateAttributesMapping } from \"../root/stateAttributesMapping.js\";\nimport { useTabsRootContext } from \"../root/TabsRootContext.js\";\nimport { TabsPanelDataAttributes } from \"./TabsPanelDataAttributes.js\";\n\n/**\n * A panel displayed when the corresponding tab is active.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)\n */\nexport const TabsPanel = /*#__PURE__*/React.forwardRef(function TabPanel(componentProps, forwardedRef) {\n  const {\n    className,\n    value,\n    render,\n    keepMounted = false,\n    ...elementProps\n  } = componentProps;\n  const {\n    value: selectedValue,\n    getTabIdByPanelValue,\n    orientation,\n    tabActivationDirection,\n    registerMountedTabPanel,\n    unregisterMountedTabPanel\n  } = useTabsRootContext();\n  const id = useBaseUiId();\n  const metadata = React.useMemo(() => ({\n    id,\n    value\n  }), [id, value]);\n  const {\n    ref: listItemRef,\n    index\n  } = useCompositeListItem({\n    metadata\n  });\n  const hidden = value !== selectedValue;\n  const correspondingTabId = getTabIdByPanelValue(value);\n  const state = React.useMemo(() => ({\n    hidden,\n    orientation,\n    tabActivationDirection\n  }), [hidden, orientation, tabActivationDirection]);\n  const element = useRenderElement('div', componentProps, {\n    state,\n    ref: [forwardedRef, listItemRef],\n    props: [{\n      'aria-labelledby': correspondingTabId,\n      hidden,\n      id: id ?? undefined,\n      role: 'tabpanel',\n      tabIndex: hidden ? -1 : 0,\n      [TabsPanelDataAttributes.index]: index\n    }, elementProps],\n    stateAttributesMapping: tabsStateAttributesMapping\n  });\n  useIsoLayoutEffect(() => {\n    if (hidden && !keepMounted) {\n      return undefined;\n    }\n    if (id == null) {\n      return undefined;\n    }\n    registerMountedTabPanel(value, id);\n    return () => {\n      unregisterMountedTabPanel(value, id);\n    };\n  }, [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel]);\n  const shouldRender = !hidden || keepMounted;\n  if (!shouldRender) {\n    return null;\n  }\n  return element;\n});\nif (process.env.NODE_ENV !== \"production\") TabsPanel.displayName = \"TabsPanel\";"],"names":[],"mappings":";;;;;;;;;AAiBY;AACV;AAAM;AACJ;AACA;AACA;AACc;AACX;AAEL;AAAM;AACG;AACP;AACA;AACA;AACA;AACA;AAEF;AACA;AAAsC;AACpC;AACA;AAEF;AAAM;AACC;AACL;AACuB;AACvB;AAEF;AACA;AACA;AAAmC;AACjC;AACA;AACA;AAEF;AAAwD;AACtD;AAC+B;AACvB;AACa;AACnB;AACU;AACJ;AACkB;AACS;AACpB;AACS;AAE1B;AACE;AACE;AAAO;AAET;AACE;AAAO;AAET;AACA;AACE;AAAmC;AACrC;AAEF;AACA;AACE;AAAO;AAET;AACF;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/tabs/panel/TabsPanelDataAttributes.js

@@ -0,0 +1,11 @@
+let TabsPanelDataAttributes = /* @__PURE__ */ (function(TabsPanelDataAttributes2) {
+  TabsPanelDataAttributes2["index"] = "data-index";
+  TabsPanelDataAttributes2["activationDirection"] = "data-activation-direction";
+  TabsPanelDataAttributes2["orientation"] = "data-orientation";
+  TabsPanelDataAttributes2["hidden"] = "data-hidden";
+  return TabsPanelDataAttributes2;
+})({});
+export {
+  TabsPanelDataAttributes
+};
+//# sourceMappingURL=TabsPanelDataAttributes.js.map

package/dist/node_modules/@base-ui/react/esm/tabs/panel/TabsPanelDataAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanelDataAttributes.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/tabs/panel/TabsPanelDataAttributes.js"],"sourcesContent":["export let TabsPanelDataAttributes = /*#__PURE__*/function (TabsPanelDataAttributes) {\n  /**\n   * Indicates the index of the tab panel.\n   */\n  TabsPanelDataAttributes[\"index\"] = \"data-index\";\n  /**\n   * Indicates the direction of the activation (based on the previous active tab).\n   * @type {'left' | 'right' | 'up' | 'down' | 'none'}\n   */\n  TabsPanelDataAttributes[\"activationDirection\"] = \"data-activation-direction\";\n  /**\n   * Indicates the orientation of the tabs.\n   * @type {'horizontal' | 'vertical'}\n   */\n  TabsPanelDataAttributes[\"orientation\"] = \"data-orientation\";\n  /**\n   * Present when the panel is hidden.\n   */\n  TabsPanelDataAttributes[\"hidden\"] = \"data-hidden\";\n  return TabsPanelDataAttributes;\n}({});"],"names":["TabsPanelDataAttributes"],"mappings":"AAAU,IAAC,0BAAuC,0BAAUA,0BAAyB;AAInF,EAAAA,yBAAwB,OAAO,IAAI;AAKnC,EAAAA,yBAAwB,qBAAqB,IAAI;AAKjD,EAAAA,yBAAwB,aAAa,IAAI;AAIzC,EAAAA,yBAAwB,QAAQ,IAAI;AACpC,SAAOA;AACT,GAAE,CAAA,CAAE;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/tabs/root/TabsRoot.js

@@ -0,0 +1,156 @@
+"use client";
+import * as React from "react";
+import { useControlled } from "../../../../utils/esm/useControlled.js";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { CompositeList } from "../../composite/list/CompositeList.js";
+import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { TabsRootContext } from "./TabsRootContext.js";
+import { tabsStateAttributesMapping } from "./stateAttributesMapping.js";
+import { jsx } from "react/jsx-runtime";
+const TabsRoot = /* @__PURE__ */ React.forwardRef(function TabsRoot2(componentProps, forwardedRef) {
+  const {
+    className,
+    defaultValue: defaultValueProp = 0,
+    onValueChange: onValueChangeProp,
+    orientation = "horizontal",
+    render,
+    value: valueProp,
+    ...elementProps
+  } = componentProps;
+  const direction = useDirection();
+  const hasExplicitDefaultValueProp = Object.hasOwn(componentProps, "defaultValue");
+  const tabPanelRefs = React.useRef([]);
+  const [mountedTabPanels, setMountedTabPanels] = React.useState(() => /* @__PURE__ */ new Map());
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValueProp,
+    name: "Tabs",
+    state: "value"
+  });
+  const isControlled = valueProp !== void 0;
+  const [tabMap, setTabMap] = React.useState(() => /* @__PURE__ */ new Map());
+  const [tabActivationDirection, setTabActivationDirection] = React.useState("none");
+  const onValueChange = useStableCallback((newValue, eventDetails) => {
+    onValueChangeProp?.(newValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setValue(newValue);
+    setTabActivationDirection(eventDetails.activationDirection);
+  });
+  const registerMountedTabPanel = useStableCallback((panelValue, panelId) => {
+    setMountedTabPanels((prev) => {
+      if (prev.get(panelValue) === panelId) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.set(panelValue, panelId);
+      return next;
+    });
+  });
+  const unregisterMountedTabPanel = useStableCallback((panelValue, panelId) => {
+    setMountedTabPanels((prev) => {
+      if (!prev.has(panelValue) || prev.get(panelValue) !== panelId) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.delete(panelValue);
+      return next;
+    });
+  });
+  const getTabPanelIdByValue = React.useCallback((tabValue) => {
+    return mountedTabPanels.get(tabValue);
+  }, [mountedTabPanels]);
+  const getTabIdByPanelValue = React.useCallback((tabPanelValue) => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabPanelValue === tabMetadata?.value) {
+        return tabMetadata?.id;
+      }
+    }
+    return void 0;
+  }, [tabMap]);
+  const getTabElementBySelectedValue = React.useCallback((selectedValue) => {
+    if (selectedValue === void 0) {
+      return null;
+    }
+    for (const [tabElement, tabMetadata] of tabMap.entries()) {
+      if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
+        return tabElement;
+      }
+    }
+    return null;
+  }, [tabMap]);
+  const tabsContextValue = React.useMemo(() => ({
+    direction,
+    getTabElementBySelectedValue,
+    getTabIdByPanelValue,
+    getTabPanelIdByValue,
+    onValueChange,
+    orientation,
+    registerMountedTabPanel,
+    setTabMap,
+    unregisterMountedTabPanel,
+    tabActivationDirection,
+    value
+  }), [direction, getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);
+  const selectedTabMetadata = React.useMemo(() => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabMetadata != null && tabMetadata.value === value) {
+        return tabMetadata;
+      }
+    }
+    return void 0;
+  }, [tabMap, value]);
+  const firstEnabledTabValue = React.useMemo(() => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabMetadata != null && !tabMetadata.disabled) {
+        return tabMetadata.value;
+      }
+    }
+    return void 0;
+  }, [tabMap]);
+  useIsoLayoutEffect(() => {
+    if (isControlled || tabMap.size === 0) {
+      return;
+    }
+    const selectionIsDisabled = selectedTabMetadata?.disabled;
+    const selectionIsMissing = selectedTabMetadata == null && value !== null;
+    const shouldHonorExplicitDefaultSelection = hasExplicitDefaultValueProp && selectionIsDisabled && value === defaultValueProp;
+    if (shouldHonorExplicitDefaultSelection) {
+      return;
+    }
+    if (!selectionIsDisabled && !selectionIsMissing) {
+      return;
+    }
+    const fallbackValue = firstEnabledTabValue ?? null;
+    if (value === fallbackValue) {
+      return;
+    }
+    setValue(fallbackValue);
+    setTabActivationDirection("none");
+  }, [defaultValueProp, firstEnabledTabValue, hasExplicitDefaultValueProp, isControlled, selectedTabMetadata, setTabActivationDirection, setValue, tabMap, value]);
+  const state = {
+    orientation,
+    tabActivationDirection
+  };
+  const element = useRenderElement("div", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: elementProps,
+    stateAttributesMapping: tabsStateAttributesMapping
+  });
+  return /* @__PURE__ */ jsx(TabsRootContext.Provider, {
+    value: tabsContextValue,
+    children: /* @__PURE__ */ jsx(CompositeList, {
+      elementsRef: tabPanelRefs,
+      children: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
+export {
+  TabsRoot
+};
+//# sourceMappingURL=TabsRoot.js.map

package/dist/node_modules/@base-ui/react/esm/tabs/root/TabsRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsRoot.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/tabs/root/TabsRoot.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useControlled } from '@base-ui/utils/useControlled';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { CompositeList } from \"../../composite/list/CompositeList.js\";\nimport { useDirection } from \"../../direction-provider/DirectionContext.js\";\nimport { TabsRootContext } from \"./TabsRootContext.js\";\nimport { tabsStateAttributesMapping } from \"./stateAttributesMapping.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Groups the tabs and the corresponding panels.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)\n */\nexport const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componentProps, forwardedRef) {\n  const {\n    className,\n    defaultValue: defaultValueProp = 0,\n    onValueChange: onValueChangeProp,\n    orientation = 'horizontal',\n    render,\n    value: valueProp,\n    ...elementProps\n  } = componentProps;\n  const direction = useDirection();\n\n  // Track whether the user explicitly provided a `defaultValue` prop.\n  // Used to determine if we should honor a disabled tab selection.\n  const hasExplicitDefaultValueProp = Object.hasOwn(componentProps, 'defaultValue');\n  const tabPanelRefs = React.useRef([]);\n  const [mountedTabPanels, setMountedTabPanels] = React.useState(() => new Map());\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValueProp,\n    name: 'Tabs',\n    state: 'value'\n  });\n  const isControlled = valueProp !== undefined;\n  const [tabMap, setTabMap] = React.useState(() => new Map());\n  const [tabActivationDirection, setTabActivationDirection] = React.useState('none');\n  const onValueChange = useStableCallback((newValue, eventDetails) => {\n    onValueChangeProp?.(newValue, eventDetails);\n    if (eventDetails.isCanceled) {\n      return;\n    }\n    setValue(newValue);\n    setTabActivationDirection(eventDetails.activationDirection);\n  });\n  const registerMountedTabPanel = useStableCallback((panelValue, panelId) => {\n    setMountedTabPanels(prev => {\n      if (prev.get(panelValue) === panelId) {\n        return prev;\n      }\n      const next = new Map(prev);\n      next.set(panelValue, panelId);\n      return next;\n    });\n  });\n  const unregisterMountedTabPanel = useStableCallback((panelValue, panelId) => {\n    setMountedTabPanels(prev => {\n      if (!prev.has(panelValue) || prev.get(panelValue) !== panelId) {\n        return prev;\n      }\n      const next = new Map(prev);\n      next.delete(panelValue);\n      return next;\n    });\n  });\n\n  // get the `id` attribute of <Tabs.Panel> to set as the value of `aria-controls` on <Tabs.Tab>\n  const getTabPanelIdByValue = React.useCallback(tabValue => {\n    return mountedTabPanels.get(tabValue);\n  }, [mountedTabPanels]);\n\n  // get the `id` attribute of <Tabs.Tab> to set as the value of `aria-labelledby` on <Tabs.Panel>\n  const getTabIdByPanelValue = React.useCallback(tabPanelValue => {\n    for (const tabMetadata of tabMap.values()) {\n      if (tabPanelValue === tabMetadata?.value) {\n        return tabMetadata?.id;\n      }\n    }\n    return undefined;\n  }, [tabMap]);\n\n  // used in `useActivationDirectionDetector` for setting data-activation-direction\n  const getTabElementBySelectedValue = React.useCallback(selectedValue => {\n    if (selectedValue === undefined) {\n      return null;\n    }\n    for (const [tabElement, tabMetadata] of tabMap.entries()) {\n      if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {\n        return tabElement;\n      }\n    }\n    return null;\n  }, [tabMap]);\n  const tabsContextValue = React.useMemo(() => ({\n    direction,\n    getTabElementBySelectedValue,\n    getTabIdByPanelValue,\n    getTabPanelIdByValue,\n    onValueChange,\n    orientation,\n    registerMountedTabPanel,\n    setTabMap,\n    unregisterMountedTabPanel,\n    tabActivationDirection,\n    value\n  }), [direction, getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);\n  const selectedTabMetadata = React.useMemo(() => {\n    for (const tabMetadata of tabMap.values()) {\n      if (tabMetadata != null && tabMetadata.value === value) {\n        return tabMetadata;\n      }\n    }\n    return undefined;\n  }, [tabMap, value]);\n\n  // Find the first non-disabled tab value.\n  // Used as a fallback when the current selection is disabled or missing.\n  const firstEnabledTabValue = React.useMemo(() => {\n    for (const tabMetadata of tabMap.values()) {\n      if (tabMetadata != null && !tabMetadata.disabled) {\n        return tabMetadata.value;\n      }\n    }\n    return undefined;\n  }, [tabMap]);\n\n  // Automatically switch to the first enabled tab when:\n  // - The current selection is disabled (and wasn't explicitly set via defaultValue)\n  // - The current selection is missing (tab was removed from DOM)\n  // Falls back to null if all tabs are disabled.\n  useIsoLayoutEffect(() => {\n    if (isControlled || tabMap.size === 0) {\n      return;\n    }\n    const selectionIsDisabled = selectedTabMetadata?.disabled;\n    const selectionIsMissing = selectedTabMetadata == null && value !== null;\n    const shouldHonorExplicitDefaultSelection = hasExplicitDefaultValueProp && selectionIsDisabled && value === defaultValueProp;\n    if (shouldHonorExplicitDefaultSelection) {\n      return;\n    }\n    if (!selectionIsDisabled && !selectionIsMissing) {\n      return;\n    }\n    const fallbackValue = firstEnabledTabValue ?? null;\n    if (value === fallbackValue) {\n      return;\n    }\n    setValue(fallbackValue);\n    setTabActivationDirection('none');\n  }, [defaultValueProp, firstEnabledTabValue, hasExplicitDefaultValueProp, isControlled, selectedTabMetadata, setTabActivationDirection, setValue, tabMap, value]);\n  const state = {\n    orientation,\n    tabActivationDirection\n  };\n  const element = useRenderElement('div', componentProps, {\n    state,\n    ref: forwardedRef,\n    props: elementProps,\n    stateAttributesMapping: tabsStateAttributesMapping\n  });\n  return /*#__PURE__*/_jsx(TabsRootContext.Provider, {\n    value: tabsContextValue,\n    children: /*#__PURE__*/_jsx(CompositeList, {\n      elementsRef: tabPanelRefs,\n      children: element\n    })\n  });\n});\nif (process.env.NODE_ENV !== \"production\") TabsRoot.displayName = \"TabsRoot\";"],"names":[],"mappings":";;;;;;;;;;;AAkBY;AACV;AAAM;AACJ;AACiC;AAClB;AACD;AACd;AACO;AACJ;AAEL;AAIA;AACA;AACA;AACA;AAAwC;AAC1B;AACH;AACH;AACC;AAET;AACA;AACA;AACA;AACE;AACA;AACE;AAAA;AAEF;AACA;AAA0D;AAE5D;AACE;AACE;AACE;AAAO;AAET;AACA;AACA;AAAO;AACR;AAEH;AACE;AACE;AACE;AAAO;AAET;AACA;AACA;AAAO;AACR;AAIH;AACE;AAAoC;AAItC;AACE;AACE;AACE;AAAoB;AACtB;AAEF;AAAO;AAIT;AACE;AACE;AAAO;AAET;AACE;AACE;AAAO;AACT;AAEF;AAAO;AAET;AAA8C;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACE;AACE;AAAO;AACT;AAEF;AAAO;AAKT;AACE;AACE;AACE;AAAmB;AACrB;AAEF;AAAO;AAOT;AACE;AACE;AAAA;AAEF;AACA;AACA;AACA;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACA;AACE;AAAA;AAEF;AACA;AAAgC;AAElC;AAAc;AACZ;AACA;AAEF;AAAwD;AACtD;AACK;AACE;AACiB;AAE1B;AAAmD;AAC1C;AACoC;AAC5B;AACH;AACX;AAEL;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/tabs/root/TabsRootContext.js

@@ -0,0 +1,17 @@
+"use client";
+import formatErrorMessage from "../../../../utils/esm/formatErrorMessage.js";
+import * as React from "react";
+const TabsRootContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") TabsRootContext.displayName = "TabsRootContext";
+function useTabsRootContext() {
+  const context = React.useContext(TabsRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : formatErrorMessage(64));
+  }
+  return context;
+}
+export {
+  TabsRootContext,
+  useTabsRootContext
+};
+//# sourceMappingURL=TabsRootContext.js.map

package/dist/node_modules/@base-ui/react/esm/tabs/root/TabsRootContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsRootContext.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/tabs/root/TabsRootContext.js"],"sourcesContent":["'use client';\n\nimport _formatErrorMessage from \"@base-ui/utils/formatErrorMessage\";\nimport * as React from 'react';\n/**\n * @internal\n */\nexport const TabsRootContext = /*#__PURE__*/React.createContext(undefined);\nif (process.env.NODE_ENV !== \"production\") TabsRootContext.displayName = \"TabsRootContext\";\nexport function useTabsRootContext() {\n  const context = React.useContext(TabsRootContext);\n  if (context === undefined) {\n    throw new Error(process.env.NODE_ENV !== \"production\" ? 'Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>.' : _formatErrorMessage(64));\n  }\n  return context;\n}"],"names":[],"mappings":";;;AAOY;AACZ;AACO;AACL;AACA;AACE;AAAsK;AAExK;AACF;;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/tabs/root/TabsRootDataAttributes.js

@@ -0,0 +1,9 @@
+let TabsRootDataAttributes = /* @__PURE__ */ (function(TabsRootDataAttributes2) {
+  TabsRootDataAttributes2["activationDirection"] = "data-activation-direction";
+  TabsRootDataAttributes2["orientation"] = "data-orientation";
+  return TabsRootDataAttributes2;
+})({});
+export {
+  TabsRootDataAttributes
+};
+//# sourceMappingURL=TabsRootDataAttributes.js.map