@yahoo/uds 3.66.1 → 3.67.0-beta.2

package/dist/components/experimental/client/SwitchV2.cjs

@@ -0,0 +1,183 @@
+"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_IconSlot = require('../../IconSlot.cjs');
+const require_components_experimental_client_AvoidMotionLibraryProvider = require('./AvoidMotionLibraryProvider.cjs');
+const require_components_client_SpringMotionConfig = require('../../client/SpringMotionConfig.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react_m = require("motion/react-m");
+motion_react_m = require_rolldown_runtime.__toESM(motion_react_m);
+
+//#region src/components/experimental/client/SwitchV2.tsx
+const loadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domMax").then(({ domMax }) => domMax);
+const MotionBox = motion_react_m.create(require_components_Box.Box);
+/**
+* **⚙️️ An switch.
+*
+* @componentType Client component
+*
+* @description
+* A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
+*
+* @usage
+* - Forms: switch
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Switch } from "@yahoo/uds";
+*
+* <Switch label="Name" required />
+*```
+*
+* @related [Checkbox](https://uds.build/docs/components/checkbox).
+**/
+const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames, ...switchProps }, parentRef) {
+	const generatedId = (0, react.useId)();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const innerRef = (0, react.useRef)(null);
+	/**
+	* State
+	*/
+	const isControlled = isOnProp !== void 0;
+	const [isOn, setIsOn] = (0, react.useState)(isControlled ? isOnProp : defaultIsOn);
+	/**
+	* Handlers
+	*/
+	const handleChange = (0, react.useCallback)((e) => {
+		onChange?.(e);
+		if (!isControlled) setIsOn(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = forceReduceMotion ? "duration-0" : "duration-120 motion-reduce:duration-0";
+	/**
+	* Effects
+	*/
+	(0, react.useEffect)(() => {
+		if (isControlled) setIsOn(isOnProp);
+	}, [isOnProp, isControlled]);
+	const classNames = {
+		root: require_styles_styler.getStyles({
+			switchSizeRoot: size,
+			switchVariantRoot: "default",
+			switchVariantActiveRoot: isOn ? "on" : "off",
+			className: require_styles_styler.cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], layerClassNames?.root, className)
+		}),
+		switch: require_styles_styler.getStyles({
+			switchVariantSwitch: "default",
+			switchSizeSwitch: size,
+			switchVariantActiveSwitch: isOn ? "on" : "off",
+			className: require_styles_styler.cx("uds-ring", "uds-ring-within", "relative", "rounded-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
+		}),
+		handleContainer: require_styles_styler.cx("pointer-events-none", "relative", "w-full", "h-full"),
+		handle: require_styles_styler.getStyles({
+			switchSizeHandle: size,
+			className: require_styles_styler.cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0", layerClassNames?.handle)
+		}),
+		handleContents: require_styles_styler.cx("relative", "w-full", "h-full", "rounded-full", "overflow-hidden", !disabled && "group-hover:scale-105", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[transform,opacity]"),
+		handleCircle: require_styles_styler.getStyles({
+			switchVariantActiveHandle: isOn ? "on" : "off",
+			switchVariantHandle: "default",
+			className: require_styles_styler.cx("absolute", "top-0", "left-0", "right-0", "bottom-0")
+		}),
+		handleIcon: require_styles_styler.getStyles({
+			switchSizeHandleIcon: size,
+			switchVariantHandleIcon: "default",
+			switchVariantActiveHandleIcon: isOn ? "on" : "off",
+			className: require_styles_styler.cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
+		}),
+		htmlCheckbox: 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)
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		loadFeatures,
+		layoutVariant: "bouncy",
+		layoutSpeed: "4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(label ? "label" : "div", {
+			className: classNames.root,
+			"data-testid": "switch-root",
+			tabIndex: -1,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+				className: classNames.switch,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					...switchProps,
+					ref: (ref) => {
+						innerRef.current = ref;
+						if (typeof parentRef === "function") parentRef(ref);
+						else if (parentRef !== null) parentRef.current = ref;
+					},
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					id: uid,
+					disabled,
+					required,
+					checked: isControlled ? isOn : void 0,
+					defaultChecked: isControlled ? void 0 : defaultIsOn,
+					onChange: handleChange,
+					className: classNames.htmlCheckbox,
+					style: {}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+					className: classNames.handleContainer,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionBox, {
+						className: classNames.handle,
+						layout: "position",
+						layoutDependency: isOn,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+							className: classNames.handleContents,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: classNames.handleCircle }),
+								onIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+									icon: onIcon,
+									iconProps: {
+										variant: "fill",
+										size: "sm"
+									},
+									"data-testid": "on-icon",
+									className: require_styles_styler.cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
+								}),
+								offIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+									icon: offIcon,
+									iconProps: {
+										variant: "fill",
+										size: "sm"
+									},
+									"data-testid": "off-icon",
+									className: require_styles_styler.cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
+								})
+							]
+						})
+					})
+				})]
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				required,
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+SwitchV2.displayName = "SwitchV2";
+const SwitchV2AvoidMotionLibraryProvider = require_components_experimental_client_AvoidMotionLibraryProvider.AvoidMotionLibraryProvider;
+
+//#endregion
+exports.SwitchV2 = SwitchV2;
+exports.SwitchV2AvoidMotionLibraryProvider = SwitchV2AvoidMotionLibraryProvider;

