@rojaostudio/ds 1.0.1 → 1.0.2
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/components/accordion.js +43 -37
- package/dist/components/alert.js +35 -28
- package/dist/components/avatar.js +41 -34
- package/dist/components/badge.js +21 -14
- package/dist/components/blocker-card.js +11 -2
- package/dist/components/bottom-sheet.js +60 -53
- package/dist/components/breadcrumb.js +32 -22
- package/dist/components/button.js +18 -11
- package/dist/components/card.js +24 -9
- package/dist/components/chat-bubble.js +6 -5
- package/dist/components/checkbox.js +61 -48
- package/dist/components/chip-input.js +98 -81
- package/dist/components/chips.js +36 -29
- package/dist/components/choice-card.js +48 -42
- package/dist/components/choice-carousel.js +79 -74
- package/dist/components/choice-preview-card.js +17 -6
- package/dist/components/color-input.js +41 -35
- package/dist/components/combobox.js +97 -75
- package/dist/components/context-menu.js +17 -13
- package/dist/components/copilot-hint.js +40 -31
- package/dist/components/copy-field.js +8 -5
- package/dist/components/currency-input.js +40 -32
- package/dist/components/danger-zone.js +19 -9
- package/dist/components/data-table-header.js +185 -135
- package/dist/components/date-picker.js +114 -95
- package/dist/components/divider.js +11 -8
- package/dist/components/drawer.js +40 -28
- package/dist/components/dropzone.js +23 -20
- package/dist/components/empty-state.js +26 -23
- package/dist/components/fab.js +38 -26
- package/dist/components/filter-chip.js +20 -16
- package/dist/components/floating-stepper.js +42 -32
- package/dist/components/form-card-header.js +9 -1
- package/dist/components/icon-button.js +19 -13
- package/dist/components/image-crop-modal.js +69 -48
- package/dist/components/image-upload.js +172 -128
- package/dist/components/input.js +90 -62
- package/dist/components/insight-card.js +12 -1
- package/dist/components/label.js +12 -7
- package/dist/components/media-tile.js +11 -8
- package/dist/components/menu.js +28 -25
- package/dist/components/modal.js +43 -28
- package/dist/components/notice.js +34 -16
- package/dist/components/option-tile.js +55 -49
- package/dist/components/page-shell.js +13 -6
- package/dist/components/page-skeleton.js +32 -2
- package/dist/components/page-tabs.js +39 -26
- package/dist/components/pagination.js +38 -33
- package/dist/components/paywall-banner.js +19 -3
- package/dist/components/paywall.js +18 -8
- package/dist/components/phone-frame.js +5 -4
- package/dist/components/phone-input.js +50 -31
- package/dist/components/pix-icon.js +11 -6
- package/dist/components/popover.js +27 -23
- package/dist/components/pricing-card.js +16 -1
- package/dist/components/qr-display.js +16 -11
- package/dist/components/radio.js +73 -56
- package/dist/components/row-actions.js +61 -53
- package/dist/components/saving-bar-context.js +35 -29
- package/dist/components/saving-bar.js +36 -33
- package/dist/components/search.js +49 -44
- package/dist/components/section-card.js +43 -35
- package/dist/components/section-header.js +11 -1
- package/dist/components/select.js +83 -62
- package/dist/components/selectable-card.js +10 -3
- package/dist/components/setting-row.js +11 -1
- package/dist/components/settings-list.js +9 -5
- package/dist/components/skeleton.js +6 -5
- package/dist/components/slider.js +52 -38
- package/dist/components/spinner.js +18 -12
- package/dist/components/step-progress.js +11 -10
- package/dist/components/summary-bar.js +33 -28
- package/dist/components/table.js +20 -15
- package/dist/components/textarea.js +40 -24
- package/dist/components/themed.d.ts +1 -1
- package/dist/components/themed.js +2 -1
- package/dist/components/time-picker.js +117 -97
- package/dist/components/toaster.js +80 -74
- package/dist/components/toggle-card-compact.js +79 -71
- package/dist/components/toggle-card.js +61 -53
- package/dist/components/toggle-group.js +35 -29
- package/dist/components/toggle.js +46 -36
- package/dist/components/tooltip.js +30 -25
- package/dist/components/typing-indicator.js +10 -7
- package/dist/targets/native/components/accordion.js +31 -25
- package/dist/targets/native/components/alert.js +22 -16
- package/dist/targets/native/components/avatar.js +36 -29
- package/dist/targets/native/components/badge.js +4 -3
- package/dist/targets/native/components/button.js +11 -4
- package/dist/targets/native/components/card.js +2 -1
- package/dist/targets/native/components/checkbox.js +18 -15
- package/dist/targets/native/components/chips.js +19 -16
- package/dist/targets/native/components/choice-card.js +29 -23
- package/dist/targets/native/components/context-menu.js +13 -9
- package/dist/targets/native/components/currency-input.js +28 -25
- package/dist/targets/native/components/danger-zone.js +10 -4
- package/dist/targets/native/components/date-picker.js +86 -70
- package/dist/targets/native/components/divider.js +3 -2
- package/dist/targets/native/components/empty-state.js +6 -1
- package/dist/targets/native/components/fab.js +32 -26
- package/dist/targets/native/components/filter-chip.js +9 -8
- package/dist/targets/native/components/form-field.js +20 -10
- package/dist/targets/native/components/form-screen.js +50 -45
- package/dist/targets/native/components/google-icon.js +31 -25
- package/dist/targets/native/components/icon-button.js +6 -4
- package/dist/targets/native/components/icon.js +2 -1
- package/dist/targets/native/components/image-upload.js +59 -50
- package/dist/targets/native/components/input.js +41 -34
- package/dist/targets/native/components/list-item.js +29 -23
- package/dist/targets/native/components/menu.js +12 -10
- package/dist/targets/native/components/modal.js +41 -32
- package/dist/targets/native/components/paywall-banner.js +13 -4
- package/dist/targets/native/components/paywall.js +11 -1
- package/dist/targets/native/components/radio.js +19 -16
- package/dist/targets/native/components/search.js +41 -38
- package/dist/targets/native/components/select.js +71 -63
- package/dist/targets/native/components/sheet.js +36 -30
- package/dist/targets/native/components/skeleton.js +6 -5
- package/dist/targets/native/components/slider.js +51 -43
- package/dist/targets/native/components/spinner.js +2 -1
- package/dist/targets/native/components/stepper.js +14 -9
- package/dist/targets/native/components/switch.js +15 -14
- package/dist/targets/native/components/text.js +2 -1
- package/dist/targets/native/components/textarea.js +2 -1
- package/dist/targets/native/components/theme.js +2 -1
- package/dist/targets/native/components/toaster.js +24 -21
- package/dist/targets/native/index.d.ts +1 -1
- package/dist/targets/native/index.js +1 -3
- package/package.json +3 -6
- package/styles/base.css +3 -3
- package/brand/rojao-black-on-white.png +0 -0
- package/brand/rojao-black.png +0 -0
- package/brand/rojao-white-on-black.png +0 -0
- package/brand/rojao-white.png +0 -0
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "../../../chunk-ORMEWXMH.js";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { Check, ChevronDown } from "lucide-react-native";
|
|
3
4
|
import { useState } from "react";
|
|
4
5
|
import { Pressable, ScrollView } from "react-native";
|
|
@@ -16,70 +17,77 @@ function Select({
|
|
|
16
17
|
const t = useTheme();
|
|
17
18
|
const [open, setOpen] = useState(false);
|
|
18
19
|
const selected = (_a = options.find((o) => o.value === value)) != null ? _a : null;
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
/* @__PURE__ */ React.createElement(Text, { variant: "body", color: selected ? "primary" : "muted" }, selected ? selected.label : placeholder),
|
|
44
|
-
/* @__PURE__ */ React.createElement(ChevronDown, { size: 20, color: t["--text-muted"] })
|
|
45
|
-
), /* @__PURE__ */ React.createElement(Sheet, { visible: open, onClose: () => setOpen(false) }, /* @__PURE__ */ React.createElement(
|
|
46
|
-
ScrollView,
|
|
47
|
-
{
|
|
48
|
-
contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 8, gap: 4 },
|
|
49
|
-
keyboardShouldPersistTaps: "handled"
|
|
50
|
-
},
|
|
51
|
-
options.map((o) => {
|
|
52
|
-
var _a2;
|
|
53
|
-
const sel = o.value === value;
|
|
54
|
-
const optDisabled = (_a2 = o.disabled) != null ? _a2 : false;
|
|
55
|
-
return /* @__PURE__ */ React.createElement(
|
|
56
|
-
Pressable,
|
|
57
|
-
{
|
|
58
|
-
key: o.value,
|
|
59
|
-
onPress: () => {
|
|
60
|
-
if (optDisabled) return;
|
|
61
|
-
onChange(o.value);
|
|
62
|
-
setOpen(false);
|
|
63
|
-
},
|
|
64
|
-
disabled: optDisabled,
|
|
65
|
-
accessibilityRole: "menuitem",
|
|
66
|
-
accessibilityState: { selected: sel, disabled: optDisabled },
|
|
67
|
-
style: {
|
|
68
|
-
minHeight: 48,
|
|
69
|
-
flexDirection: "row",
|
|
70
|
-
alignItems: "center",
|
|
71
|
-
justifyContent: "space-between",
|
|
72
|
-
paddingHorizontal: 12,
|
|
73
|
-
borderRadius: 10,
|
|
74
|
-
backgroundColor: sel ? t["--surface-raised"] : "transparent",
|
|
75
|
-
opacity: optDisabled ? 0.5 : 1
|
|
76
|
-
}
|
|
20
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
21
|
+
/* @__PURE__ */ jsxs(
|
|
22
|
+
Pressable,
|
|
23
|
+
{
|
|
24
|
+
onPress: () => {
|
|
25
|
+
if (disabled) return;
|
|
26
|
+
setOpen(true);
|
|
27
|
+
},
|
|
28
|
+
disabled,
|
|
29
|
+
accessibilityRole: "button",
|
|
30
|
+
accessibilityState: { expanded: open, disabled },
|
|
31
|
+
accessibilityLabel: selected ? selected.label : placeholder,
|
|
32
|
+
style: {
|
|
33
|
+
height: 48,
|
|
34
|
+
borderRadius: 12,
|
|
35
|
+
borderWidth: 1,
|
|
36
|
+
borderColor: t["--border-default"],
|
|
37
|
+
backgroundColor: t["--surface-default"],
|
|
38
|
+
paddingHorizontal: 16,
|
|
39
|
+
flexDirection: "row",
|
|
40
|
+
alignItems: "center",
|
|
41
|
+
justifyContent: "space-between",
|
|
42
|
+
opacity: disabled ? 0.5 : 1
|
|
77
43
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ jsx(Text, { variant: "body", color: selected ? "primary" : "muted", children: selected ? selected.label : placeholder }),
|
|
46
|
+
/* @__PURE__ */ jsx(ChevronDown, { size: 20, color: t["--text-muted"] })
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
/* @__PURE__ */ jsx(Sheet, { visible: open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsx(
|
|
51
|
+
ScrollView,
|
|
52
|
+
{
|
|
53
|
+
contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 8, gap: 4 },
|
|
54
|
+
keyboardShouldPersistTaps: "handled",
|
|
55
|
+
children: options.map((o) => {
|
|
56
|
+
var _a2;
|
|
57
|
+
const sel = o.value === value;
|
|
58
|
+
const optDisabled = (_a2 = o.disabled) != null ? _a2 : false;
|
|
59
|
+
return /* @__PURE__ */ jsxs(
|
|
60
|
+
Pressable,
|
|
61
|
+
{
|
|
62
|
+
onPress: () => {
|
|
63
|
+
if (optDisabled) return;
|
|
64
|
+
onChange(o.value);
|
|
65
|
+
setOpen(false);
|
|
66
|
+
},
|
|
67
|
+
disabled: optDisabled,
|
|
68
|
+
accessibilityRole: "menuitem",
|
|
69
|
+
accessibilityState: { selected: sel, disabled: optDisabled },
|
|
70
|
+
style: {
|
|
71
|
+
minHeight: 48,
|
|
72
|
+
flexDirection: "row",
|
|
73
|
+
alignItems: "center",
|
|
74
|
+
justifyContent: "space-between",
|
|
75
|
+
paddingHorizontal: 12,
|
|
76
|
+
borderRadius: 10,
|
|
77
|
+
backgroundColor: sel ? t["--surface-raised"] : "transparent",
|
|
78
|
+
opacity: optDisabled ? 0.5 : 1
|
|
79
|
+
},
|
|
80
|
+
children: [
|
|
81
|
+
/* @__PURE__ */ jsx(Text, { variant: "body", children: o.label }),
|
|
82
|
+
sel ? /* @__PURE__ */ jsx(Check, { size: 18, color: t["--brand-primary"] }) : null
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
o.value
|
|
86
|
+
);
|
|
87
|
+
})
|
|
88
|
+
}
|
|
89
|
+
) })
|
|
90
|
+
] });
|
|
83
91
|
}
|
|
84
92
|
export {
|
|
85
93
|
Select
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "../../../chunk-ORMEWXMH.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { useEffect, useRef } from "react";
|
|
3
4
|
import { Animated, Modal, Pressable, View } from "react-native";
|
|
4
5
|
import { useTheme } from "./theme.js";
|
|
@@ -12,39 +13,44 @@ function Sheet({ visible, onClose, children }) {
|
|
|
12
13
|
translateY.setValue(800);
|
|
13
14
|
}
|
|
14
15
|
}, [visible, translateY]);
|
|
15
|
-
return /* @__PURE__ */
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
), /* @__PURE__ */ React.createElement(
|
|
24
|
-
Animated.View,
|
|
25
|
-
{
|
|
26
|
-
accessibilityViewIsModal: true,
|
|
27
|
-
style: {
|
|
28
|
-
position: "absolute",
|
|
29
|
-
left: 0,
|
|
30
|
-
right: 0,
|
|
31
|
-
bottom: 0,
|
|
32
|
-
maxHeight: "88%",
|
|
33
|
-
transform: [{ translateY }],
|
|
34
|
-
backgroundColor: t["--surface-default"],
|
|
35
|
-
borderTopLeftRadius: 20,
|
|
36
|
-
borderTopRightRadius: 20,
|
|
37
|
-
paddingBottom: 28
|
|
16
|
+
return /* @__PURE__ */ jsxs(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: [
|
|
17
|
+
/* @__PURE__ */ jsx(
|
|
18
|
+
Pressable,
|
|
19
|
+
{
|
|
20
|
+
style: { flex: 1, backgroundColor: "rgba(0, 0, 0, 0.45)" },
|
|
21
|
+
onPress: onClose,
|
|
22
|
+
accessibilityRole: "button",
|
|
23
|
+
accessibilityLabel: "Fechar"
|
|
38
24
|
}
|
|
39
|
-
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
-
View,
|
|
25
|
+
),
|
|
26
|
+
/* @__PURE__ */ jsxs(
|
|
27
|
+
Animated.View,
|
|
42
28
|
{
|
|
43
|
-
|
|
29
|
+
accessibilityViewIsModal: true,
|
|
30
|
+
style: {
|
|
31
|
+
position: "absolute",
|
|
32
|
+
left: 0,
|
|
33
|
+
right: 0,
|
|
34
|
+
bottom: 0,
|
|
35
|
+
maxHeight: "88%",
|
|
36
|
+
transform: [{ translateY }],
|
|
37
|
+
backgroundColor: t["--surface-default"],
|
|
38
|
+
borderTopLeftRadius: 20,
|
|
39
|
+
borderTopRightRadius: 20,
|
|
40
|
+
paddingBottom: 28
|
|
41
|
+
},
|
|
42
|
+
children: [
|
|
43
|
+
/* @__PURE__ */ jsx(View, { style: { alignItems: "center", paddingVertical: 10 }, children: /* @__PURE__ */ jsx(
|
|
44
|
+
View,
|
|
45
|
+
{
|
|
46
|
+
style: { width: 40, height: 4, borderRadius: 2, backgroundColor: t["--border-strong"] }
|
|
47
|
+
}
|
|
48
|
+
) }),
|
|
49
|
+
children
|
|
50
|
+
]
|
|
44
51
|
}
|
|
45
|
-
)
|
|
46
|
-
|
|
47
|
-
));
|
|
52
|
+
)
|
|
53
|
+
] });
|
|
48
54
|
}
|
|
49
55
|
export {
|
|
50
56
|
Sheet
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "../../../chunk-ORMEWXMH.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import { useEffect, useRef } from "react";
|
|
3
4
|
import { Animated, StyleSheet, View } from "react-native";
|
|
4
5
|
import { useTheme } from "./theme.js";
|
|
@@ -16,7 +17,7 @@ function Skeleton({ width = "100%", height = 16, radius = 8, circle = false }) {
|
|
|
16
17
|
return () => loop.stop();
|
|
17
18
|
}, [pulse]);
|
|
18
19
|
const size = circle ? typeof height === "number" ? height : 40 : void 0;
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
20
21
|
Animated.View,
|
|
21
22
|
{
|
|
22
23
|
accessibilityElementsHidden: true,
|
|
@@ -32,14 +33,14 @@ function Skeleton({ width = "100%", height = 16, radius = 8, circle = false }) {
|
|
|
32
33
|
);
|
|
33
34
|
}
|
|
34
35
|
function SkeletonText({ lines = 3, gap = 8, lineHeight = 12 }) {
|
|
35
|
-
return /* @__PURE__ */
|
|
36
|
+
return /* @__PURE__ */ jsx(View, { style: [styles.stack, { gap }], children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
|
|
36
37
|
Skeleton,
|
|
37
38
|
{
|
|
38
|
-
key: i,
|
|
39
39
|
height: lineHeight,
|
|
40
40
|
width: i === lines - 1 ? "70%" : "100%"
|
|
41
|
-
}
|
|
42
|
-
|
|
41
|
+
},
|
|
42
|
+
i
|
|
43
|
+
)) });
|
|
43
44
|
}
|
|
44
45
|
const styles = StyleSheet.create({
|
|
45
46
|
stack: {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
|
+
__spreadProps,
|
|
2
3
|
__spreadValues
|
|
3
4
|
} from "../../../chunk-ORMEWXMH.js";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
6
|
import { useRef, useState } from "react";
|
|
5
7
|
import {
|
|
6
8
|
PanResponder,
|
|
@@ -68,52 +70,58 @@ function Slider({
|
|
|
68
70
|
else if (name === "decrement") onChange(snap(value - step, min, max, step));
|
|
69
71
|
}
|
|
70
72
|
const thumbLeft = Math.max(0, pct * trackWidth - THUMB_SIZE / 2);
|
|
71
|
-
return /* @__PURE__ */
|
|
72
|
-
|
|
73
|
-
__spreadValues({
|
|
74
|
-
accessible: true,
|
|
75
|
-
accessibilityRole: "adjustable",
|
|
76
|
-
accessibilityLabel,
|
|
77
|
-
accessibilityState: { disabled },
|
|
78
|
-
accessibilityValue: { min, max, now: value },
|
|
79
|
-
accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
|
|
80
|
-
onAccessibilityAction,
|
|
81
|
-
onLayout,
|
|
82
|
-
hitSlop: { top: 12, bottom: 12, left: 4, right: 4 },
|
|
83
|
-
style: [styles.trackArea, { opacity: disabled ? 0.5 : 1 }]
|
|
84
|
-
}, responder.panHandlers),
|
|
85
|
-
/* @__PURE__ */ React.createElement(
|
|
73
|
+
return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
|
|
74
|
+
/* @__PURE__ */ jsxs(
|
|
86
75
|
View,
|
|
87
|
-
{
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
76
|
+
__spreadProps(__spreadValues({
|
|
77
|
+
accessible: true,
|
|
78
|
+
accessibilityRole: "adjustable",
|
|
79
|
+
accessibilityLabel,
|
|
80
|
+
accessibilityState: { disabled },
|
|
81
|
+
accessibilityValue: { min, max, now: value },
|
|
82
|
+
accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
|
|
83
|
+
onAccessibilityAction,
|
|
84
|
+
onLayout,
|
|
85
|
+
hitSlop: { top: 12, bottom: 12, left: 4, right: 4 },
|
|
86
|
+
style: [styles.trackArea, { opacity: disabled ? 0.5 : 1 }]
|
|
87
|
+
}, responder.panHandlers), {
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(
|
|
90
|
+
View,
|
|
91
|
+
{
|
|
92
|
+
pointerEvents: "none",
|
|
93
|
+
style: [styles.track, { backgroundColor: t["--border-strong"] }]
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
/* @__PURE__ */ jsx(
|
|
97
|
+
View,
|
|
98
|
+
{
|
|
99
|
+
pointerEvents: "none",
|
|
100
|
+
style: [
|
|
101
|
+
styles.fill,
|
|
102
|
+
{ width: pct * trackWidth, backgroundColor: t["--brand-primary"] }
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
/* @__PURE__ */ jsx(
|
|
107
|
+
View,
|
|
108
|
+
{
|
|
109
|
+
pointerEvents: "none",
|
|
110
|
+
style: [
|
|
111
|
+
styles.thumb,
|
|
112
|
+
{
|
|
113
|
+
left: thumbLeft,
|
|
114
|
+
backgroundColor: t["--brand-primary"],
|
|
115
|
+
borderColor: t["--surface-default"]
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
)
|
|
99
120
|
]
|
|
100
|
-
}
|
|
121
|
+
})
|
|
101
122
|
),
|
|
102
|
-
/* @__PURE__ */
|
|
103
|
-
|
|
104
|
-
{
|
|
105
|
-
pointerEvents: "none",
|
|
106
|
-
style: [
|
|
107
|
-
styles.thumb,
|
|
108
|
-
{
|
|
109
|
-
left: thumbLeft,
|
|
110
|
-
backgroundColor: t["--brand-primary"],
|
|
111
|
-
borderColor: t["--surface-default"]
|
|
112
|
-
}
|
|
113
|
-
]
|
|
114
|
-
}
|
|
115
|
-
)
|
|
116
|
-
), showValue && /* @__PURE__ */ React.createElement(Text, { variant: "label", style: [styles.value, { color: t["--text-primary"] }] }, fmt(value)));
|
|
123
|
+
showValue && /* @__PURE__ */ jsx(Text, { variant: "label", style: [styles.value, { color: t["--text-primary"] }], children: fmt(value) })
|
|
124
|
+
] });
|
|
117
125
|
}
|
|
118
126
|
const styles = StyleSheet.create({
|
|
119
127
|
row: {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import "../../../chunk-ORMEWXMH.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import { ActivityIndicator, View } from "react-native";
|
|
3
4
|
import { useTheme } from "./theme.js";
|
|
4
5
|
function Spinner({ size = "large" }) {
|
|
5
6
|
const t = useTheme();
|
|
6
|
-
return /* @__PURE__ */
|
|
7
|
+
return /* @__PURE__ */ jsx(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(ActivityIndicator, { size, color: t["--brand-primary"] }) });
|
|
7
8
|
}
|
|
8
9
|
export {
|
|
9
10
|
Spinner
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "../../../chunk-ORMEWXMH.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { Pressable, View } from "react-native";
|
|
3
4
|
import { Text } from "./text.js";
|
|
4
5
|
import { useTheme } from "./theme.js";
|
|
@@ -18,15 +19,19 @@ function Stepper({
|
|
|
18
19
|
alignItems: "center",
|
|
19
20
|
justifyContent: "center"
|
|
20
21
|
};
|
|
21
|
-
return /* @__PURE__ */
|
|
22
|
-
Pressable,
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
|
|
23
|
+
/* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(Math.max(min, value - 1)), hitSlop: 8, style: btn, children: /* @__PURE__ */ jsx(Text, { variant: "label", children: "\u2212" }) }),
|
|
24
|
+
/* @__PURE__ */ jsx(Text, { variant: "label", style: { minWidth: 24, textAlign: "center" }, children: value }),
|
|
25
|
+
/* @__PURE__ */ jsx(
|
|
26
|
+
Pressable,
|
|
27
|
+
{
|
|
28
|
+
onPress: () => onChange(max != null ? Math.min(max, value + 1) : value + 1),
|
|
29
|
+
hitSlop: 8,
|
|
30
|
+
style: btn,
|
|
31
|
+
children: /* @__PURE__ */ jsx(Text, { variant: "label", children: "+" })
|
|
32
|
+
}
|
|
33
|
+
)
|
|
34
|
+
] });
|
|
30
35
|
}
|
|
31
36
|
export {
|
|
32
37
|
Stepper
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "../../../chunk-ORMEWXMH.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import { Pressable, Switch as RNSwitch, View } from "react-native";
|
|
3
4
|
import { Text } from "./text.js";
|
|
4
5
|
import { useTheme } from "./theme.js";
|
|
@@ -9,7 +10,7 @@ function Switch({
|
|
|
9
10
|
accessibilityLabel
|
|
10
11
|
}) {
|
|
11
12
|
const t = useTheme();
|
|
12
|
-
return /* @__PURE__ */
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
13
14
|
RNSwitch,
|
|
14
15
|
{
|
|
15
16
|
value,
|
|
@@ -28,12 +29,11 @@ function SegmentedControl({
|
|
|
28
29
|
disabled
|
|
29
30
|
}) {
|
|
30
31
|
const t = useTheme();
|
|
31
|
-
return /* @__PURE__ */
|
|
32
|
+
return /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: 6, opacity: disabled ? 0.5 : 1 }, children: segments.map((s) => {
|
|
32
33
|
const sel = s.value === value;
|
|
33
|
-
return /* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ jsx(
|
|
34
35
|
Pressable,
|
|
35
36
|
{
|
|
36
|
-
key: s.value,
|
|
37
37
|
onPress: () => onChange(s.value),
|
|
38
38
|
disabled,
|
|
39
39
|
hitSlop: 8,
|
|
@@ -49,18 +49,19 @@ function SegmentedControl({
|
|
|
49
49
|
justifyContent: "center",
|
|
50
50
|
borderColor: sel ? t["--brand-primary"] : t["--border-default"],
|
|
51
51
|
backgroundColor: sel ? t["--brand-primary"] : t["--surface-default"]
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
/* @__PURE__ */ React.createElement(
|
|
55
|
-
Text,
|
|
56
|
-
{
|
|
57
|
-
variant: "label",
|
|
58
|
-
style: { color: sel ? t["--brand-on-primary"] : t["--text-primary"] }
|
|
59
52
|
},
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
children: /* @__PURE__ */ jsx(
|
|
54
|
+
Text,
|
|
55
|
+
{
|
|
56
|
+
variant: "label",
|
|
57
|
+
style: { color: sel ? t["--brand-on-primary"] : t["--text-primary"] },
|
|
58
|
+
children: s.label
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
},
|
|
62
|
+
s.value
|
|
62
63
|
);
|
|
63
|
-
}));
|
|
64
|
+
}) });
|
|
64
65
|
}
|
|
65
66
|
export {
|
|
66
67
|
SegmentedControl,
|
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
__objRest,
|
|
3
3
|
__spreadValues
|
|
4
4
|
} from "../../../chunk-ORMEWXMH.js";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
import { Text as RNText } from "react-native";
|
|
6
7
|
import { fonts } from "../fonts.js";
|
|
7
8
|
import { useTheme } from "./theme.js";
|
|
@@ -24,7 +25,7 @@ const COLOR_TOKEN = {
|
|
|
24
25
|
function Text(_a) {
|
|
25
26
|
var _b = _a, { variant = "body", color = "primary", style } = _b, rest = __objRest(_b, ["variant", "color", "style"]);
|
|
26
27
|
const t = useTheme();
|
|
27
|
-
return /* @__PURE__ */
|
|
28
|
+
return /* @__PURE__ */ jsx(RNText, __spreadValues({ style: [VARIANT[variant], { color: t[COLOR_TOKEN[color]] }, style] }, rest));
|
|
28
29
|
}
|
|
29
30
|
export {
|
|
30
31
|
Text
|
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
__objRest,
|
|
3
3
|
__spreadValues
|
|
4
4
|
} from "../../../chunk-ORMEWXMH.js";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
import { useState } from "react";
|
|
6
7
|
import {
|
|
7
8
|
StyleSheet,
|
|
@@ -56,7 +57,7 @@ function TextArea(_a) {
|
|
|
56
57
|
}
|
|
57
58
|
const maxHeight = maxRows * LINE_HEIGHT + VERTICAL_PADDING;
|
|
58
59
|
const autoGrowStyle = autoGrow ? { height: Math.min(contentHeight != null ? contentHeight : 0, maxHeight) || void 0, maxHeight } : null;
|
|
59
|
-
return /* @__PURE__ */
|
|
60
|
+
return /* @__PURE__ */ jsx(
|
|
60
61
|
TextInput,
|
|
61
62
|
__spreadValues({
|
|
62
63
|
multiline: true,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "../../../chunk-ORMEWXMH.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import { createContext, useContext } from "react";
|
|
3
4
|
import { useColorScheme } from "react-native";
|
|
4
5
|
import { dsTheme } from "../theme.js";
|
|
@@ -9,7 +10,7 @@ function DSThemeProvider({ children, scheme, theme }) {
|
|
|
9
10
|
const isDark = ((_a = scheme != null ? scheme : system) != null ? _a : "light") === "dark";
|
|
10
11
|
const mapa = theme != null ? theme : dsTheme;
|
|
11
12
|
const resolved = isDark ? mapa.dark : mapa.light;
|
|
12
|
-
return /* @__PURE__ */
|
|
13
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: resolved, children });
|
|
13
14
|
}
|
|
14
15
|
function useTheme() {
|
|
15
16
|
return useContext(ThemeContext);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
__spreadValues
|
|
3
3
|
} from "../../../chunk-ORMEWXMH.js";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
5
|
import { useEffect, useRef, useState } from "react";
|
|
5
6
|
import { CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react-native";
|
|
6
7
|
import { Animated, Platform, StyleSheet, View } from "react-native";
|
|
@@ -94,30 +95,32 @@ function Toaster({ position = "bottom" } = {}) {
|
|
|
94
95
|
const Icon = spec.icon;
|
|
95
96
|
const isError = current.variant === "error";
|
|
96
97
|
const edgePadding = isTop ? { paddingTop: (insets.top > 0 ? insets.top : 0) + 12 } : { paddingBottom: (insets.bottom > 0 ? insets.bottom : 0) + 12 };
|
|
97
|
-
return /* @__PURE__ */
|
|
98
|
+
return /* @__PURE__ */ jsx(
|
|
98
99
|
View,
|
|
99
100
|
{
|
|
100
101
|
pointerEvents: "box-none",
|
|
101
|
-
style: [styles.overlay, isTop ? styles.overlayTop : styles.overlayBottom, edgePadding]
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
102
|
+
style: [styles.overlay, isTop ? styles.overlayTop : styles.overlayBottom, edgePadding],
|
|
103
|
+
children: /* @__PURE__ */ jsxs(
|
|
104
|
+
Animated.View,
|
|
105
|
+
{
|
|
106
|
+
accessibilityLiveRegion: isError ? "assertive" : "polite",
|
|
107
|
+
accessibilityRole: isError ? "alert" : "summary",
|
|
108
|
+
style: [
|
|
109
|
+
styles.toast,
|
|
110
|
+
{
|
|
111
|
+
backgroundColor: bg,
|
|
112
|
+
borderColor: border,
|
|
113
|
+
opacity,
|
|
114
|
+
transform: [{ translateY }]
|
|
115
|
+
}
|
|
116
|
+
],
|
|
117
|
+
children: [
|
|
118
|
+
/* @__PURE__ */ jsx(Icon, { size: 18, color: fg, style: styles.icon }),
|
|
119
|
+
/* @__PURE__ */ jsx(Text, { variant: "label", style: [styles.message, { color: fg }], numberOfLines: 3, children: current.message })
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
)
|
|
123
|
+
}
|
|
121
124
|
);
|
|
122
125
|
}
|
|
123
126
|
const styles = StyleSheet.create({
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import "../../chunk-ORMEWXMH.js";
|
|
2
2
|
import { primitives } from "@rojaostudio/ds-core/tokens";
|
|
3
3
|
import { dsTheme } from "./theme.js";
|
|
4
|
-
import { dsTheme as dsTheme2 } from "./theme.js";
|
|
5
4
|
import { fonts } from "./fonts.js";
|
|
6
5
|
export {
|
|
7
6
|
dsTheme,
|
|
8
7
|
fonts,
|
|
9
|
-
primitives
|
|
10
|
-
dsTheme2 as taiqTheme
|
|
8
|
+
primitives
|
|
11
9
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rojaostudio/ds",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -101,8 +101,7 @@
|
|
|
101
101
|
"LICENSE",
|
|
102
102
|
"README.md",
|
|
103
103
|
"dist",
|
|
104
|
-
"styles"
|
|
105
|
-
"brand"
|
|
104
|
+
"styles"
|
|
106
105
|
],
|
|
107
106
|
"peerDependencies": {
|
|
108
107
|
"expo-image": ">=1.10",
|
|
@@ -157,7 +156,6 @@
|
|
|
157
156
|
"provenance": true
|
|
158
157
|
},
|
|
159
158
|
"devDependencies": {
|
|
160
|
-
"@supabase/supabase-js": "^2.108.1",
|
|
161
159
|
"@types/node": "^20.19.43",
|
|
162
160
|
"@types/react": "^19",
|
|
163
161
|
"@types/react-dom": "^19",
|
|
@@ -186,8 +184,7 @@
|
|
|
186
184
|
"detect": "tsx scripts/detect.ts",
|
|
187
185
|
"validate:themes": "tsx scripts/validate-themes.ts",
|
|
188
186
|
"build:themes": "tsx scripts/build-themes.ts",
|
|
189
|
-
"seed:ds": "tsx scripts/seed-ds.ts",
|
|
190
187
|
"lint": "eslint .",
|
|
191
|
-
"build:brands": "tsx scripts/build-brands.ts
|
|
188
|
+
"build:brands": "tsx scripts/build-brands.ts"
|
|
192
189
|
}
|
|
193
190
|
}
|