@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/switch/switch.md

@@ -0,0 +1,332 @@
+# Switch
+
+A toggle control that allows users to switch between on and off states.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Switch } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The Switch component renders with default thumb if no children provided.
+
+```tsx
+<Switch isSelected={isSelected} onSelectedChange={setIsSelected} />
+```
+
+### With Custom Thumb
+
+Replace the default thumb with custom content using the Thumb component.
+
+```tsx
+<Switch isSelected={isSelected} onSelectedChange={setIsSelected}>
+  <Switch.Thumb>...</Switch.Thumb>
+</Switch>
+```
+
+### With Start and End Content
+
+Add icons or text that appear on each side of the switch.
+
+```tsx
+<Switch isSelected={isSelected} onSelectedChange={setIsSelected}>
+  <Switch.Thumb />
+  <Switch.StartContent>...</Switch.StartContent>
+  <Switch.EndContent>...</Switch.EndContent>
+</Switch>
+```
+
+### With Render Function
+
+Use render functions for dynamic content based on switch state.
+
+```tsx
+<Switch isSelected={isSelected} onSelectedChange={setIsSelected}>
+  {({ isSelected, isDisabled }) => (
+    <>
+      <Switch.Thumb>
+        {({ isSelected }) => (isSelected ? <CheckIcon /> : <XIcon />)}
+      </Switch.Thumb>
+    </>
+  )}
+</Switch>
+```
+
+### With Custom Animations
+
+Customize animations for the switch root and thumb components.
+
+```tsx
+<Switch
+  animation={{
+    scale: {
+      value: [1, 0.9],
+      timingConfig: { duration: 200 },
+    },
+    backgroundColor: {
+      value: ['#172554', '#eab308'],
+    },
+  }}
+>
+  <Switch.Thumb
+    animation={{
+      left: {
+        value: 4,
+        springConfig: {
+          damping: 30,
+          stiffness: 300,
+          mass: 1,
+        },
+      },
+      backgroundColor: {
+        value: ['#dbeafe', '#854d0e'],
+      },
+    }}
+  />
+</Switch>
+```
+
+### Disable Animations
+
+Disable animations entirely or only for specific components.
+
+```tsx
+{
+  /* Disable all animations including children */
+}
+<Switch animation="disable-all">
+  <Switch.Thumb />
+</Switch>;
+
+{
+  /* Disable only root animations, thumb can still animate */
+}
+<Switch>
+  <Switch.Thumb animation={false} />
+</Switch>;
+```
+
+## Example
+
+```tsx
+import { Switch } from 'heroui-native';
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { View } from 'react-native';
+import Animated, { ZoomIn } from 'react-native-reanimated';
+
+export default function SwitchExample() {
+  const [darkMode, setDarkMode] = React.useState(false);
+
+  return (
+    <View className="flex-row gap-4">
+      <Switch
+        isSelected={darkMode}
+        onSelectedChange={setDarkMode}
+        className="w-[56px] h-[32px]"
+        animation={{
+          backgroundColor: {
+            value: ['#172554', '#eab308'],
+          },
+        }}
+      >
+        <Switch.Thumb
+          className="size-[22px]"
+          animation={{
+            left: {
+              value: 4,
+              springConfig: {
+                damping: 30,
+                stiffness: 300,
+                mass: 1,
+              },
+            },
+          }}
+        />
+        <Switch.StartContent className="left-2">
+          {darkMode && (
+            <Animated.View key="sun" entering={ZoomIn.springify()}>
+              <Ionicons name="sunny" size={16} color="#854d0e" />
+            </Animated.View>
+          )}
+        </Switch.StartContent>
+        <Switch.EndContent className="right-2">
+          {!darkMode && (
+            <Animated.View key="moon" entering={ZoomIn.springify()}>
+              <Ionicons name="moon" size={16} color="#dbeafe" />
+            </Animated.View>
+          )}
+        </Switch.EndContent>
+      </Switch>
+    </View>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<Switch>
+  <Switch.Thumb>...</Switch.Thumb>
+  <Switch.StartContent>...</Switch.StartContent>
+  <Switch.EndContent>...</Switch.EndContent>
+</Switch>
+```
+
+- **Switch**: Main container that handles toggle state and user interaction. Renders default thumb if no children provided. Animates scale (on press) and background color based on selection state. Acts as a pressable area for toggling.
+- **Switch.Thumb**: Optional sliding thumb element that moves between positions. Uses spring animation for smooth transitions. Can contain custom content like icons or be customized with different styles and animations.
+- **Switch.StartContent**: Optional content displayed on the left side of the switch. Typically used for icons or text that appear when switch is off. Positioned absolutely within the switch container.
+- **Switch.EndContent**: Optional content displayed on the right side of the switch. Typically used for icons or text that appear when switch is on. Positioned absolutely within the switch container.
+
+## API Reference
+
+### Switch
+
+| prop                        | type                                                                 | default     | description                                                  |
+| --------------------------- | -------------------------------------------------------------------- | ----------- | ------------------------------------------------------------ |
+| `children`                  | `React.ReactNode \| ((props: SwitchRenderProps) => React.ReactNode)` | `undefined` | Content to render inside the switch, or a render function    |
+| `isSelected`                | `boolean`                                                            | `undefined` | Whether the switch is currently selected                     |
+| `isDisabled`                | `boolean`                                                            | `false`     | Whether the switch is disabled and cannot be interacted with |
+| `className`                 | `string`                                                             | `undefined` | Custom class name for the switch                             |
+| `animation`                 | `SwitchRootAnimation`                                                | -           | Animation configuration                                      |
+| `isAnimatedStyleActive`     | `boolean`                                                            | `true`      | Whether animated styles (react-native-reanimated) are active |
+| `onSelectedChange`          | `(isSelected: boolean) => void`                                      | -           | Callback fired when the switch selection state changes       |
+| `...AnimatedPressableProps` | `AnimatedProps<PressableProps>`                                      | -           | All React Native Reanimated Pressable props are supported    |
+
+#### SwitchRenderProps
+
+| prop         | type      | description                    |
+| ------------ | --------- | ------------------------------ |
+| `isSelected` | `boolean` | Whether the switch is selected |
+| `isDisabled` | `boolean` | Whether the switch is disabled |
+
+#### SwitchRootAnimation
+
+Animation configuration for Switch component. Can be:
+
+- `false` or `"disabled"`: Disable only root animations
+- `"disable-all"`: Disable all animations including children
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop                           | type                                    | default                                                        | description                                    |
+| ------------------------------ | --------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------- |
+| `state`                        | `'disabled' \| 'disable-all' \| boolean` | -                                                              | Disable animations while customizing properties |
+| `scale.value`                  | `[number, number]`                      | `[1, 0.96]`                                                    | Scale values [unpressed, pressed]              |
+| `scale.timingConfig`           | `WithTimingConfig`                      | `{ duration: 150 }`                                            | Animation timing configuration                 |
+| `backgroundColor.value`        | `[string, string]`                     | Uses theme colors                                              | Background color values [unselected, selected] |
+| `backgroundColor.timingConfig` | `WithTimingConfig`                      | `{ duration: 175, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }` | Animation timing configuration                 |
+
+### Switch.Thumb
+
+| prop                    | type                                                                 | default     | description                                                  |
+| ----------------------- | -------------------------------------------------------------------- | ----------- | ------------------------------------------------------------ |
+| `children`              | `React.ReactNode \| ((props: SwitchRenderProps) => React.ReactNode)` | `undefined` | Content to render inside the thumb, or a render function     |
+| `className`             | `string`                                                             | `undefined` | Custom class name for the thumb element                      |
+| `animation`             | `SwitchThumbAnimation`                                               | -           | Animation configuration                                      |
+| `isAnimatedStyleActive` | `boolean`                                                            | `true`      | Whether animated styles (react-native-reanimated) are active |
+| `...ViewProps`          | `ViewProps`                                                          | -           | All standard React Native View props are supported           |
+
+#### SwitchThumbAnimation
+
+Animation configuration for Switch.Thumb component. Can be:
+
+- `false` or `"disabled"`: Disable all animations
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop                           | type                          | default                                                        | description                                                             |
+| ------------------------------ | ----------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `state`                        | `'disabled' \| boolean`       | -                                                              | Disable animations while customizing properties                         |
+| `left.value`                   | `number`                      | `2`                                                            | Offset value from the edges (left when unselected, right when selected) |
+| `left.springConfig`            | `WithSpringConfig`            | `{ damping: 120, stiffness: 1600, mass: 2 }`                   | Spring animation configuration for thumb position                       |
+| `backgroundColor.value`        | `[string, string]`            | `['white', theme accent-foreground color]`                     | Background color values [unselected, selected]                          |
+| `backgroundColor.timingConfig` | `WithTimingConfig`            | `{ duration: 175, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }` | Animation timing configuration                                          |
+
+### Switch.StartContent
+
+| prop           | type              | default     | description                                        |
+| -------------- | ----------------- | ----------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | `undefined` | Content to render inside the switch content        |
+| `className`    | `string`          | `undefined` | Custom class name for the content element          |
+| `...ViewProps` | `ViewProps`       | -           | All standard React Native View props are supported |
+
+### Switch.EndContent
+
+| prop           | type              | default     | description                                        |
+| -------------- | ----------------- | ----------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | `undefined` | Content to render inside the switch content        |
+| `className`    | `string`          | `undefined` | Custom class name for the content element          |
+| `...ViewProps` | `ViewProps`       | -           | All standard React Native View props are supported |
+
+## Styling Notes
+
+### Border Styling
+
+If you need to apply a border to the switch root, use the `outline` style properties instead of `border`. This ensures the border doesn't affect the internal layout calculations for the thumb position:
+
+```tsx
+<Switch className="outline outline-accent">
+  <Switch.Thumb />
+</Switch>
+```
+
+Using `outline` keeps the border visual without impacting the switch's internal width calculations, ensuring the thumb animates correctly.
+
+## Integration with FormField
+
+The Switch component integrates seamlessly with FormField for press state sharing:
+
+```tsx
+<FormField isSelected={isSelected} onSelectedChange={setIsSelected}>
+  <View className="flex-1">
+    <FormField.Label>Enable notifications</FormField.Label>
+    <FormField.Description>Receive push notifications</FormField.Description>
+  </View>
+  <FormField.Indicator />
+</FormField>
+```
+
+When wrapped in FormField, the Switch will automatically respond to press events on the entire FormField container, creating a larger touch target and better user experience.
+
+## Hooks
+
+### useSwitch
+
+A hook that provides access to the Switch context. This is useful when building custom switch components or when you need to access switch state in child components.
+
+**Returns:**
+
+| Property     | Type      | Description                    |
+| ------------ | --------- | ------------------------------ |
+| `isSelected` | `boolean` | Whether the switch is selected |
+| `isDisabled` | `boolean` | Whether the switch is disabled |
+
+**Example:**
+
+```tsx
+import { useSwitch } from 'heroui-native';
+
+function CustomSwitchContent() {
+  const { isSelected, isDisabled } = useSwitch();
+
+  return (
+    <View>
+      <Text>Status: {isSelected ? 'On' : 'Off'}</Text>
+      {isDisabled && <Text>Disabled</Text>}
+    </View>
+  );
+}
+
+// Usage
+<Switch>
+  <CustomSwitchContent />
+  <Switch.Thumb />
+</Switch>;
+```

