@yahoo/uds-mobile 2.7.1 → 2.9.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/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 +4 -4
- package/dist/components/Icon.d.cts.map +1 -1
- package/dist/components/Icon.d.ts +4 -4
- 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/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 +8 -11
- package/dist/jest/mocks/styles.js +1 -2
- 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/fonts/uds-icons.ttf +0 -0
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { UniversalImageProps } 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 { Image as Image$1, ImageProps as ImageProps$1 } from "react-native";
|
|
6
6
|
import { StyleProps } from "../../generated/styles";
|
|
@@ -94,7 +94,7 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
|
|
|
94
94
|
*
|
|
95
95
|
* @see {@link Avatar} for user profile images
|
|
96
96
|
*/
|
|
97
|
-
declare const Image: react.NamedExoticComponent<ImageProps>;
|
|
97
|
+
declare const Image: _$react.NamedExoticComponent<ImageProps>;
|
|
98
98
|
//#endregion
|
|
99
99
|
export { Image, type ImageProps };
|
|
100
100
|
//# sourceMappingURL=Image.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.d.cts","names":[],"sources":["../../src/components/Image.tsx"],"mappings":";;;;;;;;KASK,UAAA,GAAa,WAAA,CAAY,mBAAA;AAAA,UAUpB,UAAA,SAAmB,IAAA,CAC3B,YAAA;EAXG;EAeH,GAAA,GAAM,GAAA,CAAI,OAAA;;EAEV,GAAA,EAAK,mBAAA;EAjB0C;EAmB/C,GAAA;EATmB;EAWnB,KAAA;EAVA;EAYA,MAAA;EARM;EAUN,UAAA,GAAa,UAAA;EAEb,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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BL,KAAA,EAAK,
|
|
1
|
+
{"version":3,"file":"Image.d.cts","names":[],"sources":["../../src/components/Image.tsx"],"mappings":";;;;;;;;KASK,UAAA,GAAa,WAAA,CAAY,mBAAA;AAAA,UAUpB,UAAA,SAAmB,IAAA,CAC3B,YAAA;EAXG;EAeH,GAAA,GAAM,GAAA,CAAI,OAAA;;EAEV,GAAA,EAAK,mBAAA;EAjB0C;EAmB/C,GAAA;EATmB;EAWnB,KAAA;EAVA;EAYA,MAAA;EARM;EAUN,UAAA,GAAa,UAAA;EAEb,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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BL,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import { UniversalImageProps } 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 { Image as Image$1, ImageProps as ImageProps$1 } from "react-native";
|
|
6
6
|
import { StyleProps } from "../../generated/styles";
|
|
@@ -94,7 +94,7 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
|
|
|
94
94
|
*
|
|
95
95
|
* @see {@link Avatar} for user profile images
|
|
96
96
|
*/
|
|
97
|
-
declare const Image: react.NamedExoticComponent<ImageProps>;
|
|
97
|
+
declare const Image: _$react.NamedExoticComponent<ImageProps>;
|
|
98
98
|
//#endregion
|
|
99
99
|
export { Image, type ImageProps };
|
|
100
100
|
//# sourceMappingURL=Image.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.d.ts","names":[],"sources":["../../src/components/Image.tsx"],"mappings":";;;;;;;;KASK,UAAA,GAAa,WAAA,CAAY,mBAAA;AAAA,UAUpB,UAAA,SAAmB,IAAA,CAC3B,YAAA;EAXG;EAeH,GAAA,GAAM,GAAA,CAAI,OAAA;;EAEV,GAAA,EAAK,mBAAA;EAjB0C;EAmB/C,GAAA;EATmB;EAWnB,KAAA;EAVA;EAYA,MAAA;EARM;EAUN,UAAA,GAAa,UAAA;EAEb,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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BL,KAAA,EAAK,
|
|
1
|
+
{"version":3,"file":"Image.d.ts","names":[],"sources":["../../src/components/Image.tsx"],"mappings":";;;;;;;;KASK,UAAA,GAAa,WAAA,CAAY,mBAAA;AAAA,UAUpB,UAAA,SAAmB,IAAA,CAC3B,YAAA;EAXG;EAeH,GAAA,GAAM,GAAA,CAAI,OAAA;;EAEV,GAAA,EAAK,mBAAA;EAjB0C;EAmB/C,GAAA;EATmB;EAWnB,KAAA;EAVA;EAYA,MAAA;EARM;EAUN,UAAA,GAAa,UAAA;EAEb,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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BL,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
|
package/dist/components/Image.js
CHANGED
|
@@ -3,7 +3,6 @@ import { memo, useMemo } from "react";
|
|
|
3
3
|
import { Image as Image$1 } from "react-native";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { styles } from "../../generated/styles";
|
|
6
|
-
|
|
7
6
|
//#region src/components/Image.tsx
|
|
8
7
|
const CONTENT_FIT_TO_RESIZE_MODE = {
|
|
9
8
|
cover: "cover",
|
|
@@ -112,7 +111,7 @@ const Image = memo(function Image({ src, alt, width, height, contentFit = "cover
|
|
|
112
111
|
});
|
|
113
112
|
});
|
|
114
113
|
Image.displayName = "Image";
|
|
115
|
-
|
|
116
114
|
//#endregion
|
|
117
115
|
export { Image };
|
|
116
|
+
|
|
118
117
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","names":["RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n cover: 'cover',\n contain: 'contain',\n fill: 'stretch',\n none: 'center',\n 'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n RNImageProps,\n 'source' | 'src' | 'width' | 'height' | 'borderRadius'\n> {\n /** Ref to the underlying Image element */\n ref?: Ref<RNImage>;\n /** Image source URL or require() */\n src: UniversalImageProps['src'];\n /** Alt text for accessibility */\n alt?: string;\n /** Image width */\n width?: number;\n /** Image height */\n height?: number;\n /** How to fit the image within its container */\n contentFit?: ContentFit;\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 alignContent?: StyleProps['alignContent'];\n alignItems?: StyleProps['alignItems'];\n alignSelf?: StyleProps['alignSelf'];\n flex?: StyleProps['flex'];\n flexDirection?: StyleProps['flexDirection'];\n flexGrow?: StyleProps['flexGrow'];\n flexShrink?: StyleProps['flexShrink'];\n flexWrap?: StyleProps['flexWrap'];\n justifyContent?: StyleProps['justifyContent'];\n // Layout\n display?: StyleProps['display'];\n overflow?: StyleProps['overflow'];\n // Spacing\n spacing?: StyleProps['spacing'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingStart?: StyleProps['spacingStart'];\n spacingTop?: StyleProps['spacingTop'];\n offset?: StyleProps['offset'];\n offsetVertical?: StyleProps['offsetVertical'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetStart?: StyleProps['offsetStart'];\n offsetTop?: StyleProps['offsetTop'];\n columnGap?: StyleProps['columnGap'];\n rowGap?: StyleProps['rowGap'];\n}\n\n/**\n * **A component for displaying images**\n *\n * @description\n * Wrapper for the React Native Image component with UDS styling props.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Image } from '@yahoo/uds-mobile';\n *\n * <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n *\n * @usage\n * - Use for displaying remote or local images\n * - Use contentFit to control how the image fills its container\n * - All Box styling props are supported\n *\n * @accessibility\n * - Always provide `alt` prop for screen reader description\n * - Alt text should describe the image content meaningfully\n *\n * @see {@link Avatar} for user profile images\n */\nconst Image = memo(function Image({\n src,\n alt,\n width,\n height,\n contentFit = 'cover',\n style,\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 alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n ref,\n ...props\n}: ImageProps) {\n // Apply styles using useVariants\n styles.useVariants({\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 alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n });\n\n const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n // styles.foundation must be in deps - it returns a new reference when variants change\n const imageStyles = useMemo(\n () => [styles.foundation as ImageStyle, { width, height }, style],\n [styles.foundation, width, height, style],\n );\n\n return (\n <RNImage\n ref={ref}\n source={source}\n accessibilityLabel={alt}\n resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n style={imageStyles}\n {...props}\n />\n );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Image.js","names":["RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n cover: 'cover',\n contain: 'contain',\n fill: 'stretch',\n none: 'center',\n 'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n RNImageProps,\n 'source' | 'src' | 'width' | 'height' | 'borderRadius'\n> {\n /** Ref to the underlying Image element */\n ref?: Ref<RNImage>;\n /** Image source URL or require() */\n src: UniversalImageProps['src'];\n /** Alt text for accessibility */\n alt?: string;\n /** Image width */\n width?: number;\n /** Image height */\n height?: number;\n /** How to fit the image within its container */\n contentFit?: ContentFit;\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 alignContent?: StyleProps['alignContent'];\n alignItems?: StyleProps['alignItems'];\n alignSelf?: StyleProps['alignSelf'];\n flex?: StyleProps['flex'];\n flexDirection?: StyleProps['flexDirection'];\n flexGrow?: StyleProps['flexGrow'];\n flexShrink?: StyleProps['flexShrink'];\n flexWrap?: StyleProps['flexWrap'];\n justifyContent?: StyleProps['justifyContent'];\n // Layout\n display?: StyleProps['display'];\n overflow?: StyleProps['overflow'];\n // Spacing\n spacing?: StyleProps['spacing'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingStart?: StyleProps['spacingStart'];\n spacingTop?: StyleProps['spacingTop'];\n offset?: StyleProps['offset'];\n offsetVertical?: StyleProps['offsetVertical'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetStart?: StyleProps['offsetStart'];\n offsetTop?: StyleProps['offsetTop'];\n columnGap?: StyleProps['columnGap'];\n rowGap?: StyleProps['rowGap'];\n}\n\n/**\n * **A component for displaying images**\n *\n * @description\n * Wrapper for the React Native Image component with UDS styling props.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Image } from '@yahoo/uds-mobile';\n *\n * <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n *\n * @usage\n * - Use for displaying remote or local images\n * - Use contentFit to control how the image fills its container\n * - All Box styling props are supported\n *\n * @accessibility\n * - Always provide `alt` prop for screen reader description\n * - Alt text should describe the image content meaningfully\n *\n * @see {@link Avatar} for user profile images\n */\nconst Image = memo(function Image({\n src,\n alt,\n width,\n height,\n contentFit = 'cover',\n style,\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 alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n ref,\n ...props\n}: ImageProps) {\n // Apply styles using useVariants\n styles.useVariants({\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 alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n });\n\n const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n // styles.foundation must be in deps - it returns a new reference when variants change\n const imageStyles = useMemo(\n () => [styles.foundation as ImageStyle, { width, height }, style],\n [styles.foundation, width, height, style],\n );\n\n return (\n <RNImage\n ref={ref}\n source={source}\n accessibilityLabel={alt}\n resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n style={imageStyles}\n {...props}\n />\n );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;AAWA,MAAM,6BAA2E;CAC/E,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,cAAc;CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGD,MAAM,QAAQ,KAAK,SAAS,MAAM,EAChC,KACA,KACA,OACA,QACA,aAAa,SACb,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,SACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QACA,KACA,GAAG,SACU;AAEb,QAAO,YAAY;EACjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAS,cAAe,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAG,KAAM,CAAC,IAAI,CAAC;CAGnF,MAAM,cAAc,cACZ;EAAC,OAAO;EAA0B;GAAE;GAAO;GAAQ;EAAE;EAAM,EACjE;EAAC,OAAO;EAAY;EAAO;EAAQ;EAAM,CAC1C;AAED,QACE,oBAACA,SAAD;EACO;EACG;EACR,oBAAoB;EACpB,YAAY,2BAA2B;EACvC,OAAO;EACP,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAM,cAAc"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
3
|
-
|
|
4
|
-
const require_components_IconSlot = require(
|
|
5
|
-
const require_components_Text = require(
|
|
6
|
-
const require_components_HStack = require(
|
|
7
|
-
const require_components_VStack = require(
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_components_IconSlot = require("./IconSlot.cjs");
|
|
5
|
+
const require_components_Text = require("./Text.cjs");
|
|
6
|
+
const require_components_HStack = require("./HStack.cjs");
|
|
7
|
+
const require_components_VStack = require("./VStack.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 lodash_es = require("lodash-es");
|
|
13
|
-
|
|
14
13
|
//#region src/components/Input.tsx
|
|
15
14
|
/**
|
|
16
15
|
* **📦 An input that allows users to enter text and collect data.**
|
|
@@ -182,6 +181,5 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
|
|
|
182
181
|
});
|
|
183
182
|
});
|
|
184
183
|
Input.displayName = "Input";
|
|
185
|
-
|
|
186
184
|
//#endregion
|
|
187
|
-
exports.Input = Input;
|
|
185
|
+
exports.Input = Input;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { UniversalInputProps } from "../types/dist/index.cjs";
|
|
3
3
|
import { IconSlotType } from "./IconSlot.cjs";
|
|
4
4
|
import { SizeProps } from "../types.cjs";
|
|
5
|
-
import * as react from "react";
|
|
5
|
+
import * as _$react from "react";
|
|
6
6
|
import { Ref } from "react";
|
|
7
7
|
import { TextInput, TextInputProps } from "react-native";
|
|
8
8
|
|
|
@@ -46,7 +46,7 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
|
|
|
46
46
|
* @see {@link Checkbox} for boolean selections
|
|
47
47
|
* @see {@link Radio} for single-select options
|
|
48
48
|
*/
|
|
49
|
-
declare const Input: react.NamedExoticComponent<InputProps>;
|
|
49
|
+
declare const Input: _$react.NamedExoticComponent<InputProps>;
|
|
50
50
|
//#endregion
|
|
51
51
|
export { Input, type InputProps };
|
|
52
52
|
//# sourceMappingURL=Input.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,
|
|
1
|
+
{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { UniversalInputProps } from "../types/dist/index.js";
|
|
3
3
|
import { IconSlotType } from "./IconSlot.js";
|
|
4
4
|
import { SizeProps } from "../types.js";
|
|
5
|
-
import * as react from "react";
|
|
5
|
+
import * as _$react from "react";
|
|
6
6
|
import { Ref } from "react";
|
|
7
7
|
import { TextInput, TextInputProps } from "react-native";
|
|
8
8
|
|
|
@@ -46,7 +46,7 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
|
|
|
46
46
|
* @see {@link Checkbox} for boolean selections
|
|
47
47
|
* @see {@link Radio} for single-select options
|
|
48
48
|
*/
|
|
49
|
-
declare const Input: react.NamedExoticComponent<InputProps>;
|
|
49
|
+
declare const Input: _$react.NamedExoticComponent<InputProps>;
|
|
50
50
|
//#endregion
|
|
51
51
|
export { Input, type InputProps };
|
|
52
52
|
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
|
package/dist/components/Input.js
CHANGED
|
@@ -8,7 +8,6 @@ import { TextInput, View } from "react-native";
|
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import { inputStyles } from "../../generated/styles";
|
|
10
10
|
import { isFunction } from "lodash-es";
|
|
11
|
-
|
|
12
11
|
//#region src/components/Input.tsx
|
|
13
12
|
/**
|
|
14
13
|
* **📦 An input that allows users to enter text and collect data.**
|
|
@@ -180,7 +179,7 @@ const Input = memo(function Input({ label, size = "md", startIcon, endIcon, help
|
|
|
180
179
|
});
|
|
181
180
|
});
|
|
182
181
|
Input.displayName = "Input";
|
|
183
|
-
|
|
184
182
|
//#endregion
|
|
185
183
|
export { Input };
|
|
184
|
+
|
|
186
185
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n extends\n Omit<UniversalInputProps<IconSlotType>, 'width'>,\n Omit<TextInputProps, 'style' | 'editable'>,\n Pick<SizeProps, 'width'> {\n /** Ref to the underlying TextInput element */\n ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Input Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n // Input props\n label,\n size = 'md',\n startIcon,\n endIcon,\n helpText,\n helperTextIcon,\n hasError,\n disabled,\n readOnly,\n required,\n // Size props\n width = '100%',\n // TextInput props\n defaultValue,\n value: controlledValue,\n onChangeText,\n onFocus,\n onBlur,\n placeholder,\n placeholderTextColor,\n ref,\n ...textInputProps\n}: InputProps) {\n const generatedId = useId();\n const uid = `uds-input-${generatedId}`;\n\n /* --------------------------------- State ---------------------------------- */\n const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n const [isFocused, setIsFocused] = useState(false);\n\n // Support both controlled and uncontrolled modes\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n const valueState = value ? 'filled' : 'empty';\n\n /* -------------------------------- Handlers -------------------------------- */\n const handleChangeText = useCallback(\n (text: string) => {\n if (!isControlled) {\n setInternalValue(text);\n }\n onChangeText?.(text);\n },\n [isControlled, onChangeText],\n );\n\n const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n (e) => {\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n (e) => {\n setIsFocused(false);\n onBlur?.(e);\n },\n [onBlur],\n );\n\n /* --------------------------------- Styles --------------------------------- */\n inputStyles.useVariants({\n size,\n value: valueState,\n disabled,\n pressed: isFocused,\n readonly: readOnly,\n invalid: hasError,\n });\n\n // Get placeholder color from theme styles\n const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n const inputWrapperStyle = useMemo(\n () => [\n inputStyles.inputWrapper,\n { flexDirection: 'row' as const, alignItems: 'center' as const },\n ],\n [inputStyles.inputWrapper],\n );\n\n // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n // - includeFontPadding: false removes Android's extra font padding that can clip text\n // - textAlignVertical: 'center' ensures text is vertically centered in the input\n // - paddingVertical: 0 removes default padding that interferes with flex layout\n const textInputStyle = useMemo(\n () => [\n inputStyles.input,\n {\n flex: 1,\n includeFontPadding: false,\n textAlignVertical: 'center' as const,\n paddingVertical: 0,\n },\n ],\n [inputStyles.input],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n const content = isFunction(label) ? label() : label;\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n <Text style={inputStyles.label}>{content}</Text>\n {required && <Text style={inputStyles.labelRequired}>*</Text>}\n </HStack>\n );\n }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n const startIconContent = useMemo(() => {\n if (!startIcon) {\n return null;\n }\n return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n }, [startIcon, inputStyles.startIcon]);\n\n const endIconContent = useMemo(() => {\n if (!endIcon) {\n return null;\n }\n return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n }, [endIcon, inputStyles.endIcon]);\n\n const helpTextContent = useMemo(() => {\n if (!helpText) {\n return null;\n }\n const content = isFunction(helpText) ? helpText() : helpText;\n return (\n <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n <Text style={inputStyles.helperText}>{content}</Text>\n </HStack>\n );\n }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <VStack style={rootStyle}>\n {labelContent}\n\n <View\n style={inputWrapperStyle}\n accessible\n accessibilityRole=\"none\"\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n >\n {startIconContent}\n\n <TextInput\n ref={ref}\n nativeID={uid}\n value={value}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={placeholder}\n placeholderTextColor={computedPlaceholderColor}\n editable={!disabled && !readOnly}\n style={textInputStyle}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n accessibilityState={{ disabled }}\n {...textInputProps}\n />\n\n {endIconContent}\n </View>\n\n {helpTextContent}\n </VStack>\n );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n extends\n Omit<UniversalInputProps<IconSlotType>, 'width'>,\n Omit<TextInputProps, 'style' | 'editable'>,\n Pick<SizeProps, 'width'> {\n /** Ref to the underlying TextInput element */\n ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Input Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n // Input props\n label,\n size = 'md',\n startIcon,\n endIcon,\n helpText,\n helperTextIcon,\n hasError,\n disabled,\n readOnly,\n required,\n // Size props\n width = '100%',\n // TextInput props\n defaultValue,\n value: controlledValue,\n onChangeText,\n onFocus,\n onBlur,\n placeholder,\n placeholderTextColor,\n ref,\n ...textInputProps\n}: InputProps) {\n const generatedId = useId();\n const uid = `uds-input-${generatedId}`;\n\n /* --------------------------------- State ---------------------------------- */\n const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n const [isFocused, setIsFocused] = useState(false);\n\n // Support both controlled and uncontrolled modes\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n const valueState = value ? 'filled' : 'empty';\n\n /* -------------------------------- Handlers -------------------------------- */\n const handleChangeText = useCallback(\n (text: string) => {\n if (!isControlled) {\n setInternalValue(text);\n }\n onChangeText?.(text);\n },\n [isControlled, onChangeText],\n );\n\n const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n (e) => {\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n (e) => {\n setIsFocused(false);\n onBlur?.(e);\n },\n [onBlur],\n );\n\n /* --------------------------------- Styles --------------------------------- */\n inputStyles.useVariants({\n size,\n value: valueState,\n disabled,\n pressed: isFocused,\n readonly: readOnly,\n invalid: hasError,\n });\n\n // Get placeholder color from theme styles\n const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n const inputWrapperStyle = useMemo(\n () => [\n inputStyles.inputWrapper,\n { flexDirection: 'row' as const, alignItems: 'center' as const },\n ],\n [inputStyles.inputWrapper],\n );\n\n // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n // - includeFontPadding: false removes Android's extra font padding that can clip text\n // - textAlignVertical: 'center' ensures text is vertically centered in the input\n // - paddingVertical: 0 removes default padding that interferes with flex layout\n const textInputStyle = useMemo(\n () => [\n inputStyles.input,\n {\n flex: 1,\n includeFontPadding: false,\n textAlignVertical: 'center' as const,\n paddingVertical: 0,\n },\n ],\n [inputStyles.input],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n const content = isFunction(label) ? label() : label;\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n <Text style={inputStyles.label}>{content}</Text>\n {required && <Text style={inputStyles.labelRequired}>*</Text>}\n </HStack>\n );\n }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n const startIconContent = useMemo(() => {\n if (!startIcon) {\n return null;\n }\n return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n }, [startIcon, inputStyles.startIcon]);\n\n const endIconContent = useMemo(() => {\n if (!endIcon) {\n return null;\n }\n return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n }, [endIcon, inputStyles.endIcon]);\n\n const helpTextContent = useMemo(() => {\n if (!helpText) {\n return null;\n }\n const content = isFunction(helpText) ? helpText() : helpText;\n return (\n <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n <Text style={inputStyles.helperText}>{content}</Text>\n </HStack>\n );\n }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <VStack style={rootStyle}>\n {labelContent}\n\n <View\n style={inputWrapperStyle}\n accessible\n accessibilityRole=\"none\"\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n >\n {startIconContent}\n\n <TextInput\n ref={ref}\n nativeID={uid}\n value={value}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={placeholder}\n placeholderTextColor={computedPlaceholderColor}\n editable={!disabled && !readOnly}\n style={textInputStyle}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n accessibilityState={{ disabled }}\n {...textInputProps}\n />\n\n {endIconContent}\n </View>\n\n {helpTextContent}\n </VStack>\n );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}
|
package/dist/components/Link.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
3
|
-
const require_runtime = require(
|
|
4
|
-
const require_components_IconSlot = require(
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_components_IconSlot = require("./IconSlot.cjs");
|
|
5
5
|
let react = require("react");
|
|
6
6
|
let react_native = require("react-native");
|
|
7
7
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -9,7 +9,6 @@ let generated_styles = require("../../generated/styles");
|
|
|
9
9
|
let react_native_reanimated = require("react-native-reanimated");
|
|
10
10
|
react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
|
|
11
11
|
let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
|
|
12
|
-
|
|
13
12
|
//#region src/components/Link.tsx
|
|
14
13
|
const AnimatedText = react_native_reanimated.default.Text;
|
|
15
14
|
const noUnderline = { textDecorationLine: "none" };
|
|
@@ -150,6 +149,5 @@ const Link = (0, react.memo)(function Link({ children, variant = "primary", text
|
|
|
150
149
|
});
|
|
151
150
|
});
|
|
152
151
|
Link.displayName = "Link";
|
|
153
|
-
|
|
154
152
|
//#endregion
|
|
155
|
-
exports.Link = Link;
|
|
153
|
+
exports.Link = Link;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { UniversalLinkProps } from "../types/dist/index.cjs";
|
|
3
3
|
import { IconSlotType } from "./IconSlot.cjs";
|
|
4
4
|
import { TextProps as TextProps$1 } from "./Text.cjs";
|
|
5
|
-
import * as react from "react";
|
|
5
|
+
import * as _$react from "react";
|
|
6
6
|
import { ReactNode, Ref } from "react";
|
|
7
7
|
import { Text, TextStyle } from "react-native";
|
|
8
8
|
|
|
@@ -55,7 +55,7 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
|
|
|
55
55
|
* @see {@link Button} for primary actions
|
|
56
56
|
* @see {@link Text} for non-interactive text
|
|
57
57
|
*/
|
|
58
|
-
declare const Link: react.NamedExoticComponent<LinkProps>;
|
|
58
|
+
declare const Link: _$react.NamedExoticComponent<LinkProps>;
|
|
59
59
|
//#endregion
|
|
60
60
|
export { Link, type LinkProps };
|
|
61
61
|
//# sourceMappingURL=Link.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,kBAAA,CAAmB,YAAA;;EAE7C,KAAA,GAAQ,SAAA;EAFU;EAIlB,OAAA,GAAU,WAAA;EAJmC;EAM7C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFA;EAIV,QAAA,GAAW,SAAA;AAAA;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;cAyChB,IAAA,EAAI,
|
|
1
|
+
{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,kBAAA,CAAmB,YAAA;;EAE7C,KAAA,GAAQ,SAAA;EAFU;EAIlB,OAAA,GAAU,WAAA;EAJmC;EAM7C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFA;EAIV,QAAA,GAAW,SAAA;AAAA;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;cAyChB,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { UniversalLinkProps } from "../types/dist/index.js";
|
|
3
3
|
import { IconSlotType } from "./IconSlot.js";
|
|
4
4
|
import { TextProps as TextProps$1 } from "./Text.js";
|
|
5
|
-
import * as react from "react";
|
|
5
|
+
import * as _$react from "react";
|
|
6
6
|
import { ReactNode, Ref } from "react";
|
|
7
7
|
import { Text, TextStyle } from "react-native";
|
|
8
8
|
|
|
@@ -55,7 +55,7 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
|
|
|
55
55
|
* @see {@link Button} for primary actions
|
|
56
56
|
* @see {@link Text} for non-interactive text
|
|
57
57
|
*/
|
|
58
|
-
declare const Link: react.NamedExoticComponent<LinkProps>;
|
|
58
|
+
declare const Link: _$react.NamedExoticComponent<LinkProps>;
|
|
59
59
|
//#endregion
|
|
60
60
|
export { Link, type LinkProps };
|
|
61
61
|
//# sourceMappingURL=Link.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","names":[],"sources":["../../src/components/Link.tsx"],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,kBAAA,CAAmB,YAAA;;EAE7C,KAAA,GAAQ,SAAA;EAFU;EAIlB,OAAA,GAAU,WAAA;EAJmC;EAM7C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFA;EAIV,QAAA,GAAW,SAAA;AAAA;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;cAyChB,IAAA,EAAI,
|
|
1
|
+
{"version":3,"file":"Link.d.ts","names":[],"sources":["../../src/components/Link.tsx"],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,kBAAA,CAAmB,YAAA;;EAE7C,KAAA,GAAQ,SAAA;EAFU;EAIlB,OAAA,GAAU,WAAA;EAJmC;EAM7C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFA;EAIV,QAAA,GAAW,SAAA;AAAA;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;cAyChB,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
|
package/dist/components/Link.js
CHANGED
|
@@ -6,7 +6,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import { linkStyles } from "../../generated/styles";
|
|
7
7
|
import Animated, { Easing, interpolateColor, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
|
|
8
8
|
import { useAnimatedTheme } from "react-native-unistyles/reanimated";
|
|
9
|
-
|
|
10
9
|
//#region src/components/Link.tsx
|
|
11
10
|
const AnimatedText = Animated.Text;
|
|
12
11
|
const noUnderline = { textDecorationLine: "none" };
|
|
@@ -147,7 +146,7 @@ const Link = memo(function Link({ children, variant = "primary", textVariant, al
|
|
|
147
146
|
});
|
|
148
147
|
});
|
|
149
148
|
Link.displayName = "Link";
|
|
150
|
-
|
|
151
149
|
//#endregion
|
|
152
150
|
export { Link };
|
|
151
|
+
|
|
153
152
|
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds-types';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { GestureResponderEvent, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\nimport Animated, {\n Easing,\n interpolateColor,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { linkStyles } from '../../generated/styles';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\n\nconst AnimatedText = Animated.Text;\n\n// Prevent icons from inheriting underline from parent/theme (matches web behavior)\nconst noUnderline: TextStyle = { textDecorationLine: 'none' };\n\ninterface LinkProps extends UniversalLinkProps<IconSlotType> {\n /** Style override for the link text */\n style?: TextStyle;\n /** Callback fired when the link is pressed */\n onPress?: TextProps['onPress'];\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** Link content, typically text */\n children?: ReactNode;\n}\n\n/**\n * **🔗 A navigation link component**\n *\n * @description\n * A styled link component for navigation. Rendered as Text so it can be\n * nested inline within other Text. Supports optional start/end icons.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Link } from '@yahoo/uds-mobile';\n *\n * // Standalone link\n * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>\n *\n * // Inline within text\n * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>\n *\n * // With icons\n * <Link startIcon=\"AffiliateLink\">External link</Link>\n * <Link endIcon=\"ChevronRight\">Navigate forward</Link>\n * ```\n *\n * @usage\n * - Use for navigation actions\n * - Can be nested within Text for inline links\n * - Use alwaysUnderline for links that need to be visually distinct\n *\n * @accessibility\n * - Link text is the accessible name\n * - Shows underline on press for visual feedback\n * - Use descriptive link text (avoid \"click here\")\n *\n * @see {@link Button} for primary actions\n * @see {@link Text} for non-interactive text\n */\nconst Link = memo(function Link({\n children,\n variant = 'primary',\n textVariant,\n alwaysUnderline = false,\n startIcon,\n endIcon,\n onPress,\n style,\n ref,\n ...rest\n}: LinkProps) {\n const [pressed, setPressed] = useState(false);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n // Must have onPress for touch events to register (RN requirement)\n // Even without a user-provided handler, we need a function to make text touchable\n const handlePress = useCallback(\n (event: GestureResponderEvent) => {\n onPress?.(event);\n },\n [onPress],\n );\n\n linkStyles.useVariants({\n textStyle: textVariant,\n variant,\n pressed,\n });\n\n // Get theme as SharedValue for worklet access (zero re-renders)\n const animatedTheme = useAnimatedTheme();\n\n // Derive underline visibility from pressed state\n // useDerivedValue handles the animation automatically when deps change\n const underlineProgress = useDerivedValue(() => {\n const targetValue = pressed || alwaysUnderline ? 1 : 0;\n return withTiming(targetValue, {\n duration: 150,\n easing: Easing.bezier(0, 0, 0.2, 1),\n });\n }, [pressed, alwaysUnderline]);\n\n // Combined animated style for color and underline\n const animatedTextStyle = useAnimatedStyle(() => {\n // Access text color from theme using variant path\n const components = animatedTheme.value.components;\n const state = pressed ? 'pressed' : 'rest';\n const textVariantPath = `link/variant/${variant}/rootText/${state}` as const;\n const textColor = components[textVariantPath]?.color;\n\n if (!textColor) {\n return {};\n }\n\n const color = withTiming(textColor, {\n duration: 150,\n easing: Easing.bezier(0, 0, 0.2, 1),\n });\n\n // Interpolate underline opacity: 0 = transparent, 1 = text color\n const underlineColor = interpolateColor(\n underlineProgress.value,\n [0, 1],\n ['transparent', textColor],\n );\n\n return {\n color,\n textDecorationColor: underlineColor,\n };\n });\n\n const textStyles = useMemo(() => {\n return [linkStyles.root, linkStyles.text, animatedTextStyle, style];\n }, [linkStyles.text, animatedTextStyle, style, linkStyles.root]);\n\n const startIconStyles = useMemo(() => {\n return [linkStyles.icon, linkStyles.iconStart, noUnderline];\n }, [linkStyles.icon, linkStyles.iconStart, noUnderline]);\n\n const endIconStyles = useMemo(() => {\n return [linkStyles.icon, linkStyles.iconEnd, noUnderline];\n }, [linkStyles.icon, linkStyles.iconEnd, noUnderline]);\n\n return (\n <AnimatedText\n ref={ref}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n suppressHighlighting\n style={textStyles}\n {...rest}\n >\n {startIcon && (\n <>\n <IconSlot icon={startIcon} variant=\"outline\" style={startIconStyles} />\n {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n <RNText style={noUnderline}>{' \\u200A'}</RNText>\n </>\n )}\n {children}\n {endIcon && (\n <>\n {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n <RNText style={noUnderline}>{' \\u200A'}</RNText>\n <IconSlot icon={endIcon} variant=\"outline\" style={endIconStyles} />\n </>\n )}\n </AnimatedText>\n );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.js","names":["RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds-types';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { GestureResponderEvent, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\nimport Animated, {\n Easing,\n interpolateColor,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { linkStyles } from '../../generated/styles';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\n\nconst AnimatedText = Animated.Text;\n\n// Prevent icons from inheriting underline from parent/theme (matches web behavior)\nconst noUnderline: TextStyle = { textDecorationLine: 'none' };\n\ninterface LinkProps extends UniversalLinkProps<IconSlotType> {\n /** Style override for the link text */\n style?: TextStyle;\n /** Callback fired when the link is pressed */\n onPress?: TextProps['onPress'];\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** Link content, typically text */\n children?: ReactNode;\n}\n\n/**\n * **🔗 A navigation link component**\n *\n * @description\n * A styled link component for navigation. Rendered as Text so it can be\n * nested inline within other Text. Supports optional start/end icons.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Link } from '@yahoo/uds-mobile';\n *\n * // Standalone link\n * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>\n *\n * // Inline within text\n * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>\n *\n * // With icons\n * <Link startIcon=\"AffiliateLink\">External link</Link>\n * <Link endIcon=\"ChevronRight\">Navigate forward</Link>\n * ```\n *\n * @usage\n * - Use for navigation actions\n * - Can be nested within Text for inline links\n * - Use alwaysUnderline for links that need to be visually distinct\n *\n * @accessibility\n * - Link text is the accessible name\n * - Shows underline on press for visual feedback\n * - Use descriptive link text (avoid \"click here\")\n *\n * @see {@link Button} for primary actions\n * @see {@link Text} for non-interactive text\n */\nconst Link = memo(function Link({\n children,\n variant = 'primary',\n textVariant,\n alwaysUnderline = false,\n startIcon,\n endIcon,\n onPress,\n style,\n ref,\n ...rest\n}: LinkProps) {\n const [pressed, setPressed] = useState(false);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n // Must have onPress for touch events to register (RN requirement)\n // Even without a user-provided handler, we need a function to make text touchable\n const handlePress = useCallback(\n (event: GestureResponderEvent) => {\n onPress?.(event);\n },\n [onPress],\n );\n\n linkStyles.useVariants({\n textStyle: textVariant,\n variant,\n pressed,\n });\n\n // Get theme as SharedValue for worklet access (zero re-renders)\n const animatedTheme = useAnimatedTheme();\n\n // Derive underline visibility from pressed state\n // useDerivedValue handles the animation automatically when deps change\n const underlineProgress = useDerivedValue(() => {\n const targetValue = pressed || alwaysUnderline ? 1 : 0;\n return withTiming(targetValue, {\n duration: 150,\n easing: Easing.bezier(0, 0, 0.2, 1),\n });\n }, [pressed, alwaysUnderline]);\n\n // Combined animated style for color and underline\n const animatedTextStyle = useAnimatedStyle(() => {\n // Access text color from theme using variant path\n const components = animatedTheme.value.components;\n const state = pressed ? 'pressed' : 'rest';\n const textVariantPath = `link/variant/${variant}/rootText/${state}` as const;\n const textColor = components[textVariantPath]?.color;\n\n if (!textColor) {\n return {};\n }\n\n const color = withTiming(textColor, {\n duration: 150,\n easing: Easing.bezier(0, 0, 0.2, 1),\n });\n\n // Interpolate underline opacity: 0 = transparent, 1 = text color\n const underlineColor = interpolateColor(\n underlineProgress.value,\n [0, 1],\n ['transparent', textColor],\n );\n\n return {\n color,\n textDecorationColor: underlineColor,\n };\n });\n\n const textStyles = useMemo(() => {\n return [linkStyles.root, linkStyles.text, animatedTextStyle, style];\n }, [linkStyles.text, animatedTextStyle, style, linkStyles.root]);\n\n const startIconStyles = useMemo(() => {\n return [linkStyles.icon, linkStyles.iconStart, noUnderline];\n }, [linkStyles.icon, linkStyles.iconStart, noUnderline]);\n\n const endIconStyles = useMemo(() => {\n return [linkStyles.icon, linkStyles.iconEnd, noUnderline];\n }, [linkStyles.icon, linkStyles.iconEnd, noUnderline]);\n\n return (\n <AnimatedText\n ref={ref}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n suppressHighlighting\n style={textStyles}\n {...rest}\n >\n {startIcon && (\n <>\n <IconSlot icon={startIcon} variant=\"outline\" style={startIconStyles} />\n {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n <RNText style={noUnderline}>{' \\u200A'}</RNText>\n </>\n )}\n {children}\n {endIcon && (\n <>\n {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n <RNText style={noUnderline}>{' \\u200A'}</RNText>\n <IconSlot icon={endIcon} variant=\"outline\" style={endIconStyles} />\n </>\n )}\n </AnimatedText>\n );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;;;;AAmBA,MAAM,eAAe,SAAS;AAG9B,MAAM,cAAyB,EAAE,oBAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmD7D,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UACA,UAAU,WACV,aACA,kBAAkB,OAClB,WACA,SACA,SACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,kBAAkB;AACtC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;AACvC,aAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,cAAc,aACjB,UAAiC;AAChC,YAAU,MAAM;IAElB,CAAC,QAAQ,CACV;AAED,YAAW,YAAY;EACrB,WAAW;EACX;EACA;EACD,CAAC;CAGF,MAAM,gBAAgB,kBAAkB;CAIxC,MAAM,oBAAoB,sBAAsB;AAE9C,SAAO,WADa,WAAW,kBAAkB,IAAI,GACtB;GAC7B,UAAU;GACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;GACpC,CAAC;IACD,CAAC,SAAS,gBAAgB,CAAC;CAG9B,MAAM,oBAAoB,uBAAuB;EAK/C,MAAM,YAHa,cAAc,MAAM,WAGV,gBADW,QAAQ,YADlC,UAAU,YAAY,WAEW;AAE/C,MAAI,CAAC,UACH,QAAO,EAAE;AAeX,SAAO;GACL,OAbY,WAAW,WAAW;IAClC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAUM;GACL,qBARqB,iBACrB,kBAAkB,OAClB,CAAC,GAAG,EAAE,EACN,CAAC,eAAe,UAAU,CAKS;GACpC;GACD;CAEF,MAAM,aAAa,cAAc;AAC/B,SAAO;GAAC,WAAW;GAAM,WAAW;GAAM;GAAmB;GAAM;IAClE;EAAC,WAAW;EAAM;EAAmB;EAAO,WAAW;EAAK,CAAC;CAEhE,MAAM,kBAAkB,cAAc;AACpC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAW;GAAY;IAC1D;EAAC,WAAW;EAAM,WAAW;EAAW;EAAY,CAAC;CAExD,MAAM,gBAAgB,cAAc;AAClC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAS;GAAY;IACxD;EAAC,WAAW;EAAM,WAAW;EAAS;EAAY,CAAC;AAEtD,QACE,qBAAC,cAAD;EACO;EACL,SAAS;EACT,WAAW;EACX,YAAY;EACZ,sBAAA;EACA,OAAO;EACP,GAAI;YAPN;GASG,aACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD;IAAU,MAAM;IAAW,SAAQ;IAAU,OAAO;IAAmB,CAAA,EAEvE,oBAACA,MAAD;IAAQ,OAAO;cAAc;IAAmB,CAAA,CAC/C,EAAA,CAAA;GAEJ;GACA,WACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAACA,MAAD;IAAQ,OAAO;cAAc;IAAmB,CAAA,EAChD,oBAAC,UAAD;IAAU,MAAM;IAAS,SAAQ;IAAU,OAAO;IAAiB,CAAA,CAClE,EAAA,CAAA;GAEQ;;EAEjB;AAEF,KAAK,cAAc"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
3
|
-
const require_runtime = require(
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const require_runtime = 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
8
|
let react_native_reanimated = require("react-native-reanimated");
|
|
9
9
|
react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
|
|
10
|
-
|
|
11
10
|
//#region src/components/Pressable.tsx
|
|
12
11
|
/**
|
|
13
12
|
* **👆 A pressable component with UDS styling**
|
|
@@ -126,7 +125,6 @@ const Pressable = (0, react.memo)(function Pressable({ backgroundColor, borderRa
|
|
|
126
125
|
});
|
|
127
126
|
Pressable.displayName = "Pressable";
|
|
128
127
|
const AnimatedPressable = react_native_reanimated.default.createAnimatedComponent(Pressable);
|
|
129
|
-
|
|
130
128
|
//#endregion
|
|
131
129
|
exports.AnimatedPressable = AnimatedPressable;
|
|
132
|
-
exports.Pressable = Pressable;
|
|
130
|
+
exports.Pressable = Pressable;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
|
|
2
2
|
import { SizeProps } from "../types.cjs";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { Ref } from "react";
|
|
5
5
|
import { PressableProps as PressableProps$1, View } from "react-native";
|
|
6
6
|
import { StyleProps } from "../../generated/styles";
|
|
7
|
-
import * as react_native_reanimated_lib_typescript_createAnimatedComponent0 from "react-native-reanimated/lib/typescript/createAnimatedComponent";
|
|
7
|
+
import * as _$react_native_reanimated_lib_typescript_createAnimatedComponent0 from "react-native-reanimated/lib/typescript/createAnimatedComponent";
|
|
8
8
|
|
|
9
9
|
//#region src/components/Pressable.d.ts
|
|
10
10
|
interface PressableProps extends PressableProps$1, SizeProps {
|
|
@@ -96,8 +96,8 @@ interface PressableProps extends PressableProps$1, SizeProps {
|
|
|
96
96
|
* @see {@link Button} for standard button actions
|
|
97
97
|
* @see {@link Box} for non-interactive containers
|
|
98
98
|
*/
|
|
99
|
-
declare const Pressable: react.NamedExoticComponent<PressableProps>;
|
|
100
|
-
declare const AnimatedPressable: react_native_reanimated_lib_typescript_createAnimatedComponent0.AnimatedComponentType<Readonly<PressableProps>, react.NamedExoticComponent<PressableProps>>;
|
|
99
|
+
declare const Pressable: _$react.NamedExoticComponent<PressableProps>;
|
|
100
|
+
declare const AnimatedPressable: _$react_native_reanimated_lib_typescript_createAnimatedComponent0.AnimatedComponentType<Readonly<PressableProps>, _$react.NamedExoticComponent<PressableProps>>;
|
|
101
101
|
//#endregion
|
|
102
102
|
export { AnimatedPressable, Pressable, type PressableProps };
|
|
103
103
|
//# sourceMappingURL=Pressable.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pressable.d.cts","names":[],"sources":["../../src/components/Pressable.tsx"],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,gBAAA,EAAkB,SAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;;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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EAET,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyCI,SAAA,EAAS,
|
|
1
|
+
{"version":3,"file":"Pressable.d.cts","names":[],"sources":["../../src/components/Pressable.tsx"],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,gBAAA,EAAkB,SAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;;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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EAET,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyCI,SAAA,EAAS,OAAA,CAAA,oBAAA,CAAA,cAAA;AAAA,cAoJT,iBAAA,EAAiB,iEAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,cAAA,GAAA,OAAA,CAAA,oBAAA,CAAA,cAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
|
|
2
2
|
import { SizeProps } from "../types.js";
|
|
3
|
-
import * as react from "react";
|
|
3
|
+
import * as _$react from "react";
|
|
4
4
|
import { Ref } from "react";
|
|
5
5
|
import { PressableProps as PressableProps$1, View } from "react-native";
|
|
6
6
|
import { StyleProps } from "../../generated/styles";
|
|
7
|
-
import * as react_native_reanimated_lib_typescript_createAnimatedComponent0 from "react-native-reanimated/lib/typescript/createAnimatedComponent";
|
|
7
|
+
import * as _$react_native_reanimated_lib_typescript_createAnimatedComponent0 from "react-native-reanimated/lib/typescript/createAnimatedComponent";
|
|
8
8
|
|
|
9
9
|
//#region src/components/Pressable.d.ts
|
|
10
10
|
interface PressableProps extends PressableProps$1, SizeProps {
|
|
@@ -96,8 +96,8 @@ interface PressableProps extends PressableProps$1, SizeProps {
|
|
|
96
96
|
* @see {@link Button} for standard button actions
|
|
97
97
|
* @see {@link Box} for non-interactive containers
|
|
98
98
|
*/
|
|
99
|
-
declare const Pressable: react.NamedExoticComponent<PressableProps>;
|
|
100
|
-
declare const AnimatedPressable: react_native_reanimated_lib_typescript_createAnimatedComponent0.AnimatedComponentType<Readonly<PressableProps>, react.NamedExoticComponent<PressableProps>>;
|
|
99
|
+
declare const Pressable: _$react.NamedExoticComponent<PressableProps>;
|
|
100
|
+
declare const AnimatedPressable: _$react_native_reanimated_lib_typescript_createAnimatedComponent0.AnimatedComponentType<Readonly<PressableProps>, _$react.NamedExoticComponent<PressableProps>>;
|
|
101
101
|
//#endregion
|
|
102
102
|
export { AnimatedPressable, Pressable, type PressableProps };
|
|
103
103
|
//# sourceMappingURL=Pressable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pressable.d.ts","names":[],"sources":["../../src/components/Pressable.tsx"],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,gBAAA,EAAkB,SAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;;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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EAET,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyCI,SAAA,EAAS,
|
|
1
|
+
{"version":3,"file":"Pressable.d.ts","names":[],"sources":["../../src/components/Pressable.tsx"],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,gBAAA,EAAkB,SAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;;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,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EAET,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyCI,SAAA,EAAS,OAAA,CAAA,oBAAA,CAAA,cAAA;AAAA,cAoJT,iBAAA,EAAiB,iEAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,cAAA,GAAA,OAAA,CAAA,oBAAA,CAAA,cAAA"}
|
|
@@ -4,7 +4,6 @@ import { Pressable as Pressable$1 } from "react-native";
|
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { styles } from "../../generated/styles";
|
|
6
6
|
import Animated from "react-native-reanimated";
|
|
7
|
-
|
|
8
7
|
//#region src/components/Pressable.tsx
|
|
9
8
|
/**
|
|
10
9
|
* **👆 A pressable component with UDS styling**
|
|
@@ -123,7 +122,7 @@ const Pressable = memo(function Pressable({ backgroundColor, borderRadius, borde
|
|
|
123
122
|
});
|
|
124
123
|
Pressable.displayName = "Pressable";
|
|
125
124
|
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
|
|
126
|
-
|
|
127
125
|
//#endregion
|
|
128
126
|
export { AnimatedPressable, Pressable };
|
|
127
|
+
|
|
129
128
|
//# sourceMappingURL=Pressable.js.map
|