@yahoo/uds 0.5.5 → 0.5.6

package/dist/{Image.native-WgvzTGso.d.ts → Image.native-B7g_JqfQ.d.ts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-b1Ey4J4B.js';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-yd5VT3UG.js';
 import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ImageProps as ImageProps$1 } from 'expo-image';
@@ -34,6 +34,6 @@ interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImag
 /**
  * An image element
  */
-declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
 export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/{Image.native-B1tvIZc5.d.cts → Image.native-t6JVy3qi.d.cts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-b1Ey4J4B.cjs';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-yd5VT3UG.cjs';
 import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ImageProps as ImageProps$1 } from 'expo-image';
@@ -34,6 +34,6 @@ interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImag
 /**
  * An image element
  */
-declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
 export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/{VStack-BbNBxVhv.d.ts → VStack-BA1lcm0p.d.ts}

@@ -1,25 +1,34 @@
 import * as react from 'react';
 import { Ref } from 'react';
-import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-BevSfblh.js';
+import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-Dg9w4-q2.js';
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 interface BoxProps extends UniversalBoxProps, DivProps {
 }
 /**
- * A layout primitive that can be used to compose other components. By default,
- * `Box` is a flexbox container.
+ * **📦 A layout component that can be used to compose other components**
  *
- * **When to use**
- * - if you need to div-like container to apply padding, shapes, or other styling.
- * - if you're creating card 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.
  *
- * **Basic usage**
+ * @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 http://yo/uds/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](./HStack.tsx) and [VStack](./VStack.tsx)
  */
 declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -27,6 +36,9 @@ type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
 interface IconProps extends UniversalIconProps, SVGElementProps {
 }
 /**
+ * **🎨 A component for displaying icons**
+ *
+ * @description
  * Icons are small symbols for actions or other items. They are available in
  * three different sizes: `sm`, `md`, and `lg`. Each size also supports an
  * outline and fill variant. Icons can be colored using the `color` prop.
@@ -36,13 +48,20 @@ interface IconProps extends UniversalIconProps, SVGElementProps {
  * A separate package provides modularity from the core library, better
  * versioning strategies, and tree shakeability.
  *
- * **Basic usage**
+ * @example
  * ```tsx
  * import { Icon } from '@yahoo/uds';
  * import { AddFolder } from '@yahoo/uds-icons';
  *
  * <Icon name={AddFolder} variant="fill" size="sm" />
  * ```
+ *
+ * @usage
+ * - If you need to display an icon.
+ *
+ * @see The {@link http://yo/uds/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](./IconButton.tsx)
  */
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 
@@ -50,12 +69,15 @@ type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'colo
 interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
 }
 /**
- * Provides a primative for creating button interactions with accessibility support.
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
  *
- * **When to use**
- * - if you need a highly customized version of [Button](./button)
+ * @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.
  *
- * **Basic usage**
+ * @example
  * ```tsx
  * import { Pressable } from '@yahoo/uds';
  *
@@ -68,6 +90,16 @@ interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
  *  >
  *    <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 http://yo/uds/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](./Button.tsx) and [IconButton](./IconButton.tsx)
+ *
  */
 declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -79,9 +111,17 @@ type TextProps = UniversalTextProps & {
     as?: TextElementTagName;
 } & Omit<JSX.IntrinsicElements[TextElementTagName], 'color'>;
 /**
- * A text element that can be used to display text.
+ * **💬 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.
+ *
  *
- * **Basic usage**
+ * @example
  * ```tsx
  * import { Text } from '@yahoo/uds';
  *
@@ -90,36 +130,47 @@ type TextProps = UniversalTextProps & {
  * </Text>
  * ```
  *
- * 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.
+ * @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 http://yo/uds/docs/components/text Text Docs} for more info
+ *
+ * @related [Button](./Button.tsx) and [Pressable](./Pressable.tsx)
  */
 declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLElement>>;
 
 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 similiar to [Box](./box) but provides additional features like a `gap` property to
+ * 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.
  *
- *  **When to use**
- * - 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).
- *
- * **Basic usage**
+ * @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 http://yo/uds/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](./Box.tsx) and [HStack](./HStack.tsx)
  **/
 declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/{VStack-Lg_bEcbW.d.cts → VStack-DoQaz7yf.d.cts}

@@ -1,25 +1,34 @@
 import * as react from 'react';
 import { Ref } from 'react';
-import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-BevSfblh.cjs';
+import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-Dg9w4-q2.cjs';
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 interface BoxProps extends UniversalBoxProps, DivProps {
 }
 /**
- * A layout primitive that can be used to compose other components. By default,
- * `Box` is a flexbox container.
+ * **📦 A layout component that can be used to compose other components**
  *
- * **When to use**
- * - if you need to div-like container to apply padding, shapes, or other styling.
- * - if you're creating card 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.
  *
- * **Basic usage**
+ * @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 http://yo/uds/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](./HStack.tsx) and [VStack](./VStack.tsx)
  */
 declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -27,6 +36,9 @@ type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
 interface IconProps extends UniversalIconProps, SVGElementProps {
 }
 /**
+ * **🎨 A component for displaying icons**
+ *
+ * @description
  * Icons are small symbols for actions or other items. They are available in
  * three different sizes: `sm`, `md`, and `lg`. Each size also supports an
  * outline and fill variant. Icons can be colored using the `color` prop.
@@ -36,13 +48,20 @@ interface IconProps extends UniversalIconProps, SVGElementProps {
  * A separate package provides modularity from the core library, better
  * versioning strategies, and tree shakeability.
  *
- * **Basic usage**
+ * @example
  * ```tsx
  * import { Icon } from '@yahoo/uds';
  * import { AddFolder } from '@yahoo/uds-icons';
  *
  * <Icon name={AddFolder} variant="fill" size="sm" />
  * ```
+ *
+ * @usage
+ * - If you need to display an icon.
+ *
+ * @see The {@link http://yo/uds/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](./IconButton.tsx)
  */
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 
@@ -50,12 +69,15 @@ type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'colo
 interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
 }
 /**
- * Provides a primative for creating button interactions with accessibility support.
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
  *
- * **When to use**
- * - if you need a highly customized version of [Button](./button)
+ * @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.
  *
- * **Basic usage**
+ * @example
  * ```tsx
  * import { Pressable } from '@yahoo/uds';
  *
@@ -68,6 +90,16 @@ interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
  *  >
  *    <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 http://yo/uds/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](./Button.tsx) and [IconButton](./IconButton.tsx)
+ *
  */
 declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -79,9 +111,17 @@ type TextProps = UniversalTextProps & {
     as?: TextElementTagName;
 } & Omit<JSX.IntrinsicElements[TextElementTagName], 'color'>;
 /**
- * A text element that can be used to display text.
+ * **💬 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.
+ *
  *
- * **Basic usage**
+ * @example
  * ```tsx
  * import { Text } from '@yahoo/uds';
  *
@@ -90,36 +130,47 @@ type TextProps = UniversalTextProps & {
  * </Text>
  * ```
  *
- * 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.
+ * @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 http://yo/uds/docs/components/text Text Docs} for more info
+ *
+ * @related [Button](./Button.tsx) and [Pressable](./Pressable.tsx)
  */
 declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLElement>>;
 
 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 similiar to [Box](./box) but provides additional features like a `gap` property to
+ * 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.
  *
- *  **When to use**
- * - 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).
- *
- * **Basic usage**
+ * @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 http://yo/uds/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](./Box.tsx) and [HStack](./HStack.tsx)
  **/
 declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;