@yahoo/uds-mobile 1.0.0

package/dist/components/Icon.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;;EAHP,IAAA,EAKG,QALK;EAEH;EAAuB,IAAA,CAAA,EAKxB,QALwB;EACrB;EAAJ,KAAA,CAAA,EAME,UANF,CAAA,OAAA,CAAA;EAEA;EAEC,OAAA,CAAA,EAIG,WAJH;EAEC,eAAA,CAAA,EAIU,UAJV,CAAA,iBAAA,CAAA;EAEE,YAAA,CAAA,EAIK,UAJL,CAAA,cAAA,CAAA;EAEQ,oBAAA,CAAA,EAGK,UAHL,CAAA,sBAAA,CAAA;EAEH,kBAAA,CAAA,EAEM,UAFN,CAAA,oBAAA,CAAA;EACQ,uBAAA,CAAA,EAEG,UAFH,CAAA,yBAAA,CAAA;EACF,qBAAA,CAAA,EAEG,UAFH,CAAA,uBAAA,CAAA;EACK,WAAA,CAAA,EAEZ,UAFY,CAAA,aAAA,CAAA;EACF,gBAAA,CAAA,EAEL,UAFK,CAAA,kBAAA,CAAA;EACV,cAAA,CAAA,EAEG,UAFH,CAAA,gBAAA,CAAA;EACK,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,WAAA,CAAA,EAEH,UAFG,CAAA,aAAA,CAAA;EACG,mBAAA,CAAA,EAEE,UAFF,CAAA,qBAAA,CAAA;EACN,qBAAA,CAAA,EAEU,UAFV,CAAA,uBAAA,CAAA;EACQ,gBAAA,CAAA,EAEH,UAFG,CAAA,kBAAA,CAAA;EACE,cAAA,CAAA,EAEP,UAFO,CAAA,gBAAA,CAAA;EACL,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,UAAA,CAAA,EAGJ,UAHI,CAAA,YAAA,CAAA;EACG,YAAA,CAAA,EAIL,UAJK,CAAA,cAAA,CAAA;EAEP,UAAA,CAAA,EAGA,UAHA,CAAA,YAAA,CAAA;EAEE,UAAA,CAAA,EAEF,UAFE,CAAA,YAAA,CAAA;EACF,aAAA,CAAA,EAEG,UAFH,CAAA,eAAA,CAAA;EACA,iBAAA,CAAA,EAEO,UAFP,CAAA,mBAAA,CAAA;EACG,eAAA,CAAA,EAEE,UAFF,CAAA,iBAAA,CAAA;EACI,OAAA,CAAA,EAEV,UAFU,CAAA,SAAA,CAAA;EACF,WAAA,CAAA,EAGJ,UAHI,CAAA,aAAA,CAAA;EACR,SAAA,CAAA,EAGE,UAHF,CAAA,WAAA,CAAA;EAEI,SAAA,CAAA,EAEF,UAFE,CAAA,WAAA,CAAA;EACF,YAAA,CAAA,EAEG,UAFH,CAAA,cAAA,CAAA;EACA,gBAAA,CAAA,EAEO,UAFP,CAAA,kBAAA,CAAA;EACG,cAAA,CAAA,EAEE,UAFF,CAAA,gBAAA,CAAA;EACI,MAAA,CAAA,EAEV,UAFU,CAAA,QAAA,CAAA;EACF;EACR,mBAAA,CAAA,EAAA,MAAA;EAMS;EAAV,kBAAA,CAAA,EAAA,MAAA;EArDkB;EAAI,KAAA,CAAA,EAqDtB,SArDsB,CAqDZ,SArDY,CAAA;AAAA;AAuQhC;AACA;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,OAAA,CAAA,qBAAA;cAaG;cACA"}

package/dist/components/Icon.d.mts

