@yahoo/uds 0.5.5 → 0.5.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. package/dist/{Image.native-WgvzTGso.d.ts → Image.native-B7g_JqfQ.d.ts} +2 -2
  2. package/dist/{Image.native-B1tvIZc5.d.cts → Image.native-t6JVy3qi.d.cts} +2 -2
  3. package/dist/{VStack-BbNBxVhv.d.ts → VStack-BA1lcm0p.d.ts} +79 -28
  4. package/dist/{VStack-Lg_bEcbW.d.cts → VStack-DoQaz7yf.d.cts} +79 -28
  5. package/dist/experimental/index.cjs +3 -3
  6. package/dist/experimental/index.d.cts +41 -12
  7. package/dist/experimental/index.d.ts +41 -12
  8. package/dist/experimental/index.js +3 -3
  9. package/dist/experimental/index.native.cjs +1 -1
  10. package/dist/experimental/index.native.d.cts +3 -3
  11. package/dist/experimental/index.native.d.ts +3 -3
  12. package/dist/experimental/index.native.js +1 -1
  13. package/dist/index.cjs +2 -2
  14. package/dist/index.d.cts +34 -18
  15. package/dist/index.d.ts +34 -18
  16. package/dist/index.js +3 -3
  17. package/dist/{index.native-4R8ZV05r.d.ts → index.native-Cl1NmAGq.d.ts} +1 -1
  18. package/dist/{index.native-CMLeS7py.d.cts → index.native-axhnucpt.d.cts} +1 -1
  19. package/dist/index.native.cjs +1 -1
  20. package/dist/index.native.d.cts +4 -60
  21. package/dist/index.native.d.ts +4 -60
  22. package/dist/index.native.js +1 -1
  23. package/dist/metafile-cjs.json +1 -1
  24. package/dist/metafile-esm.json +1 -1
  25. package/dist/tailwind/plugin.d.cts +1 -1
  26. package/dist/tailwind/plugin.d.ts +1 -1
  27. package/dist/tailwind/plugin.js +1 -1
  28. package/dist/tailwind/purger.cjs +2 -2
  29. package/dist/tailwind/purger.js +2 -2
  30. package/dist/tailwind/tsMorph.cjs +1 -1
  31. package/dist/tailwind/tsMorph.js +3 -3
  32. package/dist/tokens/index.cjs +1 -1
  33. package/dist/tokens/index.d.cts +2 -58
  34. package/dist/tokens/index.d.ts +2 -58
  35. package/dist/tokens/index.js +2 -2
  36. package/dist/tokens/index.native.d.cts +2 -2
  37. package/dist/tokens/index.native.d.ts +2 -2
  38. package/dist/tokens/parseTokens.cjs +1 -1
  39. package/dist/tokens/parseTokens.d.cts +1 -1
  40. package/dist/tokens/parseTokens.d.ts +1 -1
  41. package/dist/tokens/parseTokens.js +1 -1
  42. package/dist/{types-BevSfblh.d.cts → types-Dg9w4-q2.d.cts} +0 -8
  43. package/dist/{types-BevSfblh.d.ts → types-Dg9w4-q2.d.ts} +0 -8
  44. package/dist/{types-b1Ey4J4B.d.cts → types-yd5VT3UG.d.cts} +0 -8
  45. package/dist/{types-b1Ey4J4B.d.ts → types-yd5VT3UG.d.ts} +0 -8
  46. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-b1Ey4J4B.js';
2
+ import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-yd5VT3UG.js';
3
3
  import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { ImageProps as ImageProps$1 } from 'expo-image';
@@ -34,6 +34,6 @@ interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImag
34
34
  /**
35
35
  * An image element
36
36
  */
37
- 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;
37
+ 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;
38
38
 
39
39
  export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-b1Ey4J4B.cjs';
2
+ import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-yd5VT3UG.cjs';
3
3
  import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { ImageProps as ImageProps$1 } from 'expo-image';
