@situaction/traquiste-mobile 1.0.0 → 1.2.0

package/build/components/ListItem/ListItem.js

@@ -0,0 +1,69 @@
+/**
+ * ListItem — flexible list row with optional leading/trailing slots.
+ *
+ * Variants:
+ *  - 'default' → interactive row (48px min-height)
+ *  - 'section' → group header label (40px min-height, uppercase)
+ *
+ * States: default, selected (warm background + radius 12), disabled (muted).
+ * Controlled: pass `selected` to mark a row, `onPress` to make it tappable.
+ */
+import React from 'react';
+import { Pressable, Text, View, } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './ListItem.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const ListItem = ({ primaryLabel, label, sublabel, leading, tag, trailing, selected = false, disabled = false, divider = false, variant = 'default', onPress, style, testID, accessibilityLabel, }) => {
+    const { colors, fontFamily } = useTheme();
+    const li = colors.listItem;
+    // -- Section header variant
+    if (variant === 'section') {
+        return (<View style={[styles.itemGap, styles.sectionContainer, style]} testID={testID}>
+        <Text style={[styles.sectionLabel, { color: li.section.label, fontFamily }]}>
+          {label?.toUpperCase() ?? ''}
+        </Text>
+      </View>);
+    }
+    // -- Text colors
+    const labelColor = disabled ? li.disabled.label : li.default.label;
+    const sublabelColor = disabled ? li.disabled.sublabel : li.default.sublabel;
+    // -- Row content (shared between Pressable and plain View)
+    const rowContent = (<View style={styles.row}>
+      {leading != null && (<View style={[styles.slot, disabled && styles.disabledSlot]}>{leading}</View>)}
+      {primaryLabel != null && (<Text style={[styles.labelLarge, { color: labelColor, fontFamily, flex: (label == null && sublabel == null) ? 1 : 0 }]} numberOfLines={1}>
+          {primaryLabel}
+        </Text>)}
+      {(label != null || sublabel != null) && (<View style={styles.textStack}>
+          {label != null && (<Text style={[styles.labelSmall, { color: labelColor, fontFamily }]} numberOfLines={1}>
+              {label}
+            </Text>)}
+          {sublabel != null && (<Text style={[styles.sublabel, { color: sublabelColor, fontFamily }]} numberOfLines={1}>
+              {sublabel}
+            </Text>)}
+        </View>)}
+      {tag != null && (<View style={[styles.tagWrapper, (label == null && sublabel == null && primaryLabel == null) && styles.tagWrapperFlex]}>
+          {tag}
+        </View>)}
+      {trailing != null && (<View style={[styles.slot, disabled && styles.disabledSlot]}>{trailing}</View>)}
+    </View>);
+    const selectedBg = { backgroundColor: li.pressedBackground, borderRadius: 12 };
+    // -- Non-interactive (no onPress or disabled)
+    if (!onPress || disabled) {
+        return (<View style={[styles.itemGap, selected && selectedBg, style]} testID={testID}>
+        {rowContent}
+        {divider && <View style={[styles.divider, { backgroundColor: li.divider }]}/>}
+      </View>);
+    }
+    // -- Interactive
+    return (<Pressable onPress={onPress} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={{ selected, disabled: false }} style={({ pressed }) => [
+            styles.itemGap,
+            (selected || pressed) && selectedBg,
+            style,
+        ]} testID={testID}>
+      {rowContent}
+      {divider && <View style={[styles.divider, { backgroundColor: li.divider }]}/>}
+    </Pressable>);
+};
+//# sourceMappingURL=ListItem.js.map

