@alveole/components 0.43.2 → 1.0.0

package/dist/ui/Select/SelectInput.ios.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, LucideIcon, TextInput } from '@alveole/components';
+import React, { useCallback, useState } from 'react';
+import { Keyboard, Modal, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { NativePicker } from './NativePicker';
+export const SelectInput = React.forwardRef(function SelectInput(props, ref) {
+    const { value, placeholder, options, onChange, disabled, ...pickerProps } = props;
+    const { bottom } = useSafeAreaInsets();
+    const [model, setModel] = useState(value);
+    const [open, setOpen] = useState(false);
+    const handleOpenModal = () => {
+        if (Keyboard.isVisible())
+            Keyboard.dismiss();
+        if (!disabled)
+            setOpen(true);
+    };
+    const handleCancel = useCallback(() => {
+        setModel(value);
+        setOpen(false);
+    }, [value]);
+    const handleValidate = useCallback(() => {
+        onChange?.(model);
+        setOpen(false);
+    }, [model, onChange]);
+    const selectedOption = React.useMemo(() => options.find((opt) => opt.value === value), [options, value]);
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { visible: open, transparent: true, animationType: "slide", onRequestClose: handleCancel, children: _jsxs(View, { style: StyleSheet.absoluteFill, children: [_jsx(Box, { onPress: handleCancel, style: { flex: 1 } }), _jsxs(Box, { style: { backgroundColor: '#FFFFFF', paddingBottom: bottom }, children: [_jsx(NativePicker, { ref: ref, ...pickerProps, value: model ?? null, placeholder: placeholder, options: options, onChange: setModel, disabled: false, style: { flex: 1 } }), _jsxs(Box, { style: { paddingBottom: 8, paddingHorizontal: 12, flexDirection: 'row', gap: 12 }, children: [_jsx(Button, { variant: "tertiary", title: "Annuler", onPress: handleCancel }), _jsx(Button, { variant: "primary", title: "Valider", onPress: handleValidate })] })] })] }) }), _jsx(TextInput, { readOnly: true, placeholder: placeholder, value: selectedOption?.label || '', disabled: disabled, endAdornment: _jsx(Box, { onPress: handleOpenModal, mt: 'auto', mb: 'auto', mr: '075', p: '025', children: _jsx(LucideIcon, { name: "ChevronDown", size: "md" }) }), onPress: handleOpenModal })] }));
+});

package/dist/ui/Select/SelectInput.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { NativePicker } from './NativePicker';
+export const SelectInput = React.forwardRef(function SelectInput(props, ref) {
+    return _jsx(NativePicker, { ref: ref, ...props });
+});

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

@@ -0,0 +1,7 @@
+export { NativePicker } from './NativePicker';
+export type { NativePickerProps } from './NativePicker';
+export { Select } from './Select';
+export type { SelectOption, SelectProps } from './Select';
+export { SelectInput } from './SelectInput';
+export type { SelectInputProps } from './SelectInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/ui/Select/index.js

@@ -0,0 +1,3 @@
+export { NativePicker } from './NativePicker';
+export { Select } from './Select';
+export { SelectInput } from './SelectInput';

package/dist/ui/SelectMultiple/SelectMultiple.d.ts

@@ -0,0 +1,14 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
+export type SelectMultipleOption = {
+    label: string;
+    value: string | number;
+};
+export type SelectMultipleProps = FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    options?: SelectMultipleOption[];
+    value?: (string | number)[];
+    placeholder?: string;
+    disabled?: boolean;
+    onChange?: (value: string[]) => void;
+};
+export declare const SelectMultiple: (props: SelectMultipleProps) => import("react").JSX.Element;
+//# sourceMappingURL=SelectMultiple.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultiple.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/SelectMultiple.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,qBAAqB,EAAc,MAAM,qBAAqB,CAAC;AAEvH,MAAM,MAAM,oBAAoB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAE7E,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,GACrD,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC,CAAC;AAEJ,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAGxD,CAAC"}

package/dist/ui/SelectMultiple/SelectMultiple.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@alveole/components';
+export const SelectMultiple = (props) => {
+    const { value } = props;
+    return _jsx(Typography, { children: JSON.stringify(value) });
+};

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