@@ -34,6 +34,6 @@ interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImag
34
34
  /**
35
35
  * An image element
36
36
  */
37
- 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;
37
+ 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;
38
38
 
39
39
  export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };
@@ -1,25 +1,34 @@
1
1
  import * as react from 'react';
2
2
  import { Ref } from 'react';
3
- import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-BevSfblh.js';
3
+ import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-Dg9w4-q2.js';
4
4
 
5
5
  type DivProps = React.HTMLAttributes<HTMLDivElement>;
6
6
  interface BoxProps extends UniversalBoxProps, DivProps {
7
7
  }
8
8
  /**
9
- * A layout primitive that can be used to compose other components. By default,
10
- * `Box` is a flexbox container.
9
+ * **📦 A layout component that can be used to compose other components**
11
10
  *
12
- * **When to use**
13
- * - if you need to div-like container to apply padding, shapes, or other styling.
14
- * - if you're creating card components.
11
+ * @description
12
+ * The most simple component we ship - a div. But with all the power of the UDS design system.
13
+ * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
14
+ * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
15
15
  *
16
- * **Basic usage**
16
+ * @example
17
17
  * ```tsx
18
18
  * import { Box } from '@yahoo/uds';
19
19
  *
20
20
  * <Box backgroundColor="primary" spacing="6">
21
21
  * Any kind of content can go here!
22
22
  * </Box>
23
+ * ```
24
+ *
25
+ * @usage
26
+ * - If you need to div-like container to apply padding, shapes, or other styling.
27
+ * - If you're creating card components.
28
+ *
29
+ * @see The {@link http://yo/uds/docs/components/box Box Docs} for more info
30
+ *
31
+ * @related [HStack](./HStack.tsx) and [VStack](./VStack.tsx)
23
32
  */
24
33
  declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
25
34
 
@@ -27,6 +36,9 @@ type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
27
36
  interface IconProps extends UniversalIconProps, SVGElementProps {
28
37
  }
29
38
  /**
39
+ * **🎨 A component for displaying icons**
40
+ *
41
+ * @description
30
42
  * Icons are small symbols for actions or other items. They are available in
31
43
  * three different sizes: `sm`, `md`, and `lg`. Each size also supports an
32
44
  * outline and fill variant. Icons can be colored using the `color` prop.
@@ -36,13 +48,20 @@ interface IconProps extends UniversalIconProps, SVGElementProps {
36
48
  * A separate package provides modularity from the core library, better
37
49
  * versioning strategies, and tree shakeability.
38
50
  *
39
- * **Basic usage**
51
+ * @example
40
52
  * ```tsx
41
53
  * import { Icon } from '@yahoo/uds';
42
54
  * import { AddFolder } from '@yahoo/uds-icons';
43
55
  *
44
56
  * <Icon name={AddFolder} variant="fill" size="sm" />
45
57
  * ```
58
+ *
59
+ * @usage
60
+ * - If you need to display an icon.
61
+ *
62
+ * @see The {@link http://yo/uds/docs/components/icon Icon Docs} for more info
63
+ *
64
+ * @related [IconButton](./IconButton.tsx)
46
65
  */
47
66
  declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
48
67
 
@@ -50,12 +69,15 @@ type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'colo
50
69
  interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
51
70
  }
52
71
  /**
53
- * Provides a primative for creating button interactions with accessibility support.
72
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
54
73
  *
55
- * **When to use**
56
- * - if you need a highly customized version of [Button](./button)
74
+ * @description
75
+ * The Pressable component is a primitive component that can be used
76
+ * to create button interactions with accessibility support. It can be used
77
+ * to trigger an action, such as submitting a form, navigating to a new page,
78
+ * or adding interactivity to a section or card.
57
79
  *
58
- * **Basic usage**
80
+ * @example
59
81
  * ```tsx
60
82
  * import { Pressable } from '@yahoo/uds';
61
83
  *
@@ -68,6 +90,16 @@ interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
68
90
  * >
69
91
  * <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
70
92
  * </Pressable>
93
+ * ```
94
+ *
95
+ * @usage
96
+ * - If you need to add interactivity to a section or card.
97
+ * - If you need a highly customized version of [Button](./button)
98
+ *
99
+ * @see The {@link http://yo/uds/docs/components/pressable Pressable Docs} for more info
100
+ *
101
+ * @related [Button](./Button.tsx) and [IconButton](./IconButton.tsx)
102
+ *
71
103
  */
