@situaction/traquiste-mobile 1.0.0 → 1.1.0

package/build/components/FilterNav/FilterNav.d.ts

@@ -0,0 +1,53 @@
+/**
+ * FilterNav — horizontal scrollable bar of filter chips.
+ *
+ * Layout (Figma exact):
+ *  - First slot: icon-only chip (FunnelSimple) → opens the global filter sheet
+ *  - Remaining slots: icon+label FilterChips, one per item
+ *
+ * Controlled: `selected` lives on each item in `items`.
+ * The component only fires callbacks — overlays are managed by the parent.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface FilterNavItem {
+    /** Unique identifier — returned by onItemPress */
+    id: string;
+    /** Chip label */
+    label: string;
+    /** Left icon (Phosphor element, rendered at 20 px) */
+    icon?: React.ReactElement;
+    /** Whether this filter is currently active/selected */
+    selected?: boolean;
+    /** Disabled — no interaction */
+    disabled?: boolean;
+}
+export interface FilterNavAction {
+    /** Unique identifier */
+    id: string;
+    /** Icon to display (Phosphor element, rendered at 20 px) */
+    icon: React.ReactElement;
+    /** Called when this action chip is pressed */
+    onPress?: () => void;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+}
+export interface FilterNavProps {
+    /** List of filter chips to render */
+    items: FilterNavItem[];
+    /**
+     * Leading icon-only chips rendered before the filter chips.
+     * When provided, replaces the default single FunnelSimple chip.
+     */
+    actions?: FilterNavAction[];
+    /** Called when the default leading funnel button is pressed (ignored when actions is provided) */
+    onFilterPress?: () => void;
+    /** Called with the item id when any filter chip is pressed */
+    onItemPress?: (id: string) => void;
+    /** Additional style applied to the scroll container */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for automated testing */
+    testID?: string;
+}
+export declare const FilterNav: ({ items, actions, onFilterPress, onItemPress, style, testID, }: FilterNavProps) => React.JSX.Element;
+//# sourceMappingURL=FilterNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterNav.d.ts","sourceRoot":"","sources":["../../../src/components/FilterNav/FilterNav.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzD,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,kGAAkG;IAClG,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,SAAS,GAAI,gEAOvB,cAAc,sBAkEhB,CAAC"}

package/build/components/FilterNav/FilterNav.js

@@ -0,0 +1,39 @@
+/**
+ * FilterNav — horizontal scrollable bar of filter chips.
+ *
+ * Layout (Figma exact):
+ *  - First slot: icon-only chip (FunnelSimple) → opens the global filter sheet
+ *  - Remaining slots: icon+label FilterChips, one per item
+ *
+ * Controlled: `selected` lives on each item in `items`.
+ * The component only fires callbacks — overlays are managed by the parent.
+ */
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { FunnelSimple } from 'phosphor-react-native';
+import { FilterChip } from '../FilterChip';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './FilterNav.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const FilterNav = ({ items, actions, onFilterPress, onItemPress, style, testID, }) => {
+    const { colors } = useTheme();
+    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={[styles.container, style]} testID={testID}>
+      {/* Leading icon-only chips */}
+      {actions
+            ? actions.map((action) => (<FilterChip key={action.id} type="icon" iconLeft={React.cloneElement(action.icon, { size: 20, color: colors.filterChip.default.icon })} onPress={action.onPress} accessibilityLabel={action.accessibilityLabel}/>))
+            : (<FilterChip type="icon" iconLeft={<FunnelSimple size={20} weight="duotone" color={colors.filterChip.default.icon}/>} onPress={onFilterPress} accessibilityLabel="Filtres"/>)}
+
+      {/* Filter chips */}
+      {items.map((item) => (<FilterChip key={item.id} type="icon-text" label={item.label} selected={item.selected} disabled={item.disabled} iconLeft={item.icon
+                ? React.cloneElement(item.icon, {
+                    size: 20,
+                    color: item.selected
+                        ? colors.filterChip.selected.icon
+                        : colors.filterChip.default.icon,
+                })
+                : undefined} onPress={() => onItemPress?.(item.id)}/>))}
+    </ScrollView>);
+};
+//# sourceMappingURL=FilterNav.js.map

