@alveole/components 0.33.1 → 0.34.0

package/dist/stories/index.d.ts

@@ -22,6 +22,7 @@ export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
 export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
 export * as PopoverStory from '../ui/Popover/Popover.stories';
+export * as ProgressBarStory from '../ui/ProgressBar/ProgressBar.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as SidebarStory from '../ui/Sidebar/Sidebar.stories';
 export * as TabsStory from '../ui/Tabs/Tabs.stories';

package/dist/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,mBAAmB,MAAM,6CAA6C,CAAC;AACnF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,mBAAmB,MAAM,6CAA6C,CAAC;AACnF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}

package/dist/stories/index.js

@@ -24,6 +24,7 @@ export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
 export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
 export * as PopoverStory from '../ui/Popover/Popover.stories';
+export * as ProgressBarStory from '../ui/ProgressBar/ProgressBar.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as SidebarStory from '../ui/Sidebar/Sidebar.stories';
 export * as TabsStory from '../ui/Tabs/Tabs.stories';

package/dist/ui/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '@alveole/components';
+type ProgressBarMode = 'determinate' | 'indeterminate' | 'loop';
+export declare const PROGRESS_BAR_GAP = 8;
+export declare const PROGRESS_BAR_HEIGHT = 8;
+export declare const PROGRESS_DURATION = 2000;
+export declare const PROGRESS_DETERMINATE_DURATION = 400;
+export type ProgressBarProps = BoxProps & {
+    value?: number;
+    visible?: boolean;
+    indicator?: boolean;
+    mode?: ProgressBarMode;
+};
+export declare const ProgressBar: (props: ProgressBarProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAK/C,KAAK,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,MAAM,CAAC;AAEhE,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,mDAclD,CAAC"}

package/dist/ui/ProgressBar/ProgressBar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProgressBarDeterminate } from './ProgressBarDeterminate';
+import { ProgressBarIndeterminate } from './ProgressBarIndeterminate';
+import { ProgressBarLoop } from './ProgressBarLoop';
+export const PROGRESS_BAR_GAP = 8;
+export const PROGRESS_BAR_HEIGHT = 8;
+export const PROGRESS_DURATION = 2000;
+export const PROGRESS_DETERMINATE_DURATION = 400;
+export const ProgressBar = (props) => {
+    const { visible = true, value, mode } = props;
+    const clampedValue = typeof value === 'number' ? Math.max(0, Math.min(1, value)) : undefined;
+    const resolvedMode = mode ?? (typeof clampedValue === 'number' ? 'determinate' : 'indeterminate');
+    if (!visible)
+        return null;
+    if (resolvedMode === 'determinate' && typeof clampedValue === 'number')
+        return _jsx(ProgressBarDeterminate, { clamped: clampedValue, ...props });
+    if (resolvedMode === 'loop')
+        return _jsx(ProgressBarLoop, { ...props });
+    return _jsx(ProgressBarIndeterminate, { ...props });
+};

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