package/lib/module/components/switch/switch.styles.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from "../../helpers/theme/utils/combine-styles.js";
+
+/**
+ * Root style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following properties are animated and cannot be overridden using Tailwind classes:
+ * - `backgroundColor` - Animated for selection transitions (unselected: surface-quaternary, selected: accent)
+ * - `transform` (specifically `scale`) - Animated for press feedback transitions (unpressed: 1, pressed: 0.96)
+ *
+ * To customize these properties, use the `animation` prop on `Switch`:
+ * ```tsx
+ * <Switch
+ *   animation={{
+ *     backgroundColor: { value: ['#e5e5e5', '#007AFF'], timingConfig: { duration: 175 } },
+ *     scale: { value: [1, 0.96], timingConfig: { duration: 150 } }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Switch`.
+ */
+const root = tv({
+  base: 'w-[48px] h-[24px] rounded-full justify-center overflow-hidden',
+  variants: {
+    isDisabled: {
+      true: 'opacity-disabled pointer-events-none',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isDisabled: false
+  }
+});
+
+/**
+ * Thumb style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following properties are animated and cannot be overridden using Tailwind classes:
+ * - `left` - Animated for thumb position transitions (unselected: left edge offset, selected: right edge offset)
+ * - `backgroundColor` - Animated for selection transitions (unselected: white, selected: accent-foreground)
+ *
+ * To customize these properties, use the `animation` prop on `Switch.Thumb`:
+ * ```tsx
+ * <Switch.Thumb
+ *   animation={{
+ *     left: { value: 2, springConfig: { damping: 120, stiffness: 1600, mass: 2 } },
+ *     backgroundColor: { value: ['white', '#ffffff'], timingConfig: { duration: 175 } }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Switch.Thumb`.
+ */
+const thumb = tv({
+  base: 'absolute left-[2px] items-center justify-center w-[28px] h-[20px] rounded-full shadow-sm shadow-black/5 overflow-hidden'
+});
+const startContent = tv({
+  base: 'absolute left-[2px]'
+});
+const endContent = tv({
+  base: 'absolute right-[2px]'
+});
+const switchStyles = combineStyles({
+  root,
+  thumb,
+  startContent,
+  endContent
+});
+export const styleSheet = StyleSheet.create({
+  borderCurve: {
+    borderCurve: 'continuous'
+  }
+});
+export default switchStyles;
+//# sourceMappingURL=switch.styles.js.map

package/lib/module/components/switch/switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","tv","combineStyles","root","base","variants","isDisabled","true","false","defaultVariants","thumb","startContent","endContent","switchStyles","styleSheet","create","borderCurve"],"sourceRoot":"../../../../src","sources":["components/switch/switch.styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,QAAQ,mBAAmB;AACtC,SAASC,aAAa,QAAQ,6CAA0C;;AAExE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,IAAI,GAAGF,EAAE,CAAC;EACdG,IAAI,EAAE,+DAA+D;EACrEC,QAAQ,EAAE;IACRC,UAAU,EAAE;MACVC,IAAI,EAAE,sCAAsC;MAC5CC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,UAAU,EAAE;EACd;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,KAAK,GAAGT,EAAE,CAAC;EACfG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMO,YAAY,GAAGV,EAAE,CAAC;EACtBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMQ,UAAU,GAAGX,EAAE,CAAC;EACpBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMS,YAAY,GAAGX,aAAa,CAAC;EACjCC,IAAI;EACJO,KAAK;EACLC,YAAY;EACZC;AACF,CAAC,CAAC;AAEF,OAAO,MAAME,UAAU,GAAGd,UAAU,CAACe,MAAM,CAAC;EAC1CC,WAAW,EAAE;IACXA,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,eAAeH,YAAY","ignoreList":[]}

package/lib/module/components/switch/switch.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=switch.types.js.map

package/lib/module/components/switch/switch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/switch/switch.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/tabs/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as Tabs, useTabs, useTabsMeasurements, useTabsTrigger } from "./tabs.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Tabs","useTabs","useTabsMeasurements","useTabsTrigger"],"sourceRoot":"../../../../src","sources":["components/tabs/index.ts"],"mappings":";;AAAA,SACEA,OAAO,IAAIC,IAAI,EACfC,OAAO,EACPC,mBAAmB,EACnBC,cAAc,QACT,WAAQ","ignoreList":[]}

