@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/components/Image.d.cts

@@ -0,0 +1,92 @@
+import { ImagePropsWithImgProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Image.d.ts
+
+/**
+ * **📸 A component for displaying images**
+ *
+ * @description
+ * Wrapper for the image element. In the future, may provide additional
+ * functionality for handling fallbacks, dark mode, lazy loading, shimmers.
+ *
+ * @example
+ * ```tsx
+ * import { Image } from '@yahoo/uds';
+ *
+ * <Image src="/images/profile.png" width={580} height={334} />;
+ * ```
+ *
+ * @usage
+ * - Use the `Image` component to display images.
+ * - Use `width` and `height` props to set the size of the image.
+ * - Image extends the HTMLImageElement, as well as the uds `Box` component and supports all of their props.
+ *
+ * @see The {@link https://uds.build/docs/components/image Image Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box)
+ */
+declare function Image({
+  width: imageWidth,
+  height: imageHeight,
+  src,
+  alt,
+  contentFit,
+  backgroundColor,
+  borderRadius,
+  borderTopStartRadius,
+  borderTopEndRadius,
+  borderBottomStartRadius,
+  borderBottomEndRadius,
+  borderColor,
+  borderStartColor,
+  borderEndColor,
+  borderTopColor,
+  borderBottomColor,
+  borderWidth,
+  borderVerticalWidth,
+  borderHorizontalWidth,
+  borderStartWidth,
+  borderEndWidth,
+  borderTopWidth,
+  borderBottomWidth,
+  alignContent,
+  alignItems,
+  alignSelf,
+  flex,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  flexWrap,
+  justifyContent,
+  flexBasis,
+  display,
+  overflow,
+  overflowX,
+  overflowY,
+  position,
+  spacing,
+  spacingHorizontal,
+  spacingVertical,
+  spacingBottom,
+  spacingEnd,
+  spacingStart,
+  spacingTop,
+  offset,
+  offsetVertical,
+  offsetHorizontal,
+  offsetBottom,
+  offsetEnd,
+  offsetStart,
+  offsetTop,
+  columnGap,
+  rowGap,
+  ...props
+}: ImagePropsWithImgProps): react_jsx_runtime0.JSX.Element;
+declare namespace Image {
+  var displayName: string;
+}
+//#endregion
+export { Image, type ImagePropsWithImgProps as ImageProps };
+//# sourceMappingURL=Image.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.cts","names":[],"sources":["../../src/components/Image.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAA8E,CAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;iBA2BrE,KAAA,CAqBP;EAAA,KAAA,CAAA,CApBO,UAoBP;EAAA,MAAA,CAAA,CAnBQ,WAmBR;EAAA,GAAA;EAAA,GAAA;EAAA,UAAA;EAAA,eAAA;EAAA,YAAA;EAAA,oBAAA;EAAA,kBAAA;EAAA,uBAAA;EAAA,qBAAA;EAAA,WAAA;EAAA,gBAAA;EAAA,cAAA;EAAA,cAAA;EAAA,iBAAA;EAAA,WAAA;EAAA,mBAAA;EAAA,qBAAA;EAAA,gBAAA;EAAA,cAAA;EAAA,cAAA;EAAA,iBAAA;EAAA,YAAA;EAAA,UAAA;EAAA,SAAA;EAAA,IAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,QAAA;EAAA,cAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,QAAA;EAAA,OAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,aAAA;EAAA,UAAA;EAAA,YAAA;EAAA,UAAA;EAAA,MAAA;EAAA,cAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,MAAA;EAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAyCC,sBAzCD,CAAA,CAAA,CAyCW,kBAAA,CAAA,GAAA,CAAA,OAzCX;kBArBO,KAAA,CAsBP;EACA,GAAA,CAAA,WAAA,CAAA,CAAA,MAAA"}

package/dist/components/Image.d.ts

@@ -0,0 +1,92 @@
+import { ImagePropsWithImgProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+
+//#region src/components/Image.d.ts
+
+/**
+ * **📸 A component for displaying images**
+ *
+ * @description
+ * Wrapper for the image element. In the future, may provide additional
+ * functionality for handling fallbacks, dark mode, lazy loading, shimmers.
+ *
+ * @example
+ * ```tsx
+ * import { Image } from '@yahoo/uds';
+ *
+ * <Image src="/images/profile.png" width={580} height={334} />;
+ * ```
+ *
+ * @usage
+ * - Use the `Image` component to display images.
+ * - Use `width` and `height` props to set the size of the image.
+ * - Image extends the HTMLImageElement, as well as the uds `Box` component and supports all of their props.
+ *
+ * @see The {@link https://uds.build/docs/components/image Image Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box)
+ */
+declare function Image({
+  width: imageWidth,
+  height: imageHeight,
+  src,
+  alt,
+  contentFit,
+  backgroundColor,
+  borderRadius,
+  borderTopStartRadius,
+  borderTopEndRadius,
+  borderBottomStartRadius,
+  borderBottomEndRadius,
+  borderColor,
+  borderStartColor,
+  borderEndColor,
+  borderTopColor,
+  borderBottomColor,
+  borderWidth,
+  borderVerticalWidth,
+  borderHorizontalWidth,
+  borderStartWidth,
+  borderEndWidth,
+  borderTopWidth,
+  borderBottomWidth,
+  alignContent,
+  alignItems,
+  alignSelf,
+  flex,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  flexWrap,
+  justifyContent,
+  flexBasis,
+  display,
+  overflow,
+  overflowX,
+  overflowY,
+  position,
+  spacing,
+  spacingHorizontal,
+  spacingVertical,
+  spacingBottom,
+  spacingEnd,
+  spacingStart,
+  spacingTop,
+  offset,
+  offsetVertical,
+  offsetHorizontal,
+  offsetBottom,
+  offsetEnd,
+  offsetStart,
+  offsetTop,
+  columnGap,
+  rowGap,
+  ...props
+}: ImagePropsWithImgProps): react_jsx_runtime3.JSX.Element;
+declare namespace Image {
+  var displayName: string;
+}
+//#endregion
+export { Image, type ImagePropsWithImgProps as ImageProps };
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","names":[],"sources":["../../src/components/Image.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAA8E,CAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;iBA2BrE,KAAA,CAqBP;EAAA,KAAA,CAAA,CApBO,UAoBP;EAAA,MAAA,CAAA,CAnBQ,WAmBR;EAAA,GAAA;EAAA,GAAA;EAAA,UAAA;EAAA,eAAA;EAAA,YAAA;EAAA,oBAAA;EAAA,kBAAA;EAAA,uBAAA;EAAA,qBAAA;EAAA,WAAA;EAAA,gBAAA;EAAA,cAAA;EAAA,cAAA;EAAA,iBAAA;EAAA,WAAA;EAAA,mBAAA;EAAA,qBAAA;EAAA,gBAAA;EAAA,cAAA;EAAA,cAAA;EAAA,iBAAA;EAAA,YAAA;EAAA,UAAA;EAAA,SAAA;EAAA,IAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,QAAA;EAAA,cAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,QAAA;EAAA,OAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,aAAA;EAAA,UAAA;EAAA,YAAA;EAAA,UAAA;EAAA,MAAA;EAAA,cAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,MAAA;EAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAyCC,sBAzCD,CAAA,CAAA,CAyCW,kBAAA,CAAA,GAAA,CAAA,OAzCX;kBArBO,KAAA,CAsBP;EACA,GAAA,CAAA,WAAA,CAAA,CAAA,MAAA"}

package/dist/components/Image.js

@@ -0,0 +1,96 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../styles/styler.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Image.tsx
+/**
+* **📸 A component for displaying images**
+*
+* @description
+* Wrapper for the image element. In the future, may provide additional
+* functionality for handling fallbacks, dark mode, lazy loading, shimmers.
+*
+* @example
+* ```tsx
+* import { Image } from '@yahoo/uds';
+*
+* <Image src="/images/profile.png" width={580} height={334} />;
+* ```
+*
+* @usage
+* - Use the `Image` component to display images.
+* - Use `width` and `height` props to set the size of the image.
+* - Image extends the HTMLImageElement, as well as the uds `Box` component and supports all of their props.
+*
+* @see The {@link https://uds.build/docs/components/image Image Docs} for more info
+*
+* @related [Box](https://uds.build/docs/components/box)
+*/
+function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap,...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		className: getStyles({
+			contentFit,
+			backgroundColor,
+			borderRadius,
+			borderTopStartRadius,
+			borderTopEndRadius,
+			borderBottomStartRadius,
+			borderBottomEndRadius,
+			borderColor,
+			borderStartColor,
+			borderEndColor,
+			borderTopColor,
+			borderBottomColor,
+			borderWidth,
+			borderVerticalWidth,
+			borderHorizontalWidth,
+			borderStartWidth,
+			borderEndWidth,
+			borderTopWidth,
+			borderBottomWidth,
+			alignContent,
+			alignItems,
+			alignSelf,
+			flex,
+			flexDirection,
+			flexGrow,
+			flexShrink,
+			flexWrap,
+			justifyContent,
+			flexBasis,
+			display,
+			overflow,
+			overflowX,
+			overflowY,
+			position,
+			spacing,
+			spacingHorizontal,
+			spacingVertical,
+			spacingBottom,
+			spacingEnd,
+			spacingStart,
+			spacingTop,
+			offset,
+			offsetVertical,
+			offsetHorizontal,
+			offsetBottom,
+			offsetEnd,
+			offsetStart,
+			offsetTop,
+			columnGap,
+			rowGap
+		}),
+		style: {
+			width: imageWidth,
+			height: imageHeight
+		},
+		...props
+	});
+}
+Image.displayName = "Image";
+
+//#endregion
+export { Image };
+//# sourceMappingURL=Image.js.map