@@ -0,0 +1,76 @@
+declare const _default: {
+    title: string;
+    tags: "Kit"[];
+    experimental: false;
+    description: string;
+    component: (props: import("@alveole/components").ProgressBarProps) => import("react/jsx-runtime").JSX.Element | null;
+    styleFn: () => {
+        determinate: {
+            width: "100%";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        progressTrack: {
+            width: "100%";
+            overflow: "hidden";
+            position: "relative";
+        };
+        progressed: {
+            height: "100%";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            backgroundColor: "#D2E8FE";
+        };
+        progressedAbsolute: {
+            position: "absolute";
+            top: number;
+            bottom: number;
+            left: number;
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            backgroundColor: "#D2E8FE";
+        };
+        remaining: {
+            height: "100%";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            backgroundColor: "#DEE3EC";
+        };
+        remainingAbsolute: {
+            position: "absolute";
+            top: number;
+            bottom: number;
+            right: number;
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            backgroundColor: "#DEE3EC";
+        };
+        progress: {
+            backgroundColor: "#D2E8FE";
+            width: "100%";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            overflow: "hidden";
+        };
+        bar: {
+            position: "absolute";
+            top: number;
+            bottom: number;
+            width: "100%";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            backgroundColor: "#DEE3EC";
+        };
+        indicator: {
+            color: "#033B72";
+            marginTop: import("@alveole/theme").Spacing;
+            marginLeft: string;
+            marginRight: string;
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+    };
+};
+export default _default;
+export declare const Determinate: () => import("react/jsx-runtime").JSX.Element;
+export declare const Loop: () => import("react/jsx-runtime").JSX.Element;
+export declare const Indeterminate: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithIndicator: () => import("react/jsx-runtime").JSX.Element;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,WAAW,+CAAwD,CAAC;AAEjF,eAAO,MAAM,IAAI,+CAAoC,CAAC;AAEtD,eAAO,MAAM,aAAa,+CAA6C,CAAC;AAExE,eAAO,MAAM,aAAa,+CAAkE,CAAC;AAE7F,eAAO,MAAM,KAAK,+CAmBjB,CAAC"}

package/dist/ui/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button } from '@alveole/components';
+import React from 'react';
+import { ProgressBar } from './ProgressBar';
+import { useStyles } from './ProgressBar.styles';
+export default {
+    title: 'ProgressBar',
+    tags: ['Kit'],
+    experimental: false,
+    description: 'bar de progression',
+    component: ProgressBar,
+    styleFn: useStyles,
+};
+export const Determinate = () => _jsx(ProgressBar, { mode: "determinate", value: 0.25 });
+export const Loop = () => _jsx(ProgressBar, { mode: "loop" });
+export const Indeterminate = () => _jsx(ProgressBar, { mode: "indeterminate" });
+export const WithIndicator = () => _jsx(ProgressBar, { mode: "determinate", indicator: true, value: 0.25 });
+export const Usage = () => {
+    const [value, setValue] = React.useState(0.25);
+    return (_jsxs(Box, { children: [_jsx(ProgressBar, { value: value }), _jsx(Box, { mt: '2W', width: 150, children: _jsx(Button, { title: value < 1 ? 'Augmenter' : 'Réduire', variant: "secondary", onPress: () => {
+                        if (value < 1)
+                            setValue(v => v + 0.25);
+                        else
+                            setValue(v => v - 0.25);
+                    } }) })] }));
+};

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

@@ -0,0 +1,63 @@
+export declare const useStyles: () => {
+    determinate: {
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    progressTrack: {
+        width: "100%";
+        overflow: "hidden";
+        position: "relative";
+    };
+    progressed: {
+        height: "100%";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        backgroundColor: "#D2E8FE";
+    };
+    progressedAbsolute: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        backgroundColor: "#D2E8FE";
+    };
+    remaining: {
+        height: "100%";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        backgroundColor: "#DEE3EC";
+    };
+    remainingAbsolute: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        right: number;
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        backgroundColor: "#DEE3EC";
+    };
+    progress: {
+        backgroundColor: "#D2E8FE";
+        width: "100%";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        overflow: "hidden";
+    };
+    bar: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        width: "100%";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        backgroundColor: "#DEE3EC";
+    };
+    indicator: {
+        color: "#033B72";
+        marginTop: import("@alveole/theme").Spacing;
+        marginLeft: string;
+        marginRight: string;
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+};
+//# sourceMappingURL=ProgressBar.styles.d.ts.map

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

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

package/dist/ui/ProgressBar/ProgressBar.styles.js

@@ -0,0 +1,60 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
+    determinate: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    progressTrack: {
+        width: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    progressed: {
+        height: '100%',
+        borderRadius: radius('sm'),
+        backgroundColor: color.light.background['action-low-primary'],
+    },
+    progressedAbsolute: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        borderRadius: radius('sm'),
+        backgroundColor: color.light.background['action-low-primary'],
+    },
+    remaining: {
+        height: '100%',
+        borderRadius: radius('sm'),
+        backgroundColor: color.light.border['default-grey'],
+    },
+    remainingAbsolute: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        borderRadius: radius('sm'),
+        backgroundColor: color.light.border['default-grey'],
+    },
+    progress: {
+        backgroundColor: color.light.background['action-low-primary'],
+        width: '100%',
+        borderRadius: radius('sm'),
+        overflow: 'hidden',
+    },
+    bar: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        width: '100%',
+        borderRadius: radius('sm'),
+        backgroundColor: color.light.border['default-grey'],
+    },
+    indicator: {
+        ...text['Corps de texte'].XS.Regular,
+        color: color.light.artwork['major-primary'],
+        marginTop: spacing('1W'),
+        marginLeft: 'auto',
+        marginRight: 'auto',
+    },
+}));

