@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/components/client/Menu/utils/transformAriakitPlacement.d.ts

@@ -0,0 +1,32 @@
+import { MenuPlacement } from "../Menu.Provider.js";
+import { MenuProviderProps } from "@ariakit/react/menu";
+
+//#region src/components/client/Menu/utils/transformAriakitPlacement.d.ts
+
+/**
+ * Maps directionally-agnostic placement values to Ariakit LTR values
+ * - Converts 'start' to 'left' and 'end' to 'right' (with RTL support)
+ * - Examples:
+ *   - 'start' -> 'left' (or 'right' in RTL)
+ *   - 'end' -> 'right' (or 'left' in RTL)
+ *   - 'top-start' -> 'top-left' (or 'top-right' in RTL)
+ *   - 'bottom-end' -> 'bottom-right' (or 'bottom-left' in RTL)
+ *   - 'start-top' -> 'left-top' (or 'right-top' in RTL)
+ *   - 'end-bottom' -> 'right-bottom' (or 'left-bottom' in RTL)
+ *
+ * The function handles:
+ * - Simple placements (start/end)
+ * - Vertical-horizontal combinations (top-start, bottom-end, etc.)
+ * - Horizontal-vertical combinations (start-top, end-bottom, etc.)
+ * - RTL/LTR directionality
+ * - Undefined placements and options
+ */
+declare const transformAriakitPlacement: (/** The placement of the menu relative to the trigger */
+placement?: MenuPlacement, /** Extra options */
+options?: {
+  /** Whether to apply RTL/LTR directionality to the menu */
+  rtl?: boolean;
+}) => MenuProviderProps["placement"];
+//#endregion
+export { transformAriakitPlacement };
+//# sourceMappingURL=transformAriakitPlacement.d.ts.map

package/dist/components/client/Menu/utils/transformAriakitPlacement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformAriakitPlacement.d.ts","names":[],"sources":["../../../../../src/components/client/Menu/utils/transformAriakitPlacement.ts"],"sourcesContent":[],"mappings":";;;;;;;AAsBA,CAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;;;;;;;cAAa;YAEC;;;;MAMX"}

package/dist/components/client/Menu/utils/transformAriakitPlacement.js

@@ -0,0 +1,39 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/components/client/Menu/utils/transformAriakitPlacement.ts
+/**
+* Maps directionally-agnostic placement values to Ariakit LTR values
+* - Converts 'start' to 'left' and 'end' to 'right' (with RTL support)
+* - Examples:
+*   - 'start' -> 'left' (or 'right' in RTL)
+*   - 'end' -> 'right' (or 'left' in RTL)
+*   - 'top-start' -> 'top-left' (or 'top-right' in RTL)
+*   - 'bottom-end' -> 'bottom-right' (or 'bottom-left' in RTL)
+*   - 'start-top' -> 'left-top' (or 'right-top' in RTL)
+*   - 'end-bottom' -> 'right-bottom' (or 'left-bottom' in RTL)
+*
+* The function handles:
+* - Simple placements (start/end)
+* - Vertical-horizontal combinations (top-start, bottom-end, etc.)
+* - Horizontal-vertical combinations (start-top, end-bottom, etc.)
+* - RTL/LTR directionality
+* - Undefined placements and options
+*/
+const transformAriakitPlacement = (placement, options) => {
+	const isRtl = options?.rtl;
+	if (placement === "start") return isRtl ? "right" : "left";
+	if (placement === "end") return isRtl ? "left" : "right";
+	if (placement?.includes("-")) {
+		const [first, second] = placement.split("-");
+		if (first === "start" || first === "end") {
+			const horizontal = first === "start" ? isRtl ? "right" : "left" : isRtl ? "left" : "right";
+			if (second === "top" || second === "bottom") return `${horizontal}-${second === "bottom" ? "end" : "start"}`;
+		}
+		if (first === "top" || first === "bottom") return `${first}-${second === "start" ? isRtl ? "end" : "start" : isRtl ? "start" : "end"}`;
+	}
+	return placement;
+};
+
+//#endregion
+export { transformAriakitPlacement };
+//# sourceMappingURL=transformAriakitPlacement.js.map

