@alveole/components 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/generated/version.d.ts +1 -1
- package/dist/generated/version.js +1 -1
- package/dist/stories/index.d.ts +1 -0
- package/dist/stories/index.d.ts.map +1 -1
- package/dist/stories/index.js +1 -0
- package/dist/ui/FilterDate/FilterDate.d.ts +19 -0
- package/dist/ui/FilterDate/FilterDate.d.ts.map +1 -0
- package/dist/ui/FilterDate/FilterDate.js +89 -0
- package/dist/ui/FilterDate/FilterDate.stories.d.ts +48 -0
- package/dist/ui/FilterDate/FilterDate.stories.d.ts.map +1 -0
- package/dist/ui/FilterDate/FilterDate.stories.js +18 -0
- package/dist/ui/FilterDate/FilterDate.stories.sources.d.ts +6 -0
- package/dist/ui/FilterDate/FilterDate.stories.sources.d.ts.map +1 -0
- package/dist/ui/FilterDate/FilterDate.stories.sources.js +6 -0
- package/dist/ui/FilterDate/FilterDate.styles.d.ts +37 -0
- package/dist/ui/FilterDate/FilterDate.styles.d.ts.map +1 -0
- package/dist/ui/FilterDate/FilterDate.styles.js +33 -0
- package/dist/ui/FilterDate/index.d.ts +2 -0
- package/dist/ui/FilterDate/index.d.ts.map +1 -0
- package/dist/ui/FilterDate/index.js +1 -0
- package/dist/ui/index.d.ts +1 -0
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const ALVEOLE_COMPONENTS_VERSION: "1.
|
|
1
|
+
export declare const ALVEOLE_COMPONENTS_VERSION: "1.8.0";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const ALVEOLE_COMPONENTS_VERSION = "1.
|
|
1
|
+
export const ALVEOLE_COMPONENTS_VERSION = "1.8.0";
|
package/dist/stories/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ export * as EmailFieldStory from '../ui/EmailField/EmailField.stories';
|
|
|
37
37
|
export * as EmailInputStory from '../ui/EmailInput/EmailInput.stories';
|
|
38
38
|
export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
|
|
39
39
|
export * as FileFieldStory from '../ui/FileField/FileField.stories';
|
|
40
|
+
export * as FilterDateStory from '../ui/FilterDate/FilterDate.stories';
|
|
40
41
|
export * as FormControlStory from '../ui/FormControl/FormControl.stories';
|
|
41
42
|
export * as GridStory from '../ui/Grid/Grid.stories';
|
|
42
43
|
export * as HeaderStory from '../ui/Header/Header.stories';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}
|
package/dist/stories/index.js
CHANGED
|
@@ -39,6 +39,7 @@ export * as EmailFieldStory from '../ui/EmailField/EmailField.stories';
|
|
|
39
39
|
export * as EmailInputStory from '../ui/EmailInput/EmailInput.stories';
|
|
40
40
|
export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
|
|
41
41
|
export * as FileFieldStory from '../ui/FileField/FileField.stories';
|
|
42
|
+
export * as FilterDateStory from '../ui/FilterDate/FilterDate.stories';
|
|
42
43
|
export * as FormControlStory from '../ui/FormControl/FormControl.stories';
|
|
43
44
|
export * as GridStory from '../ui/Grid/Grid.stories';
|
|
44
45
|
export * as HeaderStory from '../ui/Header/Header.stories';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BoxProps } from '../../core/Box';
|
|
3
|
+
export type FilterDateValue = {
|
|
4
|
+
years: number[];
|
|
5
|
+
months: number[];
|
|
6
|
+
};
|
|
7
|
+
export type FilterDateProps = BoxProps & {
|
|
8
|
+
title: string;
|
|
9
|
+
local?: 'fr' | 'en';
|
|
10
|
+
/** Année de départ */
|
|
11
|
+
from: number | 'today';
|
|
12
|
+
/** Année de fin */
|
|
13
|
+
to: number | 'today';
|
|
14
|
+
value: FilterDateValue;
|
|
15
|
+
onChange?: (value: FilterDateValue, stringValues: `${string}-${string}`[]) => void;
|
|
16
|
+
};
|
|
17
|
+
export declare const filerDateValueToDates: (values: FilterDateValue, from: FilterDateProps["from"], to: FilterDateProps["to"]) => `${string}-${string}`[];
|
|
18
|
+
export declare const FilterDate: (props: FilterDateProps) => React.JSX.Element;
|
|
19
|
+
//# sourceMappingURL=FilterDate.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterDate.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAO/C,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,sBAAsB;IACtB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,mBAAmB;IACnB,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,MAAM,IAAI,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AAgBF,eAAO,MAAM,qBAAqB,GAChC,QAAQ,eAAe,EACvB,MAAM,eAAe,CAAC,MAAM,CAAC,EAC7B,IAAI,eAAe,CAAC,IAAI,CAAC,KACxB,GAAG,MAAM,IAAI,MAAM,EAAE,EAevB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAmIhD,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { format } from 'date-fns';
|
|
3
|
+
import { enUS, fr } from 'date-fns/locale';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { ScrollView } from 'react-native';
|
|
6
|
+
import { Box } from '../../core/Box';
|
|
7
|
+
import { Typography } from '../../core/Typography';
|
|
8
|
+
import { BottomSheet } from '../BottomSheet';
|
|
9
|
+
import { Button } from '../Button';
|
|
10
|
+
import { Grid } from '../Grid';
|
|
11
|
+
import { useStyles } from './FilterDate.styles';
|
|
12
|
+
const capitalize = (value) => value.charAt(0).toUpperCase() + value.slice(1);
|
|
13
|
+
const monthsFr = Array.from({ length: 12 }, (_, month) => ({
|
|
14
|
+
label: capitalize(format(new Date(2026, month, 1), 'MMMM', { locale: fr })),
|
|
15
|
+
value: month + 1,
|
|
16
|
+
toString: format(new Date(2026, month, 1), 'MM'),
|
|
17
|
+
}));
|
|
18
|
+
const monthsEn = Array.from({ length: 12 }, (_, month) => ({
|
|
19
|
+
label: capitalize(format(new Date(2026, month, 1), 'MMMM', { locale: enUS })),
|
|
20
|
+
value: month + 1,
|
|
21
|
+
toString: format(new Date(2026, month, 1), 'MM'),
|
|
22
|
+
}));
|
|
23
|
+
export const filerDateValueToDates = (values, from, to) => {
|
|
24
|
+
if (values.months.length === 0 && values.years.length === 0)
|
|
25
|
+
return [];
|
|
26
|
+
const fromYear = from === 'today' ? new Date().getFullYear() : from;
|
|
27
|
+
const toYear = to === 'today' ? new Date().getFullYear() : to;
|
|
28
|
+
const yearsOnly = values.months.length === 0 && values.years.length > 0;
|
|
29
|
+
const monthsOnly = values.months.length > 0 && values.years.length === 0;
|
|
30
|
+
const yearsList = Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
|
|
31
|
+
if (yearsOnly)
|
|
32
|
+
return values.years.flatMap(y => monthsFr.map(m => `${y}-${m.toString}`));
|
|
33
|
+
if (monthsOnly)
|
|
34
|
+
return values.months.flatMap(m => yearsList.map(y => `${y}-${format(new Date(2026, m - 1, 1), 'MM')}`));
|
|
35
|
+
return values.years.flatMap(y => values.months.map(m => `${y}-${format(new Date(2026, m - 1, 1), 'MM')}`));
|
|
36
|
+
};
|
|
37
|
+
export const FilterDate = (props) => {
|
|
38
|
+
const { title, local = 'fr', from, to, value, onChange } = props;
|
|
39
|
+
const actionLabel = local === 'fr' ? 'Effacer' : 'Clear';
|
|
40
|
+
const yearsLabel = local === 'fr' ? 'Années' : 'Years';
|
|
41
|
+
const monthsLabel = local === 'fr' ? 'Mois' : 'Months';
|
|
42
|
+
const fromYear = from === 'today' ? new Date().getFullYear() : from;
|
|
43
|
+
const toYear = to === 'today' ? new Date().getFullYear() : to;
|
|
44
|
+
const yearsList = Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
|
|
45
|
+
const monthsList = local === 'fr' ? monthsFr : monthsEn;
|
|
46
|
+
const [open, setOpen] = React.useState(false);
|
|
47
|
+
const [years, setYears] = React.useState(value.years);
|
|
48
|
+
const [months, setMonths] = React.useState(value.months);
|
|
49
|
+
const yearsScrollRef = React.useRef(null);
|
|
50
|
+
const styles = useStyles();
|
|
51
|
+
const disabledReset = React.useMemo(() => years.length === 0 && months.length === 0, [months.length, years.length]);
|
|
52
|
+
const hasValues = React.useMemo(() => years.length > 0 || months.length > 0, [months.length, years.length]);
|
|
53
|
+
const scrollYearsToEnd = React.useCallback(() => {
|
|
54
|
+
yearsScrollRef.current?.scrollToEnd({ animated: false });
|
|
55
|
+
}, []);
|
|
56
|
+
React.useEffect(() => {
|
|
57
|
+
if (open) {
|
|
58
|
+
requestAnimationFrame(scrollYearsToEnd);
|
|
59
|
+
}
|
|
60
|
+
}, [open, scrollYearsToEnd]);
|
|
61
|
+
const handleReset = React.useCallback(() => {
|
|
62
|
+
setYears([]);
|
|
63
|
+
setMonths([]);
|
|
64
|
+
onChange?.({ years: [], months: [] }, []);
|
|
65
|
+
}, [onChange]);
|
|
66
|
+
const handlePressYear = React.useCallback((y) => {
|
|
67
|
+
let newYears = years;
|
|
68
|
+
if (newYears.includes(y))
|
|
69
|
+
newYears = newYears.filter(v => v !== y);
|
|
70
|
+
else
|
|
71
|
+
newYears = [...newYears, y];
|
|
72
|
+
setYears(newYears);
|
|
73
|
+
onChange?.({ years: newYears, months }, filerDateValueToDates({ years: newYears, months }, from, to));
|
|
74
|
+
}, [from, months, onChange, to, years]);
|
|
75
|
+
const handlePressMonth = React.useCallback((m) => {
|
|
76
|
+
let newMonths = months;
|
|
77
|
+
if (newMonths.includes(m))
|
|
78
|
+
newMonths = newMonths.filter(v => v !== m);
|
|
79
|
+
else
|
|
80
|
+
newMonths = [...newMonths, m];
|
|
81
|
+
setMonths(newMonths);
|
|
82
|
+
onChange?.({ years, months: newMonths }, filerDateValueToDates({ years, months: newMonths }, from, to));
|
|
83
|
+
}, [from, months, onChange, to, years]);
|
|
84
|
+
return (_jsxs(React.Fragment, { children: [_jsx(Button, { variant: "secondary", title: title, endIcon: "ChevronDown", size: "sm", selected: hasValues, active: open, onPress: () => setOpen(true) }), _jsx(BottomSheet, { fitContent: true, title: title, open: open, setOpen: setOpen, action: _jsx(Button, { title: actionLabel, variant: "tertiary", size: "sm", disabled: disabledReset, onPress: handleReset }), children: _jsxs(Box, { style: styles.container, children: [_jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: yearsLabel }), _jsx(ScrollView, { ref: yearsScrollRef, horizontal: true, nestedScrollEnabled: true, showsHorizontalScrollIndicator: false, style: [styles.filtersHorizontalScroll, { width: '100%' }], contentContainerStyle: styles.filtersScroll, onContentSizeChange: scrollYearsToEnd, children: yearsList.map(y => (_jsx(Box, { children: _jsx(FilterDateButton, { type: "year", title: y, selected: years.includes(y), onPress: () => handlePressYear(y) }) }, `year--${y}`))) })] }), _jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: monthsLabel }), _jsx(Grid, { gap: '1W', pl: '2W', pr: '2W', children: monthsList.map(m => (_jsx(Grid.Column, { size: 4, children: _jsx(FilterDateButton, { type: "month", title: m.label, selected: months.includes(m.value), onPress: () => handlePressMonth(m.value) }) }, `month--${m.value}`))) })] })] }) })] }));
|
|
85
|
+
};
|
|
86
|
+
const FilterDateButton = (props) => {
|
|
87
|
+
const { title, type, selected, onPress } = props;
|
|
88
|
+
return (_jsx(Button, { title: `${title}`, variant: "secondary", size: type === 'month' ? 'md' : 'sm', onPress: onPress, selected: selected }));
|
|
89
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
tags: "ui"[];
|
|
5
|
+
experimental: false;
|
|
6
|
+
description: string;
|
|
7
|
+
component: (props: import("@alveole/components").FilterDateProps) => React.JSX.Element;
|
|
8
|
+
styleFn: () => {
|
|
9
|
+
container: {
|
|
10
|
+
display: "flex";
|
|
11
|
+
flexDirection: "column";
|
|
12
|
+
gap: string | number;
|
|
13
|
+
};
|
|
14
|
+
partContainer: {
|
|
15
|
+
display: "flex";
|
|
16
|
+
flexDirection: "column";
|
|
17
|
+
alignItems: "flex-start";
|
|
18
|
+
gap: string | number;
|
|
19
|
+
alignSelf: "stretch";
|
|
20
|
+
};
|
|
21
|
+
partTitle: {
|
|
22
|
+
color: string;
|
|
23
|
+
fontSize: 12;
|
|
24
|
+
lineHeight: 20;
|
|
25
|
+
letterSpacing: 0;
|
|
26
|
+
fontFamily: string;
|
|
27
|
+
fontWeight?: import("react-native").TextStyle["fontWeight"];
|
|
28
|
+
paddingLeft: string | number;
|
|
29
|
+
paddingRight: string | number;
|
|
30
|
+
};
|
|
31
|
+
filtersHorizontalScroll: {
|
|
32
|
+
minWidth: number;
|
|
33
|
+
flexGrow: number;
|
|
34
|
+
};
|
|
35
|
+
filtersScroll: {
|
|
36
|
+
flexDirection: "row";
|
|
37
|
+
alignItems: "flex-end";
|
|
38
|
+
gap: string | number;
|
|
39
|
+
flexGrow: number;
|
|
40
|
+
paddingLeft: import("@alveole/theme").Spacing;
|
|
41
|
+
paddingRight: import("@alveole/theme").Spacing;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
export default _default;
|
|
46
|
+
export declare const Default: () => React.JSX.Element;
|
|
47
|
+
export * as Sources from './FilterDate.stories.sources';
|
|
48
|
+
//# sourceMappingURL=FilterDate.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterDate.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1B,wBAOkB;AAElB,eAAO,MAAM,OAAO,yBAQnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Box } from '@alveole/components';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { FilterDate } from './FilterDate';
|
|
5
|
+
import { useStyles } from './FilterDate.styles';
|
|
6
|
+
export default {
|
|
7
|
+
title: 'FilterDate',
|
|
8
|
+
tags: ['ui'],
|
|
9
|
+
experimental: false,
|
|
10
|
+
description: 'Modal de selection d’année/mois',
|
|
11
|
+
component: FilterDate,
|
|
12
|
+
styleFn: useStyles,
|
|
13
|
+
};
|
|
14
|
+
export const Default = () => {
|
|
15
|
+
const [value, setValue] = React.useState({ years: [], months: [] });
|
|
16
|
+
return (_jsx(Box, { display: "flex", flexDirection: "row", justify: "flex-start", children: _jsx(FilterDate, { title: "Titre", from: 1990, to: 'today', value: value, onChange: setValue }) }));
|
|
17
|
+
};
|
|
18
|
+
export * as Sources from './FilterDate.stories.sources';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterDate.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgV,CAAC;AAErW,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
// This file is generated. Do not edit manually.
|
|
2
|
+
// Source: src/ui/FilterDate/FilterDate.stories.tsx
|
|
3
|
+
export const Default = () => "export const Default = () => {\n const [value, setValue] = React.useState<FilterDateValue>({ years: [], months: [] });\n\n return (\n <Box display=\"flex\" flexDirection=\"row\" justify=\"flex-start\">\n <FilterDate title=\"Titre\" from={1990} to={'today'} value={value} onChange={setValue} />\n </Box>\n );\n};";
|
|
4
|
+
export const storySources = {
|
|
5
|
+
Default,
|
|
6
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export declare const useStyles: () => {
|
|
2
|
+
container: {
|
|
3
|
+
display: "flex";
|
|
4
|
+
flexDirection: "column";
|
|
5
|
+
gap: string | number;
|
|
6
|
+
};
|
|
7
|
+
partContainer: {
|
|
8
|
+
display: "flex";
|
|
9
|
+
flexDirection: "column";
|
|
10
|
+
alignItems: "flex-start";
|
|
11
|
+
gap: string | number;
|
|
12
|
+
alignSelf: "stretch";
|
|
13
|
+
};
|
|
14
|
+
partTitle: {
|
|
15
|
+
color: string;
|
|
16
|
+
fontSize: 12;
|
|
17
|
+
lineHeight: 20;
|
|
18
|
+
letterSpacing: 0;
|
|
19
|
+
fontFamily: string;
|
|
20
|
+
fontWeight?: import("react-native").TextStyle["fontWeight"];
|
|
21
|
+
paddingLeft: string | number;
|
|
22
|
+
paddingRight: string | number;
|
|
23
|
+
};
|
|
24
|
+
filtersHorizontalScroll: {
|
|
25
|
+
minWidth: number;
|
|
26
|
+
flexGrow: number;
|
|
27
|
+
};
|
|
28
|
+
filtersScroll: {
|
|
29
|
+
flexDirection: "row";
|
|
30
|
+
alignItems: "flex-end";
|
|
31
|
+
gap: string | number;
|
|
32
|
+
flexGrow: number;
|
|
33
|
+
paddingLeft: import("@alveole/theme").Spacing;
|
|
34
|
+
paddingRight: import("@alveole/theme").Spacing;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=FilterDate.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterDate.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BnB,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { makeStyles } from '@alveole/theme';
|
|
2
|
+
export const useStyles = makeStyles(({ spacing, spacingValue, color, text }) => ({
|
|
3
|
+
container: {
|
|
4
|
+
display: 'flex',
|
|
5
|
+
flexDirection: 'column',
|
|
6
|
+
gap: spacing('3W'),
|
|
7
|
+
},
|
|
8
|
+
partContainer: {
|
|
9
|
+
display: 'flex',
|
|
10
|
+
flexDirection: 'column',
|
|
11
|
+
alignItems: 'flex-start',
|
|
12
|
+
gap: spacing('1W'),
|
|
13
|
+
alignSelf: 'stretch',
|
|
14
|
+
},
|
|
15
|
+
partTitle: {
|
|
16
|
+
paddingLeft: spacing('2W'),
|
|
17
|
+
paddingRight: spacing('2W'),
|
|
18
|
+
...text['Corps de texte'].XS.Bold,
|
|
19
|
+
color: color.light.text['mention-grey'],
|
|
20
|
+
},
|
|
21
|
+
filtersHorizontalScroll: {
|
|
22
|
+
minWidth: 0,
|
|
23
|
+
flexGrow: 0,
|
|
24
|
+
},
|
|
25
|
+
filtersScroll: {
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
alignItems: 'flex-end',
|
|
28
|
+
gap: spacing('1W'),
|
|
29
|
+
flexGrow: 0,
|
|
30
|
+
paddingLeft: spacingValue('2W'),
|
|
31
|
+
paddingRight: spacingValue('2W'),
|
|
32
|
+
},
|
|
33
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './FilterDate';
|
package/dist/ui/index.d.ts
CHANGED
package/dist/ui/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
|
package/dist/ui/index.js
CHANGED