@@ -0,0 +1,90 @@
+
+import { IconSize, IconVariant } from "../icons/dist/types.mjs";
+import "../uds/dist/index.mjs";
+import { GlyphName } from "../icons/dist/glyphMap.mjs";
+import { SvgGlyphName } from "../icons/dist/svgMap.mjs";
+import * as react18 from "react";
+import { Ref } from "react";
+import { StyleProp, Text, TextProps, TextStyle } from "react-native";
+import { StyleProps } from "../../generated/styles";
+
+//#region src/components/Icon.d.ts
+type IconName = GlyphName | SvgGlyphName;
+interface IconProps extends Omit<TextProps, 'style'> {
+  ref?: Ref<Text>;
+  /** The icon name */
+  name: IconName;
+  /** Icon size */
+  size?: IconSize;
+  /** Icon color */
+  color?: StyleProps['color'];
+  /** Icon variant (outline, fill, multicolor) */
+  variant?: IconVariant;
+  backgroundColor?: StyleProps['backgroundColor'];
+  borderRadius?: StyleProps['borderRadius'];
+  borderTopStartRadius?: StyleProps['borderTopStartRadius'];
+  borderTopEndRadius?: StyleProps['borderTopEndRadius'];
+  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];
+  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];
+  borderColor?: StyleProps['borderColor'];
+  borderStartColor?: StyleProps['borderStartColor'];
+  borderEndColor?: StyleProps['borderEndColor'];
+  borderTopColor?: StyleProps['borderTopColor'];
+  borderBottomColor?: StyleProps['borderBottomColor'];
+  borderWidth?: StyleProps['borderWidth'];
+  borderVerticalWidth?: StyleProps['borderVerticalWidth'];
+  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];
+  borderStartWidth?: StyleProps['borderStartWidth'];
+  borderEndWidth?: StyleProps['borderEndWidth'];
+  borderTopWidth?: StyleProps['borderTopWidth'];
+  borderBottomWidth?: StyleProps['borderBottomWidth'];
+  flexShrink?: StyleProps['flexShrink'];
+  spacingStart?: StyleProps['spacingStart'];
+  spacingEnd?: StyleProps['spacingEnd'];
+  spacingTop?: StyleProps['spacingTop'];
+  spacingBottom?: StyleProps['spacingBottom'];
+  spacingHorizontal?: StyleProps['spacingHorizontal'];
+  spacingVertical?: StyleProps['spacingVertical'];
+  spacing?: StyleProps['spacing'];
+  offsetStart?: StyleProps['offsetStart'];
+  offsetEnd?: StyleProps['offsetEnd'];
+  offsetTop?: StyleProps['offsetTop'];
+  offsetBottom?: StyleProps['offsetBottom'];
+  offsetHorizontal?: StyleProps['offsetHorizontal'];
+  offsetVertical?: StyleProps['offsetVertical'];
+  offset?: StyleProps['offset'];
+  /** Icon color override */
+  dangerouslySetColor?: string;
+  /** Icon font size override */
+  dangerouslySetSize?: number;
+  /** Optional style override */
+  style?: StyleProp<TextStyle>;
+}
+/**
+ * **🎨 An icon component using UDS icon fonts**
+ *
+ * @description
+ * Renders icons from the UDS icon library. Supports multiple variants
+ * (outline, fill, multicolor) and sizes.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@yahoo/uds-mobile';
+ *
+ * <Icon name="ChevronRight" size="md" color="primary" />
+ * <Icon name="Star" variant="fill" color="accent" />
+ * ```
+ *
+ * @usage
+ * - Use name prop to specify the icon
+ * - Use variant prop for outline/fill/multicolor
+ * - Use size prop for icon size (xs, sm, md, lg, xl)
+ *
+ * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ */
+declare const Icon: react18.NamedExoticComponent<IconProps>;
+declare const iconNames: readonly ["A11Y", "Accessible", "AccountRecover", "AccountRefresh", "AccountSwitchAlt", "AccountSwitcher", "AcousticGuitar", "Add", "AddBell", "AddCalendar", "AddCheckCircle", "AddCircle", "AddContactCard", "AddDocument", "AddFace", "AddFolder", "AddPaperPlane", "AddPeople", "AddQuestion", "AddSearch", "AddSquare", "AffiliateLink", "AirQuality", "Airplane", "AirplaneLanding", "AirplaneTakeOff", "AngledSquareOnSquare", "AnyFile", "AppSwitcher", "AquariusAstrology", "Archive", "AriesAstrology", "ArrowDown", "ArrowDownCircle", "ArrowLeft", "ArrowLineDown", "ArrowLineUp", "ArrowRight", "ArrowUp", "Article", "ArtisticGymnastics", "Ascender", "AudioFile", "Authenticator", "AutoDownload", "AutoSaveOffline", "AutoSaveSync", "AutoSaveUpload", "AutoSaveUploadFail", "AutoSaved", "BabyBottle", "BackTimeTen", "Badge", "Balance", "BallInWater", "Barometer", "BaseBallBat", "Baseball", "Basketball", "BasketballHoop", "BeachUmbrella", "Bed", "Bell", "Below", "BigDownArrow", "BigLeftArrow", "BigRightArrow", "BigRightStraightArrow", "BigUpArrow", "Bike", "Bingo", "Binoculars", "BlackJack", "Bold", "Bolt", "Bookmark", "BottomLine", "BowAndArrow", "BoxCircle", "BoxFront", "BoxOnBox", "BoxingGlove", "Browser", "BubbleZone", "Building", "BulletPointContainer", "BulletPoints", "Bullseye", "BusFront", "BusinessBag", "Cake", "Calendar", "CalendarClock", "CalendarConfirm", "CalendarFile", "CalendarICSFile", "CalendarRightArrow", "Camera", "CancerAstrology", "Canoe", "CapriconAstrology", "Car", "CardsCheck", "Cash", "CelebrityStar", "CenterAlignment", "ChatAi", "Check", "CheckBookmark", "CheckBox", "CheckCircle", "CheckDocuments", "CheckEnvelope", "CheckPeople", "CheckSpeechBubble", "CheckVoteBallot", "Checklist", "ChevronDown", "ChevronLeft", "ChevronLeftPeople", "ChevronRight", "ChevronRightPeople", "ChevronUp", "Circle", "ClearText", "Clipboard", "Clock", "Clone", "ClosedCaption", "Cloud", "CloudDay", "CloudNight", "Cocktails", "Coffee", "CoffeeTakeout", "Cog", "Coin", "CollapseColumn", "Command", "Compass", "ComputerChip", "Connection", "ConnectionScreen", "ContactBook", "ContactCard", "Convert", "ConvertAlt", "ConvertLeft", "ConvertRight", "Cookies", "Coupon", "CreditCard", "CreditCardPayment", "CrescentMoon", "Cricket", "Cross", "CrossCircle", "CrossEnvelope", "CrossPeople", "CrossShield", "Crossword", "Cycling", "DOCFile", "DailyFantasy", "DaisyFlower", "Dandelion", "DataBook", "DataCloud", "DataSilo", "DataStorage", "Debug", "DeleteTab", "DeliveryPackage", "Dense", "DenyCircle", "Descender", "Desktop", "DiagonalKey", "DiagonalLeftDown", "DiagonalLeftUp", "DiagonalRightDown", "DiagonalRightUp", "Diamond", "Dice", "Dining", "Direction", "DiscoBall", "Document", "DocumentImageRectangle", "DocumentImageSquare", "DocumentRectangle", "DollarCircleArrows", "DotEnvelope", "DotTwoRings", "DoubleBigLeftArrow", "DoubleChevronLeft", "DoubleChevronRight", "DownCurveArrow", "Download", "DownloadCircle", "DownloadComplete", "DownloadInProgressCircle", "DraftDocument", "DragVertical", "Dusk", "Easel", "Eclipse", "Edit", "EmailVerification", "Emails", "Embed", "EntertainmentTv", "Envelope", "Error", "ExpandArrowLeft", "ExpandArrowRight", "ExpandColumn", "Eye", "EyeSearch", "EyeShut", "FaceID", "FallLeaf", "Family", "FastForward", "FencingEpee", "FilmReel", "FilmRoll", "FingerPointLeftArrow", "FingerPointRightArrow", "FingerPrint", "Fire", "FirstAidKit", "FirstQuarter", "FiveCircles", "Flag", "FlameTorch", "Fog", "FogDay", "Folder", "Font", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "ZIP"];
+declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyNightFlurries", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight"];
+//#endregion
+export { Icon, type IconName, type IconProps, iconNames, multicolorIconNames };
+//# sourceMappingURL=Icon.d.mts.map

