@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/dist/components/client/IconButton.js

@@ -1,127 +0,0 @@
-"use client";
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-import { cx, getStyles } from "../../styles/styler.js";
-import { Icon } from "../Icon.js";
-import { parseDeprecatedButtonPaletteVariant } from "../../tokens/parseButtonVariants.js";
-import { buttonMotionVariants, iconMotionVariants, loadingMotionVariants } from "../../tokens/consts/buttonMotionTokens.js";
-import { SpringMotionConfig } from "./SpringMotionConfig.js";
-import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
-import { buttonIconSvgSize } from "@yahoo/uds/fixtures";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Progress } from "@yahoo/uds-icons";
-import { AnimatePresence, m, useReducedMotion } from "motion/react";
-
-//#region src/components/client/IconButton.tsx
-/**
-* **⚙️️ An icon button element that can be used to trigger an action**
-*
-* @componentType Client component
-*
-* @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.
-*
-* @see
-* Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info
-*
-* @usage
-* - When you need a button that is represented by an icon rather than text. This is useful in compact spaces, toolbars, or when the action is commonly understood through a visual symbol.
-* - If you need a button that is used to trigger a non-critical action.
-*
-* @example
-* ```tsx
-* 'use client';
-* import { IconButton } from "@yahoo/uds";
-* import { AddFolder } from "@yahoo/uds-icons";
-*
-* <IconButton name={AddFolder} variant="primary" />
-* ```
-*
-* @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
-*
-**/
-const IconButton = forwardRef(function IconButton$1({ variant, size: iconButtonSize, iconVariant, loading, disableEffects, name, type = "button", htmlName, className, children,...rest }, forwardedRef) {
-	const ref = useRef(null);
-	useImperativeHandle(forwardedRef, () => ref.current);
-	const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = parseDeprecatedButtonPaletteVariant({ flatVariant: variant });
-	const classNames = useMemo(() => ({
-		button: getStyles({
-			buttonVariant: buttonVariant_DEPRECATED,
-			buttonPalette: buttonPalette_DEPRECATED,
-			iconButtonSize,
-			className: cx("uds-icon-button", "uds-button", "uds-ring", "uds-hit-target", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className)
-		}),
-		loading: "uds-button-icon start-content animate-spin",
-		icon: "uds-button-icon start-content"
-	}), [
-		buttonPalette_DEPRECATED,
-		buttonVariant_DEPRECATED,
-		className,
-		disableEffects,
-		iconButtonSize,
-		loading
-	]);
-	const prefersReducedMotion = useReducedMotion();
-	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
-	const buttonVariants$1 = useMemo(() => {
-		const { rest: rest$1, hover, pressed } = buttonMotionVariants;
-		if (disableEffects) return {
-			rest: {},
-			hover: {},
-			pressed: {}
-		};
-		return {
-			rest: rest$1,
-			hover,
-			pressed
-		};
-	}, [disableEffects]);
-	return /* @__PURE__ */ jsx(SpringMotionConfig, {
-		layoutSpeed: "3",
-		layoutVariant,
-		reducedMotion: disableEffects ? "always" : "user",
-		children: /* @__PURE__ */ jsx(m.button, {
-			ref,
-			type,
-			className: classNames.button,
-			initial: "icon",
-			variants: buttonVariants$1,
-			whileHover: "hover",
-			whileTap: "pressed",
-			name: htmlName,
-			...rest,
-			children: /* @__PURE__ */ jsxs(AnimatePresence, {
-				initial: false,
-				mode: "popLayout",
-				children: [loading && /* @__PURE__ */ jsx(m.span, {
-					variants: loadingMotionVariants,
-					initial: "loading",
-					animate: "loading",
-					exit: "hide",
-					children: /* @__PURE__ */ jsx(Icon, {
-						size: buttonIconSvgSize,
-						name: Progress,
-						variant: iconVariant,
-						color: "current",
-						className: classNames.loading
-					})
-				}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
-					variants: iconMotionVariants,
-					initial: "icon",
-					animate: "icon",
-					exit: "hide",
-					children: children || /* @__PURE__ */ jsx(Icon, {
-						size: buttonIconSvgSize,
-						name,
-						variant: iconVariant,
-						color: "current",
-						className: classNames.icon
-					})
-				}, name.name)]
-			})
-		})
-	});
-});
-IconButton.displayName = "IconButton";
-
-//#endregion
-export { IconButton };
-//# sourceMappingURL=IconButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","names":["IconButton","layoutVariant: MotionVariant","buttonVariants"],"sources":["../../../src/components/client/IconButton.tsx"],"sourcesContent":["import { buttonIconSvgSize } from '@yahoo/uds/fixtures';\nimport type { MotionVariant, UniversalIconButtonProps } from '@yahoo/uds/tokens';\nimport { parseDeprecatedButtonPaletteVariant } from '@yahoo/uds/tokens';\nimport { Progress } from '@yahoo/uds-icons';\nimport type { HTMLMotionProps } from 'motion/react';\nimport { AnimatePresence, m, useReducedMotion } from 'motion/react';\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { cx, getStyles } from '../../styles/styler';\nimport {\n  buttonMotionVariants,\n  iconMotionVariants,\n  loadingMotionVariants,\n} from '../../tokens/consts/buttonMotionTokens';\nimport { Icon } from '../Icon';\nimport { SpringMotionConfig } from './SpringMotionConfig';\n\ntype HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> &\n  Omit<HTMLMotionProps<'button'>, 'name'>;\ninterface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {}\n\n/**\n * **⚙️️ An icon button element that can be used to trigger an action**\n *\n * @componentType Client component\n *\n * @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info\n *\n * @usage\n * - When you need a button that is represented by an icon rather than text. This is useful in compact spaces, toolbars, or when the action is commonly understood through a visual symbol.\n * - If you need a button that is used to trigger a non-critical action.\n *\n * @example\n * ```tsx\n * 'use client';\n * import { IconButton } from \"@yahoo/uds\";\n * import { AddFolder } from \"@yahoo/uds-icons\";\n *\n * <IconButton name={AddFolder} variant=\"primary\" />\n * ```\n *\n * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)\n *\n **/\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    // Button config props\n    variant,\n    size: iconButtonSize,\n    // Icon props\n    iconVariant,\n    // State props\n    loading,\n    disableEffects,\n    // Misc props\n    name,\n    // HTML props (className, disabled, aria-*, data-*, onClick, etc.)\n    type = 'button',\n    htmlName,\n    className,\n    children,\n    ...rest\n  }: IconButtonProps,\n  forwardedRef,\n) {\n  /* ------------------------------- Setup refs ------------------------------- */\n  const ref = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(forwardedRef, () => ref.current as HTMLButtonElement);\n\n  /* ---------------------------- Setup classNames ---------------------------- */\n  const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } =\n    parseDeprecatedButtonPaletteVariant({ flatVariant: variant });\n\n  const classNames = useMemo(\n    () => ({\n      button: getStyles({\n        // We're still using the button config props here\n        buttonVariant: buttonVariant_DEPRECATED,\n        buttonPalette: buttonPalette_DEPRECATED,\n        // Icon button specific props\n        iconButtonSize,\n        className: cx(\n          // Base class name\n          'uds-icon-button',\n          // Extend button\n          'uds-button',\n          // Focus ring\n          'uds-ring',\n          // Minimum hit target of 44px\n          'uds-hit-target',\n          // State\n          loading && 'uds-button-loading',\n          disableEffects && 'uds-button-without-effects',\n          // Consumer class names\n          className,\n        ),\n      }),\n      loading: 'uds-button-icon start-content animate-spin',\n      icon: 'uds-button-icon start-content',\n    }),\n    [\n      buttonPalette_DEPRECATED,\n      buttonVariant_DEPRECATED,\n      className,\n      disableEffects,\n      iconButtonSize,\n      loading,\n    ],\n  );\n\n  /* --------------------- Motion config setup for button --------------------- */\n  const prefersReducedMotion = useReducedMotion();\n  const layoutVariant: MotionVariant = useMemo(\n    () => (prefersReducedMotion ? 'smooth' : 'subtle'),\n    [prefersReducedMotion],\n  );\n\n  const buttonVariants = useMemo(() => {\n    const { rest, hover, pressed } = buttonMotionVariants;\n\n    // Return empty variants if effects are disabled\n    if (disableEffects) {\n      return { rest: {}, hover: {}, pressed: {} };\n    }\n\n    return { rest, hover, pressed };\n  }, [disableEffects]);\n\n  /* -------------------------------------------------------------------------- */\n  /*                               The IconButton                               */\n  /* -------------------------------------------------------------------------- */\n  return (\n    <SpringMotionConfig\n      layoutSpeed=\"3\"\n      layoutVariant={layoutVariant}\n      reducedMotion={disableEffects ? 'always' : 'user'}\n    >\n      <m.button\n        ref={ref}\n        type={type}\n        className={classNames.button}\n        initial=\"icon\"\n        variants={buttonVariants}\n        whileHover=\"hover\"\n        whileTap=\"pressed\"\n        name={htmlName}\n        {...rest}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {loading && (\n            <m.span\n              key=\"loading\"\n              variants={loadingMotionVariants}\n              initial=\"loading\"\n              animate=\"loading\"\n              exit=\"hide\"\n            >\n              <Icon\n                size={buttonIconSvgSize}\n                name={Progress}\n                variant={iconVariant}\n                color=\"current\"\n                className={classNames.loading}\n              />\n            </m.span>\n          )}\n          {name && !loading && (\n            <m.span\n              key={name.name}\n              variants={iconMotionVariants}\n              initial=\"icon\"\n              animate=\"icon\"\n              exit=\"hide\"\n            >\n              {children || (\n                <Icon\n                  size={buttonIconSvgSize}\n                  name={name}\n                  variant={iconVariant}\n                  color=\"current\"\n                  className={classNames.icon}\n                />\n              )}\n            </m.span>\n          )}\n        </AnimatePresence>\n      </m.button>\n    </SpringMotionConfig>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,aAAa,WAA+C,SAASA,aACzE,EAEE,SACA,MAAM,gBAEN,aAEA,SACA,gBAEA,MAEA,OAAO,UACP,UACA,WACA,SACA,GAAG,QAEL,cACA;CAEA,MAAM,MAAM,OAA0B,KAAK;AAC3C,qBAAoB,oBAAoB,IAAI,QAA6B;CAGzE,MAAM,EAAE,SAAS,0BAA0B,SAAS,6BAClD,oCAAoC,EAAE,aAAa,SAAS,CAAC;CAE/D,MAAM,aAAa,eACV;EACL,QAAQ,UAAU;GAEhB,eAAe;GACf,eAAe;GAEf;GACA,WAAW,GAET,mBAEA,cAEA,YAEA,kBAEA,WAAW,sBACX,kBAAkB,8BAElB,UACD;GACF,CAAC;EACF,SAAS;EACT,MAAM;EACP,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,uBAAuB,kBAAkB;CAC/C,MAAMC,gBAA+B,cAC5B,uBAAuB,WAAW,UACzC,CAAC,qBAAqB,CACvB;CAED,MAAMC,mBAAiB,cAAc;EACnC,MAAM,EAAE,cAAM,OAAO,YAAY;AAGjC,MAAI,eACF,QAAO;GAAE,MAAM,EAAE;GAAE,OAAO,EAAE;GAAE,SAAS,EAAE;GAAE;AAG7C,SAAO;GAAE;GAAM;GAAO;GAAS;IAC9B,CAAC,eAAe,CAAC;AAKpB,QACE,oBAAC;EACC,aAAY;EACG;EACf,eAAe,iBAAiB,WAAW;YAE3C,oBAAC,EAAE;GACI;GACC;GACN,WAAW,WAAW;GACtB,SAAQ;GACR,UAAUA;GACV,YAAW;GACX,UAAS;GACT,MAAM;GACN,GAAI;aAEJ,qBAAC;IAAgB,SAAS;IAAO,MAAK;eACnC,WACC,oBAAC,EAAE;KAED,UAAU;KACV,SAAQ;KACR,SAAQ;KACR,MAAK;eAEL,oBAAC;MACC,MAAM;MACN,MAAM;MACN,SAAS;MACT,OAAM;MACN,WAAW,WAAW;OACtB;OAZE,UAaG,EAEV,QAAQ,CAAC,WACR,oBAAC,EAAE;KAED,UAAU;KACV,SAAQ;KACR,SAAQ;KACR,MAAK;eAEJ,YACC,oBAAC;MACC,MAAM;MACA;MACN,SAAS;MACT,OAAM;MACN,WAAW,WAAW;OACtB;OAbC,KAAK,KAeH;KAEK;IACT;GACQ;EAEvB;AAEF,WAAW,cAAc"}

