@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.2

package/dist/components/client/Checkbox.js

@@ -0,0 +1,212 @@
+"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 { Icon } from "../Icon.js";
+import { SpringMotionConfig } from "./SpringMotionConfig.js";
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Minus } from "@yahoo/uds-icons";
+import { m, useReducedMotion } from "motion/react";
+
+//#region src/components/client/Checkbox.tsx
+const VARIANTS = ["primary", "secondary"];
+const SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+const isIndeterminate = (checked) => checked === "indeterminate";
+const getIcon = (checked) => {
+	if (isIndeterminate(checked)) return Minus;
+	return Check;
+};
+const MotionBox = m.create(Box);
+const hoverTransition = {
+	layoutVariant: "smooth",
+	layoutSpeed: "3"
+};
+const pressTransition = {
+	layoutVariant: "veryBouncy",
+	layoutSpeed: "4"
+};
+/**
+* **⚙️️ An checkbox.
+*
+* @componentType Client component
+*
+* @description
+* A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third "indeterminate" state to indicate partial selection.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+*
+* @usage
+* - Forms: checkbox
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Checkbox } from "@yahoo/uds";
+*
+* <Checkbox label="Name" required />
+*```
+*
+* @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
+**/
+const Checkbox = forwardRef(function Checkbox$1({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, layerClassNames,...checkboxProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const innerRef = useRef(null);
+	/**
+	* State
+	*/
+	const isControlled = checkedProp !== void 0;
+	const [checked, setChecked] = useState(isControlled ? checkedProp : defaultChecked);
+	const [isHovered, setIsHovered] = useState(false);
+	const [isPressed, setIsPressed] = useState(false);
+	/**
+	* Derived values
+	*/
+	const variant = useMemo(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = !disabled && isHovered;
+	const showPressedEffect = !disabled && isPressed;
+	const scale = useMemo(() => {
+		if (showPressedEffect) return .9;
+		if (showHoverEffect) return 1.1;
+		return 1;
+	}, [showPressedEffect, showHoverEffect]);
+	const checkOpacity = useMemo(() => {
+		if (!checked) return "opacity-0";
+		if (showPressedEffect) return "opacity-55";
+		return "opacity-100";
+	}, [checked, showPressedEffect]);
+	const motionAnimate = useMemo(() => ({ scale }), [scale]);
+	const motionTransition = useMemo(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
+	/**
+	* Handlers
+	*/
+	const handleChange = useCallback((e) => {
+		onChange?.(e);
+		if (!isControlled) setChecked(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleHoverStart = useCallback(() => {
+		setIsHovered(true);
+	}, []);
+	const handleHoverEnd = useCallback(() => {
+		setIsHovered(false);
+	}, []);
+	const handleTapStart = useCallback(() => {
+		setIsPressed(true);
+	}, []);
+	const handleTapEnd = useCallback(() => {
+		setIsPressed(false);
+	}, []);
+	/**
+	* Helpers
+	*/
+	const setDOMIndeterminate = (checked_) => {
+		if (!innerRef.current) return;
+		innerRef.current.indeterminate = isIndeterminate(checked_);
+	};
+	const prefersReducedMotion = useReducedMotion();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	/**
+	* Effects
+	*/
+	useEffect(() => {
+		if (isControlled) setChecked(checkedProp);
+	}, [checkedProp, isControlled]);
+	useEffect(() => {
+		setDOMIndeterminate(checked);
+	}, [checked]);
+	const valueState = isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+	const classNames = {
+		root: getStyles({
+			checkboxSizeRoot: size,
+			checkboxVariantRoot: variant,
+			checkboxVariantValueRoot: valueState,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: cx({
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className, layerClassNames?.root)
+		}),
+		checkbox: getStyles({
+			checkboxSizeCheckbox: size,
+			checkboxVariantCheckbox: variant,
+			checkboxVariantValueCheckbox: valueState,
+			className: cx("border", "rounded-[4px]", "uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]", layerClassNames?.checkbox)
+		}),
+		check: getStyles({
+			checkboxVariantCheckboxIcon: variant,
+			checkboxVariantValueCheckboxIcon: valueState,
+			className: cx("pointer-events-none", checkOpacity, 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)
+	};
+	const RootElement = label ? m.label : m.div;
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		...motionTransition,
+		children: /* @__PURE__ */ jsxs(RootElement, {
+			className: classNames.root,
+			"data-testid": "container",
+			onHoverStart: handleHoverStart,
+			onHoverEnd: handleHoverEnd,
+			onTapStart: handleTapStart,
+			onTap: handleTapEnd,
+			onTapCancel: handleTapEnd,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ jsxs(MotionBox, {
+				position: "relative",
+				className: classNames.checkbox,
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				animate: motionAnimate,
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					tabIndex: 0,
+					...checkboxProps,
+					ref: (ref) => {
+						innerRef.current = ref;
+						setDOMIndeterminate(checked);
+						if (typeof parentRef === "function") parentRef(ref);
+						else if (parentRef !== null) parentRef.current = ref;
+					},
+					id: uid,
+					disabled,
+					required,
+					"aria-invalid": hasError,
+					checked: isControlled ? isIndeterminate(checked) ? false : checked : void 0,
+					defaultChecked: isControlled ? void 0 : defaultChecked,
+					onChange: handleChange,
+					className: classNames.htmlCheckbox
+				}), /* @__PURE__ */ jsx(Icon, {
+					name: getIcon(checked),
+					size: "sm",
+					className: classNames.check
+				})]
+			}), label && /* @__PURE__ */ jsx(FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				required,
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+Checkbox.displayName = "Checkbox";
+
+//#endregion
+export { Checkbox, SIZES, VARIANTS };
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["VARIANT_ERROR_MAP: Record<CheckboxVariant, 'alert' | 'alert-secondary'>","Checkbox"],"sources":["../../../src/components/client/Checkbox.tsx"],"sourcesContent":["import type {\n  CheckboxSize,\n  CheckboxValue,\n  CheckboxVariant,\n  UniversalCheckboxProps,\n} from '@yahoo/uds/tokens';\nimport { Check, Minus } from '@yahoo/uds-icons';\nimport { m, useReducedMotion } from 'motion/react';\nimport type { ChangeEvent } from 'react';\nimport React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { cx, getStyles } from '../../styles/styler';\nimport { Box } from '../Box';\nimport { FormLabel } from '../FormLabel';\nimport { Icon } from '../Icon';\nimport { SpringMotionConfig } from './SpringMotionConfig';\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'checked' | 'size' | 'height' | 'width' | 'color'\n>;\n\ntype CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;\n\ninterface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {\n  layerClassNames?: {\n    root?: string;\n    checkbox?: string;\n    label?: string;\n  };\n}\n\nconst VARIANTS = ['primary', 'secondary'] satisfies CheckboxVariant[];\nconst SIZES = ['sm', 'md'] satisfies CheckboxSize[];\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, 'alert' | 'alert-secondary'> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\nconst isIndeterminate = (checked?: CheckboxValue) => checked === 'indeterminate';\n\nconst getIcon = (checked: CheckboxProps['checked']) => {\n  if (isIndeterminate(checked)) {\n    return Minus;\n  }\n\n  return Check;\n};\n\nconst MotionBox = m.create(Box);\n\nconst hoverTransition = { layoutVariant: 'smooth', layoutSpeed: '3' } as const;\nconst pressTransition = { layoutVariant: 'veryBouncy', layoutSpeed: '4' } as const;\n\n/**\n * **⚙️️ An checkbox.\n *\n * @componentType Client component\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info\n *\n * @usage\n * - Forms: checkbox\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Checkbox } from \"@yahoo/uds\";\n *\n * <Checkbox label=\"Name\" required />\n *```\n *\n * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).\n **/\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    id,\n    checked: checkedProp,\n    defaultChecked,\n    onChange,\n    label,\n    labelPosition = 'start',\n    variant: variantProp = 'primary',\n    size = 'md',\n    reduceMotion: forceReduceMotion,\n    disabled,\n    required,\n    hasError,\n    className,\n    layerClassNames,\n    ...checkboxProps\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 = checkedProp !== undefined;\n  const [checked, setChecked] = useState(isControlled ? checkedProp : defaultChecked);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPressed, setIsPressed] = useState(false);\n\n  /**\n   * Derived values\n   */\n  const variant = useMemo(\n    () => (hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp),\n    [hasError, variantProp],\n  );\n\n  const showHoverEffect = !disabled && isHovered;\n  const showPressedEffect = !disabled && isPressed;\n\n  const scale = useMemo(() => {\n    if (showPressedEffect) {\n      return 0.9;\n    }\n\n    if (showHoverEffect) {\n      return 1.1;\n    }\n\n    return 1;\n  }, [showPressedEffect, showHoverEffect]);\n\n  const checkOpacity = useMemo(() => {\n    if (!checked) {\n      return 'opacity-0';\n    }\n\n    if (showPressedEffect) {\n      return 'opacity-55';\n    }\n\n    return 'opacity-100';\n  }, [checked, showPressedEffect]);\n\n  const motionAnimate = useMemo(\n    () => ({\n      scale,\n    }),\n    [scale],\n  );\n\n  const motionTransition = useMemo(\n    () => (isPressed ? pressTransition : hoverTransition),\n    [isPressed],\n  );\n\n  /**\n   * Handlers\n   */\n  const handleChange = useCallback(\n    (e: CheckboxChangeEvent) => {\n      onChange?.(e);\n\n      // If uncontrolled, immediate change internal state.\n      if (!isControlled) {\n        setChecked(e.target.checked);\n      }\n    },\n    [isControlled, onChange],\n  );\n\n  const handleHoverStart = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleHoverEnd = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const handleTapStart = useCallback(() => {\n    setIsPressed(true);\n  }, []);\n\n  const handleTapEnd = useCallback(() => {\n    setIsPressed(false);\n  }, []);\n\n  /**\n   * Helpers\n   */\n  const setDOMIndeterminate = (checked_: CheckboxProps['checked']) => {\n    if (!innerRef.current) {\n      return;\n    }\n\n    innerRef.current.indeterminate = isIndeterminate(checked_);\n  };\n\n  // Motion\n  const prefersReducedMotion = useReducedMotion();\n  const reduceMotion = forceReduceMotion ? 'always' : 'user';\n\n  const cssAnimationDuration =\n    prefersReducedMotion || forceReduceMotion ? 'duration-0' : 'duration-120';\n\n  /**\n   * Effects\n   */\n  // Reset state if prop changes.\n  useEffect(() => {\n    if (isControlled) {\n      setChecked(checkedProp);\n    }\n  }, [checkedProp, isControlled]);\n\n  // When the checked prop changes, also set DOM indeterminate state.\n  useEffect(() => {\n    setDOMIndeterminate(checked);\n  }, [checked]);\n\n  const valueState = isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n\n  const classNames = {\n    root: getStyles({\n      checkboxSizeRoot: size,\n      checkboxVariantRoot: variant,\n      checkboxVariantValueRoot: valueState,\n      display: 'flex',\n      flexDirection: labelPosition === 'start' ? 'row' : 'row-reverse',\n      alignItems: 'center',\n      className: cx(\n        {\n          'cursor-pointer': !disabled,\n          'cursor-default': disabled,\n          'opacity-50': disabled,\n        },\n\n        className,\n        layerClassNames?.root,\n      ),\n    }),\n\n    checkbox: getStyles({\n      checkboxSizeCheckbox: size,\n      checkboxVariantCheckbox: variant,\n      checkboxVariantValueCheckbox: valueState,\n      className: cx(\n        'border',\n        'rounded-[4px]',\n        'uds-ring',\n        'uds-ring-within',\n\n        cssAnimationDuration,\n        'transition-[background-color,border-color,box-shadow]',\n\n        layerClassNames?.checkbox,\n      ),\n    }),\n\n    check: getStyles({\n      checkboxVariantCheckboxIcon: variant,\n      checkboxVariantValueCheckboxIcon: valueState,\n      className: cx(\n        'pointer-events-none',\n\n        checkOpacity,\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      // Overlay the invisible checkbox over the designed\n      // checkbox so that it can be clicked directly.\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 ? m.label : m.div;\n\n  return (\n    <SpringMotionConfig reducedMotion={reduceMotion} {...motionTransition}>\n      <RootElement\n        className={classNames.root}\n        data-testid=\"container\"\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\n        onTapStart={handleTapStart}\n        onTap={handleTapEnd}\n        onTapCancel={handleTapEnd}\n        tabIndex={-1}\n      >\n        <MotionBox\n          position=\"relative\"\n          className={classNames.checkbox}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          flex=\"none\"\n          animate={motionAnimate}\n        >\n          <input\n            type=\"checkbox\"\n            // Required for Safari to render a focus ring\n            tabIndex={0}\n            // These are standard HTML input props for customization.\n            {...checkboxProps}\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              // Now that we have the ref, apply the current state.\n              setDOMIndeterminate(checked);\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            // Core props for the checkbox.\n            id={uid}\n            disabled={disabled}\n            required={required}\n            aria-invalid={hasError}\n            checked={isControlled ? (isIndeterminate(checked) ? false : checked) : undefined}\n            defaultChecked={isControlled ? undefined : defaultChecked}\n            onChange={handleChange}\n            //\n            // styles\n            className={classNames.htmlCheckbox}\n          />\n\n          <Icon name={getIcon(checked)} size=\"sm\" className={classNames.check} />\n        </MotionBox>\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\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps, SIZES, VARIANTS };\n"],"mappings":"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"}

package/dist/components/client/Chip/Chip.cjs

@@ -0,0 +1,67 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_client_Chip_ChipButton = require('./ChipButton.cjs');
+const require_components_client_Chip_ChipDismissible = require('./ChipDismissible.cjs');
+const require_components_client_Chip_ChipLink = require('./ChipLink.cjs');
+const require_components_client_Chip_ChipToggle = require('./ChipToggle.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Chip/Chip.tsx
+/**
+* **⚙️️ A chip.
+*
+* @componentType Client component
+*
+* @description
+* Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Chip } from "@yahoo/uds";
+*
+* <Chip>Label</Chip>
+*```
+*
+* @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
+**/
+const Chip = (0, react.forwardRef)(function Chip$1({ onClick, href, linkProps, onDismiss, onToggle, isToggled, slotProps,...rest }, ref) {
+	const { anchor: anchorProps,...restSlotProps } = slotProps ?? {};
+	if (onDismiss) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Chip_ChipDismissible.ChipDismissible, {
+		ref,
+		onDismiss,
+		slotProps: restSlotProps,
+		...rest
+	});
+	if (onToggle) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Chip_ChipToggle.ChipToggle, {
+		ref,
+		onToggle,
+		isToggled,
+		slotProps: restSlotProps,
+		...rest
+	});
+	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Chip_ChipLink.ChipLink, {
+		ref,
+		href,
+		slotProps: restSlotProps,
+		...rest,
+		...linkProps,
+		...anchorProps
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Chip_ChipButton.ChipButton, {
+		ref,
+		onClick,
+		slotProps: restSlotProps,
+		...rest
+	});
+});
+Chip.displayName = "Chip";
+
+//#endregion
+exports.Chip = Chip;

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

@@ -0,0 +1,37 @@
+import { UniversalChipProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { ChipBaseProps } from "./ChipBase.cjs";
+import React from "react";
+
+//#region src/components/client/Chip/Chip.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipProps extends UniversalChipProps, HtmlDivProps {
+  slotProps?: ChipBaseProps['slotProps'] & {
+    anchor: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
+  };
+}
+/**
+ * **⚙️️ A chip.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Chip } from "@yahoo/uds";
+ *
+ * <Chip>Label</Chip>
+ *```
+ *
+ * @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
+ **/
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Chip, type ChipProps };
+//# sourceMappingURL=Chip.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.cts","names":[],"sources":["../../../../src/components/client/Chip/Chip.tsx"],"sourcesContent":[],"mappings":";;;;;;KAUK,YAAA,CAAA,CAAA,CAAe,KAAK,KAAA,CAAM,eAAe;UAEpC,SAAA,CAAA,OAAA,CAAkB,oBAAoB;cAClC;IAHT,MAAA,CAAA,CAIO,IAJK,CAIA,KAAA,CAAM,oBAJN,CAI2B,iBAJ3B,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA;EAA6B,CAAA;;;;AAAtB,CAAA;;;;;;;;AAEoC,CAAA;;;;;;;;;;;cA2BtD,MAAI,KAAA,CAAA,0BAAA,YAAA,KAAA,CAAA,cAAA"}

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

@@ -0,0 +1,37 @@
+import { UniversalChipProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { ChipBaseProps } from "./ChipBase.js";
+import React from "react";
+
+//#region src/components/client/Chip/Chip.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipProps extends UniversalChipProps, HtmlDivProps {
+  slotProps?: ChipBaseProps['slotProps'] & {
+    anchor: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
+  };
+}
+/**
+ * **⚙️️ A chip.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Chip } from "@yahoo/uds";
+ *
+ * <Chip>Label</Chip>
+ *```
+ *
+ * @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
+ **/
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Chip, type ChipProps };
+//# sourceMappingURL=Chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","names":[],"sources":["../../../../src/components/client/Chip/Chip.tsx"],"sourcesContent":[],"mappings":";;;;;;KAUK,YAAA,CAAA,CAAA,CAAe,KAAK,KAAA,CAAM,eAAe;UAEpC,SAAA,CAAA,OAAA,CAAkB,oBAAoB;cAClC;IAHT,MAAA,CAAA,CAIO,IAJK,CAIA,KAAA,CAAM,oBAJN,CAI2B,iBAJ3B,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA;EAA6B,CAAA;;;;AAAtB,CAAA;;;;;;;;AAEoC,CAAA;;;;;;;;;;;cA2BtD,MAAI,KAAA,CAAA,0BAAA,YAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Chip/Chip.js

@@ -0,0 +1,66 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { ChipButton } from "./ChipButton.js";
+import { ChipDismissible } from "./ChipDismissible.js";
+import { ChipLink } from "./ChipLink.js";
+import { ChipToggle } from "./ChipToggle.js";
+import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Chip/Chip.tsx
+/**
+* **⚙️️ A chip.
+*
+* @componentType Client component
+*
+* @description
+* Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Chip } from "@yahoo/uds";
+*
+* <Chip>Label</Chip>
+*```
+*
+* @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
+**/
+const Chip = forwardRef(function Chip$1({ onClick, href, linkProps, onDismiss, onToggle, isToggled, slotProps,...rest }, ref) {
+	const { anchor: anchorProps,...restSlotProps } = slotProps ?? {};
+	if (onDismiss) return /* @__PURE__ */ jsx(ChipDismissible, {
+		ref,
+		onDismiss,
+		slotProps: restSlotProps,
+		...rest
+	});
+	if (onToggle) return /* @__PURE__ */ jsx(ChipToggle, {
+		ref,
+		onToggle,
+		isToggled,
+		slotProps: restSlotProps,
+		...rest
+	});
+	if (href) return /* @__PURE__ */ jsx(ChipLink, {
+		ref,
+		href,
+		slotProps: restSlotProps,
+		...rest,
+		...linkProps,
+		...anchorProps
+	});
+	return /* @__PURE__ */ jsx(ChipButton, {
+		ref,
+		onClick,
+		slotProps: restSlotProps,
+		...rest
+	});
+});
+Chip.displayName = "Chip";
+
+//#endregion
+export { Chip };
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","names":["Chip"],"sources":["../../../../src/components/client/Chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { UniversalChipProps } from '../../../tokens';\nimport type { ChipBaseProps } from './ChipBase';\nimport { ChipButton } from './ChipButton';\nimport { ChipDismissible } from './ChipDismissible';\nimport type { ChipLinkProps } from './ChipLink';\nimport { ChipLink } from './ChipLink';\nimport { ChipToggle } from './ChipToggle';\n\ntype HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;\n\ninterface ChipProps extends UniversalChipProps, HtmlDivProps {\n  slotProps?: ChipBaseProps['slotProps'] & {\n    anchor: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;\n  };\n}\n\n/**\n * **⚙️️ A chip.\n *\n * @componentType Client component\n *\n * @description\n * Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Chip } from \"@yahoo/uds\";\n *\n * <Chip>Label</Chip>\n *```\n *\n * @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).\n **/\nconst Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(\n  { onClick, href, linkProps, onDismiss, onToggle, isToggled, slotProps, ...rest }: ChipProps,\n  ref,\n) {\n  const { anchor: anchorProps, ...restSlotProps } = slotProps ?? {};\n\n  if (onDismiss) {\n    return <ChipDismissible ref={ref} onDismiss={onDismiss} slotProps={restSlotProps} {...rest} />;\n  }\n\n  if (onToggle) {\n    return (\n      <ChipToggle\n        ref={ref}\n        onToggle={onToggle}\n        isToggled={isToggled}\n        slotProps={restSlotProps}\n        {...rest}\n      />\n    );\n  }\n\n  if (href) {\n    return (\n      <ChipLink\n        ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n        href={href}\n        slotProps={restSlotProps}\n        {...(rest as ChipLinkProps)}\n        {...linkProps}\n        {...anchorProps}\n      />\n    );\n  }\n\n  return <ChipButton ref={ref} onClick={onClick} slotProps={restSlotProps} {...rest} />;\n});\n\n// Need to re-set this because of the forwardRef wrapper\nChip.displayName = 'Chip';\n\nexport { Chip, type ChipProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,OAAO,WAAsC,SAASA,OAC1D,EAAE,SAAS,MAAM,WAAW,WAAW,UAAU,WAAW,UAAW,GAAG,QAC1E,KACA;CACA,MAAM,EAAE,QAAQ,YAAa,GAAG,kBAAkB,aAAa,EAAE;AAEjE,KAAI,UACF,QAAO,oBAAC;EAAqB;EAAgB;EAAW,WAAW;EAAe,GAAI;GAAQ;AAGhG,KAAI,SACF,QACE,oBAAC;EACM;EACK;EACC;EACX,WAAW;EACX,GAAI;GACJ;AAIN,KAAI,KACF,QACE,oBAAC;EACM;EACC;EACN,WAAW;EACX,GAAK;EACL,GAAI;EACJ,GAAI;GACJ;AAIN,QAAO,oBAAC;EAAgB;EAAc;EAAS,WAAW;EAAe,GAAI;GAAQ;EACrF;AAGF,KAAK,cAAc"}

package/dist/components/client/Chip/ChipBase.cjs

@@ -0,0 +1,88 @@
+"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_HStack = require('../../HStack.cjs');
+const require_components_Text = require('../../Text.cjs');
+const require_components_IconSlot = require('../../IconSlot.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/Chip/ChipBase.tsx
+const SIZE_DEFAULT = "md";
+const VARIANT_DEFAULT = "primary";
+const MAX_WIDTH_DEFAULT = 200;
+const ChipBase = (0, react.forwardRef)(function ChipBase$1({ size = SIZE_DEFAULT, minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, as: As = "div", reduceMotion: forceReduceMotion, disabled = false, className, slotProps, children,...rest }, ref) {
+	const cssAnimationDuration = (0, motion_react.useReducedMotion)() || forceReduceMotion ? "duration-0" : "duration-120";
+	const { className: textClassName,...textProps } = slotProps?.text ?? {};
+	const { className: startIconClassName,...startIconProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName,...endIconProps } = slotProps?.endIcon ?? {};
+	/**
+	* Styles
+	*/
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_styles_styler.getStyles({
+			chipSizeRoot: size,
+			className: require_styles_styler.cx({
+				"pointer-events-none": disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, "inline-flex", "items-center", "focus-visible:-outline-offset-2", "uds-ring", cssAnimationDuration, "transition-[background-color,outline-color,box-shadow]", className)
+		}),
+		text: require_styles_styler.cx("truncate", "whitespace-nowrap", "text-center", "flex-1", textClassName),
+		icon: require_styles_styler.getStyles({ chipSizeIcon: size })
+	}), [
+		className,
+		cssAnimationDuration,
+		disabled,
+		size,
+		textClassName
+	]);
+	const inlineStyles = (0, react.useMemo)(() => ({ root: {
+		maxWidth: `${maxWidth}px`,
+		...minWidth ? { minWidth: `${minWidth}px` } : {}
+	} }), [maxWidth, minWidth]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+		asChild: true,
+		ref,
+		className: classNames.root,
+		style: inlineStyles.root,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(As, {
+			disabled,
+			children: [
+				startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+					icon: startIcon,
+					iconProps: {
+						variant: "fill",
+						className: require_styles_styler.cx(classNames.icon, startIconClassName),
+						...startIconProps
+					}
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+					as: "span",
+					color: "current",
+					variant: "inherit",
+					className: classNames.text,
+					...textProps,
+					children
+				}),
+				endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+					icon: endIcon,
+					iconProps: {
+						variant: "fill",
+						className: require_styles_styler.cx(classNames.icon, endIconClassName),
+						...endIconProps
+					}
+				})
+			]
+		})
+	});
+});
+ChipBase.displayName = "ChipBase";
+
+//#endregion
+exports.ChipBase = ChipBase;
+exports.VARIANT_DEFAULT = VARIANT_DEFAULT;