package/dist/ui/ProgressBar/ProgressBarDeterminate.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '@alveole/components';
+export type ProgressBarDeterminateProps = BoxProps & {
+    indicator?: boolean;
+    clamped: number;
+};
+export declare const ProgressBarDeterminate: (props: ProgressBarDeterminateProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBarDeterminate.d.ts.map

package/dist/ui/ProgressBar/ProgressBarDeterminate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarDeterminate.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarDeterminate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AAMhE,MAAM,MAAM,2BAA2B,GAAG,QAAQ,GAAG;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,2BAA2B,4CA2CxE,CAAC"}

package/dist/ui/ProgressBar/ProgressBarDeterminate.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import React from 'react';
+import { Animated, Easing } from 'react-native';
+import { PROGRESS_BAR_GAP, PROGRESS_BAR_HEIGHT, PROGRESS_DETERMINATE_DURATION } from './ProgressBar';
+import { useStyles } from './ProgressBar.styles';
+export const ProgressBarDeterminate = (props) => {
+    const { clamped, indicator, style, onLayout, ...boxProps } = props;
+    const styles = useStyles();
+    const animatedProgress = React.useRef(new Animated.Value(clamped)).current;
+    const remaining = React.useMemo(() => Animated.subtract(1, animatedProgress), [animatedProgress]);
+    const animatedGap = React.useMemo(() => animatedProgress.interpolate({
+        inputRange: [0, 0.0001, 0.9999, 1],
+        outputRange: [0, PROGRESS_BAR_GAP, PROGRESS_BAR_GAP, 0],
+        extrapolate: 'clamp',
+    }), [animatedProgress]);
+    React.useEffect(() => {
+        const anim = Animated.timing(animatedProgress, {
+            toValue: clamped,
+            duration: PROGRESS_DETERMINATE_DURATION,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: false,
+        });
+        anim.start();
+        return () => anim.stop();
+    }, [animatedProgress, clamped]);
+    return (_jsxs(Box, { children: [_jsxs(Box, { style: [styles.determinate, { height: PROGRESS_BAR_HEIGHT }, style], ...boxProps, children: [_jsx(Animated.View, { style: [styles.progressed, { flex: animatedProgress }] }), _jsx(Animated.View, { style: { width: animatedGap } }), _jsx(Animated.View, { style: [styles.remaining, { flex: remaining }] })] }), indicator && (_jsx(Box, { children: _jsxs(Typography, { style: styles.indicator, children: [clamped * 100, "%"] }) }))] }));
+};

package/dist/ui/ProgressBar/ProgressBarIndeterminate.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '@alveole/components';
+export type ProgressBarIndeterminateProps = BoxProps;
+export declare const ProgressBarIndeterminate: (props: ProgressBarIndeterminateProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBarIndeterminate.d.ts.map

package/dist/ui/ProgressBar/ProgressBarIndeterminate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarIndeterminate.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarIndeterminate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMpD,MAAM,MAAM,6BAA6B,GAAG,QAAQ,CAAC;AAErD,eAAO,MAAM,wBAAwB,GAAI,OAAO,6BAA6B,4CA6D5E,CAAC"}

package/dist/ui/ProgressBar/ProgressBarIndeterminate.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import React from 'react';
+import { Animated, Easing } from 'react-native';
+import { PROGRESS_BAR_HEIGHT, PROGRESS_DURATION } from './ProgressBar';
+import { useStyles } from './ProgressBar.styles';
+export const ProgressBarIndeterminate = (props) => {
+    const { style, ...boxProps } = props;
+    const progress = React.useRef(new Animated.Value(0)).current;
+    const styles = useStyles();
+    const translateRange = React.useMemo(() => progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['-50%', '150%'],
+    }), [progress]);
+    const scaleRange = React.useMemo(() => progress.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [0.2, 1, 0.2],
+    }), [progress]);
+    React.useEffect(() => {
+        let anim = null;
+        const run = () => {
+            progress.setValue(0);
+            anim = Animated.timing(progress, {
+                toValue: 1,
+                duration: PROGRESS_DURATION,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            });
+            anim.start(({ finished }) => {
+                if (finished)
+                    run();
+            });
+        };
+        run();
+        return () => anim?.stop();
+    }, [progress]);
+    return (_jsx(Box, { style: [styles.progress, { height: PROGRESS_BAR_HEIGHT, marginTop: -PROGRESS_BAR_HEIGHT }, style], ...boxProps, children: _jsx(Animated.View, { style: [
+                {
+                    transform: [{ translateX: translateRange }, { scaleX: scaleRange }],
+                },
+                styles.bar,
+            ] }) }));
+};