@@ -0,0 +1,77 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: (props: import("./SelectMultiple").SelectMultipleProps) => import("react").JSX.Element;
+    styleFn: () => {
+        select: {
+            flex: number;
+            outline: string;
+            paddingTop: number;
+            paddingBottom: number;
+            color: string;
+            width: "100%";
+            borderWidth: number;
+            backgroundColor: "transparent";
+            appearance: "none";
+        };
+        inputContainer: {
+            width: "100%";
+        };
+        inputDisabled: {
+            borderRadius: number;
+            borderColor: string;
+        };
+        control: {
+            minHeight: import("@alveole/theme").Spacing;
+            flexWrap: "inherit";
+            borderColor: string;
+        };
+        controlDisabled: {
+            borderColor: string;
+        };
+        valueContainer: {
+            minHeight: number;
+            paddingLeft: import("@alveole/theme").Spacing;
+        };
+        multiValue: {
+            borderRadius: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+            paddingLeft: import("@alveole/theme").Spacing;
+        };
+        multiValueDisabled: {
+            backgroundColor: "#FFFFFF";
+            borderColor: string;
+            borderWidth: number;
+            borderRadius: import("@alveole/theme").Spacing;
+            borderStyle: "solid";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+        };
+        multiValueRemoveHover: {
+            backgroundColor: string;
+            cursor: "pointer";
+        };
+        multiValueRemoveDisabled: {
+            display: "none";
+        };
+        dropdownIndicator: {
+            padding: import("@alveole/theme").Spacing;
+        };
+        dropdownIndicatorDisabled: {
+            display: "none";
+        };
+        indicatorSeparatorDisabled: {
+            display: "none";
+        };
+        clearIndicator: {
+            padding: import("@alveole/theme").Spacing;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const States: () => import("react").JSX.Element;
+export * as Sources from './SelectMultiple.stories.sources';
+//# sourceMappingURL=SelectMultiple.stories.d.ts.map

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

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

package/dist/ui/SelectMultiple/SelectMultiple.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core';
+import { SelectMultiple } from './SelectMultiple';
+import { useStyles } from './SelectMultiple.styles';
+export default {
+    title: 'SelectMultiple',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Sélection multiple via une liste déroulante (web) ou un stub natif.',
+    component: SelectMultiple,
+    styleFn: useStyles,
+};
+const OPTIONS = [
+    { label: 'Option A', value: 'a' },
+    { label: 'Option B', value: 'b' },
+    { label: 'Option C', value: 'c' },
+    { label: 'Option D', value: 'd' },
+];
+export const Default = () => {
+    const [value, setValue] = useState([]);
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(SelectMultiple, { label: "S\u00E9lection", options: OPTIONS, value: value, onChange: setValue }) }));
+};
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(SelectMultiple, { label: "Avec valeurs", options: OPTIONS, value: ['a', 'c'] }), _jsx(SelectMultiple, { label: "Erreur", options: OPTIONS, value: [], error: "Ce champ est requis" }), _jsx(SelectMultiple, { label: "D\u00E9sactiv\u00E9", options: OPTIONS, value: ['b'], disabled: true })] }));
+export * as Sources from './SelectMultiple.stories.sources';

package/dist/ui/SelectMultiple/SelectMultiple.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=SelectMultiple.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultiple.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/SelectMultiple.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgS,CAAC;AAErT,eAAO,MAAM,MAAM,cAA+X,CAAC;AAEnZ,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/SelectMultiple/SelectMultiple.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string[]>([]);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <SelectMultiple label=\"Sélection\" 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    <SelectMultiple label=\"Avec valeurs\" options={OPTIONS} value={['a', 'c']} />\n    <SelectMultiple label=\"Erreur\" options={OPTIONS} value={[]} error=\"Ce champ est requis\" />\n    <SelectMultiple label=\"Désactivé\" options={OPTIONS} value={['b']} disabled />\n  </Box>\n);";
+export const storySources = {
+    Default,
+    States,
+};

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