package/dist/components/client/Menu/utils/transformAriakitPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformAriakitPlacement.js","names":[],"sources":["../../../../../src/components/client/Menu/utils/transformAriakitPlacement.ts"],"sourcesContent":["import type { MenuProviderProps as AriakitMenuProviderProps } from '@ariakit/react/menu';\n\nimport type { MenuPlacement } from '../Menu.Provider';\n\n/**\n * Maps directionally-agnostic placement values to Ariakit LTR values\n * - Converts 'start' to 'left' and 'end' to 'right' (with RTL support)\n * - Examples:\n *   - 'start' -> 'left' (or 'right' in RTL)\n *   - 'end' -> 'right' (or 'left' in RTL)\n *   - 'top-start' -> 'top-left' (or 'top-right' in RTL)\n *   - 'bottom-end' -> 'bottom-right' (or 'bottom-left' in RTL)\n *   - 'start-top' -> 'left-top' (or 'right-top' in RTL)\n *   - 'end-bottom' -> 'right-bottom' (or 'left-bottom' in RTL)\n *\n * The function handles:\n * - Simple placements (start/end)\n * - Vertical-horizontal combinations (top-start, bottom-end, etc.)\n * - Horizontal-vertical combinations (start-top, end-bottom, etc.)\n * - RTL/LTR directionality\n * - Undefined placements and options\n */\nexport const transformAriakitPlacement = (\n  /** The placement of the menu relative to the trigger */\n  placement?: MenuPlacement,\n  /** Extra options */\n  options?: {\n    /** Whether to apply RTL/LTR directionality to the menu */\n    rtl?: boolean;\n  },\n): AriakitMenuProviderProps['placement'] => {\n  const isRtl = options?.rtl;\n\n  // Handle simple start/end replacements\n  if (placement === 'start') {\n    return isRtl ? 'right' : 'left';\n  }\n  if (placement === 'end') {\n    return isRtl ? 'left' : 'right';\n  }\n\n  // Handle compound values\n  if (placement?.includes('-')) {\n    const [first, second] = placement.split('-');\n\n    // Handle horizontal-vertical combinations\n    if (first === 'start' || first === 'end') {\n      const horizontal = first === 'start' ? (isRtl ? 'right' : 'left') : isRtl ? 'left' : 'right';\n      // Ensure second is a valid vertical placement\n      if (second === 'top' || second === 'bottom') {\n        return `${horizontal}-${second === 'bottom' ? 'end' : 'start'}`;\n      }\n    }\n\n    // Handle vertical-horizontal combinations\n    if (first === 'top' || first === 'bottom') {\n      const horizontal = second === 'start' ? (isRtl ? 'end' : 'start') : isRtl ? 'start' : 'end';\n\n      // Ensure second is a valid vertical placement\n      return `${first}-${horizontal}`;\n    }\n  }\n\n  // Pass through other values unchanged\n  return placement as AriakitMenuProviderProps['placement'];\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,6BAEX,WAEA,YAI0C;CAC1C,MAAM,QAAQ,SAAS;AAGvB,KAAI,cAAc,QAChB,QAAO,QAAQ,UAAU;AAE3B,KAAI,cAAc,MAChB,QAAO,QAAQ,SAAS;AAI1B,KAAI,WAAW,SAAS,IAAI,EAAE;EAC5B,MAAM,CAAC,OAAO,UAAU,UAAU,MAAM,IAAI;AAG5C,MAAI,UAAU,WAAW,UAAU,OAAO;GACxC,MAAM,aAAa,UAAU,UAAW,QAAQ,UAAU,SAAU,QAAQ,SAAS;AAErF,OAAI,WAAW,SAAS,WAAW,SACjC,QAAO,GAAG,WAAW,GAAG,WAAW,WAAW,QAAQ;;AAK1D,MAAI,UAAU,SAAS,UAAU,SAI/B,QAAO,GAAG,MAAM,GAHG,WAAW,UAAW,QAAQ,QAAQ,UAAW,QAAQ,UAAU;;AAQ1F,QAAO"}

package/dist/components/client/Pressable.cjs

@@ -0,0 +1,112 @@
+"use client";
+/*! © 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_utils_createSlot = require('../../utils/createSlot.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Pressable.tsx
+const Slot = require_utils_createSlot.createSlot();
+/**
+* **🖲️ A primitive component for creating button interactions with accessibility support**
+*
+* @componentType Client component
+*
+* @description
+* The Pressable component is a primitive component that can be used
+* to create button interactions with accessibility support. It can be used
+* to trigger an action, such as submitting a form, navigating to a new page,
+* or adding interactivity to a section or card.
+*
+* @example
+* ```tsx
+* import { Pressable } from '@yahoo/uds';
+*
+* <Pressable
+*   backgroundColor="secondary"
+*   borderWidth="thin"
+*   borderColor="primary"
+*   borderRadius="lg"
+*   onPress={() => console.log('Pressed!')}
+*  >
+*    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+* </Pressable>
+* ```
+*
+* @usage
+* - If you need to add interactivity to a section or card.
+* - If you need a highly customized version of [Button](./button)
+*
+* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+*
+* @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+*
+*/
+const Pressable = (0, react.forwardRef)(function Pressable$1({ className, asChild, onPress, onClick = onPress, 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, dropShadow, insetShadow,...props }, ref) {
+	const styles = require_styles_styler.getStyles({
+		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,
+		dropShadow,
+		insetShadow,
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : "button", {
+		className: styles,
+		ref,
+		onClick,
+		tabIndex: 0,
+		...props
+	});
+});
+Pressable.displayName = "Pressable";
+
+//#endregion
+exports.Pressable = Pressable;

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

@@ -0,0 +1,46 @@
+import { UniversalPressableProps } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import * as react25 from "react";
+
+//#region src/components/client/Pressable.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {}
+/**
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The Pressable component is a primitive component that can be used
+ * to create button interactions with accessibility support. It can be used
+ * to trigger an action, such as submitting a form, navigating to a new page,
+ * or adding interactivity to a section or card.
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@yahoo/uds';
+ *
+ * <Pressable
+ *   backgroundColor="secondary"
+ *   borderWidth="thin"
+ *   borderColor="primary"
+ *   borderRadius="lg"
+ *   onPress={() => console.log('Pressed!')}
+ *  >
+ *    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+ * </Pressable>
+ * ```
+ *
+ * @usage
+ * - If you need to add interactivity to a section or card.
+ * - If you need a highly customized version of [Button](./button)
+ *
+ * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+ *
+ */
+declare const Pressable: react25.ForwardRefExoticComponent<PressableProps & react25.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Pressable, type PressableProps };
+//# sourceMappingURL=Pressable.d.cts.map

package/dist/components/client/Pressable.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.cts","names":[],"sources":["../../../src/components/client/Pressable.tsx"],"sourcesContent":[],"mappings":";;;;;KAQK,eAAA,CAAA,CAAA,CAAkB,KAAK,KAAA,CAAM,qBAAqB;UAE7C,cAAA,CAAA,OAAA,CAAuB,yBAAyB;;AAVO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,SAAA,CAAA,GAAA,CAAA,QAAA,CAAA,MAAA,CAAA,YAAA,CAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;;;;;AAQtC,CAAA,CAAA,CAAA,GAAA,CAAA,SAAA,CAAA,SAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,EAAA,CAAA;AAE8C,CAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,MAAA,CAAA,YAAA,CAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsCnE,WAAS,OAAA,CAAA,0BAAA,iBAAA,OAAA,CAAA,cAAA"}

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

@@ -0,0 +1,46 @@
+import { UniversalPressableProps } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import * as react1 from "react";
+
+//#region src/components/client/Pressable.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {}
+/**
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The Pressable component is a primitive component that can be used
+ * to create button interactions with accessibility support. It can be used
+ * to trigger an action, such as submitting a form, navigating to a new page,
+ * or adding interactivity to a section or card.
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@yahoo/uds';
+ *
+ * <Pressable
+ *   backgroundColor="secondary"
+ *   borderWidth="thin"
+ *   borderColor="primary"
+ *   borderRadius="lg"
+ *   onPress={() => console.log('Pressed!')}
+ *  >
+ *    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+ * </Pressable>
+ * ```
+ *
+ * @usage
+ * - If you need to add interactivity to a section or card.
+ * - If you need a highly customized version of [Button](./button)
+ *
+ * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+ *
+ */
+declare const Pressable: react1.ForwardRefExoticComponent<PressableProps & react1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Pressable, type PressableProps };
+//# sourceMappingURL=Pressable.d.ts.map

