@alveole/components 0.43.2 → 1.0.0

package/dist/ui/RadioGroup/RadioGroupCard.d.ts

@@ -0,0 +1,12 @@
+import { LucideIconProps } from '@alveole/components';
+import React, { CSSProperties } from 'react';
+import { TamaguiElement, RadioGroupItemProps as TamaguiRadioGroupCardProps } from 'tamagui';
+export type RadioGroupCardElement = TamaguiElement;
+export type RadioGroupCardProps = Pick<TamaguiRadioGroupCardProps, 'value'> & {
+    label: string;
+    icon?: LucideIconProps['name'];
+    style?: CSSProperties;
+    separator?: boolean;
+};
+export declare const RadioGroupCard: (props: RadioGroupCardProps) => React.JSX.Element;
+//# sourceMappingURL=RadioGroupCard.d.ts.map

package/dist/ui/RadioGroup/RadioGroupCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupCard.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,eAAe,EAAc,MAAM,qBAAqB,CAAC;AACnF,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AACpD,OAAO,EAAS,cAAc,EAAE,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAKnG,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,0BAA0B,EAAE,OAAO,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA2BxD,CAAC"}

package/dist/ui/RadioGroup/RadioGroupCard.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, LucideIcon, Typography } from '@alveole/components';
+import React, { useId } from 'react';
+import { Label } from 'tamagui';
+import { useStyles } from './RadioGroup.styles';
+import { useRadioGroup } from './RadioGroupContext';
+import { RadioInput } from './RadioInput';
+export const RadioGroupCard = (props) => {
+    const { label, style, icon, value, separator = true } = props;
+    const rid = useId();
+    const id = React.useMemo(() => `radiogroup-${value}-${rid}`, [value, rid]);
+    const styles = useStyles();
+    useRadioGroup();
+    return (_jsx(Box, { tag: "radio-group-card", style: styles.card, children: _jsx(Label, { unstyled: true, htmlFor: id, display: "flex", flexDirection: "row", width: '100%', children: _jsx(Box, { style: { ...styles.itemCard, ...style }, hoverStyle: styles.itemCardHover, children: _jsxs(Box, { style: styles.radioGroupCardContent, children: [_jsx(RadioInput, { value: value, id: id, size: "sm" }), icon && (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', style: styles.itemCardIcon, children: _jsx(LucideIcon, { size: "sm", name: icon }) })), _jsx(Box, { style: { ...styles.radioGroupCardLabelContainer, ...(separator ? styles.itemCardSeparator : {}) }, children: _jsx(Typography, { style: styles.radioGroupCardLabel, children: label }) })] }) }) }) }));
+};

package/dist/ui/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type RadioGroupCtx = {
+    value?: string;
+    onChange?: (v: string) => void;
+};
+export declare const RadioGroupContext: React.Context<RadioGroupCtx>;
+export declare const useRadioGroup: () => RadioGroupCtx;
+//# sourceMappingURL=RadioGroupContext.d.ts.map

package/dist/ui/RadioGroup/RadioGroupContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupContext.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,8BAAyC,CAAC;AACxE,eAAO,MAAM,aAAa,qBAA4C,CAAC"}

package/dist/ui/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const RadioGroupContext = React.createContext({});
+export const useRadioGroup = () => React.useContext(RadioGroupContext);

package/dist/ui/RadioGroup/RadioGroupItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TamaguiElement, RadioGroupItemProps as TamaguiRadioGroupItemProps } from 'tamagui';
+export type RadioGroupItemElement = TamaguiElement;
+export type RadioGroupItemProps = Pick<TamaguiRadioGroupItemProps, 'value'> & {
+    children?: string;
+};
+export declare const RadioGroupItem: (props: RadioGroupItemProps) => React.JSX.Element;
+//# sourceMappingURL=RadioGroupItem.d.ts.map

package/dist/ui/RadioGroup/RadioGroupItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupItem.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroupItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,EAAS,cAAc,EAAE,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAInG,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,0BAA0B,EAAE,OAAO,CAAC,GAAG;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAoBxD,CAAC"}

package/dist/ui/RadioGroup/RadioGroupItem.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import React, { useId } from 'react';
+import { Label } from 'tamagui';
+import { useStyles } from './RadioGroupItem.styles';
+import { RadioInput } from './RadioInput';
+export const RadioGroupItem = (props) => {
+    const { children, value } = props;
+    const rid = useId();
+    const id = React.useMemo(() => `radiogroup-${value}-${rid}`, [value, rid]);
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "radio-group-item", style: styles.item, children: _jsxs(Label, { unstyled: true, htmlFor: id, style: styles.labelContainer, children: [_jsx(Box, { children: _jsx(RadioInput, { value: value, id: id, size: "md" }) }), _jsx(Box, { children: _jsx(Typography, { style: styles.itemLabel, children: children }) })] }) }));
+};

package/dist/ui/RadioGroup/RadioGroupItem.styles.d.ts

@@ -0,0 +1,24 @@
+export declare const useStyles: () => {
+    item: {
+        display: "flex";
+        flexDirection: "row";
+        width: "100%";
+    };
+    labelContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        width: "100%";
+        gap: import("@alveole/theme").Spacing;
+    };
+    itemLabel: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        cursor: "pointer";
+        color: string;
+    };
+};
+//# sourceMappingURL=RadioGroupItem.styles.d.ts.map

package/dist/ui/RadioGroup/RadioGroupItem.styles.d.ts.map

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

package/dist/ui/RadioGroup/RadioGroupItem.styles.js

@@ -0,0 +1,20 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    item: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+    },
+    labelContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        gap: spacing('050'),
+    },
+    itemLabel: {
+        cursor: 'pointer',
+        color: color.text['default-grey'],
+        ...text['Corps de texte'].SM.Regular,
+    },
+}));