package/build/components/FilterNav/FilterNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterNav.js","sourceRoot":"","sources":["../../../src/components/FilterNav/FilterNav.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * FilterNav — horizontal scrollable bar of filter chips.\n *\n * Layout (Figma exact):\n *  - First slot: icon-only chip (FunnelSimple) → opens the global filter sheet\n *  - Remaining slots: icon+label FilterChips, one per item\n *\n * Controlled: `selected` lives on each item in `items`.\n * The component only fires callbacks — overlays are managed by the parent.\n */\nimport React from 'react';\nimport { ScrollView } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { FunnelSimple } from 'phosphor-react-native';\nimport { FilterChip } from '../FilterChip';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './FilterNav.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface FilterNavItem {\n  /** Unique identifier — returned by onItemPress */\n  id: string;\n  /** Chip label */\n  label: string;\n  /** Left icon (Phosphor element, rendered at 20 px) */\n  icon?: React.ReactElement;\n  /** Whether this filter is currently active/selected */\n  selected?: boolean;\n  /** Disabled — no interaction */\n  disabled?: boolean;\n}\n\nexport interface FilterNavAction {\n  /** Unique identifier */\n  id: string;\n  /** Icon to display (Phosphor element, rendered at 20 px) */\n  icon: React.ReactElement;\n  /** Called when this action chip is pressed */\n  onPress?: () => void;\n  /** Accessibility label for screen readers */\n  accessibilityLabel?: string;\n}\n\nexport interface FilterNavProps {\n  /** List of filter chips to render */\n  items: FilterNavItem[];\n  /**\n   * Leading icon-only chips rendered before the filter chips.\n   * When provided, replaces the default single FunnelSimple chip.\n   */\n  actions?: FilterNavAction[];\n  /** Called when the default leading funnel button is pressed (ignored when actions is provided) */\n  onFilterPress?: () => void;\n  /** Called with the item id when any filter chip is pressed */\n  onItemPress?: (id: string) => void;\n  /** Additional style applied to the scroll container */\n  style?: StyleProp<ViewStyle>;\n  /** Test identifier for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const FilterNav = ({\n  items,\n  actions,\n  onFilterPress,\n  onItemPress,\n  style,\n  testID,\n}: FilterNavProps) => {\n  const { colors } = useTheme();\n\n  return (\n    <ScrollView\n      horizontal\n      showsHorizontalScrollIndicator={false}\n      contentContainerStyle={[styles.container, style]}\n      testID={testID}\n    >\n      {/* Leading icon-only chips */}\n      {actions\n        ? actions.map((action) => (\n            <FilterChip\n              key={action.id}\n              type=\"icon\"\n              iconLeft={React.cloneElement(\n                action.icon as React.ReactElement<{ size?: number; color?: string }>,\n                { size: 20, color: colors.filterChip.default.icon },\n              )}\n              onPress={action.onPress}\n              accessibilityLabel={action.accessibilityLabel}\n            />\n          ))\n        : (\n            <FilterChip\n              type=\"icon\"\n              iconLeft={\n                <FunnelSimple\n                  size={20}\n                  weight=\"duotone\"\n                  color={colors.filterChip.default.icon}\n                />\n              }\n              onPress={onFilterPress}\n              accessibilityLabel=\"Filtres\"\n            />\n          )\n      }\n\n      {/* Filter chips */}\n      {items.map((item) => (\n        <FilterChip\n          key={item.id}\n          type=\"icon-text\"\n          label={item.label}\n          selected={item.selected}\n          disabled={item.disabled}\n          iconLeft={\n            item.icon\n              ? React.cloneElement(\n                  item.icon as React.ReactElement<{ size?: number; color?: string }>,\n                  {\n                    size: 20,\n                    color: item.selected\n                      ? colors.filterChip.selected.icon\n                      : colors.filterChip.default.icon,\n                  },\n                )\n              : undefined\n          }\n          onPress={() => onItemPress?.(item.id)}\n        />\n      ))}\n    </ScrollView>\n  );\n};\n\n"]}

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

@@ -0,0 +1,10 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        paddingLeft: number;
+        paddingRight: number;
+    };
+};
+//# sourceMappingURL=FilterNav.styles.d.ts.map

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

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