package/dist/components/client/Pressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","names":[],"sources":["../../../src/components/client/Pressable.tsx"],"sourcesContent":[],"mappings":";;;;;KAQK,eAAA,CAAA,CAAA,CAAkB,KAAK,KAAA,CAAM,qBAAqB;UAE7C,cAAA,CAAA,OAAA,CAAuB,yBAAyB;;AAVO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,SAAA,CAAA,GAAA,CAAA,QAAA,CAAA,MAAA,CAAA,YAAA,CAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;;;;;AAQtC,CAAA,CAAA,CAAA,GAAA,CAAA,SAAA,CAAA,SAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,EAAA,CAAA;AAE8C,CAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,MAAA,CAAA,YAAA,CAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsCnE,WAAS,MAAA,CAAA,0BAAA,iBAAA,MAAA,CAAA,cAAA"}

package/dist/components/client/Pressable.js

@@ -0,0 +1,112 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../../styles/styler.js";
+import { createSlot } from "../../utils/createSlot.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Pressable.tsx
+const Slot = createSlot();
+/**
+* **🖲️ A primitive component for creating button interactions with accessibility support**
+*
+* @componentType Client component
+*
+* @description
+* The Pressable component is a primitive component that can be used
+* to create button interactions with accessibility support. It can be used
+* to trigger an action, such as submitting a form, navigating to a new page,
+* or adding interactivity to a section or card.
+*
+* @example
+* ```tsx
+* import { Pressable } from '@yahoo/uds';
+*
+* <Pressable
+*   backgroundColor="secondary"
+*   borderWidth="thin"
+*   borderColor="primary"
+*   borderRadius="lg"
+*   onPress={() => console.log('Pressed!')}
+*  >
+*    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+* </Pressable>
+* ```
+*
+* @usage
+* - If you need to add interactivity to a section or card.
+* - If you need a highly customized version of [Button](./button)
+*
+* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+*
+* @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+*
+*/
+const Pressable = forwardRef(function Pressable$1({ className, asChild, onPress, onClick = onPress, 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, dropShadow, insetShadow,...props }, ref) {
+	const styles = getStyles({
+		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,
+		dropShadow,
+		insetShadow,
+		className
+	});
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: styles,
+		ref,
+		onClick,
+		tabIndex: 0,
+		...props
+	});
+});
+Pressable.displayName = "Pressable";
+
+//#endregion
+export { Pressable };
+//# sourceMappingURL=Pressable.js.map