package/dist/ui/RadioGroup/RadioInput.d.ts

@@ -0,0 +1,7 @@
+export type RadioInputProps = {
+    value: string;
+    id: string;
+    size: 'sm' | 'md';
+};
+export declare const RadioInput: (props: RadioInputProps) => import("react").JSX.Element;
+//# sourceMappingURL=RadioInput.d.ts.map

package/dist/ui/RadioGroup/RadioInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioInput.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAwBhD,CAAC"}

package/dist/ui/RadioGroup/RadioInput.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as TamaguiRadioGroup } from 'tamagui';
+import { useStyles } from './RadioGroup.styles';
+import { useRadioGroup } from './RadioGroupContext';
+export const RadioInput = (props) => {
+    const { value, id, size = 'md' } = props;
+    const { value: selectedValue, onChange } = useRadioGroup();
+    const isSelected = selectedValue === value;
+    const styles = useStyles();
+    const itemStyles = { ...styles.itemContainer, ...(size === 'sm' ? styles.itemContainerSm : styles.itemContainerMd) };
+    const indicatorStyle = { ...styles.itemContainer, ...(isSelected ? styles.itemContainerActive : {}) };
+    return (_jsx(TamaguiRadioGroup.Item, { value: value, id: id, style: itemStyles, focusStyle: styles.itemContainerActive, hoverStyle: indicatorStyle, pressStyle: styles.itemContainerActive, onPress: () => onChange?.(value), children: _jsx(TamaguiRadioGroup.Indicator, { style: styles.itemIndicator }) }));
+};

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