@@ -0,0 +1,66 @@
+export declare const useStyles: () => {
+    select: {
+        flex: number;
+        outline: string;
+        paddingTop: number;
+        paddingBottom: number;
+        color: string;
+        width: "100%";
+        borderWidth: number;
+        backgroundColor: "transparent";
+        appearance: "none";
+    };
+    inputContainer: {
+        width: "100%";
+    };
+    inputDisabled: {
+        borderRadius: number;
+        borderColor: string;
+    };
+    control: {
+        minHeight: import("@alveole/theme").Spacing;
+        flexWrap: "inherit";
+        borderColor: string;
+    };
+    controlDisabled: {
+        borderColor: string;
+    };
+    valueContainer: {
+        minHeight: number;
+        paddingLeft: import("@alveole/theme").Spacing;
+    };
+    multiValue: {
+        borderRadius: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+        paddingLeft: import("@alveole/theme").Spacing;
+    };
+    multiValueDisabled: {
+        backgroundColor: "#FFFFFF";
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: import("@alveole/theme").Spacing;
+        borderStyle: "solid";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+    };
+    multiValueRemoveHover: {
+        backgroundColor: string;
+        cursor: "pointer";
+    };
+    multiValueRemoveDisabled: {
+        display: "none";
+    };
+    dropdownIndicator: {
+        padding: import("@alveole/theme").Spacing;
+    };
+    dropdownIndicatorDisabled: {
+        display: "none";
+    };
+    indicatorSeparatorDisabled: {
+        display: "none";
+    };
+    clearIndicator: {
+        padding: import("@alveole/theme").Spacing;
+    };
+};
+//# sourceMappingURL=SelectMultiple.styles.d.ts.map

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

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

package/dist/ui/SelectMultiple/SelectMultiple.styles.js

@@ -0,0 +1,66 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing }) => ({
+    select: {
+        flex: 1,
+        outline: 'none',
+        paddingTop: 0,
+        paddingBottom: 0,
+        color: color.text['default-grey'],
+        width: '100%',
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+        appearance: 'none',
+    },
+    inputContainer: {
+        width: '100%',
+    },
+    inputDisabled: {
+        borderRadius: 6,
+        borderColor: color.background['disabled-grey'],
+    },
+    control: {
+        minHeight: spacing('200'),
+        flexWrap: 'inherit',
+        borderColor: color.border['default-grey'],
+    },
+    controlDisabled: {
+        borderColor: color.background['disabled-grey'],
+    },
+    valueContainer: {
+        minHeight: 38,
+        paddingLeft: spacing('100'),
+    },
+    multiValue: {
+        borderRadius: spacing('025'),
+        backgroundColor: color.background.badge.default,
+        paddingLeft: spacing('025'),
+    },
+    multiValueDisabled: {
+        backgroundColor: '#FFFFFF',
+        borderColor: color.border['plain-grey'],
+        borderWidth: 1,
+        borderRadius: spacing('025'),
+        borderStyle: 'solid',
+        paddingLeft: spacing('025'),
+        paddingRight: spacing('025'),
+    },
+    multiValueRemoveHover: {
+        backgroundColor: color.background.button.secondary.hover,
+        cursor: 'pointer',
+    },
+    multiValueRemoveDisabled: {
+        display: 'none',
+    },
+    dropdownIndicator: {
+        padding: spacing('025'),
+    },
+    dropdownIndicatorDisabled: {
+        display: 'none',
+    },
+    indicatorSeparatorDisabled: {
+        display: 'none',
+    },
+    clearIndicator: {
+        padding: spacing('025'),
+    },
+}));

