@situaction/traquiste-mobile 1.0.0-next.5 → 1.1.0

package/build/components/Stepper/Stepper.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Stepper — step-by-step wizard.
+ * Manages navigation between steps, renders a ProgressStep indicator
+ * and contextual footer buttons (cancel/back + next/confirm).
+ */
+import React from 'react';
+export interface StepperProps {
+    /** Ordered list of step content to render */
+    steps: React.ReactNode[];
+    /** Called when the user cancels on the first step */
+    onCancel: () => void;
+    /** Called when the user confirms on the last step */
+    onConfirm: () => void;
+    /**
+     * Called before advancing to the next step.
+     * Return false to block navigation (e.g. validation failed).
+     */
+    onStepNext?: (stepIndex: number) => boolean | Promise<boolean>;
+    /** Disables the confirm/next button while an async operation is pending */
+    isLoading?: boolean;
+    /**
+     * Extra bottom padding added to the footer — pass `useSafeAreaInsets().bottom`
+     * from your app to handle home indicator on iOS.
+     * @default 0
+     */
+    bottomInset?: number;
+    /** @default 'Annuler' */
+    labelCancel?: string;
+    /** @default 'Précédent' */
+    labelBack?: string;
+    /** @default 'Suivant' */
+    labelNext?: string;
+    /** @default 'Confirmer' */
+    labelConfirm?: string;
+    /**
+     * Button sizing mode.
+     * - `'stretch'` — buttons share available width equally (default)
+     * - `'fit'` — buttons size to their label content
+     * @default 'stretch'
+     */
+    buttonLayout?: 'stretch' | 'fit';
+    /**
+     * Hide the back/cancel button on the last step so the confirm button fills the full width.
+     * @default false
+     */
+    hideBackOnLastStep?: boolean;
+}
+export declare function Stepper({ steps, onCancel, onConfirm, onStepNext, isLoading, bottomInset, buttonLayout, hideBackOnLastStep, labelCancel, labelBack, labelNext, labelConfirm, }: StepperProps): React.JSX.Element;
+export default Stepper;
+//# sourceMappingURL=Stepper.d.ts.map

package/build/components/Stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,qDAAqD;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/D,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACjC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAiB,EACjB,WAAe,EACf,YAAwB,EACxB,kBAA0B,EAC1B,WAAuB,EACvB,SAAuB,EACvB,SAAqB,EACrB,YAA0B,GAC3B,EAAE,YAAY,qBAkDd;AAED,eAAe,OAAO,CAAC"}

package/build/components/Stepper/Stepper.js

@@ -0,0 +1,48 @@
+/**
+ * Stepper — step-by-step wizard.
+ * Manages navigation between steps, renders a ProgressStep indicator
+ * and contextual footer buttons (cancel/back + next/confirm).
+ */
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Button } from '../Button';
+import { ProgressStep } from '../ProgressStep';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './Stepper.styles';
+export function Stepper({ steps, onCancel, onConfirm, onStepNext, isLoading = false, bottomInset = 0, buttonLayout = 'stretch', hideBackOnLastStep = false, labelCancel = 'Annuler', labelBack = 'Précédent', labelNext = 'Suivant', labelConfirm = 'Confirmer', }) {
+    const { colors } = useTheme();
+    const [currentStep, setCurrentStep] = useState(0);
+    const isFirst = currentStep === 0;
+    const isLast = currentStep === steps.length - 1;
+    const handleNext = async () => {
+        if (isLast)
+            return;
+        if (onStepNext) {
+            const canProceed = await onStepNext(currentStep);
+            if (!canProceed)
+                return;
+        }
+        setCurrentStep((s) => s + 1);
+    };
+    const handleBack = () => {
+        if (!isFirst)
+            setCurrentStep((s) => s - 1);
+    };
+    return (<View style={styles.root}>
+      <View style={styles.content}>{steps[currentStep]}</View>
+
+      <View style={[
+            styles.footer,
+            { paddingBottom: bottomInset + 16, borderTopColor: colors.border.window },
+        ]}>
+        <ProgressStep totalSteps={steps.length} currentStep={currentStep}/>
+
+        <View style={[styles.buttons, buttonLayout === 'stretch' ? styles.buttonsStretch : styles.buttonsFit]}>
+          {(!isLast || !hideBackOnLastStep) && (<Button style={buttonLayout === 'stretch' ? styles.buttonStretch : undefined} variant="tertiary" label={isFirst ? labelCancel : labelBack} onPress={isFirst ? onCancel : handleBack}/>)}
+          <Button style={isLast && hideBackOnLastStep ? styles.buttonStretch : buttonLayout === 'stretch' ? styles.buttonStretch : undefined} variant="primary" label={isLast ? labelConfirm : labelNext} disabled={isLoading} onPress={isLast ? onConfirm : handleNext}/>
+        </View>
+      </View>
+    </View>);
+}
+export default Stepper;
+//# sourceMappingURL=Stepper.js.map