package/dist/{experimental/client/SwitchV2.d.ts → components/experimental/client/SwitchV2.d.cts}

@@ -1,17 +1,16 @@
-import { c as UniversalSwitchProps } from '../../universalTokensConfigAuto-BHqbAL0M.js';
-import react__default from 'react';
-import '@yahoo/uds-icons/types';
-import 'motion/react';
-import 'type-fest';
+import { UniversalSwitchProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import React from "react";
 
-type NativeInputProps = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+//#region src/components/experimental/client/SwitchV2.d.ts
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
 interface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {
-    layerClassNames?: {
-        root?: string;
-        switch?: string;
-        handle?: string;
-        label?: string;
-    };
+  layerClassNames?: {
+    root?: string;
+    switch?: string;
+    handle?: string;
+    label?: string;
+  };
 }
 /**
  * **⚙️️ An switch.
@@ -37,7 +36,7 @@ interface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {
  *
  * @related [Checkbox](https://uds.build/docs/components/checkbox).
  **/
-declare const SwitchV2: react__default.ForwardRefExoticComponent<SwitchV2Props & react__default.RefAttributes<HTMLInputElement>>;
-declare const SwitchV2AvoidMotionLibraryProvider: react__default.Provider<boolean>;
-
-export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };
+declare const SwitchV2: React.ForwardRefExoticComponent<SwitchV2Props & React.RefAttributes<HTMLInputElement>>;
+declare const SwitchV2AvoidMotionLibraryProvider: React.Provider<boolean>;
+//#endregion
+export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };

package/dist/{experimental/client/SwitchV2.d.cts → components/experimental/client/SwitchV2.d.ts}

@@ -1,17 +1,16 @@
-import { c as UniversalSwitchProps } from '../../universalTokensConfigAuto-BHqbAL0M.cjs';
-import react__default from 'react';
-import '@yahoo/uds-icons/types';
-import 'motion/react';
-import 'type-fest';
+import { UniversalSwitchProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import React from "react";
 
-type NativeInputProps = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+//#region src/components/experimental/client/SwitchV2.d.ts
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
 interface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {
-    layerClassNames?: {
-        root?: string;
-        switch?: string;
-        handle?: string;
-        label?: string;
-    };
+  layerClassNames?: {
+    root?: string;
+    switch?: string;
+    handle?: string;
+    label?: string;
+  };
 }
 /**
  * **⚙️️ An switch.
@@ -37,7 +36,7 @@ interface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {
  *
  * @related [Checkbox](https://uds.build/docs/components/checkbox).
  **/
-declare const SwitchV2: react__default.ForwardRefExoticComponent<SwitchV2Props & react__default.RefAttributes<HTMLInputElement>>;
-declare const SwitchV2AvoidMotionLibraryProvider: react__default.Provider<boolean>;
-
-export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };
+declare const SwitchV2: React.ForwardRefExoticComponent<SwitchV2Props & React.RefAttributes<HTMLInputElement>>;
+declare const SwitchV2AvoidMotionLibraryProvider: React.Provider<boolean>;
+//#endregion
+export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };

package/dist/components/experimental/client/SwitchV2.js

@@ -0,0 +1,179 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { FormLabel } from "../../FormLabel.js";
+import { IconSlot } from "../../IconSlot.js";
+import { AvoidMotionLibraryProvider } from "./AvoidMotionLibraryProvider.js";
+import { SpringMotionConfig } from "../../client/SpringMotionConfig.js";
+import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as m from "motion/react-m";
+
+//#region src/components/experimental/client/SwitchV2.tsx
+const loadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domMax").then(({ domMax }) => domMax);
+const MotionBox = m.create(Box);
+/**
+* **⚙️️ An switch.
+*
+* @componentType Client component
+*
+* @description
+* A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
+*
+* @usage
+* - Forms: switch
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Switch } from "@yahoo/uds";
+*
+* <Switch label="Name" required />
+*```
+*
+* @related [Checkbox](https://uds.build/docs/components/checkbox).
+**/
+const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames, ...switchProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const innerRef = useRef(null);
+	/**
+	* State
+	*/
+	const isControlled = isOnProp !== void 0;
+	const [isOn, setIsOn] = useState(isControlled ? isOnProp : defaultIsOn);
+	/**
+	* Handlers
+	*/
+	const handleChange = useCallback((e) => {
+		onChange?.(e);
+		if (!isControlled) setIsOn(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleFocus = useCallback((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = useCallback((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = forceReduceMotion ? "duration-0" : "duration-120 motion-reduce:duration-0";
+	/**
+	* Effects
+	*/
+	useEffect(() => {
+		if (isControlled) setIsOn(isOnProp);
+	}, [isOnProp, isControlled]);
+	const classNames = {
+		root: getStyles({
+			switchSizeRoot: size,
+			switchVariantRoot: "default",
+			switchVariantActiveRoot: isOn ? "on" : "off",
+			className: cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], layerClassNames?.root, className)
+		}),
+		switch: getStyles({
+			switchVariantSwitch: "default",
+			switchSizeSwitch: size,
+			switchVariantActiveSwitch: isOn ? "on" : "off",
+			className: cx("uds-ring", "uds-ring-within", "relative", "rounded-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
+		}),
+		handleContainer: cx("pointer-events-none", "relative", "w-full", "h-full"),
+		handle: getStyles({
+			switchSizeHandle: size,
+			className: cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0", layerClassNames?.handle)
+		}),
+		handleContents: cx("relative", "w-full", "h-full", "rounded-full", "overflow-hidden", !disabled && "group-hover:scale-105", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[transform,opacity]"),
+		handleCircle: getStyles({
+			switchVariantActiveHandle: isOn ? "on" : "off",
+			switchVariantHandle: "default",
+			className: cx("absolute", "top-0", "left-0", "right-0", "bottom-0")
+		}),
+		handleIcon: getStyles({
+			switchSizeHandleIcon: size,
+			switchVariantHandleIcon: "default",
+			switchVariantActiveHandleIcon: isOn ? "on" : "off",
+			className: cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
+		}),
+		htmlCheckbox: 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: cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+	};
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		loadFeatures,
+		layoutVariant: "bouncy",
+		layoutSpeed: "4",
+		children: /* @__PURE__ */ jsxs(label ? "label" : "div", {
+			className: classNames.root,
+			"data-testid": "switch-root",
+			tabIndex: -1,
+			children: [/* @__PURE__ */ jsxs(Box, {
+				className: classNames.switch,
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					...switchProps,
+					ref: (ref) => {
+						innerRef.current = ref;
+						if (typeof parentRef === "function") parentRef(ref);
+						else if (parentRef !== null) parentRef.current = ref;
+					},
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					id: uid,
+					disabled,
+					required,
+					checked: isControlled ? isOn : void 0,
+					defaultChecked: isControlled ? void 0 : defaultIsOn,
+					onChange: handleChange,
+					className: classNames.htmlCheckbox,
+					style: {}
+				}), /* @__PURE__ */ jsx(Box, {
+					className: classNames.handleContainer,
+					children: /* @__PURE__ */ jsx(MotionBox, {
+						className: classNames.handle,
+						layout: "position",
+						layoutDependency: isOn,
+						children: /* @__PURE__ */ jsxs(Box, {
+							className: classNames.handleContents,
+							children: [
+								/* @__PURE__ */ jsx(Box, { className: classNames.handleCircle }),
+								onIcon && /* @__PURE__ */ jsx(IconSlot, {
+									icon: onIcon,
+									iconProps: {
+										variant: "fill",
+										size: "sm"
+									},
+									"data-testid": "on-icon",
+									className: cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
+								}),
+								offIcon && /* @__PURE__ */ jsx(IconSlot, {
+									icon: offIcon,
+									iconProps: {
+										variant: "fill",
+										size: "sm"
+									},
+									"data-testid": "off-icon",
+									className: cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
+								})
+							]
+						})
+					})
+				})]
+			}), label && /* @__PURE__ */ jsx(FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				required,
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+SwitchV2.displayName = "SwitchV2";
+const SwitchV2AvoidMotionLibraryProvider = AvoidMotionLibraryProvider;
+
+//#endregion
+export { SwitchV2, SwitchV2AvoidMotionLibraryProvider };

package/dist/components/experimental/client/Tabs.cjs

@@ -0,0 +1,75 @@
+"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');
+const require_components_Text = require('../../Text.cjs');
+const require_components_Icon = require('../../Icon.cjs');
+const require_components_client_Pressable = require('../../client/Pressable.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __ariakit_react = require("@ariakit/react");
+
+//#region src/components/experimental/client/Tabs.tsx
+const Slot = require_utils_createSlot.createSlot();
+function Tabs(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ariakit_react.TabProvider, { ...props });
+}
+Tabs.displayName = "Tabs";
+const TabList = (0, react.forwardRef)(function TabList$1({ className, ...props }, ref) {
+	const styles = require_styles_styler.getStyles({
+		display: "flex",
+		flexDirection: "row",
+		columnGap: "6",
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ariakit_react.TabList, {
+		ref,
+		...props,
+		className: styles
+	});
+});
+TabList.displayName = "TabList";
+const Tab = function Tab$1({ asChild, label, value, startIcon }) {
+	const Comp = asChild ? Slot : "button";
+	const styles = require_styles_styler.getStyles({});
+	if (!(0, __ariakit_react.useTabContext)()) throw new Error("Tab must be wrapped in a Tabs component");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ariakit_react.Tab, {
+		id: value,
+		className: styles,
+		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
+			borderBottomWidth: "medium",
+			spacingBottom: "1",
+			spacingTop: "4",
+			className: require_styles_styler.cx("text-tertiary", "border-b-transparent", "aria-selected:border-b-brand", "aria-selected:text-secondary"),
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Comp, { children: [startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+				name: startIcon,
+				className: "text-current",
+				size: "md"
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				className: "text-current",
+				variant: "headline1",
+				as: "span",
+				children: label
+			})] })
+		})
+	});
+};
+Tab.displayName = "Tab";
+const TabPanel = (0, react.forwardRef)(function TabPanel$1(props, ref) {
+	const store = (0, __ariakit_react.useTabContext)();
+	if (!store) throw new Error("TabPanel must be wrapped in a Tabs component");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ariakit_react.TabPanel, {
+		ref,
+		tabId: store.useState("selectedId"),
+		...props
+	});
+});
+TabPanel.displayName = "TabPanel";
+
+//#endregion
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;

package/dist/components/experimental/client/Tabs.d.cts

@@ -0,0 +1,30 @@
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import "../../index.cjs";
+import * as react50 from "react";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+import { TabListProps, TabPanelProps, TabProviderProps as TabsProps } from "@ariakit/react";
+
+//#region src/components/experimental/client/Tabs.d.ts
+interface TabProps extends React.PropsWithChildren {
+  asChild?: boolean;
+  value: string;
+  label: string;
+  startIcon?: IconPropsWithSVGProps['name'];
+}
+declare function Tabs(props: TabsProps): react_jsx_runtime20.JSX.Element;
+declare namespace Tabs {
+  var displayName: string;
+}
+declare const TabList: react50.ForwardRefExoticComponent<Omit<TabListProps, "ref"> & react50.RefAttributes<HTMLDivElement>>;
+declare const Tab: {
+  ({
+    asChild,
+    label,
+    value,
+    startIcon
+  }: TabProps): react_jsx_runtime20.JSX.Element;
+  displayName: string;
+};
+declare const TabPanel: react50.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & react50.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/components/experimental/client/Tabs.d.ts

@@ -0,0 +1,30 @@
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import "../../index.js";
+import * as react55 from "react";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
+import { TabListProps, TabPanelProps, TabProviderProps as TabsProps } from "@ariakit/react";
+
+//#region src/components/experimental/client/Tabs.d.ts
+interface TabProps extends React.PropsWithChildren {
+  asChild?: boolean;
+  value: string;
+  label: string;
+  startIcon?: IconPropsWithSVGProps['name'];
+}
+declare function Tabs(props: TabsProps): react_jsx_runtime19.JSX.Element;
+declare namespace Tabs {
+  var displayName: string;
+}
+declare const TabList: react55.ForwardRefExoticComponent<Omit<TabListProps, "ref"> & react55.RefAttributes<HTMLDivElement>>;
+declare const Tab: {
+  ({
+    asChild,
+    label,
+    value,
+    startIcon
+  }: TabProps): react_jsx_runtime19.JSX.Element;
+  displayName: string;
+};
+declare const TabPanel: react55.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & react55.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/components/experimental/client/Tabs.js

@@ -0,0 +1,71 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { createSlot } from "../../../utils/createSlot.js";
+import { Text } from "../../Text.js";
+import { Icon } from "../../Icon.js";
+import { Pressable } from "../../client/Pressable.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, TabProvider, useTabContext } from "@ariakit/react";
+
+//#region src/components/experimental/client/Tabs.tsx
+const Slot = createSlot();
+function Tabs(props) {
+	return /* @__PURE__ */ jsx(TabProvider, { ...props });
+}
+Tabs.displayName = "Tabs";
+const TabList = forwardRef(function TabList$2({ className, ...props }, ref) {
+	const styles = getStyles({
+		display: "flex",
+		flexDirection: "row",
+		columnGap: "6",
+		className
+	});
+	return /* @__PURE__ */ jsx(TabList$1, {
+		ref,
+		...props,
+		className: styles
+	});
+});
+TabList.displayName = "TabList";
+const Tab = function Tab$2({ asChild, label, value, startIcon }) {
+	const Comp = asChild ? Slot : "button";
+	const styles = getStyles({});
+	if (!useTabContext()) throw new Error("Tab must be wrapped in a Tabs component");
+	return /* @__PURE__ */ jsx(Tab$1, {
+		id: value,
+		className: styles,
+		render: /* @__PURE__ */ jsx(Pressable, {
+			borderBottomWidth: "medium",
+			spacingBottom: "1",
+			spacingTop: "4",
+			className: cx("text-tertiary", "border-b-transparent", "aria-selected:border-b-brand", "aria-selected:text-secondary"),
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Comp, { children: [startIcon ? /* @__PURE__ */ jsx(Icon, {
+				name: startIcon,
+				className: "text-current",
+				size: "md"
+			}) : null, /* @__PURE__ */ jsx(Text, {
+				className: "text-current",
+				variant: "headline1",
+				as: "span",
+				children: label
+			})] })
+		})
+	});
+};
+Tab.displayName = "Tab";
+const TabPanel = forwardRef(function TabPanel$2(props, ref) {
+	const store = useTabContext();
+	if (!store) throw new Error("TabPanel must be wrapped in a Tabs component");
+	return /* @__PURE__ */ jsx(TabPanel$1, {
+		ref,
+		tabId: store.useState("selectedId"),
+		...props
+	});
+});
+TabPanel.displayName = "TabPanel";
+
+//#endregion
+export { Tab, TabList, TabPanel, Tabs };