@@ -0,0 +1,18 @@
+export { RadioGroupElement, RadioGroupProps } from './RadioGroup';
+export { RadioGroupCardProps } from './RadioGroupCard';
+export { RadioGroupCtx } from './RadioGroupContext';
+export { RadioGroupItemProps } from './RadioGroupItem';
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<import("tamagui").RadioGroupProps, "direction" | "value" | "onValueChange"> & import("..").FormControlCaptionProps & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & import("..").FormControlHintProps & {
+    label?: string;
+    value?: import("tamagui").RadioGroupProps["value"];
+    onChange?: import("tamagui").RadioGroupProps["onValueChange"];
+    variant?: "default" | "card";
+} & import("react").RefAttributes<import("tamagui").TamaguiElement>> & {
+    Item: (props: import("./RadioGroupItem").RadioGroupItemProps) => import("react").JSX.Element;
+    Card: (props: import("./RadioGroupCard").RadioGroupCardProps) => import("react").JSX.Element;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,UAAU;;;;;;;;;;;;CAGrB,CAAC"}

package/dist/ui/RadioGroup/index.js

@@ -0,0 +1,7 @@
+import { RadioGroup as RadioGroupComponent } from './RadioGroup';
+import { RadioGroupCard } from './RadioGroupCard';
+import { RadioGroupItem } from './RadioGroupItem';
+export const RadioGroup = Object.assign(RadioGroupComponent, {
+    Item: RadioGroupItem,
+    Card: RadioGroupCard,
+});

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

@@ -16,7 +16,7 @@ declare const _default: {
             paddingBottom: import("@alveole/theme").Spacing;
         };
         enteteTitle: {
-            color: "#151617";
+            color: string;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -31,7 +31,7 @@ declare const _default: {
         };
         withBorder: {
             borderWidth: number;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderLeftWidth: number;
             borderRightWidth: number;
         };

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

@@ -9,7 +9,7 @@ export declare const useStyles: () => {
         paddingBottom: import("@alveole/theme").Spacing;
     };
     enteteTitle: {
-        color: "#151617";
+        color: string;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -24,7 +24,7 @@ export declare const useStyles: () => {
     };
     withBorder: {
         borderWidth: number;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderLeftWidth: number;
         borderRightWidth: number;
     };

package/dist/ui/Select/NativePicker.d.ts

@@ -0,0 +1,16 @@
+import { Picker, PickerProps } from '@react-native-picker/picker';
+import React from 'react';
+import { SelectOption } from './Select';
+export type NativePickerProps = Omit<PickerProps, 'value' | 'onValueChange' | 'enabled'> & {
+    value: string | null;
+    options: SelectOption[];
+    onChange?: (value: string | null) => void;
+    disabled?: boolean;
+};
+export declare const NativePicker: React.ForwardRefExoticComponent<Omit<PickerProps<import("@react-native-picker/picker/typings/Picker").ItemValue>, "enabled" | "value" | "onValueChange"> & {
+    value: string | null;
+    options: SelectOption[];
+    onChange?: (value: string | null) => void;
+    disabled?: boolean;
+} & React.RefAttributes<Picker<string | number | object>>>;
+//# sourceMappingURL=NativePicker.d.ts.map

package/dist/ui/Select/NativePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativePicker.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/NativePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC,GAAG;IACzF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY;WANhB,MAAM,GAAG,IAAI;aACX,YAAY,EAAE;eACZ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;eAC9B,OAAO;0DAwCnB,CAAC"}

package/dist/ui/Select/NativePicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Picker } from '@react-native-picker/picker';
+import React from 'react';
+export const NativePicker = React.forwardRef(function NativePicker(props, ref) {
+    const { value, options, onChange, disabled, style, ...pickerProps } = props;
+    const pickerStylesProps = { themeVariant: 'light', style: style };
+    const [model, setModel] = React.useState(value);
+    const handleChange = (newValue) => {
+        const stringValue = newValue ? String(newValue).trim() : undefined;
+        if (stringValue === '' || stringValue == null) {
+            setModel(null);
+            onChange?.(null);
+        }
+        else {
+            onChange?.(stringValue);
+            setModel(stringValue);
+        }
+    };
+    return (_jsxs(Picker, { ref: ref, selectedValue: model ?? '', onValueChange: handleChange, enabled: !disabled, "aria-disabled": disabled, ...pickerProps, ...pickerStylesProps, children: [props.placeholder && _jsx(Picker.Item, { label: props.placeholder, value: '' }, 'select-item--undefined'), options.map((opt) => (_jsx(Picker.Item, { label: opt.label, value: opt.value }, opt.value)))] }));
+});

package/dist/ui/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
+import { Picker, PickerProps } from '@react-native-picker/picker';
+import React from 'react';
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export type SelectProps = Partial<Pick<PickerProps, 'onBlur' | 'onFocus'>> & FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    value: string | null;
+    placeholder?: string;
+    options: SelectOption[];
+    onChange?: (value: string | null) => void;
+};
+export declare const Select: React.ForwardRefExoticComponent<Partial<Pick<PickerProps<import("@react-native-picker/picker/typings/Picker").ItemValue>, "onFocus" | "onBlur">> & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & FormControlCaptionProps & FormControlHintProps & {
+    value: string | null;
+    placeholder?: string;
+    options: SelectOption[];
+    onChange?: (value: string | null) => void;
+} & React.RefAttributes<Picker<string | number | object>>>;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC,GACxE,qBAAqB,GACrB,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,eAAO,MAAM,MAAM;;;;;WANR,MAAM,GAAG,IAAI;kBACN,MAAM;aACX,YAAY,EAAE;eACZ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;0DAkE3C,CAAC"}

package/dist/ui/Select/Select.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, LucideIcon, } from '@alveole/components';
+import React from 'react';
+import { Platform } from 'react-native';
+import { useStyles } from './Select.styles';
+import { SelectInput } from './SelectInput';
+export const Select = React.forwardRef(function Select(props, ref) {
+    const { value, label, labelRight, hint, error, success, disabled, options, placeholder, onChange, onBlur, onFocus } = props;
+    const styles = useStyles();
+    const [focus, setFocus] = React.useState(false);
+    const handleFocus = (e) => {
+        if (!disabled)
+            setFocus(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        if (!disabled)
+            setFocus(false);
+        onBlur?.(e);
+    };
+    return (_jsxs(FormControl, { style: styles.pickerContainer, 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(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-text-input-inner", style: {
+                        ...styles.inputInner,
+                        ...(disabled ? styles.inputDisabled : {}),
+                        ...(focus ? styles.inputFocused : {}),
+                        ...(error ? styles.inputError : {}),
+                        ...(success ? styles.inputSuccess : {}),
+                    }, children: [_jsx(SelectInput, { ref: ref, value: value, placeholder: placeholder, options: options, onChange: onChange, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, style: styles.picker }), Platform.OS === 'web' && (_jsx(LucideIcon, { style: { ...styles.indicator, ...(focus ? styles.indicatorFocus : {}) }, size: "sm", name: "ChevronDown" }))] }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

@@ -0,0 +1,80 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Partial<Pick<import("@react-native-picker/picker").PickerProps<import("@react-native-picker/picker/typings/Picker").ItemValue>, "onFocus" | "onBlur">> & {
+        label: string;
+        labelRight?: React.ReactNode;
+        disabled?: boolean;
+    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+        value: string | null;
+        placeholder?: string;
+        options: import("./Select").SelectOption[];
+        onChange?: (value: string | null) => void;
+    } & import("react").RefAttributes<import("@react-native-picker/picker").Picker<string | number | object>>>;
+    styleFn: () => {
+        pickerContainer: {};
+        picker: {
+            width: "100%";
+            borderWidth: number;
+            backgroundColor: "transparent";
+            appearance: "none";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            flex: number;
+            outline: string;
+            padding: number;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            color: string;
+        };
+        inputContainer: {
+            width: "100%";
+            padding: number;
+        };
+        inputInner: {
+            display: "flex";
+            flexDirection: "row";
+            gap: import("@alveole/theme").Spacing;
+            padding: number;
+            borderRadius: number;
+            borderWidth: number;
+            borderColor: string | undefined;
+            backgroundColor: "#FFFFFF";
+            overflow: "hidden";
+            width: "100%";
+        };
+        inputError: {
+            borderColor: string;
+        };
+        inputSuccess: {
+            borderColor: string;
+        };
+        inputDisabled: {
+            borderColor: string;
+        };
+        inputFocused: {
+            outlineStyle: "solid";
+            outlineWidth: number;
+            outlineColor: string;
+            outlineOffset: number;
+        };
+        indicator: {
+            position: "absolute";
+            right: import("@alveole/theme").Spacing;
+            top: import("@alveole/theme").Spacing;
+        };
+        indicatorFocus: {};
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const States: () => import("react").JSX.Element;
+export * as Sources from './Select.stories.sources';
+//# sourceMappingURL=Select.stories.d.ts.map

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

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

package/dist/ui/Select/Select.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core';
+import { Select } from './Select';
+import { useStyles } from './Select.styles';
+export default {
+    title: 'Select',
+    tags: ['ui'],
+    experimental: false,
+    description: "Sélecteur mono-valeur natif avec label, hint et états d'erreur/succès.",
+    component: Select,
+    styleFn: useStyles,
+};
+const OPTIONS = [
+    { label: 'Option A', value: 'a' },
+    { label: 'Option B', value: 'b' },
+    { label: 'Option C', value: 'c' },
+];
+export const Default = () => {
+    const [value, setValue] = useState(null);
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(Select, { label: "S\u00E9lection", placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue }) }));
+};
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Select, { label: "Avec valeur", options: OPTIONS, value: "b" }), _jsx(Select, { label: "Erreur", options: OPTIONS, value: null, error: "Ce champ est requis" }), _jsx(Select, { label: "Succ\u00E8s", options: OPTIONS, value: "a", success: "Valide" }), _jsx(Select, { label: "D\u00E9sactiv\u00E9", options: OPTIONS, value: "a", disabled: true })] }));
+export * as Sources from './Select.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0T,CAAC;AAE/U,eAAO,MAAM,MAAM,cAAib,CAAC;AAErc,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Select/Select.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <Select label=\"Sélection\" placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} />\n    </Box>\n  );\n};";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Select label=\"Avec valeur\" options={OPTIONS} value=\"b\" />\n    <Select label=\"Erreur\" options={OPTIONS} value={null} error=\"Ce champ est requis\" />\n    <Select label=\"Succès\" options={OPTIONS} value=\"a\" success=\"Valide\" />\n    <Select label=\"Désactivé\" options={OPTIONS} value=\"a\" disabled />\n  </Box>\n);";
+export const storySources = {
+    Default,
+    States,
+};

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