package/build/components/Stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Stepper — step-by-step wizard.\n * Manages navigation between steps, renders a ProgressStep indicator\n * and contextual footer buttons (cancel/back + next/confirm).\n */\nimport React, { useState } from 'react';\nimport { View } from 'react-native';\nimport { Button } from '../Button';\nimport { ProgressStep } from '../ProgressStep';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './Stepper.styles';\n\nexport interface StepperProps {\n  /** Ordered list of step content to render */\n  steps: React.ReactNode[];\n  /** Called when the user cancels on the first step */\n  onCancel: () => void;\n  /** Called when the user confirms on the last step */\n  onConfirm: () => void;\n  /**\n   * Called before advancing to the next step.\n   * Return false to block navigation (e.g. validation failed).\n   */\n  onStepNext?: (stepIndex: number) => boolean | Promise<boolean>;\n  /** Disables the confirm/next button while an async operation is pending */\n  isLoading?: boolean;\n  /**\n   * Extra bottom padding added to the footer — pass `useSafeAreaInsets().bottom`\n   * from your app to handle home indicator on iOS.\n   * @default 0\n   */\n  bottomInset?: number;\n  /** @default 'Annuler' */\n  labelCancel?: string;\n  /** @default 'Précédent' */\n  labelBack?: string;\n  /** @default 'Suivant' */\n  labelNext?: string;\n  /** @default 'Confirmer' */\n  labelConfirm?: string;\n  /**\n   * Button sizing mode.\n   * - `'stretch'` — buttons share available width equally (default)\n   * - `'fit'` — buttons size to their label content\n   * @default 'stretch'\n   */\n  buttonLayout?: 'stretch' | 'fit';\n  /**\n   * Hide the back/cancel button on the last step so the confirm button fills the full width.\n   * @default false\n   */\n  hideBackOnLastStep?: boolean;\n}\n\nexport function Stepper({\n  steps,\n  onCancel,\n  onConfirm,\n  onStepNext,\n  isLoading = false,\n  bottomInset = 0,\n  buttonLayout = 'stretch',\n  hideBackOnLastStep = false,\n  labelCancel = 'Annuler',\n  labelBack = 'Précédent',\n  labelNext = 'Suivant',\n  labelConfirm = 'Confirmer',\n}: StepperProps) {\n  const { colors } = useTheme();\n  const [currentStep, setCurrentStep] = useState(0);\n\n  const isFirst = currentStep === 0;\n  const isLast = currentStep === steps.length - 1;\n\n  const handleNext = async () => {\n    if (isLast) return;\n    if (onStepNext) {\n      const canProceed = await onStepNext(currentStep);\n      if (!canProceed) return;\n    }\n    setCurrentStep((s) => s + 1);\n  };\n\n  const handleBack = () => {\n    if (!isFirst) setCurrentStep((s) => s - 1);\n  };\n\n  return (\n    <View style={styles.root}>\n      <View style={styles.content}>{steps[currentStep]}</View>\n\n      <View style={[\n        styles.footer,\n        { paddingBottom: bottomInset + 16, borderTopColor: colors.border.window },\n      ]}>\n        <ProgressStep totalSteps={steps.length} currentStep={currentStep} />\n\n        <View style={[styles.buttons, buttonLayout === 'stretch' ? styles.buttonsStretch : styles.buttonsFit]}>\n          {(!isLast || !hideBackOnLastStep) && (\n            <Button\n              style={buttonLayout === 'stretch' ? styles.buttonStretch : undefined}\n              variant=\"tertiary\"\n              label={isFirst ? labelCancel : labelBack}\n              onPress={isFirst ? onCancel : handleBack}\n            />\n          )}\n          <Button\n            style={isLast && hideBackOnLastStep ? styles.buttonStretch : buttonLayout === 'stretch' ? styles.buttonStretch : undefined}\n            variant=\"primary\"\n            label={isLast ? labelConfirm : labelNext}\n            disabled={isLoading}\n            onPress={isLast ? onConfirm : handleNext}\n          />\n        </View>\n      </View>\n    </View>\n  );\n}\n\nexport default Stepper;\n\n"]}

package/build/components/Stepper/Stepper.styles.d.ts

@@ -0,0 +1,27 @@
+export declare const styles: {
+    root: {
+        flex: number;
+    };
+    content: {
+        flex: number;
+    };
+    footer: {
+        paddingTop: number;
+        paddingHorizontal: number;
+        gap: number;
+    };
+    buttons: {
+        flexDirection: "row";
+        gap: number;
+    };
+    buttonsStretch: {
+        alignItems: "stretch";
+    };
+    buttonsFit: {
+        justifyContent: "space-between";
+    };
+    buttonStretch: {
+        flex: number;
+    };
+};
+//# sourceMappingURL=Stepper.styles.d.ts.map

package/build/components/Stepper/Stepper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,CAAC"}

package/build/components/Stepper/Stepper.styles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+    },
+    footer: {
+        paddingTop: 10,
+        paddingHorizontal: 10,
+        gap: 10,
+    },
+    buttons: {
+        flexDirection: 'row',
+        gap: 12,
+    },
+    buttonsStretch: {
+        alignItems: 'stretch',
+    },
+    buttonsFit: {
+        justifyContent: 'space-between',
+    },
+    buttonStretch: {
+        flex: 1,
+    },
+});
+//# sourceMappingURL=Stepper.styles.js.map

