@yahoo/uds 3.58.1 → 3.59.0-beta.1

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

@@ -0,0 +1,43 @@
+import { UniversalSwitchProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import React from "react";
+
+//#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;
+  };
+}
+/**
+ * **⚙️️ 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).
+ **/
+declare const SwitchV2: React.ForwardRefExoticComponent<SwitchV2Props & React.RefAttributes<HTMLInputElement>>;
+declare const SwitchV2AvoidMotionLibraryProvider: React.Provider<boolean>;
+//#endregion
+export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };
+//# sourceMappingURL=SwitchV2.d.ts.map

package/dist/components/experimental/client/SwitchV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchV2.d.ts","names":[],"sources":["../../../../src/components/experimental/client/SwitchV2.tsx"],"sourcesContent":[],"mappings":";;;;;KAYK,gBAAA,CAAA,CAAA,CAAmB,KACtB,KAAA,CAAM,oBAAoB;UASlB,aAAA,CAAA,OAAA,CAAsB,kBAAkB;;IAV7C,IAAA,CAAA,CAAA,CAAA,MAAA;IACuB,MAAA,CAAA,CAAA,CAAA,MAAA;IAApB,MAAA,CAAA,CAAA,CAAA,MAAA;IADgB,KAAA,CAAA,CAAA,CAAA,MAAA;EAAI,CAAA;AAAA;AAU0C,CAAA,CAAA;;;;;;AAmCxD,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,OAAA,CAAA,QAAA,CAAA,KAAA,CAAA,EAAA,CAAA,IAAA,CAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA,QAAA,CAAA,OAAA;;;;;;;;;;;;;;;;;;cAAR,UAAQ,KAAA,CAAA,0BAAA,gBAAA,KAAA,CAAA,cAAA;cA2RR,oCAAkC,KAAA,CAAA"}

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