package/build/components/FilterNav/FilterNav.styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingLeft: 10,
+        paddingRight: 10,
+    },
+});
+//# sourceMappingURL=FilterNav.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterNav.styles.js","sourceRoot":"","sources":["../../../src/components/FilterNav/FilterNav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,UAAU,EAAK,QAAQ;QACvB,GAAG,EAAY,CAAC;QAChB,WAAW,EAAI,EAAE;QACjB,YAAY,EAAG,EAAE;KAClB;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    alignItems:    'center',\n    gap:           6,\n    paddingLeft:   10,\n    paddingRight:  10,\n  },\n});\n"]}

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

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

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

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

package/build/components/FilterNav/index.js

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

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

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

package/build/components/ImgPicker/ImgPicker.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ImgPicker — horizontal image slot row used in the image-mode MediaPicker.
+ *
+ * Layout (Figma "_Img picker"):
+ *  - Principale slot (PhotoCard, fixed left)
+ *  - Vertical divider
+ *  - Additional slots (PhotoCards, horizontal scroll)
+ *
+ * Fully controlled: principale and additionalImages are independent — removing
+ * principale leaves its slot empty (no promotion from additional).
+ */
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface ImgPickerImageItem {
+    /** Unique identifier */
+    id: string;
+    /** Image URI */
+    uri: string;
+}
+export interface ImgPickerProps {
+    /** Controlled principale image. If undefined, the principale slot is shown empty. */
+    principale?: ImgPickerImageItem;
+    /** Controlled additional image slots (scrollable, independent from principale). */
+    additionalImages?: ImgPickerImageItem[];
+    /**
+     * Number of additional empty slots shown on first render.
+     * Default: 2 (matches Figma).
+     */
+    initialAdditionalSlots?: number;
+    /**
+     * Maximum total images allowed (1 principale + additional).
+     * When reached, no more empty slot is appended.
+     * Default: undefined (no limit).
+     */
+    maxImages?: number;
+    /** Called when the user taps the empty principale slot */
+    onAddPrincipale?: () => void;
+    /** Called when the user taps an empty additional slot */
+    onAddAdditional?: () => void;
+    /** Called with the image id when the user taps the X remove button */
+    onRemoveImage?: (id: string) => void;
+    /** Badge label on the principale slot — defaults to "Principale" */
+    principaleLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare const ImgPicker: ({ principale, additionalImages, initialAdditionalSlots, maxImages, onAddPrincipale, onAddAdditional, onRemoveImage, principaleLabel, style, testID, }: ImgPickerProps) => import("react").JSX.Element;
+//# sourceMappingURL=ImgPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImgPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ImgPicker/ImgPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzD,MAAM,WAAW,kBAAkB;IACjC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,cAAc;IAC7B,qFAAqF;IACrF,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACxC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,SAAS,GAAI,uJAWvB,cAAc,gCA6DhB,CAAC"}

package/build/components/ImgPicker/ImgPicker.js

@@ -0,0 +1,49 @@
+/**
+ * ImgPicker — horizontal image slot row used in the image-mode MediaPicker.
+ *
+ * Layout (Figma "_Img picker"):
+ *  - Principale slot (PhotoCard, fixed left)
+ *  - Vertical divider
+ *  - Additional slots (PhotoCards, horizontal scroll)
+ *
+ * Fully controlled: principale and additionalImages are independent — removing
+ * principale leaves its slot empty (no promotion from additional).
+ */
+import { ScrollView, View } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { PhotoCard } from '../PhotoCard';
+import { styles } from './ImgPicker.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const ImgPicker = ({ principale, additionalImages = [], initialAdditionalSlots = 2, maxImages, onAddPrincipale, onAddAdditional, onRemoveImage, principaleLabel = 'Principale', style, testID, }) => {
+    const { colors } = useTheme();
+    const totalCount = (principale ? 1 : 0) + additionalImages.length;
+    // Append 1 empty slot unless we've hit the maxImages cap
+    const canAddMore = maxImages == null || totalCount < maxImages;
+    // Show at least initialAdditionalSlots, grow as additional images are added
+    const additionalCount = Math.max(initialAdditionalSlots, additionalImages.length + (canAddMore ? 1 : 0));
+    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={[styles.row, style]} testID={testID}>
+      {/* Principale slot — independent from additional */}
+      <PhotoCard uri={principale?.uri} principale principaleLabel={principaleLabel} onPress={principale ? undefined : onAddPrincipale} onRemove={principale && onRemoveImage
+            ? () => onRemoveImage(principale.id)
+            : undefined}/>
+
+      {/* Vertical divider */}
+      <View style={styles.dividerWrapper}>
+        <View style={[
+            styles.dividerLine,
+            { backgroundColor: colors.mediaPicker.photoCard.border },
+        ]}/>
+      </View>
+
+      {/* Additional slots */}
+      {Array.from({ length: additionalCount }).map((_, i) => {
+            const img = additionalImages[i];
+            return (<PhotoCard key={img ? img.id : `empty-${i}`} uri={img?.uri} principale={false} onPress={img ? undefined : onAddAdditional} onRemove={img && onRemoveImage
+                    ? () => onRemoveImage(img.id)
+                    : undefined}/>);
+        })}
+    </ScrollView>);
+};
+//# sourceMappingURL=ImgPicker.js.map

