@yahoo/uds 3.100.0-beta.2 → 3.100.0-beta.4

package/dist/automated-config/dist/generated/autoVariants.cjs

@@ -545,6 +545,7 @@ const autoVariants = {
 		warning: "uds-toast-variant-warning-root"
 	},
 	tooltipSizeBody: { default: "uds-tooltip-size-default-body" },
+	tooltipSizeEndContent: { default: "uds-tooltip-size-default-endcontent" },
 	tooltipSizeIcon: { default: "uds-tooltip-size-default-icon" },
 	tooltipSizeRoot: { default: "uds-tooltip-size-default-root" },
 	tooltipSizeSvg: { default: "uds-tooltip-size-default-svg" },

package/dist/automated-config/dist/generated/autoVariants.d.cts

@@ -122,6 +122,7 @@ interface StylePropsVariantsAuto<T> {
   toastVariantIcon: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   toastVariantRoot: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   tooltipSizeBody: Record<'default', T>;
+  tooltipSizeEndContent: Record<'default', T>;
   tooltipSizeIcon: Record<'default', T>;
   tooltipSizeRoot: Record<'default', T>;
   tooltipSizeSvg: Record<'default', T>;

package/dist/automated-config/dist/generated/autoVariants.d.ts

@@ -122,6 +122,7 @@ interface StylePropsVariantsAuto<T> {
   toastVariantIcon: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   toastVariantRoot: Record<'error' | 'info' | 'loading' | 'success' | 'warning', T>;
   tooltipSizeBody: Record<'default', T>;
+  tooltipSizeEndContent: Record<'default', T>;
   tooltipSizeIcon: Record<'default', T>;
   tooltipSizeRoot: Record<'default', T>;
   tooltipSizeSvg: Record<'default', T>;

package/dist/automated-config/dist/generated/autoVariants.js

@@ -544,6 +544,7 @@ const autoVariants = {
 		warning: "uds-toast-variant-warning-root"
 	},
 	tooltipSizeBody: { default: "uds-tooltip-size-default-body" },
+	tooltipSizeEndContent: { default: "uds-tooltip-size-default-endcontent" },
 	tooltipSizeIcon: { default: "uds-tooltip-size-default-icon" },
 	tooltipSizeRoot: { default: "uds-tooltip-size-default-root" },
 	tooltipSizeSvg: { default: "uds-tooltip-size-default-svg" },

package/dist/automated-config/dist/generated/generatedConfigs.cjs

@@ -30423,6 +30423,61 @@ const TooltipConfig = {
 						]]
 					} }
 				},