package/build/components/ListItem/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ListItem — flexible list row with optional leading/trailing slots.\n *\n * Variants:\n *  - 'default' → interactive row (48px min-height)\n *  - 'section' → group header label (40px min-height, uppercase)\n *\n * States: default, selected (warm background + radius 12), disabled (muted).\n * Controlled: pass `selected` to mark a row, `onPress` to make it tappable.\n */\nimport React from 'react';\nimport {\n  Pressable,\n  Text,\n  View,\n} from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './ListItem.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface ListItemProps {\n  /** Primary label — largest text (18 px, 600), rendered above label and sublabel */\n  primaryLabel?: string;\n  /** Main label text — optional when tag is used alone */\n  label?: string;\n  /** Secondary text below label — shrinks label to 14 px when present */\n  sublabel?: string;\n  /** Left slot — Phosphor icon, avatar, or any ReactNode */\n  leading?: React.ReactNode;\n  /** Tag displayed after the label/sublabel — appears at the far left when no leading/label/sublabel */\n  tag?: React.ReactNode;\n  /** Right slot — icon, value text, or any ReactNode */\n  trailing?: React.ReactNode;\n  /** Highlights the row with a warm pressed background and border-radius */\n  selected?: boolean;\n  /** Disables interaction and mutes text + slots */\n  disabled?: boolean;\n  /** Renders a hairline divider below the row */\n  divider?: boolean;\n  /** 'default' = interactive row | 'section' = group header */\n  variant?: 'default' | 'section';\n  /** Called when the row is pressed — omit to render a non-interactive row */\n  onPress?: () => void;\n  /** Additional style applied to the row container */\n  style?: StyleProp<ViewStyle>;\n  /** Test identifier for automated testing */\n  testID?: string;\n  /** Accessibility label for screen readers — defaults to label when omitted */\n  accessibilityLabel?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const ListItem = ({\n  primaryLabel,\n  label,\n  sublabel,\n  leading,\n  tag,\n  trailing,\n  selected = false,\n  disabled = false,\n  divider = false,\n  variant = 'default',\n  onPress,\n  style,\n  testID,\n  accessibilityLabel,\n}: ListItemProps) => {\n  const { colors, fontFamily } = useTheme();\n  const li = colors.listItem;\n\n  // -- Section header variant\n  if (variant === 'section') {\n    return (\n      <View style={[styles.itemGap, styles.sectionContainer, style]} testID={testID}>\n        <Text style={[styles.sectionLabel, { color: li.section.label, fontFamily }]}>\n          {label?.toUpperCase() ?? ''}\n        </Text>\n      </View>\n    );\n  }\n\n  // -- Text colors\n  const labelColor    = disabled ? li.disabled.label    : li.default.label;\n  const sublabelColor = disabled ? li.disabled.sublabel : li.default.sublabel;\n\n  // -- Row content (shared between Pressable and plain View)\n  const rowContent = (\n    <View style={styles.row}>\n      {leading != null && (\n        <View style={[styles.slot, disabled && styles.disabledSlot]}>{leading}</View>\n      )}\n      {primaryLabel != null && (\n        <Text\n          style={[styles.labelLarge, { color: labelColor, fontFamily, flex: (label == null && sublabel == null) ? 1 : 0 }]}\n          numberOfLines={1}\n        >\n          {primaryLabel}\n        </Text>\n      )}\n      {(label != null || sublabel != null) && (\n        <View style={styles.textStack}>\n          {label != null && (\n            <Text style={[styles.labelSmall, { color: labelColor, fontFamily }]} numberOfLines={1}>\n              {label}\n            </Text>\n          )}\n          {sublabel != null && (\n            <Text style={[styles.sublabel, { color: sublabelColor, fontFamily }]} numberOfLines={1}>\n              {sublabel}\n            </Text>\n          )}\n        </View>\n      )}\n      {tag != null && (\n        <View style={[styles.tagWrapper, (label == null && sublabel == null && primaryLabel == null) && styles.tagWrapperFlex]}>\n          {tag}\n        </View>\n      )}\n      {trailing != null && (\n        <View style={[styles.slot, disabled && styles.disabledSlot]}>{trailing}</View>\n      )}\n    </View>\n  );\n\n  const selectedBg = { backgroundColor: li.pressedBackground, borderRadius: 12 };\n\n  // -- Non-interactive (no onPress or disabled)\n  if (!onPress || disabled) {\n    return (\n      <View style={[styles.itemGap, selected && selectedBg, style]} testID={testID}>\n        {rowContent}\n        {divider && <View style={[styles.divider, { backgroundColor: li.divider }]} />}\n      </View>\n    );\n  }\n\n  // -- Interactive\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel ?? label}\n      accessibilityState={{ selected, disabled: false }}\n      style={({ pressed }) => [\n        styles.itemGap,\n        (selected || pressed) && selectedBg,\n        style,\n      ]}\n      testID={testID}\n    >\n      {rowContent}\n      {divider && <View style={[styles.divider, { backgroundColor: li.divider }]} />}\n    </Pressable>\n  );\n};\n\n"]}

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

