@yahoo/uds-mobile 2.8.0 → 2.10.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/README.md +1 -1
- package/dist/_virtual/_rolldown/runtime.cjs +12 -22
- package/dist/_virtual/_rolldown/runtime.js +6 -11
- package/dist/bin/fixtures/dist/index.mjs +17 -20
- package/dist/bin/fonts/dist/index.mjs +22 -13
- package/dist/bin/generateTheme.mjs +2 -5
- package/dist/bin/mobile/scripts/utils/configToRNMappings.mjs +1 -2
- package/dist/bin/modes/dist/index.mjs +1 -2
- package/dist/bin/palette/dist/index.mjs +15 -4
- package/dist/bin/uds-mobile.mjs +1 -3
- package/dist/components/AndroidBackHandler.cjs +3 -5
- package/dist/components/AndroidBackHandler.js +1 -2
- package/dist/components/AndroidBackHandler.js.map +1 -1
- package/dist/components/Avatar.cjs +6 -8
- package/dist/components/Avatar.d.cts +2 -2
- package/dist/components/Avatar.d.cts.map +1 -1
- package/dist/components/Avatar.d.ts +2 -2
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +1 -2
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +6 -8
- package/dist/components/Badge.d.cts +2 -2
- package/dist/components/Badge.d.cts.map +1 -1
- package/dist/components/Badge.d.ts +2 -2
- package/dist/components/Badge.d.ts.map +1 -1
- package/dist/components/Badge.js +1 -2
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Banner/Banner.cjs +7 -9
- package/dist/components/Banner/Banner.d.cts +2 -2
- package/dist/components/Banner/Banner.d.cts.map +1 -1
- package/dist/components/Banner/Banner.d.ts +2 -2
- package/dist/components/Banner/Banner.d.ts.map +1 -1
- package/dist/components/Banner/Banner.js +1 -2
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/Banner/BannerContent.cjs +3 -5
- package/dist/components/Banner/BannerContent.d.cts +2 -2
- package/dist/components/Banner/BannerContent.d.cts.map +1 -1
- package/dist/components/Banner/BannerContent.d.ts +2 -2
- package/dist/components/Banner/BannerContent.d.ts.map +1 -1
- package/dist/components/Banner/BannerContent.js +1 -2
- package/dist/components/Banner/BannerContent.js.map +1 -1
- package/dist/components/Banner/BannerDescription.cjs +4 -6
- package/dist/components/Banner/BannerDescription.d.cts +2 -2
- package/dist/components/Banner/BannerDescription.d.cts.map +1 -1
- package/dist/components/Banner/BannerDescription.d.ts +2 -2
- package/dist/components/Banner/BannerDescription.d.ts.map +1 -1
- package/dist/components/Banner/BannerDescription.js +1 -2
- package/dist/components/Banner/BannerDescription.js.map +1 -1
- package/dist/components/Banner/BannerTitle.cjs +4 -6
- package/dist/components/Banner/BannerTitle.d.cts +2 -2
- package/dist/components/Banner/BannerTitle.d.cts.map +1 -1
- package/dist/components/Banner/BannerTitle.d.ts +2 -2
- package/dist/components/Banner/BannerTitle.d.ts.map +1 -1
- package/dist/components/Banner/BannerTitle.js +1 -2
- package/dist/components/Banner/BannerTitle.js.map +1 -1
- package/dist/components/Banner/index.cjs +6 -7
- package/dist/components/Banner/index.js +1 -2
- package/dist/components/Banner/utils.cjs +3 -5
- package/dist/components/Banner/utils.js +1 -2
- package/dist/components/Banner/utils.js.map +1 -1
- package/dist/components/BlurTarget.cjs +3 -5
- package/dist/components/BlurTarget.d.cts +2 -2
- package/dist/components/BlurTarget.d.cts.map +1 -1
- package/dist/components/BlurTarget.d.ts +2 -2
- package/dist/components/BlurTarget.d.ts.map +1 -1
- package/dist/components/BlurTarget.js +1 -2
- package/dist/components/BlurTarget.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.cjs +16 -18
- package/dist/components/BottomSheet/BottomSheet.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheet.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.js +1 -2
- package/dist/components/BottomSheet/BottomSheet.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetContent.cjs +4 -6
- package/dist/components/BottomSheet/BottomSheetContent.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheetContent.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetContent.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheetContent.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetContent.js +1 -2
- package/dist/components/BottomSheet/BottomSheetContent.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetDismiss.cjs +4 -6
- package/dist/components/BottomSheet/BottomSheetDismiss.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheetDismiss.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetDismiss.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheetDismiss.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetDismiss.js +1 -2
- package/dist/components/BottomSheet/BottomSheetDismiss.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetHandle.cjs +5 -7
- package/dist/components/BottomSheet/BottomSheetHandle.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheetHandle.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetHandle.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheetHandle.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetHandle.js +1 -2
- package/dist/components/BottomSheet/BottomSheetHandle.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetHeader.cjs +4 -6
- package/dist/components/BottomSheet/BottomSheetHeader.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheetHeader.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetHeader.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheetHeader.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetHeader.js +1 -2
- package/dist/components/BottomSheet/BottomSheetHeader.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetInternalProvider.cjs +3 -5
- package/dist/components/BottomSheet/BottomSheetInternalProvider.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheetInternalProvider.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetInternalProvider.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheetInternalProvider.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetInternalProvider.js +1 -2
- package/dist/components/BottomSheet/BottomSheetInternalProvider.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetProvider.cjs +4 -6
- package/dist/components/BottomSheet/BottomSheetProvider.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheetProvider.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetProvider.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheetProvider.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetProvider.js +1 -2
- package/dist/components/BottomSheet/BottomSheetProvider.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheetTrigger.cjs +4 -6
- package/dist/components/BottomSheet/BottomSheetTrigger.d.cts +2 -2
- package/dist/components/BottomSheet/BottomSheetTrigger.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetTrigger.d.ts +2 -2
- package/dist/components/BottomSheet/BottomSheetTrigger.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheetTrigger.js +1 -2
- package/dist/components/BottomSheet/BottomSheetTrigger.js.map +1 -1
- package/dist/components/BottomSheet/index.cjs +10 -11
- package/dist/components/BottomSheet/index.js +1 -2
- package/dist/components/BottomSheet/useBottomSheetDrag.cjs +4 -6
- package/dist/components/BottomSheet/useBottomSheetDrag.js +1 -2
- package/dist/components/BottomSheet/useBottomSheetDrag.js.map +1 -1
- package/dist/components/BottomSheet/useBottomSheetScroll.cjs +4 -6
- package/dist/components/BottomSheet/useBottomSheetScroll.d.cts +5 -5
- package/dist/components/BottomSheet/useBottomSheetScroll.d.ts +5 -5
- package/dist/components/BottomSheet/useBottomSheetScroll.js +1 -2
- package/dist/components/BottomSheet/useBottomSheetScroll.js.map +1 -1
- package/dist/components/BottomSheet/useBottomSheetSnapModel.cjs +6 -8
- package/dist/components/BottomSheet/useBottomSheetSnapModel.js +3 -4
- package/dist/components/BottomSheet/useBottomSheetSnapModel.js.map +1 -1
- package/dist/components/BottomSheet/useBottomSheetStore.cjs +3 -5
- package/dist/components/BottomSheet/useBottomSheetStore.js +1 -2
- package/dist/components/BottomSheet/useBottomSheetStore.js.map +1 -1
- package/dist/components/BottomSheet/useExpansionMargins.cjs +4 -6
- package/dist/components/BottomSheet/useExpansionMargins.js +1 -2
- package/dist/components/BottomSheet/useExpansionMargins.js.map +1 -1
- package/dist/components/BottomSheet/useKeyboardAvoidance.cjs +3 -5
- package/dist/components/BottomSheet/useKeyboardAvoidance.js +1 -2
- package/dist/components/BottomSheet/useKeyboardAvoidance.js.map +1 -1
- package/dist/components/BottomSheet/utils.cjs +2 -4
- package/dist/components/BottomSheet/utils.js +1 -1
- package/dist/components/BottomSheet/utils.js.map +1 -1
- package/dist/components/Box.cjs +3 -5
- package/dist/components/Box.d.cts +2 -2
- package/dist/components/Box.d.cts.map +1 -1
- package/dist/components/Box.d.ts +2 -2
- package/dist/components/Box.d.ts.map +1 -1
- package/dist/components/Box.js +1 -2
- package/dist/components/Box.js.map +1 -1
- package/dist/components/Button.cjs +8 -10
- package/dist/components/Button.d.cts +2 -2
- package/dist/components/Button.d.cts.map +1 -1
- package/dist/components/Button.d.ts +2 -2
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +1 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Checkbox.cjs +9 -11
- package/dist/components/Checkbox.d.cts +2 -2
- package/dist/components/Checkbox.d.cts.map +1 -1
- package/dist/components/Checkbox.d.ts +2 -2
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +1 -2
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/Chip.cjs +7 -9
- package/dist/components/Chip.d.cts +2 -2
- package/dist/components/Chip.d.cts.map +1 -1
- package/dist/components/Chip.d.ts +2 -2
- package/dist/components/Chip.d.ts.map +1 -1
- package/dist/components/Chip.js +1 -2
- package/dist/components/Chip.js.map +1 -1
- package/dist/components/HStack.cjs +4 -6
- package/dist/components/HStack.d.cts +2 -2
- package/dist/components/HStack.d.cts.map +1 -1
- package/dist/components/HStack.d.ts +2 -2
- package/dist/components/HStack.d.ts.map +1 -1
- package/dist/components/HStack.js +1 -2
- package/dist/components/HStack.js.map +1 -1
- package/dist/components/Icon.cjs +3 -5
- package/dist/components/Icon.d.cts +2 -2
- package/dist/components/Icon.d.cts.map +1 -1
- package/dist/components/Icon.d.ts +2 -2
- package/dist/components/Icon.d.ts.map +1 -1
- package/dist/components/Icon.js +1 -2
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/IconButton.cjs +7 -9
- package/dist/components/IconButton.d.cts +2 -2
- package/dist/components/IconButton.d.cts.map +1 -1
- package/dist/components/IconButton.d.ts +2 -2
- package/dist/components/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton.js +1 -2
- package/dist/components/IconButton.js.map +1 -1
- package/dist/components/IconSlot.cjs +4 -6
- package/dist/components/IconSlot.d.cts +2 -2
- package/dist/components/IconSlot.d.cts.map +1 -1
- package/dist/components/IconSlot.d.ts +2 -2
- package/dist/components/IconSlot.d.ts.map +1 -1
- package/dist/components/IconSlot.js +1 -2
- package/dist/components/IconSlot.js.map +1 -1
- package/dist/components/Image.cjs +3 -5
- package/dist/components/Image.d.cts +2 -2
- package/dist/components/Image.d.cts.map +1 -1
- package/dist/components/Image.d.ts +2 -2
- package/dist/components/Image.d.ts.map +1 -1
- package/dist/components/Image.js +1 -2
- package/dist/components/Image.js.map +1 -1
- package/dist/components/Input.cjs +7 -9
- package/dist/components/Input.d.cts +2 -2
- package/dist/components/Input.d.cts.map +1 -1
- package/dist/components/Input.d.ts +2 -2
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +1 -2
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +4 -6
- package/dist/components/Link.d.cts +2 -2
- package/dist/components/Link.d.cts.map +1 -1
- package/dist/components/Link.d.ts +2 -2
- package/dist/components/Link.d.ts.map +1 -1
- package/dist/components/Link.js +1 -2
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Pressable.cjs +3 -5
- package/dist/components/Pressable.d.cts +4 -4
- package/dist/components/Pressable.d.cts.map +1 -1
- package/dist/components/Pressable.d.ts +4 -4
- package/dist/components/Pressable.d.ts.map +1 -1
- package/dist/components/Pressable.js +1 -2
- package/dist/components/Pressable.js.map +1 -1
- package/dist/components/Radio.cjs +8 -10
- package/dist/components/Radio.d.cts +2 -2
- package/dist/components/Radio.d.cts.map +1 -1
- package/dist/components/Radio.d.ts +2 -2
- package/dist/components/Radio.d.ts.map +1 -1
- package/dist/components/Radio.js +1 -2
- package/dist/components/Radio.js.map +1 -1
- package/dist/components/Screen.cjs +5 -7
- package/dist/components/Screen.d.cts +2 -2
- package/dist/components/Screen.d.cts.map +1 -1
- package/dist/components/Screen.d.ts +2 -2
- package/dist/components/Screen.d.ts.map +1 -1
- package/dist/components/Screen.js +1 -2
- package/dist/components/Screen.js.map +1 -1
- package/dist/components/Scrim.cjs +4 -6
- package/dist/components/Scrim.d.cts +2 -2
- package/dist/components/Scrim.d.cts.map +1 -1
- package/dist/components/Scrim.d.ts +2 -2
- package/dist/components/Scrim.d.ts.map +1 -1
- package/dist/components/Scrim.js +1 -2
- package/dist/components/Scrim.js.map +1 -1
- package/dist/components/Switch.cjs +6 -8
- package/dist/components/Switch.d.cts +2 -2
- package/dist/components/Switch.d.cts.map +1 -1
- package/dist/components/Switch.d.ts +2 -2
- package/dist/components/Switch.d.ts.map +1 -1
- package/dist/components/Switch.js +1 -2
- package/dist/components/Switch.js.map +1 -1
- package/dist/components/Tabs/Tab.cjs +174 -0
- package/dist/components/Tabs/Tab.d.cts +26 -0
- package/dist/components/Tabs/Tab.d.cts.map +1 -0
- package/dist/components/Tabs/Tab.d.ts +26 -0
- package/dist/components/Tabs/Tab.d.ts.map +1 -0
- package/dist/components/Tabs/Tab.js +174 -0
- package/dist/components/Tabs/Tab.js.map +1 -0
- package/dist/components/Tabs/TabList.cjs +142 -0
- package/dist/components/Tabs/TabList.d.cts +24 -0
- package/dist/components/Tabs/TabList.d.cts.map +1 -0
- package/dist/components/Tabs/TabList.d.ts +24 -0
- package/dist/components/Tabs/TabList.d.ts.map +1 -0
- package/dist/components/Tabs/TabList.js +141 -0
- package/dist/components/Tabs/TabList.js.map +1 -0
- package/dist/components/Tabs/TabPanel.cjs +31 -0
- package/dist/components/Tabs/TabPanel.d.cts +24 -0
- package/dist/components/Tabs/TabPanel.d.cts.map +1 -0
- package/dist/components/Tabs/TabPanel.d.ts +24 -0
- package/dist/components/Tabs/TabPanel.d.ts.map +1 -0
- package/dist/components/Tabs/TabPanel.js +31 -0
- package/dist/components/Tabs/TabPanel.js.map +1 -0
- package/dist/components/Tabs/Tabs.cjs +53 -0
- package/dist/components/Tabs/Tabs.d.cts +35 -0
- package/dist/components/Tabs/Tabs.d.cts.map +1 -0
- package/dist/components/Tabs/Tabs.d.ts +35 -0
- package/dist/components/Tabs/Tabs.d.ts.map +1 -0
- package/dist/components/Tabs/Tabs.js +53 -0
- package/dist/components/Tabs/Tabs.js.map +1 -0
- package/dist/components/Tabs/index.cjs +10 -0
- package/dist/components/Tabs/index.d.cts +13 -0
- package/dist/components/Tabs/index.d.cts.map +1 -0
- package/dist/components/Tabs/index.d.ts +13 -0
- package/dist/components/Tabs/index.d.ts.map +1 -0
- package/dist/components/Tabs/index.js +6 -0
- package/dist/components/Tabs/tabTheme.cjs +29 -0
- package/dist/components/Tabs/tabTheme.d.cts +23 -0
- package/dist/components/Tabs/tabTheme.d.cts.map +1 -0
- package/dist/components/Tabs/tabTheme.d.ts +23 -0
- package/dist/components/Tabs/tabTheme.d.ts.map +1 -0
- package/dist/components/Tabs/tabTheme.js +28 -0
- package/dist/components/Tabs/tabTheme.js.map +1 -0
- package/dist/components/Tabs/tabsContexts.cjs +91 -0
- package/dist/components/Tabs/tabsContexts.d.cts +35 -0
- package/dist/components/Tabs/tabsContexts.d.cts.map +1 -0
- package/dist/components/Tabs/tabsContexts.d.ts +35 -0
- package/dist/components/Tabs/tabsContexts.d.ts.map +1 -0
- package/dist/components/Tabs/tabsContexts.js +87 -0
- package/dist/components/Tabs/tabsContexts.js.map +1 -0
- package/dist/components/Text.cjs +3 -5
- package/dist/components/Text.d.cts +2 -2
- package/dist/components/Text.d.cts.map +1 -1
- package/dist/components/Text.d.ts +2 -2
- package/dist/components/Text.d.ts.map +1 -1
- package/dist/components/Text.js +1 -2
- package/dist/components/Text.js.map +1 -1
- package/dist/components/UDSProvider.cjs +4 -6
- package/dist/components/UDSProvider.d.cts +2 -2
- package/dist/components/UDSProvider.d.cts.map +1 -1
- package/dist/components/UDSProvider.d.ts +2 -2
- package/dist/components/UDSProvider.d.ts.map +1 -1
- package/dist/components/UDSProvider.js +1 -2
- package/dist/components/UDSProvider.js.map +1 -1
- package/dist/components/VStack.cjs +4 -6
- package/dist/components/VStack.d.cts +2 -2
- package/dist/components/VStack.d.cts.map +1 -1
- package/dist/components/VStack.d.ts +2 -2
- package/dist/components/VStack.d.ts.map +1 -1
- package/dist/components/VStack.js +1 -2
- package/dist/components/VStack.js.map +1 -1
- package/dist/jest/index.cjs +8 -10
- package/dist/jest/index.js +1 -2
- package/dist/jest/index.js.map +1 -1
- package/dist/jest/mocks/icons.cjs +8 -11
- package/dist/jest/mocks/icons.js +1 -2
- package/dist/jest/mocks/icons.js.map +1 -1
- package/dist/jest/mocks/react-native.cjs +6 -5
- package/dist/jest/mocks/react-native.js +1 -2
- package/dist/jest/mocks/react-native.js.map +1 -1
- package/dist/jest/mocks/reanimated.cjs +11 -10
- package/dist/jest/mocks/reanimated.js +1 -2
- package/dist/jest/mocks/reanimated.js.map +1 -1
- package/dist/jest/mocks/styles.cjs +15 -11
- package/dist/jest/mocks/styles.d.cts +3 -2
- package/dist/jest/mocks/styles.d.cts.map +1 -1
- package/dist/jest/mocks/styles.d.ts +3 -2
- package/dist/jest/mocks/styles.d.ts.map +1 -1
- package/dist/jest/mocks/styles.js +8 -3
- package/dist/jest/mocks/styles.js.map +1 -1
- package/dist/jest/mocks/svg.cjs +11 -10
- package/dist/jest/mocks/svg.js +2 -3
- package/dist/jest/mocks/svg.js.map +1 -1
- package/dist/jest/mocks/unistyles.cjs +8 -11
- package/dist/jest/mocks/unistyles.js +1 -2
- package/dist/jest/mocks/unistyles.js.map +1 -1
- package/dist/jest/setup.cjs +6 -8
- package/dist/jest/setup.js +1 -2
- package/dist/jest/setup.js.map +1 -1
- package/dist/motion-tokens/dist/index.cjs +1 -3
- package/dist/motion-tokens/dist/index.js +1 -1
- package/dist/motion-tokens/dist/index.js.map +1 -1
- package/dist/motion.cjs +3 -5
- package/dist/motion.js +1 -2
- package/dist/motion.js.map +1 -1
- package/dist/native/UDSScreenCornerRadiusModule.cjs +2 -4
- package/dist/native/UDSScreenCornerRadiusModule.js +1 -1
- package/dist/portal.cjs +3 -5
- package/dist/portal.d.cts +2 -2
- package/dist/portal.d.cts.map +1 -1
- package/dist/portal.d.ts +2 -2
- package/dist/portal.d.ts.map +1 -1
- package/dist/portal.js +1 -2
- package/dist/portal.js.map +1 -1
- package/dist/types/dist/index.d.cts +52 -1
- package/dist/types/dist/index.d.cts.map +1 -1
- package/dist/types/dist/index.d.ts +52 -1
- package/dist/types/dist/index.d.ts.map +1 -1
- package/generated/styles.cjs +68 -0
- package/generated/styles.d.ts +46 -0
- package/generated/styles.mjs +68 -0
- package/generated/unistyles.d.ts +53 -0
- package/package.json +11 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { BoxProps } from "./Box.cjs";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { Ref } from "react";
|
|
5
5
|
import { View } from "react-native";
|
|
6
6
|
import { StyleProps } from "../../generated/styles";
|
|
@@ -39,7 +39,7 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
|
|
|
39
39
|
* @see {@link VStack} for vertical layouts
|
|
40
40
|
* @see {@link Box} for custom flex layouts
|
|
41
41
|
*/
|
|
42
|
-
declare const HStack: react.NamedExoticComponent<HStackProps>;
|
|
42
|
+
declare const HStack: _$react.NamedExoticComponent<HStackProps>;
|
|
43
43
|
//#endregion
|
|
44
44
|
export { HStack, type HStackProps };
|
|
45
45
|
//# sourceMappingURL=HStack.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HStack.d.cts","names":[],"sources":["../../src/components/HStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,
|
|
1
|
+
{"version":3,"file":"HStack.d.cts","names":[],"sources":["../../src/components/HStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { BoxProps } from "./Box.js";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { Ref } from "react";
|
|
5
5
|
import { View } from "react-native";
|
|
6
6
|
import { StyleProps } from "../../generated/styles";
|
|
@@ -39,7 +39,7 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
|
|
|
39
39
|
* @see {@link VStack} for vertical layouts
|
|
40
40
|
* @see {@link Box} for custom flex layouts
|
|
41
41
|
*/
|
|
42
|
-
declare const HStack: react.NamedExoticComponent<HStackProps>;
|
|
42
|
+
declare const HStack: _$react.NamedExoticComponent<HStackProps>;
|
|
43
43
|
//#endregion
|
|
44
44
|
export { HStack, type HStackProps };
|
|
45
45
|
//# sourceMappingURL=HStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HStack.d.ts","names":[],"sources":["../../src/components/HStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,
|
|
1
|
+
{"version":3,"file":"HStack.d.ts","names":[],"sources":["../../src/components/HStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { Box } from "./Box.js";
|
|
3
3
|
import { memo } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
|
|
6
5
|
//#region src/components/HStack.tsx
|
|
7
6
|
/**
|
|
8
7
|
* **📦 A horizontal stack layout component**
|
|
@@ -42,7 +41,7 @@ const HStack = memo(function HStack({ gap, children, ref, ...props }) {
|
|
|
42
41
|
});
|
|
43
42
|
});
|
|
44
43
|
HStack.displayName = "HStack";
|
|
45
|
-
|
|
46
44
|
//#endregion
|
|
47
45
|
export { HStack };
|
|
46
|
+
|
|
48
47
|
//# sourceMappingURL=HStack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HStack.js","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface HStackProps extends Omit<BoxProps, 'ref'> {\n /** Gap between child elements */\n gap?: StyleProps['columnGap'];\n /** Ref to the underlying View */\n ref?: Ref<View>;\n}\n\n/**\n * **📦 A horizontal stack layout component**\n *\n * @description\n * A convenience component for creating horizontal layouts. It's a Box with\n * `flexDirection=\"row\"` preset.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { HStack } from '@yahoo/uds-mobile';\n *\n * <HStack gap=\"4\" alignItems=\"center\">\n * <Text>Item 1</Text>\n * <Text>Item 2</Text>\n * </HStack>\n * ```\n *\n * @usage\n * - Use for horizontal arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see {@link VStack} for vertical layouts\n * @see {@link Box} for custom flex layouts\n */\nconst HStack = memo(function HStack({ gap, children, ref, ...props }: HStackProps) {\n return (\n <Box ref={ref} flexDirection=\"row\" rowGap={gap} columnGap={gap} {...props}>\n {children}\n </Box>\n );\n});\n\nHStack.displayName = 'HStack';\n\nexport { HStack, type HStackProps };\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HStack.js","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface HStackProps extends Omit<BoxProps, 'ref'> {\n /** Gap between child elements */\n gap?: StyleProps['columnGap'];\n /** Ref to the underlying View */\n ref?: Ref<View>;\n}\n\n/**\n * **📦 A horizontal stack layout component**\n *\n * @description\n * A convenience component for creating horizontal layouts. It's a Box with\n * `flexDirection=\"row\"` preset.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { HStack } from '@yahoo/uds-mobile';\n *\n * <HStack gap=\"4\" alignItems=\"center\">\n * <Text>Item 1</Text>\n * <Text>Item 2</Text>\n * </HStack>\n * ```\n *\n * @usage\n * - Use for horizontal arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see {@link VStack} for vertical layouts\n * @see {@link Box} for custom flex layouts\n */\nconst HStack = memo(function HStack({ gap, children, ref, ...props }: HStackProps) {\n return (\n <Box ref={ref} flexDirection=\"row\" rowGap={gap} columnGap={gap} {...props}>\n {children}\n </Box>\n );\n});\n\nHStack.displayName = 'HStack';\n\nexport { HStack, type HStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,SAAS,KAAK,SAAS,OAAO,EAAE,KAAK,UAAU,KAAK,GAAG,SAAsB;AACjF,QACE,oBAAC,KAAD;EAAU;EAAK,eAAc;EAAM,QAAQ;EAAK,WAAW;EAAK,GAAI;EACjE;EACG,CAAA;EAER;AAEF,OAAO,cAAc"}
|
package/dist/components/Icon.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
3
|
-
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
4
|
let react = require("react");
|
|
5
5
|
let react_native = require("react-native");
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -10,7 +10,6 @@ let _yahoo_uds_icons_glyphMap = require("@yahoo/uds-icons/glyphMap");
|
|
|
10
10
|
let _yahoo_uds_icons_svgMap = require("@yahoo/uds-icons/svgMap");
|
|
11
11
|
let _yahoo_uds_icons_tokens = require("@yahoo/uds-icons/tokens");
|
|
12
12
|
let react_native_svg = require("react-native-svg");
|
|
13
|
-
|
|
14
13
|
//#region src/components/Icon.tsx
|
|
15
14
|
const DEFAULT_PROPS = {
|
|
16
15
|
size: "md",
|
|
@@ -157,8 +156,7 @@ const Icon = (0, react.memo)(function Icon({ variant, ...props }) {
|
|
|
157
156
|
Icon.displayName = "Icon";
|
|
158
157
|
const iconNames = _yahoo_uds_icons_glyphMap.glyphNames;
|
|
159
158
|
const multicolorIconNames = _yahoo_uds_icons_svgMap.svgGlyphNames;
|
|
160
|
-
|
|
161
159
|
//#endregion
|
|
162
160
|
exports.Icon = Icon;
|
|
163
161
|
exports.iconNames = iconNames;
|
|
164
|
-
exports.multicolorIconNames = multicolorIconNames;
|
|
162
|
+
exports.multicolorIconNames = multicolorIconNames;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { IconSize, IconVariant } from "../types/dist/index.cjs";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { Ref } from "react";
|
|
5
5
|
import { StyleProp, Text, TextProps, TextStyle } from "react-native";
|
|
6
6
|
import { GlyphName } from "@yahoo/uds-icons/glyphMap";
|
|
@@ -92,7 +92,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
|
|
|
92
92
|
* @see {@link IconButton} for clickable icons
|
|
93
93
|
* @see {@link IconSlot} for flexible icon rendering in components
|
|
94
94
|
*/
|
|
95
|
-
declare const Icon: react.NamedExoticComponent<IconProps>;
|
|
95
|
+
declare const Icon: _$react.NamedExoticComponent<IconProps>;
|
|
96
96
|
declare const iconNames: readonly ["A11Y", "Accessible", "AccountRecover", "AccountRefresh", "AccountSwitchAlt", "AccountSwitcher", "AcousticGuitar", "Add", "AddBell", "AddCalendar", "AddCheckCircle", "AddCircle", "AddContactCard", "AddDocument", "AddFace", "AddFolder", "AddPaperPlane", "AddPeople", "AddQuestion", "AddSearch", "AddSquare", "AffiliateLink", "AirQuality", "Airplane", "AirplaneLanding", "AirplaneTakeOff", "AngledSquareOnSquare", "AnyFile", "AppSwitcher", "AquariusAstrology", "Archive", "AriesAstrology", "ArrowDown", "ArrowDownCircle", "ArrowLeft", "ArrowLineDown", "ArrowLineUp", "ArrowRight", "ArrowUp", "Article", "ArtisticGymnastics", "Ascender", "AudioFile", "Authenticator", "AutoDownload", "AutoSaveOffline", "AutoSaveSync", "AutoSaveUpload", "AutoSaveUploadFail", "AutoSaved", "BabyBottle", "BackTimeTen", "Badge", "Balance", "BallInWater", "Barometer", "BaseBallBat", "Baseball", "Basketball", "BasketballHoop", "BeachUmbrella", "Bed", "Bell", "Below", "BigDownArrow", "BigLeftArrow", "BigRightArrow", "BigRightStraightArrow", "BigUpArrow", "Bike", "Bingo", "Binoculars", "BlackJack", "Bold", "Bolt", "Bookmark", "BottomLine", "BowAndArrow", "BoxCircle", "BoxFront", "BoxOnBox", "BoxingGlove", "Browser", "BubbleZone", "Building", "BulletPointContainer", "BulletPoints", "Bullseye", "BusFront", "BusinessBag", "Cake", "Calendar", "CalendarClock", "CalendarConfirm", "CalendarFile", "CalendarICSFile", "CalendarRightArrow", "Camera", "CancerAstrology", "Canoe", "CapriconAstrology", "Car", "CardsCheck", "Cash", "CelebrityStar", "CenterAlignment", "ChatAi", "Check", "CheckBookmark", "CheckBox", "CheckCircle", "CheckDocuments", "CheckEnvelope", "CheckPeople", "CheckSpeechBubble", "CheckVoteBallot", "Checklist", "ChevronDown", "ChevronLeft", "ChevronLeftPeople", "ChevronRight", "ChevronRightPeople", "ChevronUp", "Circle", "ClearText", "Clipboard", "Clock", "Clone", "ClosedCaption", "Cloud", "CloudDay", "CloudNight", "Cocktails", "Coffee", "CoffeeTakeout", "Cog", "Coin", "CollapseColumn", "Command", "Compass", "ComputerChip", "Connection", "ConnectionScreen", "ContactBook", "ContactCard", "Convert", "ConvertAlt", "ConvertLeft", "ConvertRight", "Cookies", "Coupon", "CreditCard", "CreditCardPayment", "CrescentMoon", "Cricket", "Cross", "CrossCircle", "CrossEnvelope", "CrossPeople", "CrossShield", "Crossword", "Cycling", "DOCFile", "DailyFantasy", "DaisyFlower", "Dandelion", "DataBook", "DataCloud", "DataSilo", "DataStorage", "Debug", "DeleteTab", "DeliveryPackage", "Dense", "DenyCircle", "Descender", "Desktop", "DiagonalKey", "DiagonalLeftDown", "DiagonalLeftUp", "DiagonalRightDown", "DiagonalRightUp", "Diamond", "Dice", "Dining", "Direction", "DiscoBall", "Document", "DocumentImageRectangle", "DocumentImageSquare", "DocumentRectangle", "DollarCircleArrows", "DotEnvelope", "DotTwoRings", "DoubleBigLeftArrow", "DoubleChevronLeft", "DoubleChevronRight", "DownCurveArrow", "Download", "DownloadCircle", "DownloadComplete", "DownloadInProgressCircle", "DraftDocument", "DragVertical", "Dusk", "Easel", "Eclipse", "Edit", "EmailVerification", "Emails", "Embed", "EntertainmentTv", "Envelope", "Error", "ExpandArrowLeft", "ExpandArrowRight", "ExpandColumn", "Eye", "EyeSearch", "EyeShut", "FaceID", "FallLeaf", "Family", "FastForward", "FencingEpee", "FilmReel", "FilmRoll", "FingerPointLeftArrow", "FingerPointRightArrow", "FingerPointSelect", "FingerPrint", "Fire", "FirstAidKit", "FirstQuarter", "FiveCircles", "Flag", "FlameTorch", "Fog", "FogDay", "Folder", "Font", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMagnifyingGlass", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Grass", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "Laurel", "LaurelLeft", "LaurelRight", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pollen", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Tree", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "YahooScoutFinance", "YahooScoutFinanceGradient", "YahooScoutIcon", "YahooScoutIconGradient", "ZIP"];
|
|
97
97
|
declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "CrescentMoon", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyCloudyNight", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "SnowNight", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "YahooScoutFinance", "YahooScoutFinanceGradient", "YahooScoutIcon", "YahooScoutIconGradient"];
|
|
98
98
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,
|
|
1
|
+
{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { IconSize, IconVariant } from "../types/dist/index.js";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { Ref } from "react";
|
|
5
5
|
import { StyleProp, Text, TextProps, TextStyle } from "react-native";
|
|
6
6
|
import { StyleProps } from "../../generated/styles";
|
|
@@ -92,7 +92,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
|
|
|
92
92
|
* @see {@link IconButton} for clickable icons
|
|
93
93
|
* @see {@link IconSlot} for flexible icon rendering in components
|
|
94
94
|
*/
|
|
95
|
-
declare const Icon: react.NamedExoticComponent<IconProps>;
|
|
95
|
+
declare const Icon: _$react.NamedExoticComponent<IconProps>;
|
|
96
96
|
declare const iconNames: readonly ["A11Y", "Accessible", "AccountRecover", "AccountRefresh", "AccountSwitchAlt", "AccountSwitcher", "AcousticGuitar", "Add", "AddBell", "AddCalendar", "AddCheckCircle", "AddCircle", "AddContactCard", "AddDocument", "AddFace", "AddFolder", "AddPaperPlane", "AddPeople", "AddQuestion", "AddSearch", "AddSquare", "AffiliateLink", "AirQuality", "Airplane", "AirplaneLanding", "AirplaneTakeOff", "AngledSquareOnSquare", "AnyFile", "AppSwitcher", "AquariusAstrology", "Archive", "AriesAstrology", "ArrowDown", "ArrowDownCircle", "ArrowLeft", "ArrowLineDown", "ArrowLineUp", "ArrowRight", "ArrowUp", "Article", "ArtisticGymnastics", "Ascender", "AudioFile", "Authenticator", "AutoDownload", "AutoSaveOffline", "AutoSaveSync", "AutoSaveUpload", "AutoSaveUploadFail", "AutoSaved", "BabyBottle", "BackTimeTen", "Badge", "Balance", "BallInWater", "Barometer", "BaseBallBat", "Baseball", "Basketball", "BasketballHoop", "BeachUmbrella", "Bed", "Bell", "Below", "BigDownArrow", "BigLeftArrow", "BigRightArrow", "BigRightStraightArrow", "BigUpArrow", "Bike", "Bingo", "Binoculars", "BlackJack", "Bold", "Bolt", "Bookmark", "BottomLine", "BowAndArrow", "BoxCircle", "BoxFront", "BoxOnBox", "BoxingGlove", "Browser", "BubbleZone", "Building", "BulletPointContainer", "BulletPoints", "Bullseye", "BusFront", "BusinessBag", "Cake", "Calendar", "CalendarClock", "CalendarConfirm", "CalendarFile", "CalendarICSFile", "CalendarRightArrow", "Camera", "CancerAstrology", "Canoe", "CapriconAstrology", "Car", "CardsCheck", "Cash", "CelebrityStar", "CenterAlignment", "ChatAi", "Check", "CheckBookmark", "CheckBox", "CheckCircle", "CheckDocuments", "CheckEnvelope", "CheckPeople", "CheckSpeechBubble", "CheckVoteBallot", "Checklist", "ChevronDown", "ChevronLeft", "ChevronLeftPeople", "ChevronRight", "ChevronRightPeople", "ChevronUp", "Circle", "ClearText", "Clipboard", "Clock", "Clone", "ClosedCaption", "Cloud", "CloudDay", "CloudNight", "Cocktails", "Coffee", "CoffeeTakeout", "Cog", "Coin", "CollapseColumn", "Command", "Compass", "ComputerChip", "Connection", "ConnectionScreen", "ContactBook", "ContactCard", "Convert", "ConvertAlt", "ConvertLeft", "ConvertRight", "Cookies", "Coupon", "CreditCard", "CreditCardPayment", "CrescentMoon", "Cricket", "Cross", "CrossCircle", "CrossEnvelope", "CrossPeople", "CrossShield", "Crossword", "Cycling", "DOCFile", "DailyFantasy", "DaisyFlower", "Dandelion", "DataBook", "DataCloud", "DataSilo", "DataStorage", "Debug", "DeleteTab", "DeliveryPackage", "Dense", "DenyCircle", "Descender", "Desktop", "DiagonalKey", "DiagonalLeftDown", "DiagonalLeftUp", "DiagonalRightDown", "DiagonalRightUp", "Diamond", "Dice", "Dining", "Direction", "DiscoBall", "Document", "DocumentImageRectangle", "DocumentImageSquare", "DocumentRectangle", "DollarCircleArrows", "DotEnvelope", "DotTwoRings", "DoubleBigLeftArrow", "DoubleChevronLeft", "DoubleChevronRight", "DownCurveArrow", "Download", "DownloadCircle", "DownloadComplete", "DownloadInProgressCircle", "DraftDocument", "DragVertical", "Dusk", "Easel", "Eclipse", "Edit", "EmailVerification", "Emails", "Embed", "EntertainmentTv", "Envelope", "Error", "ExpandArrowLeft", "ExpandArrowRight", "ExpandColumn", "Eye", "EyeSearch", "EyeShut", "FaceID", "FallLeaf", "Family", "FastForward", "FencingEpee", "FilmReel", "FilmRoll", "FingerPointLeftArrow", "FingerPointRightArrow", "FingerPointSelect", "FingerPrint", "Fire", "FirstAidKit", "FirstQuarter", "FiveCircles", "Flag", "FlameTorch", "Fog", "FogDay", "Folder", "Font", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMagnifyingGlass", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Grass", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "Laurel", "LaurelLeft", "LaurelRight", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pollen", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Tree", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "YahooScoutFinance", "YahooScoutFinanceGradient", "YahooScoutIcon", "YahooScoutIconGradient", "ZIP"];
|
|
97
97
|
declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "CrescentMoon", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyCloudyNight", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "SnowNight", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "YahooScoutFinance", "YahooScoutFinanceGradient", "YahooScoutIcon", "YahooScoutIconGradient"];
|
|
98
98
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
|
package/dist/components/Icon.js
CHANGED
|
@@ -8,7 +8,6 @@ import { glyphMap, glyphNames } from "@yahoo/uds-icons/glyphMap";
|
|
|
8
8
|
import { svgGlyphNames, svgMap } from "@yahoo/uds-icons/svgMap";
|
|
9
9
|
import { ICON_SIZE_MAP } from "@yahoo/uds-icons/tokens";
|
|
10
10
|
import { SvgXml } from "react-native-svg";
|
|
11
|
-
|
|
12
11
|
//#region src/components/Icon.tsx
|
|
13
12
|
const DEFAULT_PROPS = {
|
|
14
13
|
size: "md",
|
|
@@ -155,7 +154,7 @@ const Icon = memo(function Icon({ variant, ...props }) {
|
|
|
155
154
|
Icon.displayName = "Icon";
|
|
156
155
|
const iconNames = glyphNames;
|
|
157
156
|
const multicolorIconNames = svgGlyphNames;
|
|
158
|
-
|
|
159
157
|
//#endregion
|
|
160
158
|
export { Icon, iconNames, multicolorIconNames };
|
|
159
|
+
|
|
161
160
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n StyleProp,\n Text as RNText,\n TextProps as RNTextProps,\n TextStyle,\n ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n size: 'md',\n color: 'primary',\n variant: 'outline',\n flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/* Icon Props */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** The icon name */\n name: IconName;\n /** Icon size */\n size?: IconSize;\n /** Icon color */\n color?: StyleProps['color'];\n /** Icon variant (outline, fill, multicolor) */\n variant?: IconVariant;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Flex\n flexShrink?: StyleProps['flexShrink'];\n // Spacing\n spacingStart?: StyleProps['spacingStart'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingTop?: StyleProps['spacingTop'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacing?: StyleProps['spacing'];\n // Offset\n offsetStart?: StyleProps['offsetStart'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetTop?: StyleProps['offsetTop'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetVertical?: StyleProps['offsetVertical'];\n offset?: StyleProps['offset'];\n /** Icon color override */\n dangerouslySetColor?: string;\n /** Icon font size override */\n dangerouslySetSize?: number;\n /** Optional style override */\n style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Multicolor Icon */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n name,\n size = DEFAULT_PROPS.size,\n flexShrink = DEFAULT_PROPS.flexShrink,\n backgroundColor,\n dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n // Reactive theme subscription - only multicolor icons need this\n const { rt } = useUnistyles();\n const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n const pixelSize = ICON_SIZE_MAP[size];\n const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n const svgContent = svgMap[svgKey];\n\n if (!svgContent) {\n console.warn(`Multicolor icon \"${svgKey}\" not found`);\n return null;\n }\n\n styles.useVariants({\n flexShrink,\n backgroundColor,\n });\n\n return (\n <View style={styles.foundation as ViewProps['style']}>\n <SvgXml\n xml={svgContent}\n width={dangerouslySetSize ?? pixelSize}\n height={dangerouslySetSize ?? pixelSize}\n />\n </View>\n );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n name,\n size = DEFAULT_PROPS.size,\n color = DEFAULT_PROPS.color,\n variant = DEFAULT_PROPS.variant,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink = '0',\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n // Dangerously set props\n dangerouslySetColor,\n dangerouslySetSize,\n style,\n ref,\n ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n const pixelSize = ICON_SIZE_MAP[size];\n // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n styles.useVariants({\n color,\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink,\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n });\n const glyphName = `${name}-${variant}-${pixelSize}`;\n const glyph = (glyphMap as Record<string, string>)[glyphName];\n const textStyles: StyleProp<TextStyle> = useMemo(\n () => [\n {\n fontFamily: 'uds-icons',\n textAlign: 'center',\n textAlignVertical: 'center',\n fontSize: pixelSize,\n lineHeight: pixelSize,\n },\n styles.foundation,\n dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n dangerouslySetSize\n ? {\n fontSize: dangerouslySetSize,\n lineHeight: dangerouslySetSize,\n }\n : undefined,\n style,\n ],\n [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n );\n\n return (\n <Text\n ref={ref}\n accessibilityRole=\"image\"\n accessibilityLabel={name}\n style={textStyles}\n {...props}\n >\n {glyph}\n </Text>\n );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n if (variant === 'multicolor') {\n return <MulticolorIcon {...props} />;\n }\n\n return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AA0ED,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAwBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY;IACb;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAC/E;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
|
|
1
|
+
{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n StyleProp,\n Text as RNText,\n TextProps as RNTextProps,\n TextStyle,\n ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n size: 'md',\n color: 'primary',\n variant: 'outline',\n flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/* Icon Props */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** The icon name */\n name: IconName;\n /** Icon size */\n size?: IconSize;\n /** Icon color */\n color?: StyleProps['color'];\n /** Icon variant (outline, fill, multicolor) */\n variant?: IconVariant;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Flex\n flexShrink?: StyleProps['flexShrink'];\n // Spacing\n spacingStart?: StyleProps['spacingStart'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingTop?: StyleProps['spacingTop'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacing?: StyleProps['spacing'];\n // Offset\n offsetStart?: StyleProps['offsetStart'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetTop?: StyleProps['offsetTop'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetVertical?: StyleProps['offsetVertical'];\n offset?: StyleProps['offset'];\n /** Icon color override */\n dangerouslySetColor?: string;\n /** Icon font size override */\n dangerouslySetSize?: number;\n /** Optional style override */\n style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Multicolor Icon */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n name,\n size = DEFAULT_PROPS.size,\n flexShrink = DEFAULT_PROPS.flexShrink,\n backgroundColor,\n dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n // Reactive theme subscription - only multicolor icons need this\n const { rt } = useUnistyles();\n const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n const pixelSize = ICON_SIZE_MAP[size];\n const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n const svgContent = svgMap[svgKey];\n\n if (!svgContent) {\n console.warn(`Multicolor icon \"${svgKey}\" not found`);\n return null;\n }\n\n styles.useVariants({\n flexShrink,\n backgroundColor,\n });\n\n return (\n <View style={styles.foundation as ViewProps['style']}>\n <SvgXml\n xml={svgContent}\n width={dangerouslySetSize ?? pixelSize}\n height={dangerouslySetSize ?? pixelSize}\n />\n </View>\n );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n name,\n size = DEFAULT_PROPS.size,\n color = DEFAULT_PROPS.color,\n variant = DEFAULT_PROPS.variant,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink = '0',\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n // Dangerously set props\n dangerouslySetColor,\n dangerouslySetSize,\n style,\n ref,\n ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n const pixelSize = ICON_SIZE_MAP[size];\n // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n styles.useVariants({\n color,\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink,\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n });\n const glyphName = `${name}-${variant}-${pixelSize}`;\n const glyph = (glyphMap as Record<string, string>)[glyphName];\n const textStyles: StyleProp<TextStyle> = useMemo(\n () => [\n {\n fontFamily: 'uds-icons',\n textAlign: 'center',\n textAlignVertical: 'center',\n fontSize: pixelSize,\n lineHeight: pixelSize,\n },\n styles.foundation,\n dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n dangerouslySetSize\n ? {\n fontSize: dangerouslySetSize,\n lineHeight: dangerouslySetSize,\n }\n : undefined,\n style,\n ],\n [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n );\n\n return (\n <Text\n ref={ref}\n accessibilityRole=\"image\"\n accessibilityLabel={name}\n style={textStyles}\n {...props}\n >\n {glyph}\n </Text>\n );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n if (variant === 'multicolor') {\n return <MulticolorIcon {...props} />;\n }\n\n return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AA0ED,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC,MAAD;EAAM,OAAO,OAAO;YAClB,oBAAC,QAAD;GACE,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;GAC9B,CAAA;EACG,CAAA;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SAAoC,GAD9B,KAAK,GAAG,QAAQ,GAAG;AAwBxC,QACE,oBAAC,MAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY;IACb;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD,KAAA;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAQ3D;EACjB,GAAI;YAEH;EACI,CAAA;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,gBAAD,EAAgB,GAAI,OAAS,CAAA;AAGtC,QAAO,oBAAC,mBAAD;EAA4B;EAAS,GAAI;EAAS,CAAA;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
3
|
-
|
|
4
|
-
const require_index = require(
|
|
5
|
-
const require_motion = require(
|
|
6
|
-
const require_components_Icon = require(
|
|
7
|
-
const require_components_Pressable = require(
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_index = require("../motion-tokens/dist/index.cjs");
|
|
5
|
+
const require_motion = require("../motion.cjs");
|
|
6
|
+
const require_components_Icon = require("./Icon.cjs");
|
|
7
|
+
const require_components_Pressable = require("./Pressable.cjs");
|
|
8
8
|
let react = require("react");
|
|
9
9
|
let react_native = require("react-native");
|
|
10
10
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
11
11
|
let generated_styles = require("../../generated/styles");
|
|
12
12
|
let react_native_reanimated = require("react-native-reanimated");
|
|
13
13
|
let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
|
|
14
|
-
|
|
15
14
|
//#region src/components/IconButton.tsx
|
|
16
15
|
function interpolateShadowAlpha(shadow, alpha) {
|
|
17
16
|
"worklet";
|
|
@@ -145,6 +144,5 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
|
|
|
145
144
|
});
|
|
146
145
|
});
|
|
147
146
|
IconButton.displayName = "IconButton";
|
|
148
|
-
|
|
149
147
|
//#endregion
|
|
150
|
-
exports.IconButton = IconButton;
|
|
148
|
+
exports.IconButton = IconButton;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { ButtonVariantFlat, IconButtonSize, IconVariant } from "../types/dist/index.cjs";
|
|
3
3
|
import { IconName } from "./Icon.cjs";
|
|
4
4
|
import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
|
|
5
|
-
import * as react from "react";
|
|
5
|
+
import * as _$react from "react";
|
|
6
6
|
import { Ref } from "react";
|
|
7
7
|
import { View } from "react-native";
|
|
8
8
|
import { StyleProps } from "../../generated/styles";
|
|
@@ -62,7 +62,7 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
|
|
|
62
62
|
* @see {@link Button} for buttons with text labels
|
|
63
63
|
* @see {@link Icon} for non-interactive icons
|
|
64
64
|
*/
|
|
65
|
-
declare const IconButton: react.NamedExoticComponent<IconButtonProps>;
|
|
65
|
+
declare const IconButton: _$react.NamedExoticComponent<IconButtonProps>;
|
|
66
66
|
//#endregion
|
|
67
67
|
export { IconButton, type IconButtonProps };
|
|
68
68
|
//# sourceMappingURL=IconButton.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAiDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,
|
|
1
|
+
{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAiDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { ButtonVariantFlat, IconButtonSize, IconVariant } from "../types/dist/index.js";
|
|
3
3
|
import { IconName } from "./Icon.js";
|
|
4
4
|
import { PressableProps as PressableProps$1 } from "./Pressable.js";
|
|
5
|
-
import * as react from "react";
|
|
5
|
+
import * as _$react from "react";
|
|
6
6
|
import { Ref } from "react";
|
|
7
7
|
import { View } from "react-native";
|
|
8
8
|
import { StyleProps } from "../../generated/styles";
|
|
@@ -62,7 +62,7 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
|
|
|
62
62
|
* @see {@link Button} for buttons with text labels
|
|
63
63
|
* @see {@link Icon} for non-interactive icons
|
|
64
64
|
*/
|
|
65
|
-
declare const IconButton: react.NamedExoticComponent<IconButtonProps>;
|
|
65
|
+
declare const IconButton: _$react.NamedExoticComponent<IconButtonProps>;
|
|
66
66
|
//#endregion
|
|
67
67
|
export { IconButton, type IconButtonProps };
|
|
68
68
|
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAiDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAiDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
|
|
@@ -9,7 +9,6 @@ import { jsx } from "react/jsx-runtime";
|
|
|
9
9
|
import { buttonStyles, iconButtonStyles, styles } from "../../generated/styles";
|
|
10
10
|
import { Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
|
|
11
11
|
import { useAnimatedTheme, useAnimatedVariantColor } from "react-native-unistyles/reanimated";
|
|
12
|
-
|
|
13
12
|
//#region src/components/IconButton.tsx
|
|
14
13
|
function interpolateShadowAlpha(shadow, alpha) {
|
|
15
14
|
"worklet";
|
|
@@ -143,7 +142,7 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
|
|
|
143
142
|
});
|
|
144
143
|
});
|
|
145
144
|
IconButton.displayName = "IconButton";
|
|
146
|
-
|
|
147
145
|
//#endregion
|
|
148
146
|
export { IconButton };
|
|
147
|
+
|
|
149
148
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/* Animation Helpers */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n 'worklet';\n if (!shadow) {\n return '';\n }\n if (alpha >= 1) {\n return shadow;\n }\n if (alpha <= 0) {\n return '';\n }\n\n return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n const newAlpha = parseFloat(a) * alpha;\n return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n });\n}\n\n/* -------------------------------------------------------------------------- */\n/* IconButton Props */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n /** Icon to render from the icons package */\n name: IconName;\n /** The visual style variant @default 'primary' */\n variant?: ButtonVariantFlat;\n /** The size of the button @default 'md' */\n size?: IconButtonSize;\n /** The icon style variant @default 'outline' */\n iconVariant?: IconVariant;\n /** Override the icon color token without changing the button variant tokens */\n iconColor?: StyleProps['color'];\n /** Shows a loading spinner and disables the button */\n loading?: boolean;\n /**\n * Disable motion effects (scale on press, icon animations)\n * @default false\n */\n disableEffects?: boolean;\n /** Ref to the underlying View */\n ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* IconButton Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n name,\n variant = 'primary',\n size = 'md',\n iconVariant = 'outline',\n iconColor,\n loading,\n disabled,\n style,\n accessibilityLabel,\n accessibilityHint,\n disableEffects = false,\n onPressIn,\n onPressOut,\n ref,\n ...props\n}: IconButtonProps) {\n const isDisabled = disabled || loading;\n const shouldAnimate = !disableEffects && !isDisabled;\n\n /* --------------------------------- State ---------------------------------- */\n const [pressed, setPressed] = useState(false);\n\n // Apply layer-based styles with compound variant support\n iconButtonStyles.useVariants({ size });\n buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n foundationStyles.useVariants({ color: iconColor });\n\n const resolvedIconColor = iconColor\n ? (foundationStyles.foundation.color as string | undefined)\n : undefined;\n\n // Animate colors using Unistyles' useAnimatedVariantColor\n const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n // Get animated theme for boxShadow\n const animatedTheme = useAnimatedTheme();\n\n /* ------------------------------- Animation -------------------------------- */\n const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n (event) => {\n setPressed(true);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n }\n onPressIn?.(event);\n },\n [shouldAnimate, scale, onPressIn],\n );\n\n const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n (event) => {\n setPressed(false);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n }\n onPressOut?.(event);\n },\n [shouldAnimate, scale, onPressOut],\n );\n\n const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n /* --------------------------------- Styles --------------------------------- */\n // Animate pressed state for shadow\n const pressProgress = useDerivedValue(\n () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n [pressed],\n );\n\n // Animate using Unistyles' variant color system + boxShadow from theme\n const animatedRootStyle = useAnimatedStyle(() => {\n // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n const components = animatedTheme.value.components as unknown as Record<\n string,\n Record<string, unknown>\n >;\n const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n | string\n | undefined;\n\n return {\n transform: [{ scale: scale.value }],\n backgroundColor: withTiming(backgroundColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n borderColor: withTiming(borderColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n // Only animate shadow if the theme defines one for this variant\n ...(shadowPressed && {\n boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n }),\n };\n });\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <AnimatedPressable\n ref={ref}\n disabled={isDisabled}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n overflow=\"hidden\"\n accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n accessibilityHint={accessibilityHint}\n accessibilityRole=\"button\"\n accessibilityState={a11yState}\n style={[\n iconButtonStyles.root,\n buttonStyles.root,\n foundationStyles.foundation,\n animatedRootStyle,\n typeof style === 'function' ? style({ pressed }) : style,\n ]}\n {...props}\n >\n {loading ? (\n <ActivityIndicator\n size={iconButtonStyles.icon.fontSize}\n color={resolvedIconColor ?? buttonStyles.icon.color}\n />\n ) : (\n <Icon\n name={name}\n variant={iconVariant}\n style={[iconButtonStyles.icon, buttonStyles.icon]}\n dangerouslySetColor={resolvedIconColor}\n />\n )}\n </AnimatedPressable>\n );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAS,uBAAuB,QAA4B,OAAuB;AACjF;AACA,KAAI,CAAC,OACH,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEJ,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,WACA,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;AACpE,QAAiB,YAAY,EAAE,OAAO,WAAW,CAAC;CAElD,MAAM,oBAAoB,YACrBA,OAAiB,WAAW,QAC7B;CAGJ,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAIN,kBAAkB,QAAQ,iBAAiB;AAI5E,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GAEF,GAAI,iBAAiB,EACnB,WAAW,uBAAuB,eAAe,cAAc,MAAM,EACtE;GACF;GACD;AAGF,QACE,oBAAC;EACM;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbA,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC;GACC,MAAM,iBAAiB,KAAK;GAC5B,OAAO,qBAAqB,aAAa,KAAK;IAC9C,GAEF,oBAAC;GACO;GACN,SAAS;GACT,OAAO,CAAC,iBAAiB,MAAM,aAAa,KAAK;GACjD,qBAAqB;IACrB;GAEc;EAEtB;AAEF,WAAW,cAAc"}
|
|
1
|
+
{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/* Animation Helpers */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n 'worklet';\n if (!shadow) {\n return '';\n }\n if (alpha >= 1) {\n return shadow;\n }\n if (alpha <= 0) {\n return '';\n }\n\n return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n const newAlpha = parseFloat(a) * alpha;\n return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n });\n}\n\n/* -------------------------------------------------------------------------- */\n/* IconButton Props */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n /** Icon to render from the icons package */\n name: IconName;\n /** The visual style variant @default 'primary' */\n variant?: ButtonVariantFlat;\n /** The size of the button @default 'md' */\n size?: IconButtonSize;\n /** The icon style variant @default 'outline' */\n iconVariant?: IconVariant;\n /** Override the icon color token without changing the button variant tokens */\n iconColor?: StyleProps['color'];\n /** Shows a loading spinner and disables the button */\n loading?: boolean;\n /**\n * Disable motion effects (scale on press, icon animations)\n * @default false\n */\n disableEffects?: boolean;\n /** Ref to the underlying View */\n ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* IconButton Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n name,\n variant = 'primary',\n size = 'md',\n iconVariant = 'outline',\n iconColor,\n loading,\n disabled,\n style,\n accessibilityLabel,\n accessibilityHint,\n disableEffects = false,\n onPressIn,\n onPressOut,\n ref,\n ...props\n}: IconButtonProps) {\n const isDisabled = disabled || loading;\n const shouldAnimate = !disableEffects && !isDisabled;\n\n /* --------------------------------- State ---------------------------------- */\n const [pressed, setPressed] = useState(false);\n\n // Apply layer-based styles with compound variant support\n iconButtonStyles.useVariants({ size });\n buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n foundationStyles.useVariants({ color: iconColor });\n\n const resolvedIconColor = iconColor\n ? (foundationStyles.foundation.color as string | undefined)\n : undefined;\n\n // Animate colors using Unistyles' useAnimatedVariantColor\n const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n // Get animated theme for boxShadow\n const animatedTheme = useAnimatedTheme();\n\n /* ------------------------------- Animation -------------------------------- */\n const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n (event) => {\n setPressed(true);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n }\n onPressIn?.(event);\n },\n [shouldAnimate, scale, onPressIn],\n );\n\n const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n (event) => {\n setPressed(false);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n }\n onPressOut?.(event);\n },\n [shouldAnimate, scale, onPressOut],\n );\n\n const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n /* --------------------------------- Styles --------------------------------- */\n // Animate pressed state for shadow\n const pressProgress = useDerivedValue(\n () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n [pressed],\n );\n\n // Animate using Unistyles' variant color system + boxShadow from theme\n const animatedRootStyle = useAnimatedStyle(() => {\n // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n const components = animatedTheme.value.components as unknown as Record<\n string,\n Record<string, unknown>\n >;\n const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n | string\n | undefined;\n\n return {\n transform: [{ scale: scale.value }],\n backgroundColor: withTiming(backgroundColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n borderColor: withTiming(borderColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n // Only animate shadow if the theme defines one for this variant\n ...(shadowPressed && {\n boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n }),\n };\n });\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <AnimatedPressable\n ref={ref}\n disabled={isDisabled}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n overflow=\"hidden\"\n accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n accessibilityHint={accessibilityHint}\n accessibilityRole=\"button\"\n accessibilityState={a11yState}\n style={[\n iconButtonStyles.root,\n buttonStyles.root,\n foundationStyles.foundation,\n animatedRootStyle,\n typeof style === 'function' ? style({ pressed }) : style,\n ]}\n {...props}\n >\n {loading ? (\n <ActivityIndicator\n size={iconButtonStyles.icon.fontSize}\n color={resolvedIconColor ?? buttonStyles.icon.color}\n />\n ) : (\n <Icon\n name={name}\n variant={iconVariant}\n style={[iconButtonStyles.icon, buttonStyles.icon]}\n dangerouslySetColor={resolvedIconColor}\n />\n )}\n </AnimatedPressable>\n );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;AA2BA,SAAS,uBAAuB,QAA4B,OAAuB;AACjF;AACA,KAAI,CAAC,OACH,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEJ,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,WACA,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;AACpE,QAAiB,YAAY,EAAE,OAAO,WAAW,CAAC;CAElD,MAAM,oBAAoB,YACrBA,OAAiB,WAAW,QAC7B,KAAA;CAGJ,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAIN,kBAAkB,QAAQ,iBAAiB;AAI5E,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GAEF,GAAI,iBAAiB,EACnB,WAAW,uBAAuB,eAAe,cAAc,MAAM,EACtE;GACF;GACD;AAGF,QACE,oBAAC,mBAAD;EACO;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbA,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC,mBAAD;GACE,MAAM,iBAAiB,KAAK;GAC5B,OAAO,qBAAqB,aAAa,KAAK;GAC9C,CAAA,GAEF,oBAAC,MAAD;GACQ;GACN,SAAS;GACT,OAAO,CAAC,iBAAiB,MAAM,aAAa,KAAK;GACjD,qBAAqB;GACrB,CAAA;EAEc,CAAA;EAEtB;AAEF,WAAW,cAAc"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
3
|
-
|
|
4
|
-
const require_components_Icon = require(
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_components_Icon = require("./Icon.cjs");
|
|
5
5
|
let react = require("react");
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
7
|
let lodash_es = require("lodash-es");
|
|
8
|
-
|
|
9
8
|
//#region src/components/IconSlot.tsx
|
|
10
9
|
/**
|
|
11
10
|
* **🔌 A helper container to render icons flexibly**
|
|
@@ -56,6 +55,5 @@ const IconSlot = (0, react.memo)(function IconSlot({ icon, ref, ...props }) {
|
|
|
56
55
|
}) : null;
|
|
57
56
|
});
|
|
58
57
|
IconSlot.displayName = "IconSlot";
|
|
59
|
-
|
|
60
58
|
//#endregion
|
|
61
|
-
exports.IconSlot = IconSlot;
|
|
59
|
+
exports.IconSlot = IconSlot;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { IconName, IconProps } from "./Icon.cjs";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { ReactElement, Ref } from "react";
|
|
5
5
|
import { Text } from "react-native";
|
|
6
6
|
|
|
@@ -44,7 +44,7 @@ interface IconSlotProps extends IconPropsWithoutName {
|
|
|
44
44
|
*
|
|
45
45
|
* @see {@link Icon} for direct icon rendering
|
|
46
46
|
*/
|
|
47
|
-
declare const IconSlot: react.NamedExoticComponent<IconSlotProps>;
|
|
47
|
+
declare const IconSlot: _$react.NamedExoticComponent<IconSlotProps>;
|
|
48
48
|
//#endregion
|
|
49
49
|
export { IconSlot, type IconSlotProps, type IconSlotType };
|
|
50
50
|
//# sourceMappingURL=IconSlot.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconSlot.d.cts","names":[],"sources":["../../src/components/IconSlot.tsx"],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,IAAA,CAAK,SAAA;AAAA,KAE5B,YAAA,GACD,QAAA,GACA,YAAA,CAAa,SAAA,MACX,SAAA,EAAW,oBAAA,KAAyB,YAAA,CAAa,SAAA;AAAA,UAE7C,aAAA,SAAsB,oBAAA;EAC9B,GAAA,GAAM,GAAA,CAAI,IAAA;EARa;EAUvB,IAAA,GAAO,YAAA;AAAA;;AAViC;;;;;;;;;;;;;;;;;;;;AAKsB;;;;;;;;;;;cAyC1D,QAAA,EAAQ,
|
|
1
|
+
{"version":3,"file":"IconSlot.d.cts","names":[],"sources":["../../src/components/IconSlot.tsx"],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,IAAA,CAAK,SAAA;AAAA,KAE5B,YAAA,GACD,QAAA,GACA,YAAA,CAAa,SAAA,MACX,SAAA,EAAW,oBAAA,KAAyB,YAAA,CAAa,SAAA;AAAA,UAE7C,aAAA,SAAsB,oBAAA;EAC9B,GAAA,GAAM,GAAA,CAAI,IAAA;EARa;EAUvB,IAAA,GAAO,YAAA;AAAA;;AAViC;;;;;;;;;;;;;;;;;;;;AAKsB;;;;;;;;;;;cAyC1D,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { IconName, IconProps } from "./Icon.js";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { ReactElement, Ref } from "react";
|
|
5
5
|
import { Text } from "react-native";
|
|
6
6
|
|
|
@@ -44,7 +44,7 @@ interface IconSlotProps extends IconPropsWithoutName {
|
|
|
44
44
|
*
|
|
45
45
|
* @see {@link Icon} for direct icon rendering
|
|
46
46
|
*/
|
|
47
|
-
declare const IconSlot: react.NamedExoticComponent<IconSlotProps>;
|
|
47
|
+
declare const IconSlot: _$react.NamedExoticComponent<IconSlotProps>;
|
|
48
48
|
//#endregion
|
|
49
49
|
export { IconSlot, type IconSlotProps, type IconSlotType };
|
|
50
50
|
//# sourceMappingURL=IconSlot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconSlot.d.ts","names":[],"sources":["../../src/components/IconSlot.tsx"],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,IAAA,CAAK,SAAA;AAAA,KAE5B,YAAA,GACD,QAAA,GACA,YAAA,CAAa,SAAA,MACX,SAAA,EAAW,oBAAA,KAAyB,YAAA,CAAa,SAAA;AAAA,UAE7C,aAAA,SAAsB,oBAAA;EAC9B,GAAA,GAAM,GAAA,CAAI,IAAA;EARa;EAUvB,IAAA,GAAO,YAAA;AAAA;;AAViC;;;;;;;;;;;;;;;;;;;;AAKsB;;;;;;;;;;;cAyC1D,QAAA,EAAQ,
|
|
1
|
+
{"version":3,"file":"IconSlot.d.ts","names":[],"sources":["../../src/components/IconSlot.tsx"],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,IAAA,CAAK,SAAA;AAAA,KAE5B,YAAA,GACD,QAAA,GACA,YAAA,CAAa,SAAA,MACX,SAAA,EAAW,oBAAA,KAAyB,YAAA,CAAa,SAAA;AAAA,UAE7C,aAAA,SAAsB,oBAAA;EAC9B,GAAA,GAAM,GAAA,CAAI,IAAA;EARa;EAUvB,IAAA,GAAO,YAAA;AAAA;;AAViC;;;;;;;;;;;;;;;;;;;;AAKsB;;;;;;;;;;;cAyC1D,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}
|
|
@@ -3,7 +3,6 @@ import { Icon } from "./Icon.js";
|
|
|
3
3
|
import { cloneElement, isValidElement, memo } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { isFunction } from "lodash-es";
|
|
6
|
-
|
|
7
6
|
//#region src/components/IconSlot.tsx
|
|
8
7
|
/**
|
|
9
8
|
* **🔌 A helper container to render icons flexibly**
|
|
@@ -54,7 +53,7 @@ const IconSlot = memo(function IconSlot({ icon, ref, ...props }) {
|
|
|
54
53
|
}) : null;
|
|
55
54
|
});
|
|
56
55
|
IconSlot.displayName = "IconSlot";
|
|
57
|
-
|
|
58
56
|
//#endregion
|
|
59
57
|
export { IconSlot };
|
|
58
|
+
|
|
60
59
|
//# sourceMappingURL=IconSlot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconSlot.js","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":["import { isFunction } from 'lodash-es';\nimport type { ReactElement, Ref } from 'react';\nimport { cloneElement, isValidElement, memo } from 'react';\nimport type { Text as RNText } from 'react-native';\n\nimport type { IconName, IconProps } from './Icon';\nimport { Icon } from './Icon';\ntype IconPropsWithoutName = Omit<IconProps, 'name'>;\n\ntype IconSlotType =\n | IconName\n | ReactElement<IconProps>\n | ((iconProps: IconPropsWithoutName) => ReactElement<IconProps>);\n\ninterface IconSlotProps extends IconPropsWithoutName {\n ref?: Ref<RNText>;\n /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n icon?: IconSlotType;\n /** Props to spread onto the icon. */\n}\n\n/**\n * **🔌 A helper container to render icons flexibly**\n *\n * @description\n * Useful in components that use icons and have a startIcon and endIcon. It allows\n * consumers to pass in a standard UDS icon name, an Icon component, or a render function\n * for custom rendering.\n *\n * @category Utility\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconSlot } from '@yahoo/uds-mobile';\n *\n * // Using icon name (preferred - stable reference, no useMemo needed)\n * <IconSlot icon=\"Info\" size=\"md\" variant=\"fill\" />\n *\n * // Using Icon component\n * <IconSlot icon={<Icon name=\"Info\" variant=\"fill\" />} />\n *\n * // Using render function\n * <IconSlot icon={(props) => <Icon name=\"Info\" {...props} variant=\"fill\" />} />\n * ```\n *\n * @usage\n * - Pass icon name for simple usage\n * - Pass Icon component for custom props\n * - Pass function for dynamic rendering\n *\n * @see {@link Icon} for direct icon rendering\n */\nconst IconSlot = memo(function IconSlot({ icon, ref, ...props }: IconSlotProps) {\n if (!icon) {\n return null;\n }\n\n if (typeof icon === 'string') {\n return <Icon ref={ref} name={icon} {...props} />;\n }\n\n if (isFunction(icon)) {\n const iconEl = icon(props);\n return isValidElement(iconEl) ? cloneElement(iconEl, { ...props } as Partial<IconProps>) : null;\n }\n\n return isValidElement(icon)\n ? cloneElement(icon, {\n ...props,\n ...icon.props, // user's props on <Icon>\n } as Partial<IconProps>)\n : null;\n});\n\nIconSlot.displayName = 'IconSlot';\n\nexport { IconSlot, type IconSlotProps, type IconSlotType };\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IconSlot.js","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":["import { isFunction } from 'lodash-es';\nimport type { ReactElement, Ref } from 'react';\nimport { cloneElement, isValidElement, memo } from 'react';\nimport type { Text as RNText } from 'react-native';\n\nimport type { IconName, IconProps } from './Icon';\nimport { Icon } from './Icon';\ntype IconPropsWithoutName = Omit<IconProps, 'name'>;\n\ntype IconSlotType =\n | IconName\n | ReactElement<IconProps>\n | ((iconProps: IconPropsWithoutName) => ReactElement<IconProps>);\n\ninterface IconSlotProps extends IconPropsWithoutName {\n ref?: Ref<RNText>;\n /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n icon?: IconSlotType;\n /** Props to spread onto the icon. */\n}\n\n/**\n * **🔌 A helper container to render icons flexibly**\n *\n * @description\n * Useful in components that use icons and have a startIcon and endIcon. It allows\n * consumers to pass in a standard UDS icon name, an Icon component, or a render function\n * for custom rendering.\n *\n * @category Utility\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconSlot } from '@yahoo/uds-mobile';\n *\n * // Using icon name (preferred - stable reference, no useMemo needed)\n * <IconSlot icon=\"Info\" size=\"md\" variant=\"fill\" />\n *\n * // Using Icon component\n * <IconSlot icon={<Icon name=\"Info\" variant=\"fill\" />} />\n *\n * // Using render function\n * <IconSlot icon={(props) => <Icon name=\"Info\" {...props} variant=\"fill\" />} />\n * ```\n *\n * @usage\n * - Pass icon name for simple usage\n * - Pass Icon component for custom props\n * - Pass function for dynamic rendering\n *\n * @see {@link Icon} for direct icon rendering\n */\nconst IconSlot = memo(function IconSlot({ icon, ref, ...props }: IconSlotProps) {\n if (!icon) {\n return null;\n }\n\n if (typeof icon === 'string') {\n return <Icon ref={ref} name={icon} {...props} />;\n }\n\n if (isFunction(icon)) {\n const iconEl = icon(props);\n return isValidElement(iconEl) ? cloneElement(iconEl, { ...props } as Partial<IconProps>) : null;\n }\n\n return isValidElement(icon)\n ? cloneElement(icon, {\n ...props,\n ...icon.props, // user's props on <Icon>\n } as Partial<IconProps>)\n : null;\n});\n\nIconSlot.displayName = 'IconSlot';\n\nexport { IconSlot, type IconSlotProps, type IconSlotType };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,WAAW,KAAK,SAAS,SAAS,EAAE,MAAM,KAAK,GAAG,SAAwB;AAC9E,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,SAAS,SAClB,QAAO,oBAAC,MAAD;EAAW;EAAK,MAAM;EAAM,GAAI;EAAS,CAAA;AAGlD,KAAI,WAAW,KAAK,EAAE;EACpB,MAAM,SAAS,KAAK,MAAM;AAC1B,SAAO,eAAe,OAAO,GAAG,aAAa,QAAQ,EAAE,GAAG,OAAO,CAAuB,GAAG;;AAG7F,QAAO,eAAe,KAAK,GACvB,aAAa,MAAM;EACjB,GAAG;EACH,GAAG,KAAK;EACT,CAAuB,GACxB;EACJ;AAEF,SAAS,cAAc"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
3
|
-
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
4
|
let react = require("react");
|
|
5
5
|
let react_native = require("react-native");
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
7
|
let generated_styles = require("../../generated/styles");
|
|
8
|
-
|
|
9
8
|
//#region src/components/Image.tsx
|
|
10
9
|
const CONTENT_FIT_TO_RESIZE_MODE = {
|
|
11
10
|
cover: "cover",
|
|
@@ -114,6 +113,5 @@ const Image = (0, react.memo)(function Image({ src, alt, width, height, contentF
|
|
|
114
113
|
});
|
|
115
114
|
});
|
|
116
115
|
Image.displayName = "Image";
|
|
117
|
-
|
|
118
116
|
//#endregion
|
|
119
|
-
exports.Image = Image;
|
|
117
|
+
exports.Image = Image;
|