@@ -0,0 +1,180 @@
+"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 };
+//# sourceMappingURL=SwitchV2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchV2.js","names":[],"sources":["../../../../src/components/experimental/client/SwitchV2.tsx"],"sourcesContent":["import type { UniversalSwitchProps } from '@yahoo/uds/tokens';\nimport * as m from 'motion/react-m';\nimport type { ChangeEvent, FocusEvent } from 'react';\nimport React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { IconSlot } from '../../../components/IconSlot';\nimport { cx, getStyles } from '../../../styles/styler';\nimport { Box } from '../../Box';\nimport { SpringMotionConfig } from '../../client/SpringMotionConfig';\nimport { FormLabel } from '../../FormLabel';\nimport { AvoidMotionLibraryProvider } from './AvoidMotionLibraryProvider';\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'\n>;\n\ntype SwitchChangeEvent = ChangeEvent<HTMLInputElement>;\n\nconst loadFeatures = () =>\n  import('@yahoo/uds/__private/motionFeatures/domMax').then(({ domMax }) => domMax);\n\ninterface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {\n  layerClassNames?: {\n    root?: string;\n    switch?: string;\n    handle?: string;\n    label?: string;\n  };\n}\n\nconst MotionBox = m.create(Box);\n\n/**\n * **⚙️️ An switch.\n *\n * @componentType Client component\n *\n * @description\n * 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.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info\n *\n * @usage\n * - Forms: switch\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Switch } from \"@yahoo/uds\";\n *\n * <Switch label=\"Name\" required />\n *```\n *\n * @related [Checkbox](https://uds.build/docs/components/checkbox).\n **/\nconst SwitchV2 = forwardRef<HTMLInputElement, SwitchV2Props>(function Switch(\n  {\n    id,\n    isOn: isOnProp,\n    defaultIsOn,\n    onChange,\n    label,\n    labelPosition = 'start',\n    size = 'md',\n    onIcon,\n    offIcon,\n    reduceMotion: forceReduceMotion,\n    disabled,\n    required,\n    onFocus,\n    onBlur,\n    className,\n    layerClassNames,\n    ...switchProps\n  },\n  parentRef,\n) {\n  const generatedId = useId();\n  const uid = id ?? `uds-input-${generatedId}`;\n\n  const innerRef = useRef<HTMLInputElement | null>(null);\n\n  /**\n   * State\n   */\n  const isControlled = isOnProp !== undefined;\n  const [isOn, setIsOn] = useState(isControlled ? isOnProp : defaultIsOn);\n\n  /**\n   * Handlers\n   */\n  const handleChange = useCallback(\n    (e: SwitchChangeEvent) => {\n      onChange?.(e);\n\n      // If uncontrolled, immediate change internal state.\n      if (!isControlled) {\n        setIsOn(e.target.checked);\n      }\n    },\n    [isControlled, onChange],\n  );\n\n  const handleFocus = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  // Motion\n  const reduceMotion = forceReduceMotion ? 'always' : 'user';\n  const cssAnimationDuration = forceReduceMotion\n    ? 'duration-0'\n    : 'duration-120 motion-reduce:duration-0';\n\n  /**\n   * Effects\n   */\n  // Reset state if prop changes.\n  useEffect(() => {\n    if (isControlled) {\n      setIsOn(isOnProp);\n    }\n  }, [isOnProp, isControlled]);\n\n  const classNames = {\n    root: getStyles({\n      switchSizeRoot: size,\n      switchVariantRoot: 'default',\n      switchVariantActiveRoot: isOn ? 'on' : 'off',\n      className: cx(\n        'group',\n        'flex',\n        'items-center',\n\n        labelPosition === 'start' ? 'flex-row' : 'flex-row-reverse',\n\n        ...(disabled ? ['cursor-default', 'opacity-50'] : ['cursor-pointer']),\n\n        layerClassNames?.root,\n        className,\n      ),\n    }),\n\n    switch: getStyles({\n      switchVariantSwitch: 'default',\n      switchSizeSwitch: size,\n      switchVariantActiveSwitch: isOn ? 'on' : 'off',\n      className: cx(\n        'uds-ring',\n        'uds-ring-within',\n\n        'relative',\n        'rounded-full',\n        'items-center',\n\n        cssAnimationDuration,\n        'transition-[background-color,box-shadow]',\n\n        layerClassNames?.switch,\n      ),\n    }),\n\n    handleContainer: cx('pointer-events-none', 'relative', 'w-full', 'h-full'),\n\n    handle: getStyles({\n      switchSizeHandle: size,\n      className: cx(\n        'absolute',\n        'top-0',\n        'bottom-0',\n\n        isOn ? 'right-0' : 'left-0',\n\n        layerClassNames?.handle,\n      ),\n    }),\n\n    handleContents: cx(\n      'relative',\n      'w-full',\n      'h-full',\n\n      'rounded-full',\n      'overflow-hidden',\n\n      !disabled && 'group-hover:scale-105',\n\n      'opacity-95',\n      !disabled && 'group-hover:opacity-100',\n\n      cssAnimationDuration,\n      'transition-[transform,opacity]',\n    ),\n\n    handleCircle: getStyles({\n      switchVariantActiveHandle: isOn ? 'on' : 'off',\n      switchVariantHandle: 'default',\n      className: cx('absolute', 'top-0', 'left-0', 'right-0', 'bottom-0'),\n    }),\n\n    handleIcon: getStyles({\n      switchSizeHandleIcon: size,\n      switchVariantHandleIcon: 'default',\n      switchVariantActiveHandleIcon: isOn ? 'on' : 'off',\n      className: cx(\n        'absolute',\n        'opacity-0',\n        'top-1/2',\n        'left-1/2',\n        'transform',\n        'translate-x-[-50%]',\n        'translate-y-[-50%]',\n\n        cssAnimationDuration,\n        'transition-opacity',\n      ),\n    }),\n\n    htmlCheckbox: cx(\n      // Control the cursor at the top of the component\n      // and don't let the input override it back to the\n      // default value.\n      'cursor-[inherit]',\n\n      'absolute',\n      'opacity-0',\n      'top-1/2',\n      'left-1/2',\n      'w-[calc(100%+2px)]',\n      'h-[calc(100%+2px)]',\n      'transform',\n      'translate-x-[-50%]',\n      'translate-y-[-50%]',\n    ),\n\n    label: cx(labelPosition === 'start' ? 'text-start' : 'text-end', layerClassNames?.label),\n  };\n\n  const RootElement = label ? 'label' : 'div';\n\n  return (\n    <SpringMotionConfig\n      reducedMotion={reduceMotion}\n      loadFeatures={loadFeatures}\n      layoutVariant=\"bouncy\"\n      layoutSpeed=\"4\"\n    >\n      <RootElement className={classNames.root} data-testid=\"switch-root\" tabIndex={-1}>\n        <Box className={classNames.switch}>\n          <input\n            type=\"checkbox\"\n            // These are standard HTML input props for customization.\n            {...switchProps}\n            //\n            // Provide a ref to the underlying input element for customization.\n            ref={(ref) => {\n              // Set internal ref.\n              innerRef.current = ref;\n\n              // Forward the ref to parent.\n              if (typeof parentRef === 'function') {\n                parentRef(ref);\n              } else if (parentRef !== null) {\n                parentRef.current = ref;\n              }\n            }}\n            //\n            // Track focus as a prop for easier styling.\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            //\n            // Core props for the switch.\n            id={uid}\n            disabled={disabled}\n            required={required}\n            checked={isControlled ? isOn : undefined}\n            defaultChecked={isControlled ? undefined : defaultIsOn}\n            onChange={handleChange}\n            //\n            // styles\n            className={classNames.htmlCheckbox}\n            style={{}}\n          />\n\n          <Box className={classNames.handleContainer}>\n            <MotionBox className={classNames.handle} layout=\"position\" layoutDependency={isOn}>\n              <Box className={classNames.handleContents}>\n                <Box className={classNames.handleCircle} />\n\n                {onIcon && (\n                  <IconSlot\n                    icon={onIcon}\n                    iconProps={{ variant: 'fill', size: 'sm' }}\n                    data-testid=\"on-icon\"\n                    className={cx(classNames.handleIcon, isOn ? 'opacity-100' : 'opacity-0')}\n                  />\n                )}\n\n                {offIcon && (\n                  <IconSlot\n                    icon={offIcon}\n                    iconProps={{ variant: 'fill', size: 'sm' }}\n                    data-testid=\"off-icon\"\n                    className={cx(classNames.handleIcon, !isOn ? 'opacity-100' : 'opacity-0')}\n                  />\n                )}\n              </Box>\n            </MotionBox>\n          </Box>\n        </Box>\n\n        {label && (\n          <FormLabel\n            as=\"div\"\n            variant=\"inherit\"\n            color=\"inherit\"\n            required={required}\n            label={label}\n            className={classNames.label}\n          />\n        )}\n      </RootElement>\n    </SpringMotionConfig>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nSwitchV2.displayName = 'SwitchV2';\n\nconst SwitchV2AvoidMotionLibraryProvider = AvoidMotionLibraryProvider;\n\nexport { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };\n"],"mappings":"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"}

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,31 @@
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import "../../index.cjs";
+import * as react42 from "react";
+import * as react_jsx_runtime12 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_runtime12.JSX.Element;
+declare namespace Tabs {
+  var displayName: string;
+}
+declare const TabList: react42.ForwardRefExoticComponent<Omit<TabListProps, "ref"> & react42.RefAttributes<HTMLDivElement>>;
+declare const Tab: {
+  ({
+    asChild,
+    label,
+    value,
+    startIcon
+  }: TabProps): react_jsx_runtime12.JSX.Element;
+  displayName: string;
+};
+declare const TabPanel: react42.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & react42.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };
+//# sourceMappingURL=Tabs.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.cts","names":[],"sources":["../../../../src/components/experimental/client/Tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAkBU,QAAA,CAAA,OAAA,CAAiB,KAAA,CAAM;;;;cAInB;AATyB;AAKW,OAAA,CAAA,QAAA,CAOzC,IAAA,CAAI,KAAQ,CAAA,CAAA,SAAS,CAAA,CAAA,CAAA,mBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,OAAA,CAAA,SAAA,CAArB,IAAA,CAAI;EAMP,GAAA,CAAA,WAMJ,CAAA,CAAA,MAAA;;cANI,OAAO,CAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,aAAA,CAAA,cAAA,CAAA,CAAA;cAUP,GAVO,CAAA,CAAA;EAAA,CAAA;IAAA,OAAA;IAAA,KAAA;IAAA,KAAA;IAAA;EAAA,CAAA,CAAA,CAUkD,QAVlD,CAAA,CAAA,CAU0D,mBAAA,CAAA,GAAA,CAAA,OAV1D;EAAA,WAAA,CAAA,CAAA,MAAA;CAAA;AAAA,OAAA,CAAA,KAAA,CAqDP,QAJL,CAAA,CAIa,OAAA,CAAA,yBAJb,CAIa,IAJb,CAIa,aAJb,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAIa,OAAA,CAAA,aAJb,CAIa,cAJb,CAAA,CAAA"}

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