72
104
  declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
73
105
 
@@ -79,9 +111,17 @@ type TextProps = UniversalTextProps & {
79
111
  as?: TextElementTagName;
80
112
  } & Omit<JSX.IntrinsicElements[TextElementTagName], 'color'>;
81
113
  /**
82
- * A text element that can be used to display text.
114
+ * **💬 A text element that can be used to display text**
115
+ *
116
+ * @description
117
+ * By default, the `Text` component uses text primary color and selects the
118
+ * correct font, weight, and leading. It also choices appropriate semantic
119
+ * HTML element based on the `variant` prop. For example, `body1` will use a
120
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
121
+ * with the `as` prop.
122
+ *
83
123
  *
84
- * **Basic usage**
124
+ * @example
85
125
  * ```tsx
86
126
  * import { Text } from '@yahoo/uds';
87
127
  *
@@ -90,36 +130,47 @@ type TextProps = UniversalTextProps & {
90
130
  * </Text>
91
131
  * ```
92
132
  *
93
- * By default, the `Text` component uses text primary color and selects the
94
- * correct font, weight, and leading. It also choices appropriate semantic
95
- * HTML element based on the `variant` prop. For example, `body1` will use a
96
- * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
97
- * with the `as` prop.
133
+ * @usage
134
+ * - Use `Text` to display text in your app.
135
+ * - Use `variant` to change the size and weight of the text.
136
+ * - Use `color` to change the color of the text.
137
+ * - Use `as` to change the HTML tag used to render the text.
138
+ *
139
+ * @see The {@link http://yo/uds/docs/components/text Text Docs} for more info
140
+ *
141
+ * @related [Button](./Button.tsx) and [Pressable](./Pressable.tsx)
98
142
  */
99
143
  declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLElement>>;
100
144
 
101
145
  type VStackProps = UniversalStackProps & DivProps;
102
146
  /**
147
+ * **🥞 A layout component that arranges its children in rows using flexbox**
148
+ *
149
+ * @description
103
150
  * 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)
104
- * and can be used to compose larger layouts. VStack is similiar to [Box](./box) but provides additional features like a `gap` property to
151
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
105
152
  * add spacing between children.
106
153
  *
107
- * **When to use**
108
- * - create a column of items, optionally with gaps between.
109
- * - create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
110
- * - create rows that fill the available space within the parent container.
111
- * - create rows of proportionate size to each other (also known as a ratio-based layout).
112
- *
113
- * **Basic usage**
154
+ * @example
114
155
  * ```tsx
115
156
  * import { VStack, Text } from '@yahoo/uds';
116
-
157
+ *
117
158
  * <VStack gap="6">
118
159
  * <Text variant="body1" color="primary">First</Text>
119
160
  * <Text variant="body1" color="primary">Second</Text>
120
161
  * <Text variant="body1" color="primary">Third</Text>
121
162
  * </VStack>
122
163
  * ```
164
+ *
165
+ * @usage
166
+ * - Create a column of items, optionally with gaps between.
167
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
168
+ * - Create rows that fill the available space within the parent container.
169
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
170
+ *
171
+ * @see The {@link http://yo/uds/docs/components/v-stack VStack Docs} for more info
172
+ *
173
+ * @related [Box](./Box.tsx) and [HStack](./HStack.tsx)
123
174
  **/
