@alveole/components 0.43.3 → 1.0.1

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

@@ -0,0 +1,70 @@
+export declare const useStyles: () => {
+    checkboxContainer: {
+        display: "flex";
+        flexDirection: "column";
+    };
+    container: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+    };
+    checkbox: {
+        height: import("@alveole/theme").Spacing;
+        width: import("@alveole/theme").Spacing;
+        backgroundColor: "transparent";
+        borderColor: string;
+        borderRadius: number;
+    };
+    checkboxSm: {
+        height: import("@alveole/theme").Spacing;
+        width: import("@alveole/theme").Spacing;
+        borderRadius: number;
+    };
+    checkboxDisabled: {
+        borderColor: string;
+        backgroundColor: "transparent";
+    };
+    checkboxError: {
+        borderColor: string;
+    };
+    checkboxSuccess: {
+        borderColor: string;
+    };
+    indicator: {
+        height: import("@alveole/theme").Spacing;
+        width: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    indicatorDisabled: {
+        backgroundColor: string;
+    };
+    label: {
+        cursor: "pointer";
+        color: string;
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        width: "100%";
+    };
+    labelSm: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    labelDisabled: {
+        cursor: "not-allowed";
+        color: string;
+    };
+    labelError: {
+        color: string;
+    };
+    labelSuccess: {
+        color: string;
+    };
+};
+//# sourceMappingURL=Checkbox.styles.d.ts.map

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

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

package/dist/ui/Checkbox/Checkbox.styles.js

@@ -0,0 +1,62 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    checkboxContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('050'),
+    },
+    checkbox: {
+        height: spacing('150'),
+        width: spacing('150'),
+        backgroundColor: 'transparent',
+        borderColor: color.light.border['action-high-primary'],
+        borderRadius: 6,
+    },
+    checkboxSm: {
+        height: spacing('100'),
+        width: spacing('100'),
+        borderRadius: 4,
+    },
+    checkboxDisabled: {
+        borderColor: color.border['disabled-grey'],
+        backgroundColor: 'transparent',
+    },
+    checkboxError: {
+        borderColor: color.border['plain-error'],
+    },
+    checkboxSuccess: {
+        borderColor: color.border['plain-success'],
+    },
+    indicator: {
+        height: spacing('150'),
+        width: spacing('150'),
+        backgroundColor: color.light.background['action-high-primary'],
+        borderRadius: 6,
+    },
+    indicatorDisabled: {
+        backgroundColor: color.background['disabled-grey'],
+    },
+    label: {
+        width: '100%',
+        ...text['Corps de texte'].MD.Regular,
+        cursor: 'pointer',
+        color: color.text['label-grey'],
+    },
+    labelSm: {
+        ...text['Corps de texte'].SM.Regular,
+    },
+    labelDisabled: {
+        cursor: 'not-allowed',
+        color: color.text['disabled-grey'],
+    },
+    labelError: {
+        color: color.text['default-error'],
+    },
+    labelSuccess: {
+        color: color.text['default-success'],
+    },
+}));

package/dist/ui/Checkbox/CheckboxContainer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CheckboxProps as TamaguiCheckboxProps, TamaguiElement } from 'tamagui';
+export type CheckboxElement = TamaguiElement;
+export type CheckboxContainerProps = TamaguiCheckboxProps & {
+    variant?: 'small' | 'medium';
+    error?: string;
+    success?: string;
+};
+export declare const CheckboxContainer: React.ForwardRefExoticComponent<import("tamagui").StackNonStyleProps & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+    scaleIcon?: number;
+    scaleSize?: number;
+    sizeAdjust?: number;
+    native?: import("tamagui").NativeValue<"web">;
+} & {
+    size?: import("tamagui").SizeTokens;
+    unstyled?: boolean;
+} & {
+    variant?: "small" | "medium";
+    error?: string;
+    success?: string;
+} & React.RefAttributes<TamaguiElement>>;
+//# sourceMappingURL=CheckboxContainer.d.ts.map

package/dist/ui/Checkbox/CheckboxContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG7G,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC;AAC7C,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;cALlB,OAAO,GAAG,QAAQ;YACpB,MAAM;cACJ,MAAM;wCAoCjB,CAAC"}