package/build/components/Stepper/Stepper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.styles.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;KACR;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;KACR;IACD,MAAM,EAAE;QACN,UAAU,EAAE,EAAE;QACd,iBAAiB,EAAE,EAAE;QACrB,GAAG,EAAE,EAAE;KACR;IACD,OAAO,EAAE;QACP,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,EAAE;KACR;IACD,cAAc,EAAE;QACd,UAAU,EAAE,SAAS;KACtB;IACD,UAAU,EAAE;QACV,cAAc,EAAE,eAAe;KAChC;IACD,aAAa,EAAE;QACb,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  root: {\n    flex: 1,\n  },\n  content: {\n    flex: 1,\n  },\n  footer: {\n    paddingTop: 10,\n    paddingHorizontal: 10,\n    gap: 10,\n  },\n  buttons: {\n    flexDirection: 'row',\n    gap: 12,\n  },\n  buttonsStretch: {\n    alignItems: 'stretch',\n  },\n  buttonsFit: {\n    justifyContent: 'space-between',\n  },\n  buttonStretch: {\n    flex: 1,\n  },\n});\n"]}

package/build/components/Stepper/index.d.ts

@@ -0,0 +1,3 @@
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+//# sourceMappingURL=index.d.ts.map

package/build/components/Stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/build/components/Stepper/index.js

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+//# sourceMappingURL=index.js.map

package/build/components/Stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { Stepper } from './Stepper';\nexport type { StepperProps } from './Stepper';"]}

package/build/components/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Switch — controlled on/off toggle.
+ * Custom implementation (not the RN native Switch) to match the Figma pixel-perfect.
+ * 4 sizes: s / m / l / xl. Animated thumb translation via Animated.timing.
+ * Track color changes instantly; thumb slides with ease-out cubic.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type SwitchSize = 's' | 'm' | 'l' | 'xl';
+export interface SwitchProps {
+    /** Current on/off value — controlled */
+    value: boolean;
+    /** Toggle handler */
+    onValueChange: (value: boolean) => void;
+    /** Content displayed to the left of the switch */
+    childrenLeft?: React.ReactNode;
+    /** Content displayed to the right of the switch */
+    childrenRight?: React.ReactNode;
+    /** Switch size — s: 28×16, m: 36×20, l: 44×24, xl: 52×28 */
+    size?: SwitchSize;
+    /** Disabled — no interaction, muted colors */
+    disabled?: boolean;
+    /** Additional styles on the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Test ID for automated testing */
+    testID?: string;
+}
+export declare const Switch: ({ value, onValueChange, childrenLeft, childrenRight, size, disabled, style, testID, }: SwitchProps) => React.JSX.Element;
+//# sourceMappingURL=Switch.d.ts.map

package/build/components/Switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzD,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,wCAAwC;IACxC,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mDAAmD;IACnD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,MAAM,GAAI,uFASpB,WAAW,sBA4Eb,CAAC"}

package/build/components/Switch/Switch.js