@@ -0,0 +1,66 @@
+export declare const styles: {
+    itemGap: {
+        marginBottom: number;
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "center";
+        minHeight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        gap: number;
+    };
+    textStack: {
+        flex: number;
+        gap: number;
+    };
+    tagWrapper: {
+        alignSelf: "center";
+    };
+    tagWrapperFlex: {
+        flex: number;
+    };
+    labelLarge: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+    };
+    labelSmall: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+    };
+    sublabel: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: "400";
+        lineHeight: number;
+    };
+    slot: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    disabledSlot: {
+        opacity: number;
+    };
+    divider: {
+        height: number;
+        marginHorizontal: number;
+    };
+    sectionContainer: {
+        minHeight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        justifyContent: "center";
+    };
+    sectionLabel: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+        letterSpacing: number;
+    };
+};
+//# sourceMappingURL=ListItem.styles.d.ts.map

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

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

package/build/components/ListItem/ListItem.styles.js

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    // -- Outer gap between items
+    itemGap: {
+        marginBottom: 4,
+    },
+    // -- Default row (inner layout)
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: 48,
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        gap: 12,
+    },
+    textStack: {
+        flex: 1,
+        gap: 2,
+    },
+    tagWrapper: {
+        alignSelf: 'center',
+    },
+    tagWrapperFlex: {
+        flex: 1,
+    },
+    labelLarge: {
+        fontFamily: 'Urbanist',
+        fontSize: 18,
+        fontWeight: '600',
+        lineHeight: 26,
+    },
+    labelSmall: {
+        fontFamily: 'Urbanist',
+        fontSize: 14,
+        fontWeight: '600',
+        lineHeight: 20,
+    },
+    sublabel: {
+        fontFamily: 'Urbanist',
+        fontSize: 12,
+        fontWeight: '400',
+        lineHeight: 16,
+    },
+    slot: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    disabledSlot: {
+        opacity: 0.4,
+    },
+    divider: {
+        height: StyleSheet.hairlineWidth,
+        marginHorizontal: 12,
+    },
+    // -- Section header
+    sectionContainer: {
+        minHeight: 40,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        justifyContent: 'center',
+    },
+    sectionLabel: {
+        fontFamily: 'Urbanist',
+        fontSize: 12,
+        fontWeight: '600',
+        lineHeight: 16,
+        letterSpacing: 0.8,
+    },
+});
+//# sourceMappingURL=ListItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,6BAA6B;IAC7B,OAAO,EAAE;QACP,YAAY,EAAE,CAAC;KAChB;IAED,gCAAgC;IAChC,GAAG,EAAE;QACH,aAAa,EAAM,KAAK;QACxB,UAAU,EAAS,QAAQ;QAC3B,SAAS,EAAU,EAAE;QACrB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAI,EAAE;QACrB,GAAG,EAAgB,EAAE;KACtB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,GAAG,EAAG,CAAC;KACR;IACD,UAAU,EAAE;QACV,SAAS,EAAE,QAAQ;KACpB;IACD,cAAc,EAAE;QACd,IAAI,EAAE,CAAC;KACR;IACD,UAAU,EAAE;QACV,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAI,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;KACf;IACD,UAAU,EAAE;QACV,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAI,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;KACf;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAI,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;KACf;IACD,IAAI,EAAE;QACJ,UAAU,EAAM,QAAQ;QACxB,cAAc,EAAE,QAAQ;KACzB;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,GAAG;KACb;IACD,OAAO,EAAE;QACP,MAAM,EAAY,UAAU,CAAC,aAAa;QAC1C,gBAAgB,EAAE,EAAE;KACrB;IAED,oBAAoB;IACpB,gBAAgB,EAAE;QAChB,SAAS,EAAU,EAAE;QACrB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAI,CAAC;QACpB,cAAc,EAAK,QAAQ;KAC5B;IACD,YAAY,EAAE;QACZ,UAAU,EAAK,UAAU;QACzB,QAAQ,EAAO,EAAE;QACjB,UAAU,EAAK,KAAK;QACpB,UAAU,EAAK,EAAE;QACjB,aAAa,EAAE,GAAG;KACnB;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  // -- Outer gap between items\n  itemGap: {\n    marginBottom: 4,\n  },\n\n  // -- Default row (inner layout)\n  row: {\n    flexDirection:     'row',\n    alignItems:        'center',\n    minHeight:         48,\n    paddingHorizontal: 12,\n    paddingVertical:   12,\n    gap:               12,\n  },\n  textStack: {\n    flex: 1,\n    gap:  2,\n  },\n  tagWrapper: {\n    alignSelf: 'center',\n  },\n  tagWrapperFlex: {\n    flex: 1,\n  },\n  labelLarge: {\n    fontFamily: 'Urbanist',\n    fontSize:   18,\n    fontWeight: '600',\n    lineHeight: 26,\n  },\n  labelSmall: {\n    fontFamily: 'Urbanist',\n    fontSize:   14,\n    fontWeight: '600',\n    lineHeight: 20,\n  },\n  sublabel: {\n    fontFamily: 'Urbanist',\n    fontSize:   12,\n    fontWeight: '400',\n    lineHeight: 16,\n  },\n  slot: {\n    alignItems:     'center',\n    justifyContent: 'center',\n  },\n  disabledSlot: {\n    opacity: 0.4,\n  },\n  divider: {\n    height:           StyleSheet.hairlineWidth,\n    marginHorizontal: 12,\n  },\n\n  // -- Section header\n  sectionContainer: {\n    minHeight:         40,\n    paddingHorizontal: 12,\n    paddingVertical:   8,\n    justifyContent:    'center',\n  },\n  sectionLabel: {\n    fontFamily:    'Urbanist',\n    fontSize:      12,\n    fontWeight:    '600',\n    lineHeight:    16,\n    letterSpacing: 0.8,\n  },\n});"]}

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

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

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

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