package/dist/ui/Checkbox/CheckboxContainer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Checkbox as TamaguiCheckbox } from 'tamagui';
+import { useStyles } from './Checkbox.styles';
+export const CheckboxContainer = React.forwardRef(function Checkbox(props, ref) {
+    const { variant, error, success, disabled, ...checkboxProps } = props;
+    const styles = useStyles();
+    const baseCheckboxStyles = { ...styles.checkbox, ...(variant === 'small' ? styles.checkboxSm : {}) };
+    const checkboxStyles = {
+        ...baseCheckboxStyles,
+        ...(disabled ? styles.checkboxDisabled : {}),
+        ...(success ? styles.checkboxSuccess : {}),
+        ...(error ? styles.checkboxError : {}),
+        marginTop: 'auto',
+        marginBottom: 'auto',
+    };
+    const checkboxHoverStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
+    const checkboxFocusStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
+    const checkboxPressStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
+    return (_jsx(TamaguiCheckbox, { ref: ref, disabled: disabled, style: checkboxStyles, focusStyle: checkboxFocusStyles, hoverStyle: checkboxHoverStyles, pressStyle: checkboxPressStyles, ...checkboxProps }));
+});

package/dist/ui/Checkbox/CheckboxIndicator.d.ts

@@ -0,0 +1,7 @@
+export type CheckboxIndicatorProps = {
+    variant?: 'small' | 'medium';
+    indeterminate?: boolean;
+    disabled?: boolean;
+};
+export declare const CheckboxIndicator: (props: CheckboxIndicatorProps) => import("react").JSX.Element;
+//# sourceMappingURL=CheckboxIndicator.d.ts.map

package/dist/ui/Checkbox/CheckboxIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxIndicator.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,gCAsB9D,CAAC"}

package/dist/ui/Checkbox/CheckboxIndicator.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LucideIcon } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { Checkbox as TamaguiCheckbox } from 'tamagui';
+import { useStyles } from './Checkbox.styles';
+export const CheckboxIndicator = (props) => {
+    const { variant, disabled, indeterminate } = props;
+    const { color } = useTheme();
+    const styles = useStyles();
+    return (_jsx(TamaguiCheckbox.Indicator, { style: {
+            ...styles.indicator,
+            ...(variant === 'small' ? styles.checkboxSm : {}),
+            ...(disabled ? styles.indicatorDisabled : {}),
+        }, children: _jsx(LucideIcon, { size: variant === 'small' ? 'xs' : 'sm', name: indeterminate ? 'Minus' : 'Check', color: disabled ? color.text['default-grey'] : '#FFFFFF', style: { margin: 'auto' } }) }));
+};

package/dist/ui/Checkbox/CheckboxLabel.d.ts

@@ -0,0 +1,9 @@
+import { LabelProps } from 'tamagui';
+export type CheckboxLabelProps = {
+    variant?: 'small' | 'medium';
+    label?: string;
+    error?: string;
+    success?: string;
+};
+export declare const CheckboxLabel: (props: CheckboxLabelProps & LabelProps) => import("react").JSX.Element;
+//# sourceMappingURL=CheckboxLabel.d.ts.map

package/dist/ui/Checkbox/CheckboxLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxLabel.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,GAAG,UAAU,gCAqBnE,CAAC"}

package/dist/ui/Checkbox/CheckboxLabel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@alveole/components';
+import { Label } from 'tamagui';
+import { useStyles } from './Checkbox.styles';
+export const CheckboxLabel = (props) => {
+    const { variant, disabled, error, success, label, ...labelProps } = props;
+    const styles = useStyles();
+    return (_jsx(Label, { unstyled: true, disabled: disabled, ...labelProps, width: '100%', children: _jsx(Typography, { style: {
+                ...styles.label,
+                ...(variant === 'small' ? styles.labelSm : {}),
+                ...(disabled ? styles.labelDisabled : {}),
+                ...(success ? styles.labelSuccess : {}),
+                ...(error ? styles.labelError : {}),
+            }, tag: "check-box-label", children: label }) }));
+};

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

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './CheckboxContainer';
+export * from './CheckboxIndicator';
+export * from './CheckboxLabel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}

package/dist/ui/Checkbox/index.js

@@ -0,0 +1,4 @@
+export * from './Checkbox';
+export * from './CheckboxContainer';
+export * from './CheckboxIndicator';
+export * from './CheckboxLabel';