@@ -0,0 +1,83 @@
+/**
+ * Switch — controlled on/off toggle.
+ * Custom implementation (not the RN native Switch) to match the Figma pixel-perfect.
+ * 4 sizes: s / m / l / xl. Animated thumb translation via Animated.timing.
+ * Track color changes instantly; thumb slides with ease-out cubic.
+ */
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, View } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './Switch.styles';
+// ---------------------------------------------------------------------------
+// Size config — derived from Figma measurements (2px thumb padding)
+// ---------------------------------------------------------------------------
+const THUMB_PADDING = 2;
+const SIZE_CONFIG = {
+    s: { trackWidth: 28, trackHeight: 16, thumbSize: 12 },
+    m: { trackWidth: 36, trackHeight: 20, thumbSize: 16 },
+    l: { trackWidth: 44, trackHeight: 24, thumbSize: 20 },
+    xl: { trackWidth: 52, trackHeight: 28, thumbSize: 24 },
+};
+const ANIMATION_DURATION = 200;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const Switch = ({ value, onValueChange, childrenLeft, childrenRight, size = 'm', disabled = false, style, testID, }) => {
+    const { colors } = useTheme();
+    const cfg = SIZE_CONFIG[size];
+    const animValue = useRef(new Animated.Value(value ? 1 : 0)).current;
+    // Animate thumb on value change
+    useEffect(() => {
+        const anim = Animated.timing(animValue, {
+            toValue: value ? 1 : 0,
+            duration: ANIMATION_DURATION,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+        });
+        anim.start();
+        return () => anim.stop();
+    }, [value, animValue]);
+    // Max translation: from left edge + padding to right edge - padding - thumbSize
+    const travelX = cfg.trackWidth - cfg.thumbSize - THUMB_PADDING * 2;
+    const thumbTranslateX = animValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, travelX],
+    });
+    const t = colors.toggle;
+    const trackColor = disabled
+        ? (value ? t.trackOnDisabled : t.trackOffDisabled)
+        : (value ? t.trackOn : t.trackOff);
+    const thumbColor = disabled
+        ? t.thumbDisabled
+        : (value ? t.thumbOn : t.thumbOff);
+    const track = (<View style={[
+            styles.track,
+            {
+                width: cfg.trackWidth,
+                height: cfg.trackHeight,
+                borderRadius: cfg.trackHeight / 2,
+                backgroundColor: trackColor,
+                shadowColor: colors.shadow.minimal,
+            },
+        ]}>
+      <Animated.View style={[
+            styles.thumb,
+            {
+                width: cfg.thumbSize,
+                height: cfg.thumbSize,
+                borderRadius: cfg.thumbSize / 2,
+                top: THUMB_PADDING,
+                left: THUMB_PADDING,
+                backgroundColor: thumbColor,
+                transform: [{ translateX: thumbTranslateX }],
+                shadowColor: colors.shadow.minimal,
+            },
+        ]}/>
+    </View>);
+    return (<Pressable onPress={disabled ? undefined : () => onValueChange(!value)} accessibilityRole="switch" accessibilityState={{ checked: value, disabled }} style={[styles.wrapper, style]} testID={testID}>
+      {childrenLeft}
+      {track}
+      {childrenRight}
+    </Pressable>);
+};
+//# sourceMappingURL=Switch.js.map