package/dist/components/client/Pressable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.js","names":["Pressable"],"sources":["../../../src/components/client/Pressable.tsx"],"sourcesContent":["import type { UniversalPressableProps } from '@yahoo/uds/tokens';\nimport { forwardRef } from 'react';\n\nimport { getStyles } from '../../styles/styler';\nimport { createSlot } from '../../utils/createSlot';\n\nconst Slot = createSlot<React.ComponentType<HtmlButtonProps>>();\n\ntype HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;\n\ninterface PressableProps extends UniversalPressableProps, HtmlButtonProps {}\n\n/**\n * **🖲️ A primitive component for creating button interactions with accessibility support**\n *\n * @componentType Client component\n *\n * @description\n * The Pressable component is a primitive component that can be used\n * to create button interactions with accessibility support. It can be used\n * to trigger an action, such as submitting a form, navigating to a new page,\n * or adding interactivity to a section or card.\n *\n * @example\n * ```tsx\n * import { Pressable } from '@yahoo/uds';\n *\n * <Pressable\n *   backgroundColor=\"secondary\"\n *   borderWidth=\"thin\"\n *   borderColor=\"primary\"\n *   borderRadius=\"lg\"\n *   onPress={() => console.log('Pressed!')}\n *  >\n *    <Text variant=\"body1\" color=\"primary\" spacingHorizontal=\"7\" spacingVertical=\"5\">Click me...</Text>\n * </Pressable>\n * ```\n *\n * @usage\n * - If you need to add interactivity to a section or card.\n * - If you need a highly customized version of [Button](./button)\n *\n * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info\n *\n * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)\n *\n */\n\nconst Pressable = forwardRef<HTMLButtonElement, PressableProps>(function Pressable(\n  {\n    className,\n    asChild,\n    onPress,\n    onClick = onPress,\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    // shadow\n    dropShadow,\n    insetShadow,\n    // rest\n    ...props\n  }: PressableProps,\n  ref,\n) {\n  const styles = getStyles({\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    // shadow\n    dropShadow,\n    insetShadow,\n    // rest\n    className,\n  });\n\n  const Comp = asChild ? Slot : 'button';\n  return (\n    <Comp\n      className={styles}\n      ref={ref}\n      onClick={onClick}\n      // Required for Safari to render a focus ring\n      tabIndex={0}\n      {...props}\n    />\n  );\n});\n\nPressable.displayName = 'Pressable';\n\nexport { Pressable, type PressableProps };\n"],"mappings":";;;;;;;AAMA,MAAM,OAAO,YAAkD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0C/D,MAAM,YAAY,WAA8C,SAASA,YACvE,EACE,WACA,SACA,SACA,UAAU,SAEV,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,QAEA,YACA,YAEA,GAAG,SAEL,KACA;CACA,MAAM,SAAS,UAAU;EAEvB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACD,CAAC;AAGF,QACE,oBAFW,UAAU,OAAO;EAG1B,WAAW;EACN;EACI;EAET,UAAU;EACV,GAAI;GACJ;EAEJ;AAEF,UAAU,cAAc"}

package/dist/components/client/Radio/Radio.cjs

@@ -0,0 +1,226 @@
+"use client";
+/*! © 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_Box = require('../../Box.cjs');
+const require_components_FormLabel = require('../../FormLabel.cjs');
+const require_components_client_SpringMotionConfig = require('../SpringMotionConfig.cjs');
+const require_components_client_Radio_useRadioGroup = require('./useRadioGroup.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/client/Radio/Radio.tsx
+const RADIO_VARIANTS = ["primary", "secondary"];
+const RADIO_SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+const MotionBox = motion_react.m.create(require_components_Box.Box);
+const hoverTransition = {
+	layoutVariant: "smooth",
+	layoutSpeed: "3"
+};
+const pressTransition = {
+	layoutVariant: "veryBouncy",
+	layoutSpeed: "4"
+};
+/**
+* **⚙️️ A Radio.
+*
+* @componentType Client component
+*
+* @description
+* A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+*
+* @usage
+* - Forms: Radio
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Radio } from "@yahoo/uds";
+*
+* <Radio label="Name" />
+*```
+*
+* @related [Radio](https://uds.build/docs/components/Radio).
+**/
+const Radio = (0, react.forwardRef)(function Radio$1({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, layerClassNames,...radioProps }, parentRef) {
+	const generatedId = (0, react.useId)();
+	const uid = id ?? `uds-radio-${generatedId}`;
+	const innerRef = (0, react.useRef)(null);
+	/**
+	* State
+	*/
+	const { name, isControlled, checked, setGroupValue } = require_components_client_Radio_useRadioGroup.useRadioGroup({
+		name: nameProp,
+		value: valueProp,
+		checked: checkedProp,
+		defaultChecked
+	});
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const [isPressed, setIsPressed] = (0, react.useState)(false);
+	/**
+	* Derived values
+	*/
+	const variant = (0, react.useMemo)(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = (0, react.useMemo)(() => !disabled && isHovered, [disabled, isHovered]);
+	const showPressedEffect = (0, react.useMemo)(() => !disabled && !checked && isPressed, [
+		checked,
+		disabled,
+		isPressed
+	]);
+	const scale = (0, react.useMemo)(() => showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1, [showHoverEffect, showPressedEffect]);
+	const checkOpacity = (0, react.useMemo)(() => checked ? showPressedEffect ? "opacity-55" : "opacity-100" : "opacity-0", [checked, showPressedEffect]);
+	const showShadow = (0, react.useMemo)(() => {
+		return !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
+	}, [
+		checked,
+		disabled,
+		showHoverEffect,
+		showPressedEffect
+	]);
+	const motionAnimate = (0, react.useMemo)(() => ({ scale }), [scale]);
+	const motionTransition = (0, react.useMemo)(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
+	/**
+	* Handlers
+	*/
+	const handleOnChange = (0, react.useCallback)((e) => {
+		setGroupValue(e.target.value);
+		onChange?.(e);
+	}, [onChange, setGroupValue]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = (0, react.useCallback)(() => {
+		setIsHovered(true);
+	}, []);
+	const handleHoverEnd = (0, react.useCallback)(() => {
+		setIsHovered(false);
+	}, []);
+	const handleTapStart = (0, react.useCallback)(() => {
+		setIsPressed(true);
+	}, []);
+	const handleTapEnd = (0, react.useCallback)(() => {
+		setIsPressed(false);
+	}, []);
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	const classNames = {
+		root: require_styles_styler.getStyles({
+			radioSizeRoot: size,
+			radioVariantValueRoot: checked ? "checked" : "unchecked",
+			radioVariantRoot: variant,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: require_styles_styler.cx([
+				{
+					"cursor-pointer": !disabled,
+					"cursor-default": disabled,
+					"opacity-50": disabled
+				},
+				className,
+				layerClassNames?.root
+			])
+		}),
+		radio: require_styles_styler.getStyles({
+			radioSizeRadio: size,
+			radioVariantRadio: variant,
+			radioVariantValueRadio: checked ? "checked" : "unchecked",
+			className: require_styles_styler.cx([
+				"border",
+				"uds-ring",
+				"uds-ring-within",
+				cssAnimationDuration,
+				"transition-[background-color,border-color]",
+				"transition-shadow",
+				layerClassNames?.radio
+			])
+		}),
+		radioCircle: require_styles_styler.getStyles({
+			radioVariantRadioCircle: variant,
+			radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+			className: require_styles_styler.cx([
+				"pointer-events-none",
+				"w-[8px]",
+				"h-[8px]",
+				checkOpacity,
+				cssAnimationDuration,
+				"transition-opacity"
+			])
+		}),
+		htmlRadio: require_styles_styler.cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
+		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+	};
+	const RootElement = label ? motion_react.m.label : motion_react.m.div;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		...motionTransition,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
+			className: classNames.root,
+			"data-testid": "container",
+			onHoverStart: handleHoverStart,
+			onHoverEnd: handleHoverEnd,
+			onTapStart: handleTapStart,
+			onTap: handleTapEnd,
+			onTapCancel: handleTapEnd,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
+				position: "relative",
+				borderRadius: "full",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				className: classNames.radio,
+				animate: motionAnimate,
+				insetShadow: showShadow ? "lg-invert" : "none",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "radio",
+					tabIndex: 0,
+					...radioProps,
+					ref: (ref) => {
+						innerRef.current = ref;
+						if (typeof parentRef === "function") parentRef(ref);
+						else if (parentRef !== null) parentRef.current = ref;
+					},
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					id: uid,
+					name,
+					value: valueProp,
+					disabled,
+					"aria-invalid": hasError,
+					onChange: handleOnChange,
+					...isControlled ? { checked } : { defaultChecked },
+					className: classNames.htmlRadio
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+					borderRadius: "full",
+					className: classNames.radioCircle
+				})]
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+Radio.displayName = "Radio";
+
+//#endregion
+exports.RADIO_SIZES = RADIO_SIZES;
+exports.RADIO_VARIANTS = RADIO_VARIANTS;
+exports.Radio = Radio;