@commercetools/nimbus 0.0.7-rc11 → 0.0.7-rc13

package/dist/index.d.ts

@@ -9,15 +9,20 @@ import { AriaCheckboxProps } from 'react-aria';
 import { AriaLinkOptions } from 'react-aria';
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { AriaToggleButtonProps } from 'react-aria';
+import { AutocompleteProps } from 'react-aria-components';
 import { Bleed } from '@chakra-ui/react';
 import { CardContentProps as CardContentProps_2 } from './card.slots';
 import { CardHeaderProps as CardHeaderProps_2 } from './card.slots';
 import { CardProps as CardProps_2 } from './card.types';
 import { Code } from '@chakra-ui/react';
-import { ConditionalValue } from '@chakra-ui/react';
+import { ComboBoxOptionGroupProps as ComboBoxOptionGroupProps_2 } from './combobox.types';
+import { ComboBoxOptionProps as ComboBoxOptionProps_2 } from './combobox.types';
+import { ComboBoxProps } from 'react-aria-components';
+import { ComboBoxRootProps as ComboBoxRootProps_2 } from './combobox.types';
 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';
@@ -35,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';
@@ -51,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';
@@ -194,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;
 
@@ -209,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>;
 };
 
 /**
@@ -252,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> {
     /**
@@ -291,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<    {
@@ -332,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.
@@ -341,6 +380,7 @@ export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes
  */
 export declare interface BadgeProps extends BadgeVariantProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
 }
 
 /**
@@ -411,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.
@@ -475,13 +522,14 @@ colorPalette: "neutral";
 }>;
 
 export declare interface ButtonProps extends FunctionalButtonProps {
+    ref?: React.Ref<HTMLButtonElement>;
 }
 
 /**
  * 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<"button">, UnstyledProp {
+declare interface ButtonRecipeProps extends RecipeProps<"typeof buttonRecipe">, UnstyledProp {
 }
 
 /**
@@ -489,10 +537,14 @@ declare interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp
  * 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 ButtonRootProps = HTMLChakraProps<"button", ButtonRecipeProps>;
+declare interface ButtonRootProps extends HTMLChakraProps<"button", ButtonRecipeProps> {
+}
 
 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;
@@ -526,6 +578,7 @@ declare interface CardHeaderProps extends HTMLChakraProps<"div", CardRecipeProps
  */
 export declare interface CardProps extends CardVariantProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 /**
@@ -588,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.
@@ -620,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.
@@ -629,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>> {
@@ -676,33 +736,194 @@ export declare function ColorModeLabel(): "Light Theme" | "DarkTheme";
 declare interface ColorModeProviderProps extends ThemeProviderProps {
 }
 
-export declare const DialogActionTrigger: ForwardRefExoticComponent<Dialog.ActionTriggerProps & RefAttributes<HTMLButtonElement>>;
+export declare const ComboBox: {
+    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>({ children, ref, ...props }: ComboBoxOptionProps_2<T>): JSX.Element;
+        displayName: string;
+    };
+};
 
-export declare const DialogBackdrop: ForwardRefExoticComponent<Dialog.BackdropProps & RefAttributes<HTMLDivElement>>;
+export declare type ComboBoxButtonGroupProps = {
+    selectedKeys?: ComboBoxMultiSelectRootProps<{}>["selectedKeys"];
+    onSelectionChange?: ComboBoxMultiSelectRootProps<{}>["onSelectionChange"];
+    onInputChange?: ComboBoxMultiSelectRootProps<{}>["onInputChange"];
+};
 
-export declare const DialogBody: ForwardRefExoticComponent<Dialog.BodyProps & RefAttributes<HTMLDivElement>>;
+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;
+}
 
-export declare const DialogCloseTrigger: ForwardRefExoticComponent<Dialog.CloseTriggerProps & RefAttributes<HTMLButtonElement>>;
+/** 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>;
+}
 
-export declare const DialogContent: ForwardRefExoticComponent<DialogContentProps & RefAttributes<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>> {
+}
 
-declare interface DialogContentProps extends Dialog.ContentProps {
-    portalled?: boolean;
-    portalRef?: React.RefObject<HTMLElement>;
-    backdrop?: boolean;
+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;
+}
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type ComboBoxOptionGroupSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+/** 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. */
+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>;
 }
 
