@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/components/HStack.d.ts

@@ -0,0 +1,40 @@
+import { UniversalStackProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import { DivProps } from "./Box.js";
+import * as react4 from "react";
+
+//#region src/components/HStack.d.ts
+interface HStackProps extends UniversalStackProps, DivProps {}
+/**
+ * **📏 A layout component that arranges its children in columns using flexbox**
+ *
+ * @description
+ * HStack is a layout primitive that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. HStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { HStack, Text } from '@yahoo/uds';
+
+ * <HStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </HStack>
+ * ```
+ *
+ * @usage
+ * - Create a row of items, optionally with gaps between items.
+ * - Create columns that are sized to their content.
+ * - Create columns that fill the available space within the parent container.
+ * - Create columns of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
+ **/
+declare const HStack: react4.ForwardRefExoticComponent<HStackProps & react4.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { HStack, type HStackProps };
+//# sourceMappingURL=HStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.d.ts","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":[],"mappings":";;;;;;UAOU,WAAA,CAAA,OAAA,CAAoB,qBAAqB;;;AAHb,CAAA;AAGqB,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BrD,QAAM,MAAA,CAAA,0BAAA,cAAA,MAAA,CAAA,cAAA"}

package/dist/components/HStack.js

@@ -0,0 +1,51 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { Box } from "./Box.js";
+import { intersperseReactChildren } from "../utils/intersperse.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/HStack.tsx
+/**
+* **📏 A layout component that arranges its children in columns using flexbox** 
+* 
+* @description
+* HStack is a layout primitive that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+* and can be used to compose larger layouts. HStack is similar to [Box](./box) but provides additional features like a `gap` property to
+* add spacing between children.
+*
+* @example
+* ```tsx
+* import { HStack, Text } from '@yahoo/uds';
+
+* <HStack gap="6">
+*   <Text variant="body1" color="primary">First</Text>
+*   <Text variant="body1" color="primary">Second</Text>
+*   <Text variant="body1" color="primary">Third</Text>
+* </HStack>
+* ```
+* 
+* @usage
+* - Create a row of items, optionally with gaps between items.
+* - Create columns that are sized to their content.
+* - Create columns that fill the available space within the parent container.
+* - Create columns of proportionate size to each other (also known as a ratio-based layout).
+*
+* @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
+*
+* @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
+**/
+const HStack = forwardRef(function HStack$1({ gap, children, separator,...props }, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		flexDirection: "row",
+		rowGap: gap,
+		columnGap: gap,
+		...props,
+		children: separator ? intersperseReactChildren(children, separator) : children
+	});
+});
+HStack.displayName = "HStack";
+
+//#endregion
+export { HStack };
+//# sourceMappingURL=HStack.js.map