package/dist/components/Icon.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;;EAHP,IAAA,EAKG,QALK;EAEH;EAAuB,IAAA,CAAA,EAKxB,QALwB;EACrB;EAAJ,KAAA,CAAA,EAME,UANF,CAAA,OAAA,CAAA;EAEA;EAEC,OAAA,CAAA,EAIG,WAJH;EAEC,eAAA,CAAA,EAIU,UAJV,CAAA,iBAAA,CAAA;EAEE,YAAA,CAAA,EAIK,UAJL,CAAA,cAAA,CAAA;EAEQ,oBAAA,CAAA,EAGK,UAHL,CAAA,sBAAA,CAAA;EAEH,kBAAA,CAAA,EAEM,UAFN,CAAA,oBAAA,CAAA;EACQ,uBAAA,CAAA,EAEG,UAFH,CAAA,yBAAA,CAAA;EACF,qBAAA,CAAA,EAEG,UAFH,CAAA,uBAAA,CAAA;EACK,WAAA,CAAA,EAEZ,UAFY,CAAA,aAAA,CAAA;EACF,gBAAA,CAAA,EAEL,UAFK,CAAA,kBAAA,CAAA;EACV,cAAA,CAAA,EAEG,UAFH,CAAA,gBAAA,CAAA;EACK,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,WAAA,CAAA,EAEH,UAFG,CAAA,aAAA,CAAA;EACG,mBAAA,CAAA,EAEE,UAFF,CAAA,qBAAA,CAAA;EACN,qBAAA,CAAA,EAEU,UAFV,CAAA,uBAAA,CAAA;EACQ,gBAAA,CAAA,EAEH,UAFG,CAAA,kBAAA,CAAA;EACE,cAAA,CAAA,EAEP,UAFO,CAAA,gBAAA,CAAA;EACL,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,UAAA,CAAA,EAGJ,UAHI,CAAA,YAAA,CAAA;EACG,YAAA,CAAA,EAIL,UAJK,CAAA,cAAA,CAAA;EAEP,UAAA,CAAA,EAGA,UAHA,CAAA,YAAA,CAAA;EAEE,UAAA,CAAA,EAEF,UAFE,CAAA,YAAA,CAAA;EACF,aAAA,CAAA,EAEG,UAFH,CAAA,eAAA,CAAA;EACA,iBAAA,CAAA,EAEO,UAFP,CAAA,mBAAA,CAAA;EACG,eAAA,CAAA,EAEE,UAFF,CAAA,iBAAA,CAAA;EACI,OAAA,CAAA,EAEV,UAFU,CAAA,SAAA,CAAA;EACF,WAAA,CAAA,EAGJ,UAHI,CAAA,aAAA,CAAA;EACR,SAAA,CAAA,EAGE,UAHF,CAAA,WAAA,CAAA;EAEI,SAAA,CAAA,EAEF,UAFE,CAAA,WAAA,CAAA;EACF,YAAA,CAAA,EAEG,UAFH,CAAA,cAAA,CAAA;EACA,gBAAA,CAAA,EAEO,UAFP,CAAA,kBAAA,CAAA;EACG,cAAA,CAAA,EAEE,UAFF,CAAA,gBAAA,CAAA;EACI,MAAA,CAAA,EAEV,UAFU,CAAA,QAAA,CAAA;EACF;EACR,mBAAA,CAAA,EAAA,MAAA;EAMS;EAAV,kBAAA,CAAA,EAAA,MAAA;EArDkB;EAAI,KAAA,CAAA,EAqDtB,SArDsB,CAqDZ,SArDY,CAAA;AAAA;AAuQhC;AACA;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,OAAA,CAAA,qBAAA;cAaG;cACA"}

