@commercetools/nimbus 0.0.7-rc12 → 0.0.7-rc13

package/dist/index.d.ts

@@ -19,10 +19,10 @@ import { ComboBoxOptionGroupProps as ComboBoxOptionGroupProps_2 } from './combob
 import { ComboBoxOptionProps as ComboBoxOptionProps_2 } from './combobox.types';
 import { ComboBoxProps } from 'react-aria-components';
 import { ComboBoxRootProps as ComboBoxRootProps_2 } from './combobox.types';
-import { ConditionalValue } from '@chakra-ui/react';
 import { Context } from 'react';
+import { default as default_2 } from 'react';
 import { DetailedHTMLProps } from 'react';
-import { Dialog } from '@chakra-ui/react';
+import { Dialog as Dialog_2 } from '@chakra-ui/react';
 import { DisclosureGroupProps as DisclosureGroupProps_2 } from './accordion.types';
 import { DisclosureProps } from 'react-aria-components';
 import { Dispatch } from 'react';
@@ -33,7 +33,6 @@ import { FocusableOptions } from 'react-aria';
 import { FormFieldProps as FormFieldProps_2 } from './form-field.types';
 import { ForwardRefExoticComponent } from 'react';
 import { GridItemProps } from '@chakra-ui/react';
-import { GridListProps } from 'react-aria-components';
 import { GridProps as GridProps_2 } from '@chakra-ui/react';
 import { Heading } from '@chakra-ui/react';
 import { Highlight as Highlight_2 } from '@chakra-ui/react';
@@ -41,14 +40,12 @@ import { HTMLAttributes } from 'react';
 import { HTMLChakraProps } from '@chakra-ui/react';
 import { ImageProps as ImageProps_2 } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { JSX as JSX_2 } from 'react';
 import { JsxStyleProps } from '@chakra-ui/react';
 import { Kbd } from '@chakra-ui/react';
 import { List } from '@chakra-ui/react';
 import { ListBoxItemProps } from 'react-aria-components';
 import { ListBoxProps } from 'react-aria-components';
 import { ListBoxSectionProps } from 'react-aria-components';
-import { LoadingSpinnerRootProps } from './loading-spinner.slots';
 import { PatchHtmlProps } from '@chakra-ui/react';
 import { PolymorphicProps } from '@chakra-ui/react';
 import { PropsWithChildren } from 'react';
@@ -57,6 +54,7 @@ import { RecipeDefinition } from '@chakra-ui/react';
 import { RecipeProps } from '@chakra-ui/react';
 import { RecipeVariantProps } from '@chakra-ui/react';
 import { RecipeVariantRecord } from '@chakra-ui/react';
+import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { SelectOptionGroupProps as SelectOptionGroupProps_2 } from './select.types';
@@ -200,12 +198,27 @@ export declare const Alert: {
     };
 };
 
+export declare const _AlertActions: {
+    ({ children, ...props }: AlertActionsProps): null;
+    displayName: string;
+};
+
 /** Base Chakra styling props for the `actions` slot (`div`). */
 export declare type AlertActionsProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
+export declare const _AlertDescription: {
+    ({ children, ...props }: AlertDescriptionProps): null;
+    displayName: string;
+};
+
 /** Props for the `Alert.Description` sub-component (inherits from Text). */
 export declare type AlertDescriptionProps = TextProps;
 
+export declare const _AlertDismissButton: {
+    ({ children, ...props }: AlertDismissButtonProps): null;
+    displayName: string;
+};
+
 /** Props for the `Alert.DismissButton` sub-component (inherits from Button). */
 export declare type AlertDismissButtonProps = ButtonProps;
 
@@ -215,6 +228,7 @@ export declare type AlertIconProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 /** Final external props for the `<Alert>` component (variants + children + data-* attrs). */
 export declare type AlertProps = PropsWithChildren<AlertVariantProps> & {
     [key: `data-${string}`]: unknown;
+    ref?: React.Ref<HTMLDivElement>;
 };
 
 /**
@@ -258,19 +272,34 @@ borderRadius: "200";
 };
 }>;
 
-/** Type signature for the main `Alert` component (using `forwardRef`). */
-export declare type AlertRootComponent = ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Alert
+ * ============================================================
+ * Provides feedback to the user about the status of an action or system event
+ */
+export declare const _AlertRoot: AlertRootComponent;
+
+/** Type signature for the main `Alert` component. */
+export declare type AlertRootComponent = React.FC<AlertProps>;
 
 /** Base Chakra styling props for the root `div` slot. */
 export declare type AlertRootProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
+export declare const _AlertTitle: {
+    ({ children, ...props }: AlertTitleProps): null;
+    displayName: string;
+};
+
 /** Props for the `Alert.Title` sub-component (inherits from Text). */
 export declare type AlertTitleProps = TextProps;
 
 /** Combined root props including Chakra styles and recipe variants. */
 declare type AlertVariantProps = AlertRootProps & RecipeVariantProps<typeof alertRecipe>;
 