package/dist/components/HStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.js","names":["HStack"],"sources":["../../src/components/HStack.tsx"],"sourcesContent":["import type { UniversalStackProps } from '@yahoo/uds/tokens';\nimport { forwardRef } from 'react';\n\nimport { intersperseReactChildren } from '../utils/intersperse';\nimport type { DivProps } from './Box';\nimport { Box } from './Box';\n\ninterface HStackProps extends UniversalStackProps, DivProps {}\n\n/**\n * **📏 A layout component that arranges its children in columns using flexbox** \n * \n * @description\n * HStack is a layout primitive that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)\n * and can be used to compose larger layouts. HStack is similar to [Box](./box) but provides additional features like a `gap` property to\n * add spacing between children.\n *\n * @example\n * ```tsx\n * import { HStack, Text } from '@yahoo/uds';\n\n * <HStack gap=\"6\">\n *   <Text variant=\"body1\" color=\"primary\">First</Text>\n *   <Text variant=\"body1\" color=\"primary\">Second</Text>\n *   <Text variant=\"body1\" color=\"primary\">Third</Text>\n * </HStack>\n * ```\n * \n * @usage\n * - Create a row of items, optionally with gaps between items.\n * - Create columns that are sized to their content.\n * - Create columns that fill the available space within the parent container.\n * - Create columns of proportionate size to each other (also known as a ratio-based layout).\n *\n * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info\n *\n * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)\n **/\nconst HStack = forwardRef<HTMLDivElement, HStackProps>(function HStack(\n  { gap, children, separator, ...props }: HStackProps,\n  ref,\n) {\n  return (\n    <Box ref={ref} flexDirection=\"row\" rowGap={gap} columnGap={gap} {...props}>\n      {separator ? intersperseReactChildren(children, separator) : children}\n    </Box>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nHStack.displayName = 'HStack';\n\nexport { HStack, type HStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,SAAS,WAAwC,SAASA,SAC9D,EAAE,KAAK,UAAU,UAAW,GAAG,SAC/B,KACA;AACA,QACE,oBAAC;EAAS;EAAK,eAAc;EAAM,QAAQ;EAAK,WAAW;EAAK,GAAI;YACjE,YAAY,yBAAyB,UAAU,UAAU,GAAG;GACzD;EAER;AAGF,OAAO,cAAc"}

package/dist/components/Icon.cjs

@@ -0,0 +1,67 @@
+/*! © 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_tokens_configs_sizes = require('../tokens/configs/sizes.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Icon.tsx
+/**
+* **🎨 A component for displaying icons**
+*
+* @description
+* [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
+* other items. They are available in four different sizes: `xs`, `sm`, `md`, and
+* `lg`. Each size also supports an outline and fill variant. Icons can be
+* colored using the `color` prop.
+*
+* The component is available in the `@yahoo/uds` package but is meant to be used
+* with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+* A separate package provides modularity from the core library, better
+* versioning strategies, and tree shakeability.
+*
+* @example
+* ```tsx
+* import { Icon } from '@yahoo/uds';
+* import { AddFolder } from '@yahoo/uds-icons';
+*
+* <Icon name={AddFolder} variant="fill" size="sm" />
+* ```
+*
+* @usage
+* - If you need to display an icon.
+*
+* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+*
+* @related [IconButton](https://uds.build/docs/components/icon-button)
+*/
+const Icon = (0, react.forwardRef)(function BaseIcon({ name: SVGIcon, size = "md", variant = "outline", color = "primary", className,...props }, ref) {
+	const availableVariants = SVGIcon.metadata?.variants ?? [];
+	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
+	const isMulticolor = effectiveVariant === "multicolor";
+	const styles = require_styles_styler.getStyles({
+		flex: "none",
+		color: isMulticolor ? void 0 : color,
+		className: require_styles_styler.cx(className, !isMulticolor && "[&_path]:fill-current")
+	});
+	const sizePx = require_tokens_configs_sizes.normalIconSizes[size];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		ref,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: sizePx,
+		height: sizePx,
+		viewBox: `0 0 ${sizePx} ${sizePx}`,
+		"aria-hidden": "true",
+		focusable: "false",
+		className: styles,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGIcon, {
+			size,
+			variant: effectiveVariant
+		})
+	});
+});
+Icon.displayName = "Icon";
+
+//#endregion
+exports.Icon = Icon;

package/dist/components/Icon.d.cts

@@ -0,0 +1,39 @@
+import { IconPropsWithSVGProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react3 from "react";
+
+//#region src/components/Icon.d.ts
+
+/**
+ * **🎨 A component for displaying icons**
+ *
+ * @description
+ * [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
+ * other items. They are available in four different sizes: `xs`, `sm`, `md`, and
+ * `lg`. Each size also supports an outline and fill variant. Icons can be
+ * colored using the `color` prop.
+ *
+ * The component is available in the `@yahoo/uds` package but is meant to be used
+ * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+ * A separate package provides modularity from the core library, better
+ * versioning strategies, and tree shakeability.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@yahoo/uds';
+ * import { AddFolder } from '@yahoo/uds-icons';
+ *
+ * <Icon name={AddFolder} variant="fill" size="sm" />
+ * ```
+ *
+ * @usage
+ * - If you need to display an icon.
+ *
+ * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](https://uds.build/docs/components/icon-button)
+ */
+declare const Icon: react3.ForwardRefExoticComponent<IconPropsWithSVGProps & react3.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Icon, type IconPropsWithSVGProps as IconProps };
+//# sourceMappingURL=Icon.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAGoE,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,CAAA,KAAA,CAAA,CAAA,QAAA,CAAA,KAAA,CAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;cAiC9D,MAAI,MAAA,CAAA,0BAAA,wBAAA,MAAA,CAAA,cAAA"}

package/dist/components/Icon.d.ts