package/dist/components/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","names":[],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { ImagePropsWithImgProps as ImageProps } from '@yahoo/uds/tokens';\n\nimport { getStyles } from '../styles/styler';\n\n/**\n * **📸 A component for displaying images**\n *\n * @description\n * Wrapper for the image element. In the future, may provide additional\n * functionality for handling fallbacks, dark mode, lazy loading, shimmers.\n *\n * @example\n * ```tsx\n * import { Image } from '@yahoo/uds';\n *\n * <Image src=\"/images/profile.png\" width={580} height={334} />;\n * ```\n *\n * @usage\n * - Use the `Image` component to display images.\n * - Use `width` and `height` props to set the size of the image.\n * - Image extends the HTMLImageElement, as well as the uds `Box` component and supports all of their props.\n *\n * @see The {@link https://uds.build/docs/components/image Image Docs} for more info\n *\n * @related [Box](https://uds.build/docs/components/box)\n */\nfunction Image({\n  width: imageWidth,\n  height: imageHeight,\n  src,\n  alt,\n  contentFit,\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  flexBasis,\n  // layout\n  display,\n  overflow,\n  overflowX,\n  overflowY,\n  position,\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  // rest\n  ...props\n}: ImageProps) {\n  const imageStyles = getStyles({\n    contentFit,\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    flexBasis,\n    // layout\n    display,\n\n    overflow,\n    overflowX,\n    overflowY,\n    position,\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  return (\n    <img\n      src={src}\n      alt={alt}\n      className={imageStyles}\n      style={{ width: imageWidth, height: imageHeight }}\n      {...props}\n    />\n  );\n}\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAS,MAAM,EACb,OAAO,YACP,QAAQ,aACR,KACA,KACA,YAEA,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,gBACA,WAEA,SACA,UACA,WACA,WACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,OAEA,GAAG,SACU;AA2Db,QACE,oBAAC;EACM;EACA;EACL,WA9DgB,UAAU;GAC5B;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EAOE,OAAO;GAAE,OAAO;GAAY,QAAQ;GAAa;EACjD,GAAI;GACJ;;AAIN,MAAM,cAAc"}