package/dist/components/client/Input/Input.cjs

@@ -1,209 +0,0 @@
-"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_HStack = require('../../HStack.cjs');
-const require_components_VStack = require('../../VStack.cjs');
-const require_components_IconSlot = require('../../IconSlot.cjs');
-const require_components_client_AnimateHeightChange = require('../AnimateHeightChange.cjs');
-const require_components_client_Input_InputHelpTextInternal = require('./InputHelpTextInternal.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let lodash_isFunction_js = require("lodash/isFunction.js");
-lodash_isFunction_js = require_rolldown_runtime.__toESM(lodash_isFunction_js);
-let motion_react = require("motion/react");
-
-//#region src/components/client/Input/Input.tsx
-const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled,...rest }) {
-	if (!helpText) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
-		spacingTop,
-		spacingStart,
-		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Input_InputHelpTextInternal.InputHelpTextInternal, {
-			startIcon: helperTextIcon,
-			size,
-			isFilled,
-			children: (0, lodash_isFunction_js.default)(helpText) ? helpText() : helpText
-		})
-	});
-});
-const StartIcon = (0, react.memo)(function StartIcon$1({ icon, className, iconProps }) {
-	if (!icon) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-		icon,
-		iconProps: {
-			variant: "outline",
-			...iconProps
-		},
-		className
-	});
-});
-const EndIcon = (0, react.memo)(function EndIcon$1({ icon, className, iconProps }) {
-	if (!icon) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-		icon,
-		iconProps: {
-			variant: "outline",
-			...iconProps
-		},
-		className
-	});
-});
-/**
-* **📦 An input that allows users to enter text and collect data.**
-*
-* @componentType Client component
-*
-* @description
-* An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
-*
-* @see
-* Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
-*
-* @usage
-* - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
-* - Search Bars: Allowing users to enter search queries to find content.
-* - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
-* - Feedback/Comments: Letting users leave reviews, comments, or feedback.
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Input } from "@yahoo/uds";
-*
-* <Input label="Name" placeholder="Enter your name" required />
-*```
-*
-* @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
-**/
-const Input = (0, react.forwardRef)(function Input$1({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, className,...otherProps }, forwardedRef) {
-	const generatedId = (0, react.useId)();
-	const uid = id ?? `uds-input-${generatedId}`;
-	const helpTextId = `uds-input-${uid}-help-text`;
-	const { className: inputClassName,...inputProps } = slotProps?.input ?? {};
-	const { className: inputWrapperClassName,...inputWrapperProps } = slotProps?.inputWrapper ?? {};
-	const ref = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
-	const [value, setValue] = (0, react.useState)(defaultValue ?? "");
-	const handleChange = (0, react.useCallback)((e) => {
-		setValue(e.target.value);
-		onChange?.(e);
-	}, [onChange]);
-	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "bouncy";
-	const reduceMotion = forceReduceMotion ? "always" : "user";
-	const isInteractive = !readOnly && !disabled;
-	const classNames = {
-		root: require_styles_styler.getStyles({
-			inputSizeRoot: size,
-			inputVariantRoot: "default",
-			inputVariantValueRoot: !value ? "empty" : "filled",
-			className: require_styles_styler.cx([className, disabled ? "opacity-50" : ""])
-		}),
-		inputWrapper: require_styles_styler.cx(require_styles_styler.getStyles({
-			inputSizeInputWrapper: size,
-			inputVariantInputWrapper: "default",
-			inputVariantValueInputWrapper: !value ? "empty" : "filled"
-		}), "min-w-[200px]", inputWrapperClassName),
-		input: require_styles_styler.getStyles({
-			inputSizeInput: size,
-			inputVariantInput: "default",
-			inputVariantValueInput: !value ? "empty" : "filled",
-			inputVariantInputPlaceholder: "default",
-			inputVariantValueInputPlaceholder: !value ? "empty" : "filled",
-			className: require_styles_styler.cx("grow", "uds-hit-target", "bg-clip-text", "focus:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
-		}),
-		label: require_styles_styler.cx(require_styles_styler.getStyles({
-			inputSizeLabel: size,
-			inputVariantLabel: "default",
-			inputVariantValueLabel: !value ? "empty" : "filled"
-		})),
-		labelRequired: require_styles_styler.getStyles({
-			inputVariantLabelRequired: "default",
-			inputVariantValueLabelRequired: !value ? "empty" : "filled"
-		}),
-		startIcon: require_styles_styler.getStyles({
-			inputSizeStartIcon: size,
-			inputVariantStartIcon: "default",
-			inputVariantValueStartIcon: !value ? "empty" : "filled"
-		}),
-		endIcon: require_styles_styler.getStyles({
-			inputSizeEndIcon: size,
-			inputVariantEndIcon: "default",
-			inputVariantValueEndIcon: !value ? "empty" : "filled"
-		})
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
-		width: containerWidth,
-		className: classNames.root,
-		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
-				spacingBottom: "2",
-				columnGap: "0.5",
-				alignItems: "flex-end",
-				className: classNames.label,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					htmlFor: uid,
-					children: (0, lodash_isFunction_js.default)(label) ? label() : label
-				}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: classNames.labelRequired,
-					children: "*"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
-				position: "relative",
-				alignItems: "center",
-				...inputWrapperProps,
-				className: classNames.inputWrapper,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartIcon, {
-						icon: startIcon,
-						className: classNames.startIcon,
-						iconProps: slotProps?.startIcon
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						ref,
-						id: uid,
-						type,
-						value,
-						required,
-						readOnly,
-						disabled,
-						"aria-describedby": helpTextId,
-						"aria-invalid": hasError,
-						onChange: handleChange,
-						className: classNames.input,
-						...otherProps,
-						...inputProps
-					}),
-					endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
-						alignItems: "center",
-						gap: "1",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndIcon, {
-							icon: endIcon,
-							className: classNames.endIcon,
-							iconProps: slotProps?.endIcon
-						})
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_AnimateHeightChange.AnimateHeightChange, {
-				reduceMotion,
-				layoutVariant,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpTextContent, {
-					id: helpTextId,
-					helpText,
-					spacingTop: "2",
-					size,
-					isFilled: !!value,
-					helperTextIcon
-				})
-			})
-		]
-	});
-});
-Input.displayName = "Input";
-
-//#endregion
-exports.Input = Input;

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