-export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>>;
+export declare const Avatar: {
+    (props: AvatarProps): JSX.Element;
+    displayName: string;
+};
 
 export declare interface AvatarComponentProps extends HTMLAttributes<HTMLDivElement>, RecipeVariantProps<typeof avatarRecipe> {
     /**
@@ -297,6 +326,7 @@ export declare interface AvatarComponentProps extends HTMLAttributes<HTMLDivElem
 
 export declare interface AvatarProps extends FunctionalAvatarProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const avatarRecipe: RecipeDefinition<    {
@@ -338,7 +368,10 @@ declare interface AvatarRootProps extends HTMLChakraProps<"div", AvatarRecipePro
  * - allows overriding styles by using style-props
  * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
  */
-export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
+export declare const Badge: {
+    (props: BadgeProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Main props interface for the Badge component.
@@ -347,6 +380,7 @@ export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes
  */
 export declare interface BadgeProps extends BadgeVariantProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
 }
 
 /**
@@ -417,13 +451,20 @@ declare type BadgeVariantProps = BadgeRootProps & RecipeVariantProps<typeof badg
 
 export { Bleed }
 
-export declare const Box: ForwardRefExoticComponent<BoxProps & RefAttributes<HTMLDivElement>>;
+export declare const Box: {
+    (props: BoxProps): JSX.Element;
+    displayName: string;
+};
 
 export declare interface BoxProps extends HTMLChakraProps<"div"> {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
-export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+export declare const Button: {
+    (props: ButtonProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Recipe configuration for the ToggleButtonGroup component.
@@ -481,121 +522,14 @@ colorPalette: "neutral";
 }>;
 
 export declare interface ButtonProps extends FunctionalButtonProps {
+    ref?: React.Ref<HTMLButtonElement>;
 }
 
-declare const buttonRecipe: RecipeDefinition<    {
-size: {
-"2xs": {
-h: "600";
-minW: "600";
-fontSize: "300";
-fontWeight: "500";
-lineHeight: "400";
-px: "200";
-gap: "100";
-_icon: {
-width: "400";
-height: "400";
-};
-};
-xs: {
-h: "800";
-minW: "800";
-fontSize: "350";
-fontWeight: "500";
-lineHeight: "400";
-px: "300";
-gap: "100";
-_icon: {
-width: "500";
-height: "500";
-};
-};
-md: {
-h: "1000";
-minW: "1000";
-fontSize: "400";
-lineHeight: "500";
-px: "400";
-gap: "200";
-_icon: {
-width: "600";
-height: "600";
-};
-};
-};
-variant: {
-solid: {
-bg: "colorPalette.9";
-color: "colorPalette.contrast";
-_hover: {
-bg: "colorPalette.10";
-};
-_expanded: {
-bg: "colorPalette.10";
-};
-};
-subtle: {
-bg: "colorPalette.3";
-color: "colorPalette.11";
-_hover: {
-bg: "colorPalette.4";
-};
-_expanded: {
-bg: "colorPalette.4";
-};
-};
-outline: {
-borderWidth: "1px";
-borderColor: "colorPalette.7";
-color: "colorPalette.11";
-transitionProperty: "background-color, border-color, color";
-transitionDuration: "moderate";
-_hover: {
-bg: "colorPalette.3";
-borderColor: "colorPalette.8";
-};
-_expanded: {
-bg: "colorPalette.subtle";
-};
-};
-ghost: {
-color: "colorPalette.11";
-_hover: {
-bg: "colorPalette.4";
-};
-_expanded: {
-bg: "colorPalette.4";
-};
-};
-link: {
-color: "colorPalette.11";
-_hover: {
-textDecoration: "underline";
-};
-};
-};
-tone: {
-primary: {
-colorPalette: "primary";
-};
-critical: {
-colorPalette: "critical";
-};
-neutral: {
-colorPalette: "neutral";
-};
-info: {
-colorPalette: "info";
-};
-};
-}>;
-
 /**
  * Base recipe props interface that combines Chakra UI's recipe props
  * with the unstyled prop option for the button element.
  */
-declare interface ButtonRecipeProps extends RecipeProps<typeof buttonRecipe>, UnstyledProp {
+declare interface ButtonRecipeProps extends RecipeProps<"typeof buttonRecipe">, UnstyledProp {
 }
 
 /**
@@ -607,7 +541,10 @@ declare interface ButtonRootProps extends HTMLChakraProps<"button", ButtonRecipe
 }
 
 export declare const Card: {
-    Root: ForwardRefExoticComponent<CardProps_2 & RefAttributes<HTMLDivElement>>;
+    Root: {
+        ({ children, ref, ...props }: CardProps_2): JSX.Element;
+        displayName: string;
+    };
     Header: {
         ({ children, ...props }: CardHeaderProps_2): null;
         displayName: string;
@@ -641,6 +578,7 @@ declare interface CardHeaderProps extends HTMLChakraProps<"div", CardRecipeProps
  */
 export declare interface CardProps extends CardVariantProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 /**
@@ -703,7 +641,10 @@ backgroundColor: "colorPalette.2";
 declare interface CardRecipeProps extends RecipeProps<"div">, UnstyledProp {
 }
 
-export declare const CardRoot: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+export declare const CardRoot: {
+    ({ children, ref, ...props }: CardProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Root props interface that extends Chakra's HTML props with our recipe props.
@@ -735,7 +676,10 @@ declare type CardVariantProps = CardRootProps & RecipeVariantProps<typeof cardRe
  * - allows overriding styles by using style-props
  * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
  */
-export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: {
+    (props: CheckboxProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Main props interface for the Checkbox component.
@@ -744,6 +688,7 @@ export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttr
  */
 export declare interface CheckboxProps extends CheckboxVariantProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLInputElement>;
 }
 
 declare interface CheckboxRootProps extends HTMLChakraProps<"label", RecipeVariantProps<typeof checkboxSlotRecipe>> {
@@ -792,32 +737,59 @@ declare interface ColorModeProviderProps extends ThemeProviderProps {
 }
 
 export declare const ComboBox: {
-    Root: <T extends object>(props: ComboBoxRootProps_2<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
-    Options: <T extends object>(props: ComboBoxOptionProps_2<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
+    Root: {
+        <T extends object>({ children, ref, ...props }: ComboBoxRootProps_2<T>): JSX.Element;
+        displayName: string;
+    };
+    Options: {
+        <T extends object>({ children, ref, ...props }: ComboBoxOptionProps_2<T>): JSX.Element;
+        displayName: string;
+    };
     OptionGroup: {
         <T extends object>({ children, label, items, ref, ...props }: ComboBoxOptionGroupProps_2<T> & RefAttributes<HTMLDivElement>): JSX.Element;
         displayName: string;
     };
-    Option: <T extends object>(props: ComboBoxOptionProps_2<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
+    Option: {
+        <T extends object>({ children, ref, ...props }: ComboBoxOptionProps_2<T>): JSX.Element;
+        displayName: string;
+    };
 };
 
-declare interface ComboBoxMultiSelect<T extends object> extends Omit<AutocompleteProps, "children">, Omit<GridListProps<T>, "filter"> {
+export declare type ComboBoxButtonGroupProps = {
+    selectedKeys?: ComboBoxMultiSelectRootProps<{}>["selectedKeys"];
+    onSelectionChange?: ComboBoxMultiSelectRootProps<{}>["onSelectionChange"];
+    onInputChange?: ComboBoxMultiSelectRootProps<{}>["onInputChange"];
+};
+
+declare interface ComboBoxMultiSelect<T extends object> extends Omit<AutocompleteProps, "children">, Omit<ListBoxProps<T>, "filter"> {
     defaultFilter?: (textValue: string, inputValue: string) => boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
     isReadOnly?: boolean;
     isRequired?: boolean;
     isInvalid?: boolean;
+    itemID?: string;
+    itemValue?: string;
 }
 
 /** Combined props for the multi select root element (Chakra styles + Aria behavior + Recipe variants). */
 export declare interface ComboBoxMultiSelectRootProps<T extends object> extends Omit<ComboBoxMultiSelectRootSlotProps<T>, "selectionMode">, ComboBoxMultiSelect<T> {
+    ref?: Ref<HTMLDivElement>;
 }
 
 /** Base Chakra styling props for the root `div` slot when multi select*/
 export declare interface ComboBoxMultiSelectRootSlotProps<T extends object> extends HTMLChakraProps<"div", RecipeVariantProps<typeof comboBoxSlotRecipe> & ComboBoxMultiSelect<T>> {
 }
 
+export declare type ComboBoxMultiSelectValueProps<T extends object> = {
+    items: ComboBoxMultiSelectRootProps<T>["items"];
+    itemID: ComboBoxMultiSelectRootProps<T>["itemID"];
+    itemValue: ComboBoxMultiSelectRootProps<T>["itemValue"];
+    selectedKeys: ComboBoxMultiSelectRootProps<T>["selectedKeys"];
+    onSelectionChange: ComboBoxMultiSelectRootProps<T>["onSelectionChange"];
+    ref?: Ref<HTMLDivElement>;
+};
+
 /** Combined props for the tag element (Chakra styles + Aria behavior + Recipe variants). */
 export declare interface ComboBoxOptionGroupProps<T extends object> extends ListBoxSectionProps<T>, Omit<ComboBoxOptionGroupSlotProps, keyof ListBoxSectionProps<T>> {
     label?: ReactNode;
@@ -828,6 +800,7 @@ declare type ComboBoxOptionGroupSlotProps = HTMLChakraProps<"div", RecipeProps<"
 
 /** Combined props for the ListBoxItem element (Chakra styles + Aria behavior + Recipe variants). */
 export declare interface ComboBoxOptionProps<T extends object> extends ListBoxItemProps<T>, Omit<ComboBoxOptionSlotProps, keyof ListBoxItemProps<T>> {
+    ref?: Ref<HTMLDivElement>;
 }
 
 /** Base Chakra styling props for the root `div` slot. */
@@ -835,6 +808,7 @@ declare type ComboBoxOptionSlotProps = HTMLChakraProps<"div", RecipeProps<"div">
 
 /** Combined props for the ListBox element used in Single Select (Chakra styles + Aria behavior + Recipe variants) */
 export declare interface ComboBoxOptionsProps<T extends object> extends ListBoxProps<T>, Omit<ComboBoxOptionsSlotProps, keyof ListBoxProps<T>> {
+    ref?: Ref<HTMLDivElement>;
 }
 
 /** Base Chakra styling props for the root `div` slot. */
@@ -845,6 +819,7 @@ export declare type ComboBoxRootProps<T extends object> = ComboBoxSingleSelectRo
 
 /** Combined props for the single select root element (Chakra styles + Aria behavior + Recipe variants). */
 export declare interface ComboBoxSingleSelectRootProps<T extends object> extends ComboBoxSingleSelectRootSlotProps<T>, ComboBoxWithCustomChildren<T> {
+    ref?: Ref<HTMLDivElement>;
 }
 
 /** Base Chakra styling props for the root `div` slot when single select*/
@@ -921,37 +896,35 @@ none: {};
 /** ComboBox with overridden children prop based on expected dom structure. */
 declare type ComboBoxWithCustomChildren<T extends object> = Omit<ComboBoxProps<T>, "children"> & {
     isLoading?: boolean;
-    children: ReactNode | ((item: T) => React.ReactNode);
-};
-
-export declare const DialogActionTrigger: ForwardRefExoticComponent<Dialog.ActionTriggerProps & RefAttributes<HTMLButtonElement>>;
-
-export declare const DialogBackdrop: ForwardRefExoticComponent<Dialog.BackdropProps & RefAttributes<HTMLDivElement>>;
-
-export declare const DialogBody: ForwardRefExoticComponent<Dialog.BodyProps & RefAttributes<HTMLDivElement>>;
-
-export declare const DialogCloseTrigger: ForwardRefExoticComponent<Dialog.CloseTriggerProps & RefAttributes<HTMLButtonElement>>;
+    children: ReactNode | ((item: T) => default_2.ReactNode);
+};
+
+export declare const Dialog: DialogComponents;
+
+declare interface DialogComponents {
+    Root: typeof Dialog_2.Root;
+    Trigger: typeof Dialog_2.Trigger;
+    Content: typeof DialogContent;
+    Backdrop: typeof Dialog_2.Backdrop;
+    Positioner: typeof Dialog_2.Positioner;
+    Title: typeof Dialog_2.Title;
+    Description: typeof Dialog_2.Description;
+    Body: typeof Dialog_2.Body;
+    Footer: typeof Dialog_2.Footer;
+    Header: typeof Dialog_2.Header;
+    CloseTrigger: typeof Dialog_2.CloseTrigger;
+    ActionTrigger: typeof Dialog_2.ActionTrigger;
+}
 
-export declare const DialogContent: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;
+declare const DialogContent: (props: DialogContentProps) => JSX.Element;
 
-declare interface DialogContentProps extends Dialog.ContentProps {
+declare interface DialogContentProps extends Dialog_2.ContentProps {
     portalled?: boolean;
     portalRef?: React.RefObject<HTMLElement>;
     backdrop?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
-export declare const DialogDescription: ForwardRefExoticComponent<Dialog.DescriptionProps & RefAttributes<HTMLDivElement>>;
-
-export declare const DialogFooter: ForwardRefExoticComponent<Dialog.FooterProps & RefAttributes<HTMLDivElement>>;
-
-export declare const DialogHeader: ForwardRefExoticComponent<Dialog.HeaderProps & RefAttributes<HTMLDivElement>>;
-
-export declare const DialogRoot: FC<Dialog.RootProps>;
-
-export declare const DialogTitle: ForwardRefExoticComponent<Dialog.TitleProps & RefAttributes<HTMLDivElement>>;
-
-export declare const DialogTrigger: ForwardRefExoticComponent<Dialog.TriggerProps & RefAttributes<HTMLButtonElement>>;
-
 export declare type DisclosureGroupProps = AccordionProps & {
     children: ReactNode;
     ref?: RefAttributes<HTMLButtonElement>;
@@ -972,6 +945,11 @@ export declare type DisclosureItemProps = AccordionItemProps & {
 
 export { Em }
 
+/**
+ * List of props that should be excluded from the root props when combining with ARIA props
+ */
+declare type ExcludedSwitchProps = "asChild" | "isIndeterminate" | "colorScheme" | "validationState" | "validationBehavior" | "validate";
+
 /**
  * For use in components that use the polymorphic `as` and `asChild` props
  * internally, but do not make them available to the consumer.
@@ -1111,7 +1089,10 @@ declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, key
     [key: `data-${string}`]: unknown;
 };
 
-export declare const Grid: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> & {
+export declare const Grid: {
+    (props: GridProps): JSX.Element;
+    displayName: string;
+} & {
     Item: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
 };
 
@@ -1126,6 +1107,7 @@ export declare const Grid: ForwardRefExoticComponent<GridProps & RefAttributes<H
  */
 export declare interface GridProps extends GridProps_2 {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 export { Heading }
@@ -1136,7 +1118,10 @@ export { Highlight_2 as Highlight }
  * Icon
  * displays icon components
  */
-export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+export declare const Icon: {
+    (props: IconProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * IconButton
@@ -1144,7 +1129,10 @@ export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<S
  * displays a button with only an icon as child. It is based
  * on the regular `Button` component, but with a few adjustments.
  */
-export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: {
+    (props: IconButtonProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Main props interface for the IconButton component.
@@ -1152,6 +1140,7 @@ export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & Ref
 export declare interface IconButtonProps extends ButtonProps {
     /** explains the intended action, required for accessibility */
     "aria-label": string;
+    ref?: React.Ref<HTMLButtonElement>;
 }
 
 /**
@@ -1173,6 +1162,10 @@ export declare interface IconProps extends IconVariantProps {
      * Accepts a React component to be rendered as the icon .
      */
     as?: BoxProps["as"];
+    /**
+     * Ref to the icon element
+     */
+    ref?: React.Ref<SVGSVGElement>;
 }
 
 /**
@@ -1232,7 +1225,10 @@ declare type IconVariantProps = Omit<IconRootSlotProps, keyof React.SVGProps<SVG
  *
  * Use this component to display an image.
  */
-declare const Image_2: ForwardRefExoticComponent<ImageProps & RefAttributes<HTMLImageElement>>;
+declare const Image_2: {
+    (props: ImageProps): JSX.Element;
+    displayName: string;
+};
 export { Image_2 as Image }
 
 export declare interface ImageProps extends ImageProps_2 {
@@ -1253,7 +1249,10 @@ export { Kbd }
  * - allows overriding styles by using style-props
  * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
  */
-export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+export declare const Link: {
+    (props: LinkProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Main props interface for the Link component.
@@ -1262,6 +1261,7 @@ export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<H
  */
 export declare interface LinkProps extends LinkVariantProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement>;
 }
 
 /**
@@ -1315,7 +1315,7 @@ declare type LinkRootProps = HTMLChakraProps<"a", LinkRecipeProps>;
  * Differences between LinkRootProps and LinkVariantProps necessitate
  * the use of Omit and Pick to ensure the correct props are passed
  */
-declare type LinkVariantProps = Omit<LinkRootProps, "onFocus" | "onBlur"> & Pick<AriaLinkOptions, "onFocus" | "onBlur"> & RecipeVariantProps<typeof linkRecipe> & {
+declare type LinkVariantProps = Omit<LinkRootProps, "onFocus" | "onBlur" | "onClick"> & Pick<AriaLinkOptions, "onFocus" | "onBlur" | "onClick"> & RecipeVariantProps<typeof linkRecipe> & {
     [key: `data-${string}`]: string;
 };
 
@@ -1334,19 +1334,19 @@ export declare type ListRootType = React.ComponentProps<typeof List.Root>;
  * ============================================================
  * Indicates ongoing processes or loading states
  */
-export declare const LoadingSpinner: ForwardRefExoticComponent<LoadingSpinnerRootProps & {
-size?: ConditionalValue<"sm" | "md" | "lg" | "2xs" | "xs" | undefined>;
-tone?: ConditionalValue<"white" | "primary" | undefined>;
-} & {
-[key: `data-${string}`]: string;
-} & RefAttributes<HTMLDivElement>>;
+export declare const LoadingSpinner: {
+    (props: LoadingSpinnerProps): JSX.Element;
+    displayName: string;
+};
 
 /**
  * Main props interface for the LoadingSpinner component.
  * Extends LoadingSpinnerVariantProps to include both root props and variant props,
  * while adding support for React children.
  */
-export declare type LoadingSpinnerProps = LoadingSpinnerVariantProps;
+export declare type LoadingSpinnerProps = LoadingSpinnerVariantProps & {
+    ref?: React.Ref<HTMLDivElement>;
+};
 
 /**
  * Recipe configuration for the LoadingSpinner component.
@@ -1397,7 +1397,7 @@ declare interface LoadingSpinnerRecipeProps extends RecipeProps<"div">, Unstyled
  * This creates a complete set of props for the root element, combining
  * HTML attributes, Chakra's styling system, and our custom recipe props.
  */
-declare type LoadingSpinnerRootProps_2 = Omit<HTMLChakraProps<"div", LoadingSpinnerRecipeProps>, "as" | "asChild">;
+declare type LoadingSpinnerRootProps = Omit<HTMLChakraProps<"div", LoadingSpinnerRecipeProps>, "as" | "asChild">;
 
 /**
  * Combines the root props with Chakra UI's recipe variant props and Aria's progress bar props.
@@ -1405,7 +1405,7 @@ declare type LoadingSpinnerRootProps_2 = Omit<HTMLChakraProps<"div", LoadingSpin
  * This allows the component to accept both structural props from Root
  * and styling variants from the recipe.
  */
-declare type LoadingSpinnerVariantProps = LoadingSpinnerRootProps_2 & RecipeVariantProps<typeof loadingSpinnerRecipe> & {
+declare type LoadingSpinnerVariantProps = LoadingSpinnerRootProps & RecipeVariantProps<typeof loadingSpinnerRecipe> & {
     [key: `data-${string}`]: string;
 };
 
@@ -1435,16 +1435,63 @@ children?: ReactNode | undefined;
 
 export declare function NimbusProvider({ children, ...props }: ColorModeProviderProps): JSX.Element;
 
+/**
+ * PasswordInput
+ * ============================================================
+ * An input component that takes in password as input with toggleable visibility
+ *
+ * Features:
+ *
+ * - Based on TextInput with added password visibility toggle
+ * - Allows toggling between type="password" and type="text"
+ * - Positions the toggle button at the right edge of the input
+ * - Inherits all TextInput features and props
+ */
+export declare const PasswordInput: ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & RefAttributes<HTMLInputElement>>;
+
+/**
+ * Interface for PasswordInput component props
+ * Extends TextInputProps but omits the type prop since it's controlled internally
+ * We want to keep this as an explicit interface to allow for future additions
+ */
+export declare interface PasswordInputProps extends Omit<TextInputProps, "type"> {
+}
+
 export declare const Select: {
     Root: ForwardRefExoticComponent<SelectRootProps_2 & RefAttributes<HTMLDivElement>>;
-    Options: <T extends object>(props: SelectOptionsProps_2<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
-    Option: <T extends object>(props: SelectOptionProps_2<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
-    OptionGroup: <T extends object>(props: SelectOptionGroupProps_2<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
+    Options: {
+        <T extends object>(props: SelectOptionsProps_2<T> & {
+            ref?: React.Ref<HTMLDivElement>;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        <T extends object>(props: SelectOptionProps_2<T> & {
+            ref?: React.Ref<HTMLDivElement>;
+        }): JSX.Element;
+        displayName: string;
+    };
+    OptionGroup: {
+        <T extends object>(props: SelectOptionGroupProps_2<T> & {
+            ref?: React.Ref<HTMLDivElement>;
+        }): JSX.Element;
+        displayName: string;
+    };
 };
 
-export declare const _SelectOption: <T extends object>(props: SelectOptionProps<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
+export declare const _SelectOption: {
+    <T extends object>(props: SelectOptionProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
 
-export declare const _SelectOptionGroup: <T extends object>(props: SelectOptionGroupProps<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
+export declare const _SelectOptionGroup: {
+    <T extends object>(props: SelectOptionGroupProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
 
 export declare interface SelectOptionGroupProps<T> extends ListBoxSectionProps<T>, Omit<SelectOptionGroupSlotProps, keyof ListBoxSectionProps<T>> {
     /** the label for the section */
@@ -1457,7 +1504,12 @@ declare interface SelectOptionGroupSlotProps extends HTMLChakraProps<"div"> {
 export declare interface SelectOptionProps<T> extends Omit<ListBoxItemProps<T>, keyof SelectOptionSlotProps>, SelectOptionSlotProps {
 }
 
-export declare const _SelectOptions: <T extends object>(props: SelectOptionsProps<T> & RefAttributes<HTMLDivElement>) => JSX_2.Element;
+export declare const _SelectOptions: {
+    <T extends object>(props: SelectOptionsProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
 
 declare interface SelectOptionSlotProps extends HTMLChakraProps<"div"> {
 }
@@ -1531,7 +1583,10 @@ trigger: {
 };
 }>;
 
-export declare const SimpleGrid: ForwardRefExoticComponent<SimpleGridProps & RefAttributes<HTMLDivElement>> & {
+export declare const SimpleGrid: {
+    (props: SimpleGridProps): JSX.Element;
+    displayName: string;
+} & {
     Item: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
 };
 
@@ -1546,53 +1601,85 @@ export declare const SimpleGrid: ForwardRefExoticComponent<SimpleGridProps & Ref
  */
 export declare interface SimpleGridProps extends SimpleGridProps_2 {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
-export declare const Stack: ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>;
+export declare const Stack: {
+    (props: StackProps): JSX.Element;
+    displayName: string;
+};
 
 export declare interface StackProps extends StackProps_2 {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
-export declare const system: SystemContext;
-
-export { Table }
-
-export declare const TableBody: (props: TableBodyProps) => JSX.Element;
-
-export declare type TableBodyProps = React.ComponentProps<typeof Table.Body>;
-
-export declare const TableCell: (props: TableCellProps) => JSX.Element;
-
-export declare type TableCellProps = React.ComponentProps<typeof Table.Cell>;
-
-export declare const TableColumn: (props: TableColumnProps) => JSX.Element;
-
-export declare const TableColumnGroup: (props: TableColumnGroupProps) => JSX.Element;
-
-export declare type TableColumnGroupProps = React.ComponentProps<typeof Table.ColumnGroup>;
-
-export declare const TableColumnHeader: (props: TableColumnHeaderProps) => JSX.Element;
-
-export declare type TableColumnHeaderProps = React.ComponentProps<typeof Table.ColumnHeader>;
-
-export declare type TableColumnProps = React.ComponentProps<typeof Table.Column>;
-
-export declare const TableFooter: (props: TableFooterProps) => JSX.Element;
-
-export declare type TableFooterProps = React.ComponentProps<typeof Table.Footer>;
-
-export declare const TableHeader: (props: TableHeaderProps) => JSX.Element;
+/**
+ * Switch
+ * ============================================================
+ * displays a switch toggle and optionally an associated label
+ */
+export declare const Switch: {
+    ({ ref: externalRef, ...props }: SwitchProps): JSX.Element;
+    displayName: string;
+};
 
-export declare type TableHeaderProps = React.ComponentProps<typeof Table.Header>;
+/**
+ * Main props interface for the Switch component.
+ * Combines root element props with ARIA toggle functionality props.
+ */
+export declare type SwitchProps = Omit<SwitchRootProps, ExcludedSwitchProps | "onChange"> & Omit<AriaCheckboxProps, ExcludedSwitchProps> & {
+    /**
+     * The content to display next to the switch.
+     * Can be a string or React node.
+     */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLInputElement>;
+};
 
-export declare const TableRoot: (props: TableRootProps) => JSX.Element;
+/**
+ * Props for the Switch component root element.
+ * Includes all HTML props for the label element and recipe variant props.
+ */
+declare interface SwitchRootProps extends HTMLChakraProps<"label", RecipeVariantProps<typeof switchSlotRecipe>> {
+}
 
-export declare type TableRootProps = React.ComponentProps<typeof Table.Root>;
+/**
+ * Recipe configuration for the Switch component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const switchSlotRecipe: SlotRecipeDefinition<"label" | "track" | "root" | "thumb", {
+size: {
+sm: {
+track: {
+"--track-height": "sizes.400";
+"--track-width": "sizes.700";
+};
+thumb: {
+"--thumb-size": "sizes.400";
+};
+label: {
+"--label-font-size": "fontSizes.350";
+};
+};
+md: {
+track: {
+"--track-height": "sizes.600";
+"--track-width": "sizes.1100";
+};
+thumb: {
+"--thumb-size": "sizes.600";
+};
+label: {
+"--label-font-size": "fontSizes.400";
+};
+};
+};
+}>;
 
-export declare const TableRow: (props: TableRowProps) => JSX.Element;
+export declare const system: SystemContext;
 
-export declare type TableRowProps = React.ComponentProps<typeof Table.Row>;
+export { Table }
 
 /**
  * TagGroup
@@ -1610,10 +1697,12 @@ export declare const TagGroup: {
 };
 
 /** Final external props for the `<TagGroup>` component, including `children`. */
-export declare type TagGroupProps = PropsWithChildren<TagGroupRootProps>;
+export declare type TagGroupProps = PropsWithChildren<TagGroupRootProps> & {
+    ref?: React.Ref<typeof TagGroup_2>;
+};
 
-/** Type signature for the main `TagGroup` component (using `forwardRef`). */
-export declare type TagGroupRootComponent = FC<TagGroupRootProps & RefAttributes<typeof TagGroup_2>>;
+/** Type signature for the main `TagGroup` component. */
+export declare type TagGroupRootComponent = FC<TagGroupProps>;
 
 /** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
 declare type TagGroupRootProps = TagGroupRootSlotProps & TagGroupProps_2 & RecipeVariantProps<typeof tagGroupSlotRecipe>;
@@ -1651,20 +1740,24 @@ padding: "200";
 };
 }>;
 
-/** Type signature for the `TagGroup.Tag` sub-component (using `forwardRef`). */
-export declare type TagGroupTagComponent = FC<TagGroupTagProps & RefAttributes<typeof Tag>>;
+/** Type signature for the `TagGroup.Tag` sub-component. */
+export declare type TagGroupTagComponent = FC<TagGroupTagProps>;
 
-/** Type signature for the `TagGroup.TagList` sub-component (using `forwardRef`). */
-export declare type TagGroupTagListComponent<T extends object> = FC<TagGroupTagListProps<T> & RefAttributes<HTMLDivElement>>;
+/** Type signature for the `TagGroup.TagList` sub-component. */
+export declare type TagGroupTagListComponent<T extends object> = FC<TagGroupTagListProps<T>>;
 
 /** Combined props for the tagList element (Chakra styles + Aria behavior + Recipe variants). */
-export declare type TagGroupTagListProps<T extends object> = TagListProps<T> & Omit<TagGroupTagListSlotProps, keyof TagListProps<T>>;
+export declare type TagGroupTagListProps<T extends object> = TagListProps<T> & Omit<TagGroupTagListSlotProps, keyof TagListProps<T>> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
 
 /** Base Chakra styling props for the root `div` slot. */
 declare type TagGroupTagListSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
 /** Combined props for the tag element (Chakra styles + Aria behavior + Recipe variants). */
-export declare type TagGroupTagProps = TagProps & Omit<TagGroupTagSlotProps, keyof TagProps>;
+export declare type TagGroupTagProps = TagProps & Omit<TagGroupTagSlotProps, keyof TagProps> & {
+    ref?: React.Ref<typeof Tag>;
+};
 
 /** Base Chakra styling props for the root `div` slot. */
 declare type TagGroupTagSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
@@ -1677,7 +1770,10 @@ declare type TagGroupTagSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
  *
  * @see https://DOMAIN/components/typography/text
  */
-declare const Text_2: ForwardRefExoticComponent<TextProps & RefAttributes<HTMLParagraphElement>>;
+declare const Text_2: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
 export { Text_2 as Text }
 
 /**
@@ -1692,9 +1788,13 @@ export { Text_2 as Text }
  * - supports 'variants', 'sizes', etc. configured in the recipe
  * - allows overriding styles by using style-props
  */
-export declare const TextInput: ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>>;
+export declare const TextInput: {
+    (props: TextInputProps): JSX.Element;
+    displayName: string;
+};
 
 export declare interface TextInputProps extends TextFieldProps, Omit<TextInputRootSlotProps, keyof TextFieldProps | "as" | "asChild"> {
+    ref?: React.Ref<HTMLInputElement>;
 }
 
 /**
@@ -1737,6 +1837,7 @@ declare interface TextInputRecipeProps extends RecipeVariantProps<typeof textInp
 declare type TextInputRootSlotProps = HTMLChakraProps<"input", TextInputRecipeProps>;
 
 export declare interface TextProps extends TextProps_2 {
+    ref?: React.Ref<HTMLParagraphElement>;
 }
 
 /**
@@ -1751,22 +1852,26 @@ export declare const ToggleButtonGroup: {
 
 export declare const ToggleButtonGroupButton: ToggleButtonGroupButtonComponent;
 
-/** Type signature for the `ToggleButtonGroup.Button` sub-component (using `forwardRef`). */
-export declare type ToggleButtonGroupButtonComponent = ForwardRefExoticComponent<ToggleButtonGroupButtonProps & RefAttributes<typeof ToggleButton>>;
+/** Type signature for the `ToggleButtonGroup.Button` sub-component. */
+export declare type ToggleButtonGroupButtonComponent = React.FC<ToggleButtonGroupButtonProps>;
 
 /** Combined props for the button element (Chakra styles + Aria behavior). */
-export declare type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps & AriaToggleButtonProps;
+export declare type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps & AriaToggleButtonProps & {
+    ref?: React.Ref<typeof ToggleButton>;
+};
 
 /** Base Chakra styling props for the `button` slot. */
 declare type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<"button", RecipeProps<"button">>;
 
 /** Final external props for the `<ToggleButtonGroup>` component, including `children`. */
-export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroupRootProps>;
+export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroupRootProps> & {
+    ref?: React.Ref<typeof ToggleButtonGroup_2>;
+};
 
 export declare const ToggleButtonGroupRoot: ToggleButtonGroupRootComponent;
 
-/** Type signature for the main `ToggleButtonGroup` component (using `forwardRef`). */
-export declare type ToggleButtonGroupRootComponent = ForwardRefExoticComponent<ToggleButtonGroupProps & RefAttributes<typeof ToggleButtonGroup_2>>;
+/** Type signature for the main `ToggleButtonGroup` component. */
+export declare type ToggleButtonGroupRootComponent = React.FC<ToggleButtonGroupProps>;
 
 /** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
 declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaToggleButtonGroupProps & RecipeVariantProps<typeof buttonGroupRecipe>;