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

package/build/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,17 @@
+/**
+ * ColorPicker — palette of pressable color swatches.
+ * Wraps ColorSwatch items in a flex-wrap row.
+ * Column gap: 32px between swatches, row gap: 8px between lines.
+ */
+import { View } from 'react-native';
+import { ColorSwatch } from '../ColorSwatch/ColorSwatch';
+import { styles } from './ColorPicker.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function ColorPicker({ colors, value, onChange, style, testID, }) {
+    return (<View style={[styles.container, style]} testID={testID}>
+      {colors.map((color) => (<ColorSwatch key={color} color={color} selected={value === color} onPress={() => onChange(color)}/>))}
+    </View>);
+}
+//# sourceMappingURL=ColorPicker.js.map

package/build/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAmB9C,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,MAAM,UAAU,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,GACW;IACjB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACrD;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,CAAC,WAAW,CACV,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAC1B,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAC/B,CACH,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["/**\n * ColorPicker — palette of pressable color swatches.\n * Wraps ColorSwatch items in a flex-wrap row.\n * Column gap: 32px between swatches, row gap: 8px between lines.\n */\n\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { styles } from './ColorPicker.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface ColorPickerProps {\n  /** List of hex color strings to display */\n  colors: string[];\n  /** Currently selected color — controlled */\n  value: string | null;\n  /** Called with the selected color when a swatch is pressed */\n  onChange: (color: string) => void;\n  /** Additional styles on the wrapper */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function ColorPicker({\n  colors,\n  value,\n  onChange,\n  style,\n  testID,\n}: ColorPickerProps) {\n  return (\n    <View style={[styles.container, style]} testID={testID}>\n      {colors.map((color) => (\n        <ColorSwatch\n          key={color}\n          color={color}\n          selected={value === color}\n          onPress={() => onChange(color)}\n        />\n      ))}\n    </View>\n  );\n}\n\n"]}

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

@@ -0,0 +1,10 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        alignContent: "flex-start";
+        columnGap: number;
+        rowGap: number;
+    };
+};
+//# sourceMappingURL=ColorPicker.styles.d.ts.map

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

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

package/build/components/ColorPicker/ColorPicker.styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignContent: 'flex-start',
+        columnGap: 32,
+        rowGap: 8,
+    },
+});
+//# sourceMappingURL=ColorPicker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.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,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,EAAE;QACb,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    alignContent: 'flex-start',\n    columnGap: 32,\n    rowGap: 8,\n  },\n});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/build/components/ColorPicker/index.js

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

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

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

package/build/components/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ColorSwatch — pressable color circle for Color Picker palettes.
+ * 44px touch target with a 38px colored circle.
+ * Selected state adds a ring around the touch target and a check icon.
+ */
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface ColorSwatchProps {
+    /** Hex color string to display (e.g. "#ff4747") */
+    color: string;
+    /** Whether this swatch is currently selected — controlled */
+    selected: boolean;
+    /** Press handler */
+    onPress: () => void;
+    /** Additional styles on the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Test ID for automated testing */
+    testID?: string;
+}
+export declare const ColorSwatch: ({ color, selected, onPress, style, testID, }: ColorSwatchProps) => import("react").JSX.Element;
+//# sourceMappingURL=ColorSwatch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzD,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,WAAW,GAAI,8CAMzB,gBAAgB,gCAmClB,CAAC"}

package/build/components/ColorSwatch/ColorSwatch.js

