@commercetools/nimbus 0.0.10 → 0.0.12-rc1

package/dist/components.d.ts

@@ -13,6 +13,7 @@ import { AriaProgressBarProps } from 'react-aria';
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { AriaToggleButtonProps } from 'react-aria';
 import { AutocompleteProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps_2 } from 'react-aria-components';
 import { CalendarProps as CalendarProps_2 } from 'react-aria-components';
 import { CardContentProps } from './card.slots';
 import { CardHeaderProps } from './card.slots';
@@ -25,15 +26,16 @@ import { ComboBoxRootProps as ComboBoxRootProps_2 } from './combobox.types';
 import { ComponentProps } from 'react';
 import { DateFieldProps } from 'react-aria-components';
 import { DatePickerStateOptions } from 'react-stately';
+import { DateRangePickerProps as DateRangePickerProps_2 } from 'react-aria-components';
 import { DateValue } from 'react-aria';
 import { DateValue as DateValue_2 } from '@internationalized/date';
 import { default as default_2 } from 'react';
 import { DetailedHTMLProps } from 'react';
-import { Dialog as Dialog_2 } from '@chakra-ui/react';
+import { Dialog as Dialog_2 } from '@chakra-ui/react/dialog';
 import { DisclosureGroupProps as DisclosureGroupProps_2 } from './accordion.types';
 import { DisclosureProps } from 'react-aria-components';
 import { FC } from 'react';
-import { Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react/flex';
 import { FocusableOptions } from 'react-aria';
 import { FormFieldDescriptionSlotProps } from './form-field.slots';
 import { FormFieldErrorSlotProps } from './form-field.slots';
@@ -42,30 +44,44 @@ import { FormFieldLabelSlotProps } from './form-field.slots';
 import { FormFieldProps as FormFieldProps_2 } from './form-field.types';
 import { ForwardRefExoticComponent } from 'react';
 import { GridItemProps } from '@chakra-ui/react';
-import { GridProps as GridProps_2 } from '@chakra-ui/react';
-import { Heading } from '@chakra-ui/react';
+import { GridProps as GridProps_2 } from '@chakra-ui/react/grid';
+import { Heading } from '@chakra-ui/react/typography';
 import { HTMLAttributes } from 'react';
-import { HTMLChakraProps } from '@chakra-ui/react';
-import { ImageProps as ImageProps_2 } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { ImageProps as ImageProps_2 } from '@chakra-ui/react/image';
 import { JSX } from 'react/jsx-runtime';
 import { JsxStyleProps } from '@chakra-ui/react';
-import { KbdProps } from '@chakra-ui/react';
-import { List as List_2 } from '@chakra-ui/react';
+import { KbdProps as KbdProps_2 } from '@chakra-ui/react/kbd';
+import { List as List_2 } from '@chakra-ui/react/list';
 import { ListBoxItemProps } from 'react-aria-components';
 import { ListBoxProps } from 'react-aria-components';
 import { ListBoxSectionProps } from 'react-aria-components';
 import { ListIndicatorProps } from '@chakra-ui/react';
+import { MenuContentProps as MenuContentProps_2 } from './menu.types';
+import { MenuItemProps as MenuItemProps_2 } from './menu.types';
+import { MenuItemProps as MenuItemProps_3 } from 'react-aria-components';
+import { MenuProps } from 'react-aria-components';
+import { MenuRootProps as MenuRootProps_2 } from './menu.types';
+import { MenuSectionProps as MenuSectionProps_2 } from './menu.types';
+import { MenuSectionProps as MenuSectionProps_3 } from 'react-aria-components';
+import { MenuSeparatorProps as MenuSeparatorProps_2 } from './menu.types';
+import { MenuSubmenuProps as MenuSubmenuProps_2 } from './menu.types';
+import { MenuSubmenuTriggerProps as MenuSubmenuTriggerProps_2 } from './menu.types';
+import { MenuTriggerProps as MenuTriggerProps_2 } from './menu.types';
+import { MenuTriggerProps as MenuTriggerProps_3 } from 'react-aria-components';
 import { PatchHtmlProps } from '@chakra-ui/react';
 import { PolymorphicProps } from '@chakra-ui/react';
+import { PopoverProps } from 'react-aria-components';
 import { PropsWithChildren } from 'react';
 import { RadioGroupProps as RadioGroupProps_2 } from 'react-aria-components';
 import { RadioInputOptionProps as RadioInputOptionProps_2 } from './radio-input.types';
 import { RadioInputRootProps as RadioInputRootProps_2 } from './radio-input.types';
 import { RadioProps } from 'react-aria-components';
+import { RangeCalendarProps as RangeCalendarProps_2 } from 'react-aria-components';
 import { ReactNode } from 'react';
 import { RecipeDefinition } from '@chakra-ui/react';
-import { RecipeProps } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react/styled-system';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { RecipeVariantRecord } from '@chakra-ui/react';
 import { Ref } from 'react';
 import { RefAttributes } from 'react';
@@ -76,11 +92,13 @@ import { SelectOptionsProps as SelectOptionsProps_2 } from './select.types';
 import { SelectProps } from 'react-aria-components';
 import { SelectRootProps as SelectRootProps_2 } from './select.types';
 import { SeparatorProps } from 'react-aria';
-import { SimpleGridProps as SimpleGridProps_2 } from '@chakra-ui/react';
+import { SeparatorProps as SeparatorProps_2 } from 'react-aria-components';
+import { SimpleGridProps as SimpleGridProps_2 } from '@chakra-ui/react/grid';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
 import { SlotRecipeVariantRecord } from '@chakra-ui/react';
-import { StackProps as StackProps_2 } from '@chakra-ui/react';
-import { Table } from '@chakra-ui/react';
+import { StackProps as StackProps_2 } from '@chakra-ui/react/stack';
+import { SubmenuTriggerProps } from 'react-aria-components';
+import { Table } from '@chakra-ui/react/table';
 import { Tag } from 'react-aria-components';
 import { TagGroup as TagGroup_2 } from 'react-aria-components';
 import { TagGroupProps as TagGroupProps_2 } from 'react-aria-components';
@@ -90,17 +108,18 @@ import { TagGroupTagListProps as TagGroupTagListProps_2 } from './tag-group.type
 import { TagListProps } from 'react-aria-components';
 import { TagProps } from 'react-aria-components';
 import { TextFieldProps } from 'react-aria-components';
-import { TextProps as TextProps_2 } from '@chakra-ui/react';
+import { TextProps as TextProps_2 } from '@chakra-ui/react/typography';
 import { ThemeProviderProps } from 'next-themes';
 import { TimeFieldStateOptions } from 'react-stately';
 import { TimeValue } from 'react-aria';
-import { ToggleButton } from 'react-aria-components';
+import { ToggleButton as ToggleButton_2 } from 'react-aria-components';
 import { ToggleButtonGroup as ToggleButtonGroup_2 } from 'react-aria-components';
 import { ToggleButtonGroupButtonComponent as ToggleButtonGroupButtonComponent_2 } from './toggle-button-group.types';
 import { ToggleButtonGroupRootComponent as ToggleButtonGroupRootComponent_2 } from './toggle-button-group.types';
+import { ToggleButtonProps as ToggleButtonProps_2 } from 'react-aria-components';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
-import { UnstyledProp } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react/styled-system';
 import { useButton } from 'react-aria';
 import { useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
@@ -181,6 +200,13 @@ export declare interface AccordionProps extends Omit<DisclosureProps, "children"
     size?: "sm" | "md";
 }
 
+/**
+ * # Accordion
+ *
+ * Displays an Accordion.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/navigation/accordion}
+ */
 export declare const _AccordionRoot: default_2.ForwardRefExoticComponent<Omit<DisclosureGroupProps, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
 
 export declare type AccordionRootProps = HTMLChakraProps<"div", RecipeVariantProps<typeof accordionSlotRecipe>>;
@@ -324,9 +350,11 @@ borderRadius: "200";
 }>;
 
 /**
- * Alert
- * ============================================================
+ * # Alert
+ *
  * Provides feedback to the user about the status of an action or system event
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/alert}
  */
 export declare const _AlertRoot: AlertRootComponent;
 
