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

package/build/components/CardEquip/CardEquip.js

@@ -0,0 +1,106 @@
+/**
+ * CardEquip — equipment resource card.
+ * Extends the base Card with an image slot, name, info line, scrollable tag row and optional badges.
+ * Supports selected and selectable states as defined in the Figma "Card equip" spec.
+ */
+import React from 'react';
+import { Image, Text, View } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Broadcast, Package } from 'phosphor-react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { Card } from '../Card';
+import { Tag } from '../Tag';
+import { Checkbox } from '../Checkbox';
+import { AssociationTag } from '../AssociationTag';
+import { styles } from './CardEquip.styles';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const toArray = (value) => {
+    if (!value)
+        return [];
+    return Array.isArray(value) ? value : [value];
+};
+/** Build rgba string from a 6-digit hex color */
+const hexToRgba = (hex, alpha) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function CardEquip({ name, image, showImagePlaceholder, tags, model, brand, address, association, badge, selected = false, selectable = false, onPress, disabled = false, width, style, testID, accessibilityLabel, }) {
+    const { colors, fontFamily } = useTheme();
+    const associations = toArray(association);
+    const hasBrandModel = !!(brand || model);
+    const hasTags = !!(tags && tags.length > 0);
+    const showImage = !!(image || showImagePlaceholder);
+    // Selected state overrides border
+    const selectedOverride = selected
+        ? { borderWidth: 2, borderColor: colors.text.primary }
+        : null;
+    return (<Card onPress={onPress} disabled={disabled} testID={testID} width={width} style={[styles.cardOverride, selectedOverride, style]} accessibilityLabel={accessibilityLabel ?? name}>
+      {/* ── Left: image slot ── */}
+      {showImage && (<View style={[styles.imageContainer, { backgroundColor: colors.background.tertiary }]}>
+          {image ? (<Image source={{ uri: image }} style={styles.image} resizeMode="cover"/>) : (<View style={[styles.imagePlaceholder, { backgroundColor: colors.background.tertiary }]}>
+              <View style={styles.packageIconWrapper}>
+                <Package size={40} color={colors.text.secondary} weight="duotone"/>
+              </View>
+            </View>)}
+        </View>)}
+
+      {/* ── Right: content column ── */}
+      <View style={styles.content}>
+
+        {/* Name + beacon tag */}
+        <View style={styles.nameRow}>
+          <Text style={[styles.name, { color: colors.text.primary, fontFamily }]} numberOfLines={1} ellipsizeMode="tail">
+            {name}
+          </Text>
+
+          {associations.length > 0 && (<View style={styles.beaconContainer}>
+              {associations.map((mac, i) => (<AssociationTag key={i} text={mac} iconLeft={<Broadcast size={12} weight="duotone"/>}/>))}
+            </View>)}
+        </View>
+
+        {/* Second line: brand · model  OR  address */}
+        {hasBrandModel && (<View style={styles.infoRow}>
+            {brand && (<Text style={[styles.infoText, { color: colors.text.primary, fontFamily }]}>{brand}</Text>)}
+            {brand && model && (<View style={[styles.dot, { backgroundColor: colors.text.primary }]}/>)}
+            {model && (<Text style={[styles.infoText, { color: colors.text.primary, fontFamily }]}>{model}</Text>)}
+          </View>)}
+        {!hasBrandModel && address && (<Text style={[styles.infoText, { color: colors.text.primary, fontFamily }]}>{address}</Text>)}
+
+        {/* Tags row + doc badge */}
+        {(hasTags || badge) && (<View style={styles.tagsRow}>
+            {hasTags && (<View style={styles.tagsContainer}>
+                {tags.map((tag, i) => {
+                    const t = typeof tag === 'string' ? { label: tag } : tag;
+                    return (<Tag key={i} label={t.label} size="xs" shape="pill" color={t.color} textColor={t.textColor} iconLeft={t.iconLeft}/>);
+                })}
+                {/* Fade overlay — gradient mask from transparent to card bg */}
+                <LinearGradient colors={[hexToRgba(colors.background.primary, 0), hexToRgba(colors.background.primary, 0.8)]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.tagsFade} pointerEvents="none"/>
+              </View>)}
+
+            {hasTags && badge && (<View style={[styles.tagBadgeSeparator, { backgroundColor: colors.border.default }]}/>)}
+
+            {badge && (<View style={[styles.docBadge, {
+                        borderColor: colors.border.window,
+                        backgroundColor: colors.background.primary,
+                        shadowColor: colors.shadow.minimal,
+                    }]}>
+                <Text style={[styles.docBadgeLabel, { color: colors.text.primary, fontFamily }]}>
+                  {badge.label}
+                </Text>
+                {badge.icon}
+              </View>)}
+          </View>)}
+      </View>
+
+      {/* ── Checkbox overlay (selectable mode) ── */}
+      {selectable && (<Checkbox checked={selected} onPress={onPress ?? (() => { })} disabled={disabled} size="m" style={styles.checkboxOverlay}/>)}
+    </Card>);
+}
+//# sourceMappingURL=CardEquip.js.map