package/dist/components/Link.cjs

@@ -0,0 +1,98 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../styles/styler.cjs');
+const require_components_IconSlot = require('./IconSlot.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Link.tsx
+/**
+* A Link provides navigation or actionable functionality by linking users to
+* another location within an application, an external resource, or triggering
+* specific in-page interactions (i.e. scroll-to-section).
+*
+* @componentType Client component
+*
+* @description
+* A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+*
+* @usage
+* - Provide a way for users to navigate to another location.
+* - Provide a trigger for in-page interactions.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Link } from '@yahoo/uds';
+* import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+*
+* <Link href="#">My Link</Link>
+* <Link href="#" startIcon={Share} />
+* <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+*```
+**/
+const Link = (0, react.forwardRef)(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className,...anchorProps }, ref) {
+	const shouldSizeRelativeToContainingText = !textVariant;
+	const rootClasses = (0, react.useMemo)(() => {
+		return require_styles_styler.getStyles({
+			linkVariantRoot: variant,
+			display: "inline-flex",
+			alignItems: "center",
+			className: require_styles_styler.cx(!shouldSizeRelativeToContainingText && require_styles_styler.getStyles({
+				linkTextStyleRoot: textVariant,
+				fontSize: textVariant,
+				fontFamily: textVariant,
+				fontWeight: textVariant,
+				lineHeight: textVariant,
+				textTransform: textVariant
+			}), "uds-ring", alwaysUnderline && "underline", className)
+		});
+	}, [
+		alwaysUnderline,
+		shouldSizeRelativeToContainingText,
+		textVariant,
+		variant,
+		className
+	]);
+	const iconStartStyles = require_styles_styler.getStyles({
+		linkVariantIconStart: variant,
+		linkTextStyleIcon: textVariant,
+		className: require_styles_styler.cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconEndStyles = require_styles_styler.getStyles({
+		linkVariantIconEnd: variant,
+		linkTextStyleIcon: textVariant,
+		className: require_styles_styler.cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconProps = {
+		variant: "outline",
+		color: "current"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		ref,
+		className: rootClasses,
+		...anchorProps,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				className: iconStartStyles,
+				icon: startIcon,
+				iconProps,
+				"data-testid": "start-icon"
+			}),
+			children,
+			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				className: iconEndStyles,
+				icon: endIcon,
+				iconProps,
+				"data-testid": "end-icon"
+			})
+		]
+	});
+});
+Link.displayName = "Link";
+
+//#endregion
+exports.Link = Link;