package/dist/ui/Counter/Counter.d.ts

@@ -0,0 +1,6 @@
+export type CounterProps = {
+    variant: 'default' | 'primary';
+    count: number;
+};
+export declare const Counter: (props: CounterProps) => import("react").JSX.Element;
+//# sourceMappingURL=Counter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,gCAe1C,CAAC"}

package/dist/ui/Counter/Counter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@alveole/components';
+import { useStyles } from './Counter.styles';
+export const Counter = (props) => {
+    const { variant, count } = props;
+    const styles = useStyles();
+    return (_jsx(Typography, { tag: "counter", style: {
+            ...styles.counter,
+            ...(variant === 'primary' ? styles.counterPrimary : {}),
+        }, children: count }));
+};

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

@@ -0,0 +1,29 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("@alveole/components").CounterProps) => import("react").JSX.Element;
+    styleFn: () => {
+        counter: {
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+            borderRadius: import("@alveole/theme").Radius;
+        };
+        counterPrimary: {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './Counter.stories.sources';
+//# sourceMappingURL=Counter.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Counter/Counter.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import { Counter } from './Counter';
+import { useStyles } from './Counter.styles';
+export default {
+    title: 'Counter',
+    tags: ['ui'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1871-3052&t=s1FT99TtCUvIPAfB-4',
+    description: 'Badge numérique indiquant un compteur. Utilisé dans les onglets.',
+    component: Counter,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, style: { alignItems: 'center' }, children: [_jsx(Counter, { variant: "default", count: 20 }), _jsx(Counter, { variant: "primary", count: 20 })] }));
+export * as Sources from './Counter.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgP,CAAC;AAErQ,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Counter/Counter.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={8} style={{ alignItems: 'center' }}>\n    <Counter variant=\"default\" count={20} />\n    <Counter variant=\"primary\" count={20} />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

@@ -0,0 +1,18 @@
+export declare const useStyles: () => {
+    counter: {
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+        borderRadius: import("@alveole/theme").Radius;
+    };
+    counterPrimary: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+//# sourceMappingURL=Counter.styles.d.ts.map

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

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

package/dist/ui/Counter/Counter.styles.js

@@ -0,0 +1,14 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
+    counter: {
+        paddingRight: spacing('1,5V'),
+        paddingLeft: spacing('1,5V'),
+        backgroundColor: color.light.background['contrast-grey'],
+        borderRadius: radius('full'),
+        ...text['Corps de texte'].XS.Bold,
+    },
+    counterPrimary: {
+        backgroundColor: color.light.background['action-high-primary'],
+        color: color.light.text['inverted-primary'],
+    },
+}));

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

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

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

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

package/dist/ui/Counter/index.js

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

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

@@ -9,7 +9,7 @@ declare const _default: {
         divider: {
             width: "100%";
             height: number;
-            backgroundColor: "#DEE3EC";
+            backgroundColor: string;
         };
     };
 };

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

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     divider: {
         width: "100%";
         height: number;
-        backgroundColor: "#DEE3EC";
+        backgroundColor: string;
     };
 };
 //# sourceMappingURL=Divider.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAsFxD,CAAC"}