package/dist/components/Icon.mjs

@@ -0,0 +1,148 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { glyphMap, glyphNames } from "../icons/dist/glyphMap.mjs";
+import { svgGlyphNames, svgMap } from "../icons/dist/svgMap.mjs";
+import { ICON_SIZE_MAP } from "../icons/dist/tokens.mjs";
+import { memo, useMemo } from "react";
+import { Text, View } from "react-native";
+import { styles } from "../../generated/styles";
+import { jsx } from "react/jsx-runtime";
+import { SvgXml } from "react-native-svg";
+import { useUnistyles } from "react-native-unistyles";
+
+//#region src/components/Icon.tsx
+const DEFAULT_PROPS = {
+	size: "md",
+	color: "primary",
+	variant: "outline",
+	flexShrink: "0"
+};
+/**
+* Separate component for multicolor SVG icons.
+* Uses useUnistyles() for reactive theme access - isolated here so
+* glyph-based icons don't pay the hook overhead.
+*/
+const MulticolorIcon = memo(function MulticolorIcon$1({ name, size = DEFAULT_PROPS.size, flexShrink = DEFAULT_PROPS.flexShrink, backgroundColor, dangerouslySetSize }) {
+	const { rt } = useUnistyles();
+	const colorScheme = rt.themeName === "dark" ? "dark" : "light";
+	const pixelSize = ICON_SIZE_MAP[size];
+	const svgKey = `${name}-${colorScheme}-${pixelSize}`;
+	const svgContent = svgMap[svgKey];
+	if (!svgContent) {
+		console.warn(`Multicolor icon "${svgKey}" not found`);
+		return null;
+	}
+	styles.useVariants({
+		flexShrink,
+		backgroundColor
+	});
+	return /* @__PURE__ */ jsx(View, {
+		style: styles.foundation,
+		children: /* @__PURE__ */ jsx(SvgXml, {
+			xml: svgContent,
+			width: dangerouslySetSize ?? pixelSize,
+			height: dangerouslySetSize ?? pixelSize
+		})
+	});
+});
+const OutlineOrFillIcon = memo(function OutlineOrFillIcon$1({ name, size = DEFAULT_PROPS.size, color = DEFAULT_PROPS.color, variant = DEFAULT_PROPS.variant, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, flexShrink = "0", spacingStart, spacingEnd, spacingTop, spacingBottom, spacingHorizontal, spacingVertical, spacing, offsetStart, offsetEnd, offsetTop, offsetBottom, offsetHorizontal, offsetVertical, offset, dangerouslySetColor, dangerouslySetSize, style, ref, ...props }) {
+	const pixelSize = ICON_SIZE_MAP[size];
+	styles.useVariants({
+		color,
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		flexShrink,
+		spacingStart,
+		spacingEnd,
+		spacingTop,
+		spacingBottom,
+		spacingHorizontal,
+		spacingVertical,
+		spacing,
+		offsetStart,
+		offsetEnd,
+		offsetTop,
+		offsetBottom,
+		offsetHorizontal,
+		offsetVertical,
+		offset
+	});
+	const glyph = glyphMap[`${name}-${variant}-${pixelSize}`];
+	return /* @__PURE__ */ jsx(Text, {
+		ref,
+		accessibilityRole: "image",
+		accessibilityLabel: name,
+		style: useMemo(() => [
+			{
+				fontFamily: "uds-icons",
+				textAlign: "center",
+				textAlignVertical: "center"
+			},
+			styles.foundation,
+			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
+			dangerouslySetSize ? {
+				fontSize: dangerouslySetSize,
+				lineHeight: dangerouslySetSize
+			} : void 0,
+			style
+		], [
+			dangerouslySetColor,
+			dangerouslySetSize,
+			style,
+			styles.foundation
+		]),
+		...props,
+		children: glyph
+	});
+});
+/**
+* **🎨 An icon component using UDS icon fonts**
+*
+* @description
+* Renders icons from the UDS icon library. Supports multiple variants
+* (outline, fill, multicolor) and sizes.
+*
+* @example
+* ```tsx
+* import { Icon } from '@yahoo/uds-mobile';
+*
+* <Icon name="ChevronRight" size="md" color="primary" />
+* <Icon name="Star" variant="fill" color="accent" />
+* ```
+*
+* @usage
+* - Use name prop to specify the icon
+* - Use variant prop for outline/fill/multicolor
+* - Use size prop for icon size (xs, sm, md, lg, xl)
+*
+* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+*/
+const Icon = memo(function Icon$1({ variant, ...props }) {
+	if (variant === "multicolor") return /* @__PURE__ */ jsx(MulticolorIcon, { ...props });
+	return /* @__PURE__ */ jsx(OutlineOrFillIcon, {
+		variant,
+		...props
+	});
+});
+Icon.displayName = "Icon";
+const iconNames = glyphNames;
+const multicolorIconNames = svgGlyphNames;
+
+//#endregion
+export { Icon, iconNames, multicolorIconNames };
+//# sourceMappingURL=Icon.mjs.map