@@ -0,0 +1,31 @@
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import "../../index.js";
+import * as react54 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: react54.ForwardRefExoticComponent<Omit<TabListProps, "ref"> & react54.RefAttributes<HTMLDivElement>>;
+declare const Tab: {
+  ({
+    asChild,
+    label,
+    value,
+    startIcon
+  }: TabProps): react_jsx_runtime20.JSX.Element;
+  displayName: string;
+};
+declare const TabPanel: react54.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & react54.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","names":[],"sources":["../../../../src/components/experimental/client/Tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAkBU,QAAA,CAAA,OAAA,CAAiB,KAAA,CAAM;;;;cAInB;AATyB;AAKW,OAAA,CAAA,QAAA,CAOzC,IAAA,CAAI,KAAQ,CAAA,CAAA,SAAS,CAAA,CAAA,CAAA,mBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,OAAA,CAAA,SAAA,CAArB,IAAA,CAAI;EAMP,GAAA,CAAA,WAMJ,CAAA,CAAA,MAAA;;cANI,OAAO,CAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,aAAA,CAAA,cAAA,CAAA,CAAA;cAUP,GAVO,CAAA,CAAA;EAAA,CAAA;IAAA,OAAA;IAAA,KAAA;IAAA,KAAA;IAAA;EAAA,CAAA,CAAA,CAUkD,QAVlD,CAAA,CAAA,CAU0D,mBAAA,CAAA,GAAA,CAAA,OAV1D;EAAA,WAAA,CAAA,CAAA,MAAA;CAAA;AAAA,OAAA,CAAA,KAAA,CAqDP,QAJL,CAAA,CAIa,OAAA,CAAA,yBAJb,CAIa,IAJb,CAIa,aAJb,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAIa,OAAA,CAAA,aAJb,CAIa,cAJb,CAAA,CAAA"}

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