package/build/components/CardEquip/CardEquip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardEquip.js","sourceRoot":"","sources":["../../../src/components/CardEquip/CardEquip.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * CardEquip — equipment resource card.\n * Extends the base Card with an image slot, name, info line, scrollable tag row and optional badges.\n * Supports selected and selectable states as defined in the Figma \"Card equip\" spec.\n */\nimport React from 'react';\nimport { Image, Text, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { LinearGradient } from 'expo-linear-gradient';\nimport { Broadcast, Package } from 'phosphor-react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { Card } from '../Card';\nimport { Tag } from '../Tag';\nimport { Checkbox } from '../Checkbox';\nimport { AssociationTag } from '../AssociationTag';\nimport { styles } from './CardEquip.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface CardEquipTag {\n  /** Tag label */\n  label: string;\n  /** Custom background color override */\n  color?: string;\n  /** Custom text and icon color override */\n  textColor?: string;\n  /** Optional left icon node */\n  iconLeft?: React.ReactNode;\n}\n\nexport interface CardEquipProps {\n  /** Equipment name */\n  name: string;\n  /** Image URL displayed on the left */\n  image?: string;\n  /** Show a Package icon placeholder when no image URL is provided */\n  showImagePlaceholder?: boolean;\n  /** Tags displayed as pills in the bottom row — supports label-only strings or full CardEquipTag objects */\n  tags?: (string | CardEquipTag)[];\n  /** Equipment model */\n  model?: string;\n  /** Equipment brand */\n  brand?: string;\n  /** Postal address — shown when brand and model are both absent */\n  address?: string;\n  /** Associated beacon/gateway/tracker — MAC address(es) shown as a green badge top-right */\n  association?: string | string[];\n  /** Badge displayed to the right of the tags row (e.g. annex document count) */\n  badge?: {\n    /** Badge label */\n    label: string;\n    /** Icon element displayed alongside the label */\n    icon: React.ReactNode;\n  };\n  /** Selected state — thicker dark border */\n  selected?: boolean;\n  /** Selectable mode — shows a checkbox overlay */\n  selectable?: boolean;\n  /** Press handler */\n  onPress?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Card width — number (px), string ('100%') or undefined (auto) */\n  width?: number | string;\n  /** Additional container styles */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n  /** Accessibility label for screen readers — only relevant when onPress is provided */\n  accessibilityLabel?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nconst toArray = (value?: string | string[]): string[] => {\n  if (!value) return [];\n  return Array.isArray(value) ? value : [value];\n};\n\n/** Build rgba string from a 6-digit hex color */\nconst hexToRgba = (hex: string, alpha: number): string => {\n  const r = parseInt(hex.slice(1, 3), 16);\n  const g = parseInt(hex.slice(3, 5), 16);\n  const b = parseInt(hex.slice(5, 7), 16);\n  return `rgba(${r},${g},${b},${alpha})`;\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function CardEquip({\n  name,\n  image,\n  showImagePlaceholder,\n  tags,\n  model,\n  brand,\n  address,\n  association,\n  badge,\n  selected = false,\n  selectable = false,\n  onPress,\n  disabled = false,\n  width,\n  style,\n  testID,\n  accessibilityLabel,\n}: CardEquipProps) {\n  const { colors, fontFamily } = useTheme();\n  const associations = toArray(association);\n  const hasBrandModel = !!(brand || model);\n  const hasTags = !!(tags && tags.length > 0);\n  const showImage = !!(image || showImagePlaceholder);\n\n  // Selected state overrides border\n  const selectedOverride: ViewStyle | null = selected\n    ? { borderWidth: 2, borderColor: colors.text.primary }\n    : null;\n\n  return (\n    <Card\n      onPress={onPress}\n      disabled={disabled}\n      testID={testID}\n      width={width}\n      style={[styles.cardOverride, selectedOverride, style]}\n      accessibilityLabel={accessibilityLabel ?? name}\n    >\n      {/* ── Left: image slot ── */}\n      {showImage && (\n        <View style={[styles.imageContainer, { backgroundColor: colors.background.tertiary }]}>\n          {image ? (\n            <Image source={{ uri: image }} style={styles.image} resizeMode=\"cover\" />\n          ) : (\n            <View style={[styles.imagePlaceholder, { backgroundColor: colors.background.tertiary }]}>\n              <View style={styles.packageIconWrapper}>\n                <Package size={40} color={colors.text.secondary} weight=\"duotone\" />\n              </View>\n            </View>\n          )}\n        </View>\n      )}\n\n      {/* ── Right: content column ── */}\n      <View style={styles.content}>\n\n        {/* Name + beacon tag */}\n        <View style={styles.nameRow}>\n          <Text\n            style={[styles.name, { color: colors.text.primary, fontFamily }]}\n            numberOfLines={1}\n            ellipsizeMode=\"tail\"\n          >\n            {name}\n          </Text>\n\n          {associations.length > 0 && (\n            <View style={styles.beaconContainer}>\n              {associations.map((mac, i) => (\n                <AssociationTag\n                  key={i}\n                  text={mac}\n                  iconLeft={<Broadcast size={12} weight=\"duotone\" />}\n                />\n              ))}\n            </View>\n          )}\n        </View>\n\n        {/* Second line: brand · model  OR  address */}\n        {hasBrandModel && (\n          <View style={styles.infoRow}>\n            {brand && (\n              <Text style={[styles.infoText, { color: colors.text.primary, fontFamily }]}>{brand}</Text>\n            )}\n            {brand && model && (\n              <View style={[styles.dot, { backgroundColor: colors.text.primary }]} />\n            )}\n            {model && (\n              <Text style={[styles.infoText, { color: colors.text.primary, fontFamily }]}>{model}</Text>\n            )}\n          </View>\n        )}\n        {!hasBrandModel && address && (\n          <Text style={[styles.infoText, { color: colors.text.primary, fontFamily }]}>{address}</Text>\n        )}\n\n        {/* Tags row + doc badge */}\n        {(hasTags || badge) && (\n          <View style={styles.tagsRow}>\n            {hasTags && (\n              <View style={styles.tagsContainer}>\n                {tags!.map((tag, i) => {\n                  const t = typeof tag === 'string' ? { label: tag } : tag;\n                  return (\n                    <Tag\n                      key={i}\n                      label={t.label}\n                      size=\"xs\"\n                      shape=\"pill\"\n                      color={t.color}\n                      textColor={t.textColor}\n                      iconLeft={t.iconLeft}\n                    />\n                  );\n                })}\n                {/* Fade overlay — gradient mask from transparent to card bg */}\n                <LinearGradient\n                  colors={[hexToRgba(colors.background.primary, 0), hexToRgba(colors.background.primary, 0.8)]}\n                  start={{ x: 0, y: 0 }}\n                  end={{ x: 1, y: 0 }}\n                  style={styles.tagsFade}\n                  pointerEvents=\"none\"\n                />\n              </View>\n            )}\n\n            {hasTags && badge && (\n              <View style={[styles.tagBadgeSeparator, { backgroundColor: colors.border.default }]} />\n            )}\n\n            {badge && (\n              <View style={[styles.docBadge, {\n                borderColor: colors.border.window,\n                backgroundColor: colors.background.primary,\n                shadowColor: colors.shadow.minimal,\n              }]}>\n                <Text style={[styles.docBadgeLabel, { color: colors.text.primary, fontFamily }]}>\n                  {badge.label}\n                </Text>\n                {badge.icon}\n              </View>\n            )}\n          </View>\n        )}\n      </View>\n\n      {/* ── Checkbox overlay (selectable mode) ── */}\n      {selectable && (\n        <Checkbox\n          checked={selected}\n          onPress={onPress ?? (() => {})}\n          disabled={disabled}\n          size=\"m\"\n          style={styles.checkboxOverlay}\n        />\n      )}\n    </Card>\n  );\n}\n"]}

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

