@yahoo/uds 3.37.0 → 3.39.0

package/dist/{Box-BM08iUR2.d.cts → Box-B2DvoAMD.d.cts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { b as UniversalBoxProps } from './types-D0Rkj_1F.cjs';
+import { a as UniversalBoxProps } from './types-rZt8SiS0.cjs';
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 interface BoxProps extends UniversalBoxProps, DivProps {

package/dist/{Box-D2_1_jHu.d.ts → Box-C5GwvlME.d.ts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { b as UniversalBoxProps } from './types-D0Rkj_1F.js';
+import { a as UniversalBoxProps } from './types-rZt8SiS0.js';
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 interface BoxProps extends UniversalBoxProps, DivProps {

package/dist/Box-CJ3zIj4N.d.cts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { a as UniversalBoxProps } from './types-BEsEvo0F.cjs';
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+/**
+ * **📦 A layout component that can be used to compose other components**
+ *
+ * @description
+ * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
+ * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@yahoo/uds';
+ *
+ * <Box backgroundColor="primary" spacing="6">
+ *   Any kind of content can go here!
+ * </Box>
+ * ```
+ *
+ * @usage
+ * - If you need to div-like container to apply padding, shapes, or other styling.
+ * - If you're creating card components.
+ *
+ * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type BoxProps as B, type DivProps as D, Box as a };

package/dist/Box-DggpNHav.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { a as UniversalBoxProps } from './types-BEsEvo0F.js';
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+/**
+ * **📦 A layout component that can be used to compose other components**
+ *
+ * @description
+ * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
+ * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@yahoo/uds';
+ *
+ * <Box backgroundColor="primary" spacing="6">
+ *   Any kind of content can go here!
+ * </Box>
+ * ```
+ *
+ * @usage
+ * - If you need to div-like container to apply padding, shapes, or other styling.
+ * - If you're creating card components.
+ *
+ * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type BoxProps as B, type DivProps as D, Box as a };

package/dist/{Pressable-CZHF_iLZ.d.cts → Pressable-BbJdaJUo.d.cts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { a as UniversalPressableProps } from './types-D0Rkj_1F.cjs';
+import { U as UniversalPressableProps } from './types-rZt8SiS0.cjs';
 
 type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
 interface PressableProps extends UniversalPressableProps, HtmlButtonProps {

package/dist/Pressable-CE-tEoUc.d.cts

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

package/dist/{Pressable-SmBC4IjK.d.ts → Pressable-CogcHtMQ.d.ts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { a as UniversalPressableProps } from './types-D0Rkj_1F.js';
+import { U as UniversalPressableProps } from './types-BEsEvo0F.js';
 
 type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
 interface PressableProps extends UniversalPressableProps, HtmlButtonProps {

package/dist/Pressable-DEuYwe7j.d.ts

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

package/dist/Text-CgQcjNy7.d.cts

@@ -0,0 +1,139 @@
+import * as react from 'react';
+import { InputHTMLAttributes, Ref } from 'react';
+import { l as UniversalInputProps, m as IconPropsWithSVGProps, n as UniversalTextProps } from './types-rZt8SiS0.cjs';
+import { HTMLMotionProps } from 'motion/react';
+import { B as BoxProps } from './Box-B2DvoAMD.cjs';
+
+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: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
+type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
+type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
+type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TagName;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
+/**
+ * **💬 A text element that can be used to display text**
+ *
+ * @description
+ * By default, the `Text` component uses text primary color and selects the
+ * correct font, weight, and leading. It also choices appropriate semantic
+ * HTML element based on the `variant` prop. For example, `body1` will use a
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+ * with the `as` prop.
+ *
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@yahoo/uds';
+ *
+ * <Text variant="body1" color="primary">
+ *   Text goes here
+ * </Text>
+ * ```
+ *
+ * @usage
+ * - Use `Text` to display text in your app.
+ * - Use `variant` to change the size and weight of the text.
+ * - Use `color` to change the color of the text.
+ * - Use `as` to change the HTML tag used to render the text.
+ *
+ * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+ *
+ * @related [ResponsiveText](https://uds.build/docs/components/responsive-text)
+ */
+declare const Text: react.ForwardRefExoticComponent<(Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLHeadingElement> & react.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLLabelElement> & react.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react.RefAttributes<HTMLElement>>;
+
+export { type InputProps as I, type TextProps as T, Text as a, Input as b };

package/dist/Text-Cghi693U.d.ts

@@ -0,0 +1,139 @@
+import * as react from 'react';
+import { InputHTMLAttributes, Ref } from 'react';
+import { l as UniversalInputProps, m as IconPropsWithSVGProps, n as UniversalTextProps } from './types-rZt8SiS0.js';
+import { HTMLMotionProps } from 'motion/react';
+import { B as BoxProps } from './Box-C5GwvlME.js';
+
+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: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
+type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
+type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
+type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TagName;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
+/**
+ * **💬 A text element that can be used to display text**
+ *
+ * @description
+ * By default, the `Text` component uses text primary color and selects the
+ * correct font, weight, and leading. It also choices appropriate semantic
+ * HTML element based on the `variant` prop. For example, `body1` will use a
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+ * with the `as` prop.
+ *
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@yahoo/uds';
+ *
+ * <Text variant="body1" color="primary">
+ *   Text goes here
+ * </Text>
+ * ```
+ *
+ * @usage
+ * - Use `Text` to display text in your app.
+ * - Use `variant` to change the size and weight of the text.
+ * - Use `color` to change the color of the text.
+ * - Use `as` to change the HTML tag used to render the text.
+ *
+ * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+ *
+ * @related [ResponsiveText](https://uds.build/docs/components/responsive-text)
+ */
+declare const Text: react.ForwardRefExoticComponent<(Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLHeadingElement> & react.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLLabelElement> & react.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react.RefAttributes<HTMLElement>>;
+
+export { type InputProps as I, type TextProps as T, Text as a, Input as b };

package/dist/Text-CoY1WLeq.d.ts

@@ -0,0 +1,139 @@
+import * as react from 'react';
+import { InputHTMLAttributes, Ref } from 'react';
+import { l as UniversalInputProps, m as IconPropsWithSVGProps, n as UniversalTextProps } from './types-BEsEvo0F.js';
+import { HTMLMotionProps } from 'motion/react';
+import { B as BoxProps } from './Box-DggpNHav.js';
+
+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: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
+type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
+type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
+type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TagName;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
+/**
+ * **💬 A text element that can be used to display text**
+ *
+ * @description
+ * By default, the `Text` component uses text primary color and selects the
+ * correct font, weight, and leading. It also choices appropriate semantic
+ * HTML element based on the `variant` prop. For example, `body1` will use a
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+ * with the `as` prop.
+ *
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@yahoo/uds';
+ *
+ * <Text variant="body1" color="primary">
+ *   Text goes here
+ * </Text>
+ * ```
+ *
+ * @usage
+ * - Use `Text` to display text in your app.
+ * - Use `variant` to change the size and weight of the text.
+ * - Use `color` to change the color of the text.
+ * - Use `as` to change the HTML tag used to render the text.
+ *
+ * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+ *
+ * @related [ResponsiveText](https://uds.build/docs/components/responsive-text)
+ */
+declare const Text: react.ForwardRefExoticComponent<(Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLHeadingElement> & react.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLLabelElement> & react.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName | undefined;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react.RefAttributes<HTMLElement>>;
+
+export { type InputProps as I, type TextProps as T, Text as a, Input as b };