package/dist/components/Link.d.cts

@@ -0,0 +1,46 @@
+import { UniversalLinkProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react5 from "react";
+
+//#region src/components/Link.d.ts
+type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
+  /** The link's destination. */
+  href?: string;
+  /** Anchor rel property. @default "noopener" **/
+  rel?: string;
+  /** If true, forces an underline to always be shown for a11y purposes.  @default false */
+  alwaysUnderline?: boolean;
+}
+/**
+ * A Link provides navigation or actionable functionality by linking users to
+ * another location within an application, an external resource, or triggering
+ * specific in-page interactions (i.e. scroll-to-section).
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+ *
+ * @usage
+ * - Provide a way for users to navigate to another location.
+ * - Provide a trigger for in-page interactions.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Link } from '@yahoo/uds';
+ * import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+ *
+ * <Link href="#">My Link</Link>
+ * <Link href="#" startIcon={Share} />
+ * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+ *```
+ **/
+declare const Link: react5.ForwardRefExoticComponent<LinkProps & react5.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, type LinkProps };
+//# sourceMappingURL=Link.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;KAOK,eAAA,CAAA,CAAA,CAAkB,KAAA,CAAM,qBAAqB;UAExC,SAAA,CAAA,OAAA,CAAkB,iBAAiB;;;EAFxC,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;EAEK,GAAA,CAAA,CAAA,CAAA,MAAU;EAqCd,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,KAAA,CAAA,GAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,KAAA,CAAA,CAAA;EAAI,eAAA,CAAA,CAAA,CAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAJ,MAAI,MAAA,CAAA,0BAAA,YAAA,MAAA,CAAA,cAAA"}

package/dist/components/Link.d.ts

@@ -0,0 +1,46 @@
+import { UniversalLinkProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react8 from "react";
+
+//#region src/components/Link.d.ts
+type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
+  /** The link's destination. */
+  href?: string;
+  /** Anchor rel property. @default "noopener" **/
+  rel?: string;
+  /** If true, forces an underline to always be shown for a11y purposes.  @default false */
+  alwaysUnderline?: boolean;
+}
+/**
+ * A Link provides navigation or actionable functionality by linking users to
+ * another location within an application, an external resource, or triggering
+ * specific in-page interactions (i.e. scroll-to-section).
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+ *
+ * @usage
+ * - Provide a way for users to navigate to another location.
+ * - Provide a trigger for in-page interactions.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Link } from '@yahoo/uds';
+ * import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+ *
+ * <Link href="#">My Link</Link>
+ * <Link href="#" startIcon={Share} />
+ * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+ *```
+ **/
+declare const Link: react8.ForwardRefExoticComponent<LinkProps & react8.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, type LinkProps };
+//# sourceMappingURL=Link.d.ts.map

