@retray-dev/ui-kit 6.1.0 → 7.0.1
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/COMPONENTS.md +447 -13
- package/EXAMPLES.md +248 -0
- package/README.md +11 -10
- package/dist/Accordion.d.mts +28 -0
- package/dist/Accordion.d.ts +28 -0
- package/dist/Accordion.js +340 -0
- package/dist/Accordion.mjs +6 -0
- package/dist/AlertBanner.d.mts +16 -0
- package/dist/AlertBanner.d.ts +16 -0
- package/dist/AlertBanner.js +247 -0
- package/dist/AlertBanner.mjs +5 -0
- package/dist/Avatar.d.mts +20 -0
- package/dist/Avatar.d.ts +20 -0
- package/dist/Avatar.js +234 -0
- package/dist/Avatar.mjs +3 -0
- package/dist/Badge.d.mts +26 -0
- package/dist/Badge.d.ts +26 -0
- package/dist/Badge.js +247 -0
- package/dist/Badge.mjs +4 -0
- package/dist/Button.d.mts +25 -0
- package/dist/Button.d.ts +25 -0
- package/dist/Button.js +414 -0
- package/dist/Button.mjs +8 -0
- package/dist/ButtonGroup.d.mts +26 -0
- package/dist/ButtonGroup.d.ts +26 -0
- package/dist/ButtonGroup.js +52 -0
- package/dist/ButtonGroup.mjs +2 -0
- package/dist/Card.d.mts +39 -0
- package/dist/Card.d.ts +39 -0
- package/dist/Card.js +329 -0
- package/dist/Card.mjs +7 -0
- package/dist/CategoryStrip.d.mts +26 -0
- package/dist/CategoryStrip.d.ts +26 -0
- package/dist/CategoryStrip.js +396 -0
- package/dist/CategoryStrip.mjs +9 -0
- package/dist/Checkbox.d.mts +14 -0
- package/dist/Checkbox.d.ts +14 -0
- package/dist/Checkbox.js +304 -0
- package/dist/Checkbox.mjs +7 -0
- package/dist/Chip.d.mts +31 -0
- package/dist/Chip.d.ts +31 -0
- package/dist/Chip.js +370 -0
- package/dist/Chip.mjs +8 -0
- package/dist/ConfirmDialog.d.mts +15 -0
- package/dist/ConfirmDialog.d.ts +15 -0
- package/dist/ConfirmDialog.js +530 -0
- package/dist/ConfirmDialog.mjs +9 -0
- package/dist/CurrencyDisplay.d.mts +24 -0
- package/dist/CurrencyDisplay.d.ts +24 -0
- package/dist/CurrencyDisplay.js +189 -0
- package/dist/CurrencyDisplay.mjs +3 -0
- package/dist/CurrencyInput.d.mts +26 -0
- package/dist/CurrencyInput.d.ts +26 -0
- package/dist/CurrencyInput.js +404 -0
- package/dist/CurrencyInput.mjs +7 -0
- package/dist/DetailRow.d.mts +32 -0
- package/dist/DetailRow.d.ts +32 -0
- package/dist/DetailRow.js +275 -0
- package/dist/DetailRow.mjs +4 -0
- package/dist/EmptyState.d.mts +27 -0
- package/dist/EmptyState.d.ts +27 -0
- package/dist/EmptyState.js +503 -0
- package/dist/EmptyState.mjs +9 -0
- package/dist/Form.d.mts +52 -0
- package/dist/Form.d.ts +52 -0
- package/dist/Form.js +204 -0
- package/dist/Form.mjs +3 -0
- package/dist/IconButton.d.mts +22 -0
- package/dist/IconButton.d.ts +22 -0
- package/dist/IconButton.js +383 -0
- package/dist/IconButton.mjs +7 -0
- package/dist/Input.d.mts +23 -0
- package/dist/Input.d.ts +23 -0
- package/dist/Input.js +351 -0
- package/dist/Input.mjs +6 -0
- package/dist/LabelValue.d.mts +16 -0
- package/dist/LabelValue.d.ts +16 -0
- package/dist/LabelValue.js +225 -0
- package/dist/LabelValue.mjs +4 -0
- package/dist/ListGroup.d.mts +34 -0
- package/dist/ListGroup.d.ts +34 -0
- package/dist/ListGroup.js +217 -0
- package/dist/ListGroup.mjs +4 -0
- package/dist/ListItem.d.mts +64 -0
- package/dist/ListItem.d.ts +64 -0
- package/dist/ListItem.js +430 -0
- package/dist/ListItem.mjs +8 -0
- package/dist/MediaCard.d.mts +39 -0
- package/dist/MediaCard.d.ts +39 -0
- package/dist/MediaCard.js +427 -0
- package/dist/MediaCard.mjs +8 -0
- package/dist/MenuGroup.d.mts +34 -0
- package/dist/MenuGroup.d.ts +34 -0
- package/dist/MenuGroup.js +217 -0
- package/dist/MenuGroup.mjs +4 -0
- package/dist/MenuItem.d.mts +48 -0
- package/dist/MenuItem.d.ts +48 -0
- package/dist/MenuItem.js +403 -0
- package/dist/MenuItem.mjs +8 -0
- package/dist/MonthPicker.d.mts +20 -0
- package/dist/MonthPicker.d.ts +20 -0
- package/dist/MonthPicker.js +234 -0
- package/dist/MonthPicker.mjs +4 -0
- package/dist/Pressable.d.mts +34 -0
- package/dist/Pressable.d.ts +34 -0
- package/dist/Pressable.js +132 -0
- package/dist/Pressable.mjs +4 -0
- package/dist/Progress.d.mts +14 -0
- package/dist/Progress.d.ts +14 -0
- package/dist/Progress.js +191 -0
- package/dist/Progress.mjs +4 -0
- package/dist/RadioGroup.d.mts +19 -0
- package/dist/RadioGroup.d.ts +19 -0
- package/dist/RadioGroup.js +341 -0
- package/dist/RadioGroup.mjs +7 -0
- package/dist/Select.d.mts +22 -0
- package/dist/Select.d.ts +22 -0
- package/dist/Select.js +441 -0
- package/dist/Select.mjs +6 -0
- package/dist/Separator.d.mts +10 -0
- package/dist/Separator.d.ts +10 -0
- package/dist/Separator.js +156 -0
- package/dist/Separator.mjs +2 -0
- package/dist/Sheet.d.mts +81 -0
- package/dist/Sheet.d.ts +81 -0
- package/dist/Sheet.js +340 -0
- package/dist/Sheet.mjs +4 -0
- package/dist/Skeleton.d.mts +17 -0
- package/dist/Skeleton.d.ts +17 -0
- package/dist/Skeleton.js +205 -0
- package/dist/Skeleton.mjs +4 -0
- package/dist/Slider.d.mts +20 -0
- package/dist/Slider.d.ts +20 -0
- package/dist/Slider.js +232 -0
- package/dist/Slider.mjs +4 -0
- package/dist/Spinner.d.mts +12 -0
- package/dist/Spinner.d.ts +12 -0
- package/dist/Spinner.js +172 -0
- package/dist/Spinner.mjs +3 -0
- package/dist/Switch.d.mts +13 -0
- package/dist/Switch.d.ts +13 -0
- package/dist/Switch.js +261 -0
- package/dist/Switch.mjs +5 -0
- package/dist/Tabs.d.mts +27 -0
- package/dist/Tabs.d.ts +27 -0
- package/dist/Tabs.js +389 -0
- package/dist/Tabs.mjs +6 -0
- package/dist/Text.d.mts +12 -0
- package/dist/Text.d.ts +12 -0
- package/dist/Text.js +311 -0
- package/dist/Text.mjs +4 -0
- package/dist/Textarea.d.mts +16 -0
- package/dist/Textarea.d.ts +16 -0
- package/dist/Textarea.js +333 -0
- package/dist/Textarea.mjs +6 -0
- package/dist/Toast.d.mts +47 -0
- package/dist/Toast.d.ts +47 -0
- package/dist/Toast.js +185 -0
- package/dist/Toast.mjs +3 -0
- package/dist/Toggle.d.mts +33 -0
- package/dist/Toggle.d.ts +33 -0
- package/dist/Toggle.js +397 -0
- package/dist/Toggle.mjs +8 -0
- package/dist/VirtualList.d.mts +19 -0
- package/dist/VirtualList.d.ts +19 -0
- package/dist/VirtualList.js +38 -0
- package/dist/VirtualList.mjs +1 -0
- package/dist/chunk-2CE3TQVY.mjs +11 -0
- package/dist/chunk-2UYENBLV.mjs +49 -0
- package/dist/chunk-3BBOZ3OQ.mjs +41 -0
- package/dist/chunk-5IKW3VNC.mjs +43 -0
- package/dist/chunk-63357L2X.mjs +51 -0
- package/dist/chunk-6LQYY7HC.mjs +127 -0
- package/dist/chunk-6Q64UFIA.mjs +71 -0
- package/dist/chunk-76PFOSM2.mjs +41 -0
- package/dist/chunk-7H2OR44A.mjs +14 -0
- package/dist/chunk-A4MDAP7G.mjs +42 -0
- package/dist/chunk-AU2VDY4P.mjs +190 -0
- package/dist/chunk-BRKYVJVV.mjs +60 -0
- package/dist/chunk-CRYBX2CM.mjs +146 -0
- package/dist/chunk-DITNP6PL.mjs +106 -0
- package/dist/chunk-FTLJOUOQ.mjs +97 -0
- package/dist/chunk-GCWOGZYL.mjs +104 -0
- package/dist/chunk-GNGLDL6Z.mjs +60 -0
- package/dist/chunk-GPOUINK5.mjs +148 -0
- package/dist/chunk-HSPSMN6U.mjs +115 -0
- package/dist/chunk-IRRY3CRZ.mjs +82 -0
- package/dist/chunk-JB67UOB5.mjs +92 -0
- package/dist/chunk-JBLL7U3U.mjs +64 -0
- package/dist/chunk-KWCPOM6W.mjs +136 -0
- package/dist/chunk-KZJRQOIU.mjs +64 -0
- package/dist/chunk-L7E7TVEZ.mjs +145 -0
- package/dist/chunk-LG4DO3DK.mjs +174 -0
- package/dist/chunk-LWG526VX.mjs +139 -0
- package/dist/chunk-MN7OG7IY.mjs +96 -0
- package/dist/chunk-MX6HRKMI.mjs +29 -0
- package/dist/chunk-NC5ZTR2Y.mjs +32 -0
- package/dist/chunk-NQGVLMWG.mjs +90 -0
- package/dist/chunk-QCNARS3X.mjs +46 -0
- package/dist/chunk-QXGYKWI7.mjs +134 -0
- package/dist/chunk-QY3X2UYR.mjs +191 -0
- package/dist/chunk-RKLHUDZS.mjs +92 -0
- package/dist/chunk-RMMK64W5.mjs +54 -0
- package/dist/chunk-RR2VQLKE.mjs +190 -0
- package/dist/chunk-RTC3CFXF.mjs +29 -0
- package/dist/chunk-SBZYEV4S.mjs +61 -0
- package/dist/chunk-SOA2Z4RB.mjs +82 -0
- package/dist/chunk-SOYNZDVY.mjs +151 -0
- package/dist/chunk-T7XZ7H7Y.mjs +57 -0
- package/dist/chunk-TAJ2PQ2O.mjs +163 -0
- package/dist/chunk-U4N7WF4Z.mjs +108 -0
- package/dist/chunk-URDE3EUU.mjs +132 -0
- package/dist/chunk-URLL5JBR.mjs +245 -0
- package/dist/chunk-XDMN67KV.mjs +59 -0
- package/dist/chunk-Y6MXOREN.mjs +120 -0
- package/dist/chunk-YZJAFS4P.mjs +131 -0
- package/dist/index.d.mts +94 -852
- package/dist/index.d.ts +94 -852
- package/dist/index.js +1387 -942
- package/dist/index.mjs +50 -3844
- package/package.json +23 -14
- package/src/assets/fonts/Sohne-Bold.otf +0 -0
- package/src/assets/fonts/Sohne-BoldItalic.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraBold.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraBoldItalic.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraLight.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraLightItalic.otf +0 -0
- package/src/assets/fonts/Sohne-Italic.otf +0 -0
- package/src/assets/fonts/Sohne-Light.otf +0 -0
- package/src/assets/fonts/Sohne-LightItalic.otf +0 -0
- package/src/assets/fonts/Sohne-Medium.otf +0 -0
- package/src/assets/fonts/Sohne-MediumItalic.otf +0 -0
- package/src/assets/fonts/Sohne-Regular.otf +0 -0
- package/src/assets/fonts/Sohne-SemiBold.otf +0 -0
- package/src/assets/fonts/Sohne-SemiBoldItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Bold.otf +0 -0
- package/src/assets/fonts/SohneMono-BoldItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraBold.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraBoldItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraLight.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraLightItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Italic.otf +0 -0
- package/src/assets/fonts/SohneMono-Light.otf +0 -0
- package/src/assets/fonts/SohneMono-LightItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Medium.otf +0 -0
- package/src/assets/fonts/SohneMono-MediumItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Regular.otf +0 -0
- package/src/assets/fonts/SohneMono-SemiBold.otf +0 -0
- package/src/assets/fonts/SohneMono-SemiBoldItalic.otf +0 -0
- package/src/components/Accordion/Accordion.tsx +13 -15
- package/src/components/AlertBanner/AlertBanner.tsx +33 -12
- package/src/components/Avatar/Avatar.tsx +4 -2
- package/src/components/Badge/Badge.tsx +4 -2
- package/src/components/Button/Button.tsx +30 -29
- package/src/components/ButtonGroup/ButtonGroup.tsx +13 -10
- package/src/components/Card/Card.tsx +36 -65
- package/src/components/CategoryStrip/CategoryStrip.tsx +68 -58
- package/src/components/Checkbox/Checkbox.tsx +41 -55
- package/src/components/Chip/Chip.tsx +49 -84
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +2 -2
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +4 -2
- package/src/components/CurrencyInput/CurrencyInput.tsx +2 -2
- package/src/components/DetailRow/DetailRow.tsx +9 -7
- package/src/components/EmptyState/EmptyState.tsx +2 -2
- package/src/components/Form/Form.tsx +149 -0
- package/src/components/Form/index.ts +1 -0
- package/src/components/IconButton/IconButton.tsx +24 -20
- package/src/components/Input/Input.tsx +63 -50
- package/src/components/LabelValue/LabelValue.tsx +6 -4
- package/src/components/ListGroup/ListGroup.tsx +145 -0
- package/src/components/ListGroup/index.ts +1 -0
- package/src/components/ListItem/ListItem.tsx +30 -43
- package/src/components/MediaCard/MediaCard.tsx +31 -29
- package/src/components/MenuGroup/MenuGroup.tsx +145 -0
- package/src/components/MenuGroup/index.ts +1 -0
- package/src/components/MenuItem/MenuItem.tsx +29 -40
- package/src/components/MonthPicker/MonthPicker.tsx +14 -4
- package/src/components/Pressable/Pressable.tsx +27 -46
- package/src/components/Progress/Progress.tsx +21 -12
- package/src/components/RadioGroup/RadioGroup.tsx +55 -32
- package/src/components/Select/Select.tsx +23 -21
- package/src/components/Separator/Separator.tsx +1 -3
- package/src/components/Sheet/Sheet.tsx +85 -18
- package/src/components/Skeleton/Skeleton.tsx +25 -14
- package/src/components/Slider/Slider.tsx +13 -3
- package/src/components/Spinner/Spinner.tsx +1 -1
- package/src/components/Switch/Switch.tsx +70 -52
- package/src/components/Tabs/Tabs.tsx +59 -47
- package/src/components/Text/Text.tsx +3 -1
- package/src/components/Textarea/Textarea.tsx +44 -23
- package/src/components/Toast/Toast.tsx +6 -6
- package/src/components/Toggle/Toggle.tsx +86 -68
- package/src/components/VirtualList/VirtualList.tsx +60 -0
- package/src/components/VirtualList/index.ts +1 -0
- package/src/fonts.ts +38 -20
- package/src/index.ts +5 -1
- package/src/theme/colors.ts +53 -39
- package/src/theme/types.ts +3 -0
- package/src/tokens.ts +49 -39
- package/src/utils/animations.ts +58 -0
- package/src/utils/icons.ts +47 -20
- package/src/utils/useColorTransition.ts +40 -0
- package/src/utils/usePressScale.ts +75 -0
- package/src/assets/fonts/Poppins-Black.ttf +0 -0
- package/src/assets/fonts/Poppins-BlackItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Bold.ttf +0 -0
- package/src/assets/fonts/Poppins-BoldItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraBold.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraBoldItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraLight.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraLightItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Italic.ttf +0 -0
- package/src/assets/fonts/Poppins-Light.ttf +0 -0
- package/src/assets/fonts/Poppins-LightItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Medium.ttf +0 -0
- package/src/assets/fonts/Poppins-MediumItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Regular.ttf +0 -0
- package/src/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/src/assets/fonts/Poppins-SemiBoldItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Thin.ttf +0 -0
- package/src/assets/fonts/Poppins-ThinItalic.ttf +0 -0
package/dist/Skeleton.js
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React2 = require('react');
|
|
4
|
+
var reactNative = require('react-native');
|
|
5
|
+
var Animated = require('react-native-reanimated');
|
|
6
|
+
var expoLinearGradient = require('expo-linear-gradient');
|
|
7
|
+
var reactNativeSizeMatters = require('react-native-size-matters');
|
|
8
|
+
|
|
9
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
|
|
11
|
+
var React2__default = /*#__PURE__*/_interopDefault(React2);
|
|
12
|
+
var Animated__default = /*#__PURE__*/_interopDefault(Animated);
|
|
13
|
+
|
|
14
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
15
|
+
|
|
16
|
+
// src/theme/colorUtils.ts
|
|
17
|
+
function hexToRgb(hex) {
|
|
18
|
+
const clean = hex.replace("#", "");
|
|
19
|
+
const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
|
|
20
|
+
if (full.length !== 6) return null;
|
|
21
|
+
return {
|
|
22
|
+
r: parseInt(full.slice(0, 2), 16),
|
|
23
|
+
g: parseInt(full.slice(2, 4), 16),
|
|
24
|
+
b: parseInt(full.slice(4, 6), 16)
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
function componentToHex(c) {
|
|
28
|
+
return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
|
|
29
|
+
}
|
|
30
|
+
function rgbToHex(r, g, b) {
|
|
31
|
+
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
|
|
32
|
+
}
|
|
33
|
+
function withAlphaOnWhite(hex, alpha) {
|
|
34
|
+
const rgb = hexToRgb(hex);
|
|
35
|
+
if (!rgb) return hex;
|
|
36
|
+
const r = rgb.r * alpha + 255 * (1 - alpha);
|
|
37
|
+
const g = rgb.g * alpha + 255 * (1 - alpha);
|
|
38
|
+
const b = rgb.b * alpha + 255 * (1 - alpha);
|
|
39
|
+
return rgbToHex(r, g, b);
|
|
40
|
+
}
|
|
41
|
+
function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
|
|
42
|
+
const rgb = hexToRgb(hex);
|
|
43
|
+
const bg = hexToRgb(bgHex);
|
|
44
|
+
if (!rgb || !bg) return hex;
|
|
45
|
+
const r = rgb.r * alpha + bg.r * (1 - alpha);
|
|
46
|
+
const g = rgb.g * alpha + bg.g * (1 - alpha);
|
|
47
|
+
const b = rgb.b * alpha + bg.b * (1 - alpha);
|
|
48
|
+
return rgbToHex(r, g, b);
|
|
49
|
+
}
|
|
50
|
+
function mixWithBackground(fgHex, bgHex, opacity) {
|
|
51
|
+
const fg = hexToRgb(fgHex);
|
|
52
|
+
const bg = hexToRgb(bgHex);
|
|
53
|
+
if (!fg || !bg) return fgHex;
|
|
54
|
+
const r = fg.r * opacity + bg.r * (1 - opacity);
|
|
55
|
+
const g = fg.g * opacity + bg.g * (1 - opacity);
|
|
56
|
+
const b = fg.b * opacity + bg.b * (1 - opacity);
|
|
57
|
+
return rgbToHex(r, g, b);
|
|
58
|
+
}
|
|
59
|
+
function lighten(hex, amount) {
|
|
60
|
+
return withAlphaOnWhite(hex, 1 - amount);
|
|
61
|
+
}
|
|
62
|
+
function darken(hex, amount) {
|
|
63
|
+
const rgb = hexToRgb(hex);
|
|
64
|
+
if (!rgb) return hex;
|
|
65
|
+
return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// src/theme/colors.ts
|
|
69
|
+
var defaultLight = {
|
|
70
|
+
background: "#ffffff",
|
|
71
|
+
foreground: "#1a1a1a",
|
|
72
|
+
card: "#ffffff",
|
|
73
|
+
primary: "#1a1a1a",
|
|
74
|
+
primaryForeground: "#ffffff",
|
|
75
|
+
// AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
|
|
76
|
+
accent: "#d4561d",
|
|
77
|
+
accentForeground: "#ffffff",
|
|
78
|
+
border: "#dddddd",
|
|
79
|
+
// AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
|
|
80
|
+
destructive: "#c72828",
|
|
81
|
+
destructiveForeground: "#ffffff",
|
|
82
|
+
success: "#1a7a45",
|
|
83
|
+
successForeground: "#ffffff",
|
|
84
|
+
// AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
|
|
85
|
+
warning: "#9a5200",
|
|
86
|
+
warningForeground: "#ffffff"
|
|
87
|
+
};
|
|
88
|
+
function deriveColors(t, scheme) {
|
|
89
|
+
const dark = scheme === "dark";
|
|
90
|
+
const bg = t.background;
|
|
91
|
+
const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
|
|
92
|
+
const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
|
|
93
|
+
const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
|
|
94
|
+
const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
|
|
95
|
+
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
96
|
+
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
97
|
+
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
98
|
+
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
99
|
+
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
100
|
+
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
101
|
+
return {
|
|
102
|
+
...t,
|
|
103
|
+
foregroundSubtle,
|
|
104
|
+
foregroundMuted,
|
|
105
|
+
surface,
|
|
106
|
+
surfaceStrong,
|
|
107
|
+
destructiveTint,
|
|
108
|
+
destructiveBorder,
|
|
109
|
+
successTint,
|
|
110
|
+
successBorder,
|
|
111
|
+
warningTint,
|
|
112
|
+
warningBorder,
|
|
113
|
+
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
114
|
+
accentResolved: t.accent ?? t.primary,
|
|
115
|
+
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
116
|
+
ring: t.accent ?? t.primary,
|
|
117
|
+
input: t.border,
|
|
118
|
+
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// src/theme/ThemeProvider.tsx
|
|
123
|
+
var ThemeContext = React2.createContext({
|
|
124
|
+
colors: deriveColors(defaultLight, "light"),
|
|
125
|
+
colorScheme: "light"
|
|
126
|
+
});
|
|
127
|
+
function useTheme() {
|
|
128
|
+
const context = React2.useContext(ThemeContext);
|
|
129
|
+
if (!context) {
|
|
130
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
131
|
+
}
|
|
132
|
+
return context;
|
|
133
|
+
}
|
|
134
|
+
var isWeb = reactNative.Platform.OS === "web";
|
|
135
|
+
var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
|
|
136
|
+
var TIMINGS = {
|
|
137
|
+
/** Skeleton shimmer cycle (full pass). */
|
|
138
|
+
shimmer: { duration: 1400 }
|
|
139
|
+
};
|
|
140
|
+
({
|
|
141
|
+
/** Material-style ease-out — natural deceleration for state changes. */
|
|
142
|
+
standard: Animated.Easing.bezier(0.2, 0, 0, 1),
|
|
143
|
+
/** Strong ease-out for expanding surfaces (Accordion open). */
|
|
144
|
+
expand: Animated.Easing.bezier(0.23, 1, 0.32, 1),
|
|
145
|
+
/** Quick ease-in for collapsing. */
|
|
146
|
+
collapse: Animated.Easing.in(Animated.Easing.ease)
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
150
|
+
function Skeleton({
|
|
151
|
+
width = "100%",
|
|
152
|
+
height = 16,
|
|
153
|
+
borderRadius = 6,
|
|
154
|
+
preset = "base",
|
|
155
|
+
diameter = 40,
|
|
156
|
+
style
|
|
157
|
+
}) {
|
|
158
|
+
const { colors, colorScheme } = useTheme();
|
|
159
|
+
const shimmer = Animated.useSharedValue(0);
|
|
160
|
+
const [containerWidth, setContainerWidth] = React2.useState(300);
|
|
161
|
+
const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
|
|
162
|
+
React2.useEffect(() => {
|
|
163
|
+
shimmer.value = Animated.withRepeat(
|
|
164
|
+
Animated.withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Animated.Easing.linear }),
|
|
165
|
+
-1,
|
|
166
|
+
false
|
|
167
|
+
);
|
|
168
|
+
}, [shimmer]);
|
|
169
|
+
const shimmerStyle = Animated.useAnimatedStyle(() => ({
|
|
170
|
+
transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }]
|
|
171
|
+
}));
|
|
172
|
+
const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
|
|
173
|
+
const resolvedHeight = preset === "circle" ? s(diameter) : preset === "text" ? 14 : height;
|
|
174
|
+
const resolvedRadius = preset === "circle" ? 9999 : preset === "text" ? 4 : borderRadius;
|
|
175
|
+
return /* @__PURE__ */ React2__default.default.createElement(
|
|
176
|
+
reactNative.View,
|
|
177
|
+
{
|
|
178
|
+
style: [
|
|
179
|
+
styles.base,
|
|
180
|
+
{ width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
|
|
181
|
+
style
|
|
182
|
+
],
|
|
183
|
+
onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
|
|
184
|
+
accessibilityRole: "progressbar",
|
|
185
|
+
accessibilityLabel: "Loading",
|
|
186
|
+
accessibilityState: { busy: true }
|
|
187
|
+
},
|
|
188
|
+
/* @__PURE__ */ React2__default.default.createElement(Animated__default.default.View, { style: [reactNative.StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React2__default.default.createElement(
|
|
189
|
+
expoLinearGradient.LinearGradient,
|
|
190
|
+
{
|
|
191
|
+
colors: ["transparent", shimmerHighlight, "transparent"],
|
|
192
|
+
start: { x: 0, y: 0 },
|
|
193
|
+
end: { x: 1, y: 0 },
|
|
194
|
+
style: reactNative.StyleSheet.absoluteFill
|
|
195
|
+
}
|
|
196
|
+
))
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
var styles = reactNative.StyleSheet.create({
|
|
200
|
+
base: {
|
|
201
|
+
overflow: "hidden"
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
exports.Skeleton = Skeleton;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface SliderProps {
|
|
5
|
+
value?: number;
|
|
6
|
+
minimumValue?: number;
|
|
7
|
+
maximumValue?: number;
|
|
8
|
+
step?: number;
|
|
9
|
+
onValueChange?: (value: number) => void;
|
|
10
|
+
onSlidingComplete?: (value: number) => void;
|
|
11
|
+
label?: string;
|
|
12
|
+
showValue?: boolean;
|
|
13
|
+
formatValue?: (value: number) => string;
|
|
14
|
+
accessibilityLabel?: string;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
style?: ViewStyle;
|
|
17
|
+
}
|
|
18
|
+
declare function Slider({ value, minimumValue, maximumValue, step, onValueChange, onSlidingComplete, label, showValue, formatValue, accessibilityLabel, disabled, style, }: SliderProps): React.JSX.Element;
|
|
19
|
+
|
|
20
|
+
export { Slider, type SliderProps };
|
package/dist/Slider.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface SliderProps {
|
|
5
|
+
value?: number;
|
|
6
|
+
minimumValue?: number;
|
|
7
|
+
maximumValue?: number;
|
|
8
|
+
step?: number;
|
|
9
|
+
onValueChange?: (value: number) => void;
|
|
10
|
+
onSlidingComplete?: (value: number) => void;
|
|
11
|
+
label?: string;
|
|
12
|
+
showValue?: boolean;
|
|
13
|
+
formatValue?: (value: number) => string;
|
|
14
|
+
accessibilityLabel?: string;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
style?: ViewStyle;
|
|
17
|
+
}
|
|
18
|
+
declare function Slider({ value, minimumValue, maximumValue, step, onValueChange, onSlidingComplete, label, showValue, formatValue, accessibilityLabel, disabled, style, }: SliderProps): React.JSX.Element;
|
|
19
|
+
|
|
20
|
+
export { Slider, type SliderProps };
|
package/dist/Slider.js
ADDED
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React2 = require('react');
|
|
4
|
+
var reactNative = require('react-native');
|
|
5
|
+
var RNSlider = require('@react-native-community/slider');
|
|
6
|
+
var reactNativeSizeMatters = require('react-native-size-matters');
|
|
7
|
+
|
|
8
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
|
|
10
|
+
var React2__default = /*#__PURE__*/_interopDefault(React2);
|
|
11
|
+
var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
|
|
12
|
+
|
|
13
|
+
// src/components/Slider/Slider.tsx
|
|
14
|
+
var _haptics = null;
|
|
15
|
+
async function getHaptics() {
|
|
16
|
+
if (reactNative.Platform.OS === "web") return null;
|
|
17
|
+
if (!_haptics) {
|
|
18
|
+
_haptics = await import('expo-haptics');
|
|
19
|
+
}
|
|
20
|
+
return _haptics;
|
|
21
|
+
}
|
|
22
|
+
function selectionAsync() {
|
|
23
|
+
if (reactNative.Platform.OS === "web") return;
|
|
24
|
+
getHaptics().then((h) => h?.selectionAsync());
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// src/theme/colorUtils.ts
|
|
28
|
+
function hexToRgb(hex) {
|
|
29
|
+
const clean = hex.replace("#", "");
|
|
30
|
+
const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
|
|
31
|
+
if (full.length !== 6) return null;
|
|
32
|
+
return {
|
|
33
|
+
r: parseInt(full.slice(0, 2), 16),
|
|
34
|
+
g: parseInt(full.slice(2, 4), 16),
|
|
35
|
+
b: parseInt(full.slice(4, 6), 16)
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
function componentToHex(c) {
|
|
39
|
+
return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
|
|
40
|
+
}
|
|
41
|
+
function rgbToHex(r, g, b) {
|
|
42
|
+
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
|
|
43
|
+
}
|
|
44
|
+
function withAlphaOnWhite(hex, alpha) {
|
|
45
|
+
const rgb = hexToRgb(hex);
|
|
46
|
+
if (!rgb) return hex;
|
|
47
|
+
const r = rgb.r * alpha + 255 * (1 - alpha);
|
|
48
|
+
const g = rgb.g * alpha + 255 * (1 - alpha);
|
|
49
|
+
const b = rgb.b * alpha + 255 * (1 - alpha);
|
|
50
|
+
return rgbToHex(r, g, b);
|
|
51
|
+
}
|
|
52
|
+
function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
|
|
53
|
+
const rgb = hexToRgb(hex);
|
|
54
|
+
const bg = hexToRgb(bgHex);
|
|
55
|
+
if (!rgb || !bg) return hex;
|
|
56
|
+
const r = rgb.r * alpha + bg.r * (1 - alpha);
|
|
57
|
+
const g = rgb.g * alpha + bg.g * (1 - alpha);
|
|
58
|
+
const b = rgb.b * alpha + bg.b * (1 - alpha);
|
|
59
|
+
return rgbToHex(r, g, b);
|
|
60
|
+
}
|
|
61
|
+
function mixWithBackground(fgHex, bgHex, opacity) {
|
|
62
|
+
const fg = hexToRgb(fgHex);
|
|
63
|
+
const bg = hexToRgb(bgHex);
|
|
64
|
+
if (!fg || !bg) return fgHex;
|
|
65
|
+
const r = fg.r * opacity + bg.r * (1 - opacity);
|
|
66
|
+
const g = fg.g * opacity + bg.g * (1 - opacity);
|
|
67
|
+
const b = fg.b * opacity + bg.b * (1 - opacity);
|
|
68
|
+
return rgbToHex(r, g, b);
|
|
69
|
+
}
|
|
70
|
+
function lighten(hex, amount) {
|
|
71
|
+
return withAlphaOnWhite(hex, 1 - amount);
|
|
72
|
+
}
|
|
73
|
+
function darken(hex, amount) {
|
|
74
|
+
const rgb = hexToRgb(hex);
|
|
75
|
+
if (!rgb) return hex;
|
|
76
|
+
return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// src/theme/colors.ts
|
|
80
|
+
var defaultLight = {
|
|
81
|
+
background: "#ffffff",
|
|
82
|
+
foreground: "#1a1a1a",
|
|
83
|
+
card: "#ffffff",
|
|
84
|
+
primary: "#1a1a1a",
|
|
85
|
+
primaryForeground: "#ffffff",
|
|
86
|
+
// AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
|
|
87
|
+
accent: "#d4561d",
|
|
88
|
+
accentForeground: "#ffffff",
|
|
89
|
+
border: "#dddddd",
|
|
90
|
+
// AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
|
|
91
|
+
destructive: "#c72828",
|
|
92
|
+
destructiveForeground: "#ffffff",
|
|
93
|
+
success: "#1a7a45",
|
|
94
|
+
successForeground: "#ffffff",
|
|
95
|
+
// AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
|
|
96
|
+
warning: "#9a5200",
|
|
97
|
+
warningForeground: "#ffffff"
|
|
98
|
+
};
|
|
99
|
+
function deriveColors(t, scheme) {
|
|
100
|
+
const dark = scheme === "dark";
|
|
101
|
+
const bg = t.background;
|
|
102
|
+
const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
|
|
103
|
+
const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
|
|
104
|
+
const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
|
|
105
|
+
const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
|
|
106
|
+
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
107
|
+
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
108
|
+
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
109
|
+
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
110
|
+
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
111
|
+
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
112
|
+
return {
|
|
113
|
+
...t,
|
|
114
|
+
foregroundSubtle,
|
|
115
|
+
foregroundMuted,
|
|
116
|
+
surface,
|
|
117
|
+
surfaceStrong,
|
|
118
|
+
destructiveTint,
|
|
119
|
+
destructiveBorder,
|
|
120
|
+
successTint,
|
|
121
|
+
successBorder,
|
|
122
|
+
warningTint,
|
|
123
|
+
warningBorder,
|
|
124
|
+
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
125
|
+
accentResolved: t.accent ?? t.primary,
|
|
126
|
+
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
127
|
+
ring: t.accent ?? t.primary,
|
|
128
|
+
input: t.border,
|
|
129
|
+
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// src/theme/ThemeProvider.tsx
|
|
134
|
+
var ThemeContext = React2.createContext({
|
|
135
|
+
colors: deriveColors(defaultLight, "light"),
|
|
136
|
+
colorScheme: "light"
|
|
137
|
+
});
|
|
138
|
+
function useTheme() {
|
|
139
|
+
const context = React2.useContext(ThemeContext);
|
|
140
|
+
if (!context) {
|
|
141
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
142
|
+
}
|
|
143
|
+
return context;
|
|
144
|
+
}
|
|
145
|
+
var isWeb = reactNative.Platform.OS === "web";
|
|
146
|
+
var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
|
|
147
|
+
var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
|
|
148
|
+
|
|
149
|
+
// src/components/Slider/Slider.tsx
|
|
150
|
+
function Slider({
|
|
151
|
+
value = 0,
|
|
152
|
+
minimumValue = 0,
|
|
153
|
+
maximumValue = 1,
|
|
154
|
+
step = 0,
|
|
155
|
+
onValueChange,
|
|
156
|
+
onSlidingComplete,
|
|
157
|
+
label,
|
|
158
|
+
showValue = false,
|
|
159
|
+
formatValue = (v) => v.toFixed(2),
|
|
160
|
+
accessibilityLabel,
|
|
161
|
+
disabled,
|
|
162
|
+
style
|
|
163
|
+
}) {
|
|
164
|
+
const { colors } = useTheme();
|
|
165
|
+
const lastSteppedValue = React2.useRef(value);
|
|
166
|
+
const handleValueChange = (v) => {
|
|
167
|
+
if (step && v !== lastSteppedValue.current) {
|
|
168
|
+
lastSteppedValue.current = v;
|
|
169
|
+
selectionAsync();
|
|
170
|
+
}
|
|
171
|
+
onValueChange?.(v);
|
|
172
|
+
};
|
|
173
|
+
return /* @__PURE__ */ React2__default.default.createElement(
|
|
174
|
+
reactNative.View,
|
|
175
|
+
{
|
|
176
|
+
style: [styles.wrapper, style],
|
|
177
|
+
accessibilityRole: "adjustable",
|
|
178
|
+
accessibilityLabel: accessibilityLabel ?? label,
|
|
179
|
+
accessibilityValue: {
|
|
180
|
+
min: minimumValue,
|
|
181
|
+
max: maximumValue,
|
|
182
|
+
now: value,
|
|
183
|
+
text: formatValue(value)
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
label || showValue ? /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.header }, label ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.valueText, { color: colors.foregroundMuted }], allowFontScaling: true }, formatValue(value)) : null) : null,
|
|
187
|
+
/* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: disabled ? styles.disabled : void 0 }, /* @__PURE__ */ React2__default.default.createElement(
|
|
188
|
+
RNSlider__default.default,
|
|
189
|
+
{
|
|
190
|
+
value,
|
|
191
|
+
minimumValue,
|
|
192
|
+
maximumValue,
|
|
193
|
+
step: step || 0,
|
|
194
|
+
disabled,
|
|
195
|
+
onValueChange: handleValueChange,
|
|
196
|
+
onSlidingComplete,
|
|
197
|
+
minimumTrackTintColor: colors.primary,
|
|
198
|
+
maximumTrackTintColor: colors.surface,
|
|
199
|
+
thumbTintColor: colors.primary,
|
|
200
|
+
style: styles.slider,
|
|
201
|
+
accessibilityLabel
|
|
202
|
+
}
|
|
203
|
+
))
|
|
204
|
+
);
|
|
205
|
+
}
|
|
206
|
+
var styles = reactNative.StyleSheet.create({
|
|
207
|
+
wrapper: {
|
|
208
|
+
gap: vs(8)
|
|
209
|
+
},
|
|
210
|
+
header: {
|
|
211
|
+
flexDirection: "row",
|
|
212
|
+
justifyContent: "space-between",
|
|
213
|
+
alignItems: "center"
|
|
214
|
+
},
|
|
215
|
+
label: {
|
|
216
|
+
fontFamily: "Sohne-Medium",
|
|
217
|
+
fontSize: ms(15)
|
|
218
|
+
},
|
|
219
|
+
valueText: {
|
|
220
|
+
fontFamily: "Sohne-Medium",
|
|
221
|
+
fontSize: ms(14)
|
|
222
|
+
},
|
|
223
|
+
slider: {
|
|
224
|
+
width: "100%",
|
|
225
|
+
height: vs(60)
|
|
226
|
+
},
|
|
227
|
+
disabled: {
|
|
228
|
+
opacity: 0.45
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
|
|
232
|
+
exports.Slider = Slider;
|
package/dist/Slider.mjs
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActivityIndicatorProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
|
|
6
|
+
size?: SpinnerSize;
|
|
7
|
+
color?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
}
|
|
10
|
+
declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { Spinner, type SpinnerProps, type SpinnerSize };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActivityIndicatorProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
|
|
6
|
+
size?: SpinnerSize;
|
|
7
|
+
color?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
}
|
|
10
|
+
declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { Spinner, type SpinnerProps, type SpinnerSize };
|
package/dist/Spinner.js
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React2 = require('react');
|
|
4
|
+
var reactNative = require('react-native');
|
|
5
|
+
var reactNativeSizeMatters = require('react-native-size-matters');
|
|
6
|
+
|
|
7
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
|
+
|
|
9
|
+
var React2__default = /*#__PURE__*/_interopDefault(React2);
|
|
10
|
+
|
|
11
|
+
// src/components/Spinner/Spinner.tsx
|
|
12
|
+
|
|
13
|
+
// src/theme/colorUtils.ts
|
|
14
|
+
function hexToRgb(hex) {
|
|
15
|
+
const clean = hex.replace("#", "");
|
|
16
|
+
const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
|
|
17
|
+
if (full.length !== 6) return null;
|
|
18
|
+
return {
|
|
19
|
+
r: parseInt(full.slice(0, 2), 16),
|
|
20
|
+
g: parseInt(full.slice(2, 4), 16),
|
|
21
|
+
b: parseInt(full.slice(4, 6), 16)
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
function componentToHex(c) {
|
|
25
|
+
return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
|
|
26
|
+
}
|
|
27
|
+
function rgbToHex(r, g, b) {
|
|
28
|
+
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
|
|
29
|
+
}
|
|
30
|
+
function withAlphaOnWhite(hex, alpha) {
|
|
31
|
+
const rgb = hexToRgb(hex);
|
|
32
|
+
if (!rgb) return hex;
|
|
33
|
+
const r = rgb.r * alpha + 255 * (1 - alpha);
|
|
34
|
+
const g = rgb.g * alpha + 255 * (1 - alpha);
|
|
35
|
+
const b = rgb.b * alpha + 255 * (1 - alpha);
|
|
36
|
+
return rgbToHex(r, g, b);
|
|
37
|
+
}
|
|
38
|
+
function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
|
|
39
|
+
const rgb = hexToRgb(hex);
|
|
40
|
+
const bg = hexToRgb(bgHex);
|
|
41
|
+
if (!rgb || !bg) return hex;
|
|
42
|
+
const r = rgb.r * alpha + bg.r * (1 - alpha);
|
|
43
|
+
const g = rgb.g * alpha + bg.g * (1 - alpha);
|
|
44
|
+
const b = rgb.b * alpha + bg.b * (1 - alpha);
|
|
45
|
+
return rgbToHex(r, g, b);
|
|
46
|
+
}
|
|
47
|
+
function mixWithBackground(fgHex, bgHex, opacity) {
|
|
48
|
+
const fg = hexToRgb(fgHex);
|
|
49
|
+
const bg = hexToRgb(bgHex);
|
|
50
|
+
if (!fg || !bg) return fgHex;
|
|
51
|
+
const r = fg.r * opacity + bg.r * (1 - opacity);
|
|
52
|
+
const g = fg.g * opacity + bg.g * (1 - opacity);
|
|
53
|
+
const b = fg.b * opacity + bg.b * (1 - opacity);
|
|
54
|
+
return rgbToHex(r, g, b);
|
|
55
|
+
}
|
|
56
|
+
function lighten(hex, amount) {
|
|
57
|
+
return withAlphaOnWhite(hex, 1 - amount);
|
|
58
|
+
}
|
|
59
|
+
function darken(hex, amount) {
|
|
60
|
+
const rgb = hexToRgb(hex);
|
|
61
|
+
if (!rgb) return hex;
|
|
62
|
+
return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// src/theme/colors.ts
|
|
66
|
+
var defaultLight = {
|
|
67
|
+
background: "#ffffff",
|
|
68
|
+
foreground: "#1a1a1a",
|
|
69
|
+
card: "#ffffff",
|
|
70
|
+
primary: "#1a1a1a",
|
|
71
|
+
primaryForeground: "#ffffff",
|
|
72
|
+
// AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
|
|
73
|
+
accent: "#d4561d",
|
|
74
|
+
accentForeground: "#ffffff",
|
|
75
|
+
border: "#dddddd",
|
|
76
|
+
// AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
|
|
77
|
+
destructive: "#c72828",
|
|
78
|
+
destructiveForeground: "#ffffff",
|
|
79
|
+
success: "#1a7a45",
|
|
80
|
+
successForeground: "#ffffff",
|
|
81
|
+
// AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
|
|
82
|
+
warning: "#9a5200",
|
|
83
|
+
warningForeground: "#ffffff"
|
|
84
|
+
};
|
|
85
|
+
function deriveColors(t, scheme) {
|
|
86
|
+
const dark = scheme === "dark";
|
|
87
|
+
const bg = t.background;
|
|
88
|
+
const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
|
|
89
|
+
const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
|
|
90
|
+
const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
|
|
91
|
+
const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
|
|
92
|
+
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
93
|
+
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
94
|
+
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
95
|
+
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
96
|
+
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
97
|
+
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
98
|
+
return {
|
|
99
|
+
...t,
|
|
100
|
+
foregroundSubtle,
|
|
101
|
+
foregroundMuted,
|
|
102
|
+
surface,
|
|
103
|
+
surfaceStrong,
|
|
104
|
+
destructiveTint,
|
|
105
|
+
destructiveBorder,
|
|
106
|
+
successTint,
|
|
107
|
+
successBorder,
|
|
108
|
+
warningTint,
|
|
109
|
+
warningBorder,
|
|
110
|
+
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
111
|
+
accentResolved: t.accent ?? t.primary,
|
|
112
|
+
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
113
|
+
ring: t.accent ?? t.primary,
|
|
114
|
+
input: t.border,
|
|
115
|
+
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// src/theme/ThemeProvider.tsx
|
|
120
|
+
var ThemeContext = React2.createContext({
|
|
121
|
+
colors: deriveColors(defaultLight, "light"),
|
|
122
|
+
colorScheme: "light"
|
|
123
|
+
});
|
|
124
|
+
function useTheme() {
|
|
125
|
+
const context = React2.useContext(ThemeContext);
|
|
126
|
+
if (!context) {
|
|
127
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
128
|
+
}
|
|
129
|
+
return context;
|
|
130
|
+
}
|
|
131
|
+
var isWeb = reactNative.Platform.OS === "web";
|
|
132
|
+
var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
|
|
133
|
+
var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
|
|
134
|
+
var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
|
|
135
|
+
|
|
136
|
+
// src/components/Spinner/Spinner.tsx
|
|
137
|
+
var sizeMap = {
|
|
138
|
+
sm: "small",
|
|
139
|
+
md: "small",
|
|
140
|
+
lg: "large"
|
|
141
|
+
};
|
|
142
|
+
var labelFontSize = {
|
|
143
|
+
sm: ms(11),
|
|
144
|
+
md: ms(13),
|
|
145
|
+
lg: ms(14)
|
|
146
|
+
};
|
|
147
|
+
function Spinner({ size = "md", color, label, ...props }) {
|
|
148
|
+
const { colors } = useTheme();
|
|
149
|
+
if (label) {
|
|
150
|
+
return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.wrapper }, /* @__PURE__ */ React2__default.default.createElement(reactNative.ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props }), /* @__PURE__ */ React2__default.default.createElement(
|
|
151
|
+
reactNative.Text,
|
|
152
|
+
{
|
|
153
|
+
style: [styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }],
|
|
154
|
+
allowFontScaling: true
|
|
155
|
+
},
|
|
156
|
+
label
|
|
157
|
+
));
|
|
158
|
+
}
|
|
159
|
+
return /* @__PURE__ */ React2__default.default.createElement(reactNative.ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props });
|
|
160
|
+
}
|
|
161
|
+
var styles = reactNative.StyleSheet.create({
|
|
162
|
+
wrapper: {
|
|
163
|
+
alignItems: "center",
|
|
164
|
+
gap: vs(6)
|
|
165
|
+
},
|
|
166
|
+
label: {
|
|
167
|
+
fontFamily: "Sohne-Regular",
|
|
168
|
+
lineHeight: mvs(18)
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
exports.Spinner = Spinner;
|
package/dist/Spinner.mjs
ADDED