@@ -0,0 +1,39 @@
+import { IconPropsWithSVGProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react6 from "react";
+
+//#region src/components/Icon.d.ts
+
+/**
+ * **🎨 A component for displaying icons**
+ *
+ * @description
+ * [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
+ * other items. They are available in four different sizes: `xs`, `sm`, `md`, and
+ * `lg`. Each size also supports an outline and fill variant. Icons can be
+ * colored using the `color` prop.
+ *
+ * The component is available in the `@yahoo/uds` package but is meant to be used
+ * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+ * A separate package provides modularity from the core library, better
+ * versioning strategies, and tree shakeability.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@yahoo/uds';
+ * import { AddFolder } from '@yahoo/uds-icons';
+ *
+ * <Icon name={AddFolder} variant="fill" size="sm" />
+ * ```
+ *
+ * @usage
+ * - If you need to display an icon.
+ *
+ * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](https://uds.build/docs/components/icon-button)
+ */
+declare const Icon: react6.ForwardRefExoticComponent<IconPropsWithSVGProps & react6.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Icon, type IconPropsWithSVGProps as IconProps };
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAGoE,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,CAAA,KAAA,CAAA,CAAA,QAAA,CAAA,KAAA,CAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;cAiC9D,MAAI,MAAA,CAAA,0BAAA,wBAAA,MAAA,CAAA,cAAA"}

package/dist/components/Icon.js