package/build/components/ImgPicker/ImgPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImgPicker.js","sourceRoot":"","sources":["../../../src/components/ImgPicker/ImgPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ImgPicker — horizontal image slot row used in the image-mode MediaPicker.\n *\n * Layout (Figma \"_Img picker\"):\n *  - Principale slot (PhotoCard, fixed left)\n *  - Vertical divider\n *  - Additional slots (PhotoCards, horizontal scroll)\n *\n * Fully controlled: principale and additionalImages are independent — removing\n * principale leaves its slot empty (no promotion from additional).\n */\n\nimport { ScrollView, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { PhotoCard } from '../PhotoCard';\nimport { styles } from './ImgPicker.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface ImgPickerImageItem {\n  /** Unique identifier */\n  id: string;\n  /** Image URI */\n  uri: string;\n}\n\nexport interface ImgPickerProps {\n  /** Controlled principale image. If undefined, the principale slot is shown empty. */\n  principale?: ImgPickerImageItem;\n  /** Controlled additional image slots (scrollable, independent from principale). */\n  additionalImages?: ImgPickerImageItem[];\n  /**\n   * Number of additional empty slots shown on first render.\n   * Default: 2 (matches Figma).\n   */\n  initialAdditionalSlots?: number;\n  /**\n   * Maximum total images allowed (1 principale + additional).\n   * When reached, no more empty slot is appended.\n   * Default: undefined (no limit).\n   */\n  maxImages?: number;\n  /** Called when the user taps the empty principale slot */\n  onAddPrincipale?: () => void;\n  /** Called when the user taps an empty additional slot */\n  onAddAdditional?: () => void;\n  /** Called with the image id when the user taps the X remove button */\n  onRemoveImage?: (id: string) => void;\n  /** Badge label on the principale slot — defaults to \"Principale\" */\n  principaleLabel?: string;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const ImgPicker = ({\n  principale,\n  additionalImages = [],\n  initialAdditionalSlots = 2,\n  maxImages,\n  onAddPrincipale,\n  onAddAdditional,\n  onRemoveImage,\n  principaleLabel = 'Principale',\n  style,\n  testID,\n}: ImgPickerProps) => {\n  const { colors } = useTheme();\n\n  const totalCount = (principale ? 1 : 0) + additionalImages.length;\n  // Append 1 empty slot unless we've hit the maxImages cap\n  const canAddMore = maxImages == null || totalCount < maxImages;\n  // Show at least initialAdditionalSlots, grow as additional images are added\n  const additionalCount = Math.max(\n    initialAdditionalSlots,\n    additionalImages.length + (canAddMore ? 1 : 0),\n  );\n\n  return (\n    <ScrollView\n      horizontal\n      showsHorizontalScrollIndicator={false}\n      contentContainerStyle={[styles.row, style]}\n      testID={testID}\n    >\n      {/* Principale slot — independent from additional */}\n      <PhotoCard\n        uri={principale?.uri}\n        principale\n        principaleLabel={principaleLabel}\n        onPress={principale ? undefined : onAddPrincipale}\n        onRemove={\n          principale && onRemoveImage\n            ? () => onRemoveImage(principale.id)\n            : undefined\n        }\n      />\n\n      {/* Vertical divider */}\n      <View style={styles.dividerWrapper}>\n        <View\n          style={[\n            styles.dividerLine,\n            { backgroundColor: colors.mediaPicker.photoCard.border },\n          ]}\n        />\n      </View>\n\n      {/* Additional slots */}\n      {Array.from({ length: additionalCount }).map((_, i) => {\n        const img = additionalImages[i];\n        return (\n          <PhotoCard\n            key={img ? img.id : `empty-${i}`}\n            uri={img?.uri}\n            principale={false}\n            onPress={img ? undefined : onAddAdditional}\n            onRemove={\n              img && onRemoveImage\n                ? () => onRemoveImage(img.id)\n                : undefined\n            }\n          />\n        );\n      })}\n    </ScrollView>\n  );\n};\n\n"]}

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