package/dist/ui/ProgressBar/ProgressBarLoop.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '@alveole/components';
+export type ProgressBarLoopProps = BoxProps;
+export declare const ProgressBarLoop: (props: ProgressBarLoopProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBarLoop.d.ts.map

package/dist/ui/ProgressBar/ProgressBarLoop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarLoop.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarLoop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMpD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;AAE5C,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CA2D1D,CAAC"}

package/dist/ui/ProgressBar/ProgressBarLoop.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import React from 'react';
+import { Animated, Easing } from 'react-native';
+import { PROGRESS_BAR_GAP, PROGRESS_BAR_HEIGHT, PROGRESS_DURATION } from './ProgressBar';
+import { useStyles } from './ProgressBar.styles';
+export const ProgressBarLoop = (props) => {
+    const { style, onLayout, ...boxProps } = props;
+    const progress = React.useRef(new Animated.Value(0)).current;
+    const styles = useStyles();
+    const [width, setWidth] = React.useState(0);
+    const loopProgressWidth = React.useMemo(() => Math.max(width - PROGRESS_BAR_GAP, 0), [width]);
+    const loopFillWidth = React.useMemo(() => progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, loopProgressWidth],
+    }), [loopProgressWidth, progress]);
+    const loopRemainingLeft = React.useMemo(() => progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [Math.min(PROGRESS_BAR_GAP, width), width],
+    }), [progress, width]);
+    React.useEffect(() => {
+        const anim = Animated.loop(Animated.timing(progress, {
+            toValue: 1,
+            duration: PROGRESS_DURATION,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }));
+        progress.setValue(0);
+        anim.start();
+        return () => anim.stop();
+    }, [progress]);
+    const handleLayout = React.useCallback((event) => {
+        setWidth(event.nativeEvent.layout.width);
+        onLayout?.(event);
+    }, [onLayout]);
+    return (_jsxs(Box, { style: [styles.progressTrack, { height: PROGRESS_BAR_HEIGHT }, style], onLayout: handleLayout, ...boxProps, children: [_jsx(Animated.View, { style: [styles.progressedAbsolute, { width: loopFillWidth }] }), _jsx(Animated.View, { style: [styles.remainingAbsolute, { left: loopRemainingLeft }] })] }));
+};

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

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

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

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

package/dist/ui/ProgressBar/index.js

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

package/dist/ui/index.d.ts

@@ -11,6 +11,7 @@ export * from './ListItem';
 export * from './LucideIcon';
 export * from './PageHeader';
 export * from './Popover';
+export * from './ProgressBar';
 export * from './ResourceList';
 export * from './Sidebar';
 export * from './Tabs';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -11,6 +11,7 @@ export * from './ListItem';
 export * from './LucideIcon';
 export * from './PageHeader';
 export * from './Popover';
+export * from './ProgressBar';
 export * from './ResourceList';
 export * from './Sidebar';
 export * from './Tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",