@ds-autonomie/react-native 0.1.0 → 0.3.0

package/dist/chunks/chunk.KVGKM2JI.js

@@ -0,0 +1,73 @@
+import {
+  isIOS,
+  placeholderTextColor,
+  plateformStyles,
+  styles
+} from "./chunk.7H4YRP4X.js";
+
+// src/components/searchField/SearchField.tsx
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  TextInput
+} from "react-native";
+import Icon from "react-native-vector-icons/MaterialIcons";
+var INIT_PLACEHOLDER = isIOS ? "Recherche" : "Rechercher un...";
+var SearchField = React.forwardRef(
+  function SearchField2({
+    onChangeText,
+    placeholder = INIT_PLACEHOLDER,
+    style,
+    value = "",
+    disabled = false,
+    ...props
+  }, ref) {
+    const [text, setText] = useState(value);
+    useEffect(
+      function onValueUpdate() {
+        setText(value);
+      },
+      [value]
+    );
+    function handleKeypress(text2) {
+      if (disabled) {
+        return;
+      }
+      onChangeText?.(text2);
+      setText(text2);
+    }
+    return <View
+      style={[
+        style,
+        styles.container,
+        isIOS && styles.iOScontainer,
+        disabled && styles.disabledContainer
+      ]}
+    >
+      <Icon
+        name="search"
+        {...plateformStyles}
+        accessibilityRole="button"
+        accessibilityLabel="search"
+      />
+      <TextInput
+        ref={ref}
+        {...props}
+        editable={!disabled}
+        accessibilityLabel="search"
+        accessibilityRole="search"
+        accessibilityState={{ disabled }}
+        onChangeText={handleKeypress}
+        placeholder={placeholder}
+        placeholderTextColor={placeholderTextColor}
+        returnKeyType="search"
+        style={[styles.input, isIOS ? styles.iOSInput : styles.androidInput]}
+        value={text}
+      />
+    </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.4EJ4MEUR.js → chunk.OQSCGAEY.js}

@@ -1,14 +1,16 @@
 // src/components/icon/Icon.tsx
+import { forwardRef } from "react";
 import MaterialIcons from "react-native-vector-icons/MaterialIcons";
-function Icon({ size = 16, ...restProps }) {
+var Icon = forwardRef(function Icon2({ size = 16, ...restProps }, ref) {
   return <MaterialIcons
     {...restProps}
+    ref={ref}
     size={size}
     selectable={false}
     importantForAccessibility="no-hide-descendants"
     accessibilityElementsHidden
   />;
-}
+});
 
 export {
   Icon

package/dist/chunks/chunk.RNOZ5AW4.js

@@ -0,0 +1,71 @@
+// src/components/button/Button.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import {
+  StyleSheet
+} from "react-native";
+var variants = Object.keys(
+  theme.collection.button
+);
+var sizes = ["small", "medium"];
+function getIconColor({ pressed, disabled, variant }) {
+  const buttonTheme = theme.collection.button[variant];
+  if (disabled)
+    return buttonTheme["on-disabled"];
+  if (pressed)
+    return buttonTheme["on-pressed"];
+  return buttonTheme["on-enabled"];
+}
+function getContainerStyle({
+  disabled,
+  hasOnlyOneIcon,
+  pressed,
+  size,
+  variant
+}) {
+  const isMedium = size === "medium";
+  const isLink = variant === "link";
+  const state = disabled ? "disabled" : pressed ? "pressed" : "enabled";
+  const verticalPadding = theme.primitives.spacing[isMedium ? 16 : 8];
+  const horizontalPadding = hasOnlyOneIcon ? theme.primitives.spacing[isMedium ? 16 : 8] : theme.primitives.spacing[isMedium ? 24 : 16];
+  return StyleSheet.create({
+    container: {
+      position: "relative",
+      flexDirection: "row",
+      alignItems: "center",
+      borderRadius: theme.primitives.radius[8],
+      paddingLeft: horizontalPadding,
+      paddingRight: horizontalPadding,
+      paddingTop: verticalPadding,
+      paddingBottom: verticalPadding,
+      gap: theme.primitives.spacing[isMedium ? 8 : 4],
+      backgroundColor: isLink ? void 0 : theme.collection.button[variant][state],
+      opacity: !isLink && disabled ? 0.4 : void 0
+    }
+  }).container;
+}
+function getTextStyle({
+  disabled,
+  pressed,
+  size,
+  variant
+}) {
+  const isMedium = size === "medium";
+  const state = disabled ? "disabled" : pressed ? "pressed" : "enabled";
+  return StyleSheet.create({
+    text: {
+      fontFamily: "Cabin-Regular",
+      fontWeight: "700",
+      fontSize: isMedium ? 16 : 14,
+      letterSpacing: isMedium ? 0.5 : 0.25,
+      color: theme.collection.button[variant][`on-${state}`]
+    }
+  }).text;
+}
+
+export {
+  variants,
+  sizes,
+  getIconColor,
+  getContainerStyle,
+  getTextStyle
+};

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/chunks/chunk.YWEWQ2LT.js

@@ -0,0 +1,39 @@
+// src/components/radio/Radio.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var radioTheme = theme.collection["toggle item"]["toggle item"].radio;
+var radioContainerStyles = StyleSheet.create({
+  default: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    borderColor: radioTheme.default
+  },
+  active: {
+    borderColor: radioTheme.active
+  },
+  disabled: {
+    borderColor: radioTheme.disabled
+  }
+});
+var radioDotStyles = StyleSheet.create({
+  default: {
+    width: 10,
+    height: 10,
+    borderRadius: 20
+  },
+  disabled: {
+    backgroundColor: radioTheme.disabled
+  },
+  active: {
+    backgroundColor: radioTheme.active
+  }
+});
+
+export {
+  radioContainerStyles,
+  radioDotStyles
+};