package/dist/components/Icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.mjs","names":["MulticolorIcon","OutlineOrFillIcon","Icon"],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { IconSize, IconVariant } from '@yahoo/uds';\nimport type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? pixelSize}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: dangerouslySetSize,\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AAyED,MAAM,iBAAiB,KAAK,SAASA,iBAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAASC,oBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAsBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OAzBqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACpB;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAW,CACpE;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;AAwBF,MAAM,OAAO,KAAK,SAASC,OAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}

package/dist/components/IconButton.cjs

@@ -0,0 +1,127 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
+const require_motion$1 = require('../motion.cjs');
+const require_components_Icon = require('./Icon.cjs');
+const require_components_Pressable = require('./Pressable.cjs');
+let react = require("react");
+let react_native = require("react-native");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_reanimated = require("react-native-reanimated");
+let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
+
+//#region src/components/IconButton.tsx
+function interpolateShadowAlpha(shadow, alpha) {
+	"worklet";
+	if (!shadow || alpha >= 1) return shadow;
+	if (alpha <= 0) return "";
+	return shadow.replace(/rgba\(([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (_, r, g, b, a) => {
+		return `rgba(${r}, ${g}, ${b}, ${(parseFloat(a) * alpha).toFixed(3)})`;
+	});
+}
+/**
+* **An icon button element that can be used to trigger an action**
+*
+* Features animated scale effect on press and smooth color transitions
+* matching the web UDS IconButton behavior.
+*
+* @example
+* ```tsx
+* import { IconButton } from '@yahoo/uds-mobile';
+*
+* <IconButton name="Add" onPress={() => console.log('pressed')} />
+* <IconButton name="Close" variant="secondary" size="sm" />
+* <IconButton name="Settings" loading />
+* ```
+*/
+const IconButton = (0, react.memo)(function IconButton$1({ name, variant = "primary", size = "md", iconVariant = "outline", loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+	const isDisabled = disabled || loading;
+	const shouldAnimate = !disableEffects && !isDisabled;
+	const [pressed, setPressed] = (0, react.useState)(false);
+	generated_styles.iconButtonStyles.useVariants({ size });
+	generated_styles.buttonStyles.useVariants({
+		variant,
+		disabled: isDisabled,
+		pressed
+	});
+	const backgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "backgroundColor");
+	const borderColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "borderColor");
+	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
+	const scale = (0, react_native_reanimated.useSharedValue)(require_motion.SCALE_EFFECTS.none);
+	const handlePressIn = (0, react.useCallback)((event) => {
+		setPressed(true);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.down, require_motion$1.BUTTON_SPRING_CONFIG);
+		onPressIn?.(event);
+	}, [
+		shouldAnimate,
+		scale,
+		onPressIn
+	]);
+	const handlePressOut = (0, react.useCallback)((event) => {
+		setPressed(false);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG);
+		onPressOut?.(event);
+	}, [
+		shouldAnimate,
+		scale,
+		onPressOut
+	]);
+	const a11yState = (0, react.useMemo)(() => ({
+		disabled: isDisabled,
+		busy: loading
+	}), [isDisabled, loading]);
+	const pressProgress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(pressed ? 1 : 0, {
+		duration: 220,
+		easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+	}), [pressed]);
+	const animatedRootStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		const shadowPressed = animatedTheme.value.components[`button/variant/${variant}/root/pressed`]?.boxShadow ?? "";
+		return {
+			transform: [{ scale: scale.value }],
+			backgroundColor: (0, react_native_reanimated.withTiming)(backgroundColor.value, {
+				duration: 220,
+				easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+			}),
+			borderColor: (0, react_native_reanimated.withTiming)(borderColor.value, {
+				duration: 220,
+				easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+			}),
+			boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value)
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Pressable.AnimatedPressable, {
+		ref,
+		disabled: isDisabled,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		accessibilityLabel: loading ? `${accessibilityLabel ?? ""}, loading` : accessibilityLabel,
+		accessibilityHint,
+		accessibilityRole: "button",
+		accessibilityState: a11yState,
+		style: [
+			generated_styles.iconButtonStyles.root,
+			generated_styles.buttonStyles.root,
+			generated_styles.styles.foundation,
+			animatedRootStyle,
+			typeof style === "function" ? style({ pressed }) : style
+		],
+		...props,
+		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ActivityIndicator, {
+			size: generated_styles.buttonStyles.icon.fontSize,
+			color: generated_styles.buttonStyles.icon.color
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+			name,
+			variant: iconVariant,
+			style: generated_styles.buttonStyles.icon
+		})
+	});
+});
+IconButton.displayName = "IconButton";
+
+//#endregion
+exports.IconButton = IconButton;