@@ -409,17 +437,11 @@ declare interface AvatarRootProps extends HTMLChakraProps<"div", AvatarRecipePro
 }
 
 /**
- * Badge
- * ============================================================
- * badge
+ * # Badge
  *
- * Features:
+ * Briefly highlights or categorizes associated UI elements with concise visual cues for status or metadata.
  *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLSpanElement' attributes (including aria- & data-attributes)
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
- * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
+ * @see {@link https://nimbus-documentation.vercel.app/components/data-display/badge}
  */
 export declare const Badge: {
     (props: BadgeProps): JSX.Element;
@@ -502,6 +524,13 @@ declare type BadgeVariantProps = BadgeRootProps & RecipeVariantProps<typeof badg
     [key: `data-${string}`]: string;
 };
 
+/**
+ * # Box
+ *
+ * A basic layout component that serves as a wrapper or container.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/layout/box}
+ */
 export declare const Box: {
     (props: BoxProps): JSX.Element;
     displayName: string;
@@ -512,6 +541,13 @@ export declare interface BoxProps extends HTMLChakraProps<"div"> {
     ref?: React.Ref<HTMLDivElement>;
 }
 
+/**
+ * # Button
+ *
+ * Displays a Button.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/button}
+ */
 export declare const Button: {
     (props: ButtonProps): JSX.Element;
     displayName: string;
@@ -593,9 +629,16 @@ declare interface ButtonRootProps extends Omit<HTMLChakraProps<"button", ButtonR
     slot?: string | null | undefined;
 }
 
+/**
+ * # Calendar
+ *
+ * Calendars display a grid of days in one or more months and allow users to select a single date.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/calendar}
+ */
 export declare const Calendar: (props: CalendarProps<DateValue>) => JSX.Element;
 
-export declare interface CalendarProps<T extends DateValue_2> extends Omit<CalendarRootSlotProps, keyof CalendarProps_2<DateValue_2> | ExcludedProps_3>, Omit<CalendarProps_2<T>, ExcludedProps_3>, RecipeVariantProps<typeof calendarSlotRecipe> {
+export declare interface CalendarProps<T extends DateValue_2> extends Omit<CalendarRootSlotProps, keyof CalendarProps_2<DateValue_2> | ExcludedProps_4>, Omit<CalendarProps_2<T>, ExcludedProps_4>, RecipeVariantProps<typeof calendarSlotRecipe> {
 }
 
 declare interface CalendarRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof calendarSlotRecipe> & CalendarProps_2<DateValue_2>> {
@@ -704,6 +747,13 @@ backgroundColor: "colorPalette.2";
 declare interface CardRecipeProps extends RecipeProps<"div">, UnstyledProp {
 }
 
+/**
+ * # Card
+ *
+ * A versatile container component presents self-contained information
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/data-display/card}
+ */
 export declare const _CardRoot: {
     ({ children, ref, ...props }: CardProps): JSX.Element;
     displayName: string;
@@ -727,17 +777,11 @@ declare type CardVariantProps = CardRootProps & RecipeVariantProps<typeof cardRe
 };
 
 /**
- * Checkbox
- * ============================================================
- * displays a checkbox and an associated label
+ * # Checkbox
  *
- * Features:
+ * Displays a checkbox.
  *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
- * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/checkbox}
  */
 export declare const Checkbox: {
     (props: CheckboxProps): JSX.Element;
@@ -793,6 +837,12 @@ zIndex: number;
 declare type CheckboxVariantProps = CheckboxRootProps & RecipeVariantProps<typeof checkboxSlotRecipe> & AriaCheckboxProps;
 
 /**
+ * # Code
+ *
+ * renders code blocks
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/code}
+ *
  * @experimental This component is experimental and may change or be removed in future versions.
  */
 export declare const Code: ForwardRefExoticComponent<CodeProps & RefAttributes<HTMLElement>>;
@@ -925,6 +975,13 @@ export declare interface ComboBoxOptionsSlotProps extends HTMLChakraProps<"div",
 export declare interface ComboBoxPopoverSlotProps extends HTMLChakraProps<"div", RecipeProps<"popover">> {
 }
 
+/**
+ * # ComboBox
+ *
+ * A combo box combines a text input with a dropdown list, allowing users to filter a list of options to items matching a query.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/combobox}
+ */
 export declare const _ComboBoxRoot: {
     <T extends object>({ children, ref, ...props }: ComboBoxRootProps<T>): JSX.Element;
     displayName: string;
@@ -965,7 +1022,6 @@ variant: {
 solid: {
 root: {
 width: "7200";
-bg: "primary.1";
 };
 value: {
 width: "100%";
@@ -1063,9 +1119,11 @@ declare type ConflictingFieldStateProps = keyof TimeFieldStateOptions<TimeValue>
 declare type ConflictingPickerStateProps = keyof DatePickerStateOptions<DateValue>;
 
 /**
- * DateInput
- * ============================================================
- * allows entering a date in the currently selected locale
+ * # DateInput
+ *
+ * allows entering a date
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/dateinput}
  */
 export declare const DateInput: {
     (props: DateInputProps): JSX.Element;
@@ -1080,7 +1138,7 @@ export declare const DateInput: {
  * 2. Merge with DateInputRootProps, excluding conflicting keys
  * 3. Add recipe variant props
  */
-export declare interface DateInputProps extends DateFieldProps<DateValue>, Omit<DateInputRootProps, keyof DateFieldProps<DateValue> | ExcludedProps_2>, RecipeVariantProps<typeof dateInputSlotRecipe> {
+export declare interface DateInputProps extends DateFieldProps<DateValue>, Omit<DateInputRootProps, keyof DateFieldProps<DateValue> | ExcludedProps_3>, RecipeVariantProps<typeof dateInputSlotRecipe> {
 }
 
 /**
@@ -1137,14 +1195,22 @@ backgroundColor: "primary.2";
 };
 };
 };
+plain: {
+segmentGroup: {
+px: "0";
+outline: "none!";
+boxShadow: "none!";
+};
+};
 };
 }>;
 
 /**
- * DatePicker
- * ============================================================
- * Combines a DateInput with a Calendar popover for date selection.
- * Users can either type a date directly or select from the calendar.
+ * # DatePicker
+ *
+ * a UI component for users to enter or select a specific calendar date.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/datepicker}
  */
 export declare const DatePicker: {
     (props: DatePickerProps): JSX.Element;
@@ -1158,7 +1224,7 @@ export declare const DatePicker: {
  * 1. Conflicting props from DateInputProps to avoid TypeScript errors
  * 2. Explicitly excluded props that we don't want users to access
  */
-export declare interface DatePickerProps extends Omit<DateInputProps, ConflictingPickerStateProps | ExcludedProps_4>, Omit<DatePickerStateOptions<DateValue>, ExcludedProps_4>, RecipeVariantProps<typeof datePickerSlotRecipe> {
+export declare interface DatePickerProps extends Omit<DateInputProps, ConflictingPickerStateProps | ExcludedProps_5>, Omit<DatePickerStateOptions<DateValue>, ExcludedProps_5>, RecipeVariantProps<typeof datePickerSlotRecipe> {
     /**
      * Whether the calendar popover should be open by default (uncontrolled).
      */
@@ -1171,6 +1237,11 @@ export declare interface DatePickerProps extends Omit<DateInputProps, Conflictin
      * Handler that is called when the calendar popover's open state changes.
      */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether to hide the time zone information when using ZonedDateTime values.
+     * This prop is forwarded to both the main date input and footer time input.
+     */
+    hideTimeZone?: boolean;
 }
 
 /**
@@ -1207,6 +1278,115 @@ ghost: {};
 }>;
 
 /**
+ * Props for the DatePickerTimeInput component.
+ */
+export declare interface DatePickerTimeInputProps {
+    hideTimeZone?: boolean;
+    hourCycle?: 12 | 24;
+}
+
+/**
+ * DateRangePicker
+ * ============================================================
+ * Combines a DateInput with a RangeCalendar popover for date range selection.
+ * Users can either type a date range directly or select from the calendar.
+ */
+export declare const DateRangePicker: {
+    (props: DateRangePickerProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the DateRangePicker component.
+ *
+ * We extend React Aria's DateRangePickerProps and add the size/variant props
+ * that we want to pass through to the DateInput components.
+ */
+export declare interface DateRangePickerProps extends Omit<DateRangePickerProps_2<DateValue>, ExcludedProps_8>, Omit<DateRangePickerRootProps, keyof DateRangePickerProps_2<DateValue> | ExcludedProps_8>, RecipeVariantProps<typeof dateRangePickerSlotRecipe> {
+    /**
+     * Whether the calendar popover should be open by default (uncontrolled).
+     */
+    defaultOpen?: boolean;
+    /**
+     * Whether the calendar popover is open (controlled).
+     */
+    isOpen?: boolean;
+    /**
+     * Handler that is called when the calendar popover's open state changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether to hide the time zone information when using ZonedDateTime values.
+     * This prop is forwarded to both the main date inputs and footer time inputs.
+     */
+    hideTimeZone?: boolean;
+}
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+declare interface DateRangePickerRecipeProps extends RecipeProps<"div">, UnstyledProp {
+}
+
+/**
+ * Root props interface that extends Chakra's HTML props with our recipe props.
+ * This creates a complete set of props for the root element, combining
+ * HTML attributes, Chakra's styling system, and our custom recipe props.
+ */
+declare interface DateRangePickerRootProps extends HTMLChakraProps<"div", DateRangePickerRecipeProps> {
+}
+
+declare const dateRangePickerSlotRecipe: SlotRecipeDefinition<"popover" | "group" | "root" | "trigger" | "calendar" | "calendarHeader" | "calendarGrid" | "calendarCell", {
+size: {
+sm: {
+group: {
+height: "800";
+pr: "calc({spacing.1400} + {spacing.400})";
+};
+trigger: {
+top: "50";
+};
+};
+md: {
+group: {
+height: "1000";
+pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})";
+};
+trigger: {
+top: "100";
+};
+};
+};
+variant: {
+solid: {};
+ghost: {
+group: {
+bg: "transparent";
+px: "300";
+_hover: {
+bg: "primary.2";
+};
+};
+};
+};
+}>;
+
+/**
+ * Props for the DateRangePickerTimeInput component.
+ */
+export declare interface DateRangePickerTimeInputProps {
+    hideTimeZone?: boolean;
+    hourCycle?: 12 | 24;
+}
+
+/**
+ * # Dialog
+ *
+ * displays a dialog
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/dialog}
+ *
  * @experimental This component is experimental and may change or be removed in future versions.
  */
 export declare const Dialog: DialogComponents;
@@ -1333,35 +1513,53 @@ declare type DividerVariantProps = DividerRootProps & RecipeVariantProps<typeof
 
 declare type ExcludedNumberInputProps = "asChild" | "onChange";
 
+/**
+ * Additional properties we want to exclude from the ToggleButton component.
+ * These are chakra-ui props we don't want exposed for non-polymorphic components.
+ */
+declare type ExcludedProps = "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+
 /**
  * Additional properties we want to exclude from the TimeInput component.
  * These are either deprecated or not intended for use in this component.
  */
-declare type ExcludedProps = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+declare type ExcludedProps_2 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
 
 /**
  * Additional properties we want to exclude from the DateInput component.
  * These are either deprecated or not intended for use in this component.
  */
-declare type ExcludedProps_2 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+declare type ExcludedProps_3 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
 
 /**
  * Additional properties we want to exclude from the TimeInput component.
  * These are either deprecated or not intended for use in this component.
  */
-declare type ExcludedProps_3 = "as" | "asChild" | "style" | "createCalendar";
+declare type ExcludedProps_4 = "as" | "asChild" | "style" | "createCalendar";
 
 /**
  * Additional properties we want to exclude from the DatePicker component.
  * These are either deprecated or not intended for use in this component.
  */
-declare type ExcludedProps_4 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+declare type ExcludedProps_5 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild" | "variant";
 
 /**
  * Additional properties we want to exclude from the ProgressBar component.
  * These are chakra-ui props we don't want exposed.
  */
-declare type ExcludedProps_5 = "css" | "unstyled" | "as" | "asChild";
+declare type ExcludedProps_6 = "css" | "unstyled" | "as" | "asChild";
+
+/**
+ * Additional properties we want to exclude from the RangeCalendar component.
+ * These are either deprecated or not intended for use in this component.
+ */
+declare type ExcludedProps_7 = "as" | "style" | "createCalendar";
+
+/**
+ * Additional properties we want to exclude from the DateRangePicker component.
+ * These are either deprecated or not intended for use in this component.
+ */
+declare type ExcludedProps_8 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
 
 /**
  * List of props that should be excluded from the root props when combining with ARIA props
@@ -1492,9 +1690,11 @@ mt: "var(--grid-gap)";
 }>;
 
 /**
- * FormField
- * ============================================================
- * displays inputs in a FormField context
+ * # FormField
+ *
+ * displays miscellaneous inputs in a FormField context
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}
  */
 export declare const _FormFieldRoot: ForwardRefExoticComponent<FormFieldProps & RefAttributes<HTMLDivElement>>;
 
@@ -1516,13 +1716,11 @@ export declare const Grid: {
 };
 
 /**
- * Grid
- * ============================================================
- * The Grid Layout Component provides a flexible and responsive way to structure content using a two-dimensional grid system. It allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes.
+ * # Grid
  *
- * Features:
+ * An easily customizable Grid component, re-exported from Chakra UI, that provides a consistent layout structure across different products.
  *
- * - allows forwarding refs to the underlying DOM element
+ * @see {@link https://nimbus-documentation.vercel.app/components/layout/grid}
  */
 export declare interface GridProps extends GridProps_2 {
     children?: React.ReactNode;
@@ -1532,8 +1730,11 @@ export declare interface GridProps extends GridProps_2 {
 export { Heading }
 
 /**
- * Icon
+ * # Icon
+ *
  * displays icon components
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/media/icon}
  */
 export declare const Icon: {
     (props: IconProps): JSX.Element;
@@ -1541,10 +1742,11 @@ export declare const Icon: {
 };
 
 /**
- * IconButton
- * ============================================================
- * displays a button with only an icon as child. It is based
- * on the regular `Button` component, but with a few adjustments.
+ * # IconButton
+ *
+ * displays a button with an icon only as child
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/iconbutton}
  */
 export declare const IconButton: {
     (props: IconButtonProps): JSX.Element;
@@ -1583,6 +1785,11 @@ export declare interface IconProps extends IconVariantProps {
      * Ref to the icon element
      */
     ref?: React.Ref<SVGSVGElement>;
+    /**
+     * The slot to render the icon in.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/slot
+     */
+    slot?: string | null | undefined;
 }
 
 /**
@@ -1630,6 +1837,24 @@ declare interface IconRecipeProps extends RecipeProps<"svg">, UnstyledProp {
 declare interface IconRootSlotProps extends HTMLChakraProps<"svg", IconRecipeProps> {
 }
 
+/**
+ * # IconToggleButton
+ * ============================================================
+ * A toggle button with only an icon as child. It is based
+ * on the regular `ToggleButton` component, but with a few adjustments.
+ *
+ */
+export declare const IconToggleButton: {
+    ({ "aria-label": ariaLabel, children, ref, ...props }: IconToggleButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface IconToggleButtonProps extends Omit<ToggleButtonProps, "aria-label"> {
+    /** explains the intended action, required for accessibility */
+    "aria-label": string;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+
 /**
  * Combines the root props with Chakra UI's recipe variant props.
  * This allows the component to accept both structural props from Root
@@ -1638,9 +1863,11 @@ declare interface IconRootSlotProps extends HTMLChakraProps<"svg", IconRecipePro
 declare type IconVariantProps = Omit<IconRootSlotProps, keyof React.SVGProps<SVGSVGElement> | "css" | "unstyled" | "asChild" | "recipe"> & RecipeVariantProps<typeof iconRecipe>;
 
 /**
- * Image
+ * # Image
  *
- * Use this component to display an image.
+ * A component to display images with support for fallback.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/media/image}
  */
 declare const Image_2: {
     (props: ImageProps): JSX.Element;
@@ -1652,22 +1879,26 @@ export declare interface ImageProps extends ImageProps_2 {
 }
 
 /**
- * @experimental This component is experimental and may change or be removed in future versions.
+ * # Kbd
+ *
+ * Renders a keyboard shortcut or key combination, styled for visual clarity.
+ * Typically used to visually represent keyboard keys.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/kbd}
  */
-export declare const Kbd: ForwardRefExoticComponent<KbdProps & RefAttributes<HTMLElement>>;
+export declare const Kbd: ({ ref: forwardedRef, slot, ...props }: KbdProps) => JSX.Element;
+
+export declare interface KbdProps extends Omit<KbdProps_2, "slot"> {
+    ref?: default_2.Ref<HTMLElement>;
+    slot?: string | null | undefined;
+}
 
 /**
- * Link
- * ============================================================
- * To allow a user to navigate to a different page or resource
+ * # Link
  *
- * Features:
+ * To allow a user to navigate to a different page or resource
  *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLAnchorElement' attributes (including aria- & data-attributes)
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
- * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
+ * @see {@link https://nimbus-documentation.vercel.app/components/navigation/link}
  */
 export declare const Link: {
     (props: LinkProps): JSX.Element;
@@ -1740,6 +1971,11 @@ declare type LinkVariantProps = Omit<LinkRootProps, "onFocus" | "onBlur" | "onCl
 };
 
 /**
+ * # List
+ *
+ * displays a list
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/list}
  * @experimental This component is experimental and may change or be removed in future versions.
  */
 export declare const List: {
@@ -1755,9 +1991,11 @@ export declare const _ListItem: ForwardRefExoticComponent<List_2.ItemProps & Ref
 export declare const _ListRoot: ForwardRefExoticComponent<List_2.RootProps & RefAttributes<HTMLUListElement>>;
 
 /**
- * LoadingSpinner
- * ============================================================
+ * # LoadingSpinner
+ *
  * Indicates ongoing processes or loading states
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/loadingspinner}
  */
 export declare const LoadingSpinner: {
     (props: LoadingSpinnerProps): JSX.Element;
@@ -1858,18 +2096,157 @@ export declare const MakeElementFocusable: ForwardRefExoticComponent<FocusableOp
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLElement>>;
 
+export declare const Menu: {
+    Root: {
+        (props: MenuRootProps_2): JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ children, asChild, ref, ...props }: MenuTriggerProps_2): JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, placement: placementOverride, ref, }: MenuContentProps_2): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, isCritical, ref, ...props }: MenuItemProps_2): JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        ({ ref, ...props }: MenuSeparatorProps_2): JSX.Element;
+        displayName: string;
+    };
+    Section: {
+        <T extends object = object>({ children, ref, label, items, ...props }: MenuSectionProps_2<T>): JSX.Element;
+        displayName: string;
+    };
+    Submenu: {
+        ({ children, ...props }: MenuSubmenuProps_2): JSX.Element;
+        displayName: string;
+    };
+    SubmenuTrigger: {
+        ({ children, ...props }: MenuSubmenuTriggerProps_2): JSX.Element;
+        displayName: string;
+    };
+};
+
+export declare const _MenuContent: {
+    ({ children, placement: placementOverride, ref, }: MenuContentProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuContentProps {
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The placement of the menu relative to the trigger.
+     */
+    placement?: PopoverProps["placement"];
+}
+
+export declare const _MenuItem: {
+    ({ children, isCritical, ref, ...props }: MenuItemProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuItemProps extends MenuItemProps_3 {
+    /**
+     * if set to `true`, highlights the item as critical (red)
+     * */
+    isCritical?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+
+export declare const _MenuRoot: {
+    (props: MenuRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuRootProps extends Omit<MenuTriggerProps_3, "trigger" | "children">, Omit<MenuProps<object>, "children">, RecipeVariantProps<typeof menuSlotRecipe> {
+    /**
+     * The trigger element and menu content
+     */
+    children: ReactNode;
+    /**
+     * The trigger event to use for the menu.
+     * @default "press"
+     */
+    trigger?: "press" | "longPress";
+    /**
+     * The placement of the menu relative to the trigger.
+     * @default "bottom start"
+     */
+    placement?: PopoverProps["placement"];
+}
+
+export declare const _MenuSection: {
+    <T extends object = object>({ children, ref, label, items, ...props }: MenuSectionProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuSectionLabelProps {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+
+export declare interface MenuSectionProps<T = object> extends MenuSectionProps_3<T> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Label for the section header
+     */
+    label: ReactNode;
+}
+
+export declare const _MenuSeparator: {
+    ({ ref, ...props }: MenuSeparatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuSeparatorProps extends SeparatorProps_2 {
+    ref?: Ref<HTMLDivElement>;
+}
+
 /**
- * MultilineTextInput
- * ============================================================
- * A textarea component that takes in multiline text as input
+ * Recipe configuration for the Menu component.
+ * Defines the styling variants and base styles using Chakra UI's slot recipe system.
+ */
+declare const menuSlotRecipe: SlotRecipeDefinition<"content" | "section" | "popover" | "separator" | "root" | "trigger" | "item" | "sectionLabel" | "submenu", SlotRecipeVariantRecord<"content" | "section" | "popover" | "separator" | "root" | "trigger" | "item" | "sectionLabel" | "submenu">>;
+
+export declare const _MenuSubmenu: {
+    ({ children, ...props }: MenuSubmenuProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuSubmenuProps extends MenuContentProps {
+}
+
+export declare const _MenuSubmenuTrigger: {
+    ({ children, ...props }: MenuSubmenuTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuSubmenuTriggerProps extends SubmenuTriggerProps {
+    ref?: Ref<HTMLDivElement>;
+}
+
+export declare const _MenuTrigger: {
+    ({ children, asChild, ref, ...props }: MenuTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MenuTriggerProps extends Omit<MenuTriggerSlotProps, keyof ButtonProps_2>, ButtonProps_2 {
+    ref?: Ref<HTMLButtonElement>;
+}
+
+declare type MenuTriggerSlotProps = HTMLChakraProps<"button">;
+
+/**
+ * # Multiline Text Input
  *
- * Features:
+ * A multiline text input component for capturing longer text content.
  *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLTextAreaElement' attributes (including aria- & data-attributes)
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
- * - supports auto-growing height based on content when `autoGrow` is enabled
+ * @see {@link https://nimbus-documentation.vercel.app/components/forms/multiline-text-input}
  */
 export declare const MultilineTextInput: {
     (props: MultilineTextInputProps): JSX.Element;
@@ -1926,6 +2303,13 @@ declare interface MultilineTextInputRecipeProps extends RecipeVariantProps<typeo
 
 declare type MultilineTextInputRootSlotProps = HTMLChakraProps<"textarea", MultilineTextInputRecipeProps>;
 
+/**
+ * # NimbusProvider
+ *
+ * provides an environment for the rest of the components to work in
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/utilities/nimbusprovider}
+ */
 export declare function NimbusProvider({ children, locale, router, ...props }: NimbusProviderProps): JSX.Element;
 
 export declare interface NimbusProviderProps extends ColorModeProviderProps {
@@ -2004,18 +2388,11 @@ export declare interface NimbusRouterOptionsBase {
 }
 
 /**
- * NumberInput
- * ============================================================
- * An input component that accepts only numbers with increment/decrement buttons
+ * # NumberInput
  *
- * Features:
+ * A number input allows users to enter numerical values and adjust them incrementally.
  *
- * - supports ref forwarding to the underlying DOM element
- * - supports number-specific props like min, max, step
- * - includes increment/decrement buttons for easy number adjustment
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
- * - provides full accessibility support
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/number-input}
  */
 export declare const NumberInput: {
     (props: NumberInputProps): JSX.Element;
@@ -2137,16 +2514,11 @@ declare interface NumberInputRecipeProps extends RecipeVariantProps<typeof numbe
 declare type NumberInputRootSlotProps = HTMLChakraProps<"div", NumberInputRecipeProps>;
 
 /**
- * PasswordInput
- * ============================================================
- * An input component that takes in password as input with toggleable visibility
+ * # PasswordInput
  *
- * Features:
+ * A password input is a text field that hides entered characters for secure password entry.
  *
- * - 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
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/passwordinput}
  */
 export declare const PasswordInput: ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & RefAttributes<HTMLInputElement>>;
 
@@ -2185,7 +2557,7 @@ export declare const ProgressBar: {
  * Extends ProgressBarRootProps to include root props, variant props, and aria props,
  * while adding custom props for label display and formatting.
  */
-export declare interface ProgressBarProps extends Omit<ProgressBarRootProps, ExcludedProps_5> {
+export declare interface ProgressBarProps extends Omit<ProgressBarRootProps, ExcludedProps_6> {
     /**
      * Ref forwarding to the root element
      */
@@ -2337,6 +2709,13 @@ export declare interface RadioInputOptionProps extends RadioProps, Omit<RadioInp
 export declare interface RadioInputOptionSlotProps extends HTMLChakraProps<"span", RecipeProps<"option">> {
 }
 
+/**
+ * # RadioInput
+ *
+ * A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/radio-input}
+ */
 export declare const _RadioInputRoot: {
     (props: RadioInputRootProps): JSX.Element;
     displayName: string;
@@ -2370,6 +2749,24 @@ gap: "400";
 };
 }>;
 
+export declare const RangeCalendar: (props: RangeCalendarProps<DateValue_2>) => JSX.Element;
+
+export declare interface RangeCalendarProps<T extends DateValue_2> extends Omit<RangeCalendarRootSlotProps, keyof RangeCalendarProps_2<DateValue_2> | ExcludedProps_7>, Omit<RangeCalendarProps_2<T>, ExcludedProps_7>, RecipeVariantProps<typeof rangeCalendarSlotRecipe> {
+}
+
+declare interface RangeCalendarRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof rangeCalendarSlotRecipe> & RangeCalendarProps_2<DateValue_2>> {
+}
+
+declare const rangeCalendarSlotRecipe: SlotRecipeDefinition<"grid" | "header" | "root" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", SlotRecipeVariantRecord<"grid" | "header" | "root" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>;
+
+/**
+ * Range value type for date ranges
+ */
+export declare type RangeValue<T> = {
+    start: T;
+    end: T;
+};
+
 export declare type RouterOptions = NimbusRouterOptionsBase extends {
     routerOptions: any;
 } ? NimbusRouterOptionsBase["routerOptions"] : any;
@@ -2437,6 +2834,13 @@ export declare interface SelectOptionsProps<T> extends ListBoxProps<T>, Omit<Sel
 declare interface SelectOptionsSlotProps extends HTMLChakraProps<"div"> {
 }
 
+/**
+ * # Select
+ *
+ * displays a collapsible list of options and allows a user to select one of them.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/select}
+ */
 export declare const _SelectRoot: ForwardRefExoticComponent<SelectRootProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface SelectRootProps extends SelectRootSlotProps, SelectProps {
@@ -2508,13 +2912,11 @@ export declare const SimpleGrid: {
 };
 
 /**
- * SimpleGrid
- * ============================================================
- * The SimpleGrid Layout Component provides a flexible and responsive way to structure content.
+ * # SimpleGrid
  *
- * Features:
+ * displays a simple grid / matrix
  *
- * - allows forwarding refs to the underlying DOM element
+ * @see {@link https://nimbus-documentation.vercel.app/components/layout/simplegrid}
  */
 export declare interface SimpleGridProps extends SimpleGridProps_2 {
     children?: React.ReactNode;
@@ -2530,6 +2932,13 @@ export declare interface SingleSelectInputProps {
     ref?: default_2.Ref<HTMLInputElement>;
 }
 
+/**
+ * # Stack
+ *
+ * An easily customizable Stack component, re-exported from Chakra UI, that provides a consistent layout structure across different products.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/layout/stack}
+ */
 export declare const Stack: {
     (props: StackProps): JSX.Element;
     displayName: string;
@@ -2541,9 +2950,11 @@ export declare interface StackProps extends StackProps_2 {
 }
 
 /**
- * Switch
- * ============================================================
- * displays a switch toggle and optionally an associated label
+ * # Switch
+ *
+ * A clear, visual toggle, allowing users to activate or deactivate a setting quickly.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/switch}
  */
 export declare const Switch: {
     ({ ref: externalRef, ...props }: SwitchProps): JSX.Element;
@@ -2687,9 +3098,11 @@ export declare type TagGroupTagProps = TagProps & Omit<TagGroupTagSlotProps, key
 declare type TagGroupTagSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
 /**
- * Text
+ * # Text
+ *
+ * the Text component is used to display text
  *
- * Use this component to display text.
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/text}
  */
 declare const Text_2: {
     ({ ref: forwardedRef, ...props }: TextProps): JSX.Element;
@@ -2698,16 +3111,11 @@ declare const Text_2: {
 export { Text_2 as Text }
 
 /**
- * TextInput
- * ============================================================
- * An input component that takes in text as input
+ * # TextInput
  *
- * Features:
+ * An input component that takes in a text as input
  *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLInputElement' attributes (including aria- & data-attributes)
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/textinput}
  */
 export declare const TextInput: {
     (props: TextInputProps): JSX.Element;
@@ -2779,7 +3187,7 @@ export declare const TimeInput: {
  * 1. Conflicting props from TimeInputRootProps to avoid TypeScript errors
  * 2. Explicitly excluded props that we don't want users to access
  */
-export declare interface TimeInputProps extends Omit<TimeInputRootProps, ConflictingFieldStateProps | ExcludedProps>, Omit<TimeFieldStateOptions<TimeValue>, ExcludedProps>, RecipeVariantProps<typeof timeInputRecipe> {
+export declare interface TimeInputProps extends Omit<TimeInputRootProps, ConflictingFieldStateProps | ExcludedProps_2>, Omit<TimeFieldStateOptions<TimeValue>, ExcludedProps_2>, RecipeVariantProps<typeof timeInputRecipe> {
 }
 
 /**
@@ -2839,6 +3247,19 @@ declare interface TimeInputRecipeProps extends RecipeProps<"div">, UnstyledProp
 declare interface TimeInputRootProps extends HTMLChakraProps<"div", TimeInputRecipeProps> {
 }
 
+/**
+ * # ToggleButton
+ *
+ * A toggleable button component that can be pressed to switch between
+ * selected and unselected states.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/togglebutton}
+ */
+export declare const ToggleButton: {
+    ({ ref: forwardedRef, ...props }: ToggleButtonProps): JSX.Element;
+    displayName: string;
+};
+
 /**
  * ToggleButtonGroup
  * ============================================================
@@ -2856,7 +3277,7 @@ export declare type ToggleButtonGroupButtonComponent = React.FC<ToggleButtonGrou
 
 /** Combined props for the button element (Chakra styles + Aria behavior). */
 export declare type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps & AriaToggleButtonProps & {
-    ref?: React.Ref<typeof ToggleButton>;
+    ref?: React.Ref<typeof ToggleButton_2>;
 };
 
 /** Base Chakra styling props for the `button` slot. */
@@ -2867,6 +3288,13 @@ export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroup
     ref?: React.Ref<typeof ToggleButtonGroup_2>;
 };
 
+/**
+ * # ToggleButtonGroup
+ *
+ * A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/togglebuttongroup}
+ */
 export declare const _ToggleButtonGroupRoot: ToggleButtonGroupRootComponent;
 
 /** Type signature for the main `ToggleButtonGroup` component. */
@@ -2878,6 +3306,123 @@ declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaT
 /** Base Chakra styling props for the root `div` slot. */
 declare type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
+export declare interface ToggleButtonProps extends ToggleButtonProps_2, Omit<ToggleButtonRootProps, keyof ToggleButtonProps_2 | ExcludedProps> {
+    /**
+     * Ref to the underlying button element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+
+declare const toggleButtonRecipe: RecipeDefinition<    {
+size: {
+"2xs"?: {
+h: "600";
+minW: "600";
+fontSize: "300";
+fontWeight: "500";
+lineHeight: "400";
+px: "200";
+gap: "100";
+_icon: {
+width: "400";
+height: "400";
+};
+} | undefined;
+xs?: {
+h: "800";
+minW: "800";
+fontSize: "350";
+fontWeight: "500";
+lineHeight: "400";
+px: "300";
+gap: "100";
+_icon: {
+width: "500";
+height: "500";
+};
+} | undefined;
+md?: {
+h: "1000";
+minW: "1000";
+fontSize: "400";
+lineHeight: "500";
+px: "400";
+gap: "200";
+_icon: {
+width: "600";
+height: "600";
+};
+} | undefined;
+};
+variant: {
+outline: {
+"--button-bg": "transparent";
+"--button-text": "{colors.colorPalette.11}";
+"--border-width": "{sizes.25}";
+"--border-color": "{colors.colorPalette.7}";
+bg: "var(--button-bg)";
+boxShadow: "0 0 0 var(--border-width) var(--border-color)";
+color: "var(--button-text)";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.2}";
+"--border-color": "{colors.colorPalette.8}";
+};
+"&[data-selected=true]": {
+"--button-bg": "{colors.colorPalette.3}";
+"--border-color": "{colors.colorPalette.8}";
+_hover: {
+"--button-bg": "{colors.colorPalette.4}";
+"--border-color": "{colors.colorPalette.9}";
+};
+};
+};
+ghost: {
+"--button-text": "{colors.neutral.11}";
+"--button-bg": "transparent";
+color: "var(--button-text)";
+bg: "var(--button-bg)";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.2}";
+};
+"&[data-selected='true']": {
+"--button-bg": "{colors.colorPalette.3}";
+"--button-text": "{colors.colorPalette.11}";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.4}";
+};
+};
+};
+};
+tone: {
+primary?: {
+colorPalette: "primary";
+} | undefined;
+critical?: {
+colorPalette: "critical";
+} | undefined;
+neutral?: {
+colorPalette: "neutral";
+} | undefined;
+info?: {
+colorPalette: "info";
+} | undefined;
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the toggle button element.
+ */
+declare interface ToggleButtonRecipeProps extends RecipeVariantProps<typeof toggleButtonRecipe>, UnstyledProp {
+}
+
+/**
+ * Root props interface that extends Chakra's HTML props with our recipe props.
+ * 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 ToggleButtonRootProps = HTMLChakraProps<"button", ToggleButtonRecipeProps>;
+
 export declare const Tooltip: {
     Root: typeof _TooltipRoot;
     Content: typeof _TooltipContent;
@@ -2926,13 +3471,11 @@ declare interface TooltipRecipeProps extends RecipeProps<"div">, UnstyledProp {
 }
 
 /**
- * TooltipRoot
- * ============================================================
- * Root component that wraps around a trigger element and Tooltip content.
- * It handles opening and closing the Tooltip when the user hovers over or focuses the trigger,
- * and positioning the Tooltip relative to the trigger.
+ * # Tooltip
+ *
+ * A contextual popup that displays a description for an element.
  *
- * This acts as the context provider for the compound Tooltip component.
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/tooltip}
  */
 export declare function _TooltipRoot({ delay, closeDelay, ...props }: TooltipTriggerComponentProps): JSX.Element;
 
@@ -2963,6 +3506,13 @@ export declare interface TypedNimbusRouterConfig {
     useHref?: (href: string) => string;
 }
 
+/**
+ * # VisuallyHidden
+ *
+ * makes content accessible to screen readers but hides it visually
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/accessibility/visually-hidden}
+ */
 export declare const VisuallyHidden: {
     (props: VisuallyHiddenProps): JSX.Element;
     displayName: string;