package/build/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Switch — controlled on/off toggle.\n * Custom implementation (not the RN native Switch) to match the Figma pixel-perfect.\n * 4 sizes: s / m / l / xl. Animated thumb translation via Animated.timing.\n * Track color changes instantly; thumb slides with ease-out cubic.\n */\nimport React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, Pressable, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './Switch.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type SwitchSize = 's' | 'm' | 'l' | 'xl';\n\nexport interface SwitchProps {\n  /** Current on/off value — controlled */\n  value: boolean;\n  /** Toggle handler */\n  onValueChange: (value: boolean) => void;\n  /** Content displayed to the left of the switch */\n  childrenLeft?: React.ReactNode;\n  /** Content displayed to the right of the switch */\n  childrenRight?: React.ReactNode;\n  /** Switch size — s: 28×16, m: 36×20, l: 44×24, xl: 52×28 */\n  size?: SwitchSize;\n  /** Disabled — no interaction, muted colors */\n  disabled?: boolean;\n  /** Additional styles on the wrapper */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Size config — derived from Figma measurements (2px thumb padding)\n// ---------------------------------------------------------------------------\n\nconst THUMB_PADDING = 2;\n\nconst SIZE_CONFIG: Record<SwitchSize, {\n  trackWidth:  number;\n  trackHeight: number;\n  thumbSize:   number;\n}> = {\n  s:  { trackWidth: 28, trackHeight: 16, thumbSize: 12 },\n  m:  { trackWidth: 36, trackHeight: 20, thumbSize: 16 },\n  l:  { trackWidth: 44, trackHeight: 24, thumbSize: 20 },\n  xl: { trackWidth: 52, trackHeight: 28, thumbSize: 24 },\n};\n\nconst ANIMATION_DURATION = 200;\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const Switch = ({\n  value,\n  onValueChange,\n  childrenLeft,\n  childrenRight,\n  size = 'm',\n  disabled = false,\n  style,\n  testID,\n}: SwitchProps) => {\n  const { colors } = useTheme();\n  const cfg = SIZE_CONFIG[size];\n  const animValue = useRef(new Animated.Value(value ? 1 : 0)).current;\n\n  // Animate thumb on value change\n  useEffect(() => {\n    const anim = Animated.timing(animValue, {\n      toValue: value ? 1 : 0,\n      duration: ANIMATION_DURATION,\n      easing: Easing.out(Easing.cubic),\n      useNativeDriver: true,\n    });\n    anim.start();\n    return () => anim.stop();\n  }, [value, animValue]);\n\n  // Max translation: from left edge + padding to right edge - padding - thumbSize\n  const travelX = cfg.trackWidth - cfg.thumbSize - THUMB_PADDING * 2;\n  const thumbTranslateX = animValue.interpolate({\n    inputRange:  [0, 1],\n    outputRange: [0, travelX],\n  });\n\n  const t = colors.toggle;\n  const trackColor = disabled\n    ? (value ? t.trackOnDisabled  : t.trackOffDisabled)\n    : (value ? t.trackOn          : t.trackOff);\n  const thumbColor = disabled\n    ? t.thumbDisabled\n    : (value ? t.thumbOn : t.thumbOff);\n\n  const track = (\n    <View\n      style={[\n        styles.track,\n        {\n          width:           cfg.trackWidth,\n          height:          cfg.trackHeight,\n          borderRadius:    cfg.trackHeight / 2,\n          backgroundColor: trackColor,\n          shadowColor:     colors.shadow.minimal,\n        },\n      ]}\n    >\n      <Animated.View\n        style={[\n          styles.thumb,\n          {\n            width:           cfg.thumbSize,\n            height:          cfg.thumbSize,\n            borderRadius:    cfg.thumbSize / 2,\n            top:             THUMB_PADDING,\n            left:            THUMB_PADDING,\n            backgroundColor: thumbColor,\n            transform:       [{ translateX: thumbTranslateX }],\n            shadowColor:     colors.shadow.minimal,\n          },\n        ]}\n      />\n    </View>\n  );\n\n  return (\n    <Pressable\n      onPress={disabled ? undefined : () => onValueChange(!value)}\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: value, disabled }}\n      style={[styles.wrapper, style]}\n      testID={testID}\n    >\n      {childrenLeft}\n      {track}\n      {childrenRight}\n    </Pressable>\n  );\n};\n\n"]}

package/build/components/Switch/Switch.styles.d.ts

@@ -0,0 +1,29 @@
+export declare const styles: {
+    wrapper: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        alignSelf: "flex-start";
+    };
+    track: {
+        overflow: "hidden";
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    thumb: {
+        position: "absolute";
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+//# sourceMappingURL=Switch.styles.d.ts.map

package/build/components/Switch/Switch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBjB,CAAC"}

package/build/components/Switch/Switch.styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        alignSelf: 'flex-start',
+    },
+    track: {
+        overflow: 'hidden',
+        // shadow on track
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 5,
+        elevation: 2,
+    },
+    thumb: {
+        position: 'absolute',
+        // shadow on thumb (visible before overflow:hidden clips it)
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 5,
+        elevation: 2,
+    },
+});
+//# sourceMappingURL=Switch.styles.js.map

package/build/components/Switch/Switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,OAAO,EAAE;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,YAAY;KACxB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ;QAClB,kBAAkB;QAClB,YAAY,EAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QACtC,aAAa,EAAE,CAAC;QAChB,YAAY,EAAG,CAAC;QAChB,SAAS,EAAM,CAAC;KACjB;IACD,KAAK,EAAE;QACL,QAAQ,EAAM,UAAU;QACxB,4DAA4D;QAC5D,YAAY,EAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QACtC,aAAa,EAAE,CAAC;QAChB,YAAY,EAAG,CAAC;QAChB,SAAS,EAAM,CAAC;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  wrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n    alignSelf: 'flex-start',\n  },\n  track: {\n    overflow: 'hidden',\n    // shadow on track\n    shadowOffset:  { width: 0, height: 4 },\n    shadowOpacity: 1,\n    shadowRadius:  5,\n    elevation:     2,\n  },\n  thumb: {\n    position:     'absolute',\n    // shadow on thumb (visible before overflow:hidden clips it)\n    shadowOffset:  { width: 0, height: 4 },\n    shadowOpacity: 1,\n    shadowRadius:  5,\n    elevation:     2,\n  },\n});\n"]}

package/build/components/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchSize } from './Switch';
+//# sourceMappingURL=index.d.ts.map