@@ -0,0 +1,125 @@
+export declare const styles: {
+    cardOverride: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        padding: number;
+        gap: number;
+    };
+    imageContainer: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        overflow: "hidden";
+        flexShrink: number;
+        alignSelf: "stretch";
+    };
+    image: {
+        width: "100%";
+        height: "100%";
+    };
+    imagePlaceholder: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    packageIconWrapper: {
+        opacity: number;
+    };
+    content: {
+        flex: number;
+        gap: number;
+        minWidth: number;
+    };
+    nameRow: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        gap: number;
+    };
+    name: {
+        flex: number;
+        fontSize: number;
+        fontWeight: "700";
+        fontFamily: string;
+        lineHeight: number;
+        minWidth: number;
+    };
+    beaconContainer: {
+        flexShrink: number;
+        width: number;
+        gap: number;
+    };
+    infoRow: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        flexWrap: "wrap";
+    };
+    infoText: {
+        fontSize: number;
+        fontWeight: "500";
+        fontFamily: string;
+        lineHeight: number;
+    };
+    dot: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        flexShrink: number;
+    };
+    tagsRow: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    tagsContainer: {
+        flex: number;
+        flexDirection: "row";
+        gap: number;
+        overflow: "hidden";
+        alignItems: "center";
+    };
+    tagsFade: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        flexDirection: "row";
+    };
+    tagBadgeSeparator: {
+        width: number;
+        alignSelf: "stretch";
+    };
+    docBadge: {
+        flexShrink: number;
+        flexDirection: "row";
+        alignItems: "center";
+        alignSelf: "stretch";
+        gap: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    docBadgeLabel: {
+        fontSize: number;
+        fontWeight: "600";
+        fontFamily: string;
+        lineHeight: number;
+    };
+    checkboxOverlay: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        right: number;
+    };
+};
+//# sourceMappingURL=CardEquip.styles.d.ts.map

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

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