@@ -0,0 +1,35 @@
+/**
+ * ColorSwatch — pressable color circle for Color Picker palettes.
+ * 44px touch target with a 38px colored circle.
+ * Selected state adds a ring around the touch target and a check icon.
+ */
+import { Pressable, View } from 'react-native';
+import { Check } from 'phosphor-react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './ColorSwatch.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const ColorSwatch = ({ color, selected, onPress, style, testID, }) => {
+    const { colors } = useTheme();
+    const circleSize = 38;
+    return (<Pressable accessibilityRole="radio" accessibilityState={{ selected }} onPress={onPress} style={[
+            styles.touchTarget,
+            selected && { backgroundColor: colors.swatch.selectedRing },
+            style,
+        ]} testID={testID}>
+      <View style={[
+            styles.circle,
+            {
+                width: circleSize,
+                height: circleSize,
+                borderRadius: circleSize / 2,
+                backgroundColor: color,
+            },
+        ]}/>
+      {selected && (<View style={styles.check} pointerEvents="none">
+          <Check size={26} weight="bold" color={colors.swatch.check}/>
+        </View>)}
+    </Pressable>);
+};
+//# sourceMappingURL=ColorSwatch.js.map

package/build/components/ColorSwatch/ColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","sourceRoot":"","sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAmB9C,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,GACW,EAAE,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,EAAE,CAAC;IAEtB,OAAO,CACL,CAAC,SAAS,CACR,iBAAiB,CAAC,OAAO,CACzB,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CACjC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,WAAW;YAClB,QAAQ,IAAI,EAAE,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;YAC3D,KAAK;SACN,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,MAAM;YACb;gBACE,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,UAAU;gBAClB,YAAY,EAAE,UAAU,GAAG,CAAC;gBAC5B,eAAe,EAAE,KAAK;aACvB;SACF,CAAC,EAEJ;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,MAAM,CAC7C;UAAA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5D;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * ColorSwatch — pressable color circle for Color Picker palettes.\n * 44px touch target with a 38px colored circle.\n * Selected state adds a ring around the touch target and a check icon.\n */\n\nimport { Pressable, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Check } from 'phosphor-react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './ColorSwatch.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface ColorSwatchProps {\n  /** Hex color string to display (e.g. \"#ff4747\") */\n  color: string;\n  /** Whether this swatch is currently selected — controlled */\n  selected: boolean;\n  /** Press handler */\n  onPress: () => void;\n  /** Additional styles on the wrapper */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const ColorSwatch = ({\n  color,\n  selected,\n  onPress,\n  style,\n  testID,\n}: ColorSwatchProps) => {\n  const { colors } = useTheme();\n\n  const circleSize = 38;\n\n  return (\n    <Pressable\n      accessibilityRole=\"radio\"\n      accessibilityState={{ selected }}\n      onPress={onPress}\n      style={[\n        styles.touchTarget,\n        selected && { backgroundColor: colors.swatch.selectedRing },\n        style,\n      ]}\n      testID={testID}\n    >\n      <View\n        style={[\n          styles.circle,\n          {\n            width: circleSize,\n            height: circleSize,\n            borderRadius: circleSize / 2,\n            backgroundColor: color,\n          },\n        ]}\n      />\n      {selected && (\n        <View style={styles.check} pointerEvents=\"none\">\n          <Check size={26} weight=\"bold\" color={colors.swatch.check} />\n        </View>\n      )}\n    </Pressable>\n  );\n};\n\n"]}

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

@@ -0,0 +1,16 @@
+export declare const styles: {
+    touchTarget: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    circle: {};
+    check: {
+        position: "absolute";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};
+//# sourceMappingURL=ColorSwatch.styles.d.ts.map

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

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

package/build/components/ColorSwatch/ColorSwatch.styles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    touchTarget: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    circle: {
+    // size + color set inline
+    },
+    check: {
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+//# sourceMappingURL=ColorSwatch.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.styles.js","sourceRoot":"","sources":["../../../src/components/ColorSwatch/ColorSwatch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,WAAW,EAAE;QACX,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,EAAE;QAChB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,MAAM,EAAE;IACN,0BAA0B;KAC3B;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  touchTarget: {\n    width: 44,\n    height: 44,\n    borderRadius: 22,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  circle: {\n    // size + color set inline\n  },\n  check: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSwatch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/build/components/ColorSwatch/index.js

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

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

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

package/build/components/FileCard/FileCard.d.ts

@@ -0,0 +1,29 @@
+/**
+ * FileCard — compact file row used in the file-mode MediaPicker.
+ *
+ * Shows a 50 × 50 icon area (file-type icon or image thumbnail) on the left,
+ * and a filename + detail/caption metadata block on the right.
+ * Supported mime types: video/*, application/pdf, image/* (thumbnail or icon).
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface FileCardProps {
+    /** Display file name (e.g. "vid_120426_kq7a65.mp4") */
+    filename: string;
+    /** First secondary text, shown left of the bullet (e.g. "4.3 Mo") */
+    detail?: string;
+    /** Second secondary text, shown right of the bullet (e.g. "17/04/2026") */
+    caption?: string;
+    /** MIME type — drives the icon choice when no thumbnail is provided */
+    mimeType?: string;
+    /** Image thumbnail URI — fills the icon area if provided */
+    thumbnailUri?: string;
+    /** Called when the user taps the remove button */
+    onRemove?: () => void;
+    /** Additional style applied to the card container */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for automated testing */
+    testID?: string;
+}
+export declare const FileCard: ({ filename, detail, caption, mimeType, thumbnailUri, onRemove, style, testID, }: FileCardProps) => React.JSX.Element;
+//# sourceMappingURL=FileCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileCard.d.ts","sourceRoot":"","sources":["../../../src/components/FileCard/FileCard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzD,MAAM,WAAW,aAAa;IAC5B,uDAAuD;IACvD,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAqBD,eAAO,MAAM,QAAQ,GAAI,iFAStB,aAAa,sBAkEf,CAAC"}

package/build/components/FileCard/FileCard.js

@@ -0,0 +1,66 @@
+/**
+ * FileCard — compact file row used in the file-mode MediaPicker.
+ *
+ * Shows a 50 × 50 icon area (file-type icon or image thumbnail) on the left,
+ * and a filename + detail/caption metadata block on the right.
+ * Supported mime types: video/*, application/pdf, image/* (thumbnail or icon).
+ */
+import React from 'react';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { File, FilePdf, Images, Trash, VideoCamera } from 'phosphor-react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { Card } from '../Card';
+import { styles } from './FileCard.styles';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const getFileIcon = (mimeType, color) => {
+    if (!mimeType)
+        return <File size={38} weight="duotone" color={color}/>;
+    if (mimeType.startsWith('video/'))
+        return <VideoCamera size={38} weight="duotone" color={color}/>;
+    if (mimeType === 'application/pdf')
+        return <FilePdf size={38} weight="duotone" color={color}/>;
+    if (mimeType.startsWith('image/'))
+        return <Images size={38} weight="duotone" color={color}/>;
+    return <File size={38} weight="duotone" color={color}/>;
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const FileCard = ({ filename, detail, caption, mimeType, thumbnailUri, onRemove, style, testID, }) => {
+    const { colors, fontFamily } = useTheme();
+    const fc = colors.mediaPicker.fileCard;
+    const hasMeta = detail != null || caption != null;
+    return (<Card style={[
+            styles.cardOverride,
+            {
+                backgroundColor: fc.background,
+                borderColor: fc.border,
+            },
+            style,
+        ]} testID={testID}>
+      {/* Icon / thumbnail area */}
+      <View style={[styles.iconArea, { backgroundColor: fc.iconBackground }]}>
+        {thumbnailUri ? (<Image source={{ uri: thumbnailUri }} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>) : (getFileIcon(mimeType, fc.icon))}
+      </View>
+
+      {/* Text block */}
+      <View style={styles.textBlock}>
+        <Text style={[styles.filename, { color: fc.text, fontFamily }]} numberOfLines={1}>
+          {filename}
+        </Text>
+        {hasMeta && (<View style={styles.metaRow}>
+            {detail != null && (<Text style={[styles.meta, { color: fc.text, fontFamily }]}>{detail}</Text>)}
+            {detail != null && caption != null && (<View style={[styles.bullet, { backgroundColor: fc.text }]}/>)}
+            {caption != null && (<Text style={[styles.meta, { color: fc.text, fontFamily }]}>{caption}</Text>)}
+          </View>)}
+      </View>
+
+      {/* Remove button */}
+      {onRemove != null && (<Pressable onPress={onRemove} hitSlop={8} testID="file-card-remove" style={({ pressed }) => [styles.removeBtn, pressed && styles.removeBtnPressed]} accessibilityRole="button" accessibilityLabel="Supprimer le fichier">
+          <Trash size={18} weight="duotone" color={fc.text}/>
+        </Pressable>)}
+    </Card>);
+};
+//# sourceMappingURL=FileCard.js.map

package/build/components/FileCard/FileCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../src/components/FileCard/FileCard.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * FileCard — compact file row used in the file-mode MediaPicker.\n *\n * Shows a 50 × 50 icon area (file-type icon or image thumbnail) on the left,\n * and a filename + detail/caption metadata block on the right.\n * Supported mime types: video/*, application/pdf, image/* (thumbnail or icon).\n */\nimport React from 'react';\nimport { Image, Pressable, StyleSheet, Text, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { File, FilePdf, Images, Trash, VideoCamera } from 'phosphor-react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { Card } from '../Card';\nimport { styles } from './FileCard.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface FileCardProps {\n  /** Display file name (e.g. \"vid_120426_kq7a65.mp4\") */\n  filename: string;\n  /** First secondary text, shown left of the bullet (e.g. \"4.3 Mo\") */\n  detail?: string;\n  /** Second secondary text, shown right of the bullet (e.g. \"17/04/2026\") */\n  caption?: string;\n  /** MIME type — drives the icon choice when no thumbnail is provided */\n  mimeType?: string;\n  /** Image thumbnail URI — fills the icon area if provided */\n  thumbnailUri?: string;\n  /** Called when the user taps the remove button */\n  onRemove?: () => void;\n  /** Additional style applied to the card container */\n  style?: StyleProp<ViewStyle>;\n  /** Test identifier for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nconst getFileIcon = (\n  mimeType: string | undefined,\n  color: string,\n): React.ReactElement => {\n  if (!mimeType) return <File size={38} weight=\"duotone\" color={color} />;\n  if (mimeType.startsWith('video/'))    return <VideoCamera size={38} weight=\"duotone\" color={color} />;\n  if (mimeType === 'application/pdf')   return <FilePdf     size={38} weight=\"duotone\" color={color} />;\n  if (mimeType.startsWith('image/'))    return <Images      size={38} weight=\"duotone\" color={color} />;\n  return <File size={38} weight=\"duotone\" color={color} />;\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const FileCard = ({\n  filename,\n  detail,\n  caption,\n  mimeType,\n  thumbnailUri,\n  onRemove,\n  style,\n  testID,\n}: FileCardProps) => {\n  const { colors, fontFamily } = useTheme();\n  const fc = colors.mediaPicker.fileCard;\n\n  const hasMeta = detail != null || caption != null;\n\n  return (\n    <Card\n      style={[\n        styles.cardOverride,\n        {\n          backgroundColor: fc.background,\n          borderColor: fc.border,\n        },\n        style,\n      ]}\n      testID={testID}\n    >\n      {/* Icon / thumbnail area */}\n      <View style={[styles.iconArea, { backgroundColor: fc.iconBackground }]}>\n        {thumbnailUri ? (\n          <Image\n            source={{ uri: thumbnailUri }}\n            style={StyleSheet.absoluteFillObject}\n            resizeMode=\"cover\"\n          />\n        ) : (\n          getFileIcon(mimeType, fc.icon)\n        )}\n      </View>\n\n      {/* Text block */}\n      <View style={styles.textBlock}>\n        <Text style={[styles.filename, { color: fc.text, fontFamily }]} numberOfLines={1}>\n          {filename}\n        </Text>\n        {hasMeta && (\n          <View style={styles.metaRow}>\n            {detail != null && (\n              <Text style={[styles.meta, { color: fc.text, fontFamily }]}>{detail}</Text>\n            )}\n            {detail != null && caption != null && (\n              <View style={[styles.bullet, { backgroundColor: fc.text }]} />\n            )}\n            {caption != null && (\n              <Text style={[styles.meta, { color: fc.text, fontFamily }]}>{caption}</Text>\n            )}\n          </View>\n        )}\n      </View>\n\n      {/* Remove button */}\n      {onRemove != null && (\n        <Pressable\n          onPress={onRemove}\n          hitSlop={8}\n          testID=\"file-card-remove\"\n          style={({ pressed }) => [styles.removeBtn, pressed && styles.removeBtnPressed]}\n          accessibilityRole=\"button\"\n          accessibilityLabel=\"Supprimer le fichier\"\n        >\n          <Trash size={18} weight=\"duotone\" color={fc.text} />\n        </Pressable>\n      )}\n    </Card>\n  );\n};\n\n"]}

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

@@ -0,0 +1,54 @@
+export declare const styles: {
+    cardOverride: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        gap: number;
+        padding: number;
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    iconArea: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        flexShrink: number;
+        overflow: "hidden";
+    };
+    textBlock: {
+        flex: number;
+        alignSelf: "stretch";
+        justifyContent: "space-between";
+        minWidth: number;
+    };
+    filename: {
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+    };
+    metaRow: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    meta: {
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+    };
+    bullet: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    removeBtn: {
+        alignSelf: "center";
+        padding: number;
+        borderRadius: number;
+    };
+    removeBtnPressed: {
+        opacity: number;
+    };
+};
+//# sourceMappingURL=FileCard.styles.d.ts.map

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

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

package/build/components/FileCard/FileCard.styles.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    // Overrides on top of Card base (borderRadius, padding, layout)
+    cardOverride: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 10,
+        padding: 10,
+        borderRadius: 6,
+        overflow: 'hidden',
+    },
+    iconArea: {
+        width: 50,
+        height: 50,
+        borderRadius: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        overflow: 'hidden',
+    },
+    textBlock: {
+        flex: 1,
+        alignSelf: 'stretch',
+        justifyContent: 'space-between',
+        minWidth: 0,
+    },
+    filename: {
+        fontSize: 16,
+        fontWeight: '600',
+        lineHeight: 24,
+    },
+    metaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    meta: {
+        fontSize: 14,
+        fontWeight: '500',
+        lineHeight: 20,
+    },
+    bullet: {
+        width: 3,
+        height: 3,
+        borderRadius: 9999,
+    },
+    removeBtn: {
+        alignSelf: 'center',
+        padding: 4,
+        borderRadius: 6,
+    },
+    removeBtnPressed: {
+        opacity: 0.5,
+    },
+});
+//# sourceMappingURL=FileCard.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileCard.styles.js","sourceRoot":"","sources":["../../../src/components/FileCard/FileCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,gEAAgE;IAChE,YAAY,EAAE;QACZ,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,YAAY;QACxB,GAAG,EAAE,EAAE;QACP,OAAO,EAAE,EAAE;QACX,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ;KACnB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,QAAQ;KACnB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,eAAe;QAC/B,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;KACf;IACD,OAAO,EAAE;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;KACP;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;KACf;IACD,MAAM,EAAE;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,YAAY,EAAE,IAAI;KACnB;IACD,SAAS,EAAE;QACT,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,CAAC;KAChB;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,GAAG;KACb;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  // Overrides on top of Card base (borderRadius, padding, layout)\n  cardOverride: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    gap: 10,\n    padding: 10,\n    borderRadius: 6,\n    overflow: 'hidden',\n  },\n  iconArea: {\n    width: 50,\n    height: 50,\n    borderRadius: 4,\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    overflow: 'hidden',\n  },\n  textBlock: {\n    flex: 1,\n    alignSelf: 'stretch',\n    justifyContent: 'space-between',\n    minWidth: 0,\n  },\n  filename: {\n    fontSize: 16,\n    fontWeight: '600',\n    lineHeight: 24,\n  },\n  metaRow: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 6,\n  },\n  meta: {\n    fontSize: 14,\n    fontWeight: '500',\n    lineHeight: 20,\n  },\n  bullet: {\n    width: 3,\n    height: 3,\n    borderRadius: 9999,\n  },\n  removeBtn: {\n    alignSelf: 'center',\n    padding: 4,\n    borderRadius: 6,\n  },\n  removeBtnPressed: {\n    opacity: 0.5,\n  },\n});\n"]}

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

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

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

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