@@ -0,0 +1,72 @@
+"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 };
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["TabList","OriginalTabList","Tab","OriginalTab","TabPanel","OriginalTabPanel"],"sources":["../../../../src/components/experimental/client/Tabs.tsx"],"sourcesContent":["/* eslint-disable react/no-multi-comp */\nimport type { TabListProps, TabPanelProps, TabProviderProps as TabsProps } from '@ariakit/react';\nimport {\n  Tab as OriginalTab,\n  TabList as OriginalTabList,\n  TabPanel as OriginalTabPanel,\n  TabProvider,\n  useTabContext,\n} from '@ariakit/react';\nimport { forwardRef } from 'react';\n\nimport { cx, getStyles } from '../../../styles/styler';\nimport { createSlot } from '../../../utils/createSlot';\nimport type { IconProps } from '../..';\nimport { Icon, Pressable, Text } from '../..';\n\nconst Slot = createSlot();\n\ninterface TabProps extends React.PropsWithChildren {\n  asChild?: boolean;\n  value: string;\n  label: string;\n  startIcon?: IconProps['name'];\n}\n\nfunction Tabs(props: TabsProps) {\n  return <TabProvider {...props} />;\n}\n\nTabs.displayName = 'Tabs';\n\nconst TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props }: TabListProps,\n  ref,\n) {\n  const styles = getStyles({ display: 'flex', flexDirection: 'row', columnGap: '6', className });\n  return <OriginalTabList ref={ref} {...props} className={styles} />;\n});\n\nTabList.displayName = 'TabList';\n\nconst Tab = function Tab({ asChild, label, value, startIcon }: TabProps) {\n  const Comp = asChild ? Slot : 'button';\n  const styles = getStyles({});\n  const store = useTabContext();\n  if (!store) {\n    throw new Error('Tab must be wrapped in a Tabs component');\n  }\n\n  const className = cx(\n    // Resting state\n    'text-tertiary',\n    'border-b-transparent',\n    // Selected state\n    'aria-selected:border-b-brand',\n    'aria-selected:text-secondary',\n  );\n\n  return (\n    <OriginalTab\n      id={value}\n      className={styles}\n      render={\n        <Pressable\n          borderBottomWidth=\"medium\"\n          spacingBottom=\"1\"\n          spacingTop=\"4\"\n          className={className}\n          asChild\n        >\n          <Comp>\n            {startIcon ? <Icon name={startIcon} className=\"text-current\" size=\"md\" /> : null}\n            <Text className=\"text-current\" variant=\"headline1\" as=\"span\">\n              {label}\n            </Text>\n          </Comp>\n        </Pressable>\n      }\n    />\n  );\n};\n\nTab.displayName = 'Tab';\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(props, ref) {\n  const store = useTabContext();\n  if (!store) {\n    throw new Error('TabPanel must be wrapped in a Tabs component');\n  }\n  const tabId = store.useState('selectedId');\n\n  return <OriginalTabPanel ref={ref} tabId={tabId} {...props} />;\n});\n\nTabPanel.displayName = 'TabPanel';\n\nexport {\n  Tab,\n  TabList,\n  type TabListProps,\n  TabPanel,\n  type TabPanelProps,\n  type TabProps,\n  Tabs,\n  type TabsProps,\n};\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,OAAO,YAAY;AASzB,SAAS,KAAK,OAAkB;AAC9B,QAAO,oBAAC,eAAY,GAAI,QAAS;;AAGnC,KAAK,cAAc;AAEnB,MAAM,UAAU,WAAyC,SAASA,UAChE,EAAE,UAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,UAAU;EAAE,SAAS;EAAQ,eAAe;EAAO,WAAW;EAAK;EAAW,CAAC;AAC9F,QAAO,oBAACC;EAAqB;EAAK,GAAI;EAAO,WAAW;GAAU;EAClE;AAEF,QAAQ,cAAc;AAEtB,MAAM,MAAM,SAASC,MAAI,EAAE,SAAS,OAAO,OAAO,aAAuB;CACvE,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,SAAS,UAAU,EAAE,CAAC;AAE5B,KAAI,CADU,eAAe,CAE3B,OAAM,IAAI,MAAM,0CAA0C;AAY5D,QACE,oBAACC;EACC,IAAI;EACJ,WAAW;EACX,QACE,oBAAC;GACC,mBAAkB;GAClB,eAAc;GACd,YAAW;GACX,WAlBU,GAEhB,iBACA,wBAEA,gCACA,+BACD;GAYO;aAEA,qBAAC,mBACE,YAAY,oBAAC;IAAK,MAAM;IAAW,WAAU;IAAe,MAAK;KAAO,GAAG,MAC5E,oBAAC;IAAK,WAAU;IAAe,SAAQ;IAAY,IAAG;cACnD;KACI,IACF;IACG;GAEd;;AAIN,IAAI,cAAc;AAElB,MAAM,WAAW,WAA0C,SAASC,WAAS,OAAO,KAAK;CACvF,MAAM,QAAQ,eAAe;AAC7B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,+CAA+C;AAIjE,QAAO,oBAACC;EAAsB;EAAK,OAFrB,MAAM,SAAS,aAAa;EAEO,GAAI;GAAS;EAC9D;AAEF,SAAS,cAAc"}

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