package/build/components/CardEquip/CardEquip.styles.js

@@ -0,0 +1,139 @@
+/**
+ * Static styles for the CardEquip component.
+ * Dynamic (theme-dependent) colors are applied inline in CardEquip.tsx.
+ */
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    // Overrides for the base Card container
+    cardOverride: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        padding: 10,
+        gap: 10,
+    },
+    // Image slot
+    imageContainer: {
+        width: 64,
+        height: 64,
+        borderRadius: 6,
+        overflow: 'hidden',
+        flexShrink: 0,
+        alignSelf: 'stretch',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    imagePlaceholder: {
+        width: 64,
+        height: 64,
+        borderRadius: 6,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    packageIconWrapper: {
+        opacity: 0.6,
+    },
+    // Content column
+    content: {
+        flex: 1,
+        gap: 4,
+        minWidth: 0,
+    },
+    // Name row
+    nameRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 10,
+    },
+    name: {
+        flex: 1,
+        fontSize: 14,
+        fontWeight: '700',
+        fontFamily: 'Urbanist',
+        lineHeight: 20,
+        minWidth: 0,
+    },
+    // Association tags column (top-right)
+    beaconContainer: {
+        flexShrink: 0,
+        width: 100,
+        gap: 2,
+    },
+    // Info line: brand · model  OR  address
+    infoRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flexWrap: 'wrap',
+    },
+    infoText: {
+        fontSize: 12,
+        fontWeight: '500',
+        fontFamily: 'Urbanist',
+        lineHeight: 16,
+    },
+    dot: {
+        width: 3,
+        height: 3,
+        borderRadius: 9999,
+        flexShrink: 0,
+    },
+    // Tags row
+    tagsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    tagsContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        gap: 4,
+        overflow: 'hidden',
+        alignItems: 'center',
+    },
+    // Gradient fade overlay — right edge of tags container
+    tagsFade: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: 20,
+        flexDirection: 'row',
+    },
+    // Separator between tags and badge
+    tagBadgeSeparator: {
+        width: 1,
+        alignSelf: 'stretch',
+    },
+    // Doc / annex badge (bottom-right)
+    docBadge: {
+        flexShrink: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        gap: 4,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+        borderWidth: 1,
+        // iOS shadow — Below/Minimal: 0 4px 5px 0
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 5,
+        elevation: 1,
+    },
+    docBadgeLabel: {
+        fontSize: 12,
+        fontWeight: '600',
+        fontFamily: 'Urbanist',
+        lineHeight: 16,
+    },
+    // Checkbox overlay (selectable mode) — vertically centered, respects card padding
+    checkboxOverlay: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 10,
+    },
+});
+//# sourceMappingURL=CardEquip.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardEquip.styles.js","sourceRoot":"","sources":["../../../src/components/CardEquip/CardEquip.styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Static styles for the CardEquip component.\n * Dynamic (theme-dependent) colors are applied inline in CardEquip.tsx.\n */\nimport { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  // Overrides for the base Card container\n  cardOverride: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    padding: 10,\n    gap: 10,\n  },\n\n  // Image slot\n  imageContainer: {\n    width: 64,\n    height: 64,\n    borderRadius: 6,\n    overflow: 'hidden',\n    flexShrink: 0,\n    alignSelf: 'stretch',\n  },\n  image: {\n    width: '100%',\n    height: '100%',\n  },\n  imagePlaceholder: {\n    width: 64,\n    height: 64,\n    borderRadius: 6,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  packageIconWrapper: {\n    opacity: 0.6,\n  },\n\n  // Content column\n  content: {\n    flex: 1,\n    gap: 4,\n    minWidth: 0,\n  },\n\n  // Name row\n  nameRow: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    gap: 10,\n  },\n  name: {\n    flex: 1,\n    fontSize: 14,\n    fontWeight: '700',\n    fontFamily: 'Urbanist',\n    lineHeight: 20,\n    minWidth: 0,\n  },\n\n  // Association tags column (top-right)\n  beaconContainer: {\n    flexShrink: 0,\n    width: 100,\n    gap: 2,\n  },\n\n  // Info line: brand · model  OR  address\n  infoRow: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 6,\n    flexWrap: 'wrap',\n  },\n  infoText: {\n    fontSize: 12,\n    fontWeight: '500',\n    fontFamily: 'Urbanist',\n    lineHeight: 16,\n  },\n  dot: {\n    width: 3,\n    height: 3,\n    borderRadius: 9999,\n    flexShrink: 0,\n  },\n\n  // Tags row\n  tagsRow: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 6,\n  },\n  tagsContainer: {\n    flex: 1,\n    flexDirection: 'row',\n    gap: 4,\n    overflow: 'hidden',\n    alignItems: 'center',\n  },\n\n  // Gradient fade overlay — right edge of tags container\n  tagsFade: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    right: 0,\n    width: 20,\n    flexDirection: 'row',\n  },\n\n  // Separator between tags and badge\n  tagBadgeSeparator: {\n    width: 1,\n    alignSelf: 'stretch',\n  },\n\n  // Doc / annex badge (bottom-right)\n  docBadge: {\n    flexShrink: 0,\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    gap: 4,\n    paddingHorizontal: 8,\n    borderRadius: 4,\n    borderWidth: 1,\n    // iOS shadow — Below/Minimal: 0 4px 5px 0\n    shadowOffset: { width: 0, height: 4 },\n    shadowOpacity: 1,\n    shadowRadius: 5,\n    elevation: 1,\n  },\n  docBadgeLabel: {\n    fontSize: 12,\n    fontWeight: '600',\n    fontFamily: 'Urbanist',\n    lineHeight: 16,\n  },\n\n  // Checkbox overlay (selectable mode) — vertically centered, respects card padding\n  checkboxOverlay: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    right: 10,\n  },\n});\n"]}

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

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

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

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