+				endContent: {
+					label: "endContent",
+					properties: { textVariant: {
+						defaults: { default: "caption1" },
+						label: "shortcut text variant",
+						name: "textVariant",
+						typeOfFixture: ["textVariants"],
+						values: [[
+							"display1",
+							"display2",
+							"display3",
+							"title1",
+							"title2",
+							"title3",
+							"title4",
+							"headline1",
+							"body1",
+							"label1",
+							"label2",
+							"label3",
+							"label4",
+							"caption1",
+							"caption2",
+							"legal1",
+							"ui1",
+							"ui2",
+							"ui3",
+							"ui4",
+							"ui5",
+							"ui6",
+							"display1/emphasized",
+							"display2/emphasized",
+							"display3/emphasized",
+							"title1/emphasized",
+							"title2/emphasized",
+							"title3/emphasized",
+							"title4/emphasized",
+							"headline1/emphasized",
+							"body1/emphasized",
+							"label1/emphasized",
+							"label2/emphasized",
+							"label3/emphasized",
+							"label4/emphasized",
+							"caption1/emphasized",
+							"caption2/emphasized",
+							"legal1/emphasized",
+							"ui1/emphasized",
+							"ui2/emphasized",
+							"ui3/emphasized",
+							"ui4/emphasized",
+							"ui5/emphasized",
+							"ui6/emphasized"
+						]]
+					} }
+				},
 				icon: {
 					label: "icon",
 					properties: { size: {
@@ -30443,7 +30498,7 @@ const TooltipConfig = {
 					properties: {
 						gap: {
 							defaults: { default: "1" },
-							label: "spacing vertical gap",
+							label: "title/content row gap",
 							name: "gap",
 							typeOfFixture: ["spacingAliases"],
 							values: [[
@@ -30702,8 +30757,8 @@ const TooltipConfig = {
 						defaults: { default: 0 },
 						label: "background blur radius",
 						layerReference: {
-							layerName: "svg",
-							propertyName: "backgroundColor"
+							propertyName: "backgroundColor",
+							variablePath: "variant/default/svg"
 						},
 						name: "backdropBlur",
 						typeOfFixture: ["positiveIntegers"],

package/dist/automated-config/dist/generated/generatedConfigs.d.cts

@@ -3275,6 +3275,20 @@ declare const TooltipConfig: {
             };
           };
         };
+        readonly endContent: {
+          readonly label: "endContent";
+          readonly properties: {
+            readonly textVariant: {
+              readonly defaults: {
+                readonly default: "caption1";
+              };
+              readonly label: "shortcut text variant";
+              readonly name: "textVariant";
+              readonly typeOfFixture: readonly ["textVariants"];
+              readonly values: readonly [readonly ["display1", "display2", "display3", "title1", "title2", "title3", "title4", "headline1", "body1", "label1", "label2", "label3", "label4", "caption1", "caption2", "legal1", "ui1", "ui2", "ui3", "ui4", "ui5", "ui6", "display1/emphasized", "display2/emphasized", "display3/emphasized", "title1/emphasized", "title2/emphasized", "title3/emphasized", "title4/emphasized", "headline1/emphasized", "body1/emphasized", "label1/emphasized", "label2/emphasized", "label3/emphasized", "label4/emphasized", "caption1/emphasized", "caption2/emphasized", "legal1/emphasized", "ui1/emphasized", "ui2/emphasized", "ui3/emphasized", "ui4/emphasized", "ui5/emphasized", "ui6/emphasized"]];
+            };
+          };
+        };
         readonly icon: {
           readonly label: "icon";
           readonly properties: {
@@ -3296,7 +3310,7 @@ declare const TooltipConfig: {
               readonly defaults: {
                 readonly default: "1";
               };
-              readonly label: "spacing vertical gap";
+              readonly label: "title/content row gap";
               readonly name: "gap";
               readonly typeOfFixture: readonly ["spacingAliases"];
               readonly values: readonly [readonly ["0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"]];
@@ -3385,8 +3399,8 @@ declare const TooltipConfig: {
               };
               readonly label: "background blur radius";
               readonly layerReference: {
-                readonly layerName: "svg";
                 readonly propertyName: "backgroundColor";
+                readonly variablePath: "variant/default/svg";
               };
               readonly name: "backdropBlur";
               readonly typeOfFixture: readonly ["positiveIntegers"];

package/dist/automated-config/dist/generated/generatedConfigs.d.ts

@@ -3275,6 +3275,20 @@ declare const TooltipConfig: {
             };
           };
         };
+        readonly endContent: {
+          readonly label: "endContent";
+          readonly properties: {
+            readonly textVariant: {
+              readonly defaults: {
+                readonly default: "caption1";
+              };
+              readonly label: "shortcut text variant";
+              readonly name: "textVariant";
+              readonly typeOfFixture: readonly ["textVariants"];
+              readonly values: readonly [readonly ["display1", "display2", "display3", "title1", "title2", "title3", "title4", "headline1", "body1", "label1", "label2", "label3", "label4", "caption1", "caption2", "legal1", "ui1", "ui2", "ui3", "ui4", "ui5", "ui6", "display1/emphasized", "display2/emphasized", "display3/emphasized", "title1/emphasized", "title2/emphasized", "title3/emphasized", "title4/emphasized", "headline1/emphasized", "body1/emphasized", "label1/emphasized", "label2/emphasized", "label3/emphasized", "label4/emphasized", "caption1/emphasized", "caption2/emphasized", "legal1/emphasized", "ui1/emphasized", "ui2/emphasized", "ui3/emphasized", "ui4/emphasized", "ui5/emphasized", "ui6/emphasized"]];
+            };
+          };
+        };
         readonly icon: {
           readonly label: "icon";
           readonly properties: {
@@ -3296,7 +3310,7 @@ declare const TooltipConfig: {
               readonly defaults: {
                 readonly default: "1";
               };
-              readonly label: "spacing vertical gap";
+              readonly label: "title/content row gap";
               readonly name: "gap";
               readonly typeOfFixture: readonly ["spacingAliases"];
               readonly values: readonly [readonly ["0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"]];
@@ -3385,8 +3399,8 @@ declare const TooltipConfig: {
               };
               readonly label: "background blur radius";
               readonly layerReference: {
-                readonly layerName: "svg";
                 readonly propertyName: "backgroundColor";
+                readonly variablePath: "variant/default/svg";
               };
               readonly name: "backdropBlur";
               readonly typeOfFixture: readonly ["positiveIntegers"];

package/dist/automated-config/dist/generated/generatedConfigs.js

@@ -30422,6 +30422,61 @@ const TooltipConfig = {
 						]]
 					} }
 				},
+				endContent: {
+					label: "endContent",
+					properties: { textVariant: {
+						defaults: { default: "caption1" },
+						label: "shortcut text variant",
+						name: "textVariant",
+						typeOfFixture: ["textVariants"],
+						values: [[
+							"display1",
+							"display2",
+							"display3",
+							"title1",
+							"title2",
+							"title3",
+							"title4",
+							"headline1",
+							"body1",
+							"label1",
+							"label2",
+							"label3",
+							"label4",
+							"caption1",
+							"caption2",
+							"legal1",
+							"ui1",
+							"ui2",
+							"ui3",
+							"ui4",
+							"ui5",
+							"ui6",
+							"display1/emphasized",
+							"display2/emphasized",
+							"display3/emphasized",
+							"title1/emphasized",
+							"title2/emphasized",
+							"title3/emphasized",
+							"title4/emphasized",
+							"headline1/emphasized",
+							"body1/emphasized",
+							"label1/emphasized",
+							"label2/emphasized",
+							"label3/emphasized",
+							"label4/emphasized",
+							"caption1/emphasized",
+							"caption2/emphasized",
+							"legal1/emphasized",
+							"ui1/emphasized",
+							"ui2/emphasized",
+							"ui3/emphasized",
+							"ui4/emphasized",
+							"ui5/emphasized",
+							"ui6/emphasized"
+						]]
+					} }
+				},
 				icon: {
 					label: "icon",
 					properties: { size: {
@@ -30442,7 +30497,7 @@ const TooltipConfig = {
 					properties: {
 						gap: {
 							defaults: { default: "1" },
-							label: "spacing vertical gap",
+							label: "title/content row gap",
 							name: "gap",
 							typeOfFixture: ["spacingAliases"],
 							values: [[
@@ -30701,8 +30756,8 @@ const TooltipConfig = {
 						defaults: { default: 0 },
 						label: "background blur radius",
 						layerReference: {
-							layerName: "svg",
-							propertyName: "backgroundColor"
+							propertyName: "backgroundColor",
+							variablePath: "variant/default/svg"
 						},
 						name: "backdropBlur",
 						typeOfFixture: ["positiveIntegers"],

package/dist/automated-config/dist/generated/universalTokensConfigAuto.cjs

@@ -11933,6 +11933,11 @@ const defaultUniversalTokensConfigAuto = {
 				value: "ui3/emphasized",
 				valueType: "alias"
 			} } },
+			"size/default/endContent": { textVariant: { rest: {
+				type: "textVariants",
+				value: "caption1",
+				valueType: "alias"
+			} } },
 			"size/default/icon": { size: { rest: {
 				type: "iconSizes",
 				value: "xs",

package/dist/automated-config/dist/generated/universalTokensConfigAuto.js

@@ -11932,6 +11932,11 @@ const defaultUniversalTokensConfigAuto = {
 				value: "ui3/emphasized",
 				valueType: "alias"
 			} } },
+			"size/default/endContent": { textVariant: { rest: {
+				type: "textVariants",
+				value: "caption1",
+				valueType: "alias"
+			} } },
 			"size/default/icon": { size: { rest: {
 				type: "iconSizes",
 				value: "xs",

package/dist/automated-config/dist/properties.cjs

@@ -402,7 +402,12 @@ const publicProperties = {
 		twThemePath: () => {
 			return ``;
 		},
-		customValueRenderer: (schemaValue) => {
+		customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
+			if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
+				const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
+				const property = schema.variables[variablePath][propertyName].rest;
+				if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
+			}
 			return `blur(${schemaValue.value}px)`;
 		}
 	},

package/dist/automated-config/dist/properties.d.cts

@@ -18,7 +18,7 @@ interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
   twThemePath: (fixtureType: T, value: string) => string;
   possibleFixtures: readonly T[];
   extendedProperties?: ExtendablePropertiesName[] | ((context: ComponentConfigContext) => ExtendablePropertiesName[] | undefined | false);
-  customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string) => string;
+  customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string, originalPropertyDefinition?: SelectedConfigurableProperty<ConfigurablePropertiesName, any>) => string;
   concatenate?: boolean;
   concatenationDelimiter?: string;
 }
@@ -113,7 +113,7 @@ interface SelectedConfigurableProperty<C extends ConfigurablePropertiesName, O e
   pseudoStates?: PossibleStates[];
   supportsCustom?: boolean;
   layerReference?: {
-    layerName: string;
+    variablePath: string;
     propertyName: string;
   };
   defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };

package/dist/automated-config/dist/properties.d.ts

@@ -18,7 +18,7 @@ interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
   twThemePath: (fixtureType: T, value: string) => string;
   possibleFixtures: readonly T[];
   extendedProperties?: ExtendablePropertiesName[] | ((context: ComponentConfigContext) => ExtendablePropertiesName[] | undefined | false);
-  customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string) => string;
+  customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string, originalPropertyDefinition?: SelectedConfigurableProperty<ConfigurablePropertiesName, any>) => string;
   concatenate?: boolean;
   concatenationDelimiter?: string;
 }
@@ -113,7 +113,7 @@ interface SelectedConfigurableProperty<C extends ConfigurablePropertiesName, O e
   pseudoStates?: PossibleStates[];
   supportsCustom?: boolean;
   layerReference?: {
-    layerName: string;
+    variablePath: string;
     propertyName: string;
   };
   defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };

package/dist/automated-config/dist/properties.js

@@ -402,7 +402,12 @@ const publicProperties = {
 		twThemePath: () => {
 			return ``;
 		},
-		customValueRenderer: (schemaValue) => {
+		customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
+			if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
+				const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
+				const property = schema.variables[variablePath][propertyName].rest;
+				if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
+			}
 			return `blur(${schemaValue.value}px)`;
 		}
 	},

package/dist/automated-config/dist/utils/index.cjs

@@ -115,11 +115,11 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
 	return className.replaceAll(/\s+/g, "-");
 }
-const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue) => {
+const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = require_properties.configurableProperties[propertyName];
 	let newValue;
-	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme);
+	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
 	else {
 		const safeTwThemePath = propertyConfig.twThemePath;
 		newValue = theme(safeTwThemePath(type, String(value)));
@@ -222,10 +222,10 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 			}
 		} else if (typeof cssProperties === "string") {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
-			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		} else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProp];
-			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		}
 		/**
 		* Button root layer workarounds & enhancements.

package/dist/automated-config/dist/utils/index.d.cts

@@ -94,7 +94,7 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
   pseudoStates?: PossibleStates[];
   supportsCustom?: boolean;
   layerReference?: {
-    layerName: string;
+    variablePath: string;
     propertyName: string;
   };
 }): SelectedConfigurableProperty<C, O, T, V>;

package/dist/automated-config/dist/utils/index.d.ts

@@ -94,7 +94,7 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
   pseudoStates?: PossibleStates[];
   supportsCustom?: boolean;
   layerReference?: {
-    layerName: string;
+    variablePath: string;
     propertyName: string;
   };
 }): SelectedConfigurableProperty<C, O, T, V>;

package/dist/automated-config/dist/utils/index.js

@@ -111,11 +111,11 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
 	return className.replaceAll(/\s+/g, "-");
 }
-const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue) => {
+const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = configurableProperties[propertyName];
 	let newValue;
-	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme);
+	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
 	else {
 		const safeTwThemePath = propertyConfig.twThemePath;
 		newValue = theme(safeTwThemePath(type, String(value)));
@@ -218,10 +218,10 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 			}
 		} else if (typeof cssProperties === "string") {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
-			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		} else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
 			const existingValue = currentStyles?.[fullClassName]?.[cssProp];
-			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
+			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
 		}
 		/**
 		* Button root layer workarounds & enhancements.

package/dist/components/client/Toast/Toast.cjs

@@ -42,7 +42,7 @@ const iconMap = {
 * <Toast variant="info" message="This is a toast" />
 *```
 *
-* @related Tooltip (coming soon) and Popover (coming soon).
+* @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
 **/
 const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = _yahoo_uds_icons.Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
 	const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = require_components_client_Toast_UDSToastConfigProvider.useToastConfig(sizeProp, variantProp);

package/dist/components/client/Toast/Toast.d.cts

@@ -44,7 +44,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
  * <Toast variant="info" message="This is a toast" />
  *```
  *
- * @related Tooltip (coming soon) and Popover (coming soon).
+ * @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
  **/
 declare const Toast: {
   ({

package/dist/components/client/Toast/Toast.d.ts

@@ -44,7 +44,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
  * <Toast variant="info" message="This is a toast" />
  *```
  *
- * @related Tooltip (coming soon) and Popover (coming soon).
+ * @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
  **/
 declare const Toast: {
   ({

package/dist/components/client/Toast/Toast.js

@@ -40,7 +40,7 @@ const iconMap = {
 * <Toast variant="info" message="This is a toast" />
 *```
 *
-* @related Tooltip (coming soon) and Popover (coming soon).
+* @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
 **/
 const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
 	const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = useToastConfig(sizeProp, variantProp);

package/dist/components/client/Tooltip/Tooltip.cjs

@@ -8,7 +8,35 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
 
 //#region src/components/client/Tooltip/Tooltip.tsx
-function Tooltip({ children, placement = "top", open, portal = true }) {
+/**
+* **⚙️️ A Tooltip component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+*
+* Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+*
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button>Tooltip Trigger</Button>
+*   </TooltipTrigger>
+*   <TooltipContent>basic tooltip content</TooltipContent>
+* </Tooltip>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+**/
+function Tooltip({ children, placement, open, portal = true }) {
 	const hideOnHoverOutside = open === void 0;
 	const controlledProps = open !== void 0 ? {
 		showTimeout: 0,

package/dist/components/client/Tooltip/Tooltip.d.cts

@@ -3,12 +3,41 @@ import { UniversalTooltipProps } from "../../../types/dist/index.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tooltip/Tooltip.d.ts
+type TooltipProps = UniversalTooltipProps;
+/**
+ * **⚙️️ A Tooltip component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+ *
+ * Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+ *
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Tooltip Trigger</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>basic tooltip content</TooltipContent>
+ * </Tooltip>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+ **/
 declare function Tooltip({
   children,
   placement,
   open,
   portal
-}: UniversalTooltipProps): react_jsx_runtime0.JSX.Element;
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
 declare namespace Tooltip {
   var displayName: string;
 }

package/dist/components/client/Tooltip/Tooltip.d.ts

@@ -3,12 +3,41 @@ import { UniversalTooltipProps } from "../../../types/dist/index.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tooltip/Tooltip.d.ts
+type TooltipProps = UniversalTooltipProps;
+/**
+ * **⚙️️ A Tooltip component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+ *
+ * Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+ *
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Tooltip Trigger</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>basic tooltip content</TooltipContent>
+ * </Tooltip>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+ **/
 declare function Tooltip({
   children,
   placement,
   open,
   portal
-}: UniversalTooltipProps): react_jsx_runtime0.JSX.Element;
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
 declare namespace Tooltip {
   var displayName: string;
 }