@@ -0,0 +1,167 @@
+"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_Text = require('../../Text.cjs');
+const require_components_Icon = require('../../Icon.cjs');
+const require_components_client_IconButton = require('../../client/IconButton.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let __yahoo_uds_icons = require("@yahoo/uds-icons");
+let lodash_isString_js = require("lodash/isString.js");
+lodash_isString_js = require_rolldown_runtime.__toESM(lodash_isString_js);
+let react_toastify = require("react-toastify");
+
+//#region src/components/experimental/client/Toast.tsx
+const wrapperStyles = require_styles_styler.getStyles({
+	borderRadius: "md",
+	spacingVertical: "3",
+	spacingHorizontal: "5",
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "center",
+	justifyContent: "space-between",
+	columnGap: "5",
+	overflow: "hidden",
+	position: "relative",
+	className: "cursor-pointer",
+	dropShadow: "md"
+});
+const textStyles = require_styles_styler.getStyles({
+	fontSize: "label2",
+	lineHeight: "label2",
+	fontWeight: "label2",
+	color: "primary"
+});
+const backgroundMap = {
+	default: "primary",
+	success: "primary",
+	error: "primary",
+	info: "primary",
+	warning: "primary"
+};
+const borderMap = {
+	default: "secondary",
+	success: "positive",
+	error: "alert",
+	info: "info",
+	warning: "warning"
+};
+const iconColorMap = {
+	default: "primary",
+	success: "positive",
+	error: "alert",
+	info: "info",
+	warning: "warning"
+};
+const colorMap = {
+	default: "primary",
+	success: "primary",
+	error: "primary",
+	info: "primary",
+	warning: "primary"
+};
+const getToastClassName = (toastClassName) => (context) => {
+	return require_styles_styler.cx(wrapperStyles, require_styles_styler.getStyles({
+		color: colorMap[context?.type || "default"],
+		backgroundColor: backgroundMap[context?.type || "default"],
+		borderWidth: "thin",
+		borderColor: borderMap[context?.type || "default"]
+	}), (0, lodash_isString_js.default)(toastClassName) ? toastClassName : toastClassName?.(context), "mb-2 last:mb-0");
+};
+function CustomCloseButton({ closeToast }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_IconButton.IconButton, {
+		className: "shrink-0",
+		name: __yahoo_uds_icons.Cross,
+		size: "sm",
+		variant: "tertiary",
+		onClick: closeToast
+	});
+}
+CustomCloseButton.displayName = "CustomCloseButton";
+function ToastContainer({ toastClassName,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_toastify.ToastContainer, {
+		toastClassName: getToastClassName(toastClassName),
+		className: textStyles,
+		hideProgressBar: true,
+		transition: react_toastify.Slide,
+		closeButton: CustomCloseButton,
+		autoClose: 6e3,
+		...props
+	});
+}
+ToastContainer.displayName = "ToastContainer";
+const toast = Object.assign((message, options = {}) => {
+	return (0, react_toastify.toast)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		color: "current",
+		children: message
+	}), {
+		...options,
+		type: "default"
+	});
+}, {
+	positive: (message, options = {}) => {
+		return (0, react_toastify.toast)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			color: "current",
+			children: message
+		}), {
+			...options,
+			type: "success",
+			icon: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+				name: __yahoo_uds_icons.CheckCircle,
+				size: "md",
+				variant: "fill",
+				color: iconColorMap["success"]
+			})
+		});
+	},
+	alert: (message, options = {}) => {
+		return (0, react_toastify.toast)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			color: "current",
+			children: message
+		}), {
+			...options,
+			type: "error",
+			icon: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+				name: __yahoo_uds_icons.Error,
+				size: "md",
+				variant: "fill",
+				color: iconColorMap["error"]
+			})
+		});
+	},
+	warning: (message, options = {}) => {
+		return (0, react_toastify.toast)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			color: "current",
+			children: message
+		}), {
+			...options,
+			type: "warning",
+			icon: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+				name: __yahoo_uds_icons.Warning,
+				size: "md",
+				variant: "fill",
+				color: iconColorMap["warning"]
+			})
+		});
+	},
+	info: (message, options = {}) => {
+		return (0, react_toastify.toast)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			color: "current",
+			children: message
+		}), {
+			...options,
+			type: "info",
+			icon: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+				name: __yahoo_uds_icons.Info,
+				size: "md",
+				variant: "fill",
+				color: iconColorMap["info"]
+			})
+		});
+	}
+});
+
+//#endregion
+exports.ToastContainer = ToastContainer;
+exports.getToastClassName = getToastClassName;
+exports.toast = toast;