124
175
  declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
125
176
 
@@ -1,25 +1,34 @@
1
1
  import * as react from 'react';
2
2
  import { Ref } from 'react';
3
- import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-BevSfblh.cjs';
3
+ import { aH as UniversalBoxProps, aK as UniversalIconProps, aL as UniversalPressableProps, aN as UniversalTextProps, g as UniversalStackProps } from './types-Dg9w4-q2.cjs';
4
4
 
5
5
  type DivProps = React.HTMLAttributes<HTMLDivElement>;
6
6
  interface BoxProps extends UniversalBoxProps, DivProps {
7
7
  }
8
8
  /**
9
- * A layout primitive that can be used to compose other components. By default,
10
- * `Box` is a flexbox container.
9
+ * **📦 A layout component that can be used to compose other components**
11
10
  *
12
- * **When to use**
13
- * - if you need to div-like container to apply padding, shapes, or other styling.
14
- * - if you're creating card components.
11
+ * @description
12
+ * The most simple component we ship - a div. But with all the power of the UDS design system.
13
+ * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
14
+ * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
15
15
  *
16
- * **Basic usage**
16
+ * @example
17
17
  * ```tsx
18
18
  * import { Box } from '@yahoo/uds';
19
19
  *
20
20
  * <Box backgroundColor="primary" spacing="6">
21
21
  * Any kind of content can go here!
22
22
  * </Box>
23
+ * ```
24
+ *
25
+ * @usage
26
+ * - If you need to div-like container to apply padding, shapes, or other styling.
27
+ * - If you're creating card components.
28
+ *
29
+ * @see The {@link http://yo/uds/docs/components/box Box Docs} for more info
30
+ *
31
+ * @related [HStack](./HStack.tsx) and [VStack](./VStack.tsx)
23
32
  */
24
33
  declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
25
34
 
@@ -27,6 +36,9 @@ type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
27
36
  interface IconProps extends UniversalIconProps, SVGElementProps {
28
37
  }
29
38
  /**
39
+ * **🎨 A component for displaying icons**
40
+ *
41
+ * @description
30
42
  * Icons are small symbols for actions or other items. They are available in
31
43
  * three different sizes: `sm`, `md`, and `lg`. Each size also supports an
32
44
  * outline and fill variant. Icons can be colored using the `color` prop.
@@ -36,13 +48,20 @@ interface IconProps extends UniversalIconProps, SVGElementProps {
36
48
  * A separate package provides modularity from the core library, better
37
49
  * versioning strategies, and tree shakeability.
38
50
  *
39
- * **Basic usage**
51
+ * @example
40
52
  * ```tsx
41
53
  * import { Icon } from '@yahoo/uds';
42
54
  * import { AddFolder } from '@yahoo/uds-icons';
43
55
  *
44
56
  * <Icon name={AddFolder} variant="fill" size="sm" />
45
57
  * ```
58
+ *
59
+ * @usage
60
+ * - If you need to display an icon.
61
+ *
62
+ * @see The {@link http://yo/uds/docs/components/icon Icon Docs} for more info
63
+ *
64
+ * @related [IconButton](./IconButton.tsx)
46
65
  */
47
66
  declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
48
67
 
@@ -50,12 +69,15 @@ type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'colo
50
69
  interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
51
70
  }
52
71
  /**
53
- * Provides a primative for creating button interactions with accessibility support.
72
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
54
73
  *
55
- * **When to use**
56
- * - if you need a highly customized version of [Button](./button)
74
+ * @description
75
+ * The Pressable component is a primitive component that can be used
76
+ * to create button interactions with accessibility support. It can be used
77
+ * to trigger an action, such as submitting a form, navigating to a new page,
78
+ * or adding interactivity to a section or card.
57
79
  *
58
- * **Basic usage**
80
+ * @example
59
81
  * ```tsx
60
82
  * import { Pressable } from '@yahoo/uds';
61
83
  *
@@ -68,6 +90,16 @@ interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
68
90
  * >
69
91
  * <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
70
92
  * </Pressable>
93
+ * ```
94
+ *
95
+ * @usage
96
+ * - If you need to add interactivity to a section or card.
97
+ * - If you need a highly customized version of [Button](./button)
98
+ *
99
+ * @see The {@link http://yo/uds/docs/components/pressable Pressable Docs} for more info
100
+ *
101
+ * @related [Button](./Button.tsx) and [IconButton](./IconButton.tsx)
102
+ *
71
103
  */