package/build/components/ListItem/index.js

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

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

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

package/build/components/MapPin/MapPin.d.ts

@@ -0,0 +1,61 @@
+/**
+ * MapPin — custom map marker for Google Maps / react-native-maps.
+ *
+ * Two layouts:
+ *  - Simple (no count): circular icon badge + downward pointer tail (24×31px)
+ *  - Pill (count provided): horizontal pill with icon(s) + count + tail
+ *
+ * Fully themeable via mapPin tokens. Icons are injected as props — the
+ * component clones them to override size and color based on the active state.
+ *
+ * Usage: render inside a react-native-maps <Marker> component.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type MapPinState = 'default' | 'focus';
+export type MapPinType = 'default' | 'lost';
+/** Controls the label text style — 'map' for street view (dark text), 'satellite' for aerial view (white text + shadow) */
+export type MapPinLabelVariant = 'map' | 'satellite';
+/**
+ * Total rendered height of a MapPin in points (badge 24 + tail 9).
+ * Use this to anchor the pin tip to a coordinate:
+ *   - react-native-maps: <Marker anchor={{ x: 0.5, y: 1 }}>
+ *   - manual layout:     top: targetY - MAP_PIN_HEIGHT, left: targetX - pinWidth / 2
+ */
+export declare const MAP_PIN_HEIGHT = 33;
+/** Width of a simple (non-pill) MapPin. Pill width is variable — measure at runtime. */
+export declare const MAP_PIN_SIMPLE_WIDTH = 24;
+export interface MapPinProps {
+    /** Primary icon (Phosphor). Size and color are injected automatically. */
+    icon: React.ReactElement;
+    /** Pin visual state — 'focus' inverts the badge colors */
+    state?: MapPinState;
+    /**
+     * Pin type — 'lost' uses red accent colors (maintenance / signal lost).
+     * Defaults to 'default'.
+     */
+    type?: MapPinType;
+    /**
+     * When provided, switches to pill mode and shows this number.
+     * Typically the count of clustered assets.
+     */
+    count?: number;
+    /** Second icon shown in pill mode (e.g. vehicle type). Optional. */
+    secondIcon?: React.ReactElement;
+    /** Optional text label displayed to the LEFT of the pin (right-aligned). */
+    labelLeft?: string;
+    /** Optional text label displayed to the RIGHT of the pin (left-aligned). */
+    label?: string;
+    /**
+     * Style variant for the label text (applies to both labelLeft and label).
+     * 'map' (default) = dark text for street map backgrounds.
+     * 'satellite' = white text + shadow for aerial/satellite map backgrounds.
+     */
+    labelVariant?: MapPinLabelVariant;
+    /** Additional style applied to the outermost container */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for automated testing */
+    testID?: string;
+}
+export declare const MapPin: ({ icon, state, type, count, secondIcon, labelLeft, label, labelVariant, style, testID, }: MapPinProps) => React.JSX.Element;
+//# sourceMappingURL=MapPin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapPin.d.ts","sourceRoot":"","sources":["../../../src/components/MapPin/MapPin.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAC5C,2HAA2H;AAC3H,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,WAAW,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,0EAA0E;IAC1E,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoDD,eAAO,MAAM,MAAM,GAAI,0FAWpB,WAAW,sBA6Eb,CAAC"}