@@ -1,57 +0,0 @@
-import { IconPropsWithSVGProps, UniversalInputProps } from "../../../tokens/types.cjs";
-import "../../../tokens/index.cjs";
-import { BoxProps } from "../../Box.cjs";
-import * as react28 from "react";
-import { InputHTMLAttributes } from "react";
-import { HTMLMotionProps } from "motion/react";
-
-//#region src/components/client/Input/Input.d.ts
-type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
-type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface InputProps extends NativeInputProps, UniversalInputProps {
-  /** The type of the input element. Reduced set of options from the HTML input type attribute.
-   * @default 'text'
-   */
-  type?: Exclude<NativeInputProps['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;
-    inputWrapper?: Partial<BoxProps & DataAttributes>;
-    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-  };
-}
-/**
- * **📦 An input that allows users to enter text and collect data.**
- *
- * @componentType Client component
- *
- * @description
- * An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
- *
- * @see
- * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
- *
- * @usage
- * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
- * - Search Bars: Allowing users to enter search queries to find content.
- * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
- * - Feedback/Comments: Letting users leave reviews, comments, or feedback.
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Input } from "@yahoo/uds";
- *
- * <Input label="Name" placeholder="Enter your name" required />
- *```
- *
- * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
- **/
-declare const Input: react28.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react28.RefAttributes<HTMLInputElement>>;
-//#endregion
-export { Input, type InputProps };
-//# sourceMappingURL=Input.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Input.d.cts","names":[],"sources":["../../../../src/components/client/Input/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KAsBK,cAAA,CAAA,CAAA,CAAiB,KAAA,CAAM,oBAAoB,oBAAoB;KAE/D,gBAAA,CAAA,CAAA,CAAmB,KAAK;KAGxB,cAAA,CAAA,CAAA;;AAbqC,CAAA;UAiBhC,UAAA,CAAA,OAAA,CAAmB,gBATmB,CAAA,CASD,mBATC,CAAA;EAA1B,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,KAAA,CAAA,IAAA,CAAA,SAAA;;;EAEjB,IAAA,CAAA,CAAA,CAWI,OAXJ,CAYD,gBAZiB,CAAQ,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAL,CAAA,CAAA,CAAA,CAAA,QAAA,CAAI,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA;EAGvB,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;EAIK,SAAA,CAAA,CAAA,CAAA;IAKN,KAAA,CAAA,CAAA,CAMQ,OANR,CAMgB,mBANhB,CAMoC,gBANpC,CAAA,CAAA,CAAA,CAMwD,cANxD,CAAA;IADK,YAAA,CAAA,CAAA,CAQU,OARV,CAQkB,QARlB,CAAA,CAAA,CAQ6B,cAR7B,CAAA;IAO+B,SAAA,CAAA,CAAA,CAExB,OAFwB,CAEhB,qBAFgB,CAAA,CAAA,CAEQ,cAFR,CAAA;IAApB,OAAA,CAAA,CAAA,CAGN,OAHM,CAGE,qBAHF,CAAA,CAAA,CAG0B,cAH1B,CAAA;EAAwC,CAAA;;;;;;;;;;;;;;AAXM,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,MAAA,CAAA,CAAA,SAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;cAqH5D,OAAK,OAAA,CAAA,0BAAA,KAAA,qBAAA,OAAA,CAAA,cAAA"}

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