package/lib/module/components/tabs/tabs.animation.js

@@ -0,0 +1,139 @@
+"use strict";
+
+import { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useAnimationSettings } from "../../helpers/contexts/animation-settings-context.js";
+import { useCombinedAnimationDisabledState } from "../../helpers/hooks/index.js";
+import { getAnimationState, getIsAnimationDisabledValue } from "../../helpers/utils/animation.js";
+import * as TabsPrimitives from "../../primitives/tabs/index.js";
+import { DEFAULT_INDICATOR_SPRING_CONFIG } from "./tabs.constants.js";
+import { useTabsMeasurements } from "./tabs.context.js";
+// --------------------------------------------------
+
+/**
+ * Animation hook for Tabs root component
+ * Handles cascading animation disabled state to child components
+ */
+export function useTabsRootAnimation(options) {
+  const {
+    animation
+  } = options;
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+  return {
+    isAllAnimationsDisabled
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Tabs Indicator component
+ * Handles width, height, left position, and opacity animations
+ */
+export function useTabsIndicatorAnimation(options) {
+  const {
+    animation
+  } = options;
+
+  // Get active measurements from tabs context
+  const {
+    value
+  } = TabsPrimitives.useRootContext();
+  const {
+    measurements
+  } = useTabsMeasurements();
+  const activeMeasurements = measurements[value];
+
+  // Read from global animation context (always available in compound parts)
+  const {
+    isAllAnimationsDisabled
+  } = useAnimationSettings();
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getAnimationState(animation);
+
+  // IMPORTANT: Use getIsAnimationDisabledValue to respect both own and parent states
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+  const hasMeasured = useSharedValue(false);
+
+  // Helper function to get animation config for a property
+  const getPropertyConfig = propertyAnimation => {
+    if (!propertyAnimation) {
+      return {
+        type: 'spring',
+        springConfig: DEFAULT_INDICATOR_SPRING_CONFIG,
+        timingConfig: {
+          duration: 200
+        }
+      };
+    }
+    if (propertyAnimation.type === 'spring') {
+      return {
+        type: 'spring',
+        springConfig: propertyAnimation.config ?? DEFAULT_INDICATOR_SPRING_CONFIG,
+        timingConfig: {
+          duration: 200
+        }
+      };
+    }
+    return {
+      type: 'timing',
+      springConfig: DEFAULT_INDICATOR_SPRING_CONFIG,
+      timingConfig: propertyAnimation.config ?? {
+        duration: 200
+      }
+    };
+  };
+
+  // Get animation configs for each property
+  const widthConfig = getPropertyConfig(animationConfig?.width);
+  const heightConfig = getPropertyConfig(animationConfig?.height);
+  const leftConfig = getPropertyConfig(animationConfig?.left);
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (!activeMeasurements) {
+      return {
+        width: 0,
+        height: 0,
+        left: 0,
+        opacity: 0
+      };
+    }
+    if (!hasMeasured.value) {
+      hasMeasured.value = true;
+      return {
+        width: activeMeasurements.width,
+        height: activeMeasurements.height,
+        left: activeMeasurements.x,
+        opacity: 1
+      };
+    }
+
+    // Handle disabled state
+    if (isAnimationDisabledValue) {
+      return {
+        width: activeMeasurements.width,
+        height: activeMeasurements.height,
+        left: activeMeasurements.x,
+        opacity: 1
+      };
+    }
+
+    // Animated state
+    const widthAnimation = widthConfig.type === 'timing' ? withTiming(activeMeasurements.width, widthConfig.timingConfig) : withSpring(activeMeasurements.width, widthConfig.springConfig);
+    const heightAnimation = heightConfig.type === 'timing' ? withTiming(activeMeasurements.height, heightConfig.timingConfig) : withSpring(activeMeasurements.height, heightConfig.springConfig);
+    const leftAnimation = leftConfig.type === 'timing' ? withTiming(activeMeasurements.x, leftConfig.timingConfig) : withSpring(activeMeasurements.x, leftConfig.springConfig);
+    return {
+      width: widthAnimation,
+      height: heightAnimation,
+      left: leftAnimation,
+      opacity: 1
+    };
+  }, [activeMeasurements, isAnimationDisabledValue, widthConfig, heightConfig, leftConfig]);
+  return {
+    rContainerStyle
+  };
+}
+//# sourceMappingURL=tabs.animation.js.map