@@ -0,0 +1,60 @@
+export declare const useStyles: () => {
+    pickerContainer: {};
+    picker: {
+        width: "100%";
+        borderWidth: number;
+        backgroundColor: "transparent";
+        appearance: "none";
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        flex: number;
+        outline: string;
+        padding: number;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        color: string;
+    };
+    inputContainer: {
+        width: "100%";
+        padding: number;
+    };
+    inputInner: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        padding: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string | undefined;
+        backgroundColor: "#FFFFFF";
+        overflow: "hidden";
+        width: "100%";
+    };
+    inputError: {
+        borderColor: string;
+    };
+    inputSuccess: {
+        borderColor: string;
+    };
+    inputDisabled: {
+        borderColor: string;
+    };
+    inputFocused: {
+        outlineStyle: "solid";
+        outlineWidth: number;
+        outlineColor: string;
+        outlineOffset: number;
+    };
+    indicator: {
+        position: "absolute";
+        right: import("@alveole/theme").Spacing;
+        top: import("@alveole/theme").Spacing;
+    };
+    indicatorFocus: {};
+};
+//# sourceMappingURL=Select.styles.d.ts.map

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

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

package/dist/ui/Select/Select.styles.js

@@ -0,0 +1,57 @@
+import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    pickerContainer: {},
+    picker: {
+        flex: 1,
+        outline: 'none',
+        padding: 0,
+        paddingTop: spacing('050'),
+        paddingBottom: spacing('050'),
+        paddingLeft: spacing('100'),
+        paddingRight: spacing('100'),
+        color: color.text['default-grey'],
+        ...text['Corps de texte'].MD.Regular,
+        width: '100%',
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+        appearance: 'none',
+    },
+    inputContainer: {
+        width: '100%',
+        padding: 0,
+    },
+    inputInner: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('050'),
+        padding: 0,
+        borderRadius: 8,
+        borderWidth: Platform.OS === 'ios' ? 0 : 1,
+        borderColor: Platform.OS === 'ios' ? undefined : color.border['default-grey'],
+        backgroundColor: '#FFFFFF',
+        overflow: 'hidden',
+        width: '100%',
+    },
+    inputError: {
+        borderColor: color.border['plain-error'],
+    },
+    inputSuccess: {
+        borderColor: color.border['plain-success'],
+    },
+    inputDisabled: {
+        borderColor: color.border['disabled-grey'],
+    },
+    inputFocused: {
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineColor: color.system.focus,
+        outlineOffset: 2,
+    },
+    indicator: {
+        position: 'absolute',
+        right: spacing('100'),
+        top: spacing('075'),
+    },
+    indicatorFocus: {},
+}));

