@commercetools/nimbus 0.0.7-rc10 → 0.0.7-rc12

package/dist/index.d.ts

@@ -9,11 +9,16 @@ 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 { 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 { ConditionalValue } from '@chakra-ui/react';
 import { Context } from 'react';
 import { DetailedHTMLProps } from 'react';
@@ -28,6 +33,7 @@ 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';
@@ -477,11 +483,119 @@ colorPalette: "neutral";
 export declare interface ButtonProps extends FunctionalButtonProps {
 }
 
+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<"button">, UnstyledProp {
+declare interface ButtonRecipeProps extends RecipeProps<typeof buttonRecipe>, UnstyledProp {
 }
 
 /**
@@ -489,7 +603,8 @@ 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>>;
@@ -676,6 +791,139 @@ export declare function ColorModeLabel(): "Light Theme" | "DarkTheme";
 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;
+    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;
+};
+
+declare interface ComboBoxMultiSelect<T extends object> extends Omit<AutocompleteProps, "children">, Omit<GridListProps<T>, "filter"> {
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+}
+
+/** 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> {
+}
+
+/** 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>> {
+}
+
+/** 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>> {
+}
+
+/** 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>> {
+}
+
+/** 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>;
+
+/** 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> {
+}
+
+/** 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: {};
+};
+}>;
+
+/** 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>>;