@alveole/components 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -66,9 +66,8 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         alignItems: "stretch";
-        backgroundColor: string;
         borderBottomWidth: number;
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     rowSm: {
         minHeight: number;
@@ -82,19 +81,22 @@ export declare const useStyles: () => {
     rowHoverable: {
         cursor: "pointer";
     };
+    rowBackground: {
+        backgroundColor: import("@alveole/theme").ThemeColor;
+    };
     rowHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     rowSelected: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     headerRow: {
         display: "flex";
         flexDirection: "row";
         alignItems: "stretch";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     headerRowSm: {
         minHeight: number;
@@ -129,7 +131,7 @@ export declare const useStyles: () => {
         paddingRight: string | number;
     };
     headerLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
@@ -137,16 +139,16 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     headerLabelActive: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     table: {
         display: "flex";
         flexDirection: "column";
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
         overflow: "hidden";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     scrollContent: {
         display: "flex";
@@ -161,7 +163,7 @@ export declare const useStyles: () => {
         padding: string | number;
     };
     emptyStateLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.styles.ts"],"names":[],"mappings":"AA+LA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}
+{"version":3,"file":"DataTable.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.styles.ts"],"names":[],"mappings":"AAmMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}

package/dist/ui/DataTable/DataTable.styles.js

@@ -81,7 +81,6 @@ const ligne = ({ color }) => ({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'stretch',
-        backgroundColor: color.light.background['default-grey'],
         borderBottomWidth: 1,
         borderBottomColor: color.light.border['default-grey'],
     },
@@ -97,6 +96,11 @@ const ligne = ({ color }) => ({
     rowHoverable: {
         cursor: 'pointer',
     },
+    // Le fond vit hors de `row` : repos et survol passent par la seule prop `backgroundColor`
+    // (ADR 0031).
+    rowBackground: {
+        backgroundColor: color.light.background['default-grey'],
+    },
     rowHover: {
         backgroundColor: color.light.background['alt-grey'],
     },

package/dist/ui/DataTable/DataTableCell.js

@@ -6,5 +6,5 @@ export const DataTableCell = (props) => {
     const { align = 'start', width, children, variant = 'body', size = 'sm', onPress, noPadding = false } = props;
     const styles = useStyles();
     const aspect = dataTableCellStyle(styles, { variant, size, align, width, noPadding, pressable: onPress != null });
-    return (_jsx(Box, { tag: aspect.tag, onPress: onPress, hoverStyle: aspect.hover, style: aspect.style, children: children }));
+    return (_jsx(Box, { tag: aspect.tag, onPress: onPress, opacity: aspect.opacite, style: aspect.style, children: children }));
 };

package/dist/ui/DataTable/DataTableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGnE,MAAM,MAAM,iBAAiB,CAAC,GAAG,IAAI;IACnC,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6IAA6I;IAC7I,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAcF,eAAO,MAAM,YAAY,GAAI,GAAG,EAAG,OAAO,iBAAiB,CAAC,GAAG,CAAC,gCAoD/D,CAAC"}
+{"version":3,"file":"DataTableRow.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGnE,MAAM,MAAM,iBAAiB,CAAC,GAAG,IAAI;IACnC,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6IAA6I;IAC7I,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAcF,eAAO,MAAM,YAAY,GAAI,GAAG,EAAG,OAAO,iBAAiB,CAAC,GAAG,CAAC,gCAsD/D,CAAC"}

package/dist/ui/DataTable/DataTableRow.js

@@ -16,10 +16,12 @@ const rowStyleBySize = {
 export const DataTableRow = (props) => {
     const { row, rowIndex, rowKey, columns, selectable, selected, size = 'sm', noBorderBottom, onSelectedChange, onPress, } = props;
     const styles = useStyles();
-    return (_jsxs(Box, { tag: "data-table-row", onPress: onPress, hoverStyle: onPress ? styles.rowHover : {}, style: [
+    return (_jsxs(Box, { tag: "data-table-row", onPress: onPress, backgroundColor: {
+            default: (selected ? styles.rowSelected : styles.rowBackground).backgroundColor,
+            hover: onPress ? styles.rowHover.backgroundColor : undefined,
+        }, style: [
             styles.row,
             styles[rowStyleBySize[size]],
-            selected ? styles.rowSelected : {},
             onPress ? styles.rowHoverable : {},
             noBorderBottom ? { borderBottomWidth: 0 } : {},
         ], children: [selectable && (_jsx(Box, { tag: "data-table-selection-cell", style: [styles.selectionCell, styles[selectionCellStyleBySize[size]]], onPress: event => event.stopPropagation(), children: _jsx(CheckboxContainer, { id: `${rowKey}--checkbox`, "aria-label": `Sélectionner la ligne ${rowIndex + 1}`, variant: "small", checked: selected, onCheckedChange: checked => onSelectedChange?.(checked === true), children: _jsx(CheckboxIndicator, { variant: "small" }) }) })), columns.map(column => (_jsx(DataTableCell, { align: column.align, width: column.width, size: size, children: column.renderCell(row, rowIndex) }, column.id)))] }));

package/dist/ui/DataTable/dataTableCellStyle.d.ts

@@ -17,8 +17,8 @@ export type DataTableCellState = {
  */
 export declare const dataTableCellStyle: (styles: DataTableStyles, { variant, size, align, width, noPadding, pressable }: DataTableCellState) => {
     tag: "data-table-header-cell" | "data-table-cell";
-    hover: {
-        opacity: number;
+    opacite: {
+        hover: number;
     } | undefined;
     style: ({
         display: "flex";

package/dist/ui/DataTable/dataTableCellStyle.js

@@ -12,7 +12,7 @@ export const dataTableCellStyle = (styles, { variant, size, align, width, noPadd
     return {
         tag: variant === 'header' ? 'data-table-header-cell' : 'data-table-cell',
         // Le survol ne repond que la ou il y a quelque chose a presser.
-        hover: pressable ? { opacity: 0.8 } : undefined,
+        opacite: pressable ? { hover: 0.8 } : undefined,
         style: [
             variant === 'header' ? styles.headerCell : styles.cell,
             noPadding ? {} : retrait,

package/dist/ui/DateInput/DateInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TextInputProps } from '../FormControl';
+import { TextInputElement, TextInputProps } from '../FormControl';
 type MinuteInterval = 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30;
-export type DateInputProps = Omit<TextInputProps, 'type'> & {
+export type DateInputProps = Omit<TextInputProps, 'type' | 'onChange'> & {
     type?: 'date' | 'datetime' | 'month';
     display?: 'default' | 'spinner';
     value?: string;
@@ -11,7 +11,7 @@ export type DateInputProps = Omit<TextInputProps, 'type'> & {
     is24Hour?: boolean;
     minuteInterval?: MinuteInterval;
 };
-export declare const DateInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "type"> & {
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "onChange" | "type"> & {
     type?: "date" | "datetime" | "month";
     display?: "default" | "spinner";
     value?: string;
@@ -20,6 +20,6 @@ export declare const DateInput: React.ForwardRefExoticComponent<Omit<TextInputPr
     onChange?: (date: string) => void;
     is24Hour?: boolean;
     minuteInterval?: MinuteInterval;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 export {};
 //# sourceMappingURL=DateInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAA+B,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7E,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AA+EF,eAAO,MAAM,SAAS;WAvFb,MAAM,GAAG,UAAU,GAAG,OAAO;cAC1B,SAAS,GAAG,SAAS;YACvB,MAAM;kBACA,IAAI;kBACJ,IAAI;eACP,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;eACtB,OAAO;qBACD,cAAc;0DAkI/B,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAa,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7E,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AA+EF,eAAO,MAAM,SAAS;WAvFb,MAAM,GAAG,UAAU,GAAG,OAAO;cAC1B,SAAS,GAAG,SAAS;YACvB,MAAM;kBACA,IAAI;kBACJ,IAAI;eACP,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;eACtB,OAAO;qBACD,cAAc;0CAkI/B,CAAC"}

package/dist/ui/DateInput/DateInput.ios.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare const DateInput: React.ForwardRefExoticComponent<Omit<import("..").TextInputProps, "type"> & {
+import { TextInputElement } from '../FormControl';
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<import("..").TextInputProps, "onChange" | "type"> & {
     type?: "date" | "datetime" | "month";
     display?: "default" | "spinner";
     value?: string;
@@ -7,6 +8,6 @@ export declare const DateInput: React.ForwardRefExoticComponent<Omit<import(".."
     maximumDate?: Date;
     onChange?: (date: string) => void;
     is24Hour?: boolean;
-    minuteInterval?: 1 | 4 | 6 | 12 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
-} & React.RefAttributes<import("react-native").TextInput>>;
+    minuteInterval?: 2 | 1 | 4 | 6 | 12 | 3 | 5 | 10 | 20 | 15 | 30;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=DateInput.ios.d.ts.map

package/dist/ui/DateInput/DateInput.ios.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.ios.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.ios.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AA0D3C,eAAO,MAAM,SAAS;;;;;;;;;0DAoDpB,CAAC"}
+{"version":3,"file":"DateInput.ios.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.ios.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,EAA+B,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuD/E,eAAO,MAAM,SAAS;;;;;;;;;0CAoDpB,CAAC"}

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

@@ -4,7 +4,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: true;
     description: string;
-    component: React.ForwardRefExoticComponent<Omit<import("..").TextInputProps, "type"> & {
+    component: React.ForwardRefExoticComponent<Omit<import("..").TextInputProps, "onChange" | "type"> & {
         type?: "date" | "datetime" | "month";
         display?: "default" | "spinner";
         value?: string;
@@ -12,8 +12,8 @@ declare const _default: {
         maximumDate?: Date;
         onChange?: (date: string) => void;
         is24Hour?: boolean;
-        minuteInterval?: 1 | 4 | 6 | 12 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
-    } & React.RefAttributes<import("react-native").TextInput>>;
+        minuteInterval?: 2 | 1 | 4 | 6 | 12 | 3 | 5 | 10 | 20 | 15 | 30;
+    } & React.RefAttributes<import("..").TextInputElement>>;
     styleFn: () => string;
 };
 export default _default;

package/dist/ui/DateInput/DateInput.stories.js

@@ -12,10 +12,10 @@ export default {
     component: DateInput,
     styleFn: () => 'Aucun style appliqué',
 };
-export const Default = () => (_jsx(Box, { width: '100%', children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Default", children: _jsx(DateInput, { onChange: console.log }) }) }), _jsxs(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: [_jsx(FormControl, { label: "Error", error: "Une erreur", children: _jsx(DateInput, { onChange: console.log, error: "Une erreur" }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Date enregistr\u00E9e", children: _jsx(DateInput, { onChange: console.log, success: "Date enregistr\u00E9e" }) })] }), _jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Disabled", disabled: true, children: _jsx(DateInput, { onChange: console.log, disabled: true }) }) })] }) }));
+export const Default = () => (_jsx(Box, { width: '100%', children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Default", children: _jsx(DateInput, { onChange: console.log }) }) }), _jsxs(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: [_jsx(FormControl, { label: "Error", error: "Une erreur", children: _jsx(DateInput, { onChange: console.log, error: "Une erreur" }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Date enregistr\u00E9e", children: _jsx(DateInput, { onChange: console.log, success: "Date enregistr\u00E9e" }) })] }), _jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Disabled", disabled: true, children: _jsx(DateInput, { onChange: console.log, disabled: true }) }) })] }) }));
 export const Types = () => {
     const [date, setDate] = React.useState();
     const [datetime, setDatetime] = React.useState();
-    return (_jsx(Box, { width: '100%', children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Date (default)", children: _jsx(DateInput, { value: date, onChange: e => setDate(e.toString()) }) }) }), _jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Datetime", children: _jsx(DateInput, { value: datetime, type: "datetime", is24Hour: true, onChange: e => setDatetime(e.toString()) }) }) })] }) }));
+    return (_jsx(Box, { width: '100%', children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Date (default)", children: _jsx(DateInput, { value: date, onChange: e => setDate(e.toString()) }) }) }), _jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(FormControl, { label: "Datetime", children: _jsx(DateInput, { value: datetime, type: "datetime", is24Hour: true, onChange: e => setDatetime(e.toString()) }) }) })] }) }));
 };
 export * as Sources from './DateInput.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+4B,CAAC;AAEp6B,eAAO,MAAM,KAAK,cAA+uB,CAAC;AAElwB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"DateInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk5B,CAAC;AAEv6B,eAAO,MAAM,KAAK,cAAkvB,CAAC;AAErwB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/DateInput/DateInput.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box width={'100%'}>\n    <Grid gap={8}>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <FormControl label=\"Default\">\n          <DateInput onChange={console.log} />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <FormControl label=\"Error\" error=\"Une erreur\">\n          <DateInput onChange={console.log} error=\"Une erreur\" />\n        </FormControl>\n        <FormControl label=\"Succès\" success=\"Date enregistrée\">\n          <DateInput onChange={console.log} success=\"Date enregistrée\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <FormControl label=\"Disabled\" disabled>\n          <DateInput onChange={console.log} disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
-export const Types = () => "export const Types = () => {\n  const [date, setDate] = React.useState<string>();\n  const [datetime, setDatetime] = React.useState<string>();\n\n  return (\n    <Box width={'100%'}>\n      <Grid gap={8}>\n        <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n          <FormControl label=\"Date (default)\">\n            <DateInput value={date} onChange={e => setDate(e.toString())} />\n          </FormControl>\n        </Grid.Column>\n        <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n          <FormControl label=\"Datetime\">\n            <DateInput value={datetime} type=\"datetime\" is24Hour onChange={e => setDatetime(e.toString())} />\n          </FormControl>\n        </Grid.Column>\n      </Grid>\n    </Box>\n  );\n};";
+export const Default = () => "export const Default = () => (\n  <Box width={'100%'}>\n    <Grid gap=\"1W\">\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <FormControl label=\"Default\">\n          <DateInput onChange={console.log} />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <FormControl label=\"Error\" error=\"Une erreur\">\n          <DateInput onChange={console.log} error=\"Une erreur\" />\n        </FormControl>\n        <FormControl label=\"Succès\" success=\"Date enregistrée\">\n          <DateInput onChange={console.log} success=\"Date enregistrée\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <FormControl label=\"Disabled\" disabled>\n          <DateInput onChange={console.log} disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const Types = () => "export const Types = () => {\n  const [date, setDate] = React.useState<string>();\n  const [datetime, setDatetime] = React.useState<string>();\n\n  return (\n    <Box width={'100%'}>\n      <Grid gap=\"1W\">\n        <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n          <FormControl label=\"Date (default)\">\n            <DateInput value={date} onChange={e => setDate(e.toString())} />\n          </FormControl>\n        </Grid.Column>\n        <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n          <FormControl label=\"Datetime\">\n            <DateInput value={datetime} type=\"datetime\" is24Hour onChange={e => setDatetime(e.toString())} />\n          </FormControl>\n        </Grid.Column>\n      </Grid>\n    </Box>\n  );\n};";
 export const storySources = {
     Default,
     Types,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const DateInput: React.ForwardRefExoticComponent<Omit<import("..").TextInputProps, "type"> & {
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<import("..").TextInputProps, "onChange" | "type"> & {
     type?: "date" | "datetime" | "month";
     display?: "default" | "spinner";
     value?: string;
@@ -7,6 +7,6 @@ export declare const DateInput: React.ForwardRefExoticComponent<Omit<import(".."
     maximumDate?: Date;
     onChange?: (date: string) => void;
     is24Hour?: boolean;
-    minuteInterval?: 1 | 4 | 6 | 12 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
+    minuteInterval?: 2 | 1 | 4 | 6 | 12 | 3 | 5 | 10 | 20 | 15 | 30;
 } & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=DateInput.web.d.ts.map

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

@@ -10,7 +10,7 @@ declare const _default: {
         divider: {
             width: "100%";
             height: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAIA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAAmC,CAAC;AAExD,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAIA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAAoC,CAAC;AAEzD,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Divider/Divider.stories.js

@@ -11,5 +11,5 @@ export default {
     component: Divider,
     styleFn: useStyles,
 };
-export const Default = () => _jsx(Divider, { mt: 8, mb: 16 });
+export const Default = () => _jsx(Divider, { mt: "1W", mb: "2W" });
 export * as Sources from './Divider.stories.sources';

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

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

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Divider/Divider.stories.tsx
-export const Default = () => "export const Default = () => <Divider mt={8} mb={16} />;";
+export const Default = () => "export const Default = () => <Divider mt=\"1W\" mb=\"2W\" />;";
 export const storySources = {
     Default,
 };

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

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

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

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { type DocumentViewerProps } from './DocumentViewer.types';
-export declare const DocumentViewer: (props: DocumentViewerProps) => import("react").JSX.Element;
+export declare const DocumentViewer: (props: DocumentViewerProps) => React.JSX.Element;
 //# sourceMappingURL=DocumentViewer.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":"AAEA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMlE,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAkDxD,CAAC"}
+{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,mBAAmB,EAA+B,MAAM,wBAAwB,CAAC;AAO/F,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA4DxD,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.js

@@ -5,12 +5,20 @@ import { DocumentViewerImage } from './DocumentViewerImage';
 import { DocumentViewerPDF } from './DocumentViewerPDF';
 import { DocumentViewerToolbar } from './DocumentViewerToolbar';
 import { usePilotageDeDocument } from './usePilotageDeDocument';
+import { usePleinEcran } from './usePleinEcran';
 export const DocumentViewer = (props) => {
-    const { children, title, source, type, height = '100%', ChildrenProps, pdfErrorLabel, ...boxProps } = props;
+    const { children, title, source, type, height = '100%', ChildrenProps, pdfErrorLabel, allowFullscreen = false, ...boxProps } = props;
     const styles = useStyles();
     const { rotation, page, state, onPdfReady, onRotateLeft, onRotateRight, onNextPage, onPreviousPage } = usePilotageDeDocument(type);
-    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: onRotateLeft, onRotateRight: onRotateRight, onNextPage: onNextPage, onPreviousPage: onPreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
-                            ...styles.viewerContainer,
-                            ...(children ? { borderBottomRightRadius: 0 } : {}),
-                        }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: onPdfReady, errorLabel: pdfErrorLabel }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
+    const { poserLeCadre, ...pleinEcran } = usePleinEcran(allowFullscreen);
+    return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", ref: poserLeCadre, flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: onRotateLeft, onRotateRight: onRotateRight, onNextPage: onNextPage, onPreviousPage: onPreviousPage, pleinEcran: pleinEcran.disponible ? pleinEcran.pleinEcran : undefined, onTogglePleinEcran: pleinEcran.basculer }), _jsx(ContenuDuDocument, { type: type, source: source, page: page, rotation: rotation, height: height, onPdfReady: onPdfReady, pdfErrorLabel: pdfErrorLabel, withChildren: children != null })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
+};
+/** Le cadre du document, image ou PDF, sous la barre d'outils. */
+const ContenuDuDocument = (props) => {
+    const { type, source, page, rotation, height, onPdfReady, pdfErrorLabel, withChildren } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "document-viewer-container", style: {
+            ...styles.viewerContainer,
+            ...(withChildren ? { borderBottomRightRadius: 0 } : {}),
+        }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: onPdfReady, errorLabel: pdfErrorLabel }))] }) }));
 };

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

@@ -44,10 +44,10 @@ declare const _default: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         viewerPdfErrorLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             userSelect: "none";
             textAlign: "center";
             fontSize: 14;
@@ -83,13 +83,13 @@ declare const _default: {
             flexDirection: "column";
             flex: number;
             padding: string | number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderWidth: number;
             borderStyle: "solid";
             borderTopWidth: number;
             borderBottomLeftRadius: import("@alveole/theme").Radius;
             borderBottomRightRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             overflow: "hidden";
         };
         children: {
@@ -100,23 +100,24 @@ declare const _default: {
             maxWidth: string;
             minWidth: number;
             flexShrink: number;
-            borderColor: string;
+            position: "relative";
+            borderColor: import("@alveole/theme").ThemeColor;
             borderWidth: number;
             borderStyle: "solid";
             borderLeft: number;
             borderTopRightRadius: import("@alveole/theme").Radius;
             borderBottomRightRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             overflow: "auto";
         };
         toolbar: {
             padding: string | number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderWidth: number;
             borderStyle: "solid";
             borderTopLeftRadius: import("@alveole/theme").Radius;
             borderTopRightRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             display: "flex";
             flexDirection: "row";
             gap: string | number;
@@ -129,7 +130,7 @@ declare const _default: {
             justifyContent: "flex-end";
         };
         toolbarTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: string | number;
             marginTop: string;
             marginBottom: string;
@@ -141,7 +142,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         toolbarState: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             userSelect: "none";
             fontVariant: "tabular-nums";
             fontSize: 14;
@@ -153,7 +154,7 @@ declare const _default: {
         toolbarDivider: {
             width: number;
             height: "50%";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             marginTop: string;
             marginBottom: string;
         };

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,eAAe,mCAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAaxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBASkB;AAElB,eAAO,MAAM,eAAe,mCAU3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAQxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.stories.js

@@ -8,12 +8,12 @@ export default {
     tags: ['ui'],
     experimental: false,
     webOnly: true,
-    description: 'Viewer de documents (PDF, Image)',
+    description: 'Viewer de documents (PDF, Image). Ctrl/⌘ + molette pour zoomer, double-clic pour revenir à 100 %, bouton plein écran avec `allowFullscreen`.',
     component: DocumentViewer,
     styleFn: useStyles,
 };
-export const DocumentImageEx = () => (_jsx(Box, { maxW: 500, height: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", source: "https://picsum.photos/1000/2000", height: "100%" }) }));
-export const DocumentPdf = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf", height: "100%" }) }));
-export const DocumentPdfError = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF en erreur", type: "pdf", source: "https://example.com/document-inexistant.pdf", height: "100%" }) }));
-export const WithChildren = () => (_jsx(Box, { height: 600, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf", height: "100%", children: _jsx(Box, { p: '2W', minW: 600, children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
+export const DocumentImageEx = () => (_jsx(Box, { width: "100%", maxW: 500, height: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", allowFullscreen: true, source: "https://picsum.photos/1000/2000", height: "100%" }) }));
+export const DocumentPdf = () => (_jsx(Box, { width: "100%", height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "/document-exemple.pdf", height: "100%", allowFullscreen: true }) }));
+export const DocumentPdfError = () => (_jsx(Box, { width: "100%", height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF en erreur", type: "pdf", source: "https://example.com/document-inexistant.pdf", height: "100%" }) }));
+export const WithChildren = () => (_jsx(Box, { width: "100%", height: 600, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "/document-exemple.pdf", height: "100%", children: _jsx(Box, { p: '2W', children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
 export * as Sources from './DocumentViewer.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA2N,CAAC;AAExP,eAAO,MAAM,WAAW,cAA2R,CAAC;AAEpT,eAAO,MAAM,gBAAgB,cAA+Q,CAAC;AAE7S,eAAO,MAAM,YAAY,cAAuY,CAAC;AAEja,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAAkS,CAAC;AAE/T,eAAO,MAAM,WAAW,cAAwO,CAAC;AAEjQ,eAAO,MAAM,gBAAgB,cAA8R,CAAC;AAE5T,eAAO,MAAM,YAAY,cAAwT,CAAC;AAElV,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,9 +1,9 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/DocumentViewer/DocumentViewer.stories.tsx
-export const DocumentImageEx = () => "export const DocumentImageEx = () => (\n  <Box maxW={500} height={500}>\n    <DocumentViewer title=\"Document image\" type=\"image\" source=\"https://picsum.photos/1000/2000\" height=\"100%\" />\n  </Box>\n);";
-export const DocumentPdf = () => "export const DocumentPdf = () => (\n  <Box height={400} maxW={500}>\n    <DocumentViewer\n      title=\"Document PDF\"\n      type=\"pdf\"\n      source=\"https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf\"\n      height=\"100%\"\n    />\n  </Box>\n);";
-export const DocumentPdfError = () => "export const DocumentPdfError = () => (\n  <Box height={400} maxW={500}>\n    <DocumentViewer\n      title=\"Document PDF en erreur\"\n      type=\"pdf\"\n      source=\"https://example.com/document-inexistant.pdf\"\n      height=\"100%\"\n    />\n  </Box>\n);";
-export const WithChildren = () => "export const WithChildren = () => (\n  <Box height={600}>\n    <DocumentViewer\n      title=\"Document PDF\"\n      type=\"pdf\"\n      source=\"https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf\"\n      height=\"100%\"\n    >\n      <Box p={'2W'} minW={600}>\n        <Typography>Contenu enfant</Typography>\n      </Box>\n    </DocumentViewer>\n  </Box>\n);";
+export const DocumentImageEx = () => "export const DocumentImageEx = () => (\n  <Box width=\"100%\" maxW={500} height={500}>\n    <DocumentViewer\n      title=\"Document image\"\n      type=\"image\"\n      allowFullscreen\n      source=\"https://picsum.photos/1000/2000\"\n      height=\"100%\"\n    />\n  </Box>\n);";
+export const DocumentPdf = () => "export const DocumentPdf = () => (\n  <Box width=\"100%\" height={400} maxW={500}>\n    <DocumentViewer title=\"Document PDF\" type=\"pdf\" source=\"/document-exemple.pdf\" height=\"100%\" allowFullscreen />\n  </Box>\n);";
+export const DocumentPdfError = () => "export const DocumentPdfError = () => (\n  <Box width=\"100%\" height={400} maxW={500}>\n    <DocumentViewer\n      title=\"Document PDF en erreur\"\n      type=\"pdf\"\n      source=\"https://example.com/document-inexistant.pdf\"\n      height=\"100%\"\n    />\n  </Box>\n);";
+export const WithChildren = () => "export const WithChildren = () => (\n  <Box width=\"100%\" height={600}>\n    <DocumentViewer title=\"Document PDF\" type=\"pdf\" source=\"/document-exemple.pdf\" height=\"100%\">\n      <Box p={'2W'}>\n        <Typography>Contenu enfant</Typography>\n      </Box>\n    </DocumentViewer>\n  </Box>\n);";
 export const storySources = {
     DocumentImageEx,
     DocumentPdf,

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

@@ -37,10 +37,10 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     viewerPdfErrorLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         userSelect: "none";
         textAlign: "center";
         fontSize: 14;
@@ -76,13 +76,13 @@ export declare const useStyles: () => {
         flexDirection: "column";
         flex: number;
         padding: string | number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
         borderStyle: "solid";
         borderTopWidth: number;
         borderBottomLeftRadius: import("@alveole/theme").Radius;
         borderBottomRightRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     };
     children: {
@@ -93,23 +93,24 @@ export declare const useStyles: () => {
         maxWidth: string;
         minWidth: number;
         flexShrink: number;
-        borderColor: string;
+        position: "relative";
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
         borderStyle: "solid";
         borderLeft: number;
         borderTopRightRadius: import("@alveole/theme").Radius;
         borderBottomRightRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "auto";
     };
     toolbar: {
         padding: string | number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
         borderStyle: "solid";
         borderTopLeftRadius: import("@alveole/theme").Radius;
         borderTopRightRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         display: "flex";
         flexDirection: "row";
         gap: string | number;
@@ -122,7 +123,7 @@ export declare const useStyles: () => {
         justifyContent: "flex-end";
     };
     toolbarTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingLeft: string | number;
         marginTop: string;
         marginBottom: string;
@@ -134,7 +135,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     toolbarState: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         userSelect: "none";
         fontVariant: "tabular-nums";
         fontSize: 14;
@@ -146,7 +147,7 @@ export declare const useStyles: () => {
     toolbarDivider: {
         width: number;
         height: "50%";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         marginTop: string;
         marginBottom: string;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAoKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKnB,CAAC"}
+{"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAuKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKnB,CAAC"}