@alveole/components 0.43.2 → 1.0.0

package/dist/ui/Signature/Signature.stories.d.ts

@@ -12,11 +12,11 @@ declare const _default: {
             flexDirection: "column";
         };
         pen: {
-            color: "#373A3F";
+            color: string;
             backgroundColor: "#FFFFFF";
         };
         signatureWeb: {
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderWidth: number;
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         };

package/dist/ui/Signature/Signature.styles.d.ts

@@ -5,11 +5,11 @@ export declare const useStyles: () => {
         flexDirection: "column";
     };
     pen: {
-        color: "#373A3F";
+        color: string;
         backgroundColor: "#FFFFFF";
     };
     signatureWeb: {
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderWidth: number;
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
     };

package/dist/ui/Signature/Signature.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Signature.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAyE9C,CAAC"}
+{"version":3,"file":"Signature.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA6E9C,CAAC"}

package/dist/ui/Signature/Signature.web.js

@@ -10,6 +10,7 @@ export const Signature = (props) => {
     const { height, style, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, ...boxProps } = props;
     const styles = useStyles();
     const signatureRef = React.useRef(null);
+    const [signatureInstanceVersion, setSignatureInstanceVersion] = React.useState(0);
     const serializeSvgToBase64 = (svg) => {
         return new Promise(resolve => {
             const svgString = new XMLSerializer().serializeToString(svg);
@@ -37,14 +38,16 @@ export const Signature = (props) => {
         return () => {
             svgEl.removeEventListener('pointerup', handlePointerUp);
         };
-    }, [signatureRef.current?.svg, onChange]);
+    }, [signatureInstanceVersion, onChange]);
     const handleClear = () => {
         signatureRef.current?.clear();
         onChange(null);
     };
     const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
     return (_jsxs(Box, { tag: "signature", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormat] }), _jsx(Button, { title: clearButtonLabel, variant: "tertiary", size: "xs", onPress: handleClear })] }), _jsx(Box, { style: { ...styles.signatureWeb, height }, children: _jsx(ReactSignature, { ref: (inst) => {
-                        if (inst)
+                        if (inst) {
                             signatureRef.current = inst;
+                            setSignatureInstanceVersion(version => version + 1);
+                        }
                     }, style: styles.signatureWeb, fill: styles.pen.color, options: { size: 12, smoothing: 0.15, thinning: 0.73, streamline: 0.5 } }) })] }));
 };

package/dist/ui/Switch/Switch.d.ts

