@ds-autonomie/react-native 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ds-autonomie/react-native
 
+## 0.3.0
+
+### Minor Changes
+
+- 76ac0b5: `ListItem`: implémentation du composant ListItem
+- 2e76d7e: `divider`: Implémentation du composant divider
+- 8273161: `listTitle`: Implémentation du ListTitle
+  `listCaption`: Implémentation du ListCaption
+
+### Patch Changes
+
+- f98a445: docs: repasse documentaire
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/chunks/chunk.3QXPJAHY.js

@@ -0,0 +1,22 @@
+import {
+  fonts
+} from "./chunk.4SSEOHVB.js";
+
+// src/components/listTitle/ListTitle.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var listTitleStyles = StyleSheet.create({
+  container: {
+    paddingHorizontal: theme.primitives.spacing[16],
+    paddingTop: theme.primitives.spacing[8],
+    paddingBottom: theme.primitives.spacing[12]
+  },
+  text: {
+    ...fonts.titleSmall,
+    paddingHorizontal: theme.primitives.spacing[16]
+  }
+});
+
+export {
+  listTitleStyles
+};

package/dist/chunks/chunk.4MPJJ7EN.js

@@ -0,0 +1,65 @@
+import {
+  styles
+} from "./chunk.INEDXDER.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/listItem/ListItem.tsx
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import React from "react";
+import {
+  View,
+  Text,
+  Pressable
+} from "react-native";
+var ListItem = React.forwardRef(
+  function ListItem2({
+    label,
+    subtitle,
+    prefix,
+    isLast = false,
+    isFirst = false,
+    suffix,
+    style,
+    inset = false,
+    ...restProps
+  }, ref) {
+    const isLarge = subtitle !== void 0 && subtitle !== "" || suffix !== void 0 || prefix !== void 0 || inset;
+    return <Pressable
+      ref={ref}
+      {...restProps}
+      accessibilityLabel={label}
+      accessible
+      style={[
+        style,
+        styles.container,
+        isLarge && styles.large,
+        isLast && styles.lastItem,
+        inset && styles.inset,
+        inset && isLast && styles.insetLast,
+        inset && isFirst && styles.insetFirst
+      ]}
+    >
+      {prefix}
+      <View style={{ flex: 1 }}>
+        <Text numberOfLines={1} style={styles.title}>{label}</Text>
+        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+      </View>
+      {suffix}
+    </Pressable>;
+  }
+);
+var ChevronSuffix = ({ title }) => <View style={{ flexDirection: "row", alignItems: "center" }}>
+  <Text style={{ color: theme.collection["list item"]["end slot"].detail }}>{title}</Text>
+  <Icon
+    color={theme.collection["list item"]["end slot"].chevron}
+    name="chevron-right"
+    size={20}
+  />
+</View>;
+ListItem.ChevronSuffix = ChevronSuffix;
+
+export {
+  ListItem
+};

package/dist/chunks/chunk.4SSEOHVB.js

@@ -0,0 +1,41 @@
+// src/styles/fonts.ts
+import { StyleSheet } from "react-native";
+var fonts = StyleSheet.create({
+  bodyLarge: {
+    fontSize: 16,
+    fontFamily: "Cabin-Regular",
+    fontWeight: "400",
+    lineHeight: 24,
+    letterSpacing: 0.5
+  },
+  bodyMedium: {
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 20,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.25
+  },
+  bodySmall: {
+    fontSize: 12,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.36
+  },
+  titleSmall: {
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 20,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.5
+  },
+  labelMedium: {
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 16,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.5
+  }
+});
+
+export {
+  fonts
+};

package/dist/chunks/chunk.4ZX27FCY.js

@@ -0,0 +1,21 @@
+import {
+  fonts
+} from "./chunk.4SSEOHVB.js";
+
+// src/components/listCaption/ListCaption.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var listCaptionStyles = StyleSheet.create({
+  container: {
+    paddingHorizontal: theme.primitives.spacing[16],
+    paddingTop: theme.primitives.spacing[12]
+  },
+  text: {
+    ...fonts.labelMedium,
+    paddingHorizontal: theme.primitives.spacing[16]
+  }
+});
+
+export {
+  listCaptionStyles
+};

package/dist/chunks/chunk.6DY4BFMZ.js