package/build/components/MapPin/MapPin.js

@@ -0,0 +1,118 @@
+/**
+ * MapPin — custom map marker for Google Maps / react-native-maps.
+ *
+ * Two layouts:
+ *  - Simple (no count): circular icon badge + downward pointer tail (24×31px)
+ *  - Pill (count provided): horizontal pill with icon(s) + count + tail
+ *
+ * Fully themeable via mapPin tokens. Icons are injected as props — the
+ * component clones them to override size and color based on the active state.
+ *
+ * Usage: render inside a react-native-maps <Marker> component.
+ */
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './MapPin.styles';
+/**
+ * Total rendered height of a MapPin in points (badge 24 + tail 9).
+ * Use this to anchor the pin tip to a coordinate:
+ *   - react-native-maps: <Marker anchor={{ x: 0.5, y: 1 }}>
+ *   - manual layout:     top: targetY - MAP_PIN_HEIGHT, left: targetX - pinWidth / 2
+ */
+export const MAP_PIN_HEIGHT = 33;
+/** Width of a simple (non-pill) MapPin. Pill width is variable — measure at runtime. */
+export const MAP_PIN_SIMPLE_WIDTH = 24;
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const ICON_SIZE = 12;
+const cloneIcon = (el, color) => React.cloneElement(el, {
+    size: ICON_SIZE,
+    color,
+    weight: 'fill',
+});
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+/**
+ * Downward-pointing triangle tail with a border on all three sides.
+ *
+ * Three layers:
+ *  1. tailBorderTop — 1px × TAIL_WIDTH colored with borderColor → horizontal top edge
+ *  2. tailClip     — overflow:hidden container (TAIL_WIDTH × TAIL_HEIGHT)
+ *  3. tailSquare   — TAIL_SQUARE_SIZE square rotated 45°, centered at y=0 of the clip
+ *                    so overflow:hidden reveals only the bottom triangle.
+ *
+ * TAIL_SQUARE_SIZE = 8.5 = TAIL_WIDTH / √2: the diamond's widest point ≈ 12px = TAIL_WIDTH,
+ * so the diamond's left/right corners land flush at x=0 / x=12 at y=0, connecting
+ * seamlessly with the ends of the horizontal top-border line.
+ */
+const Tail = ({ borderColor, backgroundColor }) => (<View style={styles.tailOuter}>
+    <View style={[styles.tailBorderTop, { backgroundColor: borderColor }]}/>
+    <View style={styles.tailClip}>
+      <View style={[styles.tailSquare, { backgroundColor, borderColor }]}/>
+    </View>
+  </View>);
+/** Circular icon container */
+const IconCircle = ({ children, color }) => (<View style={[styles.iconCircle, { backgroundColor: color }]}>
+    {children}
+  </View>);
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const MapPin = ({ icon, state = 'default', type = 'default', count, secondIcon, labelLeft, label, labelVariant = 'map', style, testID, }) => {
+    const { colors, fontFamily } = useTheme();
+    // Resolve the right token set from state + type
+    let tokens;
+    if (type === 'lost') {
+        tokens = state === 'focus' ? colors.mapPin.lostFocus : colors.mapPin.lostDefault;
+    }
+    else {
+        tokens = state === 'focus' ? colors.mapPin.focus : colors.mapPin.default;
+    }
+    const { background, simpleBackground, border, iconCircle, iconColor, countText } = tokens;
+    const isPill = count !== undefined;
+    const styledIcon = cloneIcon(icon, iconColor);
+    const styledSecondIcon = secondIcon ? cloneIcon(secondIcon, iconColor) : null;
+    const pinColumn = isPill ? (<View style={styles.pillRoot}>
+      <View style={[
+            styles.pillBadge,
+            { backgroundColor: background, borderColor: border },
+            state === 'focus' && { ...styles.pillShadow, shadowColor: colors.mapPin.pillShadowColor },
+        ]}>
+        <IconCircle color={iconCircle}>{styledIcon}</IconCircle>
+        {styledSecondIcon && (<IconCircle color={iconCircle}>{styledSecondIcon}</IconCircle>)}
+        <Text style={[styles.countText, { color: countText, fontFamily }]}>
+          {count}
+        </Text>
+      </View>
+      <Tail borderColor={border} backgroundColor={background}/>
+    </View>) : (<View style={styles.simpleRoot}>
+      <View style={[
+            styles.simpleBadge,
+            { backgroundColor: simpleBackground, borderColor: border },
+        ]}>
+        <IconCircle color={iconCircle}>{styledIcon}</IconCircle>
+      </View>
+      <Tail borderColor={border} backgroundColor={simpleBackground}/>
+    </View>);
+    if (label == null && labelLeft == null) {
+        return (<View style={style} testID={testID}>
+        {pinColumn}
+      </View>);
+    }
+    const isSatellite = labelVariant === 'satellite';
+    const labelColor = isSatellite ? colors.mapPin.label.satellite : colors.mapPin.label.map;
+    const labelStyle = [
+        styles.labelText,
+        isSatellite ? styles.labelTextSatellite : null,
+        { color: labelColor, fontFamily },
+    ];
+    return (<View style={[styles.row, style]} testID={testID}>
+      {labelLeft != null && (<Text style={[...labelStyle, styles.labelTextRight]}>{labelLeft}</Text>)}
+      {pinColumn}
+      {label != null && (<Text style={labelStyle}>{label}</Text>)}
+    </View>);
+};
+//# sourceMappingURL=MapPin.js.map