@@ -0,0 +1,20 @@
+import React, { CSSProperties } from 'react';
+import { TamaguiElement, SwitchProps as TamaguiSwitchProps } from 'tamagui';
+export type SwitchElement = TamaguiElement;
+export type SwitchProps = Omit<TamaguiSwitchProps, 'value' | 'onChange'> & {
+    id?: string;
+    label?: string;
+    style?: CSSProperties;
+    error?: string;
+    success?: string;
+    noPadding?: boolean;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Omit<TamaguiSwitchProps, "value" | "onChange"> & {
+    id?: string;
+    label?: string;
+    style?: CSSProperties;
+    error?: string;
+    success?: string;
+    noPadding?: boolean;
+} & React.RefAttributes<TamaguiElement>>;
+//# sourceMappingURL=Switch.d.ts.map

package/dist/ui/Switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AACpD,OAAO,EAAS,cAAc,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAG5G,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;SARZ,MAAM;YACH,MAAM;YACN,aAAa;YACb,MAAM;cACJ,MAAM;gBACJ,OAAO;wCAgFnB,CAAC"}

package/dist/ui/Switch/Switch.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, FormControlCaption, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import React, { useId } from 'react';
+import { Label, Switch as TamaguiSwitch } from 'tamagui';
+import { useStyles } from './Switch.styles';
+export const Switch = React.forwardRef(function Switch(props, ref) {
+    const { checked, style, label, error, success, disabled, noPadding, onCheckedChange, ...switchProps } = props;
+    let { id } = props;
+    const isControlled = checked !== undefined;
+    const [model, setModel] = React.useState(Boolean(checked));
+    const value = isControlled ? checked : model;
+    const { spacing } = useTheme();
+    const styles = useStyles();
+    const uniqId = useId();
+    id = id || `switch--${uniqId}`;
+    const onChange = (newValue) => {
+        if (!isControlled)
+            setModel(newValue);
+        onCheckedChange?.(newValue);
+    };
+    const switchButtonStyles = {
+        ...styles.switchButton,
+        ...(style ? style : {}),
+        ...(value ? styles.switchButtonChecked : {}),
+        ...(disabled ? styles.switchButtonDisabled : {}),
+    };
+    const switchThumbStyles = {
+        ...styles.switchThumb,
+        ...(value ? styles.switchThumbChecked : {}),
+        ...(disabled ? styles.switchThumbDisabled : {}),
+    };
+    const switchLabelStyles = {
+        ...styles.switchLabel,
+        ...(value ? styles.switchLabelChecked : {}),
+        ...(disabled ? styles.switchLabelDisabled : {}),
+        ...(noPadding ? { padding: 0, marginRight: 0 } : {}),
+    };
+    const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, checked: value, onCheckedChange: onChange, style: switchButtonStyles, disabled: disabled, ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { animation: "quicker", style: switchThumbStyles }) }));
+    const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(Label, { unstyled: true, htmlFor: id, width: '100%', children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, label && (_jsx(Typography, { htmlFor: id, style: switchLabelStyles, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsx(Box, { tag: "switch", gap: error || success ? spacing('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
+});

package/dist/ui/Switch/Switch.stories.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").SwitchProps, "value" | "onChange"> & {
+        id?: string;
+        label?: string;
+        style?: import("react").CSSProperties;
+        error?: string;
+        success?: string;
+        noPadding?: boolean;
+    } & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
+    styleFn: () => {
+        switchContainer: {};
+        switch: {
+            display: "flex";
+            flexDirection: "row";
+            gap: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+        };
+        switchButton: {
+            borderColor: string;
+            backgroundColor: string;
+            cursor: "pointer";
+            padding: number;
+            minHeight: import("@alveole/theme").Spacing;
+            marginTop: string;
+            marginBottom: string;
+        };
+        switchButtonChecked: {
+            backgroundColor: string;
+        };
+        switchButtonDisabled: {
+            backgroundColor: string;
+            cursor: "not-allowed";
+        };
+        switchThumb: {
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+        };
+        switchThumbChecked: {
+            backgroundColor: string;
+        };
+        switchThumbDisabled: {
+            backgroundColor: string;
+            cursor: "not-allowed";
+            borderColor: "#FFFFFF";
+        };
+        switchLabel: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            cursor: "pointer";
+            marginTop: string;
+            marginBottom: string;
+            marginRight: number;
+        };
+        switchLabelChecked: {};
+        switchLabelDisabled: {
+            cursor: "not-allowed";
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Controlled: () => import("react").JSX.Element;
+export * as Sources from './Switch.stories.sources';
+//# sourceMappingURL=Switch.stories.d.ts.map

package/dist/ui/Switch/Switch.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAGtB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}

package/dist/ui/Switch/Switch.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core';
+import { Switch } from './Switch';
+import { useStyles } from './Switch.styles';
+export default {
+    title: 'Switch',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Interrupteur avec label, supportant les modes contrôlé et non-contrôlé.',
+    component: Switch,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Switch, { label: "Non activ\u00E9" }), _jsx(Switch, { label: "Activ\u00E9", checked: true }), _jsx(Switch, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Switch, { label: "Activ\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true })] }));
+export const Controlled = () => {
+    const [value, setValue] = useState(false);
+    return _jsx(Switch, { label: value ? 'Activé' : 'Désactivé', checked: value, onCheckedChange: v => setValue(!!v) });
+};
+export * as Sources from './Switch.stories.sources';

package/dist/ui/Switch/Switch.stories.sources.d.ts

@@ -0,0 +1,8 @@
+export declare const Default: () => string;
+export declare const Controlled: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Controlled: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Switch.stories.sources.d.ts.map

package/dist/ui/Switch/Switch.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0S,CAAC;AAE/T,eAAO,MAAM,UAAU,cAAgN,CAAC;AAExO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Switch/Switch.stories.sources.js

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Switch/Switch.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Switch label=\"Non activé\" />\n    <Switch label=\"Activé\" checked />\n    <Switch label=\"Désactivé\" disabled />\n    <Switch label=\"Activé désactivé\" checked disabled />\n  </Box>\n);";
+export const Controlled = () => "export const Controlled = () => {\n  const [value, setValue] = useState(false);\n  return <Switch label={value ? 'Activé' : 'Désactivé'} checked={value} onCheckedChange={v => setValue(!!v)} />;\n};";
+export const storySources = {
+    Default,
+    Controlled,
+};

package/dist/ui/Switch/Switch.styles.d.ts

@@ -0,0 +1,55 @@
+export declare const useStyles: () => {
+    switchContainer: {};
+    switch: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+    };
+    switchButton: {
+        borderColor: string;
+        backgroundColor: string;
+        cursor: "pointer";
+        padding: number;
+        minHeight: import("@alveole/theme").Spacing;
+        marginTop: string;
+        marginBottom: string;
+    };
+    switchButtonChecked: {
+        backgroundColor: string;
+    };
+    switchButtonDisabled: {
+        backgroundColor: string;
+        cursor: "not-allowed";
+    };
+    switchThumb: {
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string;
+    };
+    switchThumbChecked: {
+        backgroundColor: string;
+    };
+    switchThumbDisabled: {
+        backgroundColor: string;
+        cursor: "not-allowed";
+        borderColor: "#FFFFFF";
+    };
+    switchLabel: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        cursor: "pointer";
+        marginTop: string;
+        marginBottom: string;
+        marginRight: number;
+    };
+    switchLabelChecked: {};
+    switchLabelDisabled: {
+        cursor: "not-allowed";
+    };
+};
+//# sourceMappingURL=Switch.styles.d.ts.map

package/dist/ui/Switch/Switch.styles.d.ts.map

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

package/dist/ui/Switch/Switch.styles.js

@@ -0,0 +1,51 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    switchContainer: {},
+    switch: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('050'),
+        paddingRight: spacing('050'),
+    },
+    switchButton: {
+        borderColor: color.border['default-grey'],
+        backgroundColor: color.background.default,
+        cursor: 'pointer',
+        padding: 1,
+        minHeight: spacing('200'),
+        marginTop: 'auto',
+        marginBottom: 'auto',
+    },
+    switchButtonChecked: {
+        backgroundColor: color.background['default-active'],
+    },
+    switchButtonDisabled: {
+        backgroundColor: color.background['disabled-grey'],
+        cursor: 'not-allowed',
+    },
+    switchThumb: {
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        backgroundColor: color.background['default-active'],
+    },
+    switchThumbChecked: {
+        backgroundColor: color.primary,
+    },
+    switchThumbDisabled: {
+        backgroundColor: color.background['disabled-grey'],
+        cursor: 'not-allowed',
+        borderColor: '#FFFFFF',
+    },
+    switchLabel: {
+        cursor: 'pointer',
+        marginTop: 'auto',
+        marginBottom: 'auto',
+        marginRight: 60,
+        ...text['Corps de texte'].SM.Regular,
+        color: color.text['label-grey'],
+    },
+    switchLabelChecked: {},
+    switchLabelDisabled: {
+        cursor: 'not-allowed',
+    },
+}));

package/dist/ui/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Switch';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/ui/Switch/index.js

@@ -0,0 +1 @@
+export * from './Switch';

package/dist/ui/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,eAAe,EAAc,MAAM,qBAAqB,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACnD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBA6IpC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAuB,eAAe,EAAc,MAAM,qBAAqB,CAAC;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACnD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAyIpC,CAAC"}

package/dist/ui/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, LucideIcon, Typography } from '@alveole/components';
+import { Box, Counter, LucideIcon, Typography } from '@alveole/components';
 import React from 'react';
 import { ScrollView } from 'react-native';
 import { Tabs as TamaguiTabs } from 'tamagui';
