@yahoo/uds 0.1.5 → 0.1.8

package/dist/index.d.cts

@@ -1,61 +1,498 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UniversalAvatarProps, UniversalBoxProps, UniversalPressableProps, UniversalButtonProps, IconName, Overflow, UniversalTextProps, ButtonVariant, ButtonSize, UniversalStackProps, UniversalIconProps, UniversalIconButtonProps, ForegroundColor, UniversalImageProps, UniversalTextInputProps } from '@yahoo/uds-tokens';
+export * from '@yahoo/uds-tokens';
 import * as react from 'react';
-import react__default from 'react';
-import { U as UniversalAvatarProps, n as UniversalBoxProps, o as UniversalPressableProps, p as UniversalButtonProps, q as UniversalStackProps, r as UniversalTextProps, s as UniversalTokensConfig } from './types-y_uPBR2j.cjs';
-export { t as AlwaysPalette, A as AlwaysPaletteAlias, u as Animation, v as AnyObject, w as AriaAttribute, x as AspectRatioAlias, y as AspectRatioConfig, k as AvatarSizeAlias, z as AvatarSizeConfig, D as BackgroundColor, G as BackgroundPalette, B as BackgroundPaletteAlias, I as BackgroundStyleProps, J as BackgroundWashPalette, d as BackgroundWashPaletteAlias, K as BorderStyleProps, h as BorderWidthAlias, M as BorderWidthConfig, N as BoxShadowConfig, m as ButtonSize, l as ButtonVariant, C as ColorMode, O as ColorsConfig, P as CorePalette, c as CorePaletteAlias, Q as DataAttribute, E as ElevationAlias, R as ElevationConfig, V as FlexStyleProps, e as FontFamilyAlias, W as FontFamilyConfig, X as FontSizeAlias, Y as FontSizeConfig, f as FontWeightAlias, Z as FontWeightConfig, _ as FontWeightDescriptiveAlias, $ as FontWeightNumericAlias, a0 as ForegroundColor, a1 as ForegroundPalette, F as ForegroundPaletteAlias, H as Hue, a as HueStep, a2 as IconSizeAlias, a3 as IconSizeConfig, a4 as LayoutStyleProps, a5 as LetterSpacingAlias, a6 as LineClamp, a7 as LineColor, a8 as LineHeightAlias, a9 as LineHeightConfig, aa as LinePalette, L as LinePaletteAlias, ab as Modes, ac as OpacityAlias, ad as OpacityStyleProps, ae as Palette, af as PaletteConfig, ag as PaletteType, ah as PaletteValue, ai as PlatformMode, aj as ScaleConfig, S as ScaleMode, ak as ScaleModeConfig, al as SetState, j as ShapeAlias, am as ShapeConfig, an as SizingStyleProps, i as SpacingAlias, ao as SpacingConfig, ap as SpacingStyleProps, b as SpectrumColor, aq as SpectrumConfig, ar as StateStyleProps, as as StyleProps, at as TextConfig, au as TextStyleProps, g as TextTransformAlias, av as TextTransformConfig, T as TextVariant, aw as TransitionDelay, ax as TransitionDuration, ay as TransitionTiming, az as TypographyConfig, aA as UniversalImageProps, aB as ZIndexAlias, aC as ZIndexConfig } from './types-y_uPBR2j.cjs';
-import * as tailwindcss_types_config from 'tailwindcss/types/config';
-import 'zod';
+import react__default, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import * as _ariakit_react from '@ariakit/react';
+import { PopoverProps, PopoverProviderProps, DialogProps, useDialogStore, DialogStore, DialogDismiss, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverAnchor as PopoverAnchor$1, PopoverDescription as PopoverDescription$1, PopoverDismiss as PopoverDismiss$1, PopoverProvider as PopoverProvider$1, PopoverDisclosure as PopoverDisclosure$1, PopoverDisclosureArrow as PopoverDisclosureArrow$1, TabProviderProps, TabListProps, TabPanelProps } from '@ariakit/react';
+export { DialogStore as ModalStore, TabListProps, TabPanelProps, TabProviderProps as TabsProps, usePopoverStore } from '@ariakit/react';
+import { ToastContainerProps } from 'react-toastify';
+export { toast } from 'react-toastify';
 