package/dist/components/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;KAOK,eAAA,CAAA,CAAA,CAAkB,KAAA,CAAM,qBAAqB;UAExC,SAAA,CAAA,OAAA,CAAkB,iBAAiB;;;EAFxC,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;EAEK,GAAA,CAAA,CAAA,CAAA,MAAU;EAqCd,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,KAAA,CAAA,GAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,KAAA,CAAA,CAAA;EAAI,eAAA,CAAA,CAAA,CAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAJ,MAAI,MAAA,CAAA,0BAAA,YAAA,MAAA,CAAA,cAAA"}

package/dist/components/Link.js

@@ -0,0 +1,98 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../styles/styler.js";
+import { IconSlot } from "./IconSlot.js";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Link.tsx
+/**
+* A Link provides navigation or actionable functionality by linking users to
+* another location within an application, an external resource, or triggering
+* specific in-page interactions (i.e. scroll-to-section).
+*
+* @componentType Client component
+*
+* @description
+* A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+*
+* @usage
+* - Provide a way for users to navigate to another location.
+* - Provide a trigger for in-page interactions.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Link } from '@yahoo/uds';
+* import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+*
+* <Link href="#">My Link</Link>
+* <Link href="#" startIcon={Share} />
+* <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+*```
+**/
+const Link = forwardRef(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className,...anchorProps }, ref) {
+	const shouldSizeRelativeToContainingText = !textVariant;
+	const rootClasses = useMemo(() => {
+		return getStyles({
+			linkVariantRoot: variant,
+			display: "inline-flex",
+			alignItems: "center",
+			className: cx(!shouldSizeRelativeToContainingText && getStyles({
+				linkTextStyleRoot: textVariant,
+				fontSize: textVariant,
+				fontFamily: textVariant,
+				fontWeight: textVariant,
+				lineHeight: textVariant,
+				textTransform: textVariant
+			}), "uds-ring", alwaysUnderline && "underline", className)
+		});
+	}, [
+		alwaysUnderline,
+		shouldSizeRelativeToContainingText,
+		textVariant,
+		variant,
+		className
+	]);
+	const iconStartStyles = getStyles({
+		linkVariantIconStart: variant,
+		linkTextStyleIcon: textVariant,
+		className: cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconEndStyles = getStyles({
+		linkVariantIconEnd: variant,
+		linkTextStyleIcon: textVariant,
+		className: cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconProps = {
+		variant: "outline",
+		color: "current"
+	};
+	return /* @__PURE__ */ jsxs("a", {
+		ref,
+		className: rootClasses,
+		...anchorProps,
+		children: [
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				className: iconStartStyles,
+				icon: startIcon,
+				iconProps,
+				"data-testid": "start-icon"
+			}),
+			children,
+			endIcon && /* @__PURE__ */ jsx(IconSlot, {
+				className: iconEndStyles,
+				icon: endIcon,
+				iconProps,
+				"data-testid": "end-icon"
+			})
+		]
+	});
+});
+Link.displayName = "Link";
+
+//#endregion
+export { Link };
+//# sourceMappingURL=Link.js.map

package/dist/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":["iconProps: IconSlotProps['iconProps']"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds/tokens';\nimport { forwardRef, useMemo } from 'react';\n\nimport { cx, getStyles } from '../styles/styler';\nimport type { IconSlotProps } from './IconSlot';\nimport { IconSlot } from './IconSlot';\n\ntype HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\ninterface LinkProps extends HTMLAnchorProps, UniversalLinkProps {\n  /** The link's destination. */\n  href?: string;\n  /** Anchor rel property. @default \"noopener\" **/\n  rel?: string;\n  /** If true, forces an underline to always be shown for a11y purposes.  @default false */\n  alwaysUnderline?: boolean;\n}\n\n/**\n * A Link provides navigation or actionable functionality by linking users to\n * another location within an application, an external resource, or triggering\n * specific in-page interactions (i.e. scroll-to-section).\n *\n * @componentType Client component\n *\n * @description\n * A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/link Link Docs} for more info\n *\n * @usage\n * - Provide a way for users to navigate to another location.\n * - Provide a trigger for in-page interactions.\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Link } from '@yahoo/uds';\n * import { Share, Link as LinkIcon } from '@yahoo/uds-icons';\n *\n * <Link href=\"#\">My Link</Link>\n * <Link href=\"#\" startIcon={Share} />\n * <Link href=\"https://yahoo.com\" target=\"_blank\" endIcon={LinkIcon} />\n *```\n **/\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(function Input(\n  {\n    variant = 'primary',\n    textVariant,\n    startIcon,\n    endIcon,\n    alwaysUnderline = false,\n    children,\n    className,\n    ...anchorProps\n  }: LinkProps,\n  ref,\n) {\n  // This is a feature unrelated to configurator. DO NOT REMOVE.\n  const shouldSizeRelativeToContainingText = !textVariant;\n\n  const rootClasses = useMemo(() => {\n    // TODO: These should be getting generated by the textStyle variant\n    const textStyles =\n      !shouldSizeRelativeToContainingText &&\n      getStyles({\n        linkTextStyleRoot: textVariant,\n        fontSize: textVariant,\n        fontFamily: textVariant,\n        fontWeight: textVariant,\n        lineHeight: textVariant,\n        textTransform: textVariant,\n      });\n\n    return getStyles({\n      linkVariantRoot: variant,\n      display: 'inline-flex',\n      alignItems: 'center',\n      className: cx(\n        textStyles,\n        // Focus ring\n        'uds-ring',\n        alwaysUnderline && 'underline',\n        className,\n      ),\n    });\n  }, [alwaysUnderline, shouldSizeRelativeToContainingText, textVariant, variant, className]);\n\n  const iconStartStyles = getStyles({\n    linkVariantIconStart: variant,\n    linkTextStyleIcon: textVariant,\n    className: cx(shouldSizeRelativeToContainingText && 'w-[0.7em] h-[0.7em]'),\n  });\n\n  const iconEndStyles = getStyles({\n    linkVariantIconEnd: variant,\n    linkTextStyleIcon: textVariant,\n    className: cx(shouldSizeRelativeToContainingText && 'w-[0.7em] h-[0.7em]'),\n  });\n\n  const iconProps: IconSlotProps['iconProps'] = {\n    variant: 'outline',\n    color: 'current',\n  } as const;\n\n  return (\n    <a ref={ref} className={rootClasses} {...anchorProps}>\n      {startIcon && (\n        <IconSlot\n          className={iconStartStyles}\n          icon={startIcon}\n          iconProps={iconProps}\n          data-testid=\"start-icon\"\n        />\n      )}\n\n      {children}\n\n      {endIcon && (\n        <IconSlot\n          className={iconEndStyles}\n          icon={endIcon}\n          iconProps={iconProps}\n          data-testid=\"end-icon\"\n        />\n      )}\n    </a>\n  );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAM,OAAO,WAAyC,SAAS,MAC7D,EACE,UAAU,WACV,aACA,WACA,SACA,kBAAkB,OAClB,UACA,UACA,GAAG,eAEL,KACA;CAEA,MAAM,qCAAqC,CAAC;CAE5C,MAAM,cAAc,cAAc;AAahC,SAAO,UAAU;GACf,iBAAiB;GACjB,SAAS;GACT,YAAY;GACZ,WAAW,GAdX,CAAC,sCACD,UAAU;IACR,mBAAmB;IACnB,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,eAAe;IAChB,CAAC,EASA,YACA,mBAAmB,aACnB,UACD;GACF,CAAC;IACD;EAAC;EAAiB;EAAoC;EAAa;EAAS;EAAU,CAAC;CAE1F,MAAM,kBAAkB,UAAU;EAChC,sBAAsB;EACtB,mBAAmB;EACnB,WAAW,GAAG,sCAAsC,sBAAsB;EAC3E,CAAC;CAEF,MAAM,gBAAgB,UAAU;EAC9B,oBAAoB;EACpB,mBAAmB;EACnB,WAAW,GAAG,sCAAsC,sBAAsB;EAC3E,CAAC;CAEF,MAAMA,YAAwC;EAC5C,SAAS;EACT,OAAO;EACR;AAED,QACE,qBAAC;EAAO;EAAK,WAAW;EAAa,GAAI;;GACtC,aACC,oBAAC;IACC,WAAW;IACX,MAAM;IACK;IACX,eAAY;KACZ;GAGH;GAEA,WACC,oBAAC;IACC,WAAW;IACX,MAAM;IACK;IACX,eAAY;KACZ;;GAEF;EAEN;AAEF,KAAK,cAAc"}