package/lib/module/components/tabs/tabs.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAnimatedStyle","useSharedValue","withSpring","withTiming","useAnimationSettings","useCombinedAnimationDisabledState","getAnimationState","getIsAnimationDisabledValue","TabsPrimitives","DEFAULT_INDICATOR_SPRING_CONFIG","useTabsMeasurements","useTabsRootAnimation","options","animation","isAllAnimationsDisabled","useTabsIndicatorAnimation","value","useRootContext","measurements","activeMeasurements","animationConfig","isAnimationDisabled","isAnimationDisabledValue","hasMeasured","getPropertyConfig","propertyAnimation","type","springConfig","timingConfig","duration","config","widthConfig","width","heightConfig","height","leftConfig","left","rContainerStyle","opacity","x","widthAnimation","heightAnimation","leftAnimation"],"sourceRoot":"../../../../src","sources":["components/tabs/tabs.animation.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/tabs/tabs.constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Tabs.Root',
+  LIST: 'HeroUINative.Tabs.List',
+  SCROLL_VIEW: 'HeroUINative.Tabs.ScrollView',
+  TRIGGER: 'HeroUINative.Tabs.Trigger',
+  LABEL: 'HeroUINative.Tabs.Label',
+  INDICATOR: 'HeroUINative.Tabs.Indicator',
+  CONTENT: 'HeroUINative.Tabs.Content'
+};
+export const DEFAULT_INDICATOR_SPRING_CONFIG = {
+  stiffness: 1200,
+  damping: 120
+};
+//# sourceMappingURL=tabs.constants.js.map