package/dist/components/IconButton.d.cts

@@ -0,0 +1,46 @@
+
+import { IconVariant } from "../icons/dist/types.cjs";
+import { ButtonVariantFlat, IconButtonSize } from "../uds/dist/tokens/types.cjs";
+import { IconName } from "./Icon.cjs";
+import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
+import * as react10 from "react";
+import { Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/IconButton.d.ts
+interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
+  /** Icon to render from the icons package. */
+  name: IconName;
+  /** @default 'primary' */
+  variant?: ButtonVariantFlat;
+  /** @default 'md' */
+  size?: IconButtonSize;
+  /** @default 'outline' */
+  iconVariant?: IconVariant;
+  loading?: boolean;
+  /**
+   * Disable motion effects (scale on press, icon animations)
+   * @default false
+   */
+  disableEffects?: boolean;
+  ref?: Ref<View>;
+}
+/**
+ * **An icon button element that can be used to trigger an action**
+ *
+ * Features animated scale effect on press and smooth color transitions
+ * matching the web UDS IconButton behavior.
+ *
+ * @example
+ * ```tsx
+ * import { IconButton } from '@yahoo/uds-mobile';
+ *
+ * <IconButton name="Add" onPress={() => console.log('pressed')} />
+ * <IconButton name="Close" variant="secondary" size="sm" />
+ * <IconButton name="Settings" loading />
+ * ```
+ */
+declare const IconButton: react10.NamedExoticComponent<IconButtonProps>;
+//#endregion
+export { IconButton, type IconButtonProps };
+//# sourceMappingURL=IconButton.d.cts.map