package/build/components/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/build/components/Switch/index.js

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+//# sourceMappingURL=index.js.map

package/build/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { Switch } from './Switch';\nexport type { SwitchProps, SwitchSize } from './Switch';\n"]}

package/build/components/Tab/Tab.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Tab — horizontal tab navigation bar.
+ *
+ * Two visual variants:
+ *  - 'line'   → underline indicator. Full-width strip, each tab flex:1.
+ *  - 'button' → pill/segmented container. Active tab gets a card background.
+ *
+ * Controlled: activeIndex + onChange always required.
+ * Optional horizontal ScrollView when `scrollable` is true.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface TabItem {
+    /** Tab label text — optional when icon is provided */
+    label?: string;
+    /** Optional Phosphor icon — rendered at 24px (line) or 20px (button) */
+    icon?: React.ReactElement;
+    /** Disabled — no interaction, muted color */
+    disabled?: boolean;
+}
+export interface TabProps {
+    /** Tab definitions */
+    items: TabItem[];
+    /** Index of the currently active tab — controlled */
+    activeIndex: number;
+    /** Called with the new index when the user taps a tab */
+    onChange: (index: number) => void;
+    /**
+     * Visual variant:
+     * - 'line'   → underline indicator, tabs stretch to fill width
+     * - 'button' → pill/segmented container
+     */
+    variant?: 'line' | 'button';
+    /** When true, wraps tabs in a horizontal ScrollView (for many tabs) */
+    scrollable?: boolean;
+    /** When true, truncates labels with "…" — defaults to false (full text, no wrap) */
+    truncateLabels?: boolean;
+    /** Forces the container to fill 100% of its parent width */
+    fullWidth?: boolean;
+    /** Each tab gets flex:1 and shares the container width equally — implies fullWidth */
+    stretchItems?: boolean;
+    /** Horizontal alignment of tabs within the container — defaults to 'left' */
+    align?: 'left' | 'center' | 'right';
+    /** Additional styles on the outer wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Test ID for automated testing */
+    testID?: string;
+}
+export declare const Tab: ({ items, activeIndex, onChange, variant, scrollable, truncateLabels, fullWidth, stretchItems, align, style, testID, }: TabProps) => React.JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

package/build/components/Tab/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzD,MAAM,WAAW,OAAO;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,sBAAsB;IACtB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,GAAG,GAAI,uHAYjB,QAAQ,sBA8JV,CAAC"}

package/build/components/Tab/Tab.js