package/build/components/MapPin/MapPin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapPin.js","sourceRoot":"","sources":["../../../src/components/MapPin/MapPin.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * MapPin — custom map marker for Google Maps / react-native-maps.\n *\n * Two layouts:\n *  - Simple (no count): circular icon badge + downward pointer tail (24×31px)\n *  - Pill (count provided): horizontal pill with icon(s) + count + tail\n *\n * Fully themeable via mapPin tokens. Icons are injected as props — the\n * component clones them to override size and color based on the active state.\n *\n * Usage: render inside a react-native-maps <Marker> component.\n */\nimport React from 'react';\nimport { Text, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport type { MapPinStateTokens } from '../../theme/type';\nimport { styles } from './MapPin.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type MapPinState = 'default' | 'focus';\nexport type MapPinType = 'default' | 'lost';\n/** Controls the label text style — 'map' for street view (dark text), 'satellite' for aerial view (white text + shadow) */\nexport type MapPinLabelVariant = 'map' | 'satellite';\n\n/**\n * Total rendered height of a MapPin in points (badge 24 + tail 9).\n * Use this to anchor the pin tip to a coordinate:\n *   - react-native-maps: <Marker anchor={{ x: 0.5, y: 1 }}>\n *   - manual layout:     top: targetY - MAP_PIN_HEIGHT, left: targetX - pinWidth / 2\n */\nexport const MAP_PIN_HEIGHT = 33;\n/** Width of a simple (non-pill) MapPin. Pill width is variable — measure at runtime. */\nexport const MAP_PIN_SIMPLE_WIDTH = 24;\n\nexport interface MapPinProps {\n  /** Primary icon (Phosphor). Size and color are injected automatically. */\n  icon: React.ReactElement;\n  /** Pin visual state — 'focus' inverts the badge colors */\n  state?: MapPinState;\n  /**\n   * Pin type — 'lost' uses red accent colors (maintenance / signal lost).\n   * Defaults to 'default'.\n   */\n  type?: MapPinType;\n  /**\n   * When provided, switches to pill mode and shows this number.\n   * Typically the count of clustered assets.\n   */\n  count?: number;\n  /** Second icon shown in pill mode (e.g. vehicle type). Optional. */\n  secondIcon?: React.ReactElement;\n  /** Optional text label displayed to the LEFT of the pin (right-aligned). */\n  labelLeft?: string;\n  /** Optional text label displayed to the RIGHT of the pin (left-aligned). */\n  label?: string;\n  /**\n   * Style variant for the label text (applies to both labelLeft and label).\n   * 'map' (default) = dark text for street map backgrounds.\n   * 'satellite' = white text + shadow for aerial/satellite map backgrounds.\n   */\n  labelVariant?: MapPinLabelVariant;\n  /** Additional style applied to the outermost container */\n  style?: StyleProp<ViewStyle>;\n  /** Test identifier for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nconst ICON_SIZE = 12;\n\nconst cloneIcon = (el: React.ReactElement, color: string) =>\n  React.cloneElement(el as React.ReactElement<{ size?: number; color?: string; weight?: string }>, {\n    size: ICON_SIZE,\n    color,\n    weight: 'fill',\n  });\n\n// ---------------------------------------------------------------------------\n// Sub-components\n// ---------------------------------------------------------------------------\n\n/**\n * Downward-pointing triangle tail with a border on all three sides.\n *\n * Three layers:\n *  1. tailBorderTop — 1px × TAIL_WIDTH colored with borderColor → horizontal top edge\n *  2. tailClip     — overflow:hidden container (TAIL_WIDTH × TAIL_HEIGHT)\n *  3. tailSquare   — TAIL_SQUARE_SIZE square rotated 45°, centered at y=0 of the clip\n *                    so overflow:hidden reveals only the bottom triangle.\n *\n * TAIL_SQUARE_SIZE = 8.5 = TAIL_WIDTH / √2: the diamond's widest point ≈ 12px = TAIL_WIDTH,\n * so the diamond's left/right corners land flush at x=0 / x=12 at y=0, connecting\n * seamlessly with the ends of the horizontal top-border line.\n */\nconst Tail = ({ borderColor, backgroundColor }: { borderColor: string; backgroundColor: string }) => (\n  <View style={styles.tailOuter}>\n    <View style={[styles.tailBorderTop, { backgroundColor: borderColor }]} />\n    <View style={styles.tailClip}>\n      <View style={[styles.tailSquare, { backgroundColor, borderColor }]} />\n    </View>\n  </View>\n);\n\n/** Circular icon container */\nconst IconCircle = ({ children, color }: { children: React.ReactNode; color: string }) => (\n  <View style={[styles.iconCircle, { backgroundColor: color }]}>\n    {children}\n  </View>\n);\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const MapPin = ({\n  icon,\n  state = 'default',\n  type = 'default',\n  count,\n  secondIcon,\n  labelLeft,\n  label,\n  labelVariant = 'map',\n  style,\n  testID,\n}: MapPinProps) => {\n  const { colors, fontFamily } = useTheme();\n\n  // Resolve the right token set from state + type\n  let tokens: MapPinStateTokens;\n  if (type === 'lost') {\n    tokens = state === 'focus' ? colors.mapPin.lostFocus : colors.mapPin.lostDefault;\n  } else {\n    tokens = state === 'focus' ? colors.mapPin.focus : colors.mapPin.default;\n  }\n\n  const { background, simpleBackground, border, iconCircle, iconColor, countText } = tokens;\n  const isPill = count !== undefined;\n\n  const styledIcon = cloneIcon(icon, iconColor);\n  const styledSecondIcon = secondIcon ? cloneIcon(secondIcon, iconColor) : null;\n\n  const pinColumn = isPill ? (\n    <View style={styles.pillRoot}>\n      <View\n        style={[\n          styles.pillBadge,\n          { backgroundColor: background, borderColor: border },\n          state === 'focus' && { ...styles.pillShadow, shadowColor: colors.mapPin.pillShadowColor },\n        ]}\n      >\n        <IconCircle color={iconCircle}>{styledIcon}</IconCircle>\n        {styledSecondIcon && (\n          <IconCircle color={iconCircle}>{styledSecondIcon}</IconCircle>\n        )}\n        <Text style={[styles.countText, { color: countText, fontFamily }]}>\n          {count}\n        </Text>\n      </View>\n      <Tail borderColor={border} backgroundColor={background} />\n    </View>\n  ) : (\n    <View style={styles.simpleRoot}>\n      <View\n        style={[\n          styles.simpleBadge,\n          { backgroundColor: simpleBackground, borderColor: border },\n        ]}\n      >\n        <IconCircle color={iconCircle}>{styledIcon}</IconCircle>\n      </View>\n      <Tail borderColor={border} backgroundColor={simpleBackground} />\n    </View>\n  );\n\n  if (label == null && labelLeft == null) {\n    return (\n      <View style={style} testID={testID}>\n        {pinColumn}\n      </View>\n    );\n  }\n\n  const isSatellite = labelVariant === 'satellite';\n  const labelColor = isSatellite ? colors.mapPin.label.satellite : colors.mapPin.label.map;\n  const labelStyle = [\n    styles.labelText,\n    isSatellite ? styles.labelTextSatellite : null,\n    { color: labelColor, fontFamily },\n  ];\n\n  return (\n    <View style={[styles.row, style]} testID={testID}>\n      {labelLeft != null && (\n        <Text style={[...labelStyle, styles.labelTextRight]}>{labelLeft}</Text>\n      )}\n      {pinColumn}\n      {label != null && (\n        <Text style={labelStyle}>{label}</Text>\n      )}\n    </View>\n  );\n};\n\n"]}

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

@@ -0,0 +1,93 @@
+export declare const styles: {
+    simpleRoot: {
+        alignItems: "center";
+        width: number;
+    };
+    simpleBadge: {
+        alignItems: "center";
+        justifyContent: "center";
+        padding: number;
+        borderRadius: number;
+        borderWidth: number;
+    };
+    pillRoot: {
+        alignItems: "center";
+    };
+    pillBadge: {
+        flexDirection: "row";
+        alignItems: "center";
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        paddingVertical: number;
+        gap: number;
+        borderRadius: number;
+        borderWidth: number;
+    };
+    pillShadow: {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        shadowOpacity: number;
+        elevation: number;
+    };
+    iconCircle: {
+        alignItems: "center";
+        justifyContent: "center";
+        padding: number;
+        borderRadius: number;
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        gap: number;
+    };
+    labelText: {
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+        paddingTop: number;
+    };
+    labelTextRight: {
+        textAlign: "right";
+    };
+    labelTextSatellite: {
+        textShadowColor: string;
+        textShadowOffset: {
+            width: number;
+            height: number;
+        };
+        textShadowRadius: number;
+    };
+    countText: {
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+    };
+    tailOuter: {
+        alignItems: "center";
+        marginTop: number;
+    };
+    tailBorderTop: {
+        width: number;
+        height: number;
+    };
+    tailClip: {
+        width: number;
+        height: number;
+        overflow: "hidden";
+        alignItems: "center";
+    };
+    tailSquare: {
+        width: number;
+        height: number;
+        borderWidth: number;
+        marginTop: number;
+        transform: {
+            rotate: string;
+        }[];
+    };
+};
+//# sourceMappingURL=MapPin.styles.d.ts.map

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

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