@retray-dev/ui-kit 6.2.0 → 9.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 +997 -20
- package/EXAMPLES.md +250 -2
- package/README.md +21 -14
- package/dist/Accordion.d.mts +28 -0
- package/dist/Accordion.d.ts +28 -0
- package/dist/Accordion.js +392 -0
- package/dist/Accordion.mjs +7 -0
- package/dist/AlertBanner.d.mts +16 -0
- package/dist/AlertBanner.d.ts +16 -0
- package/dist/AlertBanner.js +250 -0
- package/dist/AlertBanner.mjs +6 -0
- package/dist/AppHeader.d.mts +40 -0
- package/dist/AppHeader.d.ts +40 -0
- package/dist/AppHeader.js +515 -0
- package/dist/AppHeader.mjs +10 -0
- package/dist/Avatar.d.mts +20 -0
- package/dist/Avatar.d.ts +20 -0
- package/dist/Avatar.js +244 -0
- package/dist/Avatar.mjs +4 -0
- package/dist/Badge.d.mts +26 -0
- package/dist/Badge.d.ts +26 -0
- package/dist/Badge.js +257 -0
- package/dist/Badge.mjs +5 -0
- package/dist/Button.d.mts +30 -0
- package/dist/Button.d.ts +30 -0
- package/dist/Button.js +432 -0
- package/dist/Button.mjs +9 -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 +3 -0
- package/dist/Card.d.mts +39 -0
- package/dist/Card.d.ts +39 -0
- package/dist/Card.js +349 -0
- package/dist/Card.mjs +8 -0
- package/dist/CategoryStrip.d.mts +26 -0
- package/dist/CategoryStrip.d.ts +26 -0
- package/dist/CategoryStrip.js +453 -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 +336 -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 +403 -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 +560 -0
- package/dist/ConfirmDialog.mjs +10 -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 +4 -0
- package/dist/CurrencyInput.d.mts +26 -0
- package/dist/CurrencyInput.d.ts +26 -0
- package/dist/CurrencyInput.js +408 -0
- package/dist/CurrencyInput.mjs +8 -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 +5 -0
- package/dist/EmptyState.d.mts +27 -0
- package/dist/EmptyState.d.ts +27 -0
- package/dist/EmptyState.js +523 -0
- package/dist/EmptyState.mjs +10 -0
- package/dist/ErrorBoundary.d.mts +42 -0
- package/dist/ErrorBoundary.d.ts +42 -0
- package/dist/ErrorBoundary.js +351 -0
- package/dist/ErrorBoundary.mjs +7 -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 +4 -0
- package/dist/HolographicCard.d.mts +55 -0
- package/dist/HolographicCard.d.ts +55 -0
- package/dist/HolographicCard.js +316 -0
- package/dist/HolographicCard.mjs +191 -0
- package/dist/IconButton.d.mts +27 -0
- package/dist/IconButton.d.ts +27 -0
- package/dist/IconButton.js +400 -0
- package/dist/IconButton.mjs +8 -0
- package/dist/ImageViewer.d.mts +23 -0
- package/dist/ImageViewer.d.ts +23 -0
- package/dist/ImageViewer.js +582 -0
- package/dist/ImageViewer.mjs +8 -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 +7 -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 +5 -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 +5 -0
- package/dist/ListItem.d.mts +64 -0
- package/dist/ListItem.d.ts +64 -0
- package/dist/ListItem.js +444 -0
- package/dist/ListItem.mjs +9 -0
- package/dist/MediaCard.d.mts +39 -0
- package/dist/MediaCard.d.ts +39 -0
- package/dist/MediaCard.js +475 -0
- package/dist/MediaCard.mjs +9 -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 +5 -0
- package/dist/MenuItem.d.mts +48 -0
- package/dist/MenuItem.d.ts +48 -0
- package/dist/MenuItem.js +415 -0
- package/dist/MenuItem.mjs +9 -0
- package/dist/MonthPicker.d.mts +28 -0
- package/dist/MonthPicker.d.ts +28 -0
- package/dist/MonthPicker.js +297 -0
- package/dist/MonthPicker.mjs +5 -0
- package/dist/PagerDots.d.mts +35 -0
- package/dist/PagerDots.d.ts +35 -0
- package/dist/PagerDots.js +392 -0
- package/dist/PagerDots.mjs +7 -0
- package/dist/Pressable.d.mts +34 -0
- package/dist/Pressable.d.ts +34 -0
- package/dist/Pressable.js +143 -0
- package/dist/Pressable.mjs +5 -0
- package/dist/PricingCard.d.mts +50 -0
- package/dist/PricingCard.d.ts +50 -0
- package/dist/PricingCard.js +636 -0
- package/dist/PricingCard.mjs +11 -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 +5 -0
- package/dist/RadioGroup.d.mts +19 -0
- package/dist/RadioGroup.d.ts +19 -0
- package/dist/RadioGroup.js +392 -0
- package/dist/RadioGroup.mjs +7 -0
- package/dist/RetrayProvider.d.mts +2 -0
- package/dist/RetrayProvider.d.ts +2 -0
- package/dist/RetrayProvider.js +214 -0
- package/dist/RetrayProvider.mjs +5 -0
- package/dist/Select.d.mts +22 -0
- package/dist/Select.d.ts +22 -0
- package/dist/Select.js +488 -0
- package/dist/Select.mjs +7 -0
- package/dist/SelectableGrid.d.mts +44 -0
- package/dist/SelectableGrid.d.ts +44 -0
- package/dist/SelectableGrid.js +448 -0
- package/dist/SelectableGrid.mjs +9 -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 +3 -0
- package/dist/Sheet.d.mts +93 -0
- package/dist/Sheet.d.ts +93 -0
- package/dist/Sheet.js +450 -0
- package/dist/Sheet.mjs +6 -0
- package/dist/Skeleton.d.mts +67 -0
- package/dist/Skeleton.d.ts +67 -0
- package/dist/Skeleton.js +266 -0
- package/dist/Skeleton.mjs +6 -0
- package/dist/Slider.d.mts +20 -0
- package/dist/Slider.d.ts +20 -0
- package/dist/Slider.js +279 -0
- package/dist/Slider.mjs +5 -0
- package/dist/Spinner.d.mts +12 -0
- package/dist/Spinner.d.ts +12 -0
- package/dist/Spinner.js +193 -0
- package/dist/Spinner.mjs +4 -0
- package/dist/Switch.d.mts +13 -0
- package/dist/Switch.d.ts +13 -0
- package/dist/Switch.js +311 -0
- package/dist/Switch.mjs +6 -0
- package/dist/TabBar.d.mts +42 -0
- package/dist/TabBar.d.ts +42 -0
- package/dist/TabBar.js +361 -0
- package/dist/TabBar.mjs +6 -0
- package/dist/Tabs.d.mts +27 -0
- package/dist/Tabs.d.ts +27 -0
- package/dist/Tabs.js +419 -0
- package/dist/Tabs.mjs +7 -0
- package/dist/Text.d.mts +12 -0
- package/dist/Text.d.ts +12 -0
- package/dist/Text.js +327 -0
- package/dist/Text.mjs +5 -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 +7 -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 +4 -0
- package/dist/Toggle.d.mts +36 -0
- package/dist/Toggle.d.ts +36 -0
- package/dist/Toggle.js +412 -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 +2 -0
- package/dist/chunk-26BCI223.mjs +14 -0
- package/dist/chunk-2CE3TQVY.mjs +11 -0
- package/dist/chunk-2TFTAWVJ.mjs +131 -0
- package/dist/chunk-2UYENBLV.mjs +49 -0
- package/dist/chunk-3BBOZ3OQ.mjs +41 -0
- package/dist/chunk-3DKJ2GIC.mjs +30 -0
- package/dist/chunk-3U4SSNWP.mjs +120 -0
- package/dist/chunk-4I7D47FH.mjs +139 -0
- package/dist/chunk-4K625MVM.mjs +142 -0
- package/dist/chunk-6OAZJ577.mjs +98 -0
- package/dist/chunk-6Q64UFIA.mjs +71 -0
- package/dist/chunk-756RAKE4.mjs +145 -0
- package/dist/chunk-7QHVVCB3.mjs +115 -0
- package/dist/chunk-A3A6KNQN.mjs +245 -0
- package/dist/chunk-A4MDAP7G.mjs +42 -0
- package/dist/chunk-AJ7ZDNBT.mjs +120 -0
- package/dist/chunk-AV4EMIRH.mjs +94 -0
- package/dist/chunk-AZJF2BLK.mjs +115 -0
- package/dist/chunk-BNP626TY.mjs +159 -0
- package/dist/chunk-BRKYVJVV.mjs +60 -0
- package/dist/chunk-DVK4G2GT.mjs +59 -0
- package/dist/chunk-EH745HE5.mjs +127 -0
- package/dist/chunk-EJ7ZPXOH.mjs +163 -0
- package/dist/chunk-GD6KXMG5.mjs +106 -0
- package/dist/chunk-GQYFLP3D.mjs +187 -0
- package/dist/chunk-ID72TK46.mjs +111 -0
- package/dist/chunk-IRRY3CRZ.mjs +82 -0
- package/dist/chunk-JB67UOB5.mjs +92 -0
- package/dist/chunk-JMOZEC77.mjs +90 -0
- package/dist/chunk-JT7HKXRB.mjs +114 -0
- package/dist/chunk-KIHCWCWL.mjs +124 -0
- package/dist/chunk-LXJIIOYQ.mjs +104 -0
- package/dist/chunk-M6ZXVBTK.mjs +64 -0
- package/dist/chunk-MAC465BB.mjs +61 -0
- package/dist/chunk-MBMXYJJV.mjs +36 -0
- package/dist/chunk-MLF3EZFW.mjs +119 -0
- package/dist/chunk-MX6HRKMI.mjs +29 -0
- package/dist/chunk-NA7PARID.mjs +147 -0
- package/dist/chunk-NC5ZTR2Y.mjs +32 -0
- package/dist/chunk-O3HA6TYM.mjs +139 -0
- package/dist/chunk-OB4JUQ3O.mjs +51 -0
- package/dist/chunk-PFZTM6D5.mjs +238 -0
- package/dist/chunk-QKH5ZOD5.mjs +97 -0
- package/dist/chunk-QY3X2UYR.mjs +191 -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-TERDKCLE.mjs +74 -0
- package/dist/chunk-UREA2GYY.mjs +113 -0
- package/dist/chunk-VGTDN7SW.mjs +164 -0
- package/dist/chunk-VQ57HWPL.mjs +144 -0
- package/dist/chunk-WBOOUHSS.mjs +62 -0
- package/dist/chunk-WJLKJMKR.mjs +78 -0
- package/dist/chunk-X4G6APW6.mjs +134 -0
- package/dist/chunk-Y6FXYEAI.mjs +8 -0
- package/dist/chunk-YFZ3ELX5.mjs +16 -0
- package/dist/chunk-YNROWHQJ.mjs +46 -0
- package/dist/chunk-Z4BVUWW6.mjs +196 -0
- package/dist/chunk-ZJKGQMYH.mjs +131 -0
- package/dist/index-wt-orHUi.d.mts +85 -0
- package/dist/index-wt-orHUi.d.ts +85 -0
- package/dist/index.d.mts +149 -920
- package/dist/index.d.ts +149 -920
- package/dist/index.js +2560 -970
- package/dist/index.mjs +60 -3895
- package/package.json +55 -16
- 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 +15 -4
- package/src/components/AlertBanner/AlertBanner.tsx +38 -12
- package/src/components/AppHeader/AppHeader.tsx +172 -0
- package/src/components/AppHeader/index.ts +1 -0
- package/src/components/Avatar/Avatar.tsx +14 -4
- package/src/components/Badge/Badge.tsx +12 -3
- package/src/components/Button/Button.tsx +30 -38
- package/src/components/ButtonGroup/ButtonGroup.tsx +13 -10
- package/src/components/Card/Card.tsx +29 -57
- package/src/components/CategoryStrip/CategoryStrip.tsx +41 -42
- package/src/components/Checkbox/Checkbox.tsx +36 -45
- package/src/components/Chip/Chip.tsx +41 -48
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +2 -2
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +4 -2
- package/src/components/CurrencyInput/CurrencyInput.tsx +12 -10
- package/src/components/DetailRow/DetailRow.tsx +9 -7
- package/src/components/EmptyState/EmptyState.tsx +4 -3
- package/src/components/ErrorBoundary/ErrorBoundary.tsx +153 -0
- package/src/components/ErrorBoundary/index.ts +1 -0
- package/src/components/Form/Form.tsx +149 -0
- package/src/components/Form/index.ts +1 -0
- package/src/components/HolographicCard/HolographicCard.tsx +315 -0
- package/src/components/HolographicCard/index.ts +1 -0
- package/src/components/IconButton/IconButton.tsx +23 -29
- package/src/components/ImageViewer/ImageViewer.tsx +290 -0
- package/src/components/ImageViewer/index.ts +1 -0
- package/src/components/Input/Input.tsx +27 -31
- 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 +78 -76
- package/src/components/MediaCard/MediaCard.tsx +15 -7
- package/src/components/MenuGroup/MenuGroup.tsx +145 -0
- package/src/components/MenuGroup/index.ts +1 -0
- package/src/components/MenuItem/MenuItem.tsx +16 -33
- package/src/components/MonthPicker/MonthPicker.tsx +41 -15
- package/src/components/MonthPicker/index.ts +1 -1
- package/src/components/PagerDots/PagerDots.tsx +200 -0
- package/src/components/PagerDots/index.ts +1 -0
- package/src/components/Pressable/Pressable.tsx +19 -35
- package/src/components/PricingCard/PricingCard.tsx +220 -0
- package/src/components/PricingCard/index.ts +1 -0
- package/src/components/RadioGroup/RadioGroup.tsx +23 -39
- package/src/components/RetrayProvider/RetrayProvider.tsx +59 -0
- package/src/components/RetrayProvider/index.ts +1 -0
- package/src/components/Select/Select.tsx +6 -6
- package/src/components/SelectableGrid/SelectableGrid.tsx +205 -0
- package/src/components/SelectableGrid/index.ts +1 -0
- package/src/components/Separator/Separator.tsx +1 -3
- package/src/components/Sheet/Sheet.tsx +146 -18
- package/src/components/Skeleton/Skeleton.tsx +143 -2
- package/src/components/Slider/Slider.tsx +2 -2
- package/src/components/Spinner/Spinner.tsx +18 -3
- package/src/components/Switch/Switch.tsx +44 -49
- package/src/components/TabBar/TabBar.tsx +169 -0
- package/src/components/TabBar/index.ts +1 -0
- package/src/components/Tabs/Tabs.tsx +45 -44
- package/src/components/Text/Text.tsx +5 -1
- package/src/components/Textarea/Textarea.tsx +18 -14
- package/src/components/Toast/Toast.tsx +6 -6
- package/src/components/Toggle/Toggle.tsx +80 -72
- package/src/components/VirtualList/VirtualList.tsx +60 -0
- package/src/components/VirtualList/index.ts +1 -0
- package/src/fonts.ts +41 -20
- package/src/index.ts +28 -3
- 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 +29 -1
- package/src/utils/fontGuard.ts +34 -0
- package/src/utils/haptics.ts +211 -9
- package/src/utils/icons.ts +47 -20
- package/src/utils/pressable.ts +66 -0
- package/src/utils/usePressScale.ts +2 -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
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React3 = require('react');
|
|
4
|
+
var reactNative = require('react-native');
|
|
5
|
+
var AntDesign = require('@expo/vector-icons/AntDesign');
|
|
6
|
+
var Entypo = require('@expo/vector-icons/Entypo');
|
|
7
|
+
var Feather = require('@expo/vector-icons/Feather');
|
|
8
|
+
var FontAwesome5 = require('@expo/vector-icons/FontAwesome5');
|
|
9
|
+
var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
|
|
10
|
+
var Ionicons = require('@expo/vector-icons/Ionicons');
|
|
11
|
+
var reactNativeSizeMatters = require('react-native-size-matters');
|
|
12
|
+
|
|
13
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
|
|
15
|
+
var React3__default = /*#__PURE__*/_interopDefault(React3);
|
|
16
|
+
var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
|
|
17
|
+
var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
|
|
18
|
+
var Feather__default = /*#__PURE__*/_interopDefault(Feather);
|
|
19
|
+
var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
|
|
20
|
+
var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
|
|
21
|
+
var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
|
|
22
|
+
|
|
23
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
24
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
25
|
+
}) : x)(function(x) {
|
|
26
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
27
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
// src/theme/colorUtils.ts
|
|
31
|
+
function hexToRgb(hex) {
|
|
32
|
+
const clean = hex.replace("#", "");
|
|
33
|
+
const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
|
|
34
|
+
if (full.length !== 6) return null;
|
|
35
|
+
return {
|
|
36
|
+
r: parseInt(full.slice(0, 2), 16),
|
|
37
|
+
g: parseInt(full.slice(2, 4), 16),
|
|
38
|
+
b: parseInt(full.slice(4, 6), 16)
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
function componentToHex(c) {
|
|
42
|
+
return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
|
|
43
|
+
}
|
|
44
|
+
function rgbToHex(r, g, b) {
|
|
45
|
+
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
|
|
46
|
+
}
|
|
47
|
+
function withAlphaOnWhite(hex, alpha) {
|
|
48
|
+
const rgb = hexToRgb(hex);
|
|
49
|
+
if (!rgb) return hex;
|
|
50
|
+
const r = rgb.r * alpha + 255 * (1 - alpha);
|
|
51
|
+
const g = rgb.g * alpha + 255 * (1 - alpha);
|
|
52
|
+
const b = rgb.b * alpha + 255 * (1 - alpha);
|
|
53
|
+
return rgbToHex(r, g, b);
|
|
54
|
+
}
|
|
55
|
+
function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
|
|
56
|
+
const rgb = hexToRgb(hex);
|
|
57
|
+
const bg = hexToRgb(bgHex);
|
|
58
|
+
if (!rgb || !bg) return hex;
|
|
59
|
+
const r = rgb.r * alpha + bg.r * (1 - alpha);
|
|
60
|
+
const g = rgb.g * alpha + bg.g * (1 - alpha);
|
|
61
|
+
const b = rgb.b * alpha + bg.b * (1 - alpha);
|
|
62
|
+
return rgbToHex(r, g, b);
|
|
63
|
+
}
|
|
64
|
+
function mixWithBackground(fgHex, bgHex, opacity) {
|
|
65
|
+
const fg = hexToRgb(fgHex);
|
|
66
|
+
const bg = hexToRgb(bgHex);
|
|
67
|
+
if (!fg || !bg) return fgHex;
|
|
68
|
+
const r = fg.r * opacity + bg.r * (1 - opacity);
|
|
69
|
+
const g = fg.g * opacity + bg.g * (1 - opacity);
|
|
70
|
+
const b = fg.b * opacity + bg.b * (1 - opacity);
|
|
71
|
+
return rgbToHex(r, g, b);
|
|
72
|
+
}
|
|
73
|
+
function lighten(hex, amount) {
|
|
74
|
+
return withAlphaOnWhite(hex, 1 - amount);
|
|
75
|
+
}
|
|
76
|
+
function darken(hex, amount) {
|
|
77
|
+
const rgb = hexToRgb(hex);
|
|
78
|
+
if (!rgb) return hex;
|
|
79
|
+
return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// src/theme/colors.ts
|
|
83
|
+
var defaultLight = {
|
|
84
|
+
background: "#ffffff",
|
|
85
|
+
foreground: "#1a1a1a",
|
|
86
|
+
card: "#ffffff",
|
|
87
|
+
primary: "#1a1a1a",
|
|
88
|
+
primaryForeground: "#ffffff",
|
|
89
|
+
// AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
|
|
90
|
+
accent: "#d4561d",
|
|
91
|
+
accentForeground: "#ffffff",
|
|
92
|
+
border: "#dddddd",
|
|
93
|
+
// AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
|
|
94
|
+
destructive: "#c72828",
|
|
95
|
+
destructiveForeground: "#ffffff",
|
|
96
|
+
success: "#1a7a45",
|
|
97
|
+
successForeground: "#ffffff",
|
|
98
|
+
// AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
|
|
99
|
+
warning: "#9a5200",
|
|
100
|
+
warningForeground: "#ffffff"
|
|
101
|
+
};
|
|
102
|
+
function deriveColors(t, scheme) {
|
|
103
|
+
const dark = scheme === "dark";
|
|
104
|
+
const bg = t.background;
|
|
105
|
+
const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
|
|
106
|
+
const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
|
|
107
|
+
const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
|
|
108
|
+
const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
|
|
109
|
+
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
110
|
+
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
111
|
+
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
112
|
+
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
113
|
+
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
114
|
+
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
115
|
+
return {
|
|
116
|
+
...t,
|
|
117
|
+
foregroundSubtle,
|
|
118
|
+
foregroundMuted,
|
|
119
|
+
surface,
|
|
120
|
+
surfaceStrong,
|
|
121
|
+
destructiveTint,
|
|
122
|
+
destructiveBorder,
|
|
123
|
+
successTint,
|
|
124
|
+
successBorder,
|
|
125
|
+
warningTint,
|
|
126
|
+
warningBorder,
|
|
127
|
+
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
128
|
+
accentResolved: t.accent ?? t.primary,
|
|
129
|
+
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
130
|
+
ring: t.accent ?? t.primary,
|
|
131
|
+
input: t.border,
|
|
132
|
+
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// src/theme/ThemeProvider.tsx
|
|
137
|
+
var ThemeContext = React3.createContext({
|
|
138
|
+
colors: deriveColors(defaultLight, "light"),
|
|
139
|
+
colorScheme: "light"
|
|
140
|
+
});
|
|
141
|
+
function useTheme() {
|
|
142
|
+
const context = React3.useContext(ThemeContext);
|
|
143
|
+
if (!context) {
|
|
144
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
145
|
+
}
|
|
146
|
+
return context;
|
|
147
|
+
}
|
|
148
|
+
var glyphMapOf = (mod) => mod.glyphMap ?? {};
|
|
149
|
+
var ALL_FAMILIES = [
|
|
150
|
+
{ name: "Ionicons", component: Ionicons__default.default, getGlyphMap: () => glyphMapOf(Ionicons__default.default) },
|
|
151
|
+
{ name: "MaterialIcons", component: MaterialIcons__default.default, getGlyphMap: () => glyphMapOf(MaterialIcons__default.default) },
|
|
152
|
+
{ name: "FontAwesome5", component: FontAwesome5__default.default, getGlyphMap: () => glyphMapOf(FontAwesome5__default.default) },
|
|
153
|
+
{ name: "Entypo", component: Entypo__default.default, getGlyphMap: () => glyphMapOf(Entypo__default.default) },
|
|
154
|
+
{ name: "AntDesign", component: AntDesign__default.default, getGlyphMap: () => glyphMapOf(AntDesign__default.default) },
|
|
155
|
+
{ name: "Feather", component: Feather__default.default, getGlyphMap: () => glyphMapOf(Feather__default.default) }
|
|
156
|
+
];
|
|
157
|
+
var activeFamilies = ALL_FAMILIES;
|
|
158
|
+
var resolvedCache = null;
|
|
159
|
+
function buildCache() {
|
|
160
|
+
const cache = /* @__PURE__ */ new Map();
|
|
161
|
+
for (const family of activeFamilies) {
|
|
162
|
+
const glyphMap = family.getGlyphMap();
|
|
163
|
+
for (const iconName of Object.keys(glyphMap)) {
|
|
164
|
+
cache.set(iconName, family);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
return cache;
|
|
168
|
+
}
|
|
169
|
+
function resolveFamily(name) {
|
|
170
|
+
if (!resolvedCache) {
|
|
171
|
+
resolvedCache = buildCache();
|
|
172
|
+
}
|
|
173
|
+
return resolvedCache.get(name) ?? null;
|
|
174
|
+
}
|
|
175
|
+
function Icon({ name, size, color, family }) {
|
|
176
|
+
let resolved = null;
|
|
177
|
+
if (family) {
|
|
178
|
+
resolved = ALL_FAMILIES.find((f) => f.name === family) ?? null;
|
|
179
|
+
} else {
|
|
180
|
+
resolved = resolveFamily(name);
|
|
181
|
+
}
|
|
182
|
+
if (!resolved) return null;
|
|
183
|
+
const Component = resolved.component;
|
|
184
|
+
return React3__default.default.createElement(Component, { name, size, color });
|
|
185
|
+
}
|
|
186
|
+
function renderIcon(name, size, color) {
|
|
187
|
+
return React3__default.default.createElement(Icon, { name, size, color });
|
|
188
|
+
}
|
|
189
|
+
var isWeb = reactNative.Platform.OS === "web";
|
|
190
|
+
var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
|
|
191
|
+
var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
|
|
192
|
+
var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
|
|
193
|
+
var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
|
|
194
|
+
|
|
195
|
+
// src/tokens.ts
|
|
196
|
+
var RADIUS = {
|
|
197
|
+
md: 14,
|
|
198
|
+
full: 9999
|
|
199
|
+
};
|
|
200
|
+
var _haptics = null;
|
|
201
|
+
var _hapticsLoaded = false;
|
|
202
|
+
async function getHaptics() {
|
|
203
|
+
if (reactNative.Platform.OS === "web") return null;
|
|
204
|
+
if (!_hapticsLoaded) {
|
|
205
|
+
_hapticsLoaded = true;
|
|
206
|
+
try {
|
|
207
|
+
_haptics = await import('expo-haptics');
|
|
208
|
+
} catch {
|
|
209
|
+
_haptics = null;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
return _haptics;
|
|
213
|
+
}
|
|
214
|
+
var _pulsar = null;
|
|
215
|
+
var _pulsarChecked = false;
|
|
216
|
+
var _pulsarAvailable = false;
|
|
217
|
+
function isPulsarNativeRegistered() {
|
|
218
|
+
try {
|
|
219
|
+
const g = globalThis;
|
|
220
|
+
if (typeof g.__turboModuleProxy === "function") {
|
|
221
|
+
return g.__turboModuleProxy("RNPulsar") != null;
|
|
222
|
+
}
|
|
223
|
+
return reactNative.NativeModules?.RNPulsar != null;
|
|
224
|
+
} catch {
|
|
225
|
+
return false;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
function getPulsar() {
|
|
229
|
+
if (reactNative.Platform.OS === "web") return null;
|
|
230
|
+
if (!_pulsarChecked) {
|
|
231
|
+
_pulsarChecked = true;
|
|
232
|
+
try {
|
|
233
|
+
if (isPulsarNativeRegistered()) {
|
|
234
|
+
_pulsar = __require("react-native-pulsar");
|
|
235
|
+
_pulsarAvailable = true;
|
|
236
|
+
}
|
|
237
|
+
} catch {
|
|
238
|
+
_pulsar = null;
|
|
239
|
+
_pulsarAvailable = false;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
return _pulsarAvailable ? _pulsar : null;
|
|
243
|
+
}
|
|
244
|
+
function impactLight() {
|
|
245
|
+
if (reactNative.Platform.OS === "web") return;
|
|
246
|
+
getHaptics().then((h) => {
|
|
247
|
+
if (h) {
|
|
248
|
+
h.impactAsync(h.ImpactFeedbackStyle.Light);
|
|
249
|
+
} else {
|
|
250
|
+
getPulsar()?.Presets.System.impactLight();
|
|
251
|
+
}
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
// src/components/ErrorBoundary/ErrorBoundary.tsx
|
|
256
|
+
function DefaultErrorFallback({
|
|
257
|
+
error,
|
|
258
|
+
reset,
|
|
259
|
+
title = "Something went wrong",
|
|
260
|
+
message
|
|
261
|
+
}) {
|
|
262
|
+
const { colors } = useTheme();
|
|
263
|
+
return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.container, { backgroundColor: colors.background }], accessibilityRole: "alert" }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.iconCircle, { backgroundColor: colors.destructiveTint }] }, renderIcon("alert-triangle", ms(28), colors.destructive)), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.message, { color: colors.foregroundMuted }], allowFontScaling: true }, message ?? error.message ?? "An unexpected error occurred."), /* @__PURE__ */ React3__default.default.createElement(
|
|
264
|
+
reactNative.TouchableOpacity,
|
|
265
|
+
{
|
|
266
|
+
style: [styles.button, { backgroundColor: colors.primary }],
|
|
267
|
+
onPress: () => {
|
|
268
|
+
impactLight();
|
|
269
|
+
reset();
|
|
270
|
+
},
|
|
271
|
+
activeOpacity: 0.85,
|
|
272
|
+
touchSoundDisabled: true,
|
|
273
|
+
accessibilityRole: "button",
|
|
274
|
+
accessibilityLabel: "Try again"
|
|
275
|
+
},
|
|
276
|
+
/* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "Try again")
|
|
277
|
+
));
|
|
278
|
+
}
|
|
279
|
+
var ErrorBoundary = class extends React3__default.default.Component {
|
|
280
|
+
constructor() {
|
|
281
|
+
super(...arguments);
|
|
282
|
+
this.state = { error: null };
|
|
283
|
+
this.reset = () => {
|
|
284
|
+
this.setState({ error: null });
|
|
285
|
+
};
|
|
286
|
+
}
|
|
287
|
+
static getDerivedStateFromError(error) {
|
|
288
|
+
return { error };
|
|
289
|
+
}
|
|
290
|
+
componentDidCatch(error, info) {
|
|
291
|
+
this.props.onError?.(error, info);
|
|
292
|
+
}
|
|
293
|
+
render() {
|
|
294
|
+
const { error } = this.state;
|
|
295
|
+
if (error) {
|
|
296
|
+
const { fallback, title, message } = this.props;
|
|
297
|
+
if (typeof fallback === "function") {
|
|
298
|
+
return fallback({ error, reset: this.reset });
|
|
299
|
+
}
|
|
300
|
+
if (fallback !== void 0) {
|
|
301
|
+
return fallback;
|
|
302
|
+
}
|
|
303
|
+
return /* @__PURE__ */ React3__default.default.createElement(DefaultErrorFallback, { error, reset: this.reset, title, message });
|
|
304
|
+
}
|
|
305
|
+
return this.props.children;
|
|
306
|
+
}
|
|
307
|
+
};
|
|
308
|
+
var styles = reactNative.StyleSheet.create({
|
|
309
|
+
container: {
|
|
310
|
+
flex: 1,
|
|
311
|
+
alignItems: "center",
|
|
312
|
+
justifyContent: "center",
|
|
313
|
+
paddingHorizontal: s(32),
|
|
314
|
+
gap: vs(12)
|
|
315
|
+
},
|
|
316
|
+
iconCircle: {
|
|
317
|
+
width: s(64),
|
|
318
|
+
height: s(64),
|
|
319
|
+
borderRadius: RADIUS.full,
|
|
320
|
+
alignItems: "center",
|
|
321
|
+
justifyContent: "center",
|
|
322
|
+
marginBottom: vs(4)
|
|
323
|
+
},
|
|
324
|
+
title: {
|
|
325
|
+
fontFamily: "Sohne-SemiBold",
|
|
326
|
+
fontSize: ms(18),
|
|
327
|
+
lineHeight: mvs(24),
|
|
328
|
+
textAlign: "center"
|
|
329
|
+
},
|
|
330
|
+
message: {
|
|
331
|
+
fontFamily: "Sohne-Regular",
|
|
332
|
+
fontSize: ms(14),
|
|
333
|
+
lineHeight: mvs(20),
|
|
334
|
+
textAlign: "center"
|
|
335
|
+
},
|
|
336
|
+
button: {
|
|
337
|
+
marginTop: vs(8),
|
|
338
|
+
paddingHorizontal: s(20),
|
|
339
|
+
paddingVertical: vs(10),
|
|
340
|
+
borderRadius: RADIUS.md,
|
|
341
|
+
minHeight: vs(44),
|
|
342
|
+
alignItems: "center",
|
|
343
|
+
justifyContent: "center"
|
|
344
|
+
},
|
|
345
|
+
buttonLabel: {
|
|
346
|
+
fontFamily: "Sohne-Medium",
|
|
347
|
+
fontSize: ms(15)
|
|
348
|
+
}
|
|
349
|
+
});
|
|
350
|
+
|
|
351
|
+
exports.ErrorBoundary = ErrorBoundary;
|
package/dist/Form.d.mts
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface FormProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
style?: ViewStyle;
|
|
7
|
+
}
|
|
8
|
+
interface FormFieldProps {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
label?: string;
|
|
11
|
+
error?: string;
|
|
12
|
+
required?: boolean;
|
|
13
|
+
style?: ViewStyle;
|
|
14
|
+
labelStyle?: TextStyle;
|
|
15
|
+
errorStyle?: TextStyle;
|
|
16
|
+
}
|
|
17
|
+
interface FormSectionProps {
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
title?: string;
|
|
20
|
+
description?: string;
|
|
21
|
+
style?: ViewStyle;
|
|
22
|
+
}
|
|
23
|
+
interface FormFooterProps {
|
|
24
|
+
children: React.ReactNode;
|
|
25
|
+
style?: ViewStyle;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Form wrapper with consistent spacing between fields.
|
|
29
|
+
* Use Form.Field for individual inputs with label + error,
|
|
30
|
+
* Form.Section for grouped fields, and Form.Footer for action buttons.
|
|
31
|
+
*/
|
|
32
|
+
declare function Form({ children, style }: FormProps): React.JSX.Element;
|
|
33
|
+
declare namespace Form {
|
|
34
|
+
var Field: typeof FormField;
|
|
35
|
+
var Section: typeof FormSection;
|
|
36
|
+
var Footer: typeof FormFooter;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Wraps a single form input with optional label and error message.
|
|
40
|
+
* Automatically spaces children properly.
|
|
41
|
+
*/
|
|
42
|
+
declare function FormField({ children, label, error, required, style, labelStyle, errorStyle, }: FormFieldProps): React.JSX.Element;
|
|
43
|
+
/**
|
|
44
|
+
* Groups related form fields with optional title and description.
|
|
45
|
+
*/
|
|
46
|
+
declare function FormSection({ children, title, description, style }: FormSectionProps): React.JSX.Element;
|
|
47
|
+
/**
|
|
48
|
+
* Footer area for submit/cancel buttons or form actions.
|
|
49
|
+
*/
|
|
50
|
+
declare function FormFooter({ children, style }: FormFooterProps): React.JSX.Element;
|
|
51
|
+
|
|
52
|
+
export { Form, FormField, type FormFieldProps, FormFooter, type FormFooterProps, type FormProps, FormSection, type FormSectionProps };
|
package/dist/Form.d.ts
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface FormProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
style?: ViewStyle;
|
|
7
|
+
}
|
|
8
|
+
interface FormFieldProps {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
label?: string;
|
|
11
|
+
error?: string;
|
|
12
|
+
required?: boolean;
|
|
13
|
+
style?: ViewStyle;
|
|
14
|
+
labelStyle?: TextStyle;
|
|
15
|
+
errorStyle?: TextStyle;
|
|
16
|
+
}
|
|
17
|
+
interface FormSectionProps {
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
title?: string;
|
|
20
|
+
description?: string;
|
|
21
|
+
style?: ViewStyle;
|
|
22
|
+
}
|
|
23
|
+
interface FormFooterProps {
|
|
24
|
+
children: React.ReactNode;
|
|
25
|
+
style?: ViewStyle;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Form wrapper with consistent spacing between fields.
|
|
29
|
+
* Use Form.Field for individual inputs with label + error,
|
|
30
|
+
* Form.Section for grouped fields, and Form.Footer for action buttons.
|
|
31
|
+
*/
|
|
32
|
+
declare function Form({ children, style }: FormProps): React.JSX.Element;
|
|
33
|
+
declare namespace Form {
|
|
34
|
+
var Field: typeof FormField;
|
|
35
|
+
var Section: typeof FormSection;
|
|
36
|
+
var Footer: typeof FormFooter;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Wraps a single form input with optional label and error message.
|
|
40
|
+
* Automatically spaces children properly.
|
|
41
|
+
*/
|
|
42
|
+
declare function FormField({ children, label, error, required, style, labelStyle, errorStyle, }: FormFieldProps): React.JSX.Element;
|
|
43
|
+
/**
|
|
44
|
+
* Groups related form fields with optional title and description.
|
|
45
|
+
*/
|
|
46
|
+
declare function FormSection({ children, title, description, style }: FormSectionProps): React.JSX.Element;
|
|
47
|
+
/**
|
|
48
|
+
* Footer area for submit/cancel buttons or form actions.
|
|
49
|
+
*/
|
|
50
|
+
declare function FormFooter({ children, style }: FormFooterProps): React.JSX.Element;
|
|
51
|
+
|
|
52
|
+
export { Form, FormField, type FormFieldProps, FormFooter, type FormFooterProps, type FormProps, FormSection, type FormSectionProps };
|
package/dist/Form.js
ADDED
|
@@ -0,0 +1,204 @@
|
|
|
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/Form/Form.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 s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
|
|
133
|
+
var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
|
|
134
|
+
|
|
135
|
+
// src/components/Form/Form.tsx
|
|
136
|
+
function Form({ children, style }) {
|
|
137
|
+
return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.form, style] }, children);
|
|
138
|
+
}
|
|
139
|
+
function FormField({
|
|
140
|
+
children,
|
|
141
|
+
label,
|
|
142
|
+
error,
|
|
143
|
+
required,
|
|
144
|
+
style,
|
|
145
|
+
labelStyle,
|
|
146
|
+
errorStyle
|
|
147
|
+
}) {
|
|
148
|
+
const { colors } = useTheme();
|
|
149
|
+
return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.field, style] }, label ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.label, { color: colors.foreground }, labelStyle], allowFontScaling: true }, label, required ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: { color: colors.destructive } }, " *") : null) : null, children, error ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.error, { color: colors.destructive }, errorStyle], allowFontScaling: true }, error) : null);
|
|
150
|
+
}
|
|
151
|
+
function FormSection({ children, title, description, style }) {
|
|
152
|
+
const { colors } = useTheme();
|
|
153
|
+
return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.section, style] }, title ? /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.sectionHeader }, /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.sectionTitle, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.sectionDescription, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null, children);
|
|
154
|
+
}
|
|
155
|
+
function FormFooter({ children, style }) {
|
|
156
|
+
return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.footer, style] }, children);
|
|
157
|
+
}
|
|
158
|
+
Form.Field = FormField;
|
|
159
|
+
Form.Section = FormSection;
|
|
160
|
+
Form.Footer = FormFooter;
|
|
161
|
+
var styles = reactNative.StyleSheet.create({
|
|
162
|
+
form: {
|
|
163
|
+
gap: vs(16)
|
|
164
|
+
},
|
|
165
|
+
field: {
|
|
166
|
+
gap: vs(6)
|
|
167
|
+
},
|
|
168
|
+
label: {
|
|
169
|
+
fontFamily: "Sohne-Medium",
|
|
170
|
+
fontSize: 14,
|
|
171
|
+
lineHeight: 20
|
|
172
|
+
},
|
|
173
|
+
error: {
|
|
174
|
+
fontFamily: "Sohne-Regular",
|
|
175
|
+
fontSize: 12,
|
|
176
|
+
lineHeight: 16
|
|
177
|
+
},
|
|
178
|
+
section: {
|
|
179
|
+
gap: vs(16)
|
|
180
|
+
},
|
|
181
|
+
sectionHeader: {
|
|
182
|
+
gap: vs(4)
|
|
183
|
+
},
|
|
184
|
+
sectionTitle: {
|
|
185
|
+
fontFamily: "Sohne-SemiBold",
|
|
186
|
+
fontSize: 16,
|
|
187
|
+
lineHeight: 24
|
|
188
|
+
},
|
|
189
|
+
sectionDescription: {
|
|
190
|
+
fontFamily: "Sohne-Regular",
|
|
191
|
+
fontSize: 14,
|
|
192
|
+
lineHeight: 20
|
|
193
|
+
},
|
|
194
|
+
footer: {
|
|
195
|
+
flexDirection: "row",
|
|
196
|
+
gap: s(12),
|
|
197
|
+
paddingTop: vs(8)
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
exports.Form = Form;
|
|
202
|
+
exports.FormField = FormField;
|
|
203
|
+
exports.FormFooter = FormFooter;
|
|
204
|
+
exports.FormSection = FormSection;
|
package/dist/Form.mjs
ADDED