package/dist/ui/SelectMultiple/SelectMultiple.web.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SelectMultipleOption } from './SelectMultiple';
+export declare const SelectMultiple: React.ForwardRefExoticComponent<{
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & import("@alveole/components").FormControlCaptionProps & import("@alveole/components").FormControlHintProps & {
+    options?: SelectMultipleOption[];
+    value?: (string | number)[];
+    placeholder?: string;
+    disabled?: boolean;
+    onChange?: (value: string[]) => void;
+} & React.RefAttributes<any>>;
+//# sourceMappingURL=SelectMultiple.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultiple.web.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/SelectMultiple.web.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAuB,MAAM,kBAAkB,CAAC;AAGlF,eAAO,MAAM,cAAc;;;;;;;;;;6BA4EzB,CAAC"}

package/dist/ui/SelectMultiple/SelectMultiple.web.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import React from 'react';
+import ReactSelect from 'react-select';
+import { useStyles } from './SelectMultiple.styles';
+export const SelectMultiple = React.forwardRef(function SelectMultiple(props, ref) {
+    const { value, label, labelRight, hint, error, success, placeholder = '', disabled, options, onChange } = props;
+    const styles = useStyles();
+    const selectStyles = {
+        control: (s, p) => ({
+            ...s,
+            ...styles.control,
+            ...(p.isDisabled ? styles.controlDisabled : {}),
+        }),
+        valueContainer: s => ({
+            ...s,
+            ...styles.valueContainer,
+        }),
+        multiValue: (s, p) => ({
+            ...s,
+            ...styles.multiValue,
+            ...(p.isDisabled ? styles.multiValueDisabled : {}),
+        }),
+        multiValueRemove: (s, p) => ({
+            ...s,
+            ':hover': styles.multiValueRemoveHover,
+            ...(p.isDisabled ? styles.multiValueRemoveDisabled : {}),
+        }),
+        dropdownIndicator: (s, p) => ({
+            ...s,
+            ...styles.dropdownIndicator,
+            ...(p.isDisabled ? styles.dropdownIndicatorDisabled : {}),
+        }),
+        indicatorSeparator: (s, p) => ({
+            ...s,
+            ...(p.isDisabled ? styles.indicatorSeparatorDisabled : {}),
+        }),
+        clearIndicator: s => ({ ...s, ...styles.clearIndicator }),
+    };
+    const displayValue = React.useMemo(() => options?.filter(option => Array.isArray(value) && value.some(v => `${v}` === `${option.value}`)), [options, value]);
+    return (_jsxs(FormControl, { style: styles.select, 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-select-input", style: styles.inputContainer, children: _jsx(Box, { style: { ...(disabled ? styles.inputDisabled : {}) }, children: _jsx(ReactSelect, { ref: ref, value: displayValue, styles: selectStyles, isMulti: true, placeholder: placeholder, options: options, noOptionsMessage: () => 'Aucun résultat', onChange: selectedOptions => {
+                            if (Array.isArray(selectedOptions)) {
+                                onChange?.(selectedOptions.map(o => String(o.value)));
+                            }
+                            else {
+                                onChange?.([]);
+                            }
+                        }, isDisabled: disabled }) }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/ui/SelectMultiple/index.js

@@ -0,0 +1 @@
+export { SelectMultiple } from './SelectMultiple';

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

@@ -9,7 +9,7 @@ declare const _default: {
         sidebar: {
             backgroundColor: "#FFFFFF";
             borderRightWidth: number;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             display: "flex";
             flexDirection: "column";
             alignItems: "flex-start";
@@ -46,7 +46,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         groupTitleMobile: {
-            color: "#5F6571";
+            color: string;
             paddingLeft: import("@alveole/theme").Spacing;
             paddingRight: import("@alveole/theme").Spacing;
             paddingTop: import("@alveole/theme").Spacing;
@@ -65,8 +65,8 @@ declare const _default: {
             gap: import("@alveole/theme").Spacing;
             padding: import("@alveole/theme").Spacing;
             width: "100%";
-            color: "#151617";
-            stroke: "#151617";
+            color: string;
+            stroke: string;
         };
         sidebarItemMobile: {
             display: "flex";
@@ -78,18 +78,18 @@ declare const _default: {
             paddingTop: import("@alveole/theme").Spacing;
             paddingBottom: import("@alveole/theme").Spacing;
             width: "100%";
-            color: "#151617";
-            stroke: "#151617";
+            color: string;
+            stroke: string;
         };
         sidebarItemSelectedDesktop: {
-            backgroundColor: "#EFF1F6";
+            backgroundColor: string;
         };
         sidebarItemSelectedMobile: {
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#F2F9FF";
+            backgroundColor: string;
         };
         sidebarItemHover: {
-            backgroundColor: "#F6F7F8";
+            backgroundColor: string;
         };
         sidebarItemCurrentHover: {
             backgroundColor: "#EFF1F6";
@@ -117,8 +117,8 @@ declare const _default: {
             marginRight: import("@alveole/theme").Spacing;
         };
         sidebarItemTitleSelectedDesktop: {
-            color: "#373A3F";
-            stroke: "#373A3F";
+            color: string;
+            stroke: string;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -126,8 +126,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleSelectedMobile: {
-            color: "#373A3F";
-            stroke: "#5F6571";
+            color: string;
+            stroke: string;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -135,8 +135,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleDesktop: {
-            color: "#151617";
-            stroke: "#151617";
+            color: string;
+            stroke: string;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -144,8 +144,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleMobile: {
-            color: "#373A3F";
-            stroke: "#373A3F";
+            color: string;
+            stroke: string;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -160,7 +160,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleCurrentHoverMobile: {
-            color: "#002764";
+            color: string;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -176,7 +176,7 @@ declare const _default: {
         sidebarItemSelectedIndicatorContent: {
             width: "100%";
             minHeight: import("@alveole/theme").Spacing;
-            backgroundColor: "#0264C7";
+            backgroundColor: string;
             margin: string;
             borderRadius: import("@alveole/theme").Spacing;
         };

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

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     sidebar: {
         backgroundColor: "#FFFFFF";
         borderRightWidth: number;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         display: "flex";
         flexDirection: "column";
         alignItems: "flex-start";
@@ -39,7 +39,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     groupTitleMobile: {
-        color: "#5F6571";
+        color: string;
         paddingLeft: import("@alveole/theme").Spacing;
         paddingRight: import("@alveole/theme").Spacing;
         paddingTop: import("@alveole/theme").Spacing;
@@ -58,8 +58,8 @@ export declare const useStyles: () => {
         gap: import("@alveole/theme").Spacing;
         padding: import("@alveole/theme").Spacing;
         width: "100%";
-        color: "#151617";
-        stroke: "#151617";
+        color: string;
+        stroke: string;
     };
     sidebarItemMobile: {
         display: "flex";
@@ -71,18 +71,18 @@ export declare const useStyles: () => {
         paddingTop: import("@alveole/theme").Spacing;
         paddingBottom: import("@alveole/theme").Spacing;
         width: "100%";
-        color: "#151617";
-        stroke: "#151617";
+        color: string;
+        stroke: string;
     };
     sidebarItemSelectedDesktop: {
-        backgroundColor: "#EFF1F6";
+        backgroundColor: string;
     };
     sidebarItemSelectedMobile: {
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#F2F9FF";
+        backgroundColor: string;
     };
     sidebarItemHover: {
-        backgroundColor: "#F6F7F8";
+        backgroundColor: string;
     };
     sidebarItemCurrentHover: {
         backgroundColor: "#EFF1F6";
@@ -110,8 +110,8 @@ export declare const useStyles: () => {
         marginRight: import("@alveole/theme").Spacing;
     };
     sidebarItemTitleSelectedDesktop: {
-        color: "#373A3F";
-        stroke: "#373A3F";
+        color: string;
+        stroke: string;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -119,8 +119,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleSelectedMobile: {
-        color: "#373A3F";
-        stroke: "#5F6571";
+        color: string;
+        stroke: string;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -128,8 +128,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleDesktop: {
-        color: "#151617";
-        stroke: "#151617";
+        color: string;
+        stroke: string;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -137,8 +137,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleMobile: {
-        color: "#373A3F";
-        stroke: "#373A3F";
+        color: string;
+        stroke: string;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -153,7 +153,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleCurrentHoverMobile: {
-        color: "#002764";
+        color: string;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -169,7 +169,7 @@ export declare const useStyles: () => {
     sidebarItemSelectedIndicatorContent: {
         width: "100%";
         minHeight: import("@alveole/theme").Spacing;
-        backgroundColor: "#0264C7";
+        backgroundColor: string;
         margin: string;
         borderRadius: import("@alveole/theme").Spacing;
     };