@compsych-ui-components/react-native 4.0.4 → 4.0.13

package/src/components/Slider/index.js

@@ -0,0 +1,320 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Slider", {
+    enumerable: true,
+    get: function() {
+        return Slider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+// ── Layout constants ──────────────────────────────────────────────────────────
+const TRACK_HEIGHT = 8;
+const THUMB_SIZE = 24;
+const THUMB_HALF = THUMB_SIZE / 2; // 12
+const HIT_HEIGHT = 48; // symbol height from Figma — contains track + thumb
+// Vertical offsets within the 48px container
+const TRACK_TOP = (HIT_HEIGHT - TRACK_HEIGHT) / 2; // 20
+const THUMB_TOP = (HIT_HEIGHT - THUMB_SIZE) / 2; // 12
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function clamp(v, lo, hi) {
+    return Math.max(lo, Math.min(hi, v));
+}
+function Slider({ value: valueProp, defaultValue, min = 0, max = 100, step = 1, onValueChange, onSlidingComplete, label, showMinMax = true, disabled = false, accessibilityLabel, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const isControlled = valueProp !== undefined;
+    const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue ?? min);
+    const displayValue = isControlled ? valueProp : internalValue;
+    const [focused, setFocused] = (0, _react.useState)(false);
+    const [pressed, setPressed] = (0, _react.useState)(false);
+    // ── Track width (measured on layout) ────────────────────────────────────────
+    const trackWidthRef = (0, _react.useRef)(0);
+    const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+    const handleTrackLayout = (0, _react.useCallback)((e)=>{
+        const w = e.nativeEvent.layout.width;
+        trackWidthRef.current = w;
+        setTrackWidth(w);
+    }, []);
+    // Keep a ref to the latest displayValue so PanResponder can read it
+    const displayValueRef = (0, _react.useRef)(displayValue);
+    (0, _react.useEffect)(()=>{
+        displayValueRef.current = displayValue;
+    }, [
+        displayValue
+    ]);
+    // ── Value conversion ─────────────────────────────────────────────────────────
+    function fractionToValue(frac) {
+        const raw = min + clamp(frac, 0, 1) * (max - min);
+        const stepped = Math.round(raw / step) * step;
+        return clamp(stepped, min, max);
+    }
+    function valueToFraction(v) {
+        return (v - min) / (max - min);
+    }
+    function commitValue(v, isFinal) {
+        if (!isControlled) setInternalValue(v);
+        onValueChange?.(v);
+        if (isFinal) onSlidingComplete?.(v);
+    }
+    // ── PanResponder ─────────────────────────────────────────────────────────────
+    const panStartFraction = (0, _react.useRef)(0);
+    const panResponder = (0, _react.useRef)(_reactnative.PanResponder.create({
+        onStartShouldSetPanResponder: ()=>!disabled && trackWidthRef.current > 0,
+        onMoveShouldSetPanResponder: ()=>!disabled && trackWidthRef.current > 0,
+        // Don't let parent ScrollView steal the gesture once we've started
+        onPanResponderTerminationRequest: ()=>false,
+        onPanResponderGrant: (evt)=>{
+            setPressed(true);
+            // Jump thumb to the tapped position on the track
+            const tapped = clamp(evt.nativeEvent.locationX, 0, trackWidthRef.current);
+            panStartFraction.current = tapped / trackWidthRef.current;
+            const v = fractionToValue(panStartFraction.current);
+            commitValue(v, false);
+        },
+        onPanResponderMove: (_, gs)=>{
+            const newFrac = clamp(panStartFraction.current + gs.dx / trackWidthRef.current, 0, 1);
+            const v = fractionToValue(newFrac);
+            commitValue(v, false);
+        },
+        onPanResponderRelease: (_, gs)=>{
+            setPressed(false);
+            const newFrac = clamp(panStartFraction.current + gs.dx / trackWidthRef.current, 0, 1);
+            commitValue(fractionToValue(newFrac), true);
+        },
+        onPanResponderTerminate: ()=>setPressed(false)
+    })).current;
+    // ── Derived geometry ──────────────────────────────────────────────────────────
+    const fraction = trackWidth > 0 ? valueToFraction(displayValue) : 0;
+    const thumbCenterX = fraction * trackWidth;
+    const thumbLeft = thumbCenterX - THUMB_HALF;
+    const fillWidth = thumbCenterX;
+    // ── Thumb shadow — lv3 when pressed/hovered, lv1 otherwise ──────────────────
+    const thumbShadow = pressed ? {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 4
+        },
+        shadowOpacity: 0.16,
+        shadowRadius: 16,
+        elevation: 3
+    } : {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.06,
+        shadowRadius: 8,
+        elevation: 1
+    };
+    // ── Token-derived styles ──────────────────────────────────────────────────────
+    const tokenStyles = (0, _react.useMemo)(()=>({
+            root: {
+                gap: dim.spacing.padding.sysPadding8,
+                alignSelf: 'stretch'
+            },
+            label: {
+                color: cr.surface.surface.sysOnSurface,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                letterSpacing: ts.labelMedium.sysTracking,
+                fontWeight: '400',
+                includeFontPadding: false
+            },
+            row: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: dim.spacing.padding.sysPadding8
+            },
+            rangeLabel: {
+                color: cr.surface.surface.sysOnSurfaceVariant,
+                fontSize: ts.bodySmall.sysFontSize,
+                lineHeight: ts.bodySmall.sysLineHeight,
+                fontWeight: '400',
+                includeFontPadding: false,
+                flexShrink: 0
+            },
+            trackBg: {
+                position: 'absolute',
+                top: TRACK_TOP,
+                left: 0,
+                right: 0,
+                height: TRACK_HEIGHT,
+                borderRadius: 9999,
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerHighest
+            },
+            trackFill: {
+                position: 'absolute',
+                top: TRACK_TOP,
+                left: 0,
+                height: TRACK_HEIGHT,
+                borderRadius: 9999,
+                backgroundColor: cr.accent.primary.sysPrimary
+            },
+            thumb: {
+                position: 'absolute',
+                top: THUMB_TOP,
+                width: THUMB_SIZE,
+                height: THUMB_SIZE,
+                borderRadius: 9999,
+                backgroundColor: cr.surface.surface.sysSurface,
+                alignItems: 'center',
+                justifyContent: 'center'
+            }
+        }), [
+        cr,
+        dim,
+        ts
+    ]);
+    // ── Render ────────────────────────────────────────────────────────────────────
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            tokenStyles.root,
+            style
+        ],
+        accessible: true,
+        accessibilityRole: "adjustable",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityValue: {
+            min,
+            max,
+            now: displayValue
+        },
+        onAccessibilityAction: (e)=>{
+            if (disabled) return;
+            const delta = e.nativeEvent.actionName === 'increment' ? step : -step;
+            commitValue(clamp(displayValue + delta, min, max), true);
+        },
+        onFocus: ()=>setFocused(true),
+        onBlur: ()=>setFocused(false),
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                style: tokenStyles.label,
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    tokenStyles.row,
+                    disabled && styles.rowDisabled
+                ],
+                children: [
+                    showMinMax && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                        style: tokenStyles.rangeLabel,
+                        children: min
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: styles.trackContainer,
+                        onLayout: handleTrackLayout,
+                        ...panResponder.panHandlers,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                style: tokenStyles.trackBg
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                style: [
+                                    tokenStyles.trackFill,
+                                    {
+                                        width: fillWidth
+                                    }
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                style: [
+                                    tokenStyles.thumb,
+                                    {
+                                        left: thumbLeft
+                                    },
+                                    thumbShadow
+                                ],
+                                children: focused && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                    style: [
+                                        styles.focusRing,
+                                        {
+                                            borderColor: cr.addOn.primaryFixed.sysOnPrimaryFixedVariant,
+                                            borderWidth: dim.borderWidth.sysStrokeMedium
+                                        }
+                                    ],
+                                    pointerEvents: "none"
+                                })
+                            })
+                        ]
+                    }),
+                    showMinMax && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                        style: tokenStyles.rangeLabel,
+                        children: max
+                    })
+                ]
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    rowDisabled: {
+        opacity: 0.48
+    },
+    // ── Track container ───────────────────────────────────────────────────────
+    trackContainer: {
+        flex: 1,
+        height: HIT_HEIGHT,
+        // Overflow visible so the thumb (which extends ±12px from track centre)
+        // and its focus ring are not clipped at the extremes.
+        overflow: 'visible'
+    },
+    // ── Focus ring: 1px outside the 24×24 thumb → 26×26 ─────────────────────
+    focusRing: {
+        position: 'absolute',
+        top: -2,
+        left: -2,
+        right: -2,
+        bottom: -2,
+        borderRadius: 9999
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Slider/index.tsx"],"sourcesContent":["import React, {\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\n\r\nimport {\r\n  LayoutChangeEvent,\r\n  PanResponder,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport interface SliderProps {\r\n  /** Controlled value */\r\n  value?: number;\r\n  /** Default value for uncontrolled usage (default: min) */\r\n  defaultValue?: number;\r\n  min?: number;\r\n  max?: number;\r\n  /** Snapping interval (default: 1) */\r\n  step?: number;\r\n  /** Called continuously while dragging */\r\n  onValueChange?: (value: number) => void;\r\n  /** Called when the user releases the thumb */\r\n  onSlidingComplete?: (value: number) => void;\r\n  /** Label rendered above the track */\r\n  label?: string;\r\n  /** Show min/max value labels on either side of the track */\r\n  showMinMax?: boolean;\r\n  disabled?: boolean;\r\n  accessibilityLabel?: string;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Layout constants ──────────────────────────────────────────────────────────\r\nconst TRACK_HEIGHT = 8;\r\nconst THUMB_SIZE = 24;\r\nconst THUMB_HALF = THUMB_SIZE / 2; // 12\r\nconst HIT_HEIGHT = 48; // symbol height from Figma — contains track + thumb\r\n// Vertical offsets within the 48px container\r\nconst TRACK_TOP = (HIT_HEIGHT - TRACK_HEIGHT) / 2; // 20\r\nconst THUMB_TOP = (HIT_HEIGHT - THUMB_SIZE) / 2; // 12\r\n\r\n// ── Helpers ───────────────────────────────────────────────────────────────────\r\n\r\nfunction clamp(v: number, lo: number, hi: number): number {\r\n  return Math.max(lo, Math.min(hi, v));\r\n}\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport function Slider({\r\n  value: valueProp,\r\n  defaultValue,\r\n  min = 0,\r\n  max = 100,\r\n  step = 1,\r\n  onValueChange,\r\n  onSlidingComplete,\r\n  label,\r\n  showMinMax = true,\r\n  disabled = false,\r\n  accessibilityLabel,\r\n  style,\r\n}: SliderProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const isControlled = valueProp !== undefined;\r\n  const [internalValue, setInternalValue] = useState<number>(\r\n    defaultValue ?? min,\r\n  );\r\n  const displayValue = isControlled ? valueProp! : internalValue;\r\n\r\n  const [focused, setFocused] = useState(false);\r\n  const [pressed, setPressed] = useState(false);\r\n\r\n  // ── Track width (measured on layout) ────────────────────────────────────────\r\n  const trackWidthRef = useRef(0);\r\n  const [trackWidth, setTrackWidth] = useState(0);\r\n\r\n  const handleTrackLayout = useCallback((e: LayoutChangeEvent) => {\r\n    const w = e.nativeEvent.layout.width;\r\n    trackWidthRef.current = w;\r\n    setTrackWidth(w);\r\n  }, []);\r\n\r\n  // Keep a ref to the latest displayValue so PanResponder can read it\r\n  const displayValueRef = useRef(displayValue);\r\n  useEffect(() => {\r\n    displayValueRef.current = displayValue;\r\n  }, [displayValue]);\r\n\r\n  // ── Value conversion ─────────────────────────────────────────────────────────\r\n\r\n  function fractionToValue(frac: number): number {\r\n    const raw = min + clamp(frac, 0, 1) * (max - min);\r\n    const stepped = Math.round(raw / step) * step;\r\n    return clamp(stepped, min, max);\r\n  }\r\n\r\n  function valueToFraction(v: number): number {\r\n    return (v - min) / (max - min);\r\n  }\r\n\r\n  function commitValue(v: number, isFinal: boolean) {\r\n    if (!isControlled) setInternalValue(v);\r\n    onValueChange?.(v);\r\n    if (isFinal) onSlidingComplete?.(v);\r\n  }\r\n\r\n  // ── PanResponder ─────────────────────────────────────────────────────────────\r\n  const panStartFraction = useRef(0);\r\n\r\n  const panResponder = useRef(\r\n    PanResponder.create({\r\n      onStartShouldSetPanResponder: () =>\r\n        !disabled && trackWidthRef.current > 0,\r\n      onMoveShouldSetPanResponder: () => !disabled && trackWidthRef.current > 0,\r\n      // Don't let parent ScrollView steal the gesture once we've started\r\n      onPanResponderTerminationRequest: () => false,\r\n\r\n      onPanResponderGrant: (evt) => {\r\n        setPressed(true);\r\n        // Jump thumb to the tapped position on the track\r\n        const tapped = clamp(\r\n          evt.nativeEvent.locationX,\r\n          0,\r\n          trackWidthRef.current,\r\n        );\r\n        panStartFraction.current = tapped / trackWidthRef.current;\r\n        const v = fractionToValue(panStartFraction.current);\r\n        commitValue(v, false);\r\n      },\r\n\r\n      onPanResponderMove: (_, gs) => {\r\n        const newFrac = clamp(\r\n          panStartFraction.current + gs.dx / trackWidthRef.current,\r\n          0,\r\n          1,\r\n        );\r\n        const v = fractionToValue(newFrac);\r\n        commitValue(v, false);\r\n      },\r\n\r\n      onPanResponderRelease: (_, gs) => {\r\n        setPressed(false);\r\n        const newFrac = clamp(\r\n          panStartFraction.current + gs.dx / trackWidthRef.current,\r\n          0,\r\n          1,\r\n        );\r\n        commitValue(fractionToValue(newFrac), true);\r\n      },\r\n\r\n      onPanResponderTerminate: () => setPressed(false),\r\n    }),\r\n  ).current;\r\n\r\n  // ── Derived geometry ──────────────────────────────────────────────────────────\r\n  const fraction = trackWidth > 0 ? valueToFraction(displayValue) : 0;\r\n  const thumbCenterX = fraction * trackWidth;\r\n  const thumbLeft = thumbCenterX - THUMB_HALF;\r\n  const fillWidth = thumbCenterX;\r\n\r\n  // ── Thumb shadow — lv3 when pressed/hovered, lv1 otherwise ──────────────────\r\n  const thumbShadow = pressed\r\n    ? {\r\n        shadowColor: '#000',\r\n        shadowOffset: { width: 0, height: 4 },\r\n        shadowOpacity: 0.16,\r\n        shadowRadius: 16,\r\n        elevation: 3,\r\n      }\r\n    : {\r\n        shadowColor: '#000',\r\n        shadowOffset: { width: 0, height: 2 },\r\n        shadowOpacity: 0.06,\r\n        shadowRadius: 8,\r\n        elevation: 1,\r\n      };\r\n\r\n  // ── Token-derived styles ──────────────────────────────────────────────────────\r\n  const tokenStyles = useMemo(\r\n    () => ({\r\n      root: {\r\n        gap: dim.spacing.padding.sysPadding8,\r\n        alignSelf: 'stretch' as const,\r\n      },\r\n      label: {\r\n        color: cr.surface.surface.sysOnSurface,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        letterSpacing: ts.labelMedium.sysTracking,\r\n        fontWeight: '400' as const,\r\n        includeFontPadding: false,\r\n      },\r\n      row: {\r\n        flexDirection: 'row' as const,\r\n        alignItems: 'center' as const,\r\n        gap: dim.spacing.padding.sysPadding8,\r\n      },\r\n      rangeLabel: {\r\n        color: cr.surface.surface.sysOnSurfaceVariant,\r\n        fontSize: ts.bodySmall.sysFontSize,\r\n        lineHeight: ts.bodySmall.sysLineHeight,\r\n        fontWeight: '400' as const,\r\n        includeFontPadding: false,\r\n        flexShrink: 0,\r\n      },\r\n      trackBg: {\r\n        position: 'absolute' as const,\r\n        top: TRACK_TOP,\r\n        left: 0,\r\n        right: 0,\r\n        height: TRACK_HEIGHT,\r\n        borderRadius: 9999,\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerHighest,\r\n      },\r\n      trackFill: {\r\n        position: 'absolute' as const,\r\n        top: TRACK_TOP,\r\n        left: 0,\r\n        height: TRACK_HEIGHT,\r\n        borderRadius: 9999,\r\n        backgroundColor: cr.accent.primary.sysPrimary,\r\n      },\r\n      thumb: {\r\n        position: 'absolute' as const,\r\n        top: THUMB_TOP,\r\n        width: THUMB_SIZE,\r\n        height: THUMB_SIZE,\r\n        borderRadius: 9999,\r\n        backgroundColor: cr.surface.surface.sysSurface,\r\n        alignItems: 'center' as const,\r\n        justifyContent: 'center' as const,\r\n      },\r\n    }),\r\n    [cr, dim, ts],\r\n  );\r\n\r\n  // ── Render ────────────────────────────────────────────────────────────────────\r\n  return (\r\n    <View\r\n      style={[tokenStyles.root, style]}\r\n      accessible\r\n      accessibilityRole=\"adjustable\"\r\n      accessibilityLabel={accessibilityLabel ?? label}\r\n      accessibilityValue={{\r\n        min,\r\n        max,\r\n        now: displayValue,\r\n      }}\r\n      onAccessibilityAction={(e) => {\r\n        if (disabled) return;\r\n        const delta = e.nativeEvent.actionName === 'increment' ? step : -step;\r\n        commitValue(clamp(displayValue + delta, min, max), true);\r\n      }}\r\n      onFocus={() => setFocused(true)}\r\n      onBlur={() => setFocused(false)}\r\n    >\r\n      {/* ── Optional label ────────────────────────────────────────────────── */}\r\n      {label && <Text style={tokenStyles.label}>{label}</Text>}\r\n\r\n      {/* ── Slider row ────────────────────────────────────────────────────── */}\r\n      <View style={[tokenStyles.row, disabled && styles.rowDisabled]}>\r\n        {/* Min label */}\r\n        {showMinMax && <Text style={tokenStyles.rangeLabel}>{min}</Text>}\r\n\r\n        {/* ── Track container — the gesture zone ──────────────────────────── */}\r\n        <View\r\n          style={styles.trackContainer}\r\n          onLayout={handleTrackLayout}\r\n          {...panResponder.panHandlers}\r\n        >\r\n          {/* Track background (unfilled — full width) */}\r\n          <View style={tokenStyles.trackBg} />\r\n\r\n          {/* Track fill (filled — up to thumb center) */}\r\n          <View style={[tokenStyles.trackFill, { width: fillWidth }]} />\r\n\r\n          {/* ── Thumb ─────────────────────────────────────────────────────── */}\r\n          <View style={[tokenStyles.thumb, { left: thumbLeft }, thumbShadow]}>\r\n            {/* Focus ring — 1px outside thumb (26×26 centered over 24×24) */}\r\n            {focused && (\r\n              <View\r\n                style={[\r\n                  styles.focusRing,\r\n                  {\r\n                    borderColor: cr.addOn.primaryFixed.sysOnPrimaryFixedVariant,\r\n                    borderWidth: dim.borderWidth.sysStrokeMedium,\r\n                  },\r\n                ]}\r\n                pointerEvents=\"none\"\r\n              />\r\n            )}\r\n          </View>\r\n        </View>\r\n\r\n        {/* Max label */}\r\n        {showMinMax && <Text style={tokenStyles.rangeLabel}>{max}</Text>}\r\n      </View>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  rowDisabled: {\r\n    opacity: 0.48,\r\n  },\r\n\r\n  // ── Track container ───────────────────────────────────────────────────────\r\n  trackContainer: {\r\n    flex: 1,\r\n    height: HIT_HEIGHT,\r\n    // Overflow visible so the thumb (which extends ±12px from track centre)\r\n    // and its focus ring are not clipped at the extremes.\r\n    overflow: 'visible',\r\n  },\r\n\r\n  // ── Focus ring: 1px outside the 24×24 thumb → 26×26 ─────────────────────\r\n  focusRing: {\r\n    position: 'absolute',\r\n    top: -2,\r\n    left: -2,\r\n    right: -2,\r\n    bottom: -2,\r\n    borderRadius: 9999,\r\n  },\r\n});\r\n"],"names":["Slider","TRACK_HEIGHT","THUMB_SIZE","THUMB_HALF","HIT_HEIGHT","TRACK_TOP","THUMB_TOP","clamp","v","lo","hi","Math","max","min","value","valueProp","defaultValue","step","onValueChange","onSlidingComplete","label","showMinMax","disabled","accessibilityLabel","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","isControlled","undefined","internalValue","setInternalValue","useState","displayValue","focused","setFocused","pressed","setPressed","trackWidthRef","useRef","trackWidth","setTrackWidth","handleTrackLayout","useCallback","e","w","nativeEvent","layout","width","current","displayValueRef","useEffect","fractionToValue","frac","raw","stepped","round","valueToFraction","commitValue","isFinal","panStartFraction","panResponder","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderTerminationRequest","onPanResponderGrant","evt","tapped","locationX","onPanResponderMove","_","gs","newFrac","dx","onPanResponderRelease","onPanResponderTerminate","fraction","thumbCenterX","thumbLeft","fillWidth","thumbShadow","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","tokenStyles","useMemo","root","gap","spacing","padding","sysPadding8","alignSelf","color","surface","sysOnSurface","fontSize","labelMedium","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking","fontWeight","includeFontPadding","row","flexDirection","alignItems","rangeLabel","sysOnSurfaceVariant","bodySmall","flexShrink","trackBg","position","top","left","right","borderRadius","backgroundColor","surfaceContainer","sysSurfaceContainerHighest","trackFill","accent","primary","sysPrimary","thumb","sysSurface","justifyContent","View","accessible","accessibilityRole","accessibilityValue","now","onAccessibilityAction","delta","actionName","onFocus","onBlur","Text","styles","rowDisabled","trackContainer","onLayout","panHandlers","focusRing","borderColor","addOn","primaryFixed","sysOnPrimaryFixedVariant","borderWidth","sysStrokeMedium","pointerEvents","StyleSheet","opacity","flex","overflow","bottom"],"mappings":"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"}

package/src/components/Snackbar/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type SnackbarVariant = 'filled' | 'outlined';
+export interface SnackbarProps {
+    visible: boolean;
+    message: string;
+    variant?: SnackbarVariant;
+    actionLabel?: string;
+    onAction?: () => void;
+    onClose?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Snackbar({ visible, message, variant, actionLabel, onAction, onClose, style, }: SnackbarProps): React.JSX.Element;

package/src/components/Snackbar/index.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Snackbar", {
+    enumerable: true,
+    get: function() {
+        return Snackbar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _theme = require("../../theme");
+const _BodyText = require("../BodyText");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function Snackbar({ visible, message, variant = 'filled', actionLabel, onAction, onClose, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const translateY = (0, _react.useRef)(new _reactnative.Animated.Value(100)).current;
+    const opacity = (0, _react.useRef)(new _reactnative.Animated.Value(0)).current;
+    (0, _react.useEffect)(()=>{
+        if (visible) {
+            _reactnative.Animated.parallel([
+                _reactnative.Animated.spring(translateY, {
+                    toValue: 0,
+                    useNativeDriver: true,
+                    damping: 20,
+                    stiffness: 300
+                }),
+                _reactnative.Animated.timing(opacity, {
+                    toValue: 1,
+                    duration: 200,
+                    useNativeDriver: true
+                })
+            ]).start();
+        } else {
+            _reactnative.Animated.parallel([
+                _reactnative.Animated.timing(translateY, {
+                    toValue: 100,
+                    duration: 200,
+                    useNativeDriver: true
+                }),
+                _reactnative.Animated.timing(opacity, {
+                    toValue: 0,
+                    duration: 150,
+                    useNativeDriver: true
+                })
+            ]).start();
+        }
+    }, [
+        visible
+    ]);
+    const isFilled = variant === 'filled';
+    const tokenStyles = (0, _react.useMemo)(()=>({
+            wrapper: {
+                position: 'absolute',
+                bottom: dim.spacing.padding.sysPadding24,
+                left: dim.spacing.padding.sysPadding16,
+                right: dim.spacing.padding.sysPadding16,
+                alignItems: 'center'
+            },
+            container: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingVertical: dim.spacing.padding.sysPadding12,
+                paddingHorizontal: dim.spacing.padding.sysPadding16,
+                borderRadius: dim.borderRadius.sysRadiusMd,
+                gap: dim.spacing.padding.sysPadding16,
+                width: '100%',
+                shadowColor: '#000',
+                shadowOffset: {
+                    width: 0,
+                    height: 4
+                },
+                shadowOpacity: 0.12,
+                shadowRadius: 12,
+                elevation: 6
+            },
+            containerFilled: {
+                backgroundColor: cr.accent.primary.sysPrimaryContainer
+            },
+            containerOutlined: {
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                borderWidth: dim.borderWidth.sysStrokeThin,
+                borderColor: cr.outline.sysOutline
+            },
+            actionSlot: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: dim.spacing.padding.sysPadding12
+            },
+            actionButton: {
+                paddingVertical: dim.spacing.padding.sysPadding4
+            },
+            closeButton: {
+                width: 24,
+                height: 24,
+                borderRadius: dim.borderRadius.sysRadiusFull,
+                alignItems: 'center',
+                justifyContent: 'center'
+            }
+        }), [
+        cr,
+        dim
+    ]);
+    const containerVariantStyle = isFilled ? tokenStyles.containerFilled : tokenStyles.containerOutlined;
+    const labelColor = isFilled ? cr.accent.primary.sysOnPrimary : cr.surface.surface.sysOnSurface;
+    const actionColor = isFilled ? cr.accent.primary.sysOnPrimary : cr.accent.primary.sysPrimary;
+    const closeBg = isFilled ? cr.transparent.neutral.sysWhite10 : cr.surface.surfaceContainer.sysSurfaceContainer;
+    const closeIconColor = isFilled ? cr.accent.primary.sysOnPrimary : cr.surface.surface.sysOnSurfaceVariant;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Animated.View, {
+        style: [
+            tokenStyles.wrapper,
+            {
+                opacity,
+                transform: [
+                    {
+                        translateY
+                    }
+                ]
+            },
+            style
+        ],
+        pointerEvents: visible ? 'box-none' : 'none',
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: [
+                tokenStyles.container,
+                containerVariantStyle
+            ],
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                    variant: "medium",
+                    color: labelColor,
+                    style: styles.label,
+                    numberOfLines: 2,
+                    children: message
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                    style: tokenStyles.actionSlot,
+                    children: [
+                        actionLabel && onAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                            onPress: onAction,
+                            accessibilityRole: "button",
+                            accessibilityLabel: actionLabel,
+                            style: ({ pressed })=>[
+                                    tokenStyles.actionButton,
+                                    pressed && styles.pressed
+                                ],
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                                variant: "small",
+                                emphasized: true,
+                                color: actionColor,
+                                children: actionLabel
+                            })
+                        }),
+                        onClose && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                            onPress: onClose,
+                            accessibilityRole: "button",
+                            accessibilityLabel: "Dismiss",
+                            style: ({ pressed })=>[
+                                    tokenStyles.closeButton,
+                                    {
+                                        backgroundColor: closeBg
+                                    },
+                                    pressed && styles.pressed
+                                ],
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                name: "close",
+                                size: 16,
+                                color: closeIconColor
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    label: {
+        flex: 1
+    },
+    pressed: {
+        opacity: 0.7
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/Snackbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Snackbar/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\r\n\r\nimport {\r\n  Animated,\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nexport type SnackbarVariant = 'filled' | 'outlined';\r\n\r\nexport interface SnackbarProps {\r\n  visible: boolean;\r\n  message: string;\r\n  variant?: SnackbarVariant;\r\n  actionLabel?: string;\r\n  onAction?: () => void;\r\n  onClose?: () => void;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function Snackbar({\r\n  visible,\r\n  message,\r\n  variant = 'filled',\r\n  actionLabel,\r\n  onAction,\r\n  onClose,\r\n  style,\r\n}: SnackbarProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const translateY = useRef(new Animated.Value(100)).current;\r\n  const opacity = useRef(new Animated.Value(0)).current;\r\n\r\n  useEffect(() => {\r\n    if (visible) {\r\n      Animated.parallel([\r\n        Animated.spring(translateY, {\r\n          toValue: 0,\r\n          useNativeDriver: true,\r\n          damping: 20,\r\n          stiffness: 300,\r\n        }),\r\n        Animated.timing(opacity, {\r\n          toValue: 1,\r\n          duration: 200,\r\n          useNativeDriver: true,\r\n        }),\r\n      ]).start();\r\n    } else {\r\n      Animated.parallel([\r\n        Animated.timing(translateY, {\r\n          toValue: 100,\r\n          duration: 200,\r\n          useNativeDriver: true,\r\n        }),\r\n        Animated.timing(opacity, {\r\n          toValue: 0,\r\n          duration: 150,\r\n          useNativeDriver: true,\r\n        }),\r\n      ]).start();\r\n    }\r\n  }, [visible]);\r\n\r\n  const isFilled = variant === 'filled';\r\n\r\n  const tokenStyles = useMemo(\r\n    () => ({\r\n      wrapper: {\r\n        position: 'absolute' as const,\r\n        bottom: dim.spacing.padding.sysPadding24,\r\n        left: dim.spacing.padding.sysPadding16,\r\n        right: dim.spacing.padding.sysPadding16,\r\n        alignItems: 'center' as const,\r\n      },\r\n      container: {\r\n        flexDirection: 'row' as const,\r\n        alignItems: 'center' as const,\r\n        paddingVertical: dim.spacing.padding.sysPadding12,\r\n        paddingHorizontal: dim.spacing.padding.sysPadding16,\r\n        borderRadius: dim.borderRadius.sysRadiusMd,\r\n        gap: dim.spacing.padding.sysPadding16,\r\n        width: '100%' as const,\r\n        shadowColor: '#000',\r\n        shadowOffset: { width: 0, height: 4 },\r\n        shadowOpacity: 0.12,\r\n        shadowRadius: 12,\r\n        elevation: 6,\r\n      },\r\n      containerFilled: {\r\n        backgroundColor: cr.accent.primary.sysPrimaryContainer,\r\n      },\r\n      containerOutlined: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderWidth: dim.borderWidth.sysStrokeThin,\r\n        borderColor: cr.outline.sysOutline,\r\n      },\r\n      actionSlot: {\r\n        flexDirection: 'row' as const,\r\n        alignItems: 'center' as const,\r\n        gap: dim.spacing.padding.sysPadding12,\r\n      },\r\n      actionButton: {\r\n        paddingVertical: dim.spacing.padding.sysPadding4,\r\n      },\r\n      closeButton: {\r\n        width: 24,\r\n        height: 24,\r\n        borderRadius: dim.borderRadius.sysRadiusFull,\r\n        alignItems: 'center' as const,\r\n        justifyContent: 'center' as const,\r\n      },\r\n    }),\r\n    [cr, dim],\r\n  );\r\n\r\n  const containerVariantStyle = isFilled\r\n    ? tokenStyles.containerFilled\r\n    : tokenStyles.containerOutlined;\r\n  const labelColor = isFilled\r\n    ? cr.accent.primary.sysOnPrimary\r\n    : cr.surface.surface.sysOnSurface;\r\n  const actionColor = isFilled\r\n    ? cr.accent.primary.sysOnPrimary\r\n    : cr.accent.primary.sysPrimary;\r\n  const closeBg = isFilled\r\n    ? cr.transparent.neutral.sysWhite10\r\n    : cr.surface.surfaceContainer.sysSurfaceContainer;\r\n  const closeIconColor = isFilled\r\n    ? cr.accent.primary.sysOnPrimary\r\n    : cr.surface.surface.sysOnSurfaceVariant;\r\n\r\n  return (\r\n    <Animated.View\r\n      style={[\r\n        tokenStyles.wrapper,\r\n        { opacity, transform: [{ translateY }] },\r\n        style,\r\n      ]}\r\n      pointerEvents={visible ? 'box-none' : 'none'}\r\n    >\r\n      <View style={[tokenStyles.container, containerVariantStyle]}>\r\n        <BodyText\r\n          variant=\"medium\"\r\n          color={labelColor}\r\n          style={styles.label}\r\n          numberOfLines={2}\r\n        >\r\n          {message}\r\n        </BodyText>\r\n\r\n        <View style={tokenStyles.actionSlot}>\r\n          {actionLabel && onAction && (\r\n            <Pressable\r\n              onPress={onAction}\r\n              accessibilityRole=\"button\"\r\n              accessibilityLabel={actionLabel}\r\n              style={({ pressed }) => [\r\n                tokenStyles.actionButton,\r\n                pressed && styles.pressed,\r\n              ]}\r\n            >\r\n              <BodyText variant=\"small\" emphasized color={actionColor}>\r\n                {actionLabel}\r\n              </BodyText>\r\n            </Pressable>\r\n          )}\r\n\r\n          {onClose && (\r\n            <Pressable\r\n              onPress={onClose}\r\n              accessibilityRole=\"button\"\r\n              accessibilityLabel=\"Dismiss\"\r\n              style={({ pressed }) => [\r\n                tokenStyles.closeButton,\r\n                { backgroundColor: closeBg },\r\n                pressed && styles.pressed,\r\n              ]}\r\n            >\r\n              <Ionicons name=\"close\" size={16} color={closeIconColor} />\r\n            </Pressable>\r\n          )}\r\n        </View>\r\n      </View>\r\n    </Animated.View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  label: {\r\n    flex: 1,\r\n  },\r\n  pressed: {\r\n    opacity: 0.7,\r\n  },\r\n});\r\n"],"names":["Snackbar","visible","message","variant","actionLabel","onAction","onClose","style","colorRoles","cr","dimensions","dim","useTheme","translateY","useRef","Animated","Value","current","opacity","useEffect","parallel","spring","toValue","useNativeDriver","damping","stiffness","timing","duration","start","isFilled","tokenStyles","useMemo","wrapper","position","bottom","spacing","padding","sysPadding24","left","sysPadding16","right","alignItems","container","flexDirection","paddingVertical","sysPadding12","paddingHorizontal","borderRadius","sysRadiusMd","gap","width","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","containerFilled","backgroundColor","accent","primary","sysPrimaryContainer","containerOutlined","surface","surfaceContainer","sysSurfaceContainerLowest","borderWidth","sysStrokeThin","borderColor","outline","sysOutline","actionSlot","actionButton","sysPadding4","closeButton","sysRadiusFull","justifyContent","containerVariantStyle","labelColor","sysOnPrimary","sysOnSurface","actionColor","sysPrimary","closeBg","transparent","neutral","sysWhite10","sysSurfaceContainer","closeIconColor","sysOnSurfaceVariant","View","transform","pointerEvents","BodyText","color","styles","label","numberOfLines","Pressable","onPress","accessibilityRole","accessibilityLabel","pressed","emphasized","Ionicons","name","size","StyleSheet","create","flex"],"mappings":";;;;+BA4BgBA;;;eAAAA;;;;+DA5BkC;6BAS3C;6BAEkB;uBAEA;0BACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAclB,SAASA,SAAS,EACvBC,OAAO,EACPC,OAAO,EACPC,UAAU,QAAQ,EAClBC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,KAAK,EACS;IACd,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,MAAMC,aAAaC,IAAAA,aAAM,EAAC,IAAIC,qBAAQ,CAACC,KAAK,CAAC,MAAMC,OAAO;IAC1D,MAAMC,UAAUJ,IAAAA,aAAM,EAAC,IAAIC,qBAAQ,CAACC,KAAK,CAAC,IAAIC,OAAO;IAErDE,IAAAA,gBAAS,EAAC;QACR,IAAIlB,SAAS;YACXc,qBAAQ,CAACK,QAAQ,CAAC;gBAChBL,qBAAQ,CAACM,MAAM,CAACR,YAAY;oBAC1BS,SAAS;oBACTC,iBAAiB;oBACjBC,SAAS;oBACTC,WAAW;gBACb;gBACAV,qBAAQ,CAACW,MAAM,CAACR,SAAS;oBACvBI,SAAS;oBACTK,UAAU;oBACVJ,iBAAiB;gBACnB;aACD,EAAEK,KAAK;QACV,OAAO;YACLb,qBAAQ,CAACK,QAAQ,CAAC;gBAChBL,qBAAQ,CAACW,MAAM,CAACb,YAAY;oBAC1BS,SAAS;oBACTK,UAAU;oBACVJ,iBAAiB;gBACnB;gBACAR,qBAAQ,CAACW,MAAM,CAACR,SAAS;oBACvBI,SAAS;oBACTK,UAAU;oBACVJ,iBAAiB;gBACnB;aACD,EAAEK,KAAK;QACV;IACF,GAAG;QAAC3B;KAAQ;IAEZ,MAAM4B,WAAW1B,YAAY;IAE7B,MAAM2B,cAAcC,IAAAA,cAAO,EACzB,IAAO,CAAA;YACLC,SAAS;gBACPC,UAAU;gBACVC,QAAQvB,IAAIwB,OAAO,CAACC,OAAO,CAACC,YAAY;gBACxCC,MAAM3B,IAAIwB,OAAO,CAACC,OAAO,CAACG,YAAY;gBACtCC,OAAO7B,IAAIwB,OAAO,CAACC,OAAO,CAACG,YAAY;gBACvCE,YAAY;YACd;YACAC,WAAW;gBACTC,eAAe;gBACfF,YAAY;gBACZG,iBAAiBjC,IAAIwB,OAAO,CAACC,OAAO,CAACS,YAAY;gBACjDC,mBAAmBnC,IAAIwB,OAAO,CAACC,OAAO,CAACG,YAAY;gBACnDQ,cAAcpC,IAAIoC,YAAY,CAACC,WAAW;gBAC1CC,KAAKtC,IAAIwB,OAAO,CAACC,OAAO,CAACG,YAAY;gBACrCW,OAAO;gBACPC,aAAa;gBACbC,cAAc;oBAAEF,OAAO;oBAAGG,QAAQ;gBAAE;gBACpCC,eAAe;gBACfC,cAAc;gBACdC,WAAW;YACb;YACAC,iBAAiB;gBACfC,iBAAiBjD,GAAGkD,MAAM,CAACC,OAAO,CAACC,mBAAmB;YACxD;YACAC,mBAAmB;gBACjBJ,iBAAiBjD,GAAGsD,OAAO,CAACC,gBAAgB,CAACC,yBAAyB;gBACtEC,aAAavD,IAAIuD,WAAW,CAACC,aAAa;gBAC1CC,aAAa3D,GAAG4D,OAAO,CAACC,UAAU;YACpC;YACAC,YAAY;gBACV5B,eAAe;gBACfF,YAAY;gBACZQ,KAAKtC,IAAIwB,OAAO,CAACC,OAAO,CAACS,YAAY;YACvC;YACA2B,cAAc;gBACZ5B,iBAAiBjC,IAAIwB,OAAO,CAACC,OAAO,CAACqC,WAAW;YAClD;YACAC,aAAa;gBACXxB,OAAO;gBACPG,QAAQ;gBACRN,cAAcpC,IAAIoC,YAAY,CAAC4B,aAAa;gBAC5ClC,YAAY;gBACZmC,gBAAgB;YAClB;QACF,CAAA,GACA;QAACnE;QAAIE;KAAI;IAGX,MAAMkE,wBAAwBhD,WAC1BC,YAAY2B,eAAe,GAC3B3B,YAAYgC,iBAAiB;IACjC,MAAMgB,aAAajD,WACfpB,GAAGkD,MAAM,CAACC,OAAO,CAACmB,YAAY,GAC9BtE,GAAGsD,OAAO,CAACA,OAAO,CAACiB,YAAY;IACnC,MAAMC,cAAcpD,WAChBpB,GAAGkD,MAAM,CAACC,OAAO,CAACmB,YAAY,GAC9BtE,GAAGkD,MAAM,CAACC,OAAO,CAACsB,UAAU;IAChC,MAAMC,UAAUtD,WACZpB,GAAG2E,WAAW,CAACC,OAAO,CAACC,UAAU,GACjC7E,GAAGsD,OAAO,CAACC,gBAAgB,CAACuB,mBAAmB;IACnD,MAAMC,iBAAiB3D,WACnBpB,GAAGkD,MAAM,CAACC,OAAO,CAACmB,YAAY,GAC9BtE,GAAGsD,OAAO,CAACA,OAAO,CAAC0B,mBAAmB;IAE1C,qBACE,qBAAC1E,qBAAQ,CAAC2E,IAAI;QACZnF,OAAO;YACLuB,YAAYE,OAAO;YACnB;gBAAEd;gBAASyE,WAAW;oBAAC;wBAAE9E;oBAAW;iBAAE;YAAC;YACvCN;SACD;QACDqF,eAAe3F,UAAU,aAAa;kBAEtC,cAAA,sBAACyF,iBAAI;YAACnF,OAAO;gBAACuB,YAAYY,SAAS;gBAAEmC;aAAsB;;8BACzD,qBAACgB,kBAAQ;oBACP1F,SAAQ;oBACR2F,OAAOhB;oBACPvE,OAAOwF,OAAOC,KAAK;oBACnBC,eAAe;8BAEd/F;;8BAGH,sBAACwF,iBAAI;oBAACnF,OAAOuB,YAAYyC,UAAU;;wBAChCnE,eAAeC,0BACd,qBAAC6F,sBAAS;4BACRC,SAAS9F;4BACT+F,mBAAkB;4BAClBC,oBAAoBjG;4BACpBG,OAAO,CAAC,EAAE+F,OAAO,EAAE,GAAK;oCACtBxE,YAAY0C,YAAY;oCACxB8B,WAAWP,OAAOO,OAAO;iCAC1B;sCAED,cAAA,qBAACT,kBAAQ;gCAAC1F,SAAQ;gCAAQoG,UAAU;gCAACT,OAAOb;0CACzC7E;;;wBAKNE,yBACC,qBAAC4F,sBAAS;4BACRC,SAAS7F;4BACT8F,mBAAkB;4BAClBC,oBAAmB;4BACnB9F,OAAO,CAAC,EAAE+F,OAAO,EAAE,GAAK;oCACtBxE,YAAY4C,WAAW;oCACvB;wCAAEhB,iBAAiByB;oCAAQ;oCAC3BmB,WAAWP,OAAOO,OAAO;iCAC1B;sCAED,cAAA,qBAACE,qBAAQ;gCAACC,MAAK;gCAAQC,MAAM;gCAAIZ,OAAON;;;;;;;;AAOtD;AAEA,MAAMO,SAASY,uBAAU,CAACC,MAAM,CAAC;IAC/BZ,OAAO;QACLa,MAAM;IACR;IACAP,SAAS;QACPpF,SAAS;IACX;AACF"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /** Controlled value. Omit to use internal state. */
+    value?: boolean;
+    /** Default value for uncontrolled usage */
+    defaultValue?: boolean;
+    /** Called when the user toggles the switch */
+    onValueChange?: (value: boolean) => void;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Switch({ value: valueProp, defaultValue, onValueChange, disabled, accessibilityLabel, style, }: SwitchProps): React.JSX.Element;