@@ -0,0 +1,117 @@
+/**
+ * Tab — horizontal tab navigation bar.
+ *
+ * Two visual variants:
+ *  - 'line'   → underline indicator. Full-width strip, each tab flex:1.
+ *  - 'button' → pill/segmented container. Active tab gets a card background.
+ *
+ * Controlled: activeIndex + onChange always required.
+ * Optional horizontal ScrollView when `scrollable` is true.
+ */
+import React from 'react';
+import { Pressable, ScrollView, Text, View, } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './Tab.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const Tab = ({ items, activeIndex, onChange, variant = 'line', scrollable = false, truncateLabels = false, fullWidth = false, stretchItems = false, align = 'left', style, testID, }) => {
+    const { colors } = useTheme();
+    const t = colors.tabs;
+    const justifyContent = align === 'center' ? 'center' :
+        align === 'right' ? 'flex-end' :
+            'flex-start';
+    // stretchItems implies full-width container
+    const effectiveFullWidth = fullWidth || stretchItems;
+    // items get flex:1 when stretchItems or truncateLabels (truncation needs a bounded width)
+    const itemFlex = !scrollable && (stretchItems || truncateLabels);
+    // autoSize: shrink to content when items are intrinsic width and container not forced full
+    const sizeStyle = !itemFlex && !effectiveFullWidth ? styles.autoSize : undefined;
+    // -----------------------------------------------------------------------
+    // Line variant
+    // -----------------------------------------------------------------------
+    if (variant === 'line') {
+        const tabs = items.map((item, index) => {
+            const isActive = index === activeIndex;
+            const isDisabled = item.disabled ?? false;
+            const textColor = isDisabled
+                ? t.line.disabled.text
+                : isActive
+                    ? t.line.active.text
+                    : t.line.inactive.text;
+            const iconElement = item.icon
+                ? React.cloneElement(item.icon, {
+                    color: textColor,
+                    size: 24,
+                })
+                : null;
+            return (<Pressable key={index} onPress={isDisabled ? undefined : () => onChange(index)} accessibilityRole="tab" accessibilityState={{ selected: isActive, disabled: isDisabled }} style={[
+                    styles.lineTab,
+                    itemFlex && styles.lineTabFlex,
+                    isActive && {
+                        borderBottomWidth: 2,
+                        borderBottomColor: t.line.active.indicator,
+                    },
+                ]}>
+          {iconElement}
+          {item.label != null && (<Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>)}
+        </Pressable>);
+        });
+        const container = (<View style={[
+                styles.lineContainer,
+                { borderBottomColor: t.line.containerBorder, justifyContent },
+                sizeStyle,
+                style,
+            ]} testID={testID}>
+        {scrollable ? (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.lineScrollContent}>
+            {tabs}
+          </ScrollView>) : (tabs)}
+      </View>);
+        return container;
+    }
+    // -----------------------------------------------------------------------
+    // Button variant
+    // -----------------------------------------------------------------------
+    const tabs = items.map((item, index) => {
+        const isActive = index === activeIndex;
+        const isDisabled = item.disabled ?? false;
+        const textColor = isDisabled
+            ? t.button.disabled.text
+            : isActive
+                ? t.button.active.text
+                : t.button.default.text;
+        const iconElement = item.icon
+            ? React.cloneElement(item.icon, {
+                color: textColor,
+                size: 20,
+            })
+            : null;
+        return (<Pressable key={index} onPress={isDisabled ? undefined : () => onChange(index)} accessibilityRole="tab" accessibilityState={{ selected: isActive, disabled: isDisabled }} style={[
+                styles.buttonTab,
+                itemFlex && styles.buttonTabFlex,
+                isActive && {
+                    backgroundColor: t.button.active.background,
+                    borderWidth: 1,
+                    borderColor: t.button.active.border,
+                },
+            ]}>
+        {iconElement}
+        {item.label != null && (<Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>)}
+      </Pressable>);
+    });
+    return (<View style={[
+            styles.buttonContainer,
+            {
+                backgroundColor: t.button.container.background,
+                borderColor: t.button.container.border,
+                justifyContent,
+            },
+            sizeStyle,
+            style,
+        ]} testID={testID}>
+      {scrollable ? (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.buttonScrollContent}>
+          {tabs}
+        </ScrollView>) : (tabs)}
+    </View>);
+};
+//# sourceMappingURL=Tab.js.map

