orn-ui 0.2.10 → 0.3.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/AGENTS.md +66 -51
- package/README.md +3 -7
- package/lib/commonjs/atoms/Avatar.js +77 -5
- package/lib/commonjs/atoms/Avatar.js.map +1 -1
- package/lib/commonjs/atoms/Badge.js +17 -8
- package/lib/commonjs/atoms/Badge.js.map +1 -1
- package/lib/commonjs/atoms/Button.js +108 -39
- package/lib/commonjs/atoms/Button.js.map +1 -1
- package/lib/commonjs/atoms/Card.js +24 -2
- package/lib/commonjs/atoms/Card.js.map +1 -1
- package/lib/commonjs/atoms/Checkbox.js +41 -10
- package/lib/commonjs/atoms/Checkbox.js.map +1 -1
- package/lib/commonjs/atoms/Divider.js +30 -5
- package/lib/commonjs/atoms/Divider.js.map +1 -1
- package/lib/commonjs/atoms/EmptyState.js +58 -20
- package/lib/commonjs/atoms/EmptyState.js.map +1 -1
- package/lib/commonjs/atoms/Fab.js +32 -12
- package/lib/commonjs/atoms/Fab.js.map +1 -1
- package/lib/commonjs/atoms/Gradient.js +102 -36
- package/lib/commonjs/atoms/Gradient.js.map +1 -1
- package/lib/commonjs/atoms/IconButton.js +25 -4
- package/lib/commonjs/atoms/IconButton.js.map +1 -1
- package/lib/commonjs/atoms/Image.js +61 -25
- package/lib/commonjs/atoms/Image.js.map +1 -1
- package/lib/commonjs/atoms/Input.js +105 -17
- package/lib/commonjs/atoms/Input.js.map +1 -1
- package/lib/commonjs/atoms/KeyValueRow.js +37 -9
- package/lib/commonjs/atoms/KeyValueRow.js.map +1 -1
- package/lib/commonjs/atoms/PressableScale.js +25 -5
- package/lib/commonjs/atoms/PressableScale.js.map +1 -1
- package/lib/commonjs/atoms/ShinyText.js +29 -29
- package/lib/commonjs/atoms/Skeleton.js +28 -13
- package/lib/commonjs/atoms/Skeleton.js.map +1 -1
- package/lib/commonjs/atoms/Spinner.js +81 -22
- package/lib/commonjs/atoms/Spinner.js.map +1 -1
- package/lib/commonjs/atoms/Text.js +56 -5
- package/lib/commonjs/atoms/Text.js.map +1 -1
- package/lib/commonjs/atoms/Transition.js +46 -43
- package/lib/commonjs/atoms/Transition.js.map +1 -1
- package/lib/commonjs/atoms/index.js +6 -0
- package/lib/commonjs/atoms/index.js.map +1 -1
- package/lib/commonjs/atoms/inputValidation.js +56 -0
- package/lib/commonjs/atoms/inputValidation.js.map +1 -0
- package/lib/commonjs/icons/Icon.js +4 -4
- package/lib/commonjs/icons/defaultIcons.js +576 -24
- package/lib/commonjs/icons/defaultIcons.js.map +1 -1
- package/lib/commonjs/icons/index.js +6 -0
- package/lib/commonjs/icons/index.js.map +1 -1
- package/lib/commonjs/molecules/AvatarHeader.js +47 -14
- package/lib/commonjs/molecules/AvatarHeader.js.map +1 -1
- package/lib/commonjs/molecules/FormActions.js +25 -9
- package/lib/commonjs/molecules/FormActions.js.map +1 -1
- package/lib/commonjs/molecules/InfoRow.js +30 -14
- package/lib/commonjs/molecules/InfoRow.js.map +1 -1
- package/lib/commonjs/molecules/OptionCard.js +37 -22
- package/lib/commonjs/molecules/OptionCard.js.map +1 -1
- package/lib/commonjs/molecules/SegmentedControl.js +103 -14
- package/lib/commonjs/molecules/SegmentedControl.js.map +1 -1
- package/lib/commonjs/molecules/Stepper.js +61 -16
- package/lib/commonjs/molecules/Stepper.js.map +1 -1
- package/lib/commonjs/molecules/Steps.js +105 -41
- package/lib/commonjs/molecules/Steps.js.map +1 -1
- package/lib/commonjs/molecules/SymmetricGrid.js +26 -18
- package/lib/commonjs/molecules/SymmetricGrid.js.map +1 -1
- package/lib/commonjs/organisms/Alert.js +49 -35
- package/lib/commonjs/organisms/Alert.js.map +1 -1
- package/lib/commonjs/organisms/AlertProvider.js +10 -10
- package/lib/commonjs/organisms/BottomSheet.js +137 -85
- package/lib/commonjs/organisms/BottomSheet.js.map +1 -1
- package/lib/commonjs/organisms/Chart.js +174 -154
- package/lib/commonjs/organisms/Chart.js.map +1 -1
- package/lib/commonjs/organisms/DateField.js +36 -20
- package/lib/commonjs/organisms/DateField.js.map +1 -1
- package/lib/commonjs/organisms/DatePicker.js +56 -33
- package/lib/commonjs/organisms/DatePicker.js.map +1 -1
- package/lib/commonjs/organisms/List.js +62 -34
- package/lib/commonjs/organisms/List.js.map +1 -1
- package/lib/commonjs/organisms/Modal.js +120 -82
- package/lib/commonjs/organisms/Modal.js.map +1 -1
- package/lib/commonjs/organisms/NavigationBar.js +63 -24
- package/lib/commonjs/organisms/NavigationBar.js.map +1 -1
- package/lib/commonjs/organisms/OptionWheel.js +64 -64
- package/lib/commonjs/organisms/OptionWheel.js.map +1 -1
- package/lib/commonjs/organisms/ReorderableList.js +48 -27
- package/lib/commonjs/organisms/ReorderableList.js.map +1 -1
- package/lib/commonjs/organisms/Screen.js +68 -35
- package/lib/commonjs/organisms/Screen.js.map +1 -1
- package/lib/commonjs/organisms/SearchList.js +56 -26
- package/lib/commonjs/organisms/SearchList.js.map +1 -1
- package/lib/commonjs/organisms/Select.js +45 -24
- package/lib/commonjs/organisms/Select.js.map +1 -1
- package/lib/commonjs/organisms/Slides.js +36 -23
- package/lib/commonjs/organisms/Slides.js.map +1 -1
- package/lib/commonjs/organisms/ThemeToggle.js +10 -9
- package/lib/commonjs/organisms/ThemeToggle.js.map +1 -1
- package/lib/commonjs/organisms/Timeline.js +73 -56
- package/lib/commonjs/organisms/Timeline.js.map +1 -1
- package/lib/commonjs/organisms/Toast.js +46 -15
- package/lib/commonjs/organisms/Toast.js.map +1 -1
- package/lib/commonjs/organisms/ToastProvider.js +14 -10
- package/lib/commonjs/organisms/ToastProvider.js.map +1 -1
- package/lib/commonjs/organisms/Wizard.js +40 -15
- package/lib/commonjs/organisms/Wizard.js.map +1 -1
- package/lib/commonjs/organisms/chart/frame.js +25 -25
- package/lib/commonjs/organisms/chart/frame.js.map +1 -1
- package/lib/commonjs/organisms/chart/marks.js +42 -42
- package/lib/commonjs/organisms/chart/math.js +84 -85
- package/lib/commonjs/organisms/chart/math.js.map +1 -1
- package/lib/commonjs/organisms/chart/palette.js +28 -28
- package/lib/commonjs/organisms/imperativeBridge.js +5 -5
- package/lib/commonjs/organisms/imperativeBridge.js.map +1 -1
- package/lib/commonjs/organisms/useSlides.js +53 -21
- package/lib/commonjs/organisms/useSlides.js.map +1 -1
- package/lib/commonjs/safe-area/SafeAreaUIProvider.js +9 -66
- package/lib/commonjs/safe-area/SafeAreaUIProvider.js.map +1 -1
- package/lib/commonjs/safe-area/index.js.map +1 -1
- package/lib/commonjs/theme/KeyboardAvoidance.js +206 -0
- package/lib/commonjs/theme/KeyboardAvoidance.js.map +1 -0
- package/lib/commonjs/theme/NativeOverlay.js +263 -0
- package/lib/commonjs/theme/NativeOverlay.js.map +1 -0
- package/lib/commonjs/theme/UIProvider.js +86 -33
- package/lib/commonjs/theme/UIProvider.js.map +1 -1
- package/lib/commonjs/theme/colors.js +17 -17
- package/lib/commonjs/theme/colors.js.map +1 -1
- package/lib/commonjs/theme/createStyles.js +19 -16
- package/lib/commonjs/theme/createStyles.js.map +1 -1
- package/lib/commonjs/theme/createTheme.js +6 -6
- package/lib/commonjs/theme/index.js +6 -0
- package/lib/commonjs/theme/index.js.map +1 -1
- package/lib/commonjs/theme/insets.js +1 -1
- package/lib/commonjs/theme/labels.js +29 -1
- package/lib/commonjs/theme/labels.js.map +1 -1
- package/lib/commonjs/theme/palettes.js +25 -23
- package/lib/commonjs/theme/palettes.js.map +1 -1
- package/lib/commonjs/theme/tokens.js +28 -14
- package/lib/commonjs/theme/tokens.js.map +1 -1
- package/lib/commonjs/theme/useKeyboardField.js +36 -0
- package/lib/commonjs/theme/useKeyboardField.js.map +1 -0
- package/lib/commonjs/theme/useReduceMotion.js +31 -0
- package/lib/commonjs/theme/useReduceMotion.js.map +1 -0
- package/lib/module/atoms/Avatar.js +79 -8
- package/lib/module/atoms/Avatar.js.map +1 -1
- package/lib/module/atoms/Badge.js +17 -8
- package/lib/module/atoms/Badge.js.map +1 -1
- package/lib/module/atoms/Button.js +110 -41
- package/lib/module/atoms/Button.js.map +1 -1
- package/lib/module/atoms/Card.js +24 -2
- package/lib/module/atoms/Card.js.map +1 -1
- package/lib/module/atoms/Checkbox.js +42 -11
- package/lib/module/atoms/Checkbox.js.map +1 -1
- package/lib/module/atoms/Divider.js +31 -6
- package/lib/module/atoms/Divider.js.map +1 -1
- package/lib/module/atoms/EmptyState.js +58 -20
- package/lib/module/atoms/EmptyState.js.map +1 -1
- package/lib/module/atoms/Fab.js +33 -13
- package/lib/module/atoms/Fab.js.map +1 -1
- package/lib/module/atoms/Gradient.js +103 -37
- package/lib/module/atoms/Gradient.js.map +1 -1
- package/lib/module/atoms/IconButton.js +25 -4
- package/lib/module/atoms/IconButton.js.map +1 -1
- package/lib/module/atoms/Image.js +61 -25
- package/lib/module/atoms/Image.js.map +1 -1
- package/lib/module/atoms/Input.js +108 -20
- package/lib/module/atoms/Input.js.map +1 -1
- package/lib/module/atoms/KeyValueRow.js +37 -9
- package/lib/module/atoms/KeyValueRow.js.map +1 -1
- package/lib/module/atoms/PressableScale.js +25 -5
- package/lib/module/atoms/PressableScale.js.map +1 -1
- package/lib/module/atoms/ShinyText.js +29 -29
- package/lib/module/atoms/Skeleton.js +30 -13
- package/lib/module/atoms/Skeleton.js.map +1 -1
- package/lib/module/atoms/Spinner.js +82 -23
- package/lib/module/atoms/Spinner.js.map +1 -1
- package/lib/module/atoms/Text.js +56 -5
- package/lib/module/atoms/Text.js.map +1 -1
- package/lib/module/atoms/Transition.js +41 -42
- package/lib/module/atoms/Transition.js.map +1 -1
- package/lib/module/atoms/index.js +1 -1
- package/lib/module/atoms/index.js.map +1 -1
- package/lib/module/atoms/inputValidation.js +52 -0
- package/lib/module/atoms/inputValidation.js.map +1 -0
- package/lib/module/icons/Icon.js +4 -4
- package/lib/module/icons/defaultIcons.js +574 -24
- package/lib/module/icons/defaultIcons.js.map +1 -1
- package/lib/module/icons/index.js +1 -1
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/molecules/AvatarHeader.js +47 -14
- package/lib/module/molecules/AvatarHeader.js.map +1 -1
- package/lib/module/molecules/FormActions.js +25 -9
- package/lib/module/molecules/FormActions.js.map +1 -1
- package/lib/module/molecules/InfoRow.js +30 -14
- package/lib/module/molecules/InfoRow.js.map +1 -1
- package/lib/module/molecules/OptionCard.js +37 -22
- package/lib/module/molecules/OptionCard.js.map +1 -1
- package/lib/module/molecules/SegmentedControl.js +107 -18
- package/lib/module/molecules/SegmentedControl.js.map +1 -1
- package/lib/module/molecules/Stepper.js +63 -18
- package/lib/module/molecules/Stepper.js.map +1 -1
- package/lib/module/molecules/Steps.js +107 -43
- package/lib/module/molecules/Steps.js.map +1 -1
- package/lib/module/molecules/SymmetricGrid.js +26 -18
- package/lib/module/molecules/SymmetricGrid.js.map +1 -1
- package/lib/module/organisms/Alert.js +51 -37
- package/lib/module/organisms/Alert.js.map +1 -1
- package/lib/module/organisms/AlertProvider.js +10 -10
- package/lib/module/organisms/BottomSheet.js +142 -88
- package/lib/module/organisms/BottomSheet.js.map +1 -1
- package/lib/module/organisms/Chart.js +176 -156
- package/lib/module/organisms/Chart.js.map +1 -1
- package/lib/module/organisms/DateField.js +36 -20
- package/lib/module/organisms/DateField.js.map +1 -1
- package/lib/module/organisms/DatePicker.js +56 -33
- package/lib/module/organisms/DatePicker.js.map +1 -1
- package/lib/module/organisms/List.js +62 -34
- package/lib/module/organisms/List.js.map +1 -1
- package/lib/module/organisms/Modal.js +122 -84
- package/lib/module/organisms/Modal.js.map +1 -1
- package/lib/module/organisms/NavigationBar.js +64 -25
- package/lib/module/organisms/NavigationBar.js.map +1 -1
- package/lib/module/organisms/OptionWheel.js +64 -64
- package/lib/module/organisms/OptionWheel.js.map +1 -1
- package/lib/module/organisms/ReorderableList.js +48 -27
- package/lib/module/organisms/ReorderableList.js.map +1 -1
- package/lib/module/organisms/Screen.js +70 -37
- package/lib/module/organisms/Screen.js.map +1 -1
- package/lib/module/organisms/SearchList.js +56 -26
- package/lib/module/organisms/SearchList.js.map +1 -1
- package/lib/module/organisms/Select.js +46 -25
- package/lib/module/organisms/Select.js.map +1 -1
- package/lib/module/organisms/Slides.js +37 -24
- package/lib/module/organisms/Slides.js.map +1 -1
- package/lib/module/organisms/ThemeToggle.js +11 -10
- package/lib/module/organisms/ThemeToggle.js.map +1 -1
- package/lib/module/organisms/Timeline.js +73 -56
- package/lib/module/organisms/Timeline.js.map +1 -1
- package/lib/module/organisms/Toast.js +47 -16
- package/lib/module/organisms/Toast.js.map +1 -1
- package/lib/module/organisms/ToastProvider.js +15 -11
- package/lib/module/organisms/ToastProvider.js.map +1 -1
- package/lib/module/organisms/Wizard.js +41 -16
- package/lib/module/organisms/Wizard.js.map +1 -1
- package/lib/module/organisms/chart/frame.js +25 -25
- package/lib/module/organisms/chart/frame.js.map +1 -1
- package/lib/module/organisms/chart/marks.js +42 -42
- package/lib/module/organisms/chart/math.js +84 -85
- package/lib/module/organisms/chart/math.js.map +1 -1
- package/lib/module/organisms/chart/palette.js +28 -28
- package/lib/module/organisms/imperativeBridge.js +5 -5
- package/lib/module/organisms/imperativeBridge.js.map +1 -1
- package/lib/module/organisms/useSlides.js +53 -21
- package/lib/module/organisms/useSlides.js.map +1 -1
- package/lib/module/safe-area/SafeAreaUIProvider.js +10 -65
- package/lib/module/safe-area/SafeAreaUIProvider.js.map +1 -1
- package/lib/module/safe-area/index.js +1 -0
- package/lib/module/safe-area/index.js.map +1 -1
- package/lib/module/theme/KeyboardAvoidance.js +198 -0
- package/lib/module/theme/KeyboardAvoidance.js.map +1 -0
- package/lib/module/theme/NativeOverlay.js +257 -0
- package/lib/module/theme/NativeOverlay.js.map +1 -0
- package/lib/module/theme/UIProvider.js +88 -35
- package/lib/module/theme/UIProvider.js.map +1 -1
- package/lib/module/theme/colors.js +17 -17
- package/lib/module/theme/colors.js.map +1 -1
- package/lib/module/theme/createStyles.js +20 -16
- package/lib/module/theme/createStyles.js.map +1 -1
- package/lib/module/theme/createTheme.js +6 -6
- package/lib/module/theme/index.js +1 -1
- package/lib/module/theme/index.js.map +1 -1
- package/lib/module/theme/insets.js +1 -1
- package/lib/module/theme/labels.js +29 -1
- package/lib/module/theme/labels.js.map +1 -1
- package/lib/module/theme/palettes.js +25 -23
- package/lib/module/theme/palettes.js.map +1 -1
- package/lib/module/theme/tokens.js +27 -13
- package/lib/module/theme/tokens.js.map +1 -1
- package/lib/module/theme/useKeyboardField.js +33 -0
- package/lib/module/theme/useKeyboardField.js.map +1 -0
- package/lib/module/theme/useReduceMotion.js +28 -0
- package/lib/module/theme/useReduceMotion.js.map +1 -0
- package/lib/typescript/atoms/Avatar.d.ts +35 -5
- package/lib/typescript/atoms/Avatar.d.ts.map +1 -1
- package/lib/typescript/atoms/Badge.d.ts +14 -3
- package/lib/typescript/atoms/Badge.d.ts.map +1 -1
- package/lib/typescript/atoms/Button.d.ts +34 -3
- package/lib/typescript/atoms/Button.d.ts.map +1 -1
- package/lib/typescript/atoms/Card.d.ts +13 -2
- package/lib/typescript/atoms/Card.d.ts.map +1 -1
- package/lib/typescript/atoms/Checkbox.d.ts +26 -1
- package/lib/typescript/atoms/Checkbox.d.ts.map +1 -1
- package/lib/typescript/atoms/Divider.d.ts +18 -1
- package/lib/typescript/atoms/Divider.d.ts.map +1 -1
- package/lib/typescript/atoms/EmptyState.d.ts +30 -3
- package/lib/typescript/atoms/EmptyState.d.ts.map +1 -1
- package/lib/typescript/atoms/Fab.d.ts +24 -4
- package/lib/typescript/atoms/Fab.d.ts.map +1 -1
- package/lib/typescript/atoms/Gradient.d.ts +21 -15
- package/lib/typescript/atoms/Gradient.d.ts.map +1 -1
- package/lib/typescript/atoms/IconButton.d.ts +18 -4
- package/lib/typescript/atoms/IconButton.d.ts.map +1 -1
- package/lib/typescript/atoms/Image.d.ts +39 -17
- package/lib/typescript/atoms/Image.d.ts.map +1 -1
- package/lib/typescript/atoms/Input.d.ts +57 -7
- package/lib/typescript/atoms/Input.d.ts.map +1 -1
- package/lib/typescript/atoms/KeyValueRow.d.ts +16 -4
- package/lib/typescript/atoms/KeyValueRow.d.ts.map +1 -1
- package/lib/typescript/atoms/PressableScale.d.ts +12 -5
- package/lib/typescript/atoms/PressableScale.d.ts.map +1 -1
- package/lib/typescript/atoms/ShinyText.d.ts +17 -17
- package/lib/typescript/atoms/ShinyText.d.ts.map +1 -1
- package/lib/typescript/atoms/Skeleton.d.ts +12 -7
- package/lib/typescript/atoms/Skeleton.d.ts.map +1 -1
- package/lib/typescript/atoms/Spinner.d.ts +29 -1
- package/lib/typescript/atoms/Spinner.d.ts.map +1 -1
- package/lib/typescript/atoms/Text.d.ts +46 -0
- package/lib/typescript/atoms/Text.d.ts.map +1 -1
- package/lib/typescript/atoms/Transition.d.ts +19 -15
- package/lib/typescript/atoms/Transition.d.ts.map +1 -1
- package/lib/typescript/atoms/index.d.ts +3 -3
- package/lib/typescript/atoms/index.d.ts.map +1 -1
- package/lib/typescript/atoms/inputValidation.d.ts +29 -0
- package/lib/typescript/atoms/inputValidation.d.ts.map +1 -0
- package/lib/typescript/icons/Icon.d.ts +4 -4
- package/lib/typescript/icons/defaultIcons.d.ts +19 -2
- package/lib/typescript/icons/defaultIcons.d.ts.map +1 -1
- package/lib/typescript/icons/index.d.ts +2 -2
- package/lib/typescript/icons/index.d.ts.map +1 -1
- package/lib/typescript/icons/types.d.ts +13 -3
- package/lib/typescript/icons/types.d.ts.map +1 -1
- package/lib/typescript/molecules/AvatarHeader.d.ts +23 -4
- package/lib/typescript/molecules/AvatarHeader.d.ts.map +1 -1
- package/lib/typescript/molecules/FormActions.d.ts +21 -4
- package/lib/typescript/molecules/FormActions.d.ts.map +1 -1
- package/lib/typescript/molecules/InfoRow.d.ts +17 -3
- package/lib/typescript/molecules/InfoRow.d.ts.map +1 -1
- package/lib/typescript/molecules/OptionCard.d.ts +20 -5
- package/lib/typescript/molecules/OptionCard.d.ts.map +1 -1
- package/lib/typescript/molecules/SegmentedControl.d.ts +18 -2
- package/lib/typescript/molecules/SegmentedControl.d.ts.map +1 -1
- package/lib/typescript/molecules/Stepper.d.ts +23 -7
- package/lib/typescript/molecules/Stepper.d.ts.map +1 -1
- package/lib/typescript/molecules/Steps.d.ts +18 -4
- package/lib/typescript/molecules/Steps.d.ts.map +1 -1
- package/lib/typescript/molecules/SymmetricGrid.d.ts +15 -5
- package/lib/typescript/molecules/SymmetricGrid.d.ts.map +1 -1
- package/lib/typescript/organisms/Alert.d.ts +28 -2
- package/lib/typescript/organisms/Alert.d.ts.map +1 -1
- package/lib/typescript/organisms/AlertProvider.d.ts +10 -10
- package/lib/typescript/organisms/AlertProvider.d.ts.map +1 -1
- package/lib/typescript/organisms/BottomSheet.d.ts +20 -5
- package/lib/typescript/organisms/BottomSheet.d.ts.map +1 -1
- package/lib/typescript/organisms/Chart.d.ts +86 -75
- package/lib/typescript/organisms/Chart.d.ts.map +1 -1
- package/lib/typescript/organisms/DateField.d.ts +17 -3
- package/lib/typescript/organisms/DateField.d.ts.map +1 -1
- package/lib/typescript/organisms/DatePicker.d.ts +7 -11
- package/lib/typescript/organisms/DatePicker.d.ts.map +1 -1
- package/lib/typescript/organisms/List.d.ts +30 -3
- package/lib/typescript/organisms/List.d.ts.map +1 -1
- package/lib/typescript/organisms/Modal.d.ts +30 -3
- package/lib/typescript/organisms/Modal.d.ts.map +1 -1
- package/lib/typescript/organisms/NavigationBar.d.ts +26 -7
- package/lib/typescript/organisms/NavigationBar.d.ts.map +1 -1
- package/lib/typescript/organisms/OptionWheel.d.ts +20 -16
- package/lib/typescript/organisms/OptionWheel.d.ts.map +1 -1
- package/lib/typescript/organisms/ReorderableList.d.ts +20 -11
- package/lib/typescript/organisms/ReorderableList.d.ts.map +1 -1
- package/lib/typescript/organisms/Screen.d.ts +27 -8
- package/lib/typescript/organisms/Screen.d.ts.map +1 -1
- package/lib/typescript/organisms/SearchList.d.ts +46 -3
- package/lib/typescript/organisms/SearchList.d.ts.map +1 -1
- package/lib/typescript/organisms/Select.d.ts +26 -6
- package/lib/typescript/organisms/Select.d.ts.map +1 -1
- package/lib/typescript/organisms/Slides.d.ts +44 -26
- package/lib/typescript/organisms/Slides.d.ts.map +1 -1
- package/lib/typescript/organisms/ThemeToggle.d.ts +6 -2
- package/lib/typescript/organisms/ThemeToggle.d.ts.map +1 -1
- package/lib/typescript/organisms/Timeline.d.ts +26 -9
- package/lib/typescript/organisms/Timeline.d.ts.map +1 -1
- package/lib/typescript/organisms/Toast.d.ts +19 -4
- package/lib/typescript/organisms/Toast.d.ts.map +1 -1
- package/lib/typescript/organisms/ToastProvider.d.ts +8 -8
- package/lib/typescript/organisms/ToastProvider.d.ts.map +1 -1
- package/lib/typescript/organisms/Wizard.d.ts +24 -6
- package/lib/typescript/organisms/Wizard.d.ts.map +1 -1
- package/lib/typescript/organisms/chart/frame.d.ts +21 -21
- package/lib/typescript/organisms/chart/frame.d.ts.map +1 -1
- package/lib/typescript/organisms/chart/marks.d.ts +28 -28
- package/lib/typescript/organisms/chart/marks.d.ts.map +1 -1
- package/lib/typescript/organisms/chart/math.d.ts +69 -70
- package/lib/typescript/organisms/chart/math.d.ts.map +1 -1
- package/lib/typescript/organisms/chart/palette.d.ts +2 -2
- package/lib/typescript/organisms/chart/palette.d.ts.map +1 -1
- package/lib/typescript/organisms/imperativeBridge.d.ts +4 -4
- package/lib/typescript/organisms/useSlides.d.ts +8 -16
- package/lib/typescript/organisms/useSlides.d.ts.map +1 -1
- package/lib/typescript/safe-area/SafeAreaUIProvider.d.ts +9 -7
- package/lib/typescript/safe-area/SafeAreaUIProvider.d.ts.map +1 -1
- package/lib/typescript/safe-area/index.d.ts.map +1 -1
- package/lib/typescript/theme/KeyboardAvoidance.d.ts +62 -0
- package/lib/typescript/theme/KeyboardAvoidance.d.ts.map +1 -0
- package/lib/typescript/theme/NativeOverlay.d.ts +43 -0
- package/lib/typescript/theme/NativeOverlay.d.ts.map +1 -0
- package/lib/typescript/theme/UIProvider.d.ts +38 -20
- package/lib/typescript/theme/UIProvider.d.ts.map +1 -1
- package/lib/typescript/theme/colors.d.ts +13 -13
- package/lib/typescript/theme/colors.d.ts.map +1 -1
- package/lib/typescript/theme/createStyles.d.ts +20 -14
- package/lib/typescript/theme/createStyles.d.ts.map +1 -1
- package/lib/typescript/theme/createTheme.d.ts +5 -5
- package/lib/typescript/theme/index.d.ts +1 -1
- package/lib/typescript/theme/index.d.ts.map +1 -1
- package/lib/typescript/theme/insets.d.ts +1 -1
- package/lib/typescript/theme/insets.d.ts.map +1 -1
- package/lib/typescript/theme/labels.d.ts +57 -2
- package/lib/typescript/theme/labels.d.ts.map +1 -1
- package/lib/typescript/theme/palettes.d.ts +25 -19
- package/lib/typescript/theme/palettes.d.ts.map +1 -1
- package/lib/typescript/theme/tokens.d.ts +15 -8
- package/lib/typescript/theme/tokens.d.ts.map +1 -1
- package/lib/typescript/theme/types.d.ts +7 -7
- package/lib/typescript/theme/types.d.ts.map +1 -1
- package/lib/typescript/theme/useKeyboardField.d.ts +17 -0
- package/lib/typescript/theme/useKeyboardField.d.ts.map +1 -0
- package/lib/typescript/theme/useReduceMotion.d.ts +7 -0
- package/lib/typescript/theme/useReduceMotion.d.ts.map +1 -0
- package/llms.txt +4 -4
- package/package.json +15 -14
- package/registry/alert-provider.json +4 -3
- package/registry/alert.json +3 -2
- package/registry/avatar-header.json +1 -1
- package/registry/avatar.json +3 -2
- package/registry/badge.json +1 -1
- package/registry/bottom-sheet.json +1 -1
- package/registry/button.json +3 -2
- package/registry/card.json +1 -1
- package/registry/chart.json +5 -5
- package/registry/checkbox.json +3 -2
- package/registry/core.json +31 -15
- package/registry/date-field.json +1 -1
- package/registry/date-picker.json +3 -2
- package/registry/divider.json +1 -1
- package/registry/empty-state.json +4 -2
- package/registry/fab.json +3 -2
- package/registry/form-actions.json +3 -2
- package/registry/gradient.json +1 -1
- package/registry/icon-button.json +3 -2
- package/registry/image.json +1 -1
- package/registry/index.json +79 -61
- package/registry/info-row.json +1 -1
- package/registry/input.json +5 -1
- package/registry/key-value-row.json +1 -1
- package/registry/list.json +3 -1
- package/registry/manifest.json +3 -1
- package/registry/modal.json +1 -1
- package/registry/navigation-bar.json +1 -1
- package/registry/option-card.json +3 -2
- package/registry/option-wheel.json +1 -1
- package/registry/pressable-scale.json +3 -2
- package/registry/reorderable-list.json +1 -1
- package/registry/screen.json +1 -1
- package/registry/search-list.json +7 -1
- package/registry/segmented-control.json +1 -1
- package/registry/select.json +1 -1
- package/registry/shiny-text.json +1 -1
- package/registry/skeleton.json +3 -2
- package/registry/slides.json +2 -2
- package/registry/spinner.json +1 -1
- package/registry/stepper.json +1 -1
- package/registry/steps.json +1 -1
- package/registry/symmetric-grid.json +1 -1
- package/registry/theme-toggle.json +1 -1
- package/registry/timeline.json +1 -1
- package/registry/title.json +1 -1
- package/registry/toast-provider.json +2 -2
- package/registry/toast.json +1 -1
- package/registry/transition.json +1 -1
- package/registry/wizard.json +1 -1
- package/src/atoms/Avatar.tsx +117 -26
- package/src/atoms/Badge.tsx +20 -9
- package/src/atoms/Button.tsx +102 -30
- package/src/atoms/Card.tsx +23 -3
- package/src/atoms/Checkbox.tsx +49 -12
- package/src/atoms/Divider.tsx +34 -4
- package/src/atoms/EmptyState.tsx +63 -16
- package/src/atoms/Fab.tsx +56 -9
- package/src/atoms/Gradient.tsx +92 -41
- package/src/atoms/IconButton.tsx +27 -4
- package/src/atoms/Image.tsx +74 -28
- package/src/atoms/Input.tsx +129 -19
- package/src/atoms/KeyValueRow.tsx +72 -28
- package/src/atoms/PressableScale.tsx +31 -7
- package/src/atoms/ShinyText.tsx +31 -31
- package/src/atoms/Skeleton.tsx +37 -17
- package/src/atoms/Spinner.tsx +87 -24
- package/src/atoms/Text.tsx +66 -6
- package/src/atoms/Transition.tsx +40 -44
- package/src/atoms/index.ts +3 -3
- package/src/atoms/inputValidation.ts +59 -0
- package/src/icons/Icon.tsx +4 -4
- package/src/icons/defaultIcons.tsx +445 -22
- package/src/icons/index.ts +2 -2
- package/src/icons/types.ts +26 -4
- package/src/molecules/AvatarHeader.tsx +88 -34
- package/src/molecules/FormActions.tsx +36 -6
- package/src/molecules/InfoRow.tsx +39 -12
- package/src/molecules/OptionCard.tsx +55 -20
- package/src/molecules/SegmentedControl.tsx +135 -15
- package/src/molecules/Stepper.tsx +73 -19
- package/src/molecules/Steps.tsx +121 -39
- package/src/molecules/SymmetricGrid.tsx +28 -12
- package/src/organisms/Alert.tsx +97 -26
- package/src/organisms/AlertProvider.tsx +13 -13
- package/src/organisms/BottomSheet.tsx +115 -43
- package/src/organisms/Chart.tsx +193 -164
- package/src/organisms/DateField.tsx +40 -15
- package/src/organisms/DatePicker.tsx +53 -32
- package/src/organisms/List.tsx +64 -15
- package/src/organisms/Modal.tsx +122 -63
- package/src/organisms/NavigationBar.tsx +73 -23
- package/src/organisms/OptionWheel.tsx +70 -66
- package/src/organisms/ReorderableList.tsx +49 -27
- package/src/organisms/Screen.tsx +79 -42
- package/src/organisms/SearchList.tsx +84 -20
- package/src/organisms/Select.tsx +63 -29
- package/src/organisms/Slides.tsx +63 -44
- package/src/organisms/ThemeToggle.tsx +15 -6
- package/src/organisms/Timeline.tsx +79 -62
- package/src/organisms/Toast.tsx +50 -15
- package/src/organisms/ToastProvider.tsx +17 -13
- package/src/organisms/Wizard.tsx +58 -21
- package/src/organisms/chart/frame.tsx +35 -35
- package/src/organisms/chart/marks.tsx +53 -53
- package/src/organisms/chart/math.ts +93 -94
- package/src/organisms/chart/palette.ts +28 -28
- package/src/organisms/imperativeBridge.ts +5 -5
- package/src/organisms/useSlides.ts +66 -31
- package/src/safe-area/SafeAreaUIProvider.tsx +9 -70
- package/src/safe-area/index.ts +1 -0
- package/src/theme/KeyboardAvoidance.tsx +216 -0
- package/src/theme/NativeOverlay.tsx +269 -0
- package/src/theme/UIProvider.tsx +109 -46
- package/src/theme/colors.ts +21 -21
- package/src/theme/createStyles.ts +23 -19
- package/src/theme/createTheme.ts +6 -6
- package/src/theme/index.ts +1 -1
- package/src/theme/insets.ts +1 -1
- package/src/theme/labels.ts +85 -2
- package/src/theme/palettes.ts +33 -25
- package/src/theme/tokens.ts +27 -13
- package/src/theme/types.ts +7 -7
- package/src/theme/useKeyboardField.ts +33 -0
- package/src/theme/useReduceMotion.ts +27 -0
package/AGENTS.md
CHANGED
|
@@ -66,10 +66,12 @@ over hand-rolling the same thing with `View` + `TextInput` + `TouchableOpacity`
|
|
|
66
66
|
| 55 | 0.83.10 | 19.2.0 | verified in CI |
|
|
67
67
|
| 56 | 0.85.3 | 19.2.3 | verified in CI |
|
|
68
68
|
| 57 | 0.86.2 | 19.2.3 | verified in CI |
|
|
69
|
+
| 58 | 0.88.1 | 19.3.0 | verified in CI |
|
|
69
70
|
|
|
70
71
|
Peers: `react >=19.1.0`, `react-native >=0.81.0`. Bare React Native in that
|
|
71
72
|
range works — nothing here imports Expo. `react-native-safe-area-context
|
|
72
|
-
>=5.4.0` is
|
|
73
|
+
>=5.4.0` is a **required** peer (no dependencies of its own; Expo apps already
|
|
74
|
+
have it).
|
|
73
75
|
|
|
74
76
|
Do not add a version constraint of your own to `package.json`; `pnpm add
|
|
75
77
|
orn-ui` (or npm/yarn/bun equivalent) is enough on any SDK in the table.
|
|
@@ -115,40 +117,43 @@ The subpath is the component name in kebab-case (`SearchList` →
|
|
|
115
117
|
## Setup: one provider, once
|
|
116
118
|
|
|
117
119
|
```tsx
|
|
118
|
-
import {
|
|
120
|
+
import { UIProvider } from 'orn-ui/theme';
|
|
119
121
|
|
|
120
122
|
export default function App() {
|
|
121
123
|
return (
|
|
122
|
-
<
|
|
124
|
+
<UIProvider defaultMode="system">
|
|
123
125
|
<RootNavigator />
|
|
124
|
-
</
|
|
126
|
+
</UIProvider>
|
|
125
127
|
);
|
|
126
128
|
}
|
|
127
129
|
```
|
|
128
130
|
|
|
129
|
-
`
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
131
|
+
`UIProvider` measures the safe-area insets itself with
|
|
132
|
+
`react-native-safe-area-context` (required peer; `theme/UIProvider.tsx` is the
|
|
133
|
+
only file importing it) and mounts `<SafeAreaProvider>` itself
|
|
134
|
+
(`mountSafeAreaProvider={false}` if the app already has one). `Modal` and
|
|
135
|
+
`BottomSheet` remeasure inside their own native window. Pass `insets` only to
|
|
136
|
+
override the measured values (tests, screenshots). `SafeAreaUIProvider` from
|
|
137
|
+
`orn-ui/safe-area` is a deprecated alias of `UIProvider`.
|
|
138
|
+
|
|
139
|
+
Overlays (`Alert`, `BottomSheet`, `Modal`, `Select`, and `DateField` through
|
|
140
|
+
`Modal`) never render React Native's `Modal` directly: they go through
|
|
141
|
+
`theme/NativeOverlay.tsx`. iOS presents one native modal at a time from the
|
|
142
|
+
root, so a second sibling `<Modal>` was silently dropped (an `showAlert()`
|
|
143
|
+
over an open sheet, an alert right after closing a sheet). On iOS a new
|
|
144
|
+
overlay is drawn as a layer inside the topmost presented one, or waits until
|
|
145
|
+
a closing one is gone; nested overlays stay native. New overlay components
|
|
146
|
+
must use `NativeOverlay` too (with `closing` while their exit animation plays).
|
|
145
147
|
Every hook (`useTheme`, `useColors`, `useThemeMode`, `useIcons`, `useInsets`,
|
|
146
148
|
`useLabels`) **throws** outside the provider — mount it at the app root.
|
|
147
149
|
|
|
148
150
|
`UIProviderProps`: `theme?: ThemePair`, `defaultMode?: 'system' | 'light' |
|
|
149
151
|
'dark'` (uncontrolled), `mode` + `onModeChange` (controlled), `icons?:
|
|
150
152
|
IconRenderer`, `insets?: EdgeInsets`, `labels?: Partial<Labels>`,
|
|
151
|
-
`allowFontScaling?: boolean` (default `false`)
|
|
153
|
+
`allowFontScaling?: boolean` (default `false`), `mountSafeAreaProvider?:
|
|
154
|
+
boolean` (default `true`), `keyboardAvoidance?: boolean` (default `true`: the
|
|
155
|
+
root provider moves the app up just enough to keep the focused `Input`,
|
|
156
|
+
label and error included, above the keyboard — no Screen or ScrollView needed).
|
|
152
157
|
|
|
153
158
|
## Component catalog and props
|
|
154
159
|
|
|
@@ -163,46 +168,46 @@ hex in component styles, use `useColors()`.
|
|
|
163
168
|
| `Title` `Subtitle` `Body` `Caption` | `orn-ui/title` `/subtitle` `/body` `/caption` | extends RN `TextProps`; `color?`, `align?: 'left'\|'center'\|'right'` |
|
|
164
169
|
| `Button` | `orn-ui/button` | `title`, `onPress`, `variant?: 'primary'\|'secondary'\|'outline'\|'ghost'\|'link'\|'destructive'`, `size?: 'sm'\|'md'\|'lg'`, `loading?`, `disabled?`, `leftIconName?`, `rightIconName?`, `leftIcon?`, `rightIcon?`, `iconColor?`, `textStyle?`, `accessibilityLabel?`, `testID?` |
|
|
165
170
|
| `IconButton` | `orn-ui/icon-button` | `accessibilityLabel` (required), `iconName?`, `icon?`, `onPress?`, `size?`, `color?`, `disabled?`, `testID?` |
|
|
166
|
-
| `Input` | `orn-ui/input` | extends RN `TextInputProps`; `label?`, `required
|
|
171
|
+
| `Input` | `orn-ui/input` | extends RN `TextInputProps`; `ref` → `InputHandle` (TextInput + `validate()`); `label?`, `required?` (also validates), `error?` (wins over validation), `rules?: {minLength?, maxLength?, pattern?, validate?}`, `validateOn?: 'blur'\|'change'\|'submit'` (blur), `onValidate?`, `leftIconName?`, `rightIconName?`, `onRightIconPress?`, `rightIconAccessibilityLabel?` (labels.clear), `isPassword?`, `isLoading?`, `containerStyle?`; `editable={false}` renders read-only (no fill) |
|
|
167
172
|
| `Checkbox` | `orn-ui/checkbox` | `value`, `onValueChange`, `label?`, `color?`, `disabled?`, `testID?` |
|
|
168
173
|
| `Badge` | `orn-ui/badge` | `label`, `variant?: 'success'\|'error'\|'warning'\|'info'\|'neutral'`, `backgroundColor?`, `textColor?` |
|
|
169
174
|
| `Card` | `orn-ui/card` | extends `ViewProps`; `children` |
|
|
170
|
-
| `Divider` | `orn-ui/divider` | `style?`, `testID?` |
|
|
171
|
-
| `Gradient` | `orn-ui/gradient` | `colors: string[]`, `direction?: vertical\|horizontal\|diagonal\|diagonal-reverse`, `steps
|
|
172
|
-
| `Avatar` | `orn-ui/avatar` | `
|
|
173
|
-
| `Image` | `orn-ui/image` | `source`, `width?`, `height?`, `resizeMode?`, `radius?`, `loading?: ReactNode\|boolean`, `fallback?`, `priority?: 'low'\|'normal'\|'high'`, `onLoadEnd
|
|
175
|
+
| `Divider` | `orn-ui/divider` | `orientation?: 'horizontal'\|'vertical'`, `spacing?` (spacing token, margin on both sides), `style?`, `testID?` |
|
|
176
|
+
| `Gradient` | `orn-ui/gradient` | `colors: string[]`, `direction?: vertical\|horizontal\|diagonal\|diagonal-reverse`, `steps?` (48 bands per segment), `children?`, `style?`, `testID?` |
|
|
177
|
+
| `Avatar` | `orn-ui/avatar` | `size?` (44), `source?` (photo; falls back to initials on error), `name?` (initials + accessible name), `iconName?` (user), `backgroundColor?`, `color?`, `children?` (overrides all), `accessibilityLabel?`; also exports `initialsOf(name)` |
|
|
178
|
+
| `Image` | `orn-ui/image` | `source`, `width?`, `height?`, `resizeMode?`, `radius?`, `loading?: ReactNode\|boolean`, `fallback?`, `priority?: 'low'\|'normal'\|'high'`, `accessibilityLabel?` (omit = decorative), `onLoadEnd?` (success or failure), `onError?` |
|
|
174
179
|
| `prefetchImage` | `orn-ui/prefetch-image` | `(url: string) => Promise<boolean>` (RN `Image.prefetch`) — warm the cache before navigating |
|
|
175
|
-
| `Spinner` | `orn-ui/spinner` | `size?: 'small'\|'large'`, `color?`, `text?`, `fullscreen?`, `variant?: 'native'\|'dots'\|'ring'`, `indicator?` |
|
|
180
|
+
| `Spinner` | `orn-ui/spinner` | `size?: 'small'\|'large'`, `color?`, `text?`, `fullscreen?`, `variant?: 'native'\|'dots'\|'ring'`, `indicator?`, `logo?` (node above the indicator, e.g. app logo), `accessibilityLabel?` (text ?? labels.loading) |
|
|
176
181
|
| `Skeleton` | `orn-ui/skeleton` | `width?`, `height?`, `variant?: 'rect'\|'text'\|'circle'`, `radius?`, `lines?`, `lastLineWidth?`, `animated?` |
|
|
177
182
|
| `Transition` | `orn-ui/transition` | `children`, `visible?`, `preset?: 'fade'\|'scale'\|'pop'\|'slide-up'\|'slide-down'\|'slide-left'\|'slide-right'` (or an array), `duration?`, `delay?`, `distance?`, `spring?`, `appear?`, `keepMounted?`, `value?: Animated.Value`, `onEntered?`, `onExited?` |
|
|
178
183
|
| `ShinyText` | `orn-ui/shiny-text` | `text`, `duration?` (2400), `delay?` (600), `spread?` (0.28), `animated?`, `color?` (theme `textLight`), `shineColor?` (theme `primary`), `align?: 'left'\|'center'\|'right'` |
|
|
179
184
|
| `useReduceMotion` | `orn-ui/use-reduce-motion` | `(): boolean` — respects the OS setting |
|
|
180
|
-
| `EmptyState` | `orn-ui/empty-state` | `title?`, `description?`, `iconName?`, `icon
|
|
185
|
+
| `EmptyState` | `orn-ui/empty-state` | `title?`, `description?`, `iconName?`, `icon?`, `action?: {label, onPress, variant?}` |
|
|
181
186
|
| `KeyValueRow` | `orn-ui/key-value-row` | `label`, `value`, `labelStyle?`, `valueStyle?` |
|
|
182
|
-
| `Fab` | `orn-ui/fab` | `onPress`, `accessibilityLabel` (required), `iconName?`, `icon?`, `size?`, `bottom?`, `right?`, `color?` |
|
|
187
|
+
| `Fab` | `orn-ui/fab` | `onPress`, `accessibilityLabel` (required), `iconName?`, `icon?`, `size?`, `bottom?`, `right?`, `safeArea?` (true), `color?` |
|
|
183
188
|
| `PressableScale` | `orn-ui/pressable-scale` | extends `PressableProps`; `children`, `scaleTo?` |
|
|
184
189
|
|
|
185
190
|
### Molecules
|
|
186
191
|
|
|
187
192
|
| Component | Subpath | Key props |
|
|
188
193
|
| --- | --- | --- |
|
|
189
|
-
| `Stepper` | `orn-ui/stepper` | `value: string`, `onChangeText`, `onIncrement`, `onDecrement`, `size?: 'sm'\|'md'\|'lg'`, `block?`, `editable?`, `min?`, `max?`, `allowDecimals?`, `incrementAccessibilityLabel?`, `decrementAccessibilityLabel?` |
|
|
194
|
+
| `Stepper` | `orn-ui/stepper` | `value: string`, `onChangeText`, `onIncrement`, `onDecrement`, `size?: 'sm'\|'md'\|'lg'`, `block?`, `editable?`, `min?`, `max?`, `allowDecimals?`, `accessibilityLabel?` (labels.quantity), `incrementAccessibilityLabel?`, `decrementAccessibilityLabel?` (labels) |
|
|
190
195
|
| `sanitizeNumeric` | `orn-ui/sanitize-numeric` | helper for numeric text input |
|
|
191
196
|
| `OptionCard` | `orn-ui/option-card` | `label`, `isSelected`, `onPress`, `description?`, `iconName?`, `disabled?`, `layout?: 'vertical'\|'horizontal'` |
|
|
192
|
-
| `InfoRow` | `orn-ui/info-row` | `icon: IconName`, `label`, `value: string\|null\|undefined`, `placeholder` |
|
|
193
|
-
| `FormActions` | `orn-ui/form-actions` | `onSecondaryPress`, `primaryLabel?`, `onPrimaryPress?`, `primaryDisabled?`, `primaryLoading?`, `primaryLeftIconName?`, `secondaryLabel?` |
|
|
194
|
-
| `AvatarHeader` | `orn-ui/avatar-header` | `title`, `subtitle?`, `iconName?`, `iconColor?`, `initials?` |
|
|
195
|
-
| `SegmentedControl` | `orn-ui/segmented-control` | `options: {value,label,disabled?}[]`, `value`, `onChange
|
|
196
|
-
| `Steps` | `orn-ui/steps` | `steps: {label,description?}[]`, `current`, `orientation?: 'horizontal'\|'vertical'`, `completedIndicator?: 'check'\|'number'`, `onStepPress?` |
|
|
197
|
-
| `SymmetricGrid` | `orn-ui/symmetric-grid` | `data`, `renderItem`, `keyExtractor`, `columns?` (2), `gap?`, `balanceLastRow?` |
|
|
197
|
+
| `InfoRow` | `orn-ui/info-row` | `icon: IconName`, `label`, `value: string\|null\|undefined`, `placeholder`, `testID?` |
|
|
198
|
+
| `FormActions` | `orn-ui/form-actions` | `onSecondaryPress`, `primaryLabel?`, `onPrimaryPress?`, `primaryDisabled?`, `primaryLoading?`, `primaryLeftIconName?`, `secondaryLabel?`, `testID?` |
|
|
199
|
+
| `AvatarHeader` | `orn-ui/avatar-header` | `title`, `subtitle?`, `caption?`, `iconName?`, `iconColor?`, `initials?`, `testID?` (no outer margin) |
|
|
200
|
+
| `SegmentedControl` | `orn-ui/segmented-control` | `options: {value,label,disabled?}[]`, `value`, `onChange` (not called for the selected segment), `disabled?`, `testID?` |
|
|
201
|
+
| `Steps` | `orn-ui/steps` | `steps: {label,description?}[]`, `current`, `orientation?: 'horizontal'\|'vertical'`, `completedIndicator?: 'check'\|'number'`, `onStepPress?`, `testID?` |
|
|
202
|
+
| `SymmetricGrid` | `orn-ui/symmetric-grid` | `data`, `renderItem`, `keyExtractor`, `columns?` (2), `gap?`, `balanceLastRow?`, `testID?` |
|
|
198
203
|
|
|
199
204
|
### Organisms
|
|
200
205
|
|
|
201
206
|
| Component | Subpath | Key props |
|
|
202
207
|
| --- | --- | --- |
|
|
203
|
-
| `Screen` | `orn-ui/screen` | `children`, `scrollable?`, `edges?: ('top'\|'bottom')[]`, `contentContainerStyle?`, `keyboardAvoiding?` (default `true
|
|
208
|
+
| `Screen` | `orn-ui/screen` | `children`, `header?` (fixed bar: stays put while the content scrolls or moves up for the keyboard), `scrollable?`, `edges?: ('top'\|'bottom')[]`, `contentContainerStyle?`, `keyboardAvoiding?` (default `true`: moves only the content) |
|
|
204
209
|
| `Modal` | `orn-ui/modal` | `visible`, `children`, `onClose?`, `title?`, `footer?`, `variant?: 'full'\|'overlay'\|'fullScreen'`, `scrollable?`, `containerStyle?`, `contentStyle?`, `closeAccessibilityLabel?` |
|
|
205
|
-
| `BottomSheet` | `orn-ui/bottom-sheet` | `visible`, `onClose`, `children`, `title?`, `footer?`, `footerPlacement?: 'fixed'\|'scroll'\|'hide-with-keyboard'`, `scrollable?`, `draggable?`, `maxHeight?` |
|
|
210
|
+
| `BottomSheet` | `orn-ui/bottom-sheet` | `visible`, `onClose`, `children`, `title?`, `footer?`, `footerPlacement?: 'fixed'\|'scroll'\|'hide-with-keyboard'`, `scrollable?`, `draggable?`, `maxHeight?`, `closeAccessibilityLabel?` (labels.close), `inline?` |
|
|
206
211
|
| `Select` | `orn-ui/select` | `options: {label,value,iconName?,emoji?,disabled?}[]`, `selectedValue`, `onSelect`, `label?`, `required?`, `placeholder?`, `error?`, `isLoading?`, `disabled?`, `searchable?`, `searchPlaceholder?`, `maxHeight?` (280), `onOpenChange?` |
|
|
207
212
|
| `Timeline` | `orn-ui/timeline` | `items: {label,iconName?,emoji?,status?: 'done'\|'pending'}[]`, `curve?` (28, 0 = straight), `spacing?` (84), `startSide?: 'left'\|'right'` (right), `glow?` (true), `onItemPress?`, `advance?: 'free'\|'sequential'\|'revisit'` (free), `selectedIndex?`, `duration?` (420) |
|
|
208
213
|
| `OptionWheel` | `orn-ui/option-wheel` | `options: {label,value,disabled?}[]`, `selectedValue`, `onSelect`, `label?`, `accessibilityLabel?`, `visibleCount?` (5, forced odd), `itemHeight?` (44), `unit?`, `perspective?` (true), `variant?: 'window'\|'spotlight'`, `textColor?`, `curveRadius?`, `curveFrom?: 'left'\|'right'` (left), `disabled?` |
|
|
@@ -210,8 +215,8 @@ hex in component styles, use `useColors()`.
|
|
|
210
215
|
| `SearchList` | `orn-ui/search-list` | everything in `List`, plus `searchValue`, `onSearchChange`, `searchPlaceholder?`, `searchIsLoading?`, `onScanPress?`, `extraActions?`, `header?`, `loadingMode?: 'replace'\|'overlay'`, `onLoadMore?`, `hasMore?`, `noMoreText?` |
|
|
211
216
|
| `ReorderableList` | `orn-ui/reorderable-list` | `data`, `keyExtractor`, `itemHeight`, `renderItem(item, index, dragging)`, `onReorder(next)`, `onDragStart?`, `onDragEnd?`, `disabled?` |
|
|
212
217
|
| `Slides` | `orn-ui/slides` | `data`, `keyExtractor`, `renderItem(item, index)`, `background?(item, index): string\|string[]`, `gradientDirection?`, `orientation?: horizontal\|vertical`, `indicators?: dots\|numbers\|none`, `indicatorPlacement?: overlay\|outside`, `loop?`, `autoPlay?`, `interval?`, `showAutoPlayToggle?`, `spacing?`, `index?`, `defaultIndex?`, `onIndexChange?`, `height?`, `swipeEnabled?`, `slideStyle?` |
|
|
213
|
-
| `Chart` | `orn-ui/chart` | `type: 'bar'\|'line'\|'area'\|'pie'\|'donut'\|'radar'`, `data: Record<string, string\|number\|null>[]`, `series: {key,label?,color?}[]`, `xKey?` ('x'), `accessibilityLabel` (required), `height?` (220), `legend?: 'auto'\|'none'\|'static'\|'toggle'`, `hiddenKeys?`/`defaultHiddenKeys?`/`onHiddenKeysChange?`, `filters?: {key,options,value,onChange}[]`, `selected?`/`onSelect?`, `selectBy?(row,i): string`, `window?` (last N rows), `tooltip?`, `formatValue?`, `animate
|
|
214
|
-
| `Alert` | `orn-ui/alert` | `visible`, `title`, `message?`, `type?: 'success'\|'error'\|'warning'\|'info'\|'question'`, `buttons?`, `confirmText?`, `cancelText?`, `onConfirm?`, `onCancel?`, `onClose?`, `inline?` |
|
|
218
|
+
| `Chart` | `orn-ui/chart` | `type: 'bar'\|'line'\|'area'\|'pie'\|'donut'\|'radar'`, `data: Record<string, string\|number\|null>[]`, `series: {key,label?,color?}[]`, `xKey?` ('x'), `accessibilityLabel` (required), `height?` (220), `legend?: 'auto'\|'none'\|'static'\|'toggle'`, `hiddenKeys?`/`defaultHiddenKeys?`/`onHiddenKeysChange?`, `filters?: {key,options,value,onChange}[]`, `selected?`/`onSelect?`, `selectBy?(row,i): string`, `window?` (last N rows), `tooltip?`, `formatValue?`, `animate?` (off with Reduce Motion), `emptyText?`, `surfaceColor?` (surfaceRaised; donut hole + point rings); bar: `orientation?`, `stacked?`, `barRadius?`; line/area: `smooth?`, `thickness?`, `dots?`, `fillOpacity?`, `stacked?`, `decimate?: number\|false` (LTTB, auto from width); cartesian: `domain?: [min,max]\|'sticky'`, `grid?`, `ticks?`, `xAxis?`, `yAxis?`; pie/donut: `innerRadius?`, `sliceLabels?`; radar: `domain?`, `levels?`, `fill?` |
|
|
219
|
+
| `Alert` | `orn-ui/alert` | `visible`, `title`, `message?`, `type?: 'success'\|'error'\|'warning'\|'info'\|'question'`, `buttons?`, `confirmText?`, `cancelText?`, `onConfirm?`, `onCancel?`, `destructive?`, `onClose?`, `inline?` |
|
|
215
220
|
| `AlertProvider` + `useAlert` | `orn-ui/alert-provider`, `orn-ui/use-alert` | mount once; `showAlert(opts)`, `showConfirm(opts)`, `hideAlert()` also work outside React (`orn-ui/show-alert`, `/show-confirm`, `/hide-alert`) |
|
|
216
221
|
| `Toast` | `orn-ui/toast` | `title`, `message?`, `variant?: 'success'\|'error'\|'warning'\|'info'`, `onPress?`, `onDismiss?`, `hideCloseButton?` |
|
|
217
222
|
| `ToastProvider` + `useToast` | `orn-ui/toast-provider`, `orn-ui/use-toast` | provider props `position?: 'top'\|'bottom'`, `maxVisible?`, `defaultDuration?`; imperative `showToast`/`hideToast`/`hideAllToasts` subpaths |
|
|
@@ -219,13 +224,17 @@ hex in component styles, use `useColors()`.
|
|
|
219
224
|
| `DateField` | `orn-ui/date-field` | the `DatePicker` props behind an input: `label?`, `required?`, `placeholder?`, `error?`, `disabled?`, `format?`, `modalTitle?`, `onClear?` (renders the clear button), `clearLabel?` |
|
|
220
225
|
| `Wizard` | `orn-ui/wizard` | `steps: {label,description?,content,canGoNext?}[]`, `current?`, `onStepChange?`, `onFinish?`, `orientation?`, `allowStepNavigation?`, `backLabel?`, `nextLabel?`, `finishLabel?`, `scrollableContent?`, `animated?` |
|
|
221
226
|
| `ThemeToggle` | `orn-ui/theme-toggle` | `labels?: Partial<Record<'system'\|'light'\|'dark', string>>` |
|
|
222
|
-
| `NavigationBar` | `orn-ui/navigation-bar` | `items: {key,label,iconName?,badge?}[]`, `activeKey`, `onChange`, `position?: 'bottom'\|'top'`, `showLabels?`, `safeArea?` |
|
|
227
|
+
| `NavigationBar` | `orn-ui/navigation-bar` | `items: {key,label,iconName?,badge?}[]`, `activeKey`, `onChange`, `position?: 'bottom'\|'top'`, `showLabels?`, `safeArea?`, `hideOnKeyboard?` (default `true`, Android) |
|
|
223
228
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
`
|
|
229
|
+
Built-in icons (`BuiltInIconName`, zero-dependency glyphs; the list is also
|
|
230
|
+
exported as `BUILT_IN_ICON_NAMES`): `check`, `close`, `plus`, `minus`,
|
|
231
|
+
`search`, `scan`, `menu`, `more`, `home`, `settings`, `user`, `trash`, `edit`,
|
|
232
|
+
`share`, `heart`, `star`, `eye`, `eye-off`, `chevron-left`, `chevron-right`,
|
|
233
|
+
`chevron-up`, `chevron-down`, `alert`, `warning`, `info`, `question`.
|
|
227
234
|
Pass a custom `icons: IconRenderer` to `UIProvider` to swap in
|
|
228
|
-
`lucide-react-native`, `@expo/vector-icons` or anything else
|
|
235
|
+
`lucide-react-native`, `@expo/vector-icons` or anything else; `iconName` then
|
|
236
|
+
accepts any name your renderer knows (`IconName` is the built-ins plus any
|
|
237
|
+
string).
|
|
229
238
|
|
|
230
239
|
## Theming
|
|
231
240
|
|
|
@@ -241,11 +250,12 @@ Each accent (`primary`, `secondary`, `success`, `error`, `warning`) has four
|
|
|
241
250
|
roles that are not interchangeable: `primary` (solid fill), `onPrimary`
|
|
242
251
|
(content on that fill), `primarySoft` (tinted background), `primaryText`
|
|
243
252
|
(accent text on `surface`/`background`). Neutrals: `background`, `surface`,
|
|
253
|
+
`surfaceRaised` (a surface on a surface, e.g. Card: lighter in dark),
|
|
244
254
|
`text`, `textLight`, `border`, `inputBackground`, `overlay`, `scrim`,
|
|
245
255
|
`skeleton`, `white`, `black`.
|
|
246
256
|
|
|
247
257
|
Tokens: `spacing` (xxs 2 … xxxl 32), `radius` (none … full 9999), `fontSize`
|
|
248
|
-
(xs 11 … xxl 24), `fontWeight`, `lineHeight
|
|
258
|
+
(xs 11 … xxl 24), `fontWeight`, `lineHeight` (sm 16 … xl 30), `letterSpacing` (tight/normal/wide), `duration` (fast/base/slow),
|
|
249
259
|
`shadow`. Use them in app styles instead of magic numbers:
|
|
250
260
|
|
|
251
261
|
```tsx
|
|
@@ -262,20 +272,25 @@ over `StyleSheet.create` in app code that uses orn-ui.
|
|
|
262
272
|
All built-in strings live in one `labels` object on `UIProvider`
|
|
263
273
|
(`close`, `cancel`, `confirm`, `loading`, `loadingMore`, `noResultsTitle`,
|
|
264
274
|
`noResultsDescription`, `search`, `selectPlaceholder`, `months`,
|
|
265
|
-
`weekdaysShort`, `selectDate`, `clear`
|
|
275
|
+
`weekdaysShort`, `selectDate`, `clear`, `showPassword`, `hidePassword`,
|
|
276
|
+
`required`) — localise there, not per component.
|
|
266
277
|
|
|
267
278
|
## Rules and common mistakes
|
|
268
279
|
|
|
269
280
|
1. **Never stack safe-area insets.** A screen above a `NavigationBar` uses
|
|
270
281
|
`<Screen edges={['top']}>`; a full screen uses `<Screen>`. Padding a list for
|
|
271
282
|
`insets.bottom` on top of a tab bar double-counts the gesture bar.
|
|
272
|
-
2. **
|
|
273
|
-
|
|
274
|
-
|
|
283
|
+
2. **The keyboard is handled once.** A focused `Input` always stays visible
|
|
284
|
+
above the keyboard. Inside a `Screen`, only the content moves (put the back
|
|
285
|
+
button / title in `header` so it stays fixed); outside one, the root
|
|
286
|
+
`UIProvider` moves the whole app as a fallback.
|
|
287
|
+
Don't add your own `KeyboardAvoidingView` around orn-ui inputs; if the app
|
|
288
|
+
already manages the keyboard, set `keyboardAvoidance={false}` on the
|
|
289
|
+
provider (Screen then falls back to its own `KeyboardAvoidingView`).
|
|
275
290
|
3. **Don't nest a virtualized list in a ScrollView.** Inside `Wizard`, set
|
|
276
291
|
`scrollableContent={false}` on that step.
|
|
277
292
|
4. **Hooks require the provider.** `useTheme()` and friends throw outside
|
|
278
|
-
`UIProvider
|
|
293
|
+
`UIProvider`.
|
|
279
294
|
5. **No hardcoded colors.** Read `useColors()` / `theme.colors`; the palettes
|
|
280
295
|
are contrast-checked (WCAG AA 4.5:1) in both schemes and hardcoding breaks
|
|
281
296
|
dark mode silently.
|
package/README.md
CHANGED
|
@@ -82,13 +82,9 @@ const theme = createTheme({ brand: '#7c3aed' });
|
|
|
82
82
|
<UIProvider theme={theme}>{children}</UIProvider>;
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
const insets = useSafeAreaInsets();
|
|
90
|
-
<UIProvider insets={insets}>{children}</UIProvider>;
|
|
91
|
-
```
|
|
85
|
+
Safe-area insets are measured by `UIProvider` itself:
|
|
86
|
+
`react-native-safe-area-context` is a required peer (Expo apps already have
|
|
87
|
+
it). Pass `insets` only to override them.
|
|
92
88
|
|
|
93
89
|
## Components
|
|
94
90
|
|
|
@@ -4,38 +4,110 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Avatar = void 0;
|
|
7
|
+
exports.initialsOf = initialsOf;
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _reactNative = require("react-native");
|
|
9
10
|
var _UIProvider = require("../theme/UIProvider");
|
|
11
|
+
var _Icon = require("../icons/Icon");
|
|
10
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
12
14
|
const styles = _reactNative.StyleSheet.create({
|
|
13
15
|
circle: {
|
|
14
16
|
justifyContent: 'center',
|
|
15
|
-
alignItems: 'center'
|
|
17
|
+
alignItems: 'center',
|
|
18
|
+
overflow: 'hidden'
|
|
16
19
|
}
|
|
17
20
|
});
|
|
18
21
|
|
|
22
|
+
/** "Ada Lovelace" → "AL", "ada" → "A", " " → "". Handles characters outside the BMP. */
|
|
23
|
+
function initialsOf(name) {
|
|
24
|
+
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
25
|
+
if (words.length === 0) return '';
|
|
26
|
+
const first = Array.from(words[0])[0] ?? '';
|
|
27
|
+
const last = words.length > 1 ? Array.from(words[words.length - 1])[0] ?? '' : '';
|
|
28
|
+
return (first + last).toUpperCase();
|
|
29
|
+
}
|
|
30
|
+
|
|
19
31
|
/**
|
|
20
32
|
* Avatar
|
|
21
|
-
*
|
|
22
|
-
*
|
|
33
|
+
* Circle with a photo, initials or an icon. Used on the left of list rows
|
|
34
|
+
* or as a detail header (alongside AvatarHeader).
|
|
35
|
+
*
|
|
36
|
+
* Priority: `children` → `source` (if it loads) → initials of `name` →
|
|
37
|
+
* `iconName` → `user` icon. A broken photo doesn't leave an empty circle: it
|
|
38
|
+
* falls back to the initials.
|
|
39
|
+
*
|
|
40
|
+
* Gestalt:
|
|
41
|
+
* - Similarity: all avatars in a list share shape and size, so a column of
|
|
42
|
+
* people scans as a series even when it mixes photos, initials and icons.
|
|
43
|
+
* - Closure: the circle clips the photo (overflow hidden); initials and the
|
|
44
|
+
* icon scale with `size` so the content always stays inside.
|
|
45
|
+
*
|
|
46
|
+
* Accessibility: with `name` (or `accessibilityLabel`) it announces itself as
|
|
47
|
+
* an image with that name; with neither it is decorative.
|
|
23
48
|
*/
|
|
24
49
|
const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.memo)(({
|
|
25
50
|
size = 44,
|
|
51
|
+
source,
|
|
52
|
+
name,
|
|
53
|
+
iconName,
|
|
26
54
|
backgroundColor,
|
|
55
|
+
color,
|
|
27
56
|
children,
|
|
28
|
-
|
|
57
|
+
accessibilityLabel,
|
|
58
|
+
style,
|
|
59
|
+
testID
|
|
29
60
|
}) => {
|
|
30
61
|
const colors = (0, _UIProvider.useColors)();
|
|
62
|
+
const theme = (0, _UIProvider.useTheme)();
|
|
63
|
+
const allowFontScaling = (0, _UIProvider.useAllowFontScaling)();
|
|
64
|
+
const [failed, setFailed] = (0, _react.useState)(false);
|
|
65
|
+
const fg = color ?? colors.primaryText;
|
|
66
|
+
const label = accessibilityLabel ?? name;
|
|
67
|
+
const initials = name ? initialsOf(name) : '';
|
|
68
|
+
let content = children;
|
|
69
|
+
if (content == null) {
|
|
70
|
+
if (source && !failed) {
|
|
71
|
+
content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
|
|
72
|
+
source: source,
|
|
73
|
+
style: {
|
|
74
|
+
width: size,
|
|
75
|
+
height: size
|
|
76
|
+
},
|
|
77
|
+
onError: () => setFailed(true),
|
|
78
|
+
accessibilityIgnoresInvertColors: true
|
|
79
|
+
});
|
|
80
|
+
} else if (initials) {
|
|
81
|
+
content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
82
|
+
allowFontScaling: allowFontScaling,
|
|
83
|
+
numberOfLines: 1,
|
|
84
|
+
style: {
|
|
85
|
+
color: fg,
|
|
86
|
+
fontSize: Math.round(size * 0.4),
|
|
87
|
+
fontWeight: theme.tokens.fontWeight.semibold
|
|
88
|
+
},
|
|
89
|
+
children: initials
|
|
90
|
+
});
|
|
91
|
+
} else {
|
|
92
|
+
content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
|
|
93
|
+
name: iconName ?? 'user',
|
|
94
|
+
size: Math.round(size * 0.5),
|
|
95
|
+
color: fg
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
}
|
|
31
99
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
100
|
+
testID: testID,
|
|
101
|
+
accessible: !!label,
|
|
102
|
+
accessibilityRole: label ? 'image' : undefined,
|
|
103
|
+
accessibilityLabel: label,
|
|
32
104
|
style: [styles.circle, {
|
|
33
105
|
width: size,
|
|
34
106
|
height: size,
|
|
35
107
|
borderRadius: size / 2,
|
|
36
108
|
backgroundColor: backgroundColor || colors.primarySoft
|
|
37
109
|
}, style],
|
|
38
|
-
children:
|
|
110
|
+
children: content
|
|
39
111
|
});
|
|
40
112
|
});
|
|
41
113
|
Avatar.displayName = 'Avatar';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_UIProvider","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","styles","StyleSheet","create","circle","justifyContent","alignItems","Avatar","exports","memo","size","backgroundColor","children","style","colors","useColors","jsx","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_UIProvider","_Icon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","styles","StyleSheet","create","circle","justifyContent","alignItems","overflow","initialsOf","name","words","trim","split","filter","Boolean","length","first","Array","from","last","toUpperCase","Avatar","exports","memo","size","source","iconName","backgroundColor","color","children","accessibilityLabel","style","testID","colors","useColors","theme","useTheme","allowFontScaling","useAllowFontScaling","failed","setFailed","useState","fg","primaryText","label","initials","content","jsx","Image","width","height","onError","accessibilityIgnoresInvertColors","Text","numberOfLines","fontSize","Math","round","fontWeight","tokens","semibold","Icon","View","accessible","accessibilityRole","undefined","borderRadius","primarySoft","displayName"],"sourceRoot":"../../../src","sources":["atoms/Avatar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,23 +12,31 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
13
|
const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
14
14
|
badge: {
|
|
15
|
-
paddingHorizontal: theme.tokens.spacing.md
|
|
16
|
-
paddingVertical: theme.tokens.spacing.xs
|
|
15
|
+
paddingHorizontal: theme.tokens.spacing.md,
|
|
16
|
+
paddingVertical: theme.tokens.spacing.xs,
|
|
17
17
|
borderRadius: theme.tokens.radius.full,
|
|
18
18
|
alignSelf: 'flex-start'
|
|
19
19
|
},
|
|
20
20
|
text: {
|
|
21
21
|
fontSize: theme.tokens.fontSize.xs,
|
|
22
22
|
fontWeight: theme.tokens.fontWeight.bold,
|
|
23
|
-
letterSpacing:
|
|
23
|
+
letterSpacing: theme.tokens.letterSpacing.wide
|
|
24
24
|
}
|
|
25
25
|
}));
|
|
26
26
|
|
|
27
27
|
/**
|
|
28
28
|
* Badge
|
|
29
|
-
*
|
|
30
|
-
* info/neutral); `backgroundColor`/`textColor`
|
|
31
|
-
*
|
|
29
|
+
* Status pill. `variant` covers the common cases (success/error/warning/
|
|
30
|
+
* info/neutral); `backgroundColor`/`textColor` are for cases that don't
|
|
31
|
+
* fit the semantic set.
|
|
32
|
+
*
|
|
33
|
+
* Gestalt, similarity: all badges share shape, size and typography; only
|
|
34
|
+
* the color changes, and it changes by meaning (green = ok, red = error…),
|
|
35
|
+
* so a column of statuses scans at a glance. The meaning also goes in the
|
|
36
|
+
* text: never rely on color alone (color blindness).
|
|
37
|
+
* Every `*Soft`/`*Text` pair in the theme meets WCAG AA in light and dark;
|
|
38
|
+
* with custom colors, contrast is up to whoever passes them.
|
|
39
|
+
* A single line: a long label is truncated with "…" instead of deforming the pill.
|
|
32
40
|
*/
|
|
33
41
|
const Badge = exports.Badge = /*#__PURE__*/(0, _react.memo)(({
|
|
34
42
|
label,
|
|
@@ -44,8 +52,8 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.memo)(({
|
|
|
44
52
|
colors
|
|
45
53
|
} = theme;
|
|
46
54
|
const palette = {
|
|
47
|
-
// fg
|
|
48
|
-
//
|
|
55
|
+
// fg is the `*Text` role, not the full accent: the accent over its own
|
|
56
|
+
// tint gives ~2.2:1 in light — the label was unreadable.
|
|
49
57
|
success: {
|
|
50
58
|
bg: colors.successSoft,
|
|
51
59
|
fg: colors.successText
|
|
@@ -73,6 +81,7 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.memo)(({
|
|
|
73
81
|
}, style],
|
|
74
82
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
75
83
|
allowFontScaling: allowFontScaling,
|
|
84
|
+
numberOfLines: 1,
|
|
76
85
|
style: [styles.text, {
|
|
77
86
|
color: textColor ?? palette[variant].fg
|
|
78
87
|
}],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","badge","paddingHorizontal","tokens","spacing","md","paddingVertical","xs","borderRadius","radius","full","alignSelf","text","fontSize","fontWeight","bold","letterSpacing","Badge","exports","memo","label","variant","backgroundColor","textColor","style","useTheme","styles","allowFontScaling","useAllowFontScaling","colors","palette","success","bg","successSoft","fg","successText","error","errorSoft","errorText","warning","warningSoft","warningText","info","secondarySoft","secondaryText","neutral","inputBackground","textLight","jsx","View","children","Text","color","displayName"],"sourceRoot":"../../../src","sources":["atoms/Badge.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAoE,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","badge","paddingHorizontal","tokens","spacing","md","paddingVertical","xs","borderRadius","radius","full","alignSelf","text","fontSize","fontWeight","bold","letterSpacing","wide","Badge","exports","memo","label","variant","backgroundColor","textColor","style","useTheme","styles","allowFontScaling","useAllowFontScaling","colors","palette","success","bg","successSoft","fg","successText","error","errorSoft","errorText","warning","warningSoft","warningText","info","secondarySoft","secondaryText","neutral","inputBackground","textLight","jsx","View","children","Text","numberOfLines","color","displayName"],"sourceRoot":"../../../src","sources":["atoms/Badge.tsx"],"mappings":"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","ignoreList":[]}
|