package/build/components/CardEquip/index.js

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

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

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

package/build/components/CardProfile/CardProfile.d.ts

@@ -0,0 +1,55 @@
+/**
+ * CardProfile — stacked card combining a CardEquip (top) and a location pocket (bottom).
+ * The pocket shows a location button (address / vehicle / pin / no-data) and an optional map action button.
+ * The top card overlaps the pocket by 30px to create the layered visual effect.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { CardEquipProps, CardEquipTag } from '../CardEquip';
+/** Determines the icon shown in the location button and whether the map action is available */
+export type CardProfileLocationType = 'address' | 'car' | 'pin' | 'no-data';
+export interface CardProfileProps {
+    /** Equipment name */
+    name: string;
+    /** Tags displayed as pills */
+    tags?: (string | CardEquipTag)[];
+    /** Equipment model */
+    model?: string;
+    /** Equipment brand */
+    brand?: string;
+    /** Postal address — shown on the info line when brand and model are absent */
+    address?: string;
+    /** Associated beacon/gateway/tracker — MAC address(es) */
+    association?: string | string[];
+    /** Badge to the right of the tags row */
+    badge?: CardEquipProps['badge'];
+    /** Selected state — thicker dark border on the top card */
+    selected?: boolean;
+    /** Selectable mode — shows a checkbox overlay on the top card */
+    selectable?: boolean;
+    /** Press handler forwarded to the top card */
+    onPress?: () => void;
+    /** Disabled state — applies to both cards */
+    disabled?: boolean;
+    /** Show the Package icon placeholder when no image URL is provided */
+    showImagePlaceholder?: boolean;
+    /** Icon variant for the location button — drives the left icon */
+    locationType?: CardProfileLocationType;
+    /** Text displayed in the location button */
+    locationLabel?: string;
+    /** Press handler for the location button */
+    onLocationPress?: () => void;
+    /**
+     * Press handler for the dark map action button.
+     * When provided, the button is shown. Automatically hidden for 'no-data'.
+     */
+    onMapPress?: () => void;
+    /** Card width — number (px), string ('100%') or undefined (auto) */
+    width?: number | string;
+    /** Additional styles on the outer container */
+    style?: StyleProp<ViewStyle>;
+    /** Test ID for automated testing */
+    testID?: string;
+}
+export declare function CardProfile({ name, tags, model, brand, address, association, badge, selected, selectable, onPress, disabled, showImagePlaceholder, locationType, locationLabel, onLocationPress, onMapPress, width, style, testID, }: CardProfileProps): React.JSX.Element;
+//# sourceMappingURL=CardProfile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardProfile.d.ts","sourceRoot":"","sources":["../../../src/components/CardProfile/CardProfile.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAOjE,+FAA+F;AAC/F,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAG/B,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,YAAY,CAAC,EAAE,CAAC;IACjC,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,yCAAyC;IACzC,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAI/B,kEAAkE;IAClE,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAIxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,UAAkB,EAClB,OAAO,EACP,QAAgB,EAChB,oBAAoB,EACpB,YAAwB,EACxB,aAAa,EACb,eAAe,EACf,UAAU,EACV,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,qBA6FlB"}