package/lib/module/components/tabs/tabs.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DISPLAY_NAME","ROOT","LIST","SCROLL_VIEW","TRIGGER","LABEL","INDICATOR","CONTENT","DEFAULT_INDICATOR_SPRING_CONFIG","stiffness","damping"],"sourceRoot":"../../../../src","sources":["components/tabs/tabs.constants.ts"],"mappings":";;AAEA,OAAO,MAAMA,YAAY,GAAG;EAC1BC,IAAI,EAAE,wBAAwB;EAC9BC,IAAI,EAAE,wBAAwB;EAC9BC,WAAW,EAAE,8BAA8B;EAC3CC,OAAO,EAAE,2BAA2B;EACpCC,KAAK,EAAE,yBAAyB;EAChCC,SAAS,EAAE,6BAA6B;EACxCC,OAAO,EAAE;AACX,CAAU;AAEV,OAAO,MAAMC,+BAAiD,GAAG;EAC/DC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE;AACX,CAAC","ignoreList":[]}

package/lib/module/components/tabs/tabs.context.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { createContext, useContext } from 'react';
+// --------------------------------------------------
+
+/**
+ * Context for managing tab item measurements
+ * Used to track width, height, and position of each tab trigger
+ */
+const MeasurementsContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Hook to access tab measurements context
+ * @throws Error if used outside of Tabs component
+ */
+function useTabsMeasurements() {
+  const context = useContext(MeasurementsContext);
+  if (!context) {
+    throw new Error('Tabs measurement components must be used within Tabs component');
+  }
+  return context;
+}
+export { MeasurementsContext, useTabsMeasurements };
+//# sourceMappingURL=tabs.context.js.map

package/lib/module/components/tabs/tabs.context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","MeasurementsContext","useTabsMeasurements","context","Error"],"sourceRoot":"../../../../src","sources":["components/tabs/tabs.context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAGjD;;AAEA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,gBAAGF,aAAa,CACvC,IACF,CAAC;;AAED;AACA;AACA;AACA;AACA,SAASG,mBAAmBA,CAAA,EAAG;EAC7B,MAAMC,OAAO,GAAGH,UAAU,CAACC,mBAAmB,CAAC;EAC/C,IAAI,CAACE,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,gEACF,CAAC;EACH;EACA,OAAOD,OAAO;AAChB;AAEA,SAASF,mBAAmB,EAAEC,mBAAmB","ignoreList":[]}