-type NativeImageProps = Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
-interface AvatarProps extends NativeImageProps, UniversalAvatarProps {
+interface AccordionProps extends React.PropsWithChildren {
+    label: string;
+    open?: boolean;
+    onClick?: () => void;
+}
+declare function Accordion({ label, children, onClick, open }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+type NativeImageProps$1 = Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
+interface AvatarProps extends NativeImageProps$1, UniversalAvatarProps {
 }
 /**
  * Avatar can be used for profile images.
  */
 declare function Avatar({ size: avatarSize, shape: borderRadius, src, alt, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps {
+type DivProps$1 = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps$1 {
 }
 /**
- * A box is a div with customizable styling such as elevation, border, and spacing.
+ * A layout primitive that can be used to compose other components.
+ * @example
+ ```tsx
+  import { Box } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <Box
+        bordered
+        backgroundColor="primary"
+        borderRadius="md"
+        spacing='6'
+        >
+        Any kind of content can go here!
+      </Box>
+    )
+  }
+  ```
  */
 declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
 
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
 interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
 }
 /**
- * A Pressable is a button.
+ * Provides press interactions with accessibility support.
+ * @example
+ ```tsx
+   import { Pressable, Text } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <Pressable
+        onClick={console.log}
+        backgroundColor="secondary"
+        bordered
+        borderColor="primary"
+        borderRadius="l"
+      >
+        <Text variant="body1" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+      </Pressable>
+    )
+  }
+  ```
  */
 declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface ButtonProps extends PressableProps, UniversalButtonProps {
 }
 /**
- * Buttons allow users to take actions, and make choices, with a single tap.
+ * A button element that can be used to trigger an action.
+ * @example
+ ```tsx
+  import { Button, HStack } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <HStack gap="2">
+        <Button variant="accent" onClick={console.log}>Save</Button>
+        <Button variant="accent-outline" onClick={console.log}>Cancel</Button>
+      </HStack>
+    )
+  }
+ ```
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-type HStackProps = UniversalStackProps & DivProps;
+interface ChipProps {
+    children?: string;
+    startContent?: React.ReactNode;
+    startIcon?: IconName;
+    endIcon?: IconName;
+    endContent?: React.ReactNode;
+    variant: 'accent' | 'secondary';
+}
+declare function Chip({ children, variant, startIcon, startContent, endIcon, endContent, }: ChipProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownItemsProps extends React.PropsWithChildren, Omit<PopoverProps, 'children'> {
+    overflow?: Overflow;
+}
+declare const DropdownItems: react.ForwardRefExoticComponent<Omit<DropdownItemsProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface DropdownItemPressableProps extends Omit<PressableProps, 'onClick'> {
+    onClick?: (close: () => void) => void;
+}
+declare const DropdownItemPressable: react.ForwardRefExoticComponent<DropdownItemPressableProps & react.RefAttributes<HTMLButtonElement>>;
+interface DropdownItemProps extends DropdownItemPressableProps {
+    startIcon?: IconName;
+    endIcon?: IconName;
+    title?: string;
+    description?: string;
+    _title?: UniversalTextProps;
+    _description?: UniversalTextProps;
+}
+declare function DropdownItem({ title, description, _title, _description, startIcon, endIcon, ...props }: DropdownItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownTrigger({ children, variant, size, ...props }: {
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+} & PressableProps): react_jsx_runtime.JSX.Element;
+interface DropdownProps extends PopoverProviderProps {
+    children: React.ReactNode;
+}
+declare const Dropdown: typeof _ariakit_react.PopoverProvider;
+
+type HStackProps = UniversalStackProps & DivProps$1;
+/**
+ * @example
+  A layout primitive that can be used to compose other components.
+  The HStack is essentially the same component as [Box](/components/box) where it uses [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) to lay content out in a row. Where it differs is HStack also allows for gaps between children via the `gap` prop.
+
+  You should use HStack when:
+
+  - you want to lay content out in columns that are sized to their content
+  - you want to add gaps between columns
+  - you want to lay content out in columns that fill the available space within the parent container
+  - you need columns of proportionate size to each other (also known as a ratio-based layout)
+
+
+  #### Columns Sized to Content
+
+  ```tsx
+  import { Box, HStack } from "@yahoo/uds"
+
+  export function Demo() {
+  return (
+      <HStack>
+        <Box spacing="6" backgroundColor="secondary">
+          First
+        </Box>
+        <Box spacing="6" backgroundColor="secondary">
+          Second
+        </Box>
+        <Box spacing="6" backgroundColor="secondary">
+          Third
+        </Box>
+      </HStack>
+    )
+  }
+  ```
+
+  #### Columns with Gaps
+
+  ```tsx
+  import { Box, HStack } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <HStack gap="1">
+        <Box spacing="6" backgroundColor="secondary">
+          First
+        </Box>
+        <Box spacing="6" backgroundColor="secondary">
+          Second
+        </Box>
+        <Box spacing="6" backgroundColor="secondary">
+          Third
+        </Box>
+      </HStack>
+    )
+  }
+  ```
+
+  #### Columns that Fill the Available Space
+
+  ```tsx
+  import { Box, HStack } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <HStack gap="1">
+        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+          First
+        </Box>
+        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+          Second
+        </Box>
+        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+          Third
+        </Box>
+      </HStack>
+    )
+  ```
+
+  #### Columns that Have Proportionate Sizes
+
+  ```tsx
+  import { Box, HStack } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <HStack gap="1">
+        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+          First
+        </Box>
+        <Box spacing="6" flexGrow="2" backgroundColor="secondary">
+          Second
+        </Box>
+        <Box spacing="6" flexGrow="3" backgroundColor="secondary">
+          Third
+        </Box>
+      </HStack>
+    )
+  }
+  ```
+ */
+declare const HStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps$1 & react.RefAttributes<HTMLDivElement>>;
+
+type HtmlSpanProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
+interface IconProps extends UniversalIconProps, HtmlSpanProps {
+}
+/**
+ * For an icon to render, it requires a unique name that maps to an upstream asset in Figma (this will autocomplete when using TypeScript), and a target size (s, m, l).
+
+@example
+  ```tsx
+  import { Icon } from "@yahoo/uds"
+
+  export function Demo() {
+   return <Icon name="academicCap" size="m" />
+  }
+  ```
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+    color?: ForegroundColor;
+}
 /**
- * HStack is a layout component that groups elements together in the horizontal direction.
+ * An icon button element that can be used to trigger an action.
+ * @example
+ ```tsx
+  import { IconButton } from "@yahoo/uds"
+
+  export function IconButtonDemo() {
+    return (
+      <IconButton variant="accent-outline" name="close" onPress={console.log} />
+    )
+  }
+ ```
  */
-declare const HStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type NativeImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
+interface ImageProps extends NativeImageProps, UniversalImageProps {
+}
+/**
+ * An image element with a fallback for representing the user.
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, elevation, backgroundColor, backgroundColorOnActive, backgroundColorOnHover, backgroundColorOnChecked, opacity, bordered, borderedTop, borderedBottom, borderedStart, borderedEnd, borderedHorizontal, borderedVertical, 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, zIndex, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, minHeight, maxHeight, minWidth, maxWidth, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps extends DialogProps {
+}
+declare function useModalStore(params?: Parameters<typeof useDialogStore>[0]): DialogStore;
+interface ModalHeaderProps extends React.PropsWithChildren {
+    handleClose?: () => void;
+}
+declare function ModalHeader({ children, handleClose }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ className, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+declare const ModalDismiss: typeof DialogDismiss;
+
+interface PopoverHeadingProps extends PropsWithChildren {
+    leading?: react__default.ReactNode;
+    trailing?: react__default.ReactNode;
+}
+declare function PopoverHeading({ children, leading, trailing }: PopoverHeadingProps): react_jsx_runtime.JSX.Element;
+declare const Popover: typeof Popover$1;
+declare const PopoverArrow: typeof PopoverArrow$1;
+declare const PopoverAnchor: typeof PopoverAnchor$1;
+declare const PopoverDescription: typeof PopoverDescription$1;
+declare const PopoverDismiss: typeof PopoverDismiss$1;
+declare const PopoverProvider: typeof PopoverProvider$1;
+declare const PopoverDisclosure: typeof PopoverDisclosure$1;
+declare const PopoverDisclosureArrow: typeof PopoverDisclosureArrow$1;
 
-type HtmlParagraphProps = Omit<React.HTMLAttributes<HTMLParagraphElement>, 'color'>;
-interface TextProps extends UniversalTextProps, HtmlParagraphProps {
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface SpinnerProps extends DivProps {
 }
+declare function Spinner({ className, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface TabProps extends React.PropsWithChildren {
+    asChild?: boolean;
+    value: string;
+    label: string;
+    startIcon?: IconName;
+}
+declare function Tabs(props: TabProviderProps): react_jsx_runtime.JSX.Element;
+declare const TabList: react.ForwardRefExoticComponent<Omit<TabListProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const Tab: ({ asChild, label, value, startIcon }: TabProps) => react_jsx_runtime.JSX.Element;
+declare const TabPanel: react.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type TextElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type TextProps<As extends TextElement = TextElement> = UniversalTextProps & {
+    as?: As;
+} & Omit<JSX.IntrinsicElements[As], 'color'>;
 /**
- * Text provide easy use of typography.
+ * A text element that can be used to display text.
+ * @example
+    #### Display1
+
+    Display1 styles are to be used very sparingly. Display styles supersede Title styles, so they are there for when you need to layer on more hierarchy.
+    The default html text element rendered for this variant is `h1`.
+
+    ```tsx
+    import { Text, VStack } from "@yahoo/uds"
+
+    export function Demo() {
+      return (
+        <VStack>
+          <Text variant="display1">Display 1</Text>
+        </VStack>
+      )
+    }
+    ```
+
+    #### Title
+
+    Title styles are used to establish the primary hierarchy in a layout. They should be used to label sections.
+    The default html text element rendered for this variant is `h1` for `title1`, `h2` for `title2`, `h3` for `title3` and `h4` for `headline1`.
+
+    ```tsx
+    import { Text, VStack } from "@yahoo/uds"
+
+    export function Demo() {
+      return (
+        <VStack gap="6">
+          <Text variant="title1">Title 1</Text>
+          <Text variant="title2">Title 2</Text>
+          <Text variant="title3">Title 3</Text>
+        </VStack>
+      )
+    }
+    ```
+
+    #### Headline & Body
+
+    Headline and body styles are your essential content styles. They’re versatile styles that can be used for paragraphs, data, labels for buttons.
+    The default html text element rendered for this variant is `p`.
+
+    ```tsx
+    import { Text, VStack } from "@yahoo/uds"
+
+    export function Demo() {
+      return (
+        <VStack gap="6">
+          <Text variant="headline1">Headline 1</Text>
+          <Text variant="body1">Body 1</Text>
+        </VStack>
+      )
+    }
+    ```
+
+    #### Label & Caption
+
+    Label and caption styles are when you need to add hierarchy in your content. They ideally are used in conjunction with Headline and Body styles, but in extraordinarily dense interfaces they can replace Headline & Body should you need to present large data sets to users. They’re also great candidates for presenting numbers to the user as they have tabular numbers by default.
+    The default html text element rendered for this variant is `p`.
+
+    ```tsx
+    import { Text, VStack } from "@yahoo/uds"
+
+    export function Demo() {
+      return (
+        <VStack gap="6">
+          <Text variant="label1">Label 1</Text>
+          <Text variant="label2">Label 2</Text>
+          <Text variant="caption1">Caption 1</Text>
+          <Text variant="caption2">Caption 2</Text>
+        </VStack>
+      )
+    }
+    ```
+
+    #### Legal
+
+    Legal styles are used for legal disclaimers and fine print.
+    The default html text element rendered for this variant is `p`.
+
+    ```tsx
+    import { Text, VStack } from "@yahoo/uds"
+
+    export function Demo() {
+      return (
+        <VStack>
+          <Text variant="legal1">Legal 1</Text>
+        </VStack>
+      )
+    }
+    ```
  */
-declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const Text: react.ForwardRefExoticComponent<Omit<TextProps<TextElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+
+type NativeTextInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'height' | 'size' | 'width' | ''>;
+interface TextInputProps extends NativeTextInputProps, UniversalTextInputProps {
+}
+interface TextInputLabelProps extends React.PropsWithChildren {
+    required?: boolean;
+}
+interface TextInputGroupProps extends TextInputProps {
+    label?: string;
+}
+declare function TextInputLabel({ children, required }: TextInputLabelProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ className, disabled, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInputGroup({ label, required, ...props }: TextInputGroupProps): react_jsx_runtime.JSX.Element;
+
+interface ToastProps extends ToastContainerProps {
+}
+declare function ToastContainer(props: ToastProps): react_jsx_runtime.JSX.Element;
 
-type VStackProps = UniversalStackProps & DivProps;
+type VStackProps = UniversalStackProps & DivProps$1;
 /**
- * VStack is a layout component that groups elements together in the vertical direction.
+ * @example
+  The VStack is essentially the same component as [Box](/components/box) where it uses [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) but it lays out content in a column. VStack also allows for gaps between children via the `gap` prop.
+
+  You should use VStack when:
+
+  - you want to lay content out in rows that are sized to their content (height only, by default each child will fill the width of the VStack)
+  - you want to add gaps between columns
+  - you want to lay content out in columns that fill the available space within the parent container
+  - you need columns of proportionate size to each other (also known as a ratio-based layout)
+
+  #### Rows with Gaps
+
+  ```tsx
+    import { Box, VStack } from "@yahoo/uds"
+
+    export function Demo() {
+      return (
+        <VStack gap="6">
+          <Box spacing="6" backgroundColor="secondary">
+            First
+          </Box>
+          <Box spacing="6" backgroundColor="secondary">
+            Second
+          </Box>
+          <Box spacing="6" backgroundColor="secondary">
+            Third
+          </Box>
+        </VStack>
+      )
+    }
+  ```
+
+  #### Rows that Have Proportionate Sizes
+
+  ```tsx
+      import { Box, VStack } from "@yahoo/uds"
+
+    export function Demo() {
+      return (
+        <VStack gap="6">
+          <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+            First
+          </Box>
+          <Box spacing="6" flexGrow="2" backgroundColor="secondary">
+            Second
+          </Box>
+          <Box spacing="6" flexGrow="3" backgroundColor="secondary">
+            Third
+          </Box>
+        </VStack>
+      )
+    }
+  ```
+
  */
-declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps$1 & react.RefAttributes<HTMLDivElement>>;
 
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
 type CvaStyleValue<T> = T | CvaStyleArray<T> | Record<string, unknown> | null | boolean | undefined;
@@ -93,50 +530,50 @@ interface CX<T> {
 declare const cx: CX<string>;
 declare const cva: CVA<string>;
 declare const getStyles: (props?: ({
-    color?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "black" | "white" | undefined;
-    colorChecked?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "black" | "white" | undefined;
-    fontFamily?: "icons" | "sans" | "sans-condensed" | "serif-text" | "serif-display" | undefined;
+    color?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | "transparent" | undefined;
+    colorChecked?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | "transparent" | undefined;
+    fontFamily?: "icons" | "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "sans" | "sans-beta" | "sans-condensed" | "serif-text" | "serif-display" | "display2" | undefined;
     fontSize?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "display2" | undefined;
-    fontWeight?: "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "bold" | "extrabold" | "black" | "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "display2" | undefined;
+    fontWeight?: "bold" | "black" | "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "display2" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "extrabold" | undefined;
     lineHeight?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "display2" | undefined;
-    textAlign?: "center" | "justify" | "start" | "end" | undefined;
-    textTransform?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "display2" | undefined;
-    spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingVertical?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingBottom?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingEnd?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingStart?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingTop?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offset?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetVertical?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetBottom?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetEnd?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetStart?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetTop?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    columnGap?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    rowGap?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
-    backgroundColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "transparent" | "black" | "white" | undefined;
-    backgroundColorOnActive?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "transparent" | "black" | "white" | undefined;
-    backgroundColorOnHover?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "transparent" | "black" | "white" | undefined;
-    backgroundColorOnChecked?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "transparent" | "black" | "white" | undefined;
+    textAlign?: "end" | "start" | "center" | "justify" | undefined;
+    textTransform?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "display2" | "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+    spacing?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacingHorizontal?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacingVertical?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacingBottom?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacingEnd?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacingStart?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacingTop?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    offset?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    offsetVertical?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    offsetHorizontal?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    offsetBottom?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    offsetEnd?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    offsetStart?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    offsetTop?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    columnGap?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    rowGap?: "0" | "1" | "2" | "4" | "8" | "3" | "5" | "6" | "7" | "9" | "10" | "11" | "12" | "13" | "14" | undefined;
+    backgroundColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "transparent" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
+    backgroundColorOnActive?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "transparent" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
+    backgroundColorOnHover?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "transparent" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
+    backgroundColorOnChecked?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "transparent" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
     elevation?: "1" | "2" | "3" | undefined;
-    opacity?: "0" | "5" | "10" | "100" | "20" | "25" | "30" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "95" | undefined;
-    borderColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderColorOnActive?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderColorOnFocus?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderColorOnHover?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderColorOnChecked?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderStartColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderEndColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderBottomColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderTopColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "black" | "white" | undefined;
-    borderRadius?: "s" | "m" | "l" | "square" | "xs" | "xl" | "xxl" | "circle" | undefined;
-    borderTopStartRadius?: "s" | "m" | "l" | "square" | "xs" | "xl" | "xxl" | "circle" | undefined;
-    borderTopEndRadius?: "s" | "m" | "l" | "square" | "xs" | "xl" | "xxl" | "circle" | undefined;
-    borderBottomStartRadius?: "s" | "m" | "l" | "square" | "xs" | "xl" | "xxl" | "circle" | undefined;
-    borderBottomEndRadius?: "s" | "m" | "l" | "square" | "xs" | "xl" | "xxl" | "circle" | undefined;
+    opacity?: "0" | "5" | "10" | "20" | "25" | "30" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "95" | "100" | undefined;
+    borderColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderColorOnActive?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderColorOnFocus?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderColorOnHover?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderColorOnChecked?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderStartColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderEndColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderBottomColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderTopColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | "transparent" | undefined;
+    borderRadius?: "m" | "square" | "xs" | "s" | "l" | "xl" | "xxl" | "circle" | undefined;
+    borderTopStartRadius?: "m" | "square" | "xs" | "s" | "l" | "xl" | "xxl" | "circle" | undefined;
+    borderTopEndRadius?: "m" | "square" | "xs" | "s" | "l" | "xl" | "xxl" | "circle" | undefined;
+    borderBottomStartRadius?: "m" | "square" | "xs" | "s" | "l" | "xl" | "xxl" | "circle" | undefined;
+    borderBottomEndRadius?: "m" | "square" | "xs" | "s" | "l" | "xl" | "xxl" | "circle" | undefined;
     bordered?: boolean | undefined;
     borderWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
     borderVerticalWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
@@ -151,44 +588,35 @@ declare const getStyles: (props?: ({
     borderedHorizontal?: boolean | undefined;
     borderedEnd?: boolean | undefined;
     borderedStart?: boolean | undefined;
-    height?: "auto" | "min" | "max" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "screen" | "fit" | undefined;
-    minHeight?: "min" | "max" | "full" | "screen" | "fit" | undefined;
-    maxHeight?: "none" | "min" | "max" | "full" | "screen" | "fit" | undefined;
-    width?: "auto" | "min" | "max" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "screen" | "fit" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | undefined;
-    minWidth?: "min" | "max" | "full" | "fit" | undefined;
-    maxWidth?: "none" | "min" | "max" | "full" | "fit" | undefined;
-    avatarSize?: "s" | "m" | "l" | undefined;
-    iconSize?: "s" | "m" | "l" | undefined;
-    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
-    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
-    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
+    height?: "auto" | "full" | "screen" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | undefined;
+    minHeight?: "full" | "screen" | "min" | "max" | "fit" | undefined;
+    maxHeight?: "none" | "full" | "screen" | "min" | "max" | "fit" | undefined;
+    width?: "auto" | "full" | "screen" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | undefined;
+    minWidth?: "full" | "screen" | "min" | "max" | "fit" | undefined;
+    maxWidth?: "none" | "full" | "min" | "max" | "fit" | undefined;
+    avatarSize?: "m" | "s" | "l" | undefined;
+    iconSize?: "m" | "s" | "l" | undefined;
+    alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+    alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+    alignSelf?: "center" | "auto" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
     flex?: "1" | "none" | "auto" | "initial" | undefined;
     flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-    flexGrow?: "0" | "1" | undefined;
+    flexGrow?: "0" | "1" | "2" | "3" | undefined;
     flexShrink?: "0" | "1" | undefined;
-    flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
+    flexWrap?: "wrap" | "wrap-reverse" | "nowrap" | undefined;
+    justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
     flexBasis?: "min-content" | undefined;
-    display?: "block" | "inline-block" | "inline" | "flex" | "inline-flex" | "table" | "inline-table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row-group" | "table-row" | "flow-root" | "grid" | undefined;
+    display?: "flex" | "block" | "inline-block" | "inline" | "inline-flex" | "table" | "inline-table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row-group" | "table-row" | "flow-root" | "grid" | "contents" | undefined;
     overflow?: "auto" | "hidden" | "clip" | "visible" | "scroll" | undefined;
     overflowX?: "auto" | "hidden" | "clip" | "visible" | "scroll" | undefined;
     overflowY?: "auto" | "hidden" | "clip" | "visible" | "scroll" | undefined;
-    position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
+    position?: "fixed" | "static" | "absolute" | "relative" | "sticky" | undefined;
     zIndex?: "0" | "10" | "20" | "30" | "40" | "50" | "auto" | undefined;
-    objectFit?: "fill" | "none" | "cover" | "contain" | "scale-down" | undefined;
+    contentFit?: "fill" | "none" | "contain" | "cover" | "scale-down" | undefined;
 } & {
     className?: string | undefined;
 }) | undefined) => string;
 
-interface TailwindPluginOptions {
-    config?: UniversalTokensConfig;
-}
-declare const tailwindPlugin: {
-    (options: TailwindPluginOptions): {
-        handler: tailwindcss_types_config.PluginCreator;
-        config?: Partial<tailwindcss_types_config.Config> | undefined;
-    };
-    __isOptionsFunction: true;
-};
+type SetState<T> = Dispatch<SetStateAction<T>>;
 
-export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, HStack, type HStackProps, Pressable, type PressableProps, Text, type TextProps, UniversalAvatarProps, UniversalBoxProps, UniversalButtonProps, UniversalPressableProps, UniversalStackProps, UniversalTextProps, UniversalTokensConfig, VStack, type VStackProps, cva, cx, getStyles, tailwindPlugin };
+export { Accordion, type AccordionProps, Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Chip, type ChipProps, Dropdown, DropdownItem, DropdownItemPressable, type DropdownItemProps, DropdownItems, type DropdownItemsProps, type DropdownProps, DropdownTrigger, HStack, type HStackProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Modal, ModalDismiss, ModalHeader, type ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverDescription, PopoverDisclosure, PopoverDisclosureArrow, PopoverDismiss, PopoverHeading, type PopoverHeadingProps, PopoverProvider, Pressable, type PressableProps, type SetState, Spinner, type SpinnerProps, Tab, TabList, TabPanel, type TabProps, Tabs, Text, TextInput, TextInputGroup, type TextInputGroupProps, TextInputLabel, type TextInputLabelProps, type TextInputProps, type TextProps, ToastContainer, VStack, type VStackProps, cva, cx, getStyles, useModalStore };