72
104
  declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
73
105
 
@@ -79,9 +111,17 @@ type TextProps = UniversalTextProps & {
79
111
  as?: TextElementTagName;
80
112
  } & Omit<JSX.IntrinsicElements[TextElementTagName], 'color'>;
81
113
  /**
82
- * A text element that can be used to display text.
114
+ * **💬 A text element that can be used to display text**
115
+ *
116
+ * @description
117
+ * By default, the `Text` component uses text primary color and selects the
118
+ * correct font, weight, and leading. It also choices appropriate semantic
119
+ * HTML element based on the `variant` prop. For example, `body1` will use a
120
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
121
+ * with the `as` prop.
122
+ *
83
123
  *
84
- * **Basic usage**
124
+ * @example
85
125
  * ```tsx
86
126
  * import { Text } from '@yahoo/uds';
87
127
  *
@@ -90,36 +130,47 @@ type TextProps = UniversalTextProps & {
90
130
  * </Text>
91
131
  * ```
92
132
  *
93
- * By default, the `Text` component uses text primary color and selects the
94
- * correct font, weight, and leading. It also choices appropriate semantic
95
- * HTML element based on the `variant` prop. For example, `body1` will use a
96
- * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
97
- * with the `as` prop.
133
+ * @usage
134
+ * - Use `Text` to display text in your app.
135
+ * - Use `variant` to change the size and weight of the text.
136
+ * - Use `color` to change the color of the text.
137
+ * - Use `as` to change the HTML tag used to render the text.
138
+ *
139
+ * @see The {@link http://yo/uds/docs/components/text Text Docs} for more info
140
+ *
141
+ * @related [Button](./Button.tsx) and [Pressable](./Pressable.tsx)
98
142
  */
99
143
  declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLElement>>;
100
144
 
101
145
  type VStackProps = UniversalStackProps & DivProps;
102
146
  /**
147
+ * **🥞 A layout component that arranges its children in rows using flexbox**
148
+ *
149
+ * @description
103
150
  * 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)
104
- * and can be used to compose larger layouts. VStack is similiar to [Box](./box) but provides additional features like a `gap` property to
151
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
105
152
  * add spacing between children.
106
153
  *
107
- * **When to use**
108
- * - create a column of items, optionally with gaps between.
109
- * - create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
110
- * - create rows that fill the available space within the parent container.
111
- * - create rows of proportionate size to each other (also known as a ratio-based layout).
112
- *
113
- * **Basic usage**
154
+ * @example
114
155
  * ```tsx
115
156
  * import { VStack, Text } from '@yahoo/uds';
116
-
157
+ *
117
158
  * <VStack gap="6">
118
159
  * <Text variant="body1" color="primary">First</Text>
119
160
  * <Text variant="body1" color="primary">Second</Text>
120
161
  * <Text variant="body1" color="primary">Third</Text>
121
162
  * </VStack>
122
163
  * ```
164
+ *
165
+ * @usage
166
+ * - Create a column of items, optionally with gaps between.
167
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
168
+ * - Create rows that fill the available space within the parent container.
169
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
170
+ *
171
+ * @see The {@link http://yo/uds/docs/components/v-stack VStack Docs} for more info
172
+ *
173
+ * @related [Box](./Box.tsx) and [HStack](./HStack.tsx)
123
174
  **/
124
175
  declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
125
176