package/dist/components/IconButton.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;;EAFE,OAAA,CAAA,EAIE,iBAJc;EAAa;EAE/B,IAAA,CAAA,EAIC,cAJD;EAEI;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,OAAA,CAAA,EAAA,OAAA;EAOJ;;;;EAsBN,cA0HJ,CAAA,EAAA,OAAA;QAhJM,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,OAAA,CAAA,qBAAA"}

package/dist/components/IconButton.d.mts

@@ -0,0 +1,46 @@
+
+import { IconVariant } from "../icons/dist/types.mjs";
+import { ButtonVariantFlat, IconButtonSize } from "../uds/dist/tokens/types.mjs";
+import { IconName } from "./Icon.mjs";
+import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
+import * as react19 from "react";
+import { Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/IconButton.d.ts
+interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
+  /** Icon to render from the icons package. */
+  name: IconName;
+  /** @default 'primary' */
+  variant?: ButtonVariantFlat;
+  /** @default 'md' */
+  size?: IconButtonSize;
+  /** @default 'outline' */
+  iconVariant?: IconVariant;
+  loading?: boolean;
+  /**
+   * Disable motion effects (scale on press, icon animations)
+   * @default false
+   */
+  disableEffects?: boolean;
+  ref?: Ref<View>;
+}
+/**
+ * **An icon button element that can be used to trigger an action**
+ *
+ * Features animated scale effect on press and smooth color transitions
+ * matching the web UDS IconButton behavior.
+ *
+ * @example
+ * ```tsx
+ * import { IconButton } from '@yahoo/uds-mobile';
+ *
+ * <IconButton name="Add" onPress={() => console.log('pressed')} />
+ * <IconButton name="Close" variant="secondary" size="sm" />
+ * <IconButton name="Settings" loading />
+ * ```
+ */
+declare const IconButton: react19.NamedExoticComponent<IconButtonProps>;
+//#endregion
+export { IconButton, type IconButtonProps };
+//# sourceMappingURL=IconButton.d.mts.map

package/dist/components/IconButton.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.mts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;;EAFE,OAAA,CAAA,EAIE,iBAJc;EAAa;EAE/B,IAAA,CAAA,EAIC,cAJD;EAEI;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,OAAA,CAAA,EAAA,OAAA;EAOJ;;;;EAsBN,cA0HJ,CAAA,EAAA,OAAA;QAhJM,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,OAAA,CAAA,qBAAA"}