package/dist/components/client/Chip/ChipBase.d.cts

@@ -0,0 +1,23 @@
+import { ChipVariant, IconPropsWithSVGProps, UniversalChipBaseProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { TextProps } from "../../Text.cjs";
+import React from "react";
+
+//#region src/components/client/Chip/ChipBase.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface ChipBaseProps extends HtmlDivProps, Omit<UniversalChipBaseProps, 'variant'> {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    text?: Partial<TextProps & DataAttributes>;
+  };
+}
+declare const VARIANT_DEFAULT: ChipVariant;
+declare const ChipBase: React.ForwardRefExoticComponent<ChipBaseProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipBase, type ChipBaseProps, VARIANT_DEFAULT };
+//# sourceMappingURL=ChipBase.d.cts.map

package/dist/components/client/Chip/ChipBase.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipBase.d.cts","names":[],"sources":["../../../../src/components/client/Chip/ChipBase.tsx"],"sourcesContent":[],"mappings":";;;;;;KAeK,YAAA,CAAA,CAAA,CAAe,KAAK,KAAA,CAAM,eAAe;KAGzC,cAAA,CAAA,CAAA;;AANuC,CAAA;UAUlC,aAAA,CAAA,OAAA,CAAsB,YAPc,CAAA,CAOA,IAPA,CAOK,sBAPL,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAArB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAAL,SAAA,CAAA,CAAA,CAAA;IAAI,SAAA,CAAA,CAAA,CAUR,OAVQ,CAUA,qBAVA,CAAA,CAAA,CAUwB,cAVxB,CAAA;IAGnB,OAAA,CAAA,CAAA,CAQS,OARK,CAQG,qBARH,CAAA,CAAA,CAQ2B,cAR3B,CAAA;IAIT,IAAA,CAAA,CAAA,CAKC,OALa,CAKL,SALK,CAAA,CAAA,CAKO,cALP,CAAA;EAA2B,CAAA;;cAU7C,eAP0C,CAAA,CAOzB,WAPyB;cAU1C,QAVU,CAAA,CAUF,KAAA,CAAA,yBAVE,CAUF,aAVE,CAAA,CAAA,CAUF,KAAA,CAAA,aAVE,CAUF,cAVE,CAAA,CAAA"}