@@ -0,0 +1,67 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../styles/styler.js";
+import { normalIconSizes } from "../tokens/configs/sizes.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Icon.tsx
+/**
+* **🎨 A component for displaying icons**
+*
+* @description
+* [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
+* other items. They are available in four different sizes: `xs`, `sm`, `md`, and
+* `lg`. Each size also supports an outline and fill variant. Icons can be
+* colored using the `color` prop.
+*
+* The component is available in the `@yahoo/uds` package but is meant to be used
+* with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+* A separate package provides modularity from the core library, better
+* versioning strategies, and tree shakeability.
+*
+* @example
+* ```tsx
+* import { Icon } from '@yahoo/uds';
+* import { AddFolder } from '@yahoo/uds-icons';
+*
+* <Icon name={AddFolder} variant="fill" size="sm" />
+* ```
+*
+* @usage
+* - If you need to display an icon.
+*
+* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+*
+* @related [IconButton](https://uds.build/docs/components/icon-button)
+*/
+const Icon = forwardRef(function BaseIcon({ name: SVGIcon, size = "md", variant = "outline", color = "primary", className,...props }, ref) {
+	const availableVariants = SVGIcon.metadata?.variants ?? [];
+	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
+	const isMulticolor = effectiveVariant === "multicolor";
+	const styles = getStyles({
+		flex: "none",
+		color: isMulticolor ? void 0 : color,
+		className: cx(className, !isMulticolor && "[&_path]:fill-current")
+	});
+	const sizePx = normalIconSizes[size];
+	return /* @__PURE__ */ jsx("svg", {
+		ref,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: sizePx,
+		height: sizePx,
+		viewBox: `0 0 ${sizePx} ${sizePx}`,
+		"aria-hidden": "true",
+		focusable: "false",
+		className: styles,
+		...props,
+		children: /* @__PURE__ */ jsx(SVGIcon, {
+			size,
+			variant: effectiveVariant
+		})
+	});
+});
+Icon.displayName = "Icon";
+
+//#endregion
+export { Icon };
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { cx, getStyles } from '../styles/styler';\nimport type { IconPropsWithSVGProps as IconProps } from '../tokens';\nimport { normalIconSizes } from '../tokens/configs/sizes';\n\n/**\n * **🎨 A component for displaying icons**\n *\n * @description\n * [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or\n * other items. They are available in four different sizes: `xs`, `sm`, `md`, and\n * `lg`. Each size also supports an outline and fill variant. Icons can be\n * colored using the `color` prop.\n *\n * The component is available in the `@yahoo/uds` package but is meant to be used\n * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.\n * A separate package provides modularity from the core library, better\n * versioning strategies, and tree shakeability.\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds';\n * import { AddFolder } from '@yahoo/uds-icons';\n *\n * <Icon name={AddFolder} variant=\"fill\" size=\"sm\" />\n * ```\n *\n * @usage\n * - If you need to display an icon.\n *\n * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info\n *\n * @related [IconButton](https://uds.build/docs/components/icon-button)\n */\n\nconst Icon = forwardRef<SVGSVGElement, IconProps>(function BaseIcon(\n  {\n    name: SVGIcon,\n    size = 'md',\n    variant = 'outline',\n    color = 'primary',\n    className,\n    ...props\n  }: IconProps,\n  ref,\n) {\n  // Check if the requested variant is available\n  const availableVariants = SVGIcon.metadata?.variants ?? [];\n  const effectiveVariant = availableVariants.includes(variant)\n    ? variant\n    : (availableVariants[0] ?? 'fill');\n\n  const isMulticolor = effectiveVariant === 'multicolor';\n  const styles = getStyles({\n    flex: 'none',\n    color: isMulticolor ? undefined : color,\n    className: cx(className, !isMulticolor && '[&_path]:fill-current'),\n  });\n  const sizePx = normalIconSizes[size]; // TODO: use scale modes when they are available.\n\n  return (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={sizePx}\n      height={sizePx}\n      viewBox={`0 0 ${sizePx} ${sizePx}`}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      className={styles}\n      {...props}\n    >\n      <SVGIcon size={size} variant={effectiveVariant} />\n    </svg>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nIcon.displayName = 'Icon';\n\nexport { Icon, type IconProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,OAAO,WAAqC,SAAS,SACzD,EACE,MAAM,SACN,OAAO,MACP,UAAU,WACV,QAAQ,WACR,UACA,GAAG,SAEL,KACA;CAEA,MAAM,oBAAoB,QAAQ,UAAU,YAAY,EAAE;CAC1D,MAAM,mBAAmB,kBAAkB,SAAS,QAAQ,GACxD,UACC,kBAAkB,MAAM;CAE7B,MAAM,eAAe,qBAAqB;CAC1C,MAAM,SAAS,UAAU;EACvB,MAAM;EACN,OAAO,eAAe,SAAY;EAClC,WAAW,GAAG,WAAW,CAAC,gBAAgB,wBAAwB;EACnE,CAAC;CACF,MAAM,SAAS,gBAAgB;AAE/B,QACE,oBAAC;EACM;EACL,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS,OAAO,OAAO,GAAG;EAC1B,eAAY;EACZ,WAAU;EACV,WAAW;EACX,GAAI;YAEJ,oBAAC;GAAc;GAAM,SAAS;IAAoB;GAC9C;EAER;AAGF,KAAK,cAAc"}

package/dist/components/IconSlot.cjs

@@ -0,0 +1,57 @@
+/*! © 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_Icon = require('./Icon.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_isFunction_js = require("lodash/isFunction.js");
+lodash_isFunction_js = require_rolldown_runtime.__toESM(lodash_isFunction_js);
+
+//#region src/components/IconSlot.tsx
+/**
+* A helper container to render a SvgIcon, Icon component, or ReactNode.
+*
+* Useful in components that use icons and have a startIcon and endIcon. It allows
+* consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+* need to override props on the icon. For example, pass an `<Icon>` to override
+* the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+*
+* Examples:
+* ```
+* <Input startIcon={Info} />
+* <Input startIcon={<Icon name={Info} variant="fill" />} />
+* <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+* <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+* ```
+*/
+const IconSlot = (0, react.memo)(function IconSlot$1({ icon, iconProps, className: slotClassName,...rest }) {
+	if (!icon) return null;
+	const { className: iconPropsClassName,...props } = iconProps || {};
+	const mergedClassName = require_styles_styler.cx(slotClassName, iconPropsClassName);
+	const svgIcon = icon;
+	if (svgIcon.metadata?.isSvgIcon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+		name: svgIcon,
+		...props,
+		...rest,
+		className: mergedClassName
+	});
+	if ((0, lodash_isFunction_js.default)(icon)) {
+		const iconEl = icon(iconProps || {});
+		const renderedElementClassName = iconEl?.props.className;
+		return (0, react.isValidElement)(iconEl) && (0, react.cloneElement)(iconEl, {
+			...rest,
+			className: require_styles_styler.cx(mergedClassName, renderedElementClassName)
+		});
+	}
+	return (0, react.isValidElement)(icon) && (0, react.cloneElement)(icon, {
+		...props,
+		...icon.props,
+		...rest,
+		className: require_styles_styler.cx(mergedClassName, icon.props.className)
+	});
+});
+IconSlot.displayName = "IconSlot";
+
+//#endregion
+exports.IconSlot = IconSlot;

package/dist/components/IconSlot.d.cts

@@ -0,0 +1,32 @@
+import { IconPropsWithSVGProps, UniversalIconSlot } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import React from "react";
+
+//#region src/components/IconSlot.d.ts
+interface IconSlotProps {
+  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */
+  icon?: UniversalIconSlot;
+  /** Props to spread onto the icon. */
+  iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
+  className?: string;
+}
+/**
+ * A helper container to render a SvgIcon, Icon component, or ReactNode.
+ *
+ * Useful in components that use icons and have a startIcon and endIcon. It allows
+ * consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+ * need to override props on the icon. For example, pass an `<Icon>` to override
+ * the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+ *
+ * Examples:
+ * ```
+ * <Input startIcon={Info} />
+ * <Input startIcon={<Icon name={Info} variant="fill" />} />
+ * <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+ * <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+ * ```
+ */
+declare const IconSlot: React.NamedExoticComponent<IconSlotProps>;
+//#endregion
+export { IconSlot, type IconSlotProps };
+//# sourceMappingURL=IconSlot.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSlot.d.cts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;UASU,aAAA;;SAED;EAFC,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAED,SAAA,CAAA,CAAA,CAEK,IAFL,CAEU,qBAFV,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA;EAEU,SAAA,CAAA,CAAA,CAAA,MAAA;;;AAAD,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,SAAA;;;;;;;;;;;;;;;cAoBZ,UAAQ,KAAA,CAAA,qBAAA"}

package/dist/components/IconSlot.d.ts

@@ -0,0 +1,32 @@
+import { IconPropsWithSVGProps, UniversalIconSlot } from "../tokens/types.js";
+import "../tokens/index.js";
+import React from "react";
+
+//#region src/components/IconSlot.d.ts
+interface IconSlotProps {
+  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */
+  icon?: UniversalIconSlot;
+  /** Props to spread onto the icon. */
+  iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
+  className?: string;
+}
+/**
+ * A helper container to render a SvgIcon, Icon component, or ReactNode.
+ *
+ * Useful in components that use icons and have a startIcon and endIcon. It allows
+ * consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+ * need to override props on the icon. For example, pass an `<Icon>` to override
+ * the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+ *
+ * Examples:
+ * ```
+ * <Input startIcon={Info} />
+ * <Input startIcon={<Icon name={Info} variant="fill" />} />
+ * <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+ * <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+ * ```
+ */
+declare const IconSlot: React.NamedExoticComponent<IconSlotProps>;
+//#endregion
+export { IconSlot, type IconSlotProps };
+//# sourceMappingURL=IconSlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSlot.d.ts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;UASU,aAAA;;SAED;EAFC,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAED,SAAA,CAAA,CAAA,CAEK,IAFL,CAEU,qBAFV,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA;EAEU,SAAA,CAAA,CAAA,CAAA,MAAA;;;AAAD,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,SAAA;;;;;;;;;;;;;;;cAoBZ,UAAQ,KAAA,CAAA,qBAAA"}

package/dist/components/IconSlot.js

@@ -0,0 +1,55 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../styles/styler.js";
+import { Icon } from "./Icon.js";
+import React, { cloneElement, isValidElement, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "lodash-es";
+
+//#region src/components/IconSlot.tsx
+/**
+* A helper container to render a SvgIcon, Icon component, or ReactNode.
+*
+* Useful in components that use icons and have a startIcon and endIcon. It allows
+* consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+* need to override props on the icon. For example, pass an `<Icon>` to override
+* the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+*
+* Examples:
+* ```
+* <Input startIcon={Info} />
+* <Input startIcon={<Icon name={Info} variant="fill" />} />
+* <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+* <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+* ```
+*/
+const IconSlot = memo(function IconSlot$1({ icon, iconProps, className: slotClassName,...rest }) {
+	if (!icon) return null;
+	const { className: iconPropsClassName,...props } = iconProps || {};
+	const mergedClassName = cx(slotClassName, iconPropsClassName);
+	const svgIcon = icon;
+	if (svgIcon.metadata?.isSvgIcon) return /* @__PURE__ */ jsx(Icon, {
+		name: svgIcon,
+		...props,
+		...rest,
+		className: mergedClassName
+	});
+	if (isFunction(icon)) {
+		const iconEl = icon(iconProps || {});
+		const renderedElementClassName = iconEl?.props.className;
+		return isValidElement(iconEl) && cloneElement(iconEl, {
+			...rest,
+			className: cx(mergedClassName, renderedElementClassName)
+		});
+	}
+	return isValidElement(icon) && cloneElement(icon, {
+		...props,
+		...icon.props,
+		...rest,
+		className: cx(mergedClassName, icon.props.className)
+	});
+});
+IconSlot.displayName = "IconSlot";
+
+//#endregion
+export { IconSlot };
+//# sourceMappingURL=IconSlot.js.map

package/dist/components/IconSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSlot.js","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":["import type { SvgIcon } from '@yahoo/uds-icons/types';\nimport { isFunction } from 'lodash';\nimport type { ReactElement } from 'react';\nimport React, { cloneElement, isValidElement, memo } from 'react';\n\nimport { cx } from '../styles/styler';\nimport type { IconPropsWithSVGProps, UniversalIconSlot } from '../tokens';\nimport { Icon } from './Icon';\n\ninterface IconSlotProps {\n  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */\n  icon?: UniversalIconSlot;\n  /** Props to spread onto the icon. */\n  iconProps?: Omit<IconPropsWithSVGProps, 'name'>;\n  className?: string;\n}\n\n/**\n * A helper container to render a SvgIcon, Icon component, or ReactNode.\n *\n * Useful in components that use icons and have a startIcon and endIcon. It allows\n * consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they\n * need to override props on the icon. For example, pass an `<Icon>` to override\n * the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.\n *\n * Examples:\n * ```\n * <Input startIcon={Info} />\n * <Input startIcon={<Icon name={Info} variant=\"fill\" />} />\n * <Input startIcon={() => <Icon name={Info} variant=\"fill\" />} />\n * <Input endIcon={() => <IconButton name={Info} aria-label=\"My label\" />} />\n * ```\n */\nconst IconSlot = memo(function IconSlot({\n  icon,\n  iconProps,\n  className: slotClassName,\n  ...rest\n}: IconSlotProps) {\n  if (!icon) {\n    return null;\n  }\n\n  const { className: iconPropsClassName, ...props } = iconProps || {};\n\n  const mergedClassName = cx(slotClassName, iconPropsClassName);\n\n  // Try as UDS SvgIcon first\n  const svgIcon = icon as SvgIcon;\n  if (svgIcon.metadata?.isSvgIcon) {\n    return <Icon name={svgIcon} {...props} {...rest} className={mergedClassName} />;\n  }\n\n  if (isFunction(icon)) {\n    const iconEl = icon(iconProps || {}) as ReactElement;\n    const renderedElementClassName = iconEl?.props.className;\n\n    return (\n      isValidElement(iconEl) &&\n      cloneElement(iconEl, {\n        ...rest,\n        className: cx(mergedClassName, renderedElementClassName),\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      } as any)\n    );\n  }\n\n  return (\n    isValidElement(icon) &&\n    cloneElement(icon, {\n      ...props, // default icons props from input\n      ...(icon as ReactElement).props, // user's props on <Icon>\n      ...rest, // anything else\n      className: cx(mergedClassName, (icon as ReactElement).props.className),\n    })\n  );\n});\n\nIconSlot.displayName = 'IconSlot';\n\nexport { IconSlot, type IconSlotProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,WAAW,KAAK,SAAS,WAAS,EACtC,MACA,WACA,WAAW,cACX,GAAG,QACa;AAChB,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,EAAE,WAAW,mBAAoB,GAAG,UAAU,aAAa,EAAE;CAEnE,MAAM,kBAAkB,GAAG,eAAe,mBAAmB;CAG7D,MAAM,UAAU;AAChB,KAAI,QAAQ,UAAU,UACpB,QAAO,oBAAC;EAAK,MAAM;EAAS,GAAI;EAAO,GAAI;EAAM,WAAW;GAAmB;AAGjF,KAAI,WAAW,KAAK,EAAE;EACpB,MAAM,SAAS,KAAK,aAAa,EAAE,CAAC;EACpC,MAAM,2BAA2B,QAAQ,MAAM;AAE/C,SACE,eAAe,OAAO,IACtB,aAAa,QAAQ;GACnB,GAAG;GACH,WAAW,GAAG,iBAAiB,yBAAyB;GAGzD,CAAO;;AAIZ,QACE,eAAe,KAAK,IACpB,aAAa,MAAM;EACjB,GAAG;EACH,GAAI,KAAsB;EAC1B,GAAG;EACH,WAAW,GAAG,iBAAkB,KAAsB,MAAM,UAAU;EACvE,CAAA;EAEH;AAEF,SAAS,cAAc"}

package/dist/components/Image.cjs

@@ -0,0 +1,96 @@
+/*! © 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');
+let react_jsx_runtime = require("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__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		alt,
+		className: require_styles_styler.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
+exports.Image = Image;