package/dist/ui/Select/SelectInput.d.ts

@@ -0,0 +1,11 @@
+import { Picker } from '@react-native-picker/picker';
+import React from 'react';
+import { NativePickerProps } from './NativePicker';
+export type SelectInputProps = NativePickerProps;
+export declare const SelectInput: React.ForwardRefExoticComponent<Omit<import("@react-native-picker/picker").PickerProps<import("@react-native-picker/picker/typings/Picker").ItemValue>, "enabled" | "value" | "onValueChange"> & {
+    value: string | null;
+    options: import("./Select").SelectOption[];
+    onChange?: (value: string | null) => void;
+    disabled?: boolean;
+} & React.RefAttributes<Picker<string | number | object>>>;
+//# sourceMappingURL=SelectInput.d.ts.map

package/dist/ui/Select/SelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AAEjD,eAAO,MAAM,WAAW;;;;;0DAIvB,CAAC"}

package/dist/ui/Select/SelectInput.ios.d.ts

@@ -0,0 +1,9 @@
+import { Picker } from '@react-native-picker/picker';
+import React from 'react';
+export declare const SelectInput: React.ForwardRefExoticComponent<Omit<import("@react-native-picker/picker").PickerProps<import("@react-native-picker/picker/typings/Picker").ItemValue>, "enabled" | "value" | "onValueChange"> & {
+    value: string | null;
+    options: import("@alveole/components").SelectOption[];
+    onChange?: (value: string | null) => void;
+    disabled?: boolean;
+} & React.RefAttributes<Picker<string | number | object>>>;
+//# sourceMappingURL=SelectInput.ios.d.ts.map

package/dist/ui/Select/SelectInput.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.ios.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectInput.ios.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,eAAO,MAAM,WAAW;;;;;0DAmEvB,CAAC"}