@@ -0,0 +1,18 @@
+export declare const styles: {
+    row: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        gap: number;
+    };
+    dividerWrapper: {
+        paddingHorizontal: number;
+        alignSelf: "stretch";
+        justifyContent: "center";
+    };
+    dividerLine: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+};
+//# sourceMappingURL=ImgPicker.styles.d.ts.map

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

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

package/build/components/ImgPicker/ImgPicker.styles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 4,
+    },
+    dividerWrapper: {
+        paddingHorizontal: 10,
+        alignSelf: 'stretch',
+        justifyContent: 'center',
+    },
+    dividerLine: {
+        width: 2,
+        height: 140,
+        borderRadius: 9999,
+    },
+});
+//# sourceMappingURL=ImgPicker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImgPicker.styles.js","sourceRoot":"","sources":["../../../src/components/ImgPicker/ImgPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,GAAG,EAAE;QACH,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,YAAY;QACxB,GAAG,EAAE,CAAC;KACP;IACD,cAAc,EAAE;QACd,iBAAiB,EAAE,EAAE;QACrB,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,GAAG;QACX,YAAY,EAAE,IAAI;KACnB;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  row: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    gap: 4,\n  },\n  dividerWrapper: {\n    paddingHorizontal: 10,\n    alignSelf: 'stretch',\n    justifyContent: 'center',\n  },\n  dividerLine: {\n    width: 2,\n    height: 140,\n    borderRadius: 9999,\n  },\n});\n"]}

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

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

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

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

package/build/components/ImgPicker/index.js

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

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

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

package/build/components/InlineInfo/InlineInfo.d.ts

@@ -0,0 +1,60 @@
+/**
+ * InlineInfo — contextual information banner.
+ * Composed on top of Card. Icon and title sit on the same row,
+ * message text is displayed below.
+ * Figma: node 5361:3109 (Default) · 5361:3108 (Error)
+ */
+import React from 'react';
+export type InlineInfoVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+export interface InlineInfoAction {
+    /** Action link label */
+    label: string;
+    /** Called when the action link is pressed */
+    onPress: () => void;
+}
+export interface InlineInfoProps {
+    /** Visual variant — determines the color scheme and default icon */
+    variant?: InlineInfoVariant;
+    /** Title displayed on the same line as the icon */
+    title: string;
+    /** Message text displayed below the title */
+    message: string | React.ReactNode;
+    /**
+     * Icon displayed to the left of the title.
+     * - `undefined` (default) — uses the variant's default Phosphor icon
+     * - `null` — hides the icon
+     * - ReactNode — custom icon
+     */
+    icon?: React.ReactNode | null;
+    /** Optional action link shown below the message */
+    action?: InlineInfoAction;
+    /**
+     * Called when the banner is dismissed — either by the user pressing × or by auto-close.
+     * When provided, shows a dismiss (×) button in the top-right corner.
+     */
+    onDismiss?: () => void;
+    /**
+     * Auto-close delay in milliseconds.
+     * When set, `onDismiss` is called automatically after the given delay.
+     * Requires `onDismiss` to be defined.
+     */
+    autoClose?: number;
+    /**
+     * Controls banner visibility.
+     * When `false` the component renders nothing — combine with `onDismiss`
+     * and `autoClose` for a toast-like behaviour.
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Custom accent color (hex string, e.g. `"#4a6cf7"`).
+     * Overrides the variant's default border, icon and text colors.
+     * A light tint (~10 % opacity) is applied automatically as the background.
+     */
+    color?: string;
+    /** Test ID for automated testing */
+    testID?: string;
+}
+export declare function InlineInfo({ variant, visible, title, message, icon, action, onDismiss, autoClose, color, testID, }: InlineInfoProps): React.JSX.Element | null;
+export default InlineInfo;
+//# sourceMappingURL=InlineInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineInfo.d.ts","sourceRoot":"","sources":["../../../src/components/InlineInfo/InlineInfo.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAErF,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,oEAAoE;IACpE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC9B,mDAAmD;IACnD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwDD,wBAAgB,UAAU,CAAC,EACzB,OAAgB,EAChB,OAAc,EACd,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,eAAe,4BAuFjB;AAED,eAAe,UAAU,CAAC"}