package/build/components/FileCard/index.js

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

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

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

package/build/components/FilterChip/FilterChip.d.ts

@@ -23,6 +23,10 @@ export interface FilterChipProps {
     onPress?: () => void;
     /** Additional container styles */
     style?: StyleProp<ViewStyle>;
+    /** Accessibility label for screen readers — defaults to label when omitted */
+    accessibilityLabel?: string;
+    /** Test identifier */
+    testID?: string;
 }
-export declare function FilterChip({ type, selected, disabled, label, iconLeft, iconRight, onPress, style, }: FilterChipProps): React.JSX.Element;
+export declare function FilterChip({ type, selected, disabled, label, iconLeft, iconRight, onPress, style, accessibilityLabel, testID, }: FilterChipProps): React.JSX.Element;
 //# sourceMappingURL=FilterChip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../src/components/FilterChip/FilterChip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,mDAAmD;IACnD,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAwBD,wBAAgB,UAAU,CAAC,EACzB,IAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,GACN,EAAE,eAAe,qBA6DjB"}
+{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../src/components/FilterChip/FilterChip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,mDAAmD;IACnD,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,wBAAgB,UAAU,CAAC,EACzB,IAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,kBAAkB,EAClB,MAAM,GACP,EAAE,eAAe,qBAkGjB"}

package/build/components/FilterChip/FilterChip.js

@@ -2,21 +2,33 @@
  * FilterChip component — pill-shaped selection chip for filters.
  * Supports icon-only and icon+text layouts with controlled selection state.
  */
-import React, { useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import React, { useRef, useState } from 'react';
+import { Animated, Pressable, Text, View } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
-const STATE_TOKENS = {
-    default: { background: 'transparent', text: '#28242e', icon: '#28242e', borderColor: '#afafad80', borderWidth: 1 },
-    pressed: { background: '#d1c3a066', text: '#28242e', icon: '#28242e', borderColor: '#afafad80', borderWidth: 1 },
-    selected: { background: 'transparent', text: '#28242e', icon: '#28242e', borderColor: '#28242e', borderWidth: 2 },
-    disabled: { background: '#0f0f0f0d', text: '#0f0f0f99', icon: '#0f0f0f99', borderColor: '#0f0f0f1a', borderWidth: 1 },
+const BORDER_WIDTH = {
+    default: 1,
+    pressed: 1,
+    selected: 2,
+    disabled: 1,
 };
 const ICON_LEFT_SIZE = 20;
 const ICON_RIGHT_SIZE = 16;
 // --- Component ---
-export function FilterChip({ type = 'icon-text', selected = false, disabled = false, label, iconLeft, iconRight, onPress, style, }) {
+export function FilterChip({ type = 'icon-text', selected = false, disabled = false, label, iconLeft, iconRight, onPress, style, accessibilityLabel, testID, }) {
     const [internalPressed, setInternalPressed] = useState(false);
-    useTheme(); // consumed for future theme-aware tokens
+    const pressAnim = useRef(new Animated.Value(0)).current;
+    const { colors, fontFamily } = useTheme();
+    const handlePressIn = () => {
+        setInternalPressed(true);
+        Animated.timing(pressAnim, { toValue: 0.5, duration: 80, useNativeDriver: true }).start();
+    };
+    const handlePressOut = () => {
+        setInternalPressed(false);
+        Animated.timing(pressAnim, { toValue: 0, duration: 180, useNativeDriver: true }).start();
+    };
+    // Background driven by selected/disabled only — press overlay handles the press visual
+    const bgState = disabled ? 'disabled' : selected ? 'selected' : 'default';
+    const bgTokens = colors.filterChip[bgState];
     const resolvedState = disabled
         ? 'disabled'
         : internalPressed
@@ -24,26 +36,42 @@ export function FilterChip({ type = 'icon-text', selected = false, disabled = fa
             : selected
                 ? 'selected'
                 : 'default';
-    const tokens = STATE_TOKENS[resolvedState];
+    const tokens = colors.filterChip[resolvedState];
+    const borderWidth = BORDER_WIDTH[resolvedState];
     const isIconOnly = type === 'icon';
-    const chipStyle = {
-        height: 32,
-        borderRadius: 100,
-        paddingVertical: 6,
-        paddingHorizontal: isIconOnly ? 6 : 12,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: isIconOnly ? 0 : 4,
-        backgroundColor: tokens.background,
-        borderWidth: tokens.borderWidth,
-        borderColor: tokens.borderColor,
-        alignSelf: 'flex-start',
-    };
+    // height: 32 is always fixed so vertical size never changes regardless of borderWidth.
+    // For icon-only: width: 32 too (perfect circle).
+    // For text: paddingHorizontal compensated by (borderWidth - 1) so horizontal size stays constant.
+    const chipStyle = isIconOnly
+        ? {
+            width: 32,
+            height: 32,
+            borderRadius: 100,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: bgTokens.background,
+            borderWidth,
+            borderColor: tokens.borderColor,
+            overflow: 'hidden',
+        }
+        : {
+            height: 32,
+            borderRadius: 100,
+            paddingHorizontal: 12 - (borderWidth - 1),
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            backgroundColor: bgTokens.background,
+            borderWidth,
+            borderColor: tokens.borderColor,
+            alignSelf: 'flex-start',
+            overflow: 'hidden',
+        };
     const textStyle = {
         color: tokens.text,
         fontSize: 14,
         lineHeight: 20,
-        fontFamily: 'Urbanist',
+        fontFamily,
         fontWeight: '500',
     };
     const cloneIcon = (icon, size) => {
@@ -55,8 +83,10 @@ export function FilterChip({ type = 'icon-text', selected = false, disabled = fa
             ...icon.props,
         });
     };
-    return (<Pressable pointerEvents={disabled ? 'none' : 'auto'} onPressIn={() => setInternalPressed(true)} onPressOut={() => setInternalPressed(false)} onPress={disabled ? undefined : onPress} style={[{ paddingVertical: 6 }, style]}>
+    return (<Pressable pointerEvents={disabled ? 'none' : 'auto'} onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={disabled ? undefined : onPress} style={[{ paddingVertical: 6 }, style]} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={{ selected, disabled }} testID={testID}>
       <View style={chipStyle}>
+        {/* Press background overlay — fades in/out via opacity animation */}
+        <Animated.View style={[{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, { backgroundColor: colors.filterChip.pressed.background, opacity: pressAnim }]}/>
         {cloneIcon(iconLeft, ICON_LEFT_SIZE)}
         {!isIconOnly && label != null && <Text style={textStyle}>{label}</Text>}
         {cloneIcon(iconRight, ICON_RIGHT_SIZE)}