@@ -0,0 +1,22 @@
+import {
+  listTitleStyles
+} from "./chunk.3QXPJAHY.js";
+
+// src/components/listTitle/ListTitle.tsx
+import React from "react";
+import { View, Text } from "react-native";
+var ListTitle = React.forwardRef(
+  function ListTitle2({ style, children, ...restProps }, ref) {
+    return <View
+      ref={ref}
+      {...restProps}
+      accessibilityRole="text"
+      accessible
+      style={[style, listTitleStyles.container]}
+    ><Text style={[listTitleStyles.text]}>{children}</Text></View>;
+  }
+);
+
+export {
+  ListTitle
+};

package/dist/chunks/{chunk.2HOUMFYI.js → chunk.73S52VD6.js}

@@ -2,12 +2,12 @@ import {
   getCursorColors,
   inputWrapperStyles,
   styles
-} from "./chunk.QOZS5EA3.js";
+} from "./chunk.CIHQLL6Y.js";
 import {
   Icon
 } from "./chunk.OQSCGAEY.js";
 
-// src/components/text-input/TextInput.tsx
+// src/components/textInput/TextInput.tsx
 import React, { useState } from "react";
 import {
   TextInput as NativeTextInput,

package/dist/chunks/{chunk.MCKLJGG3.js → chunk.7H4YRP4X.js}

@@ -1,4 +1,4 @@
-// src/components/search/SearchField.styles.tsx
+// src/components/searchField/SearchField.styles.tsx
 import theme from "@ds-autonomie/assets/js/dsa-theme";
 import { StyleSheet } from "react-native";
 
@@ -7,7 +7,7 @@ import { Platform } from "react-native";
 var isIOS = Platform.OS === "ios";
 var isAndroid = Platform.OS === "android";
 
-// src/components/search/SearchField.styles.tsx
+// src/components/searchField/SearchField.styles.tsx
 var placeholderTextColor = "#3C3C4399";
 var styles = StyleSheet.create({
   container: {

package/dist/chunks/{chunk.QOZS5EA3.js → chunk.CIHQLL6Y.js}

@@ -1,29 +1,11 @@
-// src/components/text-input/TextInput.styles.ts
-import theme from "@ds-autonomie/assets/js/dsa-theme";
-import { StyleSheet as StyleSheet2 } from "react-native";
+import {
+  fonts
+} from "./chunk.4SSEOHVB.js";
 
-// src/styles/fonts.ts
+// src/components/textInput/TextInput.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
 import { StyleSheet } from "react-native";
-var fonts = StyleSheet.create({
-  bodyLarge: {
-    fontSize: 16,
-    fontFamily: "Cabin-Regular",
-    letterSpacing: 0.5
-  },
-  bodyMedium: {
-    fontSize: 14,
-    fontFamily: "Cabin-Regular",
-    letterSpacing: 0.25
-  },
-  bodySmall: {
-    fontSize: 12,
-    fontFamily: "Cabin-Regular",
-    letterSpacing: 0.36
-  }
-});
-
-// src/components/text-input/TextInput.styles.ts
-var styles = StyleSheet2.create({
+var styles = StyleSheet.create({
   container: {
     display: "flex",
     flex: 1
@@ -71,7 +53,7 @@ var styles = StyleSheet2.create({
     color: theme.collection.input.hint
   }
 });
-var inputWrapperStyles = StyleSheet2.create({
+var inputWrapperStyles = StyleSheet.create({
   default: {
     backgroundColor: theme.collection.input.background.default,
     borderColor: theme.collection.input.border.default,

package/dist/chunks/chunk.DMHRBYRF.js

@@ -0,0 +1,69 @@
+import {
+  getContainerStyle,
+  getIconColor,
+  getTextStyle
+} from "./chunk.RNOZ5AW4.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/button/Button.tsx
+import React from "react";
+import {
+  Pressable,
+  Text
+} from "react-native";
+var Button = React.forwardRef(function Toggle({
+  variant = "primary",
+  style,
+  disabled = false,
+  endIcon,
+  size = "medium",
+  startIcon,
+  children,
+  ...props
+}, ref) {
+  const hasOnlyOneIcon = [!!startIcon, !!endIcon].filter(Boolean).length === 1 && !children;
+  return <Pressable
+    ref={ref}
+    {...props}
+    accessibilityLabel="button"
+    accessibilityRole="button"
+    accessible
+    aria-disabled={disabled}
+    accessibilityState={{
+      disabled
+    }}
+    disabled={disabled}
+    role="button"
+    style={({ pressed }) => [
+      style,
+      getContainerStyle({ variant, size, hasOnlyOneIcon, disabled, pressed })
+    ]}
+  >{({ pressed }) => {
+    const iconColor = getIconColor({
+      pressed,
+      disabled,
+      variant
+    });
+    return <>
+      {startIcon && <Icon name={startIcon} color={iconColor} size={24} />}
+      {children !== void 0 && <Text
+        style={[
+          getTextStyle({
+            variant,
+            size,
+            hasOnlyOneIcon,
+            disabled,
+            pressed
+          })
+        ]}
+      >{children}</Text>}
+      {endIcon && <Icon name={endIcon} color={iconColor} size={24} />}
+    </>;
+  }}</Pressable>;
+});
+
+export {
+  Button
+};

package/dist/chunks/chunk.INEDXDER.js

@@ -0,0 +1,51 @@
+import {
+  fonts
+} from "./chunk.4SSEOHVB.js";
+
+// src/components/listItem/ListItem.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.collection.background.divider,
+    backgroundColor: theme.collection["list item"].background,
+    paddingHorizontal: theme.primitives.spacing[16],
+    paddingVertical: theme.primitives.spacing[8],
+    display: "flex",
+    height: "auto",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.primitives.spacing[16]
+  },
+  large: {
+    minHeight: 60
+  },
+  lastItem: {
+    borderBottomWidth: 0,
+    paddingBottom: theme.primitives.spacing[8] + 1
+  },
+  title: {
+    ...fonts.bodyLarge,
+    color: theme.collection["list item"].label
+  },
+  subtitle: {
+    ...fonts.bodyMedium,
+    color: theme.collection["list item"].subtitle
+  },
+  inset: {
+    marginHorizontal: theme.primitives.spacing[16]
+  },
+  insetFirst: {
+    borderTopRightRadius: theme.primitives.radius[8],
+    borderTopLeftRadius: theme.primitives.radius[8]
+  },
+  insetLast: {
+    borderBottomRightRadius: theme.primitives.radius[8],
+    borderBottomLeftRadius: theme.primitives.radius[8]
+  }
+});
+
+export {
+  styles
+};

package/dist/{components/search/SearchField.js → chunks/chunk.KVGKM2JI.js}

@@ -3,9 +3,9 @@ import {
   placeholderTextColor,
   plateformStyles,
   styles
-} from "../../chunks/chunk.MCKLJGG3.js";
+} from "./chunk.7H4YRP4X.js";
 
-// src/components/search/SearchField.tsx
+// src/components/searchField/SearchField.tsx
 import React, { useEffect, useState } from "react";
 import {
   View,
@@ -67,6 +67,7 @@ var SearchField = React.forwardRef(
     </View>;
   }
 );
+
 export {
   SearchField
 };

package/dist/chunks/chunk.KVXJ2L2C.js

@@ -0,0 +1,22 @@
+import {
+  listCaptionStyles
+} from "./chunk.4ZX27FCY.js";
+
+// src/components/listCaption/ListCaption.tsx
+import React from "react";
+import { View, Text } from "react-native";
+var ListCaption = React.forwardRef(
+  function ListCaption2({ style, children, ...restProps }, ref) {
+    return <View
+      ref={ref}
+      {...restProps}
+      accessibilityRole="text"
+      accessible
+      style={[style, listCaptionStyles.container]}
+    ><Text style={[listCaptionStyles.text]}>{children}</Text></View>;
+  }
+);
+
+export {
+  ListCaption
+};

package/dist/chunks/chunk.LN5IVTGU.js

@@ -0,0 +1,60 @@
+import {
+  radioContainerStyles,
+  radioDotStyles
+} from "./chunk.YWEWQ2LT.js";
+
+// src/components/radio/Radio.tsx
+import React, { useEffect, useState } from "react";
+import { Pressable, View } from "react-native";
+var Radio = React.forwardRef(function Checkbox({
+  value = false,
+  disabled = false,
+  onValueChange,
+  style: styleProps,
+  ...restProps
+}, ref) {
+  const [checked, setChecked] = useState(value);
+  useEffect(
+    function onValueUpdate() {
+      setChecked(value);
+    },
+    [value]
+  );
+  function handlePress() {
+    if (disabled || checked) {
+      return;
+    }
+    onValueChange?.(true);
+    setChecked(true);
+  }
+  return <Pressable
+    ref={ref}
+    {...restProps}
+    accessibilityLabel="radio"
+    accessibilityRole="radio"
+    accessibilityState={{ checked, disabled }}
+    accessible
+    aria-checked={checked}
+    aria-disabled={disabled}
+    aria-pressed={checked}
+    onPress={handlePress}
+    hitSlop={14}
+    role="radio"
+    style={[
+      styleProps,
+      radioContainerStyles.default,
+      checked && radioContainerStyles.active,
+      disabled && radioContainerStyles.disabled
+    ]}
+  >{checked && <View
+    style={[
+      radioDotStyles.default,
+      checked && radioDotStyles.active,
+      disabled && radioDotStyles.disabled
+    ]}
+  />}</Pressable>;
+});
+
+export {
+  Radio
+};

package/dist/chunks/chunk.SZJKAIPC.js

@@ -0,0 +1,20 @@
+// src/components/divider/Divider.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var dividerStyles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.collection.background.divider
+  },
+  horizontal: {
+    height: 1,
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    height: "100%"
+  }
+});
+
+export {
+  dividerStyles
+};

package/dist/chunks/chunk.XCMNSIIN.js

@@ -0,0 +1,72 @@
+import {
+  checkboxCheckStyles,
+  checkboxContainerStyles
+} from "./chunk.H2AL2E3A.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/checkbox/Checkbox.tsx
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import React, { useEffect, useState } from "react";
+import { Pressable, View } from "react-native";
+var Checkbox = React.forwardRef(function Checkbox2({
+  value = false,
+  disabled = false,
+  error = false,
+  onValueChange,
+  style: styleProps,
+  ...restProps
+}, ref) {
+  const [checked, setChecked] = useState(value);
+  useEffect(
+    function onValueUpdate() {
+      setChecked(value);
+    },
+    [value]
+  );
+  function handlePress() {
+    if (disabled) {
+      return;
+    }
+    onValueChange?.(!checked);
+    setChecked(!checked);
+  }
+  return <Pressable
+    ref={ref}
+    {...restProps}
+    accessibilityLabel="checkbox"
+    accessibilityRole="checkbox"
+    accessibilityState={{ checked, disabled }}
+    accessible
+    aria-checked={checked}
+    aria-disabled={disabled}
+    aria-invalid={error}
+    aria-pressed={checked}
+    onPress={handlePress}
+    role="checkbox"
+    hitSlop={15}
+    style={[
+      styleProps,
+      checkboxContainerStyles.default,
+      checked && checkboxContainerStyles.active,
+      error && checkboxContainerStyles.error,
+      disabled && checkboxContainerStyles.disabled
+    ]}
+  >{checked && <View
+    style={[
+      checkboxCheckStyles.default,
+      checked && checkboxCheckStyles.active,
+      error && checkboxCheckStyles.error,
+      disabled && checkboxCheckStyles.disabled
+    ]}
+  ><Icon
+    name="check"
+    color={theme.primitives.color.neutral[100]}
+    size={18}
+  /></View>}</Pressable>;
+});
+
+export {
+  Checkbox
+};

package/dist/components/button/Button.js

@@ -1,68 +1,8 @@
 import {
-  getContainerStyle,
-  getIconColor,
-  getTextStyle
-} from "../../chunks/chunk.RNOZ5AW4.js";
-import {
-  Icon
-} from "../../chunks/chunk.OQSCGAEY.js";
-
-// src/components/button/Button.tsx
-import React from "react";
-import {
-  Pressable,
-  Text
-} from "react-native";
-var Button = React.forwardRef(function Toggle({
-  variant = "primary",
-  style,
-  disabled = false,
-  endIcon,
-  size = "medium",
-  startIcon,
-  children,
-  ...props
-}, ref) {
-  const hasOnlyOneIcon = [!!startIcon, !!endIcon].filter(Boolean).length === 1 && !children;
-  return <Pressable
-    ref={ref}
-    {...props}
-    accessibilityLabel="button"
-    accessibilityRole="button"
-    accessible
-    aria-disabled={disabled}
-    accessibilityState={{
-      disabled
-    }}
-    disabled={disabled}
-    role="button"
-    style={({ pressed }) => [
-      style,
-      getContainerStyle({ variant, size, hasOnlyOneIcon, disabled, pressed })
-    ]}
-  >{({ pressed }) => {
-    const iconColor = getIconColor({
-      pressed,
-      disabled,
-      variant
-    });
-    return <>
-      {startIcon && <Icon name={startIcon} color={iconColor} size={24} />}
-      {children !== void 0 && <Text
-        style={[
-          getTextStyle({
-            variant,
-            size,
-            hasOnlyOneIcon,
-            disabled,
-            pressed
-          })
-        ]}
-      >{children}</Text>}
-      {endIcon && <Icon name={endIcon} color={iconColor} size={24} />}
-    </>;
-  }}</Pressable>;
-});
+  Button
+} from "../../chunks/chunk.DMHRBYRF.js";
+import "../../chunks/chunk.RNOZ5AW4.js";
+import "../../chunks/chunk.OQSCGAEY.js";
 export {
   Button
 };

package/dist/components/checkbox/Checkbox.js

@@ -1,71 +1,8 @@
 import {
-  checkboxCheckStyles,
-  checkboxContainerStyles
-} from "../../chunks/chunk.H2AL2E3A.js";
-import {
-  Icon
-} from "../../chunks/chunk.OQSCGAEY.js";
-
-// src/components/checkbox/Checkbox.tsx
-import theme from "@ds-autonomie/assets/js/dsa-theme";
-import React, { useEffect, useState } from "react";
-import { Pressable, View } from "react-native";
-var Checkbox = React.forwardRef(function Checkbox2({
-  value = false,
-  disabled = false,
-  error = false,
-  onValueChange,
-  style: styleProps,
-  ...restProps
-}, ref) {
-  const [checked, setChecked] = useState(value);
-  useEffect(
-    function onValueUpdate() {
-      setChecked(value);
-    },
-    [value]
-  );
-  function handlePress() {
-    if (disabled) {
-      return;
-    }
-    onValueChange?.(!checked);
-    setChecked(!checked);
-  }
-  return <Pressable
-    ref={ref}
-    {...restProps}
-    accessibilityLabel="checkbox"
-    accessibilityRole="checkbox"
-    accessibilityState={{ checked, disabled }}
-    accessible
-    aria-checked={checked}
-    aria-disabled={disabled}
-    aria-invalid={error}
-    aria-pressed={checked}
-    onPress={handlePress}
-    role="checkbox"
-    hitSlop={15}
-    style={[
-      styleProps,
-      checkboxContainerStyles.default,
-      checked && checkboxContainerStyles.active,
-      error && checkboxContainerStyles.error,
-      disabled && checkboxContainerStyles.disabled
-    ]}
-  >{checked && <View
-    style={[
-      checkboxCheckStyles.default,
-      checked && checkboxCheckStyles.active,
-      error && checkboxCheckStyles.error,
-      disabled && checkboxCheckStyles.disabled
-    ]}
-  ><Icon
-    name="check"
-    color={theme.primitives.color.neutral[100]}
-    size={18}
-  /></View>}</Pressable>;
-});
+  Checkbox
+} from "../../chunks/chunk.XCMNSIIN.js";
+import "../../chunks/chunk.H2AL2E3A.js";
+import "../../chunks/chunk.OQSCGAEY.js";
 export {
   Checkbox
 };

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+type DividerProps = {
+    orientation?: 'horizontal' | 'vertical';
+} & ViewProps;
+export declare const Divider: ({ orientation, style, ...rest }: DividerProps) => React.JSX.Element;
+export {};

package/dist/components/divider/Divider.js

@@ -0,0 +1,24 @@
+import {
+  dividerStyles
+} from "../../chunks/chunk.SZJKAIPC.js";
+
+// src/components/divider/Divider.tsx
+import { View } from "react-native";
+var Divider = ({
+  orientation = "horizontal",
+  style,
+  ...rest
+}) => {
+  return <View
+    {...rest}
+    style={[
+      style,
+      dividerStyles.container,
+      orientation === "vertical" && dividerStyles.vertical,
+      orientation === "horizontal" && dividerStyles.horizontal
+    ]}
+  />;
+};
+export {
+  Divider
+};

package/dist/components/divider/Divider.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const dividerStyles: {
+    container: {
+        backgroundColor: "#e7e7e7ff";
+    };
+    horizontal: {
+        height: number;
+        width: "100%";
+    };
+    vertical: {
+        width: number;
+        height: "100%";
+    };
+};

package/dist/components/divider/Divider.styles.js

@@ -0,0 +1,6 @@
+import {
+  dividerStyles
+} from "../../chunks/chunk.SZJKAIPC.js";
+export {
+  dividerStyles
+};

package/dist/components/listCaption/ListCaption.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+type OmittedProps = 'accessible' | 'accessibleRole';
+export declare const ListCaption: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<ViewProps, OmittedProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/listCaption/ListCaption.js

@@ -0,0 +1,8 @@
+import {
+  ListCaption
+} from "../../chunks/chunk.KVXJ2L2C.js";
+import "../../chunks/chunk.4ZX27FCY.js";
+import "../../chunks/chunk.4SSEOHVB.js";
+export {
+  ListCaption
+};

package/dist/components/listCaption/ListCaption.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const listCaptionStyles: {
+    container: {
+        paddingHorizontal: 16;
+        paddingTop: 12;
+    };
+    text: {
+        paddingHorizontal: 16;
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+};

package/dist/components/listCaption/ListCaption.styles.js

@@ -0,0 +1,7 @@
+import {
+  listCaptionStyles
+} from "../../chunks/chunk.4ZX27FCY.js";
+import "../../chunks/chunk.4SSEOHVB.js";
+export {
+  listCaptionStyles
+};

package/dist/components/listItem/ListItem.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PressableProps, ViewStyle, StyleProp } from 'react-native';
+type OmittedProps = 'accessibilityLabel' | 'accessible' | 'children' | 'style';
+type InsetListItemProps = {
+    inset: true;
+    isLast: boolean;
+    isFirst: boolean;
+};
+type RegularListItemProps = {
+    inset: false;
+    isLast: boolean;
+    isFirst?: undefined;
+};
+type CommonListItemProps = {
+    label: string;
+    subtitle?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    /**
+     * If `style` is defined, it will extend the container style.
+     * If a similar property is defined, the new property will overwrite the old one.
+     * */
+    style?: StyleProp<ViewStyle>;
+};
+type ListItemProps = (InsetListItemProps | RegularListItemProps) & CommonListItemProps & Omit<PressableProps, OmittedProps>;
+interface ListItemSubComponents {
+    ChevronSuffix?: typeof ChevronSuffix;
+}
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps> & ListItemSubComponents;
+type ChevronSuffixProps = {
+    title: string;
+};
+declare const ChevronSuffix: ({ title }: ChevronSuffixProps) => React.JSX.Element;
+export {};

package/dist/components/listItem/ListItem.js

@@ -0,0 +1,9 @@
+import {
+  ListItem
+} from "../../chunks/chunk.4MPJJ7EN.js";
+import "../../chunks/chunk.INEDXDER.js";
+import "../../chunks/chunk.4SSEOHVB.js";
+import "../../chunks/chunk.OQSCGAEY.js";
+export {
+  ListItem
+};

package/dist/components/listItem/ListItem.styles.d.ts

@@ -0,0 +1,48 @@
+export declare const styles: {
+    container: {
+        borderBottomWidth: number;
+        borderBottomColor: "#e7e7e7ff";
+        backgroundColor: "#ffffffff";
+        paddingHorizontal: 16;
+        paddingVertical: 8;
+        display: "flex";
+        height: "auto";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: 16;
+    };
+    large: {
+        minHeight: number;
+    };
+    lastItem: {
+        borderBottomWidth: number;
+        paddingBottom: number;
+    };
+    title: {
+        color: "#252625ff";
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: "400";
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    subtitle: {
+        color: "#666666ff";
+        fontSize: number;
+        fontWeight: "400";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    inset: {
+        marginHorizontal: 16;
+    };
+    insetFirst: {
+        borderTopRightRadius: 8;
+        borderTopLeftRadius: 8;
+    };
+    insetLast: {
+        borderBottomRightRadius: 8;
+        borderBottomLeftRadius: 8;
+    };
+};

package/dist/components/listItem/ListItem.styles.js

@@ -0,0 +1,7 @@
+import {
+  styles
+} from "../../chunks/chunk.INEDXDER.js";
+import "../../chunks/chunk.4SSEOHVB.js";
+export {
+  styles
+};

package/dist/components/listTitle/ListTitle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+type OmittedProps = 'accessible' | 'accessibleRole';
+export declare const ListTitle: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<ViewProps, OmittedProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/listTitle/ListTitle.js

@@ -0,0 +1,8 @@
+import {
+  ListTitle
+} from "../../chunks/chunk.6DY4BFMZ.js";
+import "../../chunks/chunk.3QXPJAHY.js";
+import "../../chunks/chunk.4SSEOHVB.js";
+export {
+  ListTitle
+};

package/dist/components/listTitle/ListTitle.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const listTitleStyles: {
+    container: {
+        paddingHorizontal: 16;
+        paddingTop: 8;
+        paddingBottom: 12;
+    };
+    text: {
+        paddingHorizontal: 16;
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+};

package/dist/components/listTitle/ListTitle.styles.js

@@ -0,0 +1,7 @@
+import {
+  listTitleStyles
+} from "../../chunks/chunk.3QXPJAHY.js";
+import "../../chunks/chunk.4SSEOHVB.js";
+export {
+  listTitleStyles
+};

package/dist/components/radio/Radio.js

@@ -1,59 +1,7 @@
 import {
-  radioContainerStyles,
-  radioDotStyles
-} from "../../chunks/chunk.YWEWQ2LT.js";
-
-// src/components/radio/Radio.tsx
-import React, { useEffect, useState } from "react";
-import { Pressable, View } from "react-native";
-var Radio = React.forwardRef(function Checkbox({
-  value = false,
-  disabled = false,
-  onValueChange,
-  style: styleProps,
-  ...restProps
-}, ref) {
-  const [checked, setChecked] = useState(value);
-  useEffect(
-    function onValueUpdate() {
-      setChecked(value);
-    },
-    [value]
-  );
-  function handlePress() {
-    if (disabled || checked) {
-      return;
-    }
-    onValueChange?.(true);
-    setChecked(true);
-  }
-  return <Pressable
-    ref={ref}
-    {...restProps}
-    accessibilityLabel="radio"
-    accessibilityRole="radio"
-    accessibilityState={{ checked, disabled }}
-    accessible
-    aria-checked={checked}
-    aria-disabled={disabled}
-    aria-pressed={checked}
-    onPress={handlePress}
-    hitSlop={14}
-    role="radio"
-    style={[
-      styleProps,
-      radioContainerStyles.default,
-      checked && radioContainerStyles.active,
-      disabled && radioContainerStyles.disabled
-    ]}
-  >{checked && <View
-    style={[
-      radioDotStyles.default,
-      checked && radioDotStyles.active,
-      disabled && radioDotStyles.disabled
-    ]}
-  />}</Pressable>;
-});
+  Radio
+} from "../../chunks/chunk.LN5IVTGU.js";
+import "../../chunks/chunk.YWEWQ2LT.js";
 export {
   Radio
 };

package/dist/components/searchField/SearchField.js

@@ -0,0 +1,7 @@
+import {
+  SearchField
+} from "../../chunks/chunk.KVGKM2JI.js";
+import "../../chunks/chunk.7H4YRP4X.js";
+export {
+  SearchField
+};

package/dist/components/{search → searchField}/SearchField.styles.js

@@ -2,7 +2,7 @@ import {
   placeholderTextColor,
   plateformStyles,
   styles
-} from "../../chunks/chunk.MCKLJGG3.js";
+} from "../../chunks/chunk.7H4YRP4X.js";
 export {
   placeholderTextColor,
   plateformStyles,

package/dist/components/textInput/TextInput.js

@@ -0,0 +1,9 @@
+import {
+  TextInput
+} from "../../chunks/chunk.73S52VD6.js";
+import "../../chunks/chunk.CIHQLL6Y.js";
+import "../../chunks/chunk.4SSEOHVB.js";
+import "../../chunks/chunk.OQSCGAEY.js";
+export {
+  TextInput
+};

package/dist/components/{text-input → textInput}/TextInput.styles.d.ts

@@ -12,12 +12,16 @@ export declare const styles: {
         color: "#666666ff";
         fontSize: number;
         fontFamily: string;
+        fontWeight: "400";
+        lineHeight: number;
         letterSpacing: number;
     };
     counter: {
         color: "#666666ff";
         fontSize: number;
         fontFamily: string;
+        fontWeight: "400";
+        lineHeight: number;
         letterSpacing: number;
         marginLeft: "auto";
     };
@@ -27,6 +31,8 @@ export declare const styles: {
     input: {
         fontSize: number;
         fontFamily: string;
+        fontWeight: "400";
+        lineHeight: number;
         letterSpacing: number;
         paddingTop: 16;
         paddingBottom: 16;
@@ -47,6 +53,8 @@ export declare const styles: {
         marginTop: number;
         marginRight: 4;
         fontSize: number;
+        fontWeight: "400";
+        lineHeight: number;
         fontFamily: string;
         letterSpacing: number;
     };

package/dist/components/{text-input → textInput}/TextInput.styles.js

@@ -2,7 +2,8 @@ import {
   getCursorColors,
   inputWrapperStyles,
   styles
-} from "../../chunks/chunk.QOZS5EA3.js";
+} from "../../chunks/chunk.CIHQLL6Y.js";
+import "../../chunks/chunk.4SSEOHVB.js";
 export {
   getCursorColors,
   inputWrapperStyles,

package/dist/index.d.ts

@@ -1,3 +1,11 @@
+export * from './components/button/Button';
+export * from './components/checkbox/Checkbox';
+export * from './components/icon/Icon';
+export * from './components/listCaption/ListCaption';
+export * from './components/listItem/ListItem';
+export * from './components/listTitle/ListTitle';
+export * from './components/radio/Radio';
+export * from './components/searchField/SearchField';
 export * from './components/toggle/Toggle';
-export * from './components/text-input/TextInput';
+export * from './components/textInput/TextInput';
 export * from './utils';

package/dist/index.js

@@ -1,12 +1,43 @@
+import {
+  SearchField
+} from "./chunks/chunk.KVGKM2JI.js";
+import "./chunks/chunk.7H4YRP4X.js";
 import {
   TextInput
-} from "./chunks/chunk.2HOUMFYI.js";
-import "./chunks/chunk.QOZS5EA3.js";
+} from "./chunks/chunk.73S52VD6.js";
+import "./chunks/chunk.CIHQLL6Y.js";
 import {
   Toggle
 } from "./chunks/chunk.B2JV2E47.js";
 import "./chunks/chunk.CZ5Y2AVH.js";
-import "./chunks/chunk.OQSCGAEY.js";
+import {
+  ListCaption
+} from "./chunks/chunk.KVXJ2L2C.js";
+import "./chunks/chunk.4ZX27FCY.js";
+import {
+  ListItem
+} from "./chunks/chunk.4MPJJ7EN.js";
+import "./chunks/chunk.INEDXDER.js";
+import {
+  ListTitle
+} from "./chunks/chunk.6DY4BFMZ.js";
+import "./chunks/chunk.3QXPJAHY.js";
+import "./chunks/chunk.4SSEOHVB.js";
+import {
+  Radio
+} from "./chunks/chunk.LN5IVTGU.js";
+import "./chunks/chunk.YWEWQ2LT.js";
+import {
+  Button
+} from "./chunks/chunk.DMHRBYRF.js";
+import "./chunks/chunk.RNOZ5AW4.js";
+import {
+  Checkbox
+} from "./chunks/chunk.XCMNSIIN.js";
+import "./chunks/chunk.H2AL2E3A.js";
+import {
+  Icon
+} from "./chunks/chunk.OQSCGAEY.js";
 
 // src/utils/useFonts.ts
 import { useFonts as useExpoFonts } from "expo-font";
@@ -14,6 +45,14 @@ function useFonts(map) {
   return useExpoFonts(map);
 }
 export {
+  Button,
+  Checkbox,
+  Icon,
+  ListCaption,
+  ListItem,
+  ListTitle,
+  Radio,
+  SearchField,
   TextInput,
   Toggle,
   useFonts

package/dist/styles/fonts.d.ts

@@ -2,10 +2,14 @@ export declare const fonts: {
     bodyLarge: {
         fontSize: number;
         fontFamily: string;
+        fontWeight: "400";
+        lineHeight: number;
         letterSpacing: number;
     };
     bodyMedium: {
         fontSize: number;
+        fontWeight: "400";
+        lineHeight: number;
         fontFamily: string;
         letterSpacing: number;
     };
@@ -14,4 +18,18 @@ export declare const fonts: {
         fontFamily: string;
         letterSpacing: number;
     };
+    titleSmall: {
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    labelMedium: {
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-autonomie/react-native",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "CNSA",
   "license": "MIT",
   "type": "module",

package/dist/components/text-input/TextInput.js

@@ -1,8 +0,0 @@
-import {
-  TextInput
-} from "../../chunks/chunk.2HOUMFYI.js";
-import "../../chunks/chunk.QOZS5EA3.js";
-import "../../chunks/chunk.OQSCGAEY.js";
-export {
-  TextInput
-};