orn-ui 0.1.1 → 0.2.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/README.md +9 -2
- package/lib/commonjs/atoms/PressableScale.js +9 -10
- package/lib/commonjs/atoms/PressableScale.js.map +1 -1
- package/lib/commonjs/atoms/Skeleton.js +96 -0
- package/lib/commonjs/atoms/Skeleton.js.map +1 -0
- package/lib/commonjs/atoms/Transition.js +171 -0
- package/lib/commonjs/atoms/Transition.js.map +1 -0
- package/lib/commonjs/atoms/index.js +20 -0
- package/lib/commonjs/atoms/index.js.map +1 -1
- package/lib/commonjs/molecules/OptionCard.js +55 -22
- package/lib/commonjs/molecules/OptionCard.js.map +1 -1
- package/lib/commonjs/molecules/{ThemeToggle.js → SegmentedControl.js} +36 -36
- package/lib/commonjs/molecules/SegmentedControl.js.map +1 -0
- package/lib/commonjs/molecules/Stepper.js +124 -47
- package/lib/commonjs/molecules/Stepper.js.map +1 -1
- package/lib/commonjs/molecules/index.js +9 -3
- package/lib/commonjs/molecules/index.js.map +1 -1
- package/lib/commonjs/organisms/AlertProvider.js +26 -0
- package/lib/commonjs/organisms/AlertProvider.js.map +1 -1
- package/lib/commonjs/organisms/BottomSheet.js +118 -39
- package/lib/commonjs/organisms/BottomSheet.js.map +1 -1
- package/lib/commonjs/organisms/List.js +66 -44
- package/lib/commonjs/organisms/List.js.map +1 -1
- package/lib/commonjs/organisms/Modal.js +42 -87
- package/lib/commonjs/organisms/Modal.js.map +1 -1
- package/lib/commonjs/organisms/NavigationBar.js +205 -0
- package/lib/commonjs/organisms/NavigationBar.js.map +1 -0
- package/lib/commonjs/organisms/Screen.js +9 -2
- package/lib/commonjs/organisms/Screen.js.map +1 -1
- package/lib/commonjs/organisms/SearchList.js +97 -28
- package/lib/commonjs/organisms/SearchList.js.map +1 -1
- package/lib/commonjs/organisms/Select.js +222 -50
- package/lib/commonjs/organisms/Select.js.map +1 -1
- package/lib/commonjs/organisms/ThemeToggle.js +52 -0
- package/lib/commonjs/organisms/ThemeToggle.js.map +1 -0
- package/lib/commonjs/organisms/Toast.js +8 -22
- package/lib/commonjs/organisms/Toast.js.map +1 -1
- package/lib/commonjs/organisms/ToastProvider.js +24 -0
- package/lib/commonjs/organisms/ToastProvider.js.map +1 -1
- package/lib/commonjs/organisms/Wizard.js +22 -2
- package/lib/commonjs/organisms/Wizard.js.map +1 -1
- package/lib/commonjs/organisms/imperativeBridge.js +28 -0
- package/lib/commonjs/organisms/imperativeBridge.js.map +1 -0
- package/lib/commonjs/organisms/index.js +50 -0
- package/lib/commonjs/organisms/index.js.map +1 -1
- package/lib/commonjs/theme/colors.js +207 -0
- package/lib/commonjs/theme/colors.js.map +1 -0
- package/lib/commonjs/theme/createTheme.js +25 -2
- package/lib/commonjs/theme/createTheme.js.map +1 -1
- package/lib/commonjs/theme/index.js +25 -0
- package/lib/commonjs/theme/index.js.map +1 -1
- package/lib/commonjs/theme/palettes.js +5 -2
- package/lib/commonjs/theme/palettes.js.map +1 -1
- package/lib/module/atoms/PressableScale.js +9 -10
- package/lib/module/atoms/PressableScale.js.map +1 -1
- package/lib/module/atoms/Skeleton.js +91 -0
- package/lib/module/atoms/Skeleton.js.map +1 -0
- package/lib/module/atoms/Transition.js +165 -0
- package/lib/module/atoms/Transition.js.map +1 -0
- package/lib/module/atoms/index.js +2 -0
- package/lib/module/atoms/index.js.map +1 -1
- package/lib/module/molecules/OptionCard.js +56 -23
- package/lib/module/molecules/OptionCard.js.map +1 -1
- package/lib/module/molecules/{ThemeToggle.js → SegmentedControl.js} +36 -36
- package/lib/module/molecules/SegmentedControl.js.map +1 -0
- package/lib/module/molecules/Stepper.js +125 -49
- package/lib/module/molecules/Stepper.js.map +1 -1
- package/lib/module/molecules/index.js +2 -2
- package/lib/module/molecules/index.js.map +1 -1
- package/lib/module/organisms/AlertProvider.js +24 -1
- package/lib/module/organisms/AlertProvider.js.map +1 -1
- package/lib/module/organisms/BottomSheet.js +120 -41
- package/lib/module/organisms/BottomSheet.js.map +1 -1
- package/lib/module/organisms/List.js +68 -46
- package/lib/module/organisms/List.js.map +1 -1
- package/lib/module/organisms/Modal.js +44 -89
- package/lib/module/organisms/Modal.js.map +1 -1
- package/lib/module/organisms/NavigationBar.js +200 -0
- package/lib/module/organisms/NavigationBar.js.map +1 -0
- package/lib/module/organisms/Screen.js +9 -2
- package/lib/module/organisms/Screen.js.map +1 -1
- package/lib/module/organisms/SearchList.js +98 -29
- package/lib/module/organisms/SearchList.js.map +1 -1
- package/lib/module/organisms/Select.js +224 -52
- package/lib/module/organisms/Select.js.map +1 -1
- package/lib/module/organisms/ThemeToggle.js +47 -0
- package/lib/module/organisms/ThemeToggle.js.map +1 -0
- package/lib/module/organisms/Toast.js +10 -24
- package/lib/module/organisms/Toast.js.map +1 -1
- package/lib/module/organisms/ToastProvider.js +21 -0
- package/lib/module/organisms/ToastProvider.js.map +1 -1
- package/lib/module/organisms/Wizard.js +23 -3
- package/lib/module/organisms/Wizard.js.map +1 -1
- package/lib/module/organisms/imperativeBridge.js +24 -0
- package/lib/module/organisms/imperativeBridge.js.map +1 -0
- package/lib/module/organisms/index.js +4 -2
- package/lib/module/organisms/index.js.map +1 -1
- package/lib/module/theme/colors.js +194 -0
- package/lib/module/theme/colors.js.map +1 -0
- package/lib/module/theme/createTheme.js +25 -2
- package/lib/module/theme/createTheme.js.map +1 -1
- package/lib/module/theme/index.js +1 -0
- package/lib/module/theme/index.js.map +1 -1
- package/lib/module/theme/palettes.js +5 -2
- package/lib/module/theme/palettes.js.map +1 -1
- package/lib/typescript/atoms/PressableScale.d.ts +3 -2
- package/lib/typescript/atoms/PressableScale.d.ts.map +1 -1
- package/lib/typescript/atoms/Skeleton.d.ts +29 -0
- package/lib/typescript/atoms/Skeleton.d.ts.map +1 -0
- package/lib/typescript/atoms/Transition.d.ts +51 -0
- package/lib/typescript/atoms/Transition.d.ts.map +1 -0
- package/lib/typescript/atoms/index.d.ts +4 -0
- package/lib/typescript/atoms/index.d.ts.map +1 -1
- package/lib/typescript/molecules/OptionCard.d.ts +11 -6
- package/lib/typescript/molecules/OptionCard.d.ts.map +1 -1
- package/lib/typescript/molecules/SegmentedControl.d.ts +24 -0
- package/lib/typescript/molecules/SegmentedControl.d.ts.map +1 -0
- package/lib/typescript/molecules/Stepper.d.ts +35 -3
- package/lib/typescript/molecules/Stepper.d.ts.map +1 -1
- package/lib/typescript/molecules/index.d.ts +4 -4
- package/lib/typescript/molecules/index.d.ts.map +1 -1
- package/lib/typescript/organisms/AlertProvider.d.ts +9 -0
- package/lib/typescript/organisms/AlertProvider.d.ts.map +1 -1
- package/lib/typescript/organisms/BottomSheet.d.ts +26 -4
- package/lib/typescript/organisms/BottomSheet.d.ts.map +1 -1
- package/lib/typescript/organisms/List.d.ts +9 -2
- package/lib/typescript/organisms/List.d.ts.map +1 -1
- package/lib/typescript/organisms/Modal.d.ts +3 -5
- package/lib/typescript/organisms/Modal.d.ts.map +1 -1
- package/lib/typescript/organisms/NavigationBar.d.ts +32 -0
- package/lib/typescript/organisms/NavigationBar.d.ts.map +1 -0
- package/lib/typescript/organisms/Screen.d.ts +2 -1
- package/lib/typescript/organisms/Screen.d.ts.map +1 -1
- package/lib/typescript/organisms/SearchList.d.ts +21 -5
- package/lib/typescript/organisms/SearchList.d.ts.map +1 -1
- package/lib/typescript/organisms/Select.d.ts +19 -4
- package/lib/typescript/organisms/Select.d.ts.map +1 -1
- package/lib/typescript/{molecules → organisms}/ThemeToggle.d.ts +4 -4
- package/lib/typescript/organisms/ThemeToggle.d.ts.map +1 -0
- package/lib/typescript/organisms/Toast.d.ts.map +1 -1
- package/lib/typescript/organisms/ToastProvider.d.ts +8 -0
- package/lib/typescript/organisms/ToastProvider.d.ts.map +1 -1
- package/lib/typescript/organisms/Wizard.d.ts +7 -1
- package/lib/typescript/organisms/Wizard.d.ts.map +1 -1
- package/lib/typescript/organisms/imperativeBridge.d.ts +12 -0
- package/lib/typescript/organisms/imperativeBridge.d.ts.map +1 -0
- package/lib/typescript/organisms/index.d.ts +7 -3
- package/lib/typescript/organisms/index.d.ts.map +1 -1
- package/lib/typescript/theme/colors.d.ts +44 -0
- package/lib/typescript/theme/colors.d.ts.map +1 -0
- package/lib/typescript/theme/createTheme.d.ts +3 -0
- package/lib/typescript/theme/createTheme.d.ts.map +1 -1
- package/lib/typescript/theme/index.d.ts +3 -1
- package/lib/typescript/theme/index.d.ts.map +1 -1
- package/lib/typescript/theme/palettes.d.ts.map +1 -1
- package/lib/typescript/theme/types.d.ts +9 -0
- package/lib/typescript/theme/types.d.ts.map +1 -1
- package/package.json +67 -6
- package/registry/alert-provider.json +9 -2
- package/registry/bottom-sheet.json +6 -2
- package/registry/core.json +8 -4
- package/registry/date-field.json +1 -0
- package/registry/index.json +96 -27
- package/registry/list.json +2 -1
- package/registry/manifest.json +44 -6
- package/registry/modal.json +3 -2
- package/registry/navigation-bar.json +18 -0
- package/registry/option-card.json +3 -2
- package/registry/pressable-scale.json +1 -1
- package/registry/screen.json +1 -1
- package/registry/search-list.json +2 -1
- package/registry/segmented-control.json +18 -0
- package/registry/select.json +1 -1
- package/registry/skeleton.json +18 -0
- package/registry/stepper.json +3 -2
- package/registry/theme-toggle.json +5 -4
- package/registry/toast-provider.json +11 -3
- package/registry/toast.json +3 -2
- package/registry/transition.json +19 -0
- package/registry/wizard.json +3 -2
- package/src/atoms/PressableScale.tsx +16 -6
- package/src/atoms/Skeleton.tsx +114 -0
- package/src/atoms/Transition.tsx +189 -0
- package/src/atoms/index.ts +4 -0
- package/src/molecules/OptionCard.tsx +62 -25
- package/src/molecules/SegmentedControl.tsx +84 -0
- package/src/molecules/Stepper.tsx +147 -32
- package/src/molecules/index.ts +4 -4
- package/src/organisms/AlertProvider.tsx +26 -1
- package/src/organisms/BottomSheet.tsx +214 -62
- package/src/organisms/List.tsx +73 -41
- package/src/organisms/Modal.tsx +49 -61
- package/src/organisms/NavigationBar.tsx +223 -0
- package/src/organisms/Screen.tsx +11 -3
- package/src/organisms/SearchList.tsx +132 -36
- package/src/organisms/Select.tsx +223 -45
- package/src/organisms/ThemeToggle.tsx +30 -0
- package/src/organisms/Toast.tsx +8 -21
- package/src/organisms/ToastProvider.tsx +24 -0
- package/src/organisms/Wizard.tsx +36 -3
- package/src/organisms/imperativeBridge.ts +28 -0
- package/src/organisms/index.ts +7 -3
- package/src/theme/colors.ts +175 -0
- package/src/theme/createTheme.ts +38 -4
- package/src/theme/index.ts +3 -1
- package/src/theme/palettes.ts +5 -2
- package/src/theme/types.ts +10 -0
- package/lib/commonjs/molecules/ThemeToggle.js.map +0 -1
- package/lib/module/molecules/ThemeToggle.js.map +0 -1
- package/lib/typescript/molecules/ThemeToggle.d.ts.map +0 -1
- package/src/molecules/ThemeToggle.tsx +0 -67
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { AccessibilityInfo, Animated, Easing } from 'react-native';
|
|
5
|
+
import { useTheme } from '../theme/UIProvider';
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const SCALE_FROM = {
|
|
8
|
+
scale: 0.92,
|
|
9
|
+
pop: 0.8
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Sigue el ajuste de "reducir movimiento" del sistema: con él activo las
|
|
14
|
+
* animaciones saltan al estado final en vez de desactivarse, así que los
|
|
15
|
+
* callbacks y el desmontaje siguen ocurriendo igual.
|
|
16
|
+
*/
|
|
17
|
+
export function useReduceMotion() {
|
|
18
|
+
const [reduceMotion, setReduceMotion] = useState(false);
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
let alive = true;
|
|
21
|
+
// Sólo se actualiza el estado si el ajuste está activo: el valor inicial ya
|
|
22
|
+
// es `false` y un setState de false a false costaría un render por montaje.
|
|
23
|
+
AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
|
|
24
|
+
if (alive && enabled) setReduceMotion(true);
|
|
25
|
+
});
|
|
26
|
+
const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
|
|
27
|
+
return () => {
|
|
28
|
+
alive = false;
|
|
29
|
+
sub.remove();
|
|
30
|
+
};
|
|
31
|
+
}, []);
|
|
32
|
+
return reduceMotion;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Transition
|
|
37
|
+
* Envuelve cualquier árbol y lo anima al entrar y al salir. Todos los presets
|
|
38
|
+
* se reducen a `opacity` y `transform` sobre un único Animated.Value, que es
|
|
39
|
+
* lo que `useNativeDriver` sabe mandar al hilo nativo: la animación corre ahí
|
|
40
|
+
* y el hilo de JS no participa de ningún frame — por eso no hay presets de
|
|
41
|
+
* alto, ancho o color, que obligarían a volver a JS en cada frame.
|
|
42
|
+
*
|
|
43
|
+
* El nodo se mantiene montado hasta que termina la animación de salida, y el
|
|
44
|
+
* comportamiento es idéntico en iOS y Android: no hay ninguna rama por
|
|
45
|
+
* plataforma.
|
|
46
|
+
*/
|
|
47
|
+
export const Transition = /*#__PURE__*/memo(({
|
|
48
|
+
children,
|
|
49
|
+
visible = true,
|
|
50
|
+
preset = 'fade',
|
|
51
|
+
duration,
|
|
52
|
+
delay = 0,
|
|
53
|
+
distance = 24,
|
|
54
|
+
spring,
|
|
55
|
+
appear = true,
|
|
56
|
+
keepMounted = false,
|
|
57
|
+
value,
|
|
58
|
+
onEntered,
|
|
59
|
+
onExited,
|
|
60
|
+
style,
|
|
61
|
+
testID
|
|
62
|
+
}) => {
|
|
63
|
+
const theme = useTheme();
|
|
64
|
+
const reduceMotion = useReduceMotion();
|
|
65
|
+
const internal = useRef(new Animated.Value(visible && !appear ? 1 : 0)).current;
|
|
66
|
+
const progress = value ?? internal;
|
|
67
|
+
const driven = value === undefined;
|
|
68
|
+
const [mounted, setMounted] = useState(visible || keepMounted);
|
|
69
|
+
|
|
70
|
+
// Los callbacks viven en un ref: pasados inline cambian de identidad en
|
|
71
|
+
// cada render y, como dependencias del efecto, reiniciarían la animación.
|
|
72
|
+
const callbacks = useRef({
|
|
73
|
+
onEntered,
|
|
74
|
+
onExited
|
|
75
|
+
});
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
callbacks.current = {
|
|
78
|
+
onEntered,
|
|
79
|
+
onExited
|
|
80
|
+
};
|
|
81
|
+
});
|
|
82
|
+
const presetKey = Array.isArray(preset) ? preset.join(' ') : preset;
|
|
83
|
+
const presets = useMemo(() => presetKey.split(' '), [presetKey]);
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
if (visible) setMounted(true);
|
|
86
|
+
}, [visible]);
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
if (!driven) return;
|
|
89
|
+
const toValue = visible ? 1 : 0;
|
|
90
|
+
const useSpring = spring ?? presets.includes('pop');
|
|
91
|
+
const animation = reduceMotion ? Animated.timing(progress, {
|
|
92
|
+
toValue,
|
|
93
|
+
duration: 0,
|
|
94
|
+
delay,
|
|
95
|
+
useNativeDriver: true
|
|
96
|
+
}) : useSpring ? Animated.spring(progress, {
|
|
97
|
+
toValue,
|
|
98
|
+
delay,
|
|
99
|
+
friction: 9,
|
|
100
|
+
tension: 90,
|
|
101
|
+
useNativeDriver: true
|
|
102
|
+
}) : Animated.timing(progress, {
|
|
103
|
+
toValue,
|
|
104
|
+
delay,
|
|
105
|
+
duration: duration ?? theme.tokens.duration.base,
|
|
106
|
+
easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
|
|
107
|
+
useNativeDriver: true
|
|
108
|
+
});
|
|
109
|
+
animation.start(({
|
|
110
|
+
finished
|
|
111
|
+
}) => {
|
|
112
|
+
if (!finished) return;
|
|
113
|
+
if (visible) {
|
|
114
|
+
callbacks.current.onEntered?.();
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
callbacks.current.onExited?.();
|
|
118
|
+
if (!keepMounted) setMounted(false);
|
|
119
|
+
});
|
|
120
|
+
return () => animation.stop();
|
|
121
|
+
}, [visible, driven, reduceMotion, spring, delay, duration, keepMounted, presets, progress, theme]);
|
|
122
|
+
const animatedStyle = useMemo(() => {
|
|
123
|
+
const transform = [];
|
|
124
|
+
let opacity;
|
|
125
|
+
for (const item of presets) {
|
|
126
|
+
if (item === 'fade') {
|
|
127
|
+
opacity = progress;
|
|
128
|
+
continue;
|
|
129
|
+
}
|
|
130
|
+
if (item === 'scale' || item === 'pop') {
|
|
131
|
+
transform.push({
|
|
132
|
+
scale: progress.interpolate({
|
|
133
|
+
inputRange: [0, 1],
|
|
134
|
+
outputRange: [SCALE_FROM[item], 1]
|
|
135
|
+
})
|
|
136
|
+
});
|
|
137
|
+
continue;
|
|
138
|
+
}
|
|
139
|
+
const vertical = item === 'slide-up' || item === 'slide-down';
|
|
140
|
+
const from = item === 'slide-up' || item === 'slide-left' ? distance : -distance;
|
|
141
|
+
const offset = progress.interpolate({
|
|
142
|
+
inputRange: [0, 1],
|
|
143
|
+
outputRange: [from, 0]
|
|
144
|
+
});
|
|
145
|
+
transform.push(vertical ? {
|
|
146
|
+
translateY: offset
|
|
147
|
+
} : {
|
|
148
|
+
translateX: offset
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
return {
|
|
152
|
+
opacity,
|
|
153
|
+
transform
|
|
154
|
+
};
|
|
155
|
+
}, [presets, progress, distance]);
|
|
156
|
+
if (!mounted) return null;
|
|
157
|
+
return /*#__PURE__*/_jsx(Animated.View, {
|
|
158
|
+
testID: testID,
|
|
159
|
+
pointerEvents: visible ? undefined : 'none',
|
|
160
|
+
style: [style, animatedStyle],
|
|
161
|
+
children: children
|
|
162
|
+
});
|
|
163
|
+
});
|
|
164
|
+
Transition.displayName = 'Transition';
|
|
165
|
+
//# sourceMappingURL=Transition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","memo","useEffect","useMemo","useRef","useState","AccessibilityInfo","Animated","Easing","useTheme","jsx","_jsx","SCALE_FROM","scale","pop","useReduceMotion","reduceMotion","setReduceMotion","alive","isReduceMotionEnabled","then","enabled","sub","addEventListener","remove","Transition","children","visible","preset","duration","delay","distance","spring","appear","keepMounted","value","onEntered","onExited","style","testID","theme","internal","Value","current","progress","driven","undefined","mounted","setMounted","callbacks","presetKey","Array","isArray","join","presets","split","toValue","useSpring","includes","animation","timing","useNativeDriver","friction","tension","tokens","base","easing","out","cubic","in","start","finished","stop","animatedStyle","transform","opacity","item","push","interpolate","inputRange","outputRange","vertical","from","offset","translateY","translateX","View","pointerEvents","displayName"],"sourceRoot":"../../../src","sources":["atoms/Transition.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,6 +11,8 @@ export { Divider } from './Divider';
|
|
|
11
11
|
export { Avatar } from './Avatar';
|
|
12
12
|
export { Image, prefetchImage } from './Image';
|
|
13
13
|
export { Spinner } from './Spinner';
|
|
14
|
+
export { Skeleton } from './Skeleton';
|
|
15
|
+
export { Transition, useReduceMotion } from './Transition';
|
|
14
16
|
export { EmptyState } from './EmptyState';
|
|
15
17
|
export { KeyValueRow } from './KeyValueRow';
|
|
16
18
|
export { Fab } from './Fab';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Title","Subtitle","Body","Caption","Button","IconButton","Input","Checkbox","Badge","Card","Divider","Avatar","Image","prefetchImage","Spinner","EmptyState","KeyValueRow","Fab","PressableScale"],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;AAAA,SAASA,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,QAAQ,QAAQ;AAEvD,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,OAAO,QAAQ,WAAW;AAEnC,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,KAAK,EAAEC,aAAa,QAAQ,SAAS;AAE9C,SAASC,OAAO,QAAQ,WAAW;AAEnC,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,WAAW,QAAQ,eAAe;AAE3C,SAASC,GAAG,QAAQ,OAAO;AAE3B,SAASC,cAAc,QAAQ,kBAAkB","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Title","Subtitle","Body","Caption","Button","IconButton","Input","Checkbox","Badge","Card","Divider","Avatar","Image","prefetchImage","Spinner","Skeleton","Transition","useReduceMotion","EmptyState","KeyValueRow","Fab","PressableScale"],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;AAAA,SAASA,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,QAAQ,QAAQ;AAEvD,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,OAAO,QAAQ,WAAW;AAEnC,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,KAAK,EAAEC,aAAa,QAAQ,SAAS;AAE9C,SAASC,OAAO,QAAQ,WAAW;AAEnC,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,UAAU,EAAEC,eAAe,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,WAAW,QAAQ,eAAe;AAE3C,SAASC,GAAG,QAAQ,OAAO;AAE3B,SAASC,cAAc,QAAQ,kBAAkB","ignoreList":[]}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { memo } from 'react';
|
|
4
|
-
import { Text,
|
|
4
|
+
import { Text, View } from 'react-native';
|
|
5
5
|
import { createStyles } from '../theme/createStyles';
|
|
6
6
|
import { useAllowFontScaling, useColors } from '../theme/UIProvider';
|
|
7
7
|
import { Icon } from '../icons/Icon';
|
|
8
|
+
import { PressableScale } from '../atoms/PressableScale';
|
|
8
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
10
|
const useStyles = createStyles(theme => ({
|
|
10
11
|
card: {
|
|
12
|
+
// Las tarjetas se reparten la fila que las contenga, sean dos o cinco.
|
|
13
|
+
flex: 1,
|
|
11
14
|
alignItems: 'center',
|
|
12
15
|
justifyContent: 'center',
|
|
13
16
|
backgroundColor: theme.colors.surface,
|
|
@@ -17,15 +20,13 @@ const useStyles = createStyles(theme => ({
|
|
|
17
20
|
...theme.tokens.shadow.sm
|
|
18
21
|
},
|
|
19
22
|
cardHorizontal: {
|
|
20
|
-
flex: 1,
|
|
21
23
|
flexDirection: 'row',
|
|
22
24
|
padding: theme.tokens.spacing.md - 2,
|
|
23
25
|
gap: theme.tokens.spacing.sm
|
|
24
26
|
},
|
|
25
27
|
cardVertical: {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
gap: 5,
|
|
28
|
+
padding: theme.tokens.spacing.md - 2,
|
|
29
|
+
gap: 6,
|
|
29
30
|
minHeight: 100
|
|
30
31
|
},
|
|
31
32
|
cardSelected: {
|
|
@@ -35,6 +36,15 @@ const useStyles = createStyles(theme => ({
|
|
|
35
36
|
elevation: 0,
|
|
36
37
|
shadowOpacity: 0
|
|
37
38
|
},
|
|
39
|
+
cardDisabled: {
|
|
40
|
+
opacity: 0.5
|
|
41
|
+
},
|
|
42
|
+
text: {
|
|
43
|
+
flexShrink: 1
|
|
44
|
+
},
|
|
45
|
+
textVertical: {
|
|
46
|
+
alignItems: 'center'
|
|
47
|
+
},
|
|
38
48
|
label: {
|
|
39
49
|
color: theme.colors.textLight,
|
|
40
50
|
fontWeight: theme.tokens.fontWeight.medium
|
|
@@ -45,47 +55,70 @@ const useStyles = createStyles(theme => ({
|
|
|
45
55
|
},
|
|
46
56
|
labelSelected: {
|
|
47
57
|
color: theme.colors.primaryText
|
|
58
|
+
},
|
|
59
|
+
description: {
|
|
60
|
+
fontSize: theme.tokens.fontSize.xs,
|
|
61
|
+
color: theme.colors.textLight,
|
|
62
|
+
marginTop: 2
|
|
63
|
+
},
|
|
64
|
+
descriptionVertical: {
|
|
65
|
+
textAlign: 'center'
|
|
48
66
|
}
|
|
49
67
|
}));
|
|
50
68
|
|
|
51
69
|
/**
|
|
52
70
|
* OptionCard
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
* de
|
|
71
|
+
* Opción excluyente con ícono y label que resalta cuando `isSelected`. Es un
|
|
72
|
+
* radio con cara de tarjeta, así que se anuncia como tal: envolver el grupo en
|
|
73
|
+
* una View con `accessibilityRole="radiogroup"` para que el lector de pantalla
|
|
74
|
+
* lea "1 de 3".
|
|
56
75
|
*/
|
|
57
76
|
export const OptionCard = /*#__PURE__*/memo(({
|
|
58
77
|
label,
|
|
78
|
+
description,
|
|
59
79
|
iconName,
|
|
60
80
|
isSelected,
|
|
61
81
|
onPress,
|
|
82
|
+
disabled = false,
|
|
62
83
|
layout = 'horizontal',
|
|
63
|
-
style
|
|
84
|
+
style,
|
|
85
|
+
testID
|
|
64
86
|
}) => {
|
|
65
87
|
const colors = useColors();
|
|
66
88
|
const styles = useStyles();
|
|
67
89
|
const allowFontScaling = useAllowFontScaling();
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
//
|
|
71
|
-
// sombra como un borde oscuro
|
|
72
|
-
, {
|
|
73
|
-
|
|
74
|
-
style: [styles.card, layout === 'vertical' ? styles.cardVertical : styles.cardHorizontal, isSelected && styles.cardSelected, style],
|
|
90
|
+
const isVertical = layout === 'vertical';
|
|
91
|
+
|
|
92
|
+
// Feedback por transform y no por opacity: con elevation, animar la opacity
|
|
93
|
+
// dispara un bug de Android que redibuja la sombra como un borde oscuro.
|
|
94
|
+
return /*#__PURE__*/_jsxs(PressableScale, {
|
|
95
|
+
style: [styles.card, isVertical ? styles.cardVertical : styles.cardHorizontal, isSelected && styles.cardSelected, disabled && styles.cardDisabled, style],
|
|
75
96
|
onPress: onPress,
|
|
76
|
-
|
|
97
|
+
disabled: disabled,
|
|
98
|
+
accessibilityRole: "radio",
|
|
77
99
|
accessibilityState: {
|
|
78
|
-
selected: isSelected
|
|
100
|
+
selected: isSelected,
|
|
101
|
+
checked: isSelected,
|
|
102
|
+
disabled
|
|
79
103
|
},
|
|
80
104
|
accessibilityLabel: label,
|
|
81
|
-
|
|
105
|
+
accessibilityHint: description,
|
|
106
|
+
testID: testID,
|
|
107
|
+
children: [!!iconName && /*#__PURE__*/_jsx(Icon, {
|
|
82
108
|
name: iconName,
|
|
83
109
|
size: 24,
|
|
84
110
|
color: isSelected ? colors.primary : colors.textLight
|
|
85
|
-
}), /*#__PURE__*/
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
111
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
112
|
+
style: [styles.text, isVertical && styles.textVertical],
|
|
113
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
114
|
+
allowFontScaling: allowFontScaling,
|
|
115
|
+
style: [styles.label, isVertical && styles.labelVertical, isSelected && styles.labelSelected],
|
|
116
|
+
children: label
|
|
117
|
+
}), !!description && /*#__PURE__*/_jsx(Text, {
|
|
118
|
+
allowFontScaling: allowFontScaling,
|
|
119
|
+
style: [styles.description, isVertical && styles.descriptionVertical],
|
|
120
|
+
children: description
|
|
121
|
+
})]
|
|
89
122
|
})]
|
|
90
123
|
});
|
|
91
124
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","Text","
|
|
1
|
+
{"version":3,"names":["React","memo","Text","View","createStyles","useAllowFontScaling","useColors","Icon","PressableScale","jsx","_jsx","jsxs","_jsxs","useStyles","theme","card","flex","alignItems","justifyContent","backgroundColor","colors","surface","borderRadius","tokens","radius","md","borderWidth","borderColor","border","shadow","sm","cardHorizontal","flexDirection","padding","spacing","gap","cardVertical","minHeight","cardSelected","primary","primarySoft","elevation","shadowOpacity","cardDisabled","opacity","text","flexShrink","textVertical","label","color","textLight","fontWeight","medium","labelVertical","fontSize","xs","textAlign","labelSelected","primaryText","description","marginTop","descriptionVertical","OptionCard","iconName","isSelected","onPress","disabled","layout","style","testID","styles","allowFontScaling","isVertical","accessibilityRole","accessibilityState","selected","checked","accessibilityLabel","accessibilityHint","children","name","size","displayName"],"sourceRoot":"../../../src","sources":["molecules/OptionCard.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,14 +3,8 @@
|
|
|
3
3
|
import React, { memo } from 'react';
|
|
4
4
|
import { Text, TouchableOpacity, View } from 'react-native';
|
|
5
5
|
import { createStyles } from '../theme/createStyles';
|
|
6
|
-
import { useAllowFontScaling
|
|
6
|
+
import { useAllowFontScaling } from '../theme/UIProvider';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const MODES = ['system', 'light', 'dark'];
|
|
9
|
-
const DEFAULT_LABELS = {
|
|
10
|
-
system: 'Auto',
|
|
11
|
-
light: 'Light',
|
|
12
|
-
dark: 'Dark'
|
|
13
|
-
};
|
|
14
8
|
const useStyles = createStyles(theme => ({
|
|
15
9
|
track: {
|
|
16
10
|
flexDirection: 'row',
|
|
@@ -28,6 +22,9 @@ const useStyles = createStyles(theme => ({
|
|
|
28
22
|
backgroundColor: theme.colors.surface,
|
|
29
23
|
...theme.tokens.shadow.sm
|
|
30
24
|
},
|
|
25
|
+
segmentDisabled: {
|
|
26
|
+
opacity: 0.5
|
|
27
|
+
},
|
|
31
28
|
label: {
|
|
32
29
|
fontSize: theme.tokens.fontSize.sm,
|
|
33
30
|
fontWeight: theme.tokens.fontWeight.medium,
|
|
@@ -40,47 +37,50 @@ const useStyles = createStyles(theme => ({
|
|
|
40
37
|
}));
|
|
41
38
|
|
|
42
39
|
/**
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
* onModeChange en <UIProvider>.
|
|
40
|
+
* SegmentedControl
|
|
41
|
+
* Elige una opción entre pocas, todas visibles. No conoce ningún estado
|
|
42
|
+
* global: recibe `value` y avisa por `onChange`.
|
|
47
43
|
*/
|
|
48
|
-
|
|
44
|
+
function SegmentedControlInner({
|
|
45
|
+
options,
|
|
46
|
+
value,
|
|
47
|
+
onChange,
|
|
48
|
+
disabled = false,
|
|
49
49
|
style,
|
|
50
|
-
|
|
51
|
-
})
|
|
52
|
-
const {
|
|
53
|
-
mode,
|
|
54
|
-
setMode
|
|
55
|
-
} = useThemeMode();
|
|
56
|
-
const colors = useColors();
|
|
50
|
+
testID
|
|
51
|
+
}) {
|
|
57
52
|
const styles = useStyles();
|
|
58
53
|
const allowFontScaling = useAllowFontScaling();
|
|
59
|
-
const labels = {
|
|
60
|
-
...DEFAULT_LABELS,
|
|
61
|
-
...labelOverrides
|
|
62
|
-
};
|
|
63
54
|
return /*#__PURE__*/_jsx(View, {
|
|
64
55
|
style: [styles.track, style],
|
|
65
|
-
accessibilityRole: "
|
|
66
|
-
|
|
67
|
-
|
|
56
|
+
accessibilityRole: "radiogroup",
|
|
57
|
+
testID: testID,
|
|
58
|
+
children: options.map(option => {
|
|
59
|
+
const active = option.value === value;
|
|
60
|
+
const isDisabled = disabled || !!option.disabled;
|
|
68
61
|
return /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
69
|
-
style: [styles.segment, active && styles.segmentActive],
|
|
70
|
-
onPress: () =>
|
|
71
|
-
|
|
62
|
+
style: [styles.segment, active && styles.segmentActive, isDisabled && styles.segmentDisabled],
|
|
63
|
+
onPress: () => onChange(option.value),
|
|
64
|
+
disabled: isDisabled,
|
|
65
|
+
accessibilityRole: "radio",
|
|
72
66
|
accessibilityState: {
|
|
73
|
-
selected: active
|
|
67
|
+
selected: active,
|
|
68
|
+
checked: active,
|
|
69
|
+
disabled: isDisabled
|
|
74
70
|
},
|
|
75
|
-
accessibilityLabel:
|
|
71
|
+
accessibilityLabel: option.label,
|
|
72
|
+
testID: testID && `${testID}-${option.value}`,
|
|
76
73
|
children: /*#__PURE__*/_jsx(Text, {
|
|
77
74
|
allowFontScaling: allowFontScaling,
|
|
78
75
|
style: [styles.label, active && styles.labelActive],
|
|
79
|
-
children:
|
|
76
|
+
children: option.label
|
|
80
77
|
})
|
|
81
|
-
},
|
|
78
|
+
}, option.value);
|
|
82
79
|
})
|
|
83
80
|
});
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// memo() pierde los genéricos al envolver: el cast los devuelve para que
|
|
84
|
+
// `value` y `onChange` sigan atados al union de `options`.
|
|
85
|
+
export const SegmentedControl = /*#__PURE__*/memo(SegmentedControlInner);
|
|
86
|
+
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","memo","Text","TouchableOpacity","View","createStyles","useAllowFontScaling","jsx","_jsx","useStyles","theme","track","flexDirection","backgroundColor","colors","inputBackground","borderRadius","tokens","radius","md","padding","segment","flex","paddingVertical","spacing","sm","alignItems","segmentActive","surface","shadow","segmentDisabled","opacity","label","fontSize","fontWeight","medium","color","textLight","labelActive","primaryText","semibold","SegmentedControlInner","options","value","onChange","disabled","style","testID","styles","allowFontScaling","accessibilityRole","children","map","option","active","isDisabled","onPress","accessibilityState","selected","checked","accessibilityLabel","SegmentedControl"],"sourceRoot":"../../../src","sources":["molecules/SegmentedControl.tsx"],"mappings":"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","ignoreList":[]}
|