package/build/components/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tab/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Tab — horizontal tab navigation bar.\n *\n * Two visual variants:\n *  - 'line'   → underline indicator. Full-width strip, each tab flex:1.\n *  - 'button' → pill/segmented container. Active tab gets a card background.\n *\n * Controlled: activeIndex + onChange always required.\n * Optional horizontal ScrollView when `scrollable` is true.\n */\nimport React from 'react';\nimport {\n  Pressable,\n  ScrollView,\n  Text,\n  View,\n} from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './Tab.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface TabItem {\n  /** Tab label text — optional when icon is provided */\n  label?: string;\n  /** Optional Phosphor icon — rendered at 24px (line) or 20px (button) */\n  icon?: React.ReactElement;\n  /** Disabled — no interaction, muted color */\n  disabled?: boolean;\n}\n\nexport interface TabProps {\n  /** Tab definitions */\n  items: TabItem[];\n  /** Index of the currently active tab — controlled */\n  activeIndex: number;\n  /** Called with the new index when the user taps a tab */\n  onChange: (index: number) => void;\n  /**\n   * Visual variant:\n   * - 'line'   → underline indicator, tabs stretch to fill width\n   * - 'button' → pill/segmented container\n   */\n  variant?: 'line' | 'button';\n  /** When true, wraps tabs in a horizontal ScrollView (for many tabs) */\n  scrollable?: boolean;\n  /** When true, truncates labels with \"…\" — defaults to false (full text, no wrap) */\n  truncateLabels?: boolean;\n  /** Forces the container to fill 100% of its parent width */\n  fullWidth?: boolean;\n  /** Each tab gets flex:1 and shares the container width equally — implies fullWidth */\n  stretchItems?: boolean;\n  /** Horizontal alignment of tabs within the container — defaults to 'left' */\n  align?: 'left' | 'center' | 'right';\n  /** Additional styles on the outer wrapper */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const Tab = ({\n  items,\n  activeIndex,\n  onChange,\n  variant = 'line',\n  scrollable = false,\n  truncateLabels = false,\n  fullWidth = false,\n  stretchItems = false,\n  align = 'left',\n  style,\n  testID,\n}: TabProps) => {\n  const { colors } = useTheme();\n  const t = colors.tabs;\n\n  const justifyContent =\n    align === 'center' ? 'center' :\n    align === 'right'  ? 'flex-end' :\n    'flex-start';\n\n  // stretchItems implies full-width container\n  const effectiveFullWidth = fullWidth || stretchItems;\n  // items get flex:1 when stretchItems or truncateLabels (truncation needs a bounded width)\n  const itemFlex = !scrollable && (stretchItems || truncateLabels);\n  // autoSize: shrink to content when items are intrinsic width and container not forced full\n  const sizeStyle = !itemFlex && !effectiveFullWidth ? styles.autoSize : undefined;\n\n  // -----------------------------------------------------------------------\n  // Line variant\n  // -----------------------------------------------------------------------\n  if (variant === 'line') {\n    const tabs = items.map((item, index) => {\n      const isActive   = index === activeIndex;\n      const isDisabled = item.disabled ?? false;\n\n      const textColor = isDisabled\n        ? t.line.disabled.text\n        : isActive\n          ? t.line.active.text\n          : t.line.inactive.text;\n\n      const iconElement = item.icon\n        ? React.cloneElement(item.icon as React.ReactElement<{ color?: string; size?: number }>, {\n            color: textColor,\n            size:  24,\n          })\n        : null;\n\n      return (\n        <Pressable\n          key={index}\n          onPress={isDisabled ? undefined : () => onChange(index)}\n          accessibilityRole=\"tab\"\n          accessibilityState={{ selected: isActive, disabled: isDisabled }}\n          style={[\n            styles.lineTab,\n            itemFlex && styles.lineTabFlex,\n            isActive && {\n              borderBottomWidth: 2,\n              borderBottomColor: t.line.active.indicator,\n            },\n          ]}\n        >\n          {iconElement}\n          {item.label != null && (\n            <Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>\n          )}\n        </Pressable>\n      );\n    });\n\n    const container = (\n      <View\n        style={[\n          styles.lineContainer,\n          { borderBottomColor: t.line.containerBorder, justifyContent },\n          sizeStyle,\n          style,\n        ]}\n        testID={testID}\n      >\n        {scrollable ? (\n          <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            contentContainerStyle={styles.lineScrollContent}\n          >\n            {tabs}\n          </ScrollView>\n        ) : (\n          tabs\n        )}\n      </View>\n    );\n\n    return container;\n  }\n\n  // -----------------------------------------------------------------------\n  // Button variant\n  // -----------------------------------------------------------------------\n  const tabs = items.map((item, index) => {\n    const isActive   = index === activeIndex;\n    const isDisabled = item.disabled ?? false;\n\n    const textColor = isDisabled\n      ? t.button.disabled.text\n      : isActive\n        ? t.button.active.text\n        : t.button.default.text;\n\n    const iconElement = item.icon\n      ? React.cloneElement(item.icon as React.ReactElement<{ color?: string; size?: number }>, {\n          color: textColor,\n          size:  20,\n        })\n      : null;\n\n    return (\n      <Pressable\n        key={index}\n        onPress={isDisabled ? undefined : () => onChange(index)}\n        accessibilityRole=\"tab\"\n        accessibilityState={{ selected: isActive, disabled: isDisabled }}\n        style={[\n          styles.buttonTab,\n          itemFlex && styles.buttonTabFlex,\n          isActive && {\n            backgroundColor: t.button.active.background,\n            borderWidth:     1,\n            borderColor:     t.button.active.border,\n          },\n        ]}\n      >\n        {iconElement}\n        {item.label != null && (\n          <Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>\n        )}\n      </Pressable>\n    );\n  });\n\n  return (\n    <View\n      style={[\n        styles.buttonContainer,\n        {\n          backgroundColor: t.button.container.background,\n          borderColor:     t.button.container.border,\n          justifyContent,\n        },\n        sizeStyle,\n        style,\n      ]}\n      testID={testID}\n    >\n      {scrollable ? (\n        <ScrollView\n          horizontal\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={styles.buttonScrollContent}\n        >\n          {tabs}\n        </ScrollView>\n      ) : (\n        tabs\n      )}\n    </View>\n  );\n};\n\n"]}