+{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAmFxD,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.js

@@ -35,11 +35,9 @@ export const DocumentViewer = (props) => {
     const handlePreviousPage = React.useCallback(() => {
         setPage(currentPage => Math.max(currentPage - 1, 1));
     }, []);
-    React.useEffect(() => {
-        setPage(currentPage => Math.min(currentPage, totalPages));
-    }, [totalPages]);
     const handlePdfReady = React.useCallback((proxy) => {
         setTotalPages(proxy.numPages);
+        setPage(currentPage => Math.min(currentPage, proxy.numPages));
     }, []);
     return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: () => handleRotate('left'), onRotateRight: () => handleRotate('right'), onNextPage: handleNextPage, onPreviousPage: handlePreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
                             ...styles.viewerContainer,

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

@@ -8,12 +8,12 @@ declare const _default: {
     styleFn: () => {
         toolbar: {
             padding: import("@alveole/theme").Spacing;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderWidth: number;
             borderStyle: "solid";
-            borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#F6F7F8";
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            backgroundColor: string;
             display: "flex";
             flexDirection: "row";
             gap: import("@alveole/theme").Spacing;
@@ -26,7 +26,7 @@ declare const _default: {
             justifyContent: "flex-end";
         };
         toolbarTitle: {
-            color: "#373A3F";
+            color: string;
             paddingLeft: import("@alveole/theme").Spacing;
             marginTop: string;
             marginBottom: string;
@@ -38,7 +38,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         toolbarState: {
-            color: "#5F6571";
+            color: string;
             userSelect: "none";
             fontVariant: "tabular-nums"[];
             fontSize: 14;
@@ -50,7 +50,7 @@ declare const _default: {
         toolbarDivider: {
             width: number;
             height: "50%";
-            backgroundColor: "#DEE3EC";
+            backgroundColor: string;
             marginTop: string;
             marginBottom: string;
         };
@@ -64,13 +64,13 @@ declare const _default: {
             flexDirection: "column";
             flex: number;
             padding: import("@alveole/theme").Spacing;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderWidth: number;
             borderStyle: "solid";
             borderTopWidth: number;
-            borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#FFFFFF";
+            borderBottomLeftRadius: import("@alveole/theme").Radius;
+            borderBottomRightRadius: import("@alveole/theme").Radius;
+            backgroundColor: string;
             overflow: "hidden";
         };
         children: {
@@ -81,13 +81,13 @@ declare const _default: {
             maxWidth: string;
             minWidth: number;
             flexShrink: number;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderWidth: number;
             borderStyle: "solid";
             borderLeft: number;
-            borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#FFFFFF";
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            borderBottomRightRadius: import("@alveole/theme").Radius;
+            backgroundColor: string;
             overflow: "auto";
         };
         viewerImageContent: {
@@ -145,7 +145,7 @@ declare const _default: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            backgroundColor: "#FFFFFF";
+            backgroundColor: string;
         };
     };
 };

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

@@ -1,12 +1,12 @@
 export declare const useStyles: () => {
     toolbar: {
         padding: import("@alveole/theme").Spacing;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderWidth: number;
         borderStyle: "solid";
-        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#F6F7F8";
+        borderTopLeftRadius: import("@alveole/theme").Radius;
+        borderTopRightRadius: import("@alveole/theme").Radius;
+        backgroundColor: string;
         display: "flex";
         flexDirection: "row";
         gap: import("@alveole/theme").Spacing;
@@ -19,7 +19,7 @@ export declare const useStyles: () => {
         justifyContent: "flex-end";
     };
     toolbarTitle: {
-        color: "#373A3F";
+        color: string;
         paddingLeft: import("@alveole/theme").Spacing;
         marginTop: string;
         marginBottom: string;
@@ -31,7 +31,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     toolbarState: {
-        color: "#5F6571";
+        color: string;
         userSelect: "none";
         fontVariant: "tabular-nums"[];
         fontSize: 14;
@@ -43,7 +43,7 @@ export declare const useStyles: () => {
     toolbarDivider: {
         width: number;
         height: "50%";
-        backgroundColor: "#DEE3EC";
+        backgroundColor: string;
         marginTop: string;
         marginBottom: string;
     };
@@ -57,13 +57,13 @@ export declare const useStyles: () => {
         flexDirection: "column";
         flex: number;
         padding: import("@alveole/theme").Spacing;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderWidth: number;
         borderStyle: "solid";
         borderTopWidth: number;
-        borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#FFFFFF";
+        borderBottomLeftRadius: import("@alveole/theme").Radius;
+        borderBottomRightRadius: import("@alveole/theme").Radius;
+        backgroundColor: string;
         overflow: "hidden";
     };
     children: {
@@ -74,13 +74,13 @@ export declare const useStyles: () => {
         maxWidth: string;
         minWidth: number;
         flexShrink: number;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderWidth: number;
         borderStyle: "solid";
         borderLeft: number;
-        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#FFFFFF";
+        borderTopRightRadius: import("@alveole/theme").Radius;
+        borderBottomRightRadius: import("@alveole/theme").Radius;
+        backgroundColor: string;
         overflow: "auto";
     };
     viewerImageContent: {
@@ -138,7 +138,7 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
 };
 //# sourceMappingURL=DocumentViewer.styles.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6J9D,CAAC"}
+{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAyJ9D,CAAC"}