package/build/components/InlineInfo/InlineInfo.js

@@ -0,0 +1,115 @@
+/**
+ * InlineInfo — contextual information banner.
+ * Composed on top of Card. Icon and title sit on the same row,
+ * message text is displayed below.
+ * Figma: node 5361:3109 (Default) · 5361:3108 (Error)
+ */
+import React, { useEffect } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Info, CheckCircle, Warning, WarningCircle, X, } from 'phosphor-react-native';
+import { Card } from '../Card';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './InlineInfo.styles';
+function useVariantStyle(variant) {
+    const { colors } = useTheme();
+    switch (variant) {
+        case 'success':
+            return {
+                background: colors.success.light,
+                borderColor: colors.success.default,
+                textColor: colors.success.dark,
+                iconColor: colors.success.default,
+            };
+        case 'warning':
+            return {
+                background: colors.warning.light,
+                borderColor: colors.warning.default,
+                textColor: colors.warning.dark,
+                iconColor: colors.warning.default,
+            };
+        case 'error':
+            return {
+                background: colors.error.light,
+                borderColor: colors.error.default,
+                textColor: colors.error.default,
+                iconColor: colors.error.default,
+            };
+        // info and neutral both use the warm default card style (Figma "Default")
+        default:
+            return {
+                background: colors.background.secondary,
+                borderColor: colors.border.window,
+                textColor: colors.text.primary,
+                iconColor: colors.text.primary,
+            };
+    }
+}
+function defaultIcon(variant, color) {
+    const props = { size: 18, weight: 'fill', color };
+    switch (variant) {
+        case 'success': return <CheckCircle {...props}/>;
+        case 'warning': return <Warning {...props}/>;
+        case 'error': return <WarningCircle {...props}/>;
+        default: return <Info {...props}/>;
+    }
+}
+export function InlineInfo({ variant = 'info', visible = true, title, message, icon, action, onDismiss, autoClose, color, testID, }) {
+    const { colors } = useTheme();
+    const v = useVariantStyle(variant);
+    // Auto-close: call onDismiss after autoClose ms, only while visible
+    useEffect(() => {
+        if (!visible || autoClose === undefined || onDismiss === undefined)
+            return;
+        const timer = setTimeout(onDismiss, autoClose);
+        return () => clearTimeout(timer);
+    }, [visible, autoClose, onDismiss]);
+    if (!visible)
+        return null;
+    // When a custom color is provided, override accent and compute a light background tint.
+    // React Native accepts 8-char hex (#RRGGBBAA) natively, so appending '1a' ≈ 10 % opacity.
+    const resolvedStyle = color
+        ? {
+            background: color + '1a',
+            borderColor: color,
+            textColor: color,
+            iconColor: color,
+        }
+        : v;
+    const resolvedIcon = icon === null
+        ? null
+        : icon !== undefined
+            ? icon
+            : defaultIcon(variant, resolvedStyle.iconColor);
+    const needsAlert = variant === 'warning' || variant === 'error';
+    return (<Card testID={testID} style={{ backgroundColor: resolvedStyle.background, borderColor: resolvedStyle.borderColor }}>
+      <View style={styles.column} accessibilityRole={needsAlert ? 'alert' : undefined}>
+        {/* Title row: icon + title on the same line */}
+        <View style={styles.dismissWrapper}>
+          <View style={[styles.titleRow, { flex: 1 }]}>
+            {resolvedIcon !== null && resolvedIcon}
+            <Text style={[styles.title, { color: resolvedStyle.textColor }]} numberOfLines={1}>
+              {title}
+            </Text>
+          </View>
+
+          {onDismiss !== undefined && (<TouchableOpacity style={styles.dismissButton} onPress={onDismiss} activeOpacity={0.7} accessibilityLabel="Fermer">
+              <X size={16} color={colors.text.tertiary}/>
+            </TouchableOpacity>)}
+        </View>
+
+        {/* Message */}
+        {typeof message === 'string' ? (<Text style={[styles.message, { color: resolvedStyle.textColor }]}>
+            {message}
+          </Text>) : (message)}
+
+        {/* Optional action */}
+        {action !== undefined && (<TouchableOpacity style={styles.action} onPress={action.onPress} activeOpacity={0.7}>
+            <Text style={[styles.actionText, { color: resolvedStyle.textColor }]}>
+              {action.label}
+            </Text>
+          </TouchableOpacity>)}
+      </View>
+    </Card>);
+}
+export default InlineInfo;
+//# sourceMappingURL=InlineInfo.js.map