@@ -52,5 +52,5 @@ export const Tabs = (props) => {
     return (_jsx(Box, { tag: "tabs-container", style: [styles.container, style], ...boxProps, children: _jsxs(TamaguiTabs, { style: styles.tabs, defaultValue: initialValue, value: currentTab, onValueChange: e => setCurrentTab(e, tabs.findIndex(t => t.value === e)), orientation: "horizontal", size: "$4", activationMode: "manual", children: [_jsxs(TamaguiTabs.List, { disablePassBorderRadius: true, loop: false, style: styles.tabsList, children: [tabs.map((tab, idx) => (_jsx(_Fragment, { children: _jsx(TamaguiTabs.Tab, { unstyled: true, onHoverIn: () => setHoverTab(tab.value), onHoverOut: () => setHoverTab(null), onInteraction: handleOnInteraction, value: tab.value, disabled: tabs.length < 2, style: { ...styles.tabsTab, ...(isCurrentTab(tab.value) ? styles.tabsTabActive : {}) }, children: _jsxs(Box, { style: {
                                         ...styles.wrapper,
                                         ...(isHoverTab(tab.value) ? styles.wrapperHover : {}),
-                                    }, children: [tab.icon && (_jsx(LucideIcon, { name: tab.icon, size: "sm", color: "currentColor", style: { ...(isHoverTab(tab.value) ? styles.tabIconHover : styles.tabIcon) } })), _jsx(Typography, { style: { ...styles.tabsLabel, ...(isCurrentTab(tab.value) ? styles.tabsLabelActive : {}) }, children: tab.label }), tab.counter !== undefined && tab.counter > 0 && (_jsx(Typography, { style: { ...styles.tabsCounter, ...(isCurrentTab(tab.value) ? styles.tabsCounterActive : {}) }, children: tab.counter }))] }) }, idx) }))), renderActions && _jsx(Box, { ml: 'auto', children: renderActions() })] }), _jsx(Box, { style: { flex: 1, minHeight: 0 }, children: tabs.map((tab, idx) => (_jsx(TamaguiTabs.Content, { style: styles.tabsContent, value: tab.value, children: renderContent() }, idx))) })] }) }));
+                                    }, children: [tab.icon && (_jsx(LucideIcon, { name: tab.icon, size: "sm", color: "currentColor", style: { ...(isHoverTab(tab.value) ? styles.tabIconHover : styles.tabIcon) } })), _jsx(Typography, { style: { ...styles.tabsLabel, ...(isCurrentTab(tab.value) ? styles.tabsLabelActive : {}) }, children: tab.label }), tab.counter !== undefined && tab.counter > 0 && (_jsx(Counter, { variant: isCurrentTab(tab.value) ? 'primary' : 'default', count: tab.counter }))] }) }, idx) }))), renderActions && _jsx(Box, { ml: 'auto', children: renderActions() })] }), _jsx(Box, { style: { flex: 1, minHeight: 0 }, children: tabs.map((tab, idx) => (_jsx(TamaguiTabs.Content, { style: styles.tabsContent, value: tab.value, children: renderContent() }, idx))) })] }) }));
 };

package/dist/ui/Tabs/Tabs.stories.d.ts

@@ -24,7 +24,7 @@ declare const _default: {
             borderBottomRightRadius: import("@alveole/theme").Spacing;
             gap: import("@alveole/theme").Spacing;
             boxSizing: "border-box";
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderBottomWidth: number;
             backgroundColor: "transparent";
             overflowX: "scroll";
@@ -46,26 +46,14 @@ declare const _default: {
             gap: import("@alveole/theme").Spacing;
         };
         tabsTabActive: {
-            borderBottomColor: "#0264C7";
+            borderBottomColor: string;
             borderBottomWidth: number;
         };
-        tabsCounter: {
-            fontSize: 12;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            backgroundColor: "#E6EAF1";
-            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        };
-        tabsCounterActive: {};
         wrapperHover: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            backgroundColor: "rgba(0, 0, 0, 0.04)";
+            backgroundColor: string;
         };
         wrapper: {
             display: "flex";
@@ -82,10 +70,10 @@ declare const _default: {
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         };
         tabIcon: {
-            color: "#5F6571";
+            color: string;
         };
         tabIconHover: {
-            color: "#373A3F";
+            color: string;
         };
         tabsLabel: {
             fontSize: 14;

package/dist/ui/Tabs/Tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAsBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAsBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Tabs/Tabs.styles.d.ts

@@ -16,7 +16,7 @@ export declare const useStyles: () => {
         borderBottomRightRadius: import("@alveole/theme").Spacing;
         gap: import("@alveole/theme").Spacing;
         boxSizing: "border-box";
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderBottomWidth: number;
         backgroundColor: "transparent";
         overflowX: "scroll";
@@ -38,26 +38,14 @@ export declare const useStyles: () => {
         gap: import("@alveole/theme").Spacing;
     };
     tabsTabActive: {
-        borderBottomColor: "#0264C7";
+        borderBottomColor: string;
         borderBottomWidth: number;
     };
-    tabsCounter: {
-        fontSize: 12;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        backgroundColor: "#E6EAF1";
-        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-    };
-    tabsCounterActive: {};
     wrapperHover: {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        backgroundColor: "rgba(0, 0, 0, 0.04)";
+        backgroundColor: string;
     };
     wrapper: {
         display: "flex";
@@ -74,10 +62,10 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
     };
     tabIcon: {
-        color: "#5F6571";
+        color: string;
     };
     tabIconHover: {
-        color: "#373A3F";
+        color: string;
     };
     tabsLabel: {
         fontSize: 14;

package/dist/ui/Tabs/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFnB,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFnB,CAAC"}

package/dist/ui/Tabs/Tabs.styles.js

@@ -42,14 +42,6 @@ export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
         borderBottomColor: color.light.border['default-primary'],
         borderBottomWidth: 2,
     },
-    tabsCounter: {
-        paddingRight: spacing('1W'),
-        paddingLeft: spacing('1W'),
-        backgroundColor: color.light.background['disabled-grey'],
-        borderRadius: radius('full'),
-        ...text['Corps de texte'].XS.Bold,
-    },
-    tabsCounterActive: {},
     wrapperHover: {
         display: 'flex',
         flexDirection: 'row',

package/dist/ui/Tag/Tag.stories.d.ts

@@ -13,12 +13,12 @@ declare const _default: {
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         };
         tagDefault: {
-            color: "#151617";
-            backgroundColor: "#EFF1F6";
+            color: string;
+            backgroundColor: string;
         };
         tagAction: {
-            color: "#151617";
-            backgroundColor: "#D2E8FE";
+            color: string;
+            backgroundColor: string;
         };
         tagSm: {
             fontSize: 12;

package/dist/ui/Tag/Tag.styles.d.ts

@@ -6,12 +6,12 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
     };
     tagDefault: {
-        color: "#151617";
-        backgroundColor: "#EFF1F6";
+        color: string;
+        backgroundColor: string;
     };
     tagAction: {
-        color: "#151617";
-        backgroundColor: "#D2E8FE";
+        color: string;
+        backgroundColor: string;
     };
     tagSm: {
         fontSize: 12;

package/dist/ui/TextField/TextField.d.ts

@@ -0,0 +1,22 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps, TextInputProps } from '@alveole/components';
+import React from 'react';
+export type TextFieldProps = TextInputProps & FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    type?: 'text' | 'hidden';
+    onChange?: TextInputProps['onChangeText'];
+};
+export declare const TextField: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & FormControlCaptionProps & FormControlHintProps & {
+    type?: "text" | "hidden";
+    onChange?: TextInputProps["onChangeText"];
+} & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/ui/TextField/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/ui/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAIrB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,cAAc,GAAG,cAAc,GACzC,qBAAqB,GACrB,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAEJ,eAAO,MAAM,SAAS;;;;;;;;;;;;WAJX,MAAM,GAAG,QAAQ;eACb,cAAc,CAAC,cAAc,CAAC;0DAqC3C,CAAC"}

package/dist/ui/TextField/TextField.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, TextInput, } from '@alveole/components';
+import React from 'react';
+import { useStyles } from './TextField.styles';
+export const TextField = React.forwardRef(function TextField(props, ref) {
+    const { label, labelRight, hint, error, success, disabled, onChange } = props;
+    const styles = useStyles();
+    const keyboardType = 'default';
+    const textContentType = 'none';
+    const autoCapitalize = 'sentences';
+    const autoComplete = 'off';
+    const inputMode = 'text';
+    return (_jsxs(FormControl, { style: styles.textField, children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, keyboardType: keyboardType, textContentType: textContentType, autoCapitalize: autoCapitalize, autoComplete: autoComplete, inputMode: inputMode, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

package/dist/ui/TextField/TextField.stories.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+        disabled?: boolean;
+        startAdornment?: React.ReactNode;
+        endAdornment?: React.ReactNode;
+        openModal?: boolean;
+        modalSubmitLabel?: string;
+        onModalSubmit?: () => void;
+    } & {
+        label: string;
+        labelRight?: React.ReactNode;
+        disabled?: boolean;
+    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+        type?: "text" | "hidden";
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {
+        textField: {};
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const States: () => import("react").JSX.Element;
+export * as Sources from './TextField.stories.sources';
+//# sourceMappingURL=TextField.stories.d.ts.map

package/dist/ui/TextField/TextField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/TextField/TextField.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAOlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}