@alveole/components 0.37.3 → 0.38.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/generated/version.d.ts +1 -1
- package/dist/generated/version.js +1 -1
- package/dist/ui/Button/Button.d.ts.map +1 -1
- package/dist/ui/Button/Button.js +45 -13
- package/dist/ui/Button/Button.stories.d.ts +3 -0
- package/dist/ui/Button/Button.stories.d.ts.map +1 -1
- package/dist/ui/Button/Button.stories.js +1 -1
- package/dist/ui/Button/Button.stories.sources.d.ts.map +1 -1
- package/dist/ui/Button/Button.stories.sources.js +1 -1
- package/dist/ui/Button/Button.styles.d.ts +3 -0
- package/dist/ui/Button/Button.styles.d.ts.map +1 -1
- package/dist/ui/Button/Button.styles.js +3 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const ALVEOLE_COMPONENTS_VERSION: "0.
|
|
1
|
+
export declare const ALVEOLE_COMPONENTS_VERSION: "0.38.1";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const ALVEOLE_COMPONENTS_VERSION = "0.
|
|
1
|
+
export const ALVEOLE_COMPONENTS_VERSION = "0.38.1";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAgC,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClE,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAhBV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM;gBACrD,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;eAChB,OAAO;qBACD,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;aACjB,OAAO;gBACJ,OAAO;8BA4OnB,CAAC"}
|
package/dist/ui/Button/Button.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ActivityIndicator,
|
|
3
|
+
import { ActivityIndicator, Pressable } from 'react-native';
|
|
4
4
|
import { Box, Typography } from '../../core';
|
|
5
5
|
import { LucideIcon } from '../LucideIcon';
|
|
6
6
|
import { useStyles } from './Button.styles';
|
|
@@ -76,10 +76,11 @@ export const Button = React.forwardRef(function Button(props, ref) {
|
|
|
76
76
|
return {
|
|
77
77
|
...applicableStyles,
|
|
78
78
|
...containerSize,
|
|
79
|
-
...(fullWidth ? { width: '100%' } : {}),
|
|
80
79
|
...(noPadding ? noPaddingStyle : {}),
|
|
81
|
-
...(borderNone ? { borderRadius: 0 } : {}),
|
|
82
80
|
...(leftAlign ? { justifyContent: 'left' } : {}),
|
|
81
|
+
borderWidth: 0,
|
|
82
|
+
borderColor: undefined,
|
|
83
|
+
borderStyle: undefined,
|
|
83
84
|
};
|
|
84
85
|
};
|
|
85
86
|
const buttonContainerHoverStyle = () => {
|
|
@@ -176,25 +177,56 @@ export const Button = React.forwardRef(function Button(props, ref) {
|
|
|
176
177
|
return { size: iconSize, color: styles.dangerIcon.color };
|
|
177
178
|
}
|
|
178
179
|
else if (variant === 'link') {
|
|
179
|
-
if (
|
|
180
|
+
if (disabled)
|
|
181
|
+
return { size: iconSize, color: styles.linkIconDisabled.color };
|
|
182
|
+
else if (state.hovered)
|
|
180
183
|
return { size: iconSize, color: styles.linkTitleHover.color };
|
|
181
184
|
return { size: iconSize, color: styles.linkIcon.color };
|
|
182
185
|
}
|
|
183
186
|
return { size: iconSize };
|
|
184
187
|
};
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
...(Platform.OS === 'ios' && variant === 'secondary'
|
|
188
|
+
const getPressableStyle = (state) => {
|
|
189
|
+
const sizeRadii = size === 'xs' || size === 'sm'
|
|
188
190
|
? {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
+
borderTopLeftRadius: styles.xsContainer.borderTopLeftRadius,
|
|
192
|
+
borderBottomLeftRadius: styles.xsContainer.borderBottomLeftRadius,
|
|
193
|
+
borderTopRightRadius: styles.xsContainer.borderTopRightRadius,
|
|
194
|
+
borderBottomRightRadius: styles.xsContainer.borderBottomRightRadius,
|
|
195
|
+
}
|
|
196
|
+
: {
|
|
191
197
|
borderTopLeftRadius: styles.container.borderTopLeftRadius,
|
|
192
198
|
borderBottomLeftRadius: styles.container.borderBottomLeftRadius,
|
|
193
199
|
borderTopRightRadius: styles.container.borderTopRightRadius,
|
|
194
200
|
borderBottomRightRadius: styles.container.borderBottomRightRadius,
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
|
|
201
|
+
};
|
|
202
|
+
const radiusStyle = borderNone
|
|
203
|
+
? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0 }
|
|
204
|
+
: sizeRadii;
|
|
205
|
+
let borderProps = {};
|
|
206
|
+
if (selected) {
|
|
207
|
+
borderProps = { borderWidth: 1, borderStyle: 'solid', borderColor: styles.selectedContainer.borderColor };
|
|
208
|
+
}
|
|
209
|
+
else if (variant === 'secondary') {
|
|
210
|
+
const borderColor = disabled
|
|
211
|
+
? styles.secondaryContainerDisabled.borderColor
|
|
212
|
+
: state.hovered
|
|
213
|
+
? styles.secondaryContainerHover.borderColor
|
|
214
|
+
: styles.secondaryContainer.borderColor;
|
|
215
|
+
borderProps = { borderWidth: disabled ? 0 : 1, borderStyle: 'solid', borderColor };
|
|
216
|
+
}
|
|
217
|
+
else if (variant === 'danger') {
|
|
218
|
+
const borderColor = disabled
|
|
219
|
+
? styles.dangerContainerDisabled.borderColor
|
|
220
|
+
: state.hovered
|
|
221
|
+
? styles.dangerContainerHover.borderColor
|
|
222
|
+
: styles.dangerContainer.borderColor;
|
|
223
|
+
borderProps = { borderWidth: disabled ? 0 : 1, borderStyle: 'solid', borderColor };
|
|
224
|
+
}
|
|
225
|
+
return {
|
|
226
|
+
...radiusStyle,
|
|
227
|
+
...borderProps,
|
|
228
|
+
...(fullWidth ? { width: '100%' } : {}),
|
|
229
|
+
};
|
|
198
230
|
};
|
|
199
|
-
return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...
|
|
231
|
+
return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...buttonProps, style: (state) => getPressableStyle(state), children: (state) => (_jsxs(Box, { style: [buttonContainerStyle({ pressed: state.pressed }), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": "false", style: textStyle({ hovered: !!state.hovered, pressed: !!state.pressed }), children: title }), isLoading ? (_jsx(ActivityIndicator, { size: "small", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
|
|
200
232
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAKpB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAKlB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAShB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAAkE,CAAC;AAEzF,eAAO,MAAM,QAAQ,mCAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAOlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
|
|
@@ -17,7 +17,7 @@ export const Primary = () => (_jsxs(Box, { display: "flex", flexDirection: "row"
|
|
|
17
17
|
export const Secondary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "secondary", title: "Bouton secondary" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true })] }));
|
|
18
18
|
export const Tertiary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "tertiary", title: "Bouton tertiary" }), _jsx(Button, { variant: "tertiary", title: "Disabled", disabled: true })] }));
|
|
19
19
|
export const Danger = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "danger", title: "Bouton danger" }), _jsx(Button, { variant: "danger", title: "Disabled", disabled: true })] }));
|
|
20
|
-
export const Link = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(Typography, { children: "Deprecated" }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true })] })] }));
|
|
20
|
+
export const Link = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(Typography, { children: "Deprecated" }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true, startIcon: "Pen" })] })] }));
|
|
21
21
|
export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "primary", title: "Start Icon", startIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" })] }));
|
|
22
22
|
export const FullWidth = () => _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true });
|
|
23
23
|
export const Selected = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 4, children: _jsx(Button, { variant: "secondary", title: "Selected", selected: true }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAA+T,CAAC;AAElV,eAAO,MAAM,OAAO,cAA4O,CAAC;AAEjQ,eAAO,MAAM,SAAS,cAAoP,CAAC;AAE3Q,eAAO,MAAM,QAAQ,cAAgP,CAAC;AAEtQ,eAAO,MAAM,MAAM,cAAwO,CAAC;AAE5P,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAA+T,CAAC;AAElV,eAAO,MAAM,OAAO,cAA4O,CAAC;AAEjQ,eAAO,MAAM,SAAS,cAAoP,CAAC;AAE3Q,eAAO,MAAM,QAAQ,cAAgP,CAAC;AAEtQ,eAAO,MAAM,MAAM,cAAwO,CAAC;AAE5P,eAAO,MAAM,IAAI,cAAua,CAAC;AAEzb,eAAO,MAAM,KAAK,cAAic,CAAC;AAEpd,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,QAAQ,cAAkL,CAAC;AAExM,eAAO,MAAM,MAAM,cAAuS,CAAC;AAE3T,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
|
|
@@ -5,7 +5,7 @@ export const Primary = () => "export const Primary = () => (\n <Box display=\"f
|
|
|
5
5
|
export const Secondary = () => "export const Secondary = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n <Button variant=\"secondary\" title=\"Bouton secondary\" />\n <Button variant=\"secondary\" title=\"Disabled\" disabled />\n </Box>\n);";
|
|
6
6
|
export const Tertiary = () => "export const Tertiary = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n <Button variant=\"tertiary\" title=\"Bouton tertiary\" />\n <Button variant=\"tertiary\" title=\"Disabled\" disabled />\n </Box>\n);";
|
|
7
7
|
export const Danger = () => "export const Danger = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n <Button variant=\"danger\" title=\"Bouton danger\" />\n <Button variant=\"danger\" title=\"Disabled\" disabled />\n </Box>\n);";
|
|
8
|
-
export const Link = () => "export const Link = () => (\n <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n <Typography>Deprecated</Typography>\n <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n <Button variant=\"link\" title=\"Bouton link\" />\n <Button variant=\"link\" title=\"Disabled\" disabled />\n </Box>\n </Box>\n);";
|
|
8
|
+
export const Link = () => "export const Link = () => (\n <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n <Typography>Deprecated</Typography>\n <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n <Button variant=\"link\" title=\"Bouton link\" />\n <Button variant=\"link\" title=\"Disabled\" disabled />\n <Button variant=\"link\" title=\"Disabled\" disabled startIcon=\"Pen\" />\n </Box>\n </Box>\n);";
|
|
9
9
|
export const Icons = () => "export const Icons = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n <Button variant=\"primary\" title=\"Start Icon\" startIcon=\"Plus\" />\n <Button variant=\"primary\" title=\"End Icon\" endIcon=\"Plus\" />\n <Button variant=\"primary\" title=\"End Icon\" endIcon=\"Plus\" />\n <ButtonIcon variant=\"primary\" icon=\"CircleUser\" />\n <ButtonIcon variant=\"primary\" icon=\"CircleUser\" />\n </Box>\n);";
|
|
10
10
|
export const FullWidth = () => "export const FullWidth = () => <Button variant=\"primary\" title=\"Full Width\" fullWidth />;";
|
|
11
11
|
export const Selected = () => "export const Selected = () => (\n <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n <Button variant=\"secondary\" title=\"Selected\" selected />\n </Box>\n);";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoRnB,CAAC"}
|