package/dist/components/button/Button.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, PressableProps, View } from 'react-native';
+import { Size, Variant } from './Button.styles';
+type OmittedPressableProps = 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityState' | 'accessible' | 'aria-disabled' | 'children' | 'disabled' | 'role' | 'style';
+export type ButtonProps = {
+    /**
+     * Variant of button.
+     */
+    variant?: Variant;
+    /**
+     * If `style` is defined, it will extend the container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Text displayed in button.
+     */
+    children?: ReactNode;
+    /**
+     * Name of element placed before the title.
+     */
+    startIcon?: string;
+    /**
+     * Name of element placed after the title.
+     */
+    endIcon?: string;
+    /**
+     * The size of the component.
+     */
+    size?: Size;
+    /**
+     * Disabled the button.
+     */
+    disabled?: boolean;
+} & Omit<PressableProps, OmittedPressableProps>;
+export declare const Button: React.ForwardRefExoticComponent<{
+    /**
+     * Variant of button.
+     */
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "destructive" | undefined;
+    /**
+     * If `style` is defined, it will extend the container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Text displayed in button.
+     */
+    children?: ReactNode;
+    /**
+     * Name of element placed before the title.
+     */
+    startIcon?: string | undefined;
+    /**
+     * Name of element placed after the title.
+     */
+    endIcon?: string | undefined;
+    /**
+     * The size of the component.
+     */
+    size?: Size | undefined;
+    /**
+     * Disabled the button.
+     */
+    disabled?: boolean | undefined;
+} & Omit<PressableProps, OmittedPressableProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,8 @@
+import {
+  Button
+} from "../../chunks/chunk.DMHRBYRF.js";
+import "../../chunks/chunk.RNOZ5AW4.js";
+import "../../chunks/chunk.OQSCGAEY.js";
+export {
+  Button
+};

package/dist/components/button/Button.styles.d.ts