-export declare const DialogDescription: ForwardRefExoticComponent<Dialog.DescriptionProps & RefAttributes<HTMLDivElement>>;
+/** Base Chakra styling props for the root `div` slot. */
+export declare interface ComboBoxOptionsSlotProps extends HTMLChakraProps<"div", RecipeProps<"options">> {
+}
+
+export declare type ComboBoxRootProps<T extends object> = ComboBoxSingleSelectRootProps<T> | ComboBoxMultiSelectRootProps<T>;
 
-export declare const DialogFooter: ForwardRefExoticComponent<Dialog.FooterProps & RefAttributes<HTMLDivElement>>;
+/** 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>;
+}
 
-export declare const DialogHeader: ForwardRefExoticComponent<Dialog.HeaderProps & RefAttributes<HTMLDivElement>>;
+/** Base Chakra styling props for the root `div` slot when single select*/
+export declare interface ComboBoxSingleSelectRootSlotProps<T extends object> extends HTMLChakraProps<"div", RecipeVariantProps<typeof comboBoxSlotRecipe> & ComboBoxWithCustomChildren<T>> {
+}
+
+/**
+ * Recipe configuration for the Combobox component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const comboBoxSlotRecipe: SlotRecipeDefinition<"option" | "value" | "root" | "options" | "optionGroup" | "buttonGroup", {
+size: {
+sm: {
+value: {
+paddingRight: "1600";
+h?: "800" | undefined;
+px?: "400" | undefined;
+textStyle?: "sm" | undefined;
+};
+};
+md: {
+value: {
+paddingRight: "1600";
+h?: "1000" | undefined;
+px?: "400" | undefined;
+textStyle?: "md" | undefined;
+};
+};
+};
+variant: {
+solid: {
+root: {
+bg?: "bg" | undefined;
+"&:hover"?: {
+bg: "primary.2";
+} | undefined;
+};
+value: {
+"--border-width"?: "sizes.25" | undefined;
+"--border-color"?: "colors.neutral.7" | undefined;
+};
+};
+ghost: {
+root: {
+bg?: "transparent" | undefined;
+"&:hover"?: {
+bg: "primaryAlpha.2";
+} | undefined;
+};
+value: {
+"--border-width"?: "sizes.25" | undefined;
+"--border-color"?: "transparent" | undefined;
+};
+};
+};
+selectionMode: {
+multiple: {
+option: {
+"--border-width": "sizes.25";
+"--border-color": "colors.neutral.7";
+'&[data-focused="true"], &:hover': {
+boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)";
+};
+'&[aria-selected="true"], &[data-focused="true"]': {
+bg: "inherit";
+};
+};
+};
+single: {};
+none: {};
+};
+}>;
 
-export declare const DialogRoot: FC<Dialog.RootProps>;
+/** 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) => 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 DialogTitle: ForwardRefExoticComponent<Dialog.TitleProps & RefAttributes<HTMLDivElement>>;
+declare const DialogContent: (props: DialogContentProps) => JSX.Element;
 
-export declare const DialogTrigger: ForwardRefExoticComponent<Dialog.TriggerProps & RefAttributes<HTMLButtonElement>>;
+declare interface DialogContentProps extends Dialog_2.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    backdrop?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
 
 export declare type DisclosureGroupProps = AccordionProps & {
     children: ReactNode;
@@ -724,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.
@@ -863,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>>;
 };
 
@@ -878,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 }
@@ -888,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
@@ -896,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.
@@ -904,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>;
 }
 
 /**
@@ -925,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>;
 }
 
 /**
@@ -984,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 {
@@ -1005,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.
@@ -1014,6 +1261,7 @@ export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<H
  */
 export declare interface LinkProps extends LinkVariantProps {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement>;
 }
 
 /**
@@ -1067,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;
 };
 
@@ -1086,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.
@@ -1149,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.
@@ -1157,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;
 };
 
@@ -1187,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 */
@@ -1209,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"> {
 }
@@ -1283,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>>;
 };
 
@@ -1298,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
@@ -1362,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>;
@@ -1403,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">>;
@@ -1429,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 }
 
 /**
@@ -1444,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>;
 }
 
 /**
@@ -1489,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>;
 }
 
 /**
@@ -1503,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>;