@@ -1,57 +0,0 @@
-import { IconPropsWithSVGProps, UniversalInputProps } from "../../../tokens/types.js";
-import "../../../tokens/index.js";
-import { BoxProps } from "../../Box.js";
-import * as react44 from "react";
-import { InputHTMLAttributes } from "react";
-import { HTMLMotionProps } from "motion/react";
-
-//#region src/components/client/Input/Input.d.ts
-type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
-type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface InputProps extends NativeInputProps, UniversalInputProps {
-  /** The type of the input element. Reduced set of options from the HTML input type attribute.
-   * @default 'text'
-   */
-  type?: Exclude<NativeInputProps['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;
-    inputWrapper?: Partial<BoxProps & DataAttributes>;
-    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-  };
-}
-/**
- * **📦 An input that allows users to enter text and collect data.**
- *
- * @componentType Client component
- *
- * @description
- * An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
- *
- * @see
- * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
- *
- * @usage
- * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
- * - Search Bars: Allowing users to enter search queries to find content.
- * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
- * - Feedback/Comments: Letting users leave reviews, comments, or feedback.
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Input } from "@yahoo/uds";
- *
- * <Input label="Name" placeholder="Enter your name" required />
- *```
- *
- * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
- **/
-declare const Input: react44.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react44.RefAttributes<HTMLInputElement>>;
-//#endregion
-export { Input, type InputProps };
-//# sourceMappingURL=Input.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Input.d.ts","names":[],"sources":["../../../../src/components/client/Input/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KAsBK,cAAA,CAAA,CAAA,CAAiB,KAAA,CAAM,oBAAoB,oBAAoB;KAE/D,gBAAA,CAAA,CAAA,CAAmB,KAAK;KAGxB,cAAA,CAAA,CAAA;;AAbqC,CAAA;UAiBhC,UAAA,CAAA,OAAA,CAAmB,gBATmB,CAAA,CASD,mBATC,CAAA;EAA1B,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,KAAA,CAAA,IAAA,CAAA,SAAA;;;EAEjB,IAAA,CAAA,CAAA,CAWI,OAXJ,CAYD,gBAZiB,CAAQ,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAL,CAAA,CAAA,CAAA,CAAA,QAAA,CAAI,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA;EAGvB,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;EAIK,SAAA,CAAA,CAAA,CAAA;IAKN,KAAA,CAAA,CAAA,CAMQ,OANR,CAMgB,mBANhB,CAMoC,gBANpC,CAAA,CAAA,CAAA,CAMwD,cANxD,CAAA;IADK,YAAA,CAAA,CAAA,CAQU,OARV,CAQkB,QARlB,CAAA,CAAA,CAQ6B,cAR7B,CAAA;IAO+B,SAAA,CAAA,CAAA,CAExB,OAFwB,CAEhB,qBAFgB,CAAA,CAAA,CAEQ,cAFR,CAAA;IAApB,OAAA,CAAA,CAAA,CAGN,OAHM,CAGE,qBAHF,CAAA,CAAA,CAG0B,cAH1B,CAAA;EAAwC,CAAA;;;;;;;;;;;;;;AAXM,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,MAAA,CAAA,CAAA,SAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;cAqH5D,OAAK,OAAA,CAAA,0BAAA,KAAA,qBAAA,OAAA,CAAA,cAAA"}