package/dist/components/client/Chip/ChipBase.d.ts

@@ -0,0 +1,23 @@
+import { ChipVariant, IconPropsWithSVGProps, UniversalChipBaseProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { TextProps } from "../../Text.js";
+import React from "react";
+
+//#region src/components/client/Chip/ChipBase.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface ChipBaseProps extends HtmlDivProps, Omit<UniversalChipBaseProps, 'variant'> {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    text?: Partial<TextProps & DataAttributes>;
+  };
+}
+declare const VARIANT_DEFAULT: ChipVariant;
+declare const ChipBase: React.ForwardRefExoticComponent<ChipBaseProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipBase, type ChipBaseProps, VARIANT_DEFAULT };
+//# sourceMappingURL=ChipBase.d.ts.map

package/dist/components/client/Chip/ChipBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipBase.d.ts","names":[],"sources":["../../../../src/components/client/Chip/ChipBase.tsx"],"sourcesContent":[],"mappings":";;;;;;KAeK,YAAA,CAAA,CAAA,CAAe,KAAK,KAAA,CAAM,eAAe;KAGzC,cAAA,CAAA,CAAA;;AANuC,CAAA;UAUlC,aAAA,CAAA,OAAA,CAAsB,YAPc,CAAA,CAOA,IAPA,CAOK,sBAPL,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAArB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAAL,SAAA,CAAA,CAAA,CAAA;IAAI,SAAA,CAAA,CAAA,CAUR,OAVQ,CAUA,qBAVA,CAAA,CAAA,CAUwB,cAVxB,CAAA;IAGnB,OAAA,CAAA,CAAA,CAQS,OARK,CAQG,qBARH,CAAA,CAAA,CAQ2B,cAR3B,CAAA;IAIT,IAAA,CAAA,CAAA,CAKC,OALa,CAKL,SALK,CAAA,CAAA,CAKO,cALP,CAAA;EAA2B,CAAA;;cAU7C,eAP0C,CAAA,CAOzB,WAPyB;cAU1C,QAVU,CAAA,CAUF,KAAA,CAAA,yBAVE,CAUF,aAVE,CAAA,CAAA,CAUF,KAAA,CAAA,aAVE,CAUF,cAVE,CAAA,CAAA"}