@retray-dev/ui-kit 12.1.0 → 13.0.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/COMPONENTS.md +183 -147
- package/CONSUMER.md +2 -2
- package/DESIGN.md +2 -2
- package/README.md +13 -8
- package/dist/Accordion.d.mts +6 -0
- package/dist/Accordion.d.ts +6 -0
- package/dist/Accordion.js +62 -208
- package/dist/Accordion.mjs +6 -5
- package/dist/AlertBanner.js +29 -151
- package/dist/AlertBanner.mjs +3 -3
- package/dist/AppHeader.js +37 -233
- package/dist/AppHeader.mjs +6 -7
- package/dist/Avatar.d.mts +17 -1
- package/dist/Avatar.d.ts +17 -1
- package/dist/Avatar.js +80 -113
- package/dist/Avatar.mjs +2 -2
- package/dist/Badge.js +24 -147
- package/dist/Badge.mjs +3 -3
- package/dist/Button.js +86 -274
- package/dist/Button.mjs +6 -6
- package/dist/Card.js +15 -198
- package/dist/Card.mjs +4 -5
- package/dist/CategoryStrip.d.mts +0 -5
- package/dist/CategoryStrip.d.ts +0 -5
- package/dist/CategoryStrip.js +47 -263
- package/dist/CategoryStrip.mjs +6 -6
- package/dist/Checkbox.js +15 -198
- package/dist/Checkbox.mjs +5 -5
- package/dist/Chip.js +44 -234
- package/dist/Chip.mjs +7 -6
- package/dist/ConfirmDialog.js +100 -296
- package/dist/ConfirmDialog.mjs +7 -7
- package/dist/CurrencyDisplay.js +1 -112
- package/dist/CurrencyDisplay.mjs +2 -2
- package/dist/CurrencyInput.js +35 -160
- package/dist/CurrencyInput.mjs +5 -5
- package/dist/DetailRow.js +25 -148
- package/dist/DetailRow.mjs +3 -3
- package/dist/EmptyState.js +87 -275
- package/dist/EmptyState.mjs +7 -7
- package/dist/ErrorBoundary.js +32 -197
- package/dist/ErrorBoundary.mjs +4 -4
- package/dist/Form.js +1 -112
- package/dist/Form.mjs +2 -2
- package/dist/HolographicCard.d.mts +0 -28
- package/dist/HolographicCard.d.ts +0 -28
- package/dist/HolographicCard.js +20 -130
- package/dist/HolographicCard.mjs +9 -32
- package/dist/IconButton.js +36 -232
- package/dist/IconButton.mjs +5 -6
- package/dist/IconPicker.js +222 -927
- package/dist/IconPicker.mjs +5 -5
- package/dist/ImageUpload.d.mts +5 -1
- package/dist/ImageUpload.d.ts +5 -1
- package/dist/ImageUpload.js +32 -215
- package/dist/ImageUpload.mjs +5 -6
- package/dist/ImageViewer.js +75 -264
- package/dist/ImageViewer.mjs +8 -8
- package/dist/Input.d.mts +1 -1
- package/dist/Input.d.ts +1 -1
- package/dist/Input.js +35 -160
- package/dist/Input.mjs +4 -4
- package/dist/LabelValue.js +24 -147
- package/dist/LabelValue.mjs +3 -3
- package/dist/ListGroup.js +1 -112
- package/dist/ListGroup.mjs +2 -2
- package/dist/ListItem.js +38 -233
- package/dist/ListItem.mjs +5 -6
- package/dist/MediaCard.d.mts +0 -14
- package/dist/MediaCard.d.ts +0 -14
- package/dist/MediaCard.js +69 -313
- package/dist/MediaCard.mjs +5 -6
- package/dist/MenuGroup.js +1 -112
- package/dist/MenuGroup.mjs +2 -2
- package/dist/MenuItem.js +36 -232
- package/dist/MenuItem.mjs +5 -6
- package/dist/MonthPicker.js +8 -161
- package/dist/MonthPicker.mjs +3 -3
- package/dist/NumberStepper.js +40 -236
- package/dist/NumberStepper.mjs +5 -6
- package/dist/PagerDots.d.mts +1 -1
- package/dist/PagerDots.d.ts +1 -1
- package/dist/PagerDots.js +69 -222
- package/dist/PagerDots.mjs +6 -5
- package/dist/Pressable.js +14 -85
- package/dist/Pressable.mjs +4 -4
- package/dist/PricingCard.js +94 -279
- package/dist/PricingCard.mjs +8 -8
- package/dist/Progress.js +3 -121
- package/dist/Progress.mjs +3 -3
- package/dist/RadioGroup.js +52 -263
- package/dist/RadioGroup.mjs +5 -5
- package/dist/RetrayProvider.d.mts +1 -1
- package/dist/RetrayProvider.d.ts +1 -1
- package/dist/RetrayProvider.js +5 -6
- package/dist/RetrayProvider.mjs +3 -3
- package/dist/Select.d.mts +2 -1
- package/dist/Select.d.ts +2 -1
- package/dist/Select.js +24 -230
- package/dist/Select.mjs +4 -5
- package/dist/SelectableCard.d.mts +27 -0
- package/dist/SelectableCard.d.ts +27 -0
- package/dist/SelectableCard.js +335 -0
- package/dist/SelectableCard.mjs +8 -0
- package/dist/SelectableGrid.d.mts +0 -21
- package/dist/SelectableGrid.d.ts +0 -21
- package/dist/SelectableGrid.js +49 -269
- package/dist/SelectableGrid.mjs +5 -6
- package/dist/Separator.js +1 -112
- package/dist/Separator.mjs +2 -2
- package/dist/Sheet.js +16 -163
- package/dist/Sheet.mjs +3 -3
- package/dist/SheetSelect.js +39 -234
- package/dist/SheetSelect.mjs +6 -6
- package/dist/Skeleton.d.mts +3 -1
- package/dist/Skeleton.d.ts +3 -1
- package/dist/Skeleton.js +7 -124
- package/dist/Skeleton.mjs +3 -3
- package/dist/Slider.js +6 -159
- package/dist/Slider.mjs +3 -3
- package/dist/Spinner.js +3 -114
- package/dist/Spinner.mjs +2 -2
- package/dist/Stats.d.mts +4 -1
- package/dist/Stats.d.ts +4 -1
- package/dist/Stats.js +60 -234
- package/dist/Stats.mjs +5 -6
- package/dist/Switch.js +24 -173
- package/dist/Switch.mjs +5 -4
- package/dist/TabBar.js +43 -198
- package/dist/TabBar.mjs +5 -4
- package/dist/Tabs.js +15 -197
- package/dist/Tabs.mjs +5 -5
- package/dist/Text.js +9 -128
- package/dist/Text.mjs +2 -2
- package/dist/Textarea.d.mts +2 -1
- package/dist/Textarea.d.ts +2 -1
- package/dist/Textarea.js +71 -217
- package/dist/Textarea.mjs +4 -4
- package/dist/Toast.js +1 -112
- package/dist/Toast.mjs +2 -2
- package/dist/Toggle.js +39 -234
- package/dist/Toggle.mjs +6 -6
- package/dist/{chunk-FFTYLPSB.mjs → chunk-2QOHHBJC.mjs} +13 -7
- package/dist/{chunk-BCWEHE34.mjs → chunk-2VIDP72N.mjs} +3 -3
- package/dist/{chunk-PGERH3P7.mjs → chunk-4NQFTHN3.mjs} +13 -7
- package/dist/{chunk-3N2M3WZL.mjs → chunk-4ZO5PTKF.mjs} +4 -4
- package/dist/{chunk-MYZ2EDYU.mjs → chunk-5MYNAAFE.mjs} +13 -17
- package/dist/{chunk-E7NEHHXV.mjs → chunk-62BBSSUF.mjs} +3 -3
- package/dist/{chunk-ISY26JQJ.mjs → chunk-6CR4S6W2.mjs} +3 -3
- package/dist/{chunk-FUVYSVGR.mjs → chunk-6QLBHUEG.mjs} +8 -7
- package/dist/chunk-ARONDO7M.mjs +40 -0
- package/dist/{chunk-3UYAZ7I4.mjs → chunk-AZV7KNJI.mjs} +3 -3
- package/dist/{chunk-HLMPMUK2.mjs → chunk-BTUW5LSG.mjs} +11 -8
- package/dist/chunk-BULKGOIZ.mjs +235 -0
- package/dist/{chunk-265G6A46.mjs → chunk-CBIZLRYH.mjs} +29 -12
- package/dist/chunk-CM2DG4MR.mjs +142 -0
- package/dist/{chunk-2I2AYECM.mjs → chunk-DBHSUUKU.mjs} +2 -2
- package/dist/{chunk-P64WHW4A.mjs → chunk-DE25XTVQ.mjs} +3 -3
- package/dist/{chunk-DI7CBDL6.mjs → chunk-E4EQSCKR.mjs} +5 -5
- package/dist/{chunk-357YO24D.mjs → chunk-EHGBHFMH.mjs} +9 -17
- package/dist/{chunk-GK4VRMNE.mjs → chunk-EROPDCB5.mjs} +24 -27
- package/dist/{chunk-XBAGGKLW.mjs → chunk-ERWJPVX7.mjs} +2 -2
- package/dist/{chunk-LRM4AVYY.mjs → chunk-ESQDPO5E.mjs} +7 -7
- package/dist/{chunk-EFLFRAHD.mjs → chunk-EW2FIDSM.mjs} +1 -1
- package/dist/{chunk-7HSILTC4.mjs → chunk-FTTI6T5Q.mjs} +4 -4
- package/dist/{chunk-X26S5EVZ.mjs → chunk-HUSSF6TF.mjs} +1 -1
- package/dist/chunk-IFYMBOEN.mjs +14 -0
- package/dist/{chunk-S3KJCPEJ.mjs → chunk-IGU223UM.mjs} +80 -4
- package/dist/chunk-IJCMPVW5.mjs +121 -0
- package/dist/{chunk-I4V5XZPS.mjs → chunk-ITG4JQM3.mjs} +4 -4
- package/dist/{chunk-F4V6XLP4.mjs → chunk-K3QX2M26.mjs} +11 -8
- package/dist/{chunk-V6NFJXKO.mjs → chunk-K7TKID3V.mjs} +8 -7
- package/dist/{chunk-ZHMSAYLT.mjs → chunk-KAGADD2O.mjs} +4 -4
- package/dist/{chunk-3GEYJ7I5.mjs → chunk-KC5QDYGZ.mjs} +4 -4
- package/dist/{chunk-HJ46DTJE.mjs → chunk-KPTY7UYQ.mjs} +1 -1
- package/dist/{chunk-EMUWGDWC.mjs → chunk-KSSVIFYR.mjs} +11 -12
- package/dist/chunk-L3YKPTJQ.mjs +119 -0
- package/dist/chunk-M53LC4Q7.mjs +35 -0
- package/dist/{chunk-NXI4YDZ2.mjs → chunk-MP7GLMIR.mjs} +17 -25
- package/dist/chunk-MZ6WRTD2.mjs +40 -0
- package/dist/chunk-NGEN2EES.mjs +581 -0
- package/dist/{chunk-JULSIZDM.mjs → chunk-OBV72JD4.mjs} +1 -1
- package/dist/{chunk-2A2LEFZG.mjs → chunk-PGQ6FMXS.mjs} +6 -5
- package/dist/{chunk-BQZE3HAW.mjs → chunk-PI6RULJX.mjs} +1 -1
- package/dist/{chunk-FA2KMTH5.mjs → chunk-RA6SAAFE.mjs} +9 -8
- package/dist/{chunk-FVTVCJAH.mjs → chunk-RRKM4MKB.mjs} +7 -7
- package/dist/{chunk-AKM4EPOT.mjs → chunk-S2VGME7X.mjs} +1 -1
- package/dist/{chunk-OULVKTWL.mjs → chunk-S44XWTTC.mjs} +35 -25
- package/dist/{chunk-QSFV2P7O.mjs → chunk-SZEKQAOY.mjs} +1 -1
- package/dist/{chunk-N4ZPVCJH.mjs → chunk-TETMEKZE.mjs} +9 -9
- package/dist/{chunk-2CBQKU7H.mjs → chunk-TMH263OK.mjs} +5 -4
- package/dist/{chunk-D3Y2T42P.mjs → chunk-U6DEBYU5.mjs} +10 -9
- package/dist/{chunk-4WFMPFZB.mjs → chunk-UOKFSFNJ.mjs} +2 -2
- package/dist/{chunk-WOEWGSTU.mjs → chunk-URIH43IJ.mjs} +13 -21
- package/dist/{chunk-JCZQOY4O.mjs → chunk-V2ZB2XNS.mjs} +16 -10
- package/dist/{chunk-P73V2EKS.mjs → chunk-WIPEDNSD.mjs} +7 -7
- package/dist/{chunk-BOVUP27T.mjs → chunk-XCIG6HT2.mjs} +6 -5
- package/dist/chunk-Y6YS33GM.mjs +131 -0
- package/dist/{chunk-5OLNXP3S.mjs → chunk-ZKDKKQCE.mjs} +29 -7
- package/dist/{chunk-DF6DU42P.mjs → chunk-ZTPYUU5C.mjs} +5 -5
- package/dist/{index-wt-orHUi.d.ts → index-CY34hxPN.d.mts} +1 -0
- package/dist/{index-wt-orHUi.d.mts → index-CY34hxPN.d.ts} +1 -0
- package/dist/index.d.mts +15 -74
- package/dist/index.d.ts +15 -74
- package/dist/index.js +1055 -1562
- package/dist/index.mjs +81 -84
- package/package.json +8 -10
- package/src/components/Accordion/Accordion.tsx +32 -9
- package/src/components/AlertBanner/AlertBanner.tsx +7 -6
- package/src/components/AppHeader/AppHeader.tsx +1 -1
- package/src/components/Avatar/Avatar.tsx +92 -1
- package/src/components/Avatar/index.ts +2 -2
- package/src/components/Badge/Badge.tsx +2 -2
- package/src/components/Button/Button.tsx +64 -57
- package/src/components/Card/Card.tsx +1 -0
- package/src/components/CategoryStrip/CategoryStrip.tsx +36 -49
- package/src/components/Chip/Chip.tsx +5 -4
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +13 -6
- package/src/components/DetailRow/DetailRow.tsx +3 -3
- package/src/components/EmptyState/EmptyState.tsx +2 -2
- package/src/components/ErrorBoundary/ErrorBoundary.tsx +6 -6
- package/src/components/HolographicCard/HolographicCard.tsx +14 -95
- package/src/components/IconButton/IconButton.tsx +2 -2
- package/src/components/IconPicker/IconPicker.tsx +13 -12
- package/src/components/ImageUpload/ImageUpload.tsx +24 -28
- package/src/components/ImageViewer/ImageViewer.tsx +3 -3
- package/src/components/Input/Input.tsx +11 -5
- package/src/components/LabelValue/LabelValue.tsx +2 -2
- package/src/components/ListItem/ListItem.tsx +4 -4
- package/src/components/MediaCard/MediaCard.tsx +21 -59
- package/src/components/MenuItem/MenuItem.tsx +2 -2
- package/src/components/MonthPicker/MonthPicker.tsx +2 -2
- package/src/components/NumberStepper/NumberStepper.tsx +6 -6
- package/src/components/PagerDots/PagerDots.tsx +38 -28
- package/src/components/PricingCard/PricingCard.tsx +6 -6
- package/src/components/RadioGroup/RadioGroup.tsx +18 -31
- package/src/components/Select/Select.tsx +32 -39
- package/src/components/SelectableCard/SelectableCard.tsx +302 -0
- package/src/components/SelectableCard/index.ts +1 -0
- package/src/components/SelectableGrid/SelectableGrid.tsx +38 -72
- package/src/components/Sheet/Sheet.tsx +11 -4
- package/src/components/SheetSelect/SheetSelect.tsx +3 -3
- package/src/components/Skeleton/Skeleton.tsx +6 -3
- package/src/components/Spinner/Spinner.tsx +2 -2
- package/src/components/Stats/Stats.tsx +36 -8
- package/src/components/Switch/Switch.tsx +9 -6
- package/src/components/TabBar/TabBar.tsx +9 -8
- package/src/components/Text/Text.tsx +12 -1
- package/src/components/Textarea/Textarea.tsx +18 -32
- package/src/components/Toggle/Toggle.tsx +3 -3
- package/src/hooks/useConfirmDialog.ts +31 -42
- package/src/index.ts +4 -4
- package/src/theme/ThemeProvider.tsx +1 -4
- package/src/theme/colorUtils.ts +1 -72
- package/src/theme/colors.ts +47 -1
- package/src/theme/types.ts +6 -3
- package/src/utils/animations.ts +0 -47
- package/src/utils/curatedIcons.ts +93 -801
- package/src/utils/haptics.ts +13 -208
- package/src/utils/icons.ts +27 -91
- package/src/utils/pressable.ts +10 -61
- package/dist/VirtualList.d.mts +0 -19
- package/dist/VirtualList.d.ts +0 -19
- package/dist/VirtualList.js +0 -38
- package/dist/VirtualList.mjs +0 -2
- package/dist/chunk-3DKJ2GIC.mjs +0 -30
- package/dist/chunk-AQEVCEXV.mjs +0 -164
- package/dist/chunk-DOGIPOF5.mjs +0 -131
- package/dist/chunk-DVK4G2GT.mjs +0 -59
- package/dist/chunk-EJ7ZPXOH.mjs +0 -163
- package/dist/chunk-J6Q2YJEV.mjs +0 -134
- package/dist/chunk-JNVAIDLK.mjs +0 -136
- package/dist/chunk-KA7LTET3.mjs +0 -71
- package/dist/chunk-KHYX4IOM.mjs +0 -1114
- package/dist/chunk-NC5ZTR2Y.mjs +0 -32
- package/dist/chunk-YNROWHQJ.mjs +0 -46
- package/src/components/VirtualList/VirtualList.tsx +0 -60
- package/src/components/VirtualList/index.ts +0 -1
- package/src/utils/fontGuard.ts +0 -35
- package/src/utils/hover.ts +0 -25
- package/src/utils/useColorTransition.ts +0 -40
- package/src/utils/usePressScale.ts +0 -75
package/dist/Text.js
CHANGED
|
@@ -10,118 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
10
10
|
var React2__default = /*#__PURE__*/_interopDefault(React2);
|
|
11
11
|
|
|
12
12
|
// src/components/Text/Text.tsx
|
|
13
|
-
|
|
14
|
-
// src/theme/colorUtils.ts
|
|
15
|
-
function hexToRgb(hex) {
|
|
16
|
-
const clean = hex.replace("#", "");
|
|
17
|
-
const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
|
|
18
|
-
if (full.length !== 6) return null;
|
|
19
|
-
return {
|
|
20
|
-
r: parseInt(full.slice(0, 2), 16),
|
|
21
|
-
g: parseInt(full.slice(2, 4), 16),
|
|
22
|
-
b: parseInt(full.slice(4, 6), 16)
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
function componentToHex(c) {
|
|
26
|
-
return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
|
|
27
|
-
}
|
|
28
|
-
function rgbToHex(r, g, b) {
|
|
29
|
-
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
|
|
30
|
-
}
|
|
31
|
-
function withAlphaOnWhite(hex, alpha) {
|
|
32
|
-
const rgb = hexToRgb(hex);
|
|
33
|
-
if (!rgb) return hex;
|
|
34
|
-
const r = rgb.r * alpha + 255 * (1 - alpha);
|
|
35
|
-
const g = rgb.g * alpha + 255 * (1 - alpha);
|
|
36
|
-
const b = rgb.b * alpha + 255 * (1 - alpha);
|
|
37
|
-
return rgbToHex(r, g, b);
|
|
38
|
-
}
|
|
39
|
-
function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
|
|
40
|
-
const rgb = hexToRgb(hex);
|
|
41
|
-
const bg = hexToRgb(bgHex);
|
|
42
|
-
if (!rgb || !bg) return hex;
|
|
43
|
-
const r = rgb.r * alpha + bg.r * (1 - alpha);
|
|
44
|
-
const g = rgb.g * alpha + bg.g * (1 - alpha);
|
|
45
|
-
const b = rgb.b * alpha + bg.b * (1 - alpha);
|
|
46
|
-
return rgbToHex(r, g, b);
|
|
47
|
-
}
|
|
48
|
-
function mixWithBackground(fgHex, bgHex, opacity) {
|
|
49
|
-
const fg = hexToRgb(fgHex);
|
|
50
|
-
const bg = hexToRgb(bgHex);
|
|
51
|
-
if (!fg || !bg) return fgHex;
|
|
52
|
-
const r = fg.r * opacity + bg.r * (1 - opacity);
|
|
53
|
-
const g = fg.g * opacity + bg.g * (1 - opacity);
|
|
54
|
-
const b = fg.b * opacity + bg.b * (1 - opacity);
|
|
55
|
-
return rgbToHex(r, g, b);
|
|
56
|
-
}
|
|
57
|
-
function lighten(hex, amount) {
|
|
58
|
-
return withAlphaOnWhite(hex, 1 - amount);
|
|
59
|
-
}
|
|
60
|
-
function darken(hex, amount) {
|
|
61
|
-
const rgb = hexToRgb(hex);
|
|
62
|
-
if (!rgb) return hex;
|
|
63
|
-
return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// src/theme/colors.ts
|
|
67
|
-
var defaultLight = {
|
|
68
|
-
background: "#ffffff",
|
|
69
|
-
foreground: "#1a1a1a",
|
|
70
|
-
card: "#ffffff",
|
|
71
|
-
primary: "#1a1a1a",
|
|
72
|
-
primaryForeground: "#ffffff",
|
|
73
|
-
// AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
|
|
74
|
-
accent: "#d4561d",
|
|
75
|
-
accentForeground: "#ffffff",
|
|
76
|
-
border: "#dddddd",
|
|
77
|
-
// AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
|
|
78
|
-
destructive: "#c72828",
|
|
79
|
-
destructiveForeground: "#ffffff",
|
|
80
|
-
success: "#1a7a45",
|
|
81
|
-
successForeground: "#ffffff",
|
|
82
|
-
// AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
|
|
83
|
-
warning: "#9a5200",
|
|
84
|
-
warningForeground: "#ffffff"
|
|
85
|
-
};
|
|
86
|
-
function deriveColors(t, scheme) {
|
|
87
|
-
const dark = scheme === "dark";
|
|
88
|
-
const bg = t.background;
|
|
89
|
-
const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
|
|
90
|
-
const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
|
|
91
|
-
const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
|
|
92
|
-
const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
|
|
93
|
-
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
94
|
-
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
95
|
-
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
96
|
-
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
97
|
-
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
98
|
-
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
99
|
-
return {
|
|
100
|
-
...t,
|
|
101
|
-
foregroundSubtle,
|
|
102
|
-
foregroundMuted,
|
|
103
|
-
surface,
|
|
104
|
-
surfaceStrong,
|
|
105
|
-
destructiveTint,
|
|
106
|
-
destructiveBorder,
|
|
107
|
-
successTint,
|
|
108
|
-
successBorder,
|
|
109
|
-
warningTint,
|
|
110
|
-
warningBorder,
|
|
111
|
-
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
112
|
-
accentResolved: t.accent ?? t.primary,
|
|
113
|
-
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
114
|
-
ring: t.accent ?? t.primary,
|
|
115
|
-
input: t.border,
|
|
116
|
-
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
// src/theme/ThemeProvider.tsx
|
|
121
|
-
var ThemeContext = React2.createContext({
|
|
122
|
-
colors: deriveColors(defaultLight, "light"),
|
|
123
|
-
colorScheme: "light"
|
|
124
|
-
});
|
|
13
|
+
var ThemeContext = React2.createContext(void 0);
|
|
125
14
|
function useTheme() {
|
|
126
15
|
const context = React2.useContext(ThemeContext);
|
|
127
16
|
if (!context) {
|
|
@@ -254,22 +143,6 @@ var TYPOGRAPHY = {
|
|
|
254
143
|
var isWeb = reactNative.Platform.OS === "web";
|
|
255
144
|
var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
|
|
256
145
|
var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
|
|
257
|
-
var warned = false;
|
|
258
|
-
function warnIfFontsMissing() {
|
|
259
|
-
if (warned) return;
|
|
260
|
-
if (typeof __DEV__ !== "undefined" && !__DEV__) return;
|
|
261
|
-
warned = true;
|
|
262
|
-
try {
|
|
263
|
-
if (!expoFont.isLoaded("Sohne-Regular")) {
|
|
264
|
-
console.warn(
|
|
265
|
-
"[retray-ui-kit] Sohne fonts are not loaded \u2014 text will fall back to the system font. Load them at your app root before rendering any UI kit component:\n\n import { useFonts } from 'expo-font'\n import { SohneFontNames } from '@retray-dev/ui-kit/fonts'\n // Copy the SohneFonts boilerplate from CONSUMER.md into your App.tsx\n\n const [fontsLoaded] = useFonts(SohneFonts)\n if (!fontsLoaded) return null\n"
|
|
266
|
-
);
|
|
267
|
-
}
|
|
268
|
-
} catch {
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
// src/components/Text/Text.tsx
|
|
273
146
|
var variantStyles = {
|
|
274
147
|
"display-hero": { ...TYPOGRAPHY["display-hero"], fontSize: ms(TYPOGRAPHY["display-hero"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-hero"].lineHeight) },
|
|
275
148
|
"display-xl": { ...TYPOGRAPHY["display-xl"], fontSize: ms(TYPOGRAPHY["display-xl"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-xl"].lineHeight) },
|
|
@@ -307,6 +180,14 @@ var defaultColorVariant = {
|
|
|
307
180
|
"button-lg": "foreground",
|
|
308
181
|
"button-sm": "foreground"
|
|
309
182
|
};
|
|
183
|
+
var fontWarned = false;
|
|
184
|
+
function warnIfFontsMissing() {
|
|
185
|
+
if (fontWarned || typeof __DEV__ === "undefined" || !__DEV__) return;
|
|
186
|
+
fontWarned = true;
|
|
187
|
+
if (!expoFont.isLoaded("Sohne-Regular")) {
|
|
188
|
+
console.warn("[retray-ui-kit] Sohne fonts not loaded \u2014 text falls back to system font.");
|
|
189
|
+
}
|
|
190
|
+
}
|
|
310
191
|
function TextBase({ variant = "body-md", color, style, uppercase, children, ...props }) {
|
|
311
192
|
warnIfFontsMissing();
|
|
312
193
|
const { colors } = useTheme();
|
package/dist/Text.mjs
CHANGED
package/dist/Textarea.d.mts
CHANGED
|
@@ -5,12 +5,13 @@ interface TextareaProps extends TextInputProps {
|
|
|
5
5
|
label?: string;
|
|
6
6
|
error?: string;
|
|
7
7
|
hint?: string;
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
rows?: number;
|
|
9
10
|
prefixIcon?: string;
|
|
10
11
|
prefixIconNode?: React.ReactNode;
|
|
11
12
|
prefixIconColor?: string;
|
|
12
13
|
containerStyle?: ViewStyle;
|
|
13
14
|
}
|
|
14
|
-
declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
|
|
15
|
+
declare function Textarea({ label, error, hint, disabled, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
|
|
15
16
|
|
|
16
17
|
export { Textarea, type TextareaProps };
|
package/dist/Textarea.d.ts
CHANGED
|
@@ -5,12 +5,13 @@ interface TextareaProps extends TextInputProps {
|
|
|
5
5
|
label?: string;
|
|
6
6
|
error?: string;
|
|
7
7
|
hint?: string;
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
rows?: number;
|
|
9
10
|
prefixIcon?: string;
|
|
10
11
|
prefixIconNode?: React.ReactNode;
|
|
11
12
|
prefixIconColor?: string;
|
|
12
13
|
containerStyle?: ViewStyle;
|
|
13
14
|
}
|
|
14
|
-
declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
|
|
15
|
+
declare function Textarea({ label, error, hint, disabled, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
|
|
15
16
|
|
|
16
17
|
export { Textarea, type TextareaProps };
|
package/dist/Textarea.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React3 = require('react');
|
|
4
4
|
var reactNative = require('react-native');
|
|
5
|
-
var
|
|
5
|
+
var reactNativeEase = require('react-native-ease');
|
|
6
6
|
var reactNativeSizeMatters = require('react-native-size-matters');
|
|
7
7
|
var AntDesign = require('@expo/vector-icons/AntDesign');
|
|
8
8
|
var Entypo = require('@expo/vector-icons/Entypo');
|
|
@@ -14,7 +14,6 @@ var Ionicons = require('@expo/vector-icons/Ionicons');
|
|
|
14
14
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
|
|
16
16
|
var React3__default = /*#__PURE__*/_interopDefault(React3);
|
|
17
|
-
var Animated__default = /*#__PURE__*/_interopDefault(Animated);
|
|
18
17
|
var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
|
|
19
18
|
var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
|
|
20
19
|
var Feather__default = /*#__PURE__*/_interopDefault(Feather);
|
|
@@ -23,118 +22,7 @@ var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
|
|
|
23
22
|
var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
|
|
24
23
|
|
|
25
24
|
// src/components/Textarea/Textarea.tsx
|
|
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 = React3.createContext({
|
|
135
|
-
colors: deriveColors(defaultLight, "light"),
|
|
136
|
-
colorScheme: "light"
|
|
137
|
-
});
|
|
25
|
+
var ThemeContext = React3.createContext(void 0);
|
|
138
26
|
function useTheme() {
|
|
139
27
|
const context = React3.useContext(ThemeContext);
|
|
140
28
|
if (!context) {
|
|
@@ -146,78 +34,52 @@ var isWeb = reactNative.Platform.OS === "web";
|
|
|
146
34
|
var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
|
|
147
35
|
var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
|
|
148
36
|
var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
|
|
149
|
-
var glyphMapOf = (mod) => mod.glyphMap ?? {};
|
|
150
37
|
var ALL_FAMILIES = [
|
|
151
|
-
{ name: "
|
|
152
|
-
{ name: "
|
|
153
|
-
{ name: "
|
|
154
|
-
{ name: "
|
|
155
|
-
{ name: "
|
|
156
|
-
{ name: "
|
|
38
|
+
{ name: "Feather", component: Feather__default.default },
|
|
39
|
+
{ name: "AntDesign", component: AntDesign__default.default },
|
|
40
|
+
{ name: "Entypo", component: Entypo__default.default },
|
|
41
|
+
{ name: "FontAwesome5", component: FontAwesome5__default.default },
|
|
42
|
+
{ name: "MaterialIcons", component: MaterialIcons__default.default },
|
|
43
|
+
{ name: "Ionicons", component: Ionicons__default.default }
|
|
157
44
|
];
|
|
158
|
-
var
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
for (const
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
45
|
+
var glyphCacheInitialized = false;
|
|
46
|
+
function ensureGlyphCache() {
|
|
47
|
+
if (glyphCacheInitialized) return;
|
|
48
|
+
glyphCacheInitialized = true;
|
|
49
|
+
for (const entry of ALL_FAMILIES) {
|
|
50
|
+
try {
|
|
51
|
+
entry.glyphMap = entry.component.glyphMap;
|
|
52
|
+
} catch {
|
|
53
|
+
entry.glyphMap = {};
|
|
166
54
|
}
|
|
167
55
|
}
|
|
168
|
-
return cache;
|
|
169
|
-
}
|
|
170
|
-
function resolveFamily(name) {
|
|
171
|
-
if (!resolvedCache) {
|
|
172
|
-
resolvedCache = buildCache();
|
|
173
|
-
}
|
|
174
|
-
return resolvedCache.get(name) ?? null;
|
|
175
56
|
}
|
|
176
57
|
function Icon({ name, size, color, family }) {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
const Component = resolved.component;
|
|
185
|
-
return React3__default.default.createElement(Component, { name, size, color });
|
|
186
|
-
}
|
|
187
|
-
function renderIcon(name, size, color) {
|
|
188
|
-
return React3__default.default.createElement(Icon, { name, size, color });
|
|
58
|
+
ensureGlyphCache();
|
|
59
|
+
const entry = family ? ALL_FAMILIES.find((f) => f.name === family) : ALL_FAMILIES.find((f) => {
|
|
60
|
+
const glyphMap = f.glyphMap;
|
|
61
|
+
return glyphMap ? name in glyphMap : false;
|
|
62
|
+
});
|
|
63
|
+
if (!entry) return null;
|
|
64
|
+
return React3__default.default.createElement(entry.component, { name, size, color });
|
|
189
65
|
}
|
|
66
|
+
|
|
67
|
+
// src/utils/animations.ts
|
|
190
68
|
var TIMINGS = {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
var EASINGS = {
|
|
197
|
-
/** Material-style ease-out — natural deceleration for state changes. */
|
|
198
|
-
standard: Animated.Easing.bezier(0.2, 0, 0, 1),
|
|
199
|
-
/** Strong ease-out for expanding surfaces (Accordion open). */
|
|
200
|
-
expand: Animated.Easing.bezier(0.23, 1, 0.32, 1),
|
|
201
|
-
/** Quick ease-in for collapsing. */
|
|
202
|
-
collapse: Animated.Easing.in(Animated.Easing.ease)
|
|
69
|
+
state: { duration: 160 }};
|
|
70
|
+
var COLOR_TRANSITION = {
|
|
71
|
+
type: "timing",
|
|
72
|
+
duration: TIMINGS.state.duration,
|
|
73
|
+
easing: [0.2, 0, 0, 1]
|
|
203
74
|
};
|
|
204
75
|
|
|
205
|
-
// src/utils/useColorTransition.ts
|
|
206
|
-
function useColorTransition(active, options = {}) {
|
|
207
|
-
const { duration = TIMINGS.state.duration } = options;
|
|
208
|
-
const progress = Animated.useSharedValue(active ? 1 : 0);
|
|
209
|
-
React3.useEffect(() => {
|
|
210
|
-
progress.value = Animated.withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
|
|
211
|
-
}, [active, duration, progress]);
|
|
212
|
-
return progress;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
76
|
// src/components/Textarea/Textarea.tsx
|
|
216
77
|
var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
|
|
217
78
|
function Textarea({
|
|
218
79
|
label,
|
|
219
80
|
error,
|
|
220
81
|
hint,
|
|
82
|
+
disabled,
|
|
221
83
|
rows = 4,
|
|
222
84
|
prefixIcon,
|
|
223
85
|
prefixIconNode,
|
|
@@ -231,54 +93,48 @@ function Textarea({
|
|
|
231
93
|
}) {
|
|
232
94
|
const { colors } = useTheme();
|
|
233
95
|
const [focused, setFocused] = React3.useState(false);
|
|
234
|
-
const
|
|
235
|
-
|
|
236
|
-
})
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
96
|
+
const resolvedPrefixIcon = prefixIcon ? /* @__PURE__ */ React3__default.default.createElement(Icon, { name: prefixIcon, size: ms(16), color: prefixIconColor ?? colors.foregroundMuted }) : prefixIconNode;
|
|
97
|
+
const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
|
|
98
|
+
return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.container, containerStyle] }, label ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.inputWrapper, { backgroundColor: colors.background }] }, /* @__PURE__ */ React3__default.default.createElement(
|
|
99
|
+
reactNativeEase.EaseView,
|
|
100
|
+
{
|
|
101
|
+
style: [styles.borderOverlay, { borderWidth: error ? 2 : 1 }],
|
|
102
|
+
animate: { borderColor },
|
|
103
|
+
transition: COLOR_TRANSITION,
|
|
104
|
+
pointerEvents: "none"
|
|
105
|
+
}
|
|
106
|
+
), resolvedPrefixIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.prefixIcon }, resolvedPrefixIcon) : null, /* @__PURE__ */ React3__default.default.createElement(
|
|
107
|
+
reactNative.TextInput,
|
|
244
108
|
{
|
|
109
|
+
multiline: true,
|
|
110
|
+
numberOfLines: rows,
|
|
111
|
+
textAlignVertical: "top",
|
|
112
|
+
editable: !disabled,
|
|
245
113
|
style: [
|
|
246
|
-
styles.
|
|
247
|
-
{
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
/* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
|
|
251
|
-
resolvedPrefixIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.prefixIcon }, resolvedPrefixIcon) : null,
|
|
252
|
-
/* @__PURE__ */ React3__default.default.createElement(
|
|
253
|
-
reactNative.TextInput,
|
|
254
|
-
{
|
|
255
|
-
multiline: true,
|
|
256
|
-
numberOfLines: rows,
|
|
257
|
-
textAlignVertical: "top",
|
|
258
|
-
style: [
|
|
259
|
-
styles.input,
|
|
260
|
-
{
|
|
261
|
-
color: colors.foreground,
|
|
262
|
-
minHeight: rows * vs(30)
|
|
263
|
-
},
|
|
264
|
-
webInputResetStyle,
|
|
265
|
-
style
|
|
266
|
-
],
|
|
267
|
-
onFocus: (e) => {
|
|
268
|
-
setFocused(true);
|
|
269
|
-
onFocus?.(e);
|
|
114
|
+
styles.input,
|
|
115
|
+
{
|
|
116
|
+
color: colors.foreground,
|
|
117
|
+
minHeight: rows * vs(30)
|
|
270
118
|
},
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
119
|
+
disabled && { opacity: 0.45 },
|
|
120
|
+
webInputResetStyle,
|
|
121
|
+
style
|
|
122
|
+
],
|
|
123
|
+
onFocus: (e) => {
|
|
124
|
+
setFocused(true);
|
|
125
|
+
onFocus?.(e);
|
|
126
|
+
},
|
|
127
|
+
onBlur: (e) => {
|
|
128
|
+
setFocused(false);
|
|
129
|
+
onBlur?.(e);
|
|
130
|
+
},
|
|
131
|
+
placeholderTextColor: colors.foregroundMuted,
|
|
132
|
+
allowFontScaling: true,
|
|
133
|
+
accessibilityLabel: accessibilityLabel ?? label,
|
|
134
|
+
accessibilityState: { disabled: !!disabled },
|
|
135
|
+
...props
|
|
136
|
+
}
|
|
137
|
+
)), error ? /* @__PURE__ */ React3__default.default.createElement(
|
|
282
138
|
reactNative.Text,
|
|
283
139
|
{
|
|
284
140
|
style: [styles.helperText, { color: colors.destructive }],
|
|
@@ -299,8 +155,6 @@ var styles = reactNative.StyleSheet.create({
|
|
|
299
155
|
marginBottom: vs(2)
|
|
300
156
|
},
|
|
301
157
|
inputWrapper: {
|
|
302
|
-
// Border lives on borderOverlay (absolute); wrapper carries none so the
|
|
303
|
-
// focus weight change never reflows content.
|
|
304
158
|
borderRadius: 8,
|
|
305
159
|
paddingHorizontal: s(14),
|
|
306
160
|
paddingVertical: vs(11),
|
package/dist/Textarea.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { Textarea } from './chunk-
|
|
2
|
-
import './chunk-
|
|
3
|
-
import './chunk-
|
|
4
|
-
import './chunk-
|
|
1
|
+
export { Textarea } from './chunk-L3YKPTJQ.mjs';
|
|
2
|
+
import './chunk-M53LC4Q7.mjs';
|
|
3
|
+
import './chunk-MZ6WRTD2.mjs';
|
|
4
|
+
import './chunk-KSSVIFYR.mjs';
|
|
5
5
|
import './chunk-2CE3TQVY.mjs';
|
|
6
6
|
import './chunk-Y6FXYEAI.mjs';
|
package/dist/Toast.js
CHANGED
|
@@ -11,118 +11,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
11
11
|
var React2__default = /*#__PURE__*/_interopDefault(React2);
|
|
12
12
|
|
|
13
13
|
// src/components/Toast/Toast.tsx
|
|
14
|
-
|
|
15
|
-
// src/theme/colorUtils.ts
|
|
16
|
-
function hexToRgb(hex) {
|
|
17
|
-
const clean = hex.replace("#", "");
|
|
18
|
-
const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
|
|
19
|
-
if (full.length !== 6) return null;
|
|
20
|
-
return {
|
|
21
|
-
r: parseInt(full.slice(0, 2), 16),
|
|
22
|
-
g: parseInt(full.slice(2, 4), 16),
|
|
23
|
-
b: parseInt(full.slice(4, 6), 16)
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
function componentToHex(c) {
|
|
27
|
-
return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
|
|
28
|
-
}
|
|
29
|
-
function rgbToHex(r, g, b) {
|
|
30
|
-
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
|
|
31
|
-
}
|
|
32
|
-
function withAlphaOnWhite(hex, alpha) {
|
|
33
|
-
const rgb = hexToRgb(hex);
|
|
34
|
-
if (!rgb) return hex;
|
|
35
|
-
const r = rgb.r * alpha + 255 * (1 - alpha);
|
|
36
|
-
const g = rgb.g * alpha + 255 * (1 - alpha);
|
|
37
|
-
const b = rgb.b * alpha + 255 * (1 - alpha);
|
|
38
|
-
return rgbToHex(r, g, b);
|
|
39
|
-
}
|
|
40
|
-
function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
|
|
41
|
-
const rgb = hexToRgb(hex);
|
|
42
|
-
const bg = hexToRgb(bgHex);
|
|
43
|
-
if (!rgb || !bg) return hex;
|
|
44
|
-
const r = rgb.r * alpha + bg.r * (1 - alpha);
|
|
45
|
-
const g = rgb.g * alpha + bg.g * (1 - alpha);
|
|
46
|
-
const b = rgb.b * alpha + bg.b * (1 - alpha);
|
|
47
|
-
return rgbToHex(r, g, b);
|
|
48
|
-
}
|
|
49
|
-
function mixWithBackground(fgHex, bgHex, opacity) {
|
|
50
|
-
const fg = hexToRgb(fgHex);
|
|
51
|
-
const bg = hexToRgb(bgHex);
|
|
52
|
-
if (!fg || !bg) return fgHex;
|
|
53
|
-
const r = fg.r * opacity + bg.r * (1 - opacity);
|
|
54
|
-
const g = fg.g * opacity + bg.g * (1 - opacity);
|
|
55
|
-
const b = fg.b * opacity + bg.b * (1 - opacity);
|
|
56
|
-
return rgbToHex(r, g, b);
|
|
57
|
-
}
|
|
58
|
-
function lighten(hex, amount) {
|
|
59
|
-
return withAlphaOnWhite(hex, 1 - amount);
|
|
60
|
-
}
|
|
61
|
-
function darken(hex, amount) {
|
|
62
|
-
const rgb = hexToRgb(hex);
|
|
63
|
-
if (!rgb) return hex;
|
|
64
|
-
return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// src/theme/colors.ts
|
|
68
|
-
var defaultLight = {
|
|
69
|
-
background: "#ffffff",
|
|
70
|
-
foreground: "#1a1a1a",
|
|
71
|
-
card: "#ffffff",
|
|
72
|
-
primary: "#1a1a1a",
|
|
73
|
-
primaryForeground: "#ffffff",
|
|
74
|
-
// AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
|
|
75
|
-
accent: "#d4561d",
|
|
76
|
-
accentForeground: "#ffffff",
|
|
77
|
-
border: "#dddddd",
|
|
78
|
-
// AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
|
|
79
|
-
destructive: "#c72828",
|
|
80
|
-
destructiveForeground: "#ffffff",
|
|
81
|
-
success: "#1a7a45",
|
|
82
|
-
successForeground: "#ffffff",
|
|
83
|
-
// AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
|
|
84
|
-
warning: "#9a5200",
|
|
85
|
-
warningForeground: "#ffffff"
|
|
86
|
-
};
|
|
87
|
-
function deriveColors(t, scheme) {
|
|
88
|
-
const dark = scheme === "dark";
|
|
89
|
-
const bg = t.background;
|
|
90
|
-
const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
|
|
91
|
-
const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
|
|
92
|
-
const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
|
|
93
|
-
const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
|
|
94
|
-
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
95
|
-
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
96
|
-
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
97
|
-
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
98
|
-
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
99
|
-
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
100
|
-
return {
|
|
101
|
-
...t,
|
|
102
|
-
foregroundSubtle,
|
|
103
|
-
foregroundMuted,
|
|
104
|
-
surface,
|
|
105
|
-
surfaceStrong,
|
|
106
|
-
destructiveTint,
|
|
107
|
-
destructiveBorder,
|
|
108
|
-
successTint,
|
|
109
|
-
successBorder,
|
|
110
|
-
warningTint,
|
|
111
|
-
warningBorder,
|
|
112
|
-
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
113
|
-
accentResolved: t.accent ?? t.primary,
|
|
114
|
-
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
115
|
-
ring: t.accent ?? t.primary,
|
|
116
|
-
input: t.border,
|
|
117
|
-
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
118
|
-
};
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// src/theme/ThemeProvider.tsx
|
|
122
|
-
var ThemeContext = React2.createContext({
|
|
123
|
-
colors: deriveColors(defaultLight, "light"),
|
|
124
|
-
colorScheme: "light"
|
|
125
|
-
});
|
|
14
|
+
var ThemeContext = React2.createContext(void 0);
|
|
126
15
|
function useTheme() {
|
|
127
16
|
const context = React2.useContext(ThemeContext);
|
|
128
17
|
if (!context) {
|