package/build/components/InlineInfo/InlineInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineInfo.js","sourceRoot":"","sources":["../../../src/components/InlineInfo/InlineInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * InlineInfo — contextual information banner.\n * Composed on top of Card. Icon and title sit on the same row,\n * message text is displayed below.\n * Figma: node 5361:3109 (Default) · 5361:3108 (Error)\n */\nimport React, { useEffect } from 'react';\nimport { View, Text, TouchableOpacity } from 'react-native';\nimport {\n  Info,\n  CheckCircle,\n  Warning,\n  WarningCircle,\n  X,\n} from 'phosphor-react-native';\nimport { Card } from '../Card';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './InlineInfo.styles';\n\nexport type InlineInfoVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';\n\nexport interface InlineInfoAction {\n  /** Action link label */\n  label: string;\n  /** Called when the action link is pressed */\n  onPress: () => void;\n}\n\nexport interface InlineInfoProps {\n  /** Visual variant — determines the color scheme and default icon */\n  variant?: InlineInfoVariant;\n  /** Title displayed on the same line as the icon */\n  title: string;\n  /** Message text displayed below the title */\n  message: string | React.ReactNode;\n  /**\n   * Icon displayed to the left of the title.\n   * - `undefined` (default) — uses the variant's default Phosphor icon\n   * - `null` — hides the icon\n   * - ReactNode — custom icon\n   */\n  icon?: React.ReactNode | null;\n  /** Optional action link shown below the message */\n  action?: InlineInfoAction;\n  /**\n   * Called when the banner is dismissed — either by the user pressing × or by auto-close.\n   * When provided, shows a dismiss (×) button in the top-right corner.\n   */\n  onDismiss?: () => void;\n  /**\n   * Auto-close delay in milliseconds.\n   * When set, `onDismiss` is called automatically after the given delay.\n   * Requires `onDismiss` to be defined.\n   */\n  autoClose?: number;\n  /**\n   * Controls banner visibility.\n   * When `false` the component renders nothing — combine with `onDismiss`\n   * and `autoClose` for a toast-like behaviour.\n   * @default true\n   */\n  visible?: boolean;\n  /**\n   * Custom accent color (hex string, e.g. `\"#4a6cf7\"`).\n   * Overrides the variant's default border, icon and text colors.\n   * A light tint (~10 % opacity) is applied automatically as the background.\n   */\n  color?: string;\n  /** Test ID for automated testing */\n  testID?: string;\n}\n\n// Per-variant resolved colors\ninterface VariantStyle {\n  background: string;\n  borderColor: string;\n  textColor: string;\n  iconColor: string;\n}\n\nfunction useVariantStyle(variant: InlineInfoVariant): VariantStyle {\n  const { colors } = useTheme();\n\n  switch (variant) {\n    case 'success':\n      return {\n        background:  colors.success.light,\n        borderColor: colors.success.default,\n        textColor:   colors.success.dark,\n        iconColor:   colors.success.default,\n      };\n    case 'warning':\n      return {\n        background:  colors.warning.light,\n        borderColor: colors.warning.default,\n        textColor:   colors.warning.dark,\n        iconColor:   colors.warning.default,\n      };\n    case 'error':\n      return {\n        background:  colors.error.light,\n        borderColor: colors.error.default,\n        textColor:   colors.error.default,\n        iconColor:   colors.error.default,\n      };\n    // info and neutral both use the warm default card style (Figma \"Default\")\n    default:\n      return {\n        background:  colors.background.secondary,\n        borderColor: colors.border.window,\n        textColor:   colors.text.primary,\n        iconColor:   colors.text.primary,\n      };\n  }\n}\n\nfunction defaultIcon(variant: InlineInfoVariant, color: string): React.ReactElement {\n  const props = { size: 18, weight: 'fill' as const, color };\n  switch (variant) {\n    case 'success': return <CheckCircle {...props} />;\n    case 'warning': return <Warning {...props} />;\n    case 'error':   return <WarningCircle {...props} />;\n    default:        return <Info {...props} />;\n  }\n}\n\nexport function InlineInfo({\n  variant = 'info',\n  visible = true,\n  title,\n  message,\n  icon,\n  action,\n  onDismiss,\n  autoClose,\n  color,\n  testID,\n}: InlineInfoProps) {\n  const { colors } = useTheme();\n  const v = useVariantStyle(variant);\n\n  // Auto-close: call onDismiss after autoClose ms, only while visible\n  useEffect(() => {\n    if (!visible || autoClose === undefined || onDismiss === undefined) return;\n    const timer = setTimeout(onDismiss, autoClose);\n    return () => clearTimeout(timer);\n  }, [visible, autoClose, onDismiss]);\n\n  if (!visible) return null;\n\n  // When a custom color is provided, override accent and compute a light background tint.\n  // React Native accepts 8-char hex (#RRGGBBAA) natively, so appending '1a' ≈ 10 % opacity.\n  const resolvedStyle: VariantStyle = color\n    ? {\n        background:  color + '1a',\n        borderColor: color,\n        textColor:   color,\n        iconColor:   color,\n      }\n    : v;\n\n  const resolvedIcon: React.ReactNode | null =\n    icon === null\n      ? null\n      : icon !== undefined\n        ? icon\n        : defaultIcon(variant, resolvedStyle.iconColor);\n\n  const needsAlert = variant === 'warning' || variant === 'error';\n\n  return (\n    <Card\n      testID={testID}\n      style={{ backgroundColor: resolvedStyle.background, borderColor: resolvedStyle.borderColor }}\n    >\n      <View\n        style={styles.column}\n        accessibilityRole={needsAlert ? 'alert' : undefined}\n      >\n        {/* Title row: icon + title on the same line */}\n        <View style={styles.dismissWrapper}>\n          <View style={[styles.titleRow, { flex: 1 }]}>\n            {resolvedIcon !== null && resolvedIcon}\n            <Text style={[styles.title, { color: resolvedStyle.textColor }]} numberOfLines={1}>\n              {title}\n            </Text>\n          </View>\n\n          {onDismiss !== undefined && (\n            <TouchableOpacity\n              style={styles.dismissButton}\n              onPress={onDismiss}\n              activeOpacity={0.7}\n              accessibilityLabel=\"Fermer\"\n            >\n              <X size={16} color={colors.text.tertiary} />\n            </TouchableOpacity>\n          )}\n        </View>\n\n        {/* Message */}\n        {typeof message === 'string' ? (\n          <Text style={[styles.message, { color: resolvedStyle.textColor }]}>\n            {message}\n          </Text>\n        ) : (\n          message\n        )}\n\n        {/* Optional action */}\n        {action !== undefined && (\n          <TouchableOpacity\n            style={styles.action}\n            onPress={action.onPress}\n            activeOpacity={0.7}\n          >\n            <Text style={[styles.actionText, { color: resolvedStyle.textColor }]}>\n              {action.label}\n            </Text>\n          </TouchableOpacity>\n        )}\n      </View>\n    </Card>\n  );\n}\n\nexport default InlineInfo;\n"]}

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

@@ -0,0 +1,42 @@
+export declare const styles: {
+    column: {
+        gap: number;
+    };
+    titleRow: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        minHeight: number;
+    };
+    title: {
+        fontSize: number;
+        fontWeight: "700";
+        lineHeight: number;
+        flex: number;
+    };
+    message: {
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+    };
+    action: {
+        marginTop: number;
+        alignSelf: "flex-start";
+    };
+    actionText: {
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+        textDecorationLine: "underline";
+    };
+    dismissWrapper: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+    };
+    dismissButton: {
+        padding: number;
+        marginLeft: number;
+        flexShrink: number;
+    };
+};
+//# sourceMappingURL=InlineInfo.styles.d.ts.map

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

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