@@ -0,0 +1,38 @@
+import theme from '@ds-autonomie/assets/js/dsa-theme';
+import { PressableStateCallbackType } from 'react-native';
+import { ButtonProps } from './Button';
+export type Variant = keyof typeof theme.collection.button;
+export declare const variants: Variant[];
+export type Size = 'small' | 'medium';
+export declare const sizes: Size[];
+type State = {
+    pressed: PressableStateCallbackType['pressed'];
+    disabled: ButtonProps['disabled'];
+    variant: Variant;
+};
+export declare function getIconColor({ pressed, disabled, variant }: State): "#540abdff" | "#ffffffff";
+type GetStylesProps = {
+    hasOnlyOneIcon: boolean;
+    size: Size;
+} & State;
+export declare function getContainerStyle({ disabled, hasOnlyOneIcon, pressed, size, variant, }: GetStylesProps): {
+    position: "relative";
+    flexDirection: "row";
+    alignItems: "center";
+    borderRadius: 8;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    gap: 4 | 8;
+    backgroundColor: "#ede4faff" | "#cbb0ecff" | "#540abdff" | "#451292ff" | "#ffffffff" | "#dd1708ff" | "#530000ff" | undefined;
+    opacity: number | undefined;
+};
+export declare function getTextStyle({ disabled, pressed, size, variant, }: GetStylesProps): {
+    fontFamily: string;
+    fontWeight: "700";
+    fontSize: number;
+    letterSpacing: number;
+    color: "#540abdff" | "#ffffffff";
+};
+export {};

package/dist/components/button/Button.styles.js

@@ -0,0 +1,14 @@
+import {
+  getContainerStyle,
+  getIconColor,
+  getTextStyle,
+  sizes,
+  variants
+} from "../../chunks/chunk.RNOZ5AW4.js";
+export {
+  getContainerStyle,
+  getIconColor,
+  getTextStyle,
+  sizes,
+  variants
+};

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View } from 'react-native';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native/types';
+type OmittedPressableProps = 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityState' | 'accessible' | 'aria-checked' | 'aria-invalid' | 'aria-disabled' | 'aria-pressed' | 'style' | 'onPress' | 'children' | 'role';
+export type CheckboxProps = {
+    /**
+     * When set to `true`, component is checked.
+     */
+    value?: boolean;
+    /**
+     * When set to `true`, component is in error.
+     */
+    error?: boolean;
+    /**
+     * When set to `true`, component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback when component is checked.
+     *
+     * @param {boolean} value
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * If `style` is defined, it will extend the container style.
+     * If a similar property is defined, the new property will be ignored.
+     * * */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, OmittedPressableProps>;
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    /**
+     * When set to `true`, component is checked.
+     */
+    value?: boolean | undefined;
+    /**
+     * When set to `true`, component is in error.
+     */
+    error?: boolean | undefined;
+    /**
+     * When set to `true`, component is disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Callback when component is checked.
+     *
+     * @param {boolean} value
+     */
+    onValueChange?: ((value: boolean) => void) | undefined;
+    /**
+     * If `style` is defined, it will extend the container style.
+     * If a similar property is defined, the new property will be ignored.
+     * * */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, OmittedPressableProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,8 @@
+import {
+  Checkbox
+} from "../../chunks/chunk.XCMNSIIN.js";
+import "../../chunks/chunk.H2AL2E3A.js";
+import "../../chunks/chunk.OQSCGAEY.js";
+export {
+  Checkbox
+};

package/dist/components/checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,38 @@
+export declare const checkboxContainerStyles: {
+    default: {
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        borderColor: "#666666ff";
+    };
+    error: {
+        borderColor: "#dd1708ff";
+    };
+    disabled: {
+        borderColor: "#d7d7d7ff";
+    };
+    active: {
+        borderColor: "#540abdff";
+    };
+};
+export declare const checkboxCheckStyles: {
+    default: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    disabled: {
+        backgroundColor: "#d7d7d7ff";
+    };
+    error: {
+        backgroundColor: "#dd1708ff";
+    };
+    active: {
+        backgroundColor: "#540abdff";
+    };
+};

package/dist/components/checkbox/Checkbox.styles.js

@@ -0,0 +1,8 @@
+import {
+  checkboxCheckStyles,
+  checkboxContainerStyles
+} from "../../chunks/chunk.H2AL2E3A.js";
+export {
+  checkboxCheckStyles,
+  checkboxContainerStyles
+};

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
+};