@yahoo/uds 0.5.11 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yahoo/uds",
   "description": "Yahoo Universal System",
-  "version": "0.5.11",
+  "version": "1.0.0",
   "type": "module",
   "bin": {
     "uds": "./cli/uds-cli"
@@ -29,6 +29,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./client": {
+      "import": {
+        "types": "./dist/client/index.d.ts",
+        "default": "./dist/client/index.js"
+      },
+      "require": {
+        "types": "./dist/client/index.d.cts",
+        "default": "./dist/client/index.cjs"
+      }
+    },
     "./experimental": {
       "react-native": {
         "types": "./dist/experimental/index.native.d.ts",
@@ -127,9 +137,11 @@
     "@ariakit/react": "^0.4.5",
     "bluebun": "^0.0.34",
     "clsx": "^2.1.0",
+    "framer-motion": "^11.3.28",
     "lodash-es": "^4.17.21",
     "prompts": "^2.4.2",
     "react-toastify": "^10.0.5",
+    "semver": "^7.6.2",
     "tailwind-merge": "^2.3.0",
     "ts-morph": "^23.0.0"
   },

package/dist/VStack-BFIFJUVx.d.cts

@@ -1,177 +0,0 @@
-import * as react from 'react';
-import { Ref } from 'react';
-import { aY as UniversalBoxProps, a$ as UniversalIconProps, b0 as UniversalPressableProps, b2 as UniversalTextProps, g as UniversalStackProps } from './types-BofdnBTe.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 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>>;
-
-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.
- *
- * The component is available in the `@yahoo/uds` package but is meant to be used
- * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
- * A separate package provides modularity from the core library, better
- * versioning strategies, and tree shakeability.
- *
- * @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>>;
-
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
-}
-/**
- * **🖲️ A primitive component for creating button interactions with accessibility support**
- *
- * @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 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>>;
-
-type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
-type TextProps = UniversalTextProps & {
-    /** 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;
-} & Omit<JSX.IntrinsicElements[TextElementTagName], '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 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 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 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>>;
-
-export { Box as B, type DivProps as D, Icon as I, Pressable as P, Text as T, VStack as V, type BoxProps as a, type IconProps as b, type PressableProps as c, type TextProps as d, type VStackProps as e };

package/dist/VStack-zgq0Zq3N.d.ts

@@ -1,177 +0,0 @@
-import * as react from 'react';
-import { Ref } from 'react';
-import { aY as UniversalBoxProps, a$ as UniversalIconProps, b0 as UniversalPressableProps, b2 as UniversalTextProps, g as UniversalStackProps } from './types-BofdnBTe.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 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>>;
-
-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.
- *
- * The component is available in the `@yahoo/uds` package but is meant to be used
- * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
- * A separate package provides modularity from the core library, better
- * versioning strategies, and tree shakeability.
- *
- * @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>>;
-
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
-}
-/**
- * **🖲️ A primitive component for creating button interactions with accessibility support**
- *
- * @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 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>>;
-
-type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
-type TextProps = UniversalTextProps & {
-    /** 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;
-} & Omit<JSX.IntrinsicElements[TextElementTagName], '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 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 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 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>>;
-
-export { Box as B, type DivProps as D, Icon as I, Pressable as P, Text as T, VStack as V, type BoxProps as a, type IconProps as b, type PressableProps as c, type TextProps as d, type VStackProps as e };