@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/dist/Text-BQhCLqTc.d.ts

@@ -0,0 +1,88 @@
+import * as react from 'react';
+import { Ref } from 'react';
+import { U as UniversalTextProps } from './types-DYstZLNq.js';
+
+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
+ */
+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 { Text as T, type TextProps as a };

package/dist/Text-CJRvqui_.d.cts

@@ -0,0 +1,88 @@
+import * as react from 'react';
+import { Ref } from 'react';
+import { U as UniversalTextProps } from './types-gGaZxCMr.cjs';
+
+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
+ */
+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 { Text as T, type TextProps as a };

package/dist/Text-Dw9vuP5i.d.cts

@@ -0,0 +1,88 @@
+import * as react from 'react';
+import { Ref } from 'react';
+import { U as UniversalTextProps } from './types-DYstZLNq.cjs';
+
+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
+ */
+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 { Text as T, type TextProps as a };

package/dist/Text-ksXYBDQ6.d.ts

@@ -0,0 +1,88 @@
+import * as react from 'react';
+import { Ref } from 'react';
+import { U as UniversalTextProps } from './types-gGaZxCMr.js';
+
+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
+ */
+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 { Text as T, type TextProps as a };

package/dist/VStack-Ch6JJPQE.d.cts

@@ -0,0 +1,83 @@
+import * as react from 'react';
+import { n as UniversalStackProps, o as UniversalDividerProps } from './types-gGaZxCMr.cjs';
+import { B as BoxProps, D as DivProps } from './Box-BWU5UmHC.cjs';
+
+interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
+    layerClassNames?: {
+        root?: string;
+        text?: string;
+        line?: string;
+    };
+}
+
+type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
+interface DividerInternalProps extends DividerCoreProps {
+    variant?: VariantWithInherit;
+}
+
+type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
+/**
+ * **📦 A divider component that can be used to visually separate components**
+ *
+ * @description
+ * The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@yahoo/uds';
+ *
+ * // Default primary horizontal divider. Similar to <hr />
+ * <Divider />
+ *
+ * // A vertical divider.
+ * <Divider vertical />
+ *
+ * // A horizontal divider with the secondary styling.
+ * <Divider variant="secondary" />
+ *
+ * // A vertical divider with the tertiary styling.
+ * <Divider vertical variant="tertiary" />
+ * ```
+ *
+ * @usage
+ * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+ *
+ * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+ **/
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type DividerProps as D, type VStackProps as V, Divider as a, VStack as b };

package/dist/VStack-CkK4XZ1Y.d.ts

@@ -0,0 +1,83 @@
+import * as react from 'react';
+import { n as UniversalStackProps, o as UniversalDividerProps } from './types-DYstZLNq.js';
+import { B as BoxProps, D as DivProps } from './Box-C5a5zIIo.js';
+
+interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
+    layerClassNames?: {
+        root?: string;
+        text?: string;
+        line?: string;
+    };
+}
+
+type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
+interface DividerInternalProps extends DividerCoreProps {
+    variant?: VariantWithInherit;
+}
+
+type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
+/**
+ * **📦 A divider component that can be used to visually separate components**
+ *
+ * @description
+ * The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@yahoo/uds';
+ *
+ * // Default primary horizontal divider. Similar to <hr />
+ * <Divider />
+ *
+ * // A vertical divider.
+ * <Divider vertical />
+ *
+ * // A horizontal divider with the secondary styling.
+ * <Divider variant="secondary" />
+ *
+ * // A vertical divider with the tertiary styling.
+ * <Divider vertical variant="tertiary" />
+ * ```
+ *
+ * @usage
+ * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+ *
+ * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+ **/
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type DividerProps as D, type VStackProps as V, Divider as a, VStack as b };

package/dist/VStack-DdYKhUxh.d.ts

@@ -0,0 +1,83 @@
+import * as react from 'react';
+import { n as UniversalStackProps, o as UniversalDividerProps } from './types-gGaZxCMr.js';
+import { B as BoxProps, D as DivProps } from './Box-C9fHZ3nr.js';
+
+interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
+    layerClassNames?: {
+        root?: string;
+        text?: string;
+        line?: string;
+    };
+}
+
+type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
+interface DividerInternalProps extends DividerCoreProps {
+    variant?: VariantWithInherit;
+}
+
+type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
+/**
+ * **📦 A divider component that can be used to visually separate components**
+ *
+ * @description
+ * The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@yahoo/uds';
+ *
+ * // Default primary horizontal divider. Similar to <hr />
+ * <Divider />
+ *
+ * // A vertical divider.
+ * <Divider vertical />
+ *
+ * // A horizontal divider with the secondary styling.
+ * <Divider variant="secondary" />
+ *
+ * // A vertical divider with the tertiary styling.
+ * <Divider vertical variant="tertiary" />
+ * ```
+ *
+ * @usage
+ * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+ *
+ * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+ **/
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type DividerProps as D, type VStackProps as V, Divider as a, VStack as b };