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

package/src/components/Switch/index.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Switch", {
+    enumerable: true,
+    get: function() {
+        return Switch;
+    }
+});
+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_W = 56;
+const TRACK_H = 32;
+const THUMB_SIZE = 24;
+function Switch({ value: valueProp, defaultValue = false, onValueChange, disabled = false, accessibilityLabel, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const trackPadding = (0, _react.useMemo)(()=>dim.spacing.padding.sysPadding4, [
+        dim
+    ]);
+    // Thumb translateX: off=left edge, on=right edge
+    const thumbOff = trackPadding; // 4
+    const thumbOn = TRACK_W - trackPadding - THUMB_SIZE; // 56 - 4 - 24 = 28
+    // Controlled vs uncontrolled
+    const isControlled = valueProp !== undefined;
+    const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue);
+    const toggled = isControlled ? valueProp : internalValue;
+    const [focused, setFocused] = (0, _react.useState)(false);
+    // ── Animation ──────────────────────────────────────────────────────────────
+    const thumbAnim = (0, _react.useRef)(new _reactnative.Animated.Value(toggled ? thumbOn : thumbOff)).current;
+    const bgAnim = (0, _react.useRef)(new _reactnative.Animated.Value(toggled ? 1 : 0)).current;
+    (0, _react.useEffect)(()=>{
+        _reactnative.Animated.parallel([
+            _reactnative.Animated.timing(thumbAnim, {
+                toValue: toggled ? thumbOn : thumbOff,
+                duration: 150,
+                useNativeDriver: true
+            }),
+            _reactnative.Animated.timing(bgAnim, {
+                toValue: toggled ? 1 : 0,
+                duration: 150,
+                useNativeDriver: false
+            })
+        ]).start();
+    }, [
+        toggled
+    ]);
+    // Interpolate background color
+    const trackBg = bgAnim.interpolate({
+        inputRange: [
+            0,
+            1
+        ],
+        outputRange: [
+            cr.surface.surfaceContainer.sysSurfaceContainerHighest,
+            cr.accent.primary.sysPrimary
+        ]
+    });
+    // Thumb color: on=sysOnPrimary, off=sysSurface
+    const thumbBg = bgAnim.interpolate({
+        inputRange: [
+            0,
+            1
+        ],
+        outputRange: [
+            cr.surface.surface.sysSurface,
+            cr.accent.primary.sysOnPrimary
+        ]
+    });
+    // ── Handler ────────────────────────────────────────────────────────────────
+    function handlePress() {
+        if (disabled) return;
+        const next = !toggled;
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Pressable, {
+        onPress: handlePress,
+        onFocus: ()=>setFocused(true),
+        onBlur: ()=>setFocused(false),
+        disabled: disabled,
+        accessibilityRole: "switch",
+        accessibilityLabel: accessibilityLabel,
+        accessibilityState: {
+            checked: toggled,
+            disabled
+        },
+        style: [
+            styles.pressable,
+            style
+        ],
+        children: [
+            focused && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: [
+                    styles.focusRing,
+                    {
+                        borderColor: cr.addOn.primaryFixed.sysOnPrimaryFixedVariant,
+                        borderWidth: dim.borderWidth.sysStrokeMedium
+                    }
+                ],
+                pointerEvents: "none"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Animated.View, {
+                style: [
+                    styles.track,
+                    {
+                        backgroundColor: trackBg
+                    },
+                    disabled && styles.trackDisabled
+                ],
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Animated.View, {
+                    style: [
+                        styles.thumb,
+                        {
+                            top: trackPadding,
+                            backgroundColor: thumbBg,
+                            transform: [
+                                {
+                                    translateX: thumbAnim
+                                }
+                            ]
+                        },
+                        disabled && styles.thumbDisabled
+                    ]
+                })
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    pressable: {
+        // Sized to the track; focus ring is absolutely overlaid
+        width: TRACK_W,
+        height: TRACK_H,
+        alignSelf: 'flex-start'
+    },
+    track: {
+        width: TRACK_W,
+        height: TRACK_H,
+        borderRadius: 9999,
+        // Thumb is absolutely positioned inside the track
+        position: 'relative'
+    },
+    trackDisabled: {
+        opacity: 0.48
+    },
+    thumb: {
+        position: 'absolute',
+        left: 0,
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        borderRadius: 9999,
+        // lv2 shadow
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.08,
+        shadowRadius: 4,
+        elevation: 2
+    },
+    thumbDisabled: {
+        opacity: 0.64
+    },
+    // Focus ring: 1px outside the track on all sides
+    focusRing: {
+        position: 'absolute',
+        top: -2,
+        left: -2,
+        right: -2,
+        bottom: -2,
+        borderRadius: 9999
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Switch/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } 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 { useTheme } from '../../theme';\r\n\r\nexport interface SwitchProps {\r\n  /** Controlled value. Omit to use internal state. */\r\n  value?: boolean;\r\n  /** Default value for uncontrolled usage */\r\n  defaultValue?: boolean;\r\n  /** Called when the user toggles the switch */\r\n  onValueChange?: (value: boolean) => void;\r\n  disabled?: boolean;\r\n  accessibilityLabel?: string;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Layout constants ──────────────────────────────────────────────────────────\r\nconst TRACK_W = 56;\r\nconst TRACK_H = 32;\r\nconst THUMB_SIZE = 24;\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport function Switch({\r\n  value: valueProp,\r\n  defaultValue = false,\r\n  onValueChange,\r\n  disabled = false,\r\n  accessibilityLabel,\r\n  style,\r\n}: SwitchProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const trackPadding = useMemo(() => dim.spacing.padding.sysPadding4, [dim]);\r\n\r\n  // Thumb translateX: off=left edge, on=right edge\r\n  const thumbOff = trackPadding; // 4\r\n  const thumbOn = TRACK_W - trackPadding - THUMB_SIZE; // 56 - 4 - 24 = 28\r\n\r\n  // Controlled vs uncontrolled\r\n  const isControlled = valueProp !== undefined;\r\n  const [internalValue, setInternalValue] = useState(defaultValue);\r\n  const toggled = isControlled ? valueProp! : internalValue;\r\n\r\n  const [focused, setFocused] = useState(false);\r\n\r\n  // ── Animation ──────────────────────────────────────────────────────────────\r\n  const thumbAnim = useRef(\r\n    new Animated.Value(toggled ? thumbOn : thumbOff),\r\n  ).current;\r\n  const bgAnim = useRef(new Animated.Value(toggled ? 1 : 0)).current;\r\n\r\n  useEffect(() => {\r\n    Animated.parallel([\r\n      Animated.timing(thumbAnim, {\r\n        toValue: toggled ? thumbOn : thumbOff,\r\n        duration: 150,\r\n        useNativeDriver: true,\r\n      }),\r\n      Animated.timing(bgAnim, {\r\n        toValue: toggled ? 1 : 0,\r\n        duration: 150,\r\n        useNativeDriver: false, // backgroundColor not supported by native driver\r\n      }),\r\n    ]).start();\r\n  }, [toggled]);\r\n\r\n  // Interpolate background color\r\n  const trackBg = bgAnim.interpolate({\r\n    inputRange: [0, 1],\r\n    outputRange: [\r\n      cr.surface.surfaceContainer.sysSurfaceContainerHighest,\r\n      cr.accent.primary.sysPrimary,\r\n    ],\r\n  });\r\n\r\n  // Thumb color: on=sysOnPrimary, off=sysSurface\r\n  const thumbBg = bgAnim.interpolate({\r\n    inputRange: [0, 1],\r\n    outputRange: [\r\n      cr.surface.surface.sysSurface,\r\n      cr.accent.primary.sysOnPrimary,\r\n    ],\r\n  });\r\n\r\n  // ── Handler ────────────────────────────────────────────────────────────────\r\n  function handlePress() {\r\n    if (disabled) return;\r\n    const next = !toggled;\r\n    if (!isControlled) setInternalValue(next);\r\n    onValueChange?.(next);\r\n  }\r\n\r\n  return (\r\n    <Pressable\r\n      onPress={handlePress}\r\n      onFocus={() => setFocused(true)}\r\n      onBlur={() => setFocused(false)}\r\n      disabled={disabled}\r\n      accessibilityRole=\"switch\"\r\n      accessibilityLabel={accessibilityLabel}\r\n      accessibilityState={{ checked: toggled, disabled }}\r\n      style={[styles.pressable, style]}\r\n    >\r\n      {/* ── Focus ring (outside track by 1px) ─────────────────────────────── */}\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\r\n      {/* ── Track ─────────────────────────────────────────────────────────── */}\r\n      <Animated.View\r\n        style={[\r\n          styles.track,\r\n          { backgroundColor: trackBg },\r\n          disabled && styles.trackDisabled,\r\n        ]}\r\n      >\r\n        {/* ── Thumb ───────────────────────────────────────────────────────── */}\r\n        <Animated.View\r\n          style={[\r\n            styles.thumb,\r\n            {\r\n              top: trackPadding,\r\n              backgroundColor: thumbBg,\r\n              transform: [{ translateX: thumbAnim }],\r\n            },\r\n            disabled && styles.thumbDisabled,\r\n          ]}\r\n        />\r\n      </Animated.View>\r\n    </Pressable>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  pressable: {\r\n    // Sized to the track; focus ring is absolutely overlaid\r\n    width: TRACK_W,\r\n    height: TRACK_H,\r\n    alignSelf: 'flex-start',\r\n  },\r\n  track: {\r\n    width: TRACK_W,\r\n    height: TRACK_H,\r\n    borderRadius: 9999,\r\n    // Thumb is absolutely positioned inside the track\r\n    position: 'relative',\r\n  },\r\n  trackDisabled: {\r\n    opacity: 0.48,\r\n  },\r\n  thumb: {\r\n    position: 'absolute',\r\n    left: 0, // translateX drives actual X position\r\n    width: THUMB_SIZE,\r\n    height: THUMB_SIZE,\r\n    borderRadius: 9999,\r\n    // lv2 shadow\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 2 },\r\n    shadowOpacity: 0.08,\r\n    shadowRadius: 4,\r\n    elevation: 2,\r\n  },\r\n  thumbDisabled: {\r\n    opacity: 0.64,\r\n  },\r\n  // Focus ring: 1px outside the track on all sides\r\n  focusRing: {\r\n    position: 'absolute',\r\n    top: -2, // 1px gap + sysStrokeMedium (1.5px) ≈ 2px\r\n    left: -2,\r\n    right: -2,\r\n    bottom: -2,\r\n    borderRadius: 9999,\r\n  },\r\n});\r\n"],"names":["Switch","TRACK_W","TRACK_H","THUMB_SIZE","value","valueProp","defaultValue","onValueChange","disabled","accessibilityLabel","style","colorRoles","cr","dimensions","dim","useTheme","trackPadding","useMemo","spacing","padding","sysPadding4","thumbOff","thumbOn","isControlled","undefined","internalValue","setInternalValue","useState","toggled","focused","setFocused","thumbAnim","useRef","Animated","Value","current","bgAnim","useEffect","parallel","timing","toValue","duration","useNativeDriver","start","trackBg","interpolate","inputRange","outputRange","surface","surfaceContainer","sysSurfaceContainerHighest","accent","primary","sysPrimary","thumbBg","sysSurface","sysOnPrimary","handlePress","next","Pressable","onPress","onFocus","onBlur","accessibilityRole","accessibilityState","checked","styles","pressable","View","focusRing","borderColor","addOn","primaryFixed","sysOnPrimaryFixedVariant","borderWidth","sysStrokeMedium","pointerEvents","track","backgroundColor","trackDisabled","thumb","top","transform","translateX","thumbDisabled","StyleSheet","create","width","height","alignSelf","borderRadius","position","opacity","left","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","right","bottom"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type TooltipVariant = 'filled' | 'elevated';
+/**
+ * The direction the arrow points — i.e. where the tooltip's target is
+ * relative to the bubble.
+ *
+ * `bottom` → bubble sits above target, arrow points down
+ * `top`    → bubble sits below target, arrow points up
+ * `left`   → bubble sits right of target, arrow points left
+ * `right`  → bubble sits left of target, arrow points right
+ * `none`   → no arrow
+ */
+export type TooltipDirection = 'none' | 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps {
+    text: string;
+    variant?: TooltipVariant;
+    direction?: TooltipDirection;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Tooltip({ text, variant, direction, style, }: TooltipProps): React.JSX.Element;

package/src/components/Tooltip/index.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tooltip", {
+    enumerable: true,
+    get: function() {
+        return Tooltip;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// ── Arrow dimensions ─────────────────────────────────────────────────────────
+const ARROW_BASE = 16; // px — wide axis
+const ARROW_HEIGHT = 6; // px — narrow axis
+function Tooltip({ text, variant = 'filled', direction = 'none', style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const isFilled = variant === 'filled';
+    const bg = isFilled ? cr.surface.inverse.sysInverseSurface : cr.surface.surfaceContainer.sysSurfaceContainerLowest;
+    const textColor = isFilled ? cr.surface.inverse.sysInverseOnSurface : cr.surface.surface.sysOnSurface;
+    // ── Arrow (CSS triangle using zero-size View + borders) ───────────────────
+    // Half-base for side calculations
+    const half = ARROW_BASE / 2;
+    function renderArrow() {
+        if (direction === 'none') return null;
+        // Shared transparent sides
+        const transparent = 'transparent';
+        let arrowStyle;
+        switch(direction){
+            case 'bottom':
+                // Triangle pointing down — sits below bubble
+                arrowStyle = {
+                    width: 0,
+                    height: 0,
+                    borderLeftWidth: half,
+                    borderRightWidth: half,
+                    borderTopWidth: ARROW_HEIGHT,
+                    borderLeftColor: transparent,
+                    borderRightColor: transparent,
+                    borderTopColor: bg
+                };
+                break;
+            case 'top':
+                // Triangle pointing up — sits above bubble
+                arrowStyle = {
+                    width: 0,
+                    height: 0,
+                    borderLeftWidth: half,
+                    borderRightWidth: half,
+                    borderBottomWidth: ARROW_HEIGHT,
+                    borderLeftColor: transparent,
+                    borderRightColor: transparent,
+                    borderBottomColor: bg
+                };
+                break;
+            case 'left':
+                // Triangle pointing left — sits to the left of bubble
+                arrowStyle = {
+                    width: 0,
+                    height: 0,
+                    borderTopWidth: half,
+                    borderBottomWidth: half,
+                    borderRightWidth: ARROW_HEIGHT,
+                    borderTopColor: transparent,
+                    borderBottomColor: transparent,
+                    borderRightColor: bg
+                };
+                break;
+            case 'right':
+                // Triangle pointing right — sits to the right of bubble
+                arrowStyle = {
+                    width: 0,
+                    height: 0,
+                    borderTopWidth: half,
+                    borderBottomWidth: half,
+                    borderLeftWidth: ARROW_HEIGHT,
+                    borderTopColor: transparent,
+                    borderBottomColor: transparent,
+                    borderLeftColor: bg
+                };
+                break;
+        }
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+            accessible: false,
+            style: arrowStyle
+        });
+    }
+    // ── Bubble ────────────────────────────────────────────────────────────────
+    const bubble = /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        accessible: true,
+        accessibilityRole: "text",
+        accessibilityLabel: text,
+        style: [
+            styles.bubble,
+            {
+                backgroundColor: bg,
+                paddingHorizontal: dim.spacing.padding.sysPadding12,
+                paddingVertical: dim.spacing.padding.sysPadding8,
+                borderRadius: dim.borderRadius.sysRadiusSm
+            },
+            !isFilled && styles.elevated,
+            !isFilled && {
+                borderWidth: dim.borderWidth.sysStrokeThin,
+                borderColor: cr.outline.sysOutline
+            }
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+            style: {
+                color: textColor,
+                fontSize: ts.bodySmall.sysFontSize,
+                lineHeight: ts.bodySmall.sysLineHeight,
+                fontWeight: '400',
+                textAlign: 'center',
+                includeFontPadding: false
+            },
+            children: text
+        })
+    });
+    // ── Layout — arrow position determines stacking order ────────────────────
+    if (direction === 'none') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+            style: style,
+            children: bubble
+        });
+    }
+    if (direction === 'bottom') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: [
+                styles.colCenter,
+                style
+            ],
+            children: [
+                bubble,
+                renderArrow()
+            ]
+        });
+    }
+    if (direction === 'top') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: [
+                styles.colCenter,
+                style
+            ],
+            children: [
+                renderArrow(),
+                bubble
+            ]
+        });
+    }
+    if (direction === 'right') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: [
+                styles.rowCenter,
+                style
+            ],
+            children: [
+                bubble,
+                renderArrow()
+            ]
+        });
+    }
+    // left
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            styles.rowCenter,
+            style
+        ],
+        children: [
+            renderArrow(),
+            bubble
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    bubble: {
+        alignSelf: 'flex-start'
+    },
+    elevated: {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.06,
+        shadowRadius: 4,
+        elevation: 1
+    },
+    colCenter: {
+        alignItems: 'center',
+        alignSelf: 'flex-start'
+    },
+    rowCenter: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start'
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Tooltip/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type TooltipVariant = 'filled' | 'elevated';\r\n/**\r\n * The direction the arrow points — i.e. where the tooltip's target is\r\n * relative to the bubble.\r\n *\r\n * `bottom` → bubble sits above target, arrow points down\r\n * `top`    → bubble sits below target, arrow points up\r\n * `left`   → bubble sits right of target, arrow points left\r\n * `right`  → bubble sits left of target, arrow points right\r\n * `none`   → no arrow\r\n */\r\nexport type TooltipDirection = 'none' | 'top' | 'bottom' | 'left' | 'right';\r\n\r\nexport interface TooltipProps {\r\n  text: string;\r\n  variant?: TooltipVariant;\r\n  direction?: TooltipDirection;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Arrow dimensions ─────────────────────────────────────────────────────────\r\nconst ARROW_BASE = 16; // px — wide axis\r\nconst ARROW_HEIGHT = 6; // px — narrow axis\r\n\r\n// ── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport function Tooltip({\r\n  text,\r\n  variant = 'filled',\r\n  direction = 'none',\r\n  style,\r\n}: TooltipProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const isFilled = variant === 'filled';\r\n\r\n  const bg = isFilled\r\n    ? cr.surface.inverse.sysInverseSurface\r\n    : cr.surface.surfaceContainer.sysSurfaceContainerLowest;\r\n\r\n  const textColor = isFilled\r\n    ? cr.surface.inverse.sysInverseOnSurface\r\n    : cr.surface.surface.sysOnSurface;\r\n\r\n  // ── Arrow (CSS triangle using zero-size View + borders) ───────────────────\r\n  // Half-base for side calculations\r\n  const half = ARROW_BASE / 2;\r\n\r\n  function renderArrow() {\r\n    if (direction === 'none') return null;\r\n\r\n    // Shared transparent sides\r\n    const transparent = 'transparent';\r\n\r\n    let arrowStyle: object;\r\n\r\n    switch (direction) {\r\n      case 'bottom':\r\n        // Triangle pointing down — sits below bubble\r\n        arrowStyle = {\r\n          width: 0,\r\n          height: 0,\r\n          borderLeftWidth: half,\r\n          borderRightWidth: half,\r\n          borderTopWidth: ARROW_HEIGHT,\r\n          borderLeftColor: transparent,\r\n          borderRightColor: transparent,\r\n          borderTopColor: bg,\r\n        };\r\n        break;\r\n      case 'top':\r\n        // Triangle pointing up — sits above bubble\r\n        arrowStyle = {\r\n          width: 0,\r\n          height: 0,\r\n          borderLeftWidth: half,\r\n          borderRightWidth: half,\r\n          borderBottomWidth: ARROW_HEIGHT,\r\n          borderLeftColor: transparent,\r\n          borderRightColor: transparent,\r\n          borderBottomColor: bg,\r\n        };\r\n        break;\r\n      case 'left':\r\n        // Triangle pointing left — sits to the left of bubble\r\n        arrowStyle = {\r\n          width: 0,\r\n          height: 0,\r\n          borderTopWidth: half,\r\n          borderBottomWidth: half,\r\n          borderRightWidth: ARROW_HEIGHT,\r\n          borderTopColor: transparent,\r\n          borderBottomColor: transparent,\r\n          borderRightColor: bg,\r\n        };\r\n        break;\r\n      case 'right':\r\n        // Triangle pointing right — sits to the right of bubble\r\n        arrowStyle = {\r\n          width: 0,\r\n          height: 0,\r\n          borderTopWidth: half,\r\n          borderBottomWidth: half,\r\n          borderLeftWidth: ARROW_HEIGHT,\r\n          borderTopColor: transparent,\r\n          borderBottomColor: transparent,\r\n          borderLeftColor: bg,\r\n        };\r\n        break;\r\n    }\r\n\r\n    return <View accessible={false} style={arrowStyle!} />;\r\n  }\r\n\r\n  // ── Bubble ────────────────────────────────────────────────────────────────\r\n  const bubble = (\r\n    <View\r\n      accessible\r\n      accessibilityRole=\"text\"\r\n      accessibilityLabel={text}\r\n      style={[\r\n        styles.bubble,\r\n        {\r\n          backgroundColor: bg,\r\n          paddingHorizontal: dim.spacing.padding.sysPadding12,\r\n          paddingVertical: dim.spacing.padding.sysPadding8,\r\n          borderRadius: dim.borderRadius.sysRadiusSm,\r\n        },\r\n        !isFilled && styles.elevated,\r\n        !isFilled && {\r\n          borderWidth: dim.borderWidth.sysStrokeThin,\r\n          borderColor: cr.outline.sysOutline,\r\n        },\r\n      ]}\r\n    >\r\n      <Text\r\n        style={{\r\n          color: textColor,\r\n          fontSize: ts.bodySmall.sysFontSize,\r\n          lineHeight: ts.bodySmall.sysLineHeight,\r\n          fontWeight: '400',\r\n          textAlign: 'center',\r\n          includeFontPadding: false,\r\n        }}\r\n      >\r\n        {text}\r\n      </Text>\r\n    </View>\r\n  );\r\n\r\n  // ── Layout — arrow position determines stacking order ────────────────────\r\n  if (direction === 'none') {\r\n    return <View style={style}>{bubble}</View>;\r\n  }\r\n\r\n  if (direction === 'bottom') {\r\n    return (\r\n      <View style={[styles.colCenter, style]}>\r\n        {bubble}\r\n        {renderArrow()}\r\n      </View>\r\n    );\r\n  }\r\n\r\n  if (direction === 'top') {\r\n    return (\r\n      <View style={[styles.colCenter, style]}>\r\n        {renderArrow()}\r\n        {bubble}\r\n      </View>\r\n    );\r\n  }\r\n\r\n  if (direction === 'right') {\r\n    return (\r\n      <View style={[styles.rowCenter, style]}>\r\n        {bubble}\r\n        {renderArrow()}\r\n      </View>\r\n    );\r\n  }\r\n\r\n  // left\r\n  return (\r\n    <View style={[styles.rowCenter, style]}>\r\n      {renderArrow()}\r\n      {bubble}\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  bubble: {\r\n    alignSelf: 'flex-start',\r\n  },\r\n  elevated: {\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 2 },\r\n    shadowOpacity: 0.06,\r\n    shadowRadius: 4,\r\n    elevation: 1,\r\n  },\r\n  colCenter: {\r\n    alignItems: 'center',\r\n    alignSelf: 'flex-start',\r\n  },\r\n  rowCenter: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    alignSelf: 'flex-start',\r\n  },\r\n});\r\n"],"names":["Tooltip","ARROW_BASE","ARROW_HEIGHT","text","variant","direction","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","isFilled","bg","surface","inverse","sysInverseSurface","surfaceContainer","sysSurfaceContainerLowest","textColor","sysInverseOnSurface","sysOnSurface","half","renderArrow","transparent","arrowStyle","width","height","borderLeftWidth","borderRightWidth","borderTopWidth","borderLeftColor","borderRightColor","borderTopColor","borderBottomWidth","borderBottomColor","View","accessible","bubble","accessibilityRole","accessibilityLabel","styles","backgroundColor","paddingHorizontal","spacing","padding","sysPadding12","paddingVertical","sysPadding8","borderRadius","sysRadiusSm","elevated","borderWidth","sysStrokeThin","borderColor","outline","sysOutline","Text","color","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","fontWeight","textAlign","includeFontPadding","colCenter","rowCenter","StyleSheet","create","alignSelf","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","alignItems","flexDirection"],"mappings":";;;;+BAgCgBA;;;eAAAA;;;;8DAhCE;6BAE2C;uBAEpC;;;;;;AAsBzB,gFAAgF;AAChF,MAAMC,aAAa,IAAI,iBAAiB;AACxC,MAAMC,eAAe,GAAG,mBAAmB;AAIpC,SAASF,QAAQ,EACtBG,IAAI,EACJC,UAAU,QAAQ,EAClBC,YAAY,MAAM,EAClBC,KAAK,EACQ;IACb,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAEC,WAAWC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IAEnE,MAAMC,WAAWV,YAAY;IAE7B,MAAMW,KAAKD,WACPN,GAAGQ,OAAO,CAACC,OAAO,CAACC,iBAAiB,GACpCV,GAAGQ,OAAO,CAACG,gBAAgB,CAACC,yBAAyB;IAEzD,MAAMC,YAAYP,WACdN,GAAGQ,OAAO,CAACC,OAAO,CAACK,mBAAmB,GACtCd,GAAGQ,OAAO,CAACA,OAAO,CAACO,YAAY;IAEnC,6EAA6E;IAC7E,kCAAkC;IAClC,MAAMC,OAAOvB,aAAa;IAE1B,SAASwB;QACP,IAAIpB,cAAc,QAAQ,OAAO;QAEjC,2BAA2B;QAC3B,MAAMqB,cAAc;QAEpB,IAAIC;QAEJ,OAAQtB;YACN,KAAK;gBACH,6CAA6C;gBAC7CsB,aAAa;oBACXC,OAAO;oBACPC,QAAQ;oBACRC,iBAAiBN;oBACjBO,kBAAkBP;oBAClBQ,gBAAgB9B;oBAChB+B,iBAAiBP;oBACjBQ,kBAAkBR;oBAClBS,gBAAgBpB;gBAClB;gBACA;YACF,KAAK;gBACH,2CAA2C;gBAC3CY,aAAa;oBACXC,OAAO;oBACPC,QAAQ;oBACRC,iBAAiBN;oBACjBO,kBAAkBP;oBAClBY,mBAAmBlC;oBACnB+B,iBAAiBP;oBACjBQ,kBAAkBR;oBAClBW,mBAAmBtB;gBACrB;gBACA;YACF,KAAK;gBACH,sDAAsD;gBACtDY,aAAa;oBACXC,OAAO;oBACPC,QAAQ;oBACRG,gBAAgBR;oBAChBY,mBAAmBZ;oBACnBO,kBAAkB7B;oBAClBiC,gBAAgBT;oBAChBW,mBAAmBX;oBACnBQ,kBAAkBnB;gBACpB;gBACA;YACF,KAAK;gBACH,wDAAwD;gBACxDY,aAAa;oBACXC,OAAO;oBACPC,QAAQ;oBACRG,gBAAgBR;oBAChBY,mBAAmBZ;oBACnBM,iBAAiB5B;oBACjBiC,gBAAgBT;oBAChBW,mBAAmBX;oBACnBO,iBAAiBlB;gBACnB;gBACA;QACJ;QAEA,qBAAO,qBAACuB,iBAAI;YAACC,YAAY;YAAOjC,OAAOqB;;IACzC;IAEA,6EAA6E;IAC7E,MAAMa,uBACJ,qBAACF,iBAAI;QACHC,UAAU;QACVE,mBAAkB;QAClBC,oBAAoBvC;QACpBG,OAAO;YACLqC,OAAOH,MAAM;YACb;gBACEI,iBAAiB7B;gBACjB8B,mBAAmBnC,IAAIoC,OAAO,CAACC,OAAO,CAACC,YAAY;gBACnDC,iBAAiBvC,IAAIoC,OAAO,CAACC,OAAO,CAACG,WAAW;gBAChDC,cAAczC,IAAIyC,YAAY,CAACC,WAAW;YAC5C;YACA,CAACtC,YAAY6B,OAAOU,QAAQ;YAC5B,CAACvC,YAAY;gBACXwC,aAAa5C,IAAI4C,WAAW,CAACC,aAAa;gBAC1CC,aAAahD,GAAGiD,OAAO,CAACC,UAAU;YACpC;SACD;kBAED,cAAA,qBAACC,iBAAI;YACHrD,OAAO;gBACLsD,OAAOvC;gBACPwC,UAAUjD,GAAGkD,SAAS,CAACC,WAAW;gBAClCC,YAAYpD,GAAGkD,SAAS,CAACG,aAAa;gBACtCC,YAAY;gBACZC,WAAW;gBACXC,oBAAoB;YACtB;sBAECjE;;;IAKP,4EAA4E;IAC5E,IAAIE,cAAc,QAAQ;QACxB,qBAAO,qBAACiC,iBAAI;YAAChC,OAAOA;sBAAQkC;;IAC9B;IAEA,IAAInC,cAAc,UAAU;QAC1B,qBACE,sBAACiC,iBAAI;YAAChC,OAAO;gBAACqC,OAAO0B,SAAS;gBAAE/D;aAAM;;gBACnCkC;gBACAf;;;IAGP;IAEA,IAAIpB,cAAc,OAAO;QACvB,qBACE,sBAACiC,iBAAI;YAAChC,OAAO;gBAACqC,OAAO0B,SAAS;gBAAE/D;aAAM;;gBACnCmB;gBACAe;;;IAGP;IAEA,IAAInC,cAAc,SAAS;QACzB,qBACE,sBAACiC,iBAAI;YAAChC,OAAO;gBAACqC,OAAO2B,SAAS;gBAAEhE;aAAM;;gBACnCkC;gBACAf;;;IAGP;IAEA,OAAO;IACP,qBACE,sBAACa,iBAAI;QAAChC,OAAO;YAACqC,OAAO2B,SAAS;YAAEhE;SAAM;;YACnCmB;YACAe;;;AAGP;AAEA,MAAMG,SAAS4B,uBAAU,CAACC,MAAM,CAAC;IAC/BhC,QAAQ;QACNiC,WAAW;IACb;IACApB,UAAU;QACRqB,aAAa;QACbC,cAAc;YAAE/C,OAAO;YAAGC,QAAQ;QAAE;QACpC+C,eAAe;QACfC,cAAc;QACdC,WAAW;IACb;IACAT,WAAW;QACTU,YAAY;QACZN,WAAW;IACb;IACAH,WAAW;QACTU,eAAe;QACfD,YAAY;QACZN,WAAW;IACb;AACF"}

package/src/icons/AtomIcon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from './types';
+export declare function AtomIcon({ size, color, }: IconProps): import("react").JSX.Element;

package/src/icons/AtomIcon.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AtomIcon", {
+    enumerable: true,
+    get: function() {
+        return AtomIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reactnativesvg = /*#__PURE__*/ _interop_require_wildcard(require("react-native-svg"));
+const _types = require("./types");
+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 AtomIcon({ size = 'medium', color = _types.DEFAULT_ICON_COLOR }) {
+    const { size: px, strokeWidth } = _types.SIZE_MAP[size];
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnativesvg.default, {
+        width: px,
+        height: px,
+        viewBox: "0 0 48 48",
+        fill: "none",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnativesvg.Path, {
+                d: "M24 26C25.1046 26 26 25.1046 26 24C26 22.8954 25.1046 22 24 22C22.8954 22 22 22.8954 22 24C22 25.1046 22.8954 26 24 26Z",
+                stroke: color,
+                strokeWidth: strokeWidth,
+                ..._types.COMMON
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnativesvg.Path, {
+                d: "M40.4 40.4C44.48 36.34 40.44 25.68 31.4 16.6C22.32 7.56002 11.66 3.52002 7.60002 7.60002C3.52002 11.66 7.56002 22.32 16.6 31.4C25.68 40.44 36.34 44.48 40.4 40.4Z",
+                stroke: color,
+                strokeWidth: strokeWidth,
+                ..._types.COMMON
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnativesvg.Path, {
+                d: "M31.4 31.4C40.44 22.32 44.48 11.66 40.4 7.60002C36.34 3.52002 25.68 7.56002 16.6 16.6C7.56002 25.68 3.52002 36.34 7.60002 40.4C11.66 44.48 22.32 40.44 31.4 31.4Z",
+                stroke: color,
+                strokeWidth: strokeWidth,
+                ..._types.COMMON
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=AtomIcon.js.map

package/src/icons/AtomIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../packages/react-native/src/icons/AtomIcon.tsx"],"sourcesContent":["import Svg, { Path } from 'react-native-svg';\r\n\r\nimport { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';\r\n\r\nexport function AtomIcon({\r\n  size = 'medium',\r\n  color = DEFAULT_ICON_COLOR,\r\n}: IconProps) {\r\n  const { size: px, strokeWidth } = SIZE_MAP[size];\r\n  return (\r\n    <Svg width={px} height={px} viewBox=\"0 0 48 48\" fill=\"none\">\r\n      <Path\r\n        d=\"M24 26C25.1046 26 26 25.1046 26 24C26 22.8954 25.1046 22 24 22C22.8954 22 22 22.8954 22 24C22 25.1046 22.8954 26 24 26Z\"\r\n        stroke={color}\r\n        strokeWidth={strokeWidth}\r\n        {...COMMON}\r\n      />\r\n      <Path\r\n        d=\"M40.4 40.4C44.48 36.34 40.44 25.68 31.4 16.6C22.32 7.56002 11.66 3.52002 7.60002 7.60002C3.52002 11.66 7.56002 22.32 16.6 31.4C25.68 40.44 36.34 44.48 40.4 40.4Z\"\r\n        stroke={color}\r\n        strokeWidth={strokeWidth}\r\n        {...COMMON}\r\n      />\r\n      <Path\r\n        d=\"M31.4 31.4C40.44 22.32 44.48 11.66 40.4 7.60002C36.34 3.52002 25.68 7.56002 16.6 16.6C7.56002 25.68 3.52002 36.34 7.60002 40.4C11.66 44.48 22.32 40.44 31.4 31.4Z\"\r\n        stroke={color}\r\n        strokeWidth={strokeWidth}\r\n        {...COMMON}\r\n      />\r\n    </Svg>\r\n  );\r\n}\r\n"],"names":["AtomIcon","size","color","DEFAULT_ICON_COLOR","px","strokeWidth","SIZE_MAP","Svg","width","height","viewBox","fill","Path","d","stroke","COMMON"],"mappings":";;;;+BAIgBA;;;eAAAA;;;;wEAJU;uBAE2C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE9D,SAASA,SAAS,EACvBC,OAAO,QAAQ,EACfC,QAAQC,yBAAkB,EAChB;IACV,MAAM,EAAEF,MAAMG,EAAE,EAAEC,WAAW,EAAE,GAAGC,eAAQ,CAACL,KAAK;IAChD,qBACE,sBAACM,uBAAG;QAACC,OAAOJ;QAAIK,QAAQL;QAAIM,SAAQ;QAAYC,MAAK;;0BACnD,qBAACC,oBAAI;gBACHC,GAAE;gBACFC,QAAQZ;gBACRG,aAAaA;gBACZ,GAAGU,aAAM;;0BAEZ,qBAACH,oBAAI;gBACHC,GAAE;gBACFC,QAAQZ;gBACRG,aAAaA;gBACZ,GAAGU,aAAM;;0BAEZ,qBAACH,oBAAI;gBACHC,GAAE;gBACFC,QAAQZ;gBACRG,aAAaA;gBACZ,GAAGU,aAAM;;;;AAIlB"}

package/src/icons/BinocularsIcon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from './types';
+export declare function BinocularsIcon({ size, color, }: IconProps): import("react").JSX.Element;