package/build/components/CardProfile/CardProfile.js

@@ -0,0 +1,74 @@
+/**
+ * CardProfile — stacked card combining a CardEquip (top) and a location pocket (bottom).
+ * The pocket shows a location button (address / vehicle / pin / no-data) and an optional map action button.
+ * The top card overlaps the pocket by 30px to create the layered visual effect.
+ */
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { Car, House, MapPin, MapTrifold, WifiSlash } from 'phosphor-react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { CardEquip } from '../CardEquip';
+import { styles } from './CardProfile.styles';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const LOCATION_ICON = {
+    address: (color) => <House size={16} color={color} weight="duotone"/>,
+    car: (color) => <Car size={16} color={color} weight="duotone"/>,
+    pin: (color) => <MapPin size={16} color={color} weight="duotone"/>,
+    'no-data': (color) => <WifiSlash size={16} color={color} weight="duotone"/>,
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function CardProfile({ name, tags, model, brand, address, association, badge, selected = false, selectable = false, onPress, disabled = false, showImagePlaceholder, locationType = 'address', locationLabel, onLocationPress, onMapPress, width, style, testID, }) {
+    const { colors, fontFamily } = useTheme();
+    const showMapButton = !!onMapPress && locationType !== 'no-data';
+    const renderIcon = LOCATION_ICON[locationType];
+    const containerStyle = [
+        styles.container,
+        ...(width !== undefined ? [{ width }] : []),
+        ...(style ? [style] : []),
+    ];
+    return (<View style={containerStyle} testID={testID}>
+      {/* ── Top: CardEquip (z-index 2) ── */}
+      <CardEquip name={name} tags={tags} model={model} brand={brand} address={address} association={association} badge={badge} selected={selected} selectable={selectable} showImagePlaceholder={showImagePlaceholder} onPress={onPress} disabled={disabled} width="100%" style={[styles.topCard, { shadowColor: colors.shadow.minimal }]}/>
+
+      {/* ── Bottom: pocket card (z-index 1) ── */}
+      <View style={[
+            styles.pocket,
+            {
+                borderColor: colors.border.window,
+                backgroundColor: colors.background.secondary,
+                shadowColor: colors.shadow.minimal,
+            },
+        ]}>
+        {/* Location button */}
+        <Pressable onPress={onLocationPress} disabled={!onLocationPress || disabled} style={[
+            styles.locationButton,
+            {
+                backgroundColor: colors.background.primary,
+                borderColor: colors.border.window,
+                opacity: (!onLocationPress || disabled) ? 0.5 : 1,
+            },
+        ]} accessibilityRole="button" accessibilityLabel={locationLabel ?? 'Localisation'} accessibilityState={{ disabled: !onLocationPress || disabled }}>
+          {renderIcon(colors.text.primary)}
+          {locationLabel ? (<Text style={[styles.locationButtonText, { color: colors.text.primary, fontFamily }]} numberOfLines={1} ellipsizeMode="tail">
+              {locationLabel}
+            </Text>) : null}
+        </Pressable>
+
+        {/* Map action button */}
+        {showMapButton && (<Pressable onPress={onMapPress} disabled={disabled} style={[
+                styles.mapButton,
+                {
+                    backgroundColor: colors.text.primary,
+                    opacity: disabled ? 0.5 : 1,
+                },
+            ]} accessibilityRole="button" accessibilityLabel="Ouvrir la carte" accessibilityState={{ disabled }}>
+            <MapTrifold size={16} color={colors.text.onColor} weight="duotone"/>
+          </Pressable>)}
+      </View>
+    </View>);
+}
+//# sourceMappingURL=CardProfile.js.map

package/build/components/CardProfile/CardProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardProfile.js","sourceRoot":"","sources":["../../../src/components/CardProfile/CardProfile.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * CardProfile — stacked card combining a CardEquip (top) and a location pocket (bottom).\n * The pocket shows a location button (address / vehicle / pin / no-data) and an optional map action button.\n * The top card overlaps the pocket by 30px to create the layered visual effect.\n */\nimport React from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Car, House, MapPin, MapTrifold, WifiSlash } from 'phosphor-react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { CardEquip } from '../CardEquip';\nimport type { CardEquipProps, CardEquipTag } from '../CardEquip';\nimport { styles } from './CardProfile.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Determines the icon shown in the location button and whether the map action is available */\nexport type CardProfileLocationType = 'address' | 'car' | 'pin' | 'no-data';\n\nexport interface CardProfileProps {\n  // ── Forwarded to the top CardEquip ──\n\n  /** Equipment name */\n  name: string;\n  /** Tags displayed as pills */\n  tags?: (string | CardEquipTag)[];\n  /** Equipment model */\n  model?: string;\n  /** Equipment brand */\n  brand?: string;\n  /** Postal address — shown on the info line when brand and model are absent */\n  address?: string;\n  /** Associated beacon/gateway/tracker — MAC address(es) */\n  association?: string | string[];\n  /** Badge to the right of the tags row */\n  badge?: CardEquipProps['badge'];\n  /** Selected state — thicker dark border on the top card */\n  selected?: boolean;\n  /** Selectable mode — shows a checkbox overlay on the top card */\n  selectable?: boolean;\n  /** Press handler forwarded to the top card */\n  onPress?: () => void;\n  /** Disabled state — applies to both cards */\n  disabled?: boolean;\n  /** Show the Package icon placeholder when no image URL is provided */\n  showImagePlaceholder?: boolean;\n\n  // ── Bottom pocket ──\n\n  /** Icon variant for the location button — drives the left icon */\n  locationType?: CardProfileLocationType;\n  /** Text displayed in the location button */\n  locationLabel?: string;\n  /** Press handler for the location button */\n  onLocationPress?: () => void;\n  /**\n   * Press handler for the dark map action button.\n   * When provided, the button is shown. Automatically hidden for 'no-data'.\n   */\n  onMapPress?: () => void;\n\n  // ── Container ──\n\n  /** Card width — number (px), string ('100%') or undefined (auto) */\n  width?: number | string;\n  /** Additional styles on the outer container */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nconst LOCATION_ICON: Record<CardProfileLocationType, (color: string) => React.ReactNode> = {\n  address: (color) => <House size={16} color={color} weight=\"duotone\" />,\n  car: (color) => <Car size={16} color={color} weight=\"duotone\" />,\n  pin: (color) => <MapPin size={16} color={color} weight=\"duotone\" />,\n  'no-data': (color) => <WifiSlash size={16} color={color} weight=\"duotone\" />,\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function CardProfile({\n  name,\n  tags,\n  model,\n  brand,\n  address,\n  association,\n  badge,\n  selected = false,\n  selectable = false,\n  onPress,\n  disabled = false,\n  showImagePlaceholder,\n  locationType = 'address',\n  locationLabel,\n  onLocationPress,\n  onMapPress,\n  width,\n  style,\n  testID,\n}: CardProfileProps) {\n  const { colors, fontFamily } = useTheme();\n\n  const showMapButton = !!onMapPress && locationType !== 'no-data';\n  const renderIcon = LOCATION_ICON[locationType];\n\n  const containerStyle: ViewStyle[] = [\n    styles.container,\n    ...(width !== undefined ? [{ width } as ViewStyle] : []),\n    ...(style ? [style as ViewStyle] : []),\n  ];\n\n  return (\n    <View style={containerStyle} testID={testID}>\n      {/* ── Top: CardEquip (z-index 2) ── */}\n      <CardEquip\n        name={name}\n        tags={tags}\n        model={model}\n        brand={brand}\n        address={address}\n        association={association}\n        badge={badge}\n        selected={selected}\n        selectable={selectable}\n        showImagePlaceholder={showImagePlaceholder}\n        onPress={onPress}\n        disabled={disabled}\n        width=\"100%\"\n        style={[styles.topCard, { shadowColor: colors.shadow.minimal }]}\n      />\n\n      {/* ── Bottom: pocket card (z-index 1) ── */}\n      <View\n        style={[\n          styles.pocket,\n          {\n            borderColor: colors.border.window,\n            backgroundColor: colors.background.secondary,\n            shadowColor: colors.shadow.minimal,\n          },\n        ]}\n      >\n        {/* Location button */}\n        <Pressable\n          onPress={onLocationPress}\n          disabled={!onLocationPress || disabled}\n          style={[\n            styles.locationButton,\n            {\n              backgroundColor: colors.background.primary,\n              borderColor: colors.border.window,\n              opacity: (!onLocationPress || disabled) ? 0.5 : 1,\n            },\n          ]}\n          accessibilityRole=\"button\"\n          accessibilityLabel={locationLabel ?? 'Localisation'}\n          accessibilityState={{ disabled: !onLocationPress || disabled }}\n        >\n          {renderIcon(colors.text.primary)}\n          {locationLabel ? (\n            <Text\n              style={[styles.locationButtonText, { color: colors.text.primary, fontFamily }]}\n              numberOfLines={1}\n              ellipsizeMode=\"tail\"\n            >\n              {locationLabel}\n            </Text>\n          ) : null}\n        </Pressable>\n\n        {/* Map action button */}\n        {showMapButton && (\n          <Pressable\n            onPress={onMapPress}\n            disabled={disabled}\n            style={[\n              styles.mapButton,\n              {\n                backgroundColor: colors.text.primary,\n                opacity: disabled ? 0.5 : 1,\n              },\n            ]}\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Ouvrir la carte\"\n            accessibilityState={{ disabled }}\n          >\n            <MapTrifold size={16} color={colors.text.onColor} weight=\"duotone\" />\n          </Pressable>\n        )}\n      </View>\n    </View>\n  );\n}\n"]}