@commercetools/nimbus 0.0.0-canary-20251010180202 → 0.0.0-canary-20251013204307

package/dist/select.d.ts

@@ -1,34 +1,134 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { ListBoxItemProps } from 'react-aria-components';
 import { ListBoxProps } from 'react-aria-components';
 import { ListBoxSectionProps } from 'react-aria-components';
 import { ReactNode } from 'react';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { SelectOptionGroupProps as SelectOptionGroupProps_2 } from './select.types';
 import { SelectOptionProps as SelectOptionProps_2 } from './select.types';
 import { SelectOptionsProps as SelectOptionsProps_2 } from './select.types';
 import { SelectProps } from 'react-aria-components';
 import { SelectRootProps as SelectRootProps_2 } from './select.types';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 
+/**
+ * Select
+ * ============================================================
+ * A versatile select component for choosing one or more options from a list.
+ * Features full keyboard accessibility and WCAG 2.1 AA compliance.
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Options placeholder="Select an option">
+ *     <Select.Option id="1">Option 1</Select.Option>
+ *     <Select.Option id="2">Option 2</Select.Option>
+ *     <Select.Option id="3">Option 3</Select.Option>
+ *   </Select.Options>
+ * </Select.Root>
+ * ```
+ *
+ * @see https://nimbus-documentation.vercel.app/components/inputs/select
+ */
 export declare const Select: {
+    /**
+     * # Select.Root
+     *
+     * The root component that provides context and state management for the select.
+     * This component must wrap all select parts (Options, Option, etc.) and provides
+     * the select state, variant styling context, and selection management.
+     *
+     * @example
+     * ```tsx
+     * <Select.Root>
+     *   <Select.Options placeholder="Choose...">
+     *     <Select.Option id="apple">Apple</Select.Option>
+     *     <Select.Option id="orange">Orange</Select.Option>
+     *   </Select.Options>
+     * </Select.Root>
+     * ```
+     */
     Root: {
         ({ ref: forwardedRef, children, leadingElement, isLoading, isDisabled, isClearable, ...props }: SelectRootProps_2): JSX.Element;
         displayName: string;
     };
+    /**
+     * # Select.Options
+     *
+     * The trigger button and dropdown container for select options.
+     * Displays the selected value and opens the options list when activated.
+     *
+     * This component handles the visual presentation of the select, including
+     * the trigger button, selected value display, dropdown icon, and the
+     * popover containing options.
+     *
+     * @example
+     * ```tsx
+     * <Select.Root>
+     *   <Select.Options
+     *     placeholder="Select fruit"
+     *     label="Favorite Fruit"
+     *   >
+     *     <Select.Option id="apple">Apple</Select.Option>
+     *     <Select.Option id="banana">Banana</Select.Option>
+     *   </Select.Options>
+     * </Select.Root>
+     * ```
+     */
     Options: {
         <T extends object>(props: SelectOptionsProps_2<T> & {
             ref?: React.Ref<HTMLDivElement>;
         }): JSX.Element;
         displayName: string;
     };
+    /**
+     * # Select.Option
+     *
+     * An individual selectable option within the select dropdown.
+     * Represents a single choice that can be selected by the user.
+     *
+     * Options automatically handle selection state, keyboard navigation,
+     * and visual feedback for hover and selection states.
+     *
+     * @example
+     * ```tsx
+     * <Select.Options>
+     *   <Select.Option id="red" textValue="Red">
+     *     🔴 Red
+     *   </Select.Option>
+     *   <Select.Option id="blue" textValue="Blue">
+     *     🔵 Blue
+     *   </Select.Option>
+     * </Select.Options>
+     * ```
+     */
     Option: {
-        <T extends object>({ ref, ...restProps }: SelectOptionProps_2<T> & {
-            ref?: React.Ref<HTMLDivElement>;
-        }): JSX.Element;
+        (props: SelectOptionProps_2): JSX.Element;
         displayName: string;
     };
+    /**
+     * # Select.OptionGroup
+     *
+     * A container for grouping related options with an optional label.
+     * Provides visual separation and semantic grouping of options.
+     *
+     * Option groups help organize large lists of options into logical
+     * categories with proper accessibility support.
+     *
+     * @example
+     * ```tsx
+     * <Select.Options>
+     *   <Select.OptionGroup label="Fruits">
+     *     <Select.Option id="apple">Apple</Select.Option>
+     *     <Select.Option id="banana">Banana</Select.Option>
+     *   </Select.OptionGroup>
+     *   <Select.OptionGroup label="Vegetables">
+     *     <Select.Option id="carrot">Carrot</Select.Option>
+     *     <Select.Option id="broccoli">Broccoli</Select.Option>
+     *   </Select.OptionGroup>
+     * </Select.Options>
+     * ```
+     */
     OptionGroup: {
         <T extends object>(props: SelectOptionGroupProps_2<T> & {
             ref?: React.Ref<HTMLDivElement>;
@@ -38,9 +138,7 @@ export declare const Select: {
 };
 
 export declare const _SelectOption: {
-    <T extends object>({ ref, ...restProps }: SelectOptionProps<T> & {
-        ref?: React.Ref<HTMLDivElement>;
-    }): JSX.Element;
+    (props: SelectOptionProps): JSX.Element;
     displayName: string;
 };
 
@@ -51,16 +149,19 @@ export declare const _SelectOptionGroup: {
     displayName: string;
 };
 
-export declare interface SelectOptionGroupProps<T> extends ListBoxSectionProps<T>, Omit<SelectOptionGroupSlotProps, keyof ListBoxSectionProps<T>> {
+export declare type SelectOptionGroupProps<T> = ListBoxSectionProps<T> & Omit<SelectOptionGroupSlotProps, keyof ListBoxSectionProps<T>> & {
     /** the label for the section */
     label: string;
-}
+};
 
-declare interface SelectOptionGroupSlotProps extends HTMLChakraProps<"div"> {
-}
+export declare type SelectOptionGroupSlotProps = HTMLChakraProps<"div">;
 
-export declare interface SelectOptionProps<T> extends Omit<ListBoxItemProps<T>, "onClick" | "translate" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp">, Omit<SelectOptionSlotProps, keyof ListBoxItemProps<T>> {
-}
+export declare type SelectOptionProps = Omit<ListBoxItemProps, "onClick" | "translate" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp"> & Omit<SelectOptionSlotProps, keyof ListBoxItemProps> & {
+    /**
+     * React ref to be forwarded to the option element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};
 
 export declare const _SelectOptions: {
     <T extends object>(props: SelectOptionsProps<T> & {
@@ -69,14 +170,17 @@ export declare const _SelectOptions: {
     displayName: string;
 };
 
-declare interface SelectOptionSlotProps extends HTMLChakraProps<"div"> {
-}
+export declare type SelectOptionSlotProps = HTMLChakraProps<"div">;
 
 export declare interface SelectOptionsProps<T> extends ListBoxProps<T>, Omit<SelectOptionsSlotProps, keyof ListBoxProps<T>> {
 }
 
-declare interface SelectOptionsSlotProps extends HTMLChakraProps<"div"> {
-}
+export declare type SelectOptionsSlotProps = HTMLChakraProps<"div">;
+
+export declare type SelectRecipeProps = {
+    size?: SlotRecipeProps<"select">["size"];
+    variant?: SlotRecipeProps<"select">["variant"];
+};
 
 /**
  * # Select
@@ -90,7 +194,7 @@ export declare const _SelectRoot: {
     displayName: string;
 };
 
-export declare interface SelectRootProps extends SelectRootSlotProps, SelectProps {
+export declare type SelectRootProps = SelectRootSlotProps & SelectProps & {
     /** set to true if Select is currently busy with something */
     isLoading?: boolean;
     /** Children must be ReactNode, no render props/functions allowed */
@@ -106,80 +210,13 @@ export declare interface SelectRootProps extends SelectRootSlotProps, SelectProp
      * React ref to be forwarded to the root element
      */
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
-declare interface SelectRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof selectSlotRecipe> & SelectProps<object>> {
-}
+export declare type SelectRootSlotProps = HTMLChakraProps<"div", SelectRecipeProps & SelectProps<object>>;
 
-/**
- * Recipe configuration for the Select component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const selectSlotRecipe: SlotRecipeDefinition<"trigger" | "option" | "root" | "leadingElement" | "triggerLabel" | "options" | "optionGroup", {
-size: {
-sm: {
-root: {};
-trigger: {
-px: "300";
-gap: "100";
-h: "800";
-textStyle: "sm";
-};
-leadingElement: {
-"& > svg": {
-boxSize: "400";
-};
-};
-};
-md: {
-root: {};
-trigger: {
-h: "1000";
-px: "400";
-gap: "200";
-textStyle: "md";
-};
-leadingElement: {
-"& > svg": {
-boxSize: "500";
-};
-};
-};
-};
-variant: {
-outline: {
-root: {
-bg: "primary.1";
-"&:hover": {
-bg: "primary.2";
-};
-};
-trigger: {
-"--border-width": "sizes.25";
-"--border-color": "colors.neutral.7";
-};
-};
-ghost: {
-root: {
-bg: "transparent";
-"&:hover": {
-bg: "primaryAlpha.2";
-};
-};
-trigger: {
-"--border-width": "sizes.25";
-"--border-color": "transparent";
-};
-};
-};
-isClearable: {
-false: {
-triggerLabel: {
-"--button-safespace": "sizes.1000";
-};
-};
-};
-}>;
+export declare type SelectTriggerLabelSlotProps = HTMLChakraProps<"span">;
+
+export declare type SelectTriggerSlotProps = HTMLChakraProps<"button">;
 
 export { }
 

package/dist/separator.d.ts

@@ -1,10 +1,7 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeDefinition } from '@chakra-ui/react';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SeparatorProps as SeparatorProps_2 } from 'react-aria-components';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
 /**
  * Separator
@@ -26,55 +23,34 @@ export declare const Separator: {
 };
 
 /**
- * Main props interface for the Separator component.
+ * Main props type for the Separator component.
  * Extends SeparatorVariantProps to include both root props and variant props,
  * while adding support for React Aria separator props.
  */
-export declare interface SeparatorProps extends Omit<SeparatorVariantProps, "orientation">, Pick<SeparatorProps_2, "orientation"> {
-    /** The orientation of the separator */
-    orientation?: "horizontal" | "vertical";
+export declare type SeparatorProps = SeparatorVariantProps & {
     /** Reference to the separator element */
     ref?: React.Ref<HTMLDivElement>;
-}
-
-/**
- * Recipe configuration for the Separator component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const separatorRecipe: RecipeDefinition<    {
-orientation: {
-horizontal: {
-width: "100%";
-height: "25";
-};
-vertical: {
-width: "25";
-height: "100%";
-};
 };
-}>;
 
 /**
- * Base recipe props interface that combines Chakra UI's recipe props
+ * Base recipe props type that combines Chakra UI's recipe props
  * with the unstyled prop option for the div element.
  */
-export declare interface SeparatorRecipeProps extends RecipeProps<"div">, UnstyledProp {
-}
+export declare type SeparatorRecipeProps = RecipeProps<"separator"> & UnstyledProp;
 
 /**
- * Root props interface that extends Chakra's HTML props with our recipe props.
+ * Root props type 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.
  */
-export declare interface SeparatorRootProps extends HTMLChakraProps<"div", SeparatorRecipeProps> {
-}
+export declare type SeparatorRootProps = HTMLChakraProps<"div", SeparatorRecipeProps>;
 
 /**
  * Combines the root props with Chakra UI's recipe variant props.
  * This allows the component to accept both structural props from Root
  * and styling variants from the recipe.
  */
-declare type SeparatorVariantProps = SeparatorRootProps & RecipeVariantProps<typeof separatorRecipe> & {
+declare type SeparatorVariantProps = SeparatorRootProps & {
     [key: `data-${string}`]: unknown;
 };
 

package/dist/simple-grid.d.ts

@@ -18,10 +18,10 @@ export declare const SimpleGrid: {
  *
  * @see {@link https://nimbus-documentation.vercel.app/components/layout/simplegrid}
  */
-export declare interface SimpleGridProps extends SimpleGridProps_2 {
+export declare type SimpleGridProps = SimpleGridProps_2 & {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 export { }
 

package/dist/split-button.d.ts

@@ -1,32 +1,36 @@
 import { AriaButtonProps } from 'react-aria';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { MenuProps } from 'react-aria-components';
 import { MenuTriggerProps } from 'react-aria-components';
 import { ReactNode } from 'react';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
-declare interface ButtonProps extends FunctionalButtonProps {
+declare type ButtonProps = ButtonRootProps & FunctionalButtonProps & {
     slot?: string | null | undefined;
     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 type ButtonRecipeProps = {
+    size?: RecipeProps<"button">["size"];
+    variant?: RecipeProps<"button">["variant"];
+    tone?: RecipeProps<"button">["tone"];
+} & 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 ButtonRootProps extends Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> {
+declare type ButtonRootProps = Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> & {
     slot?: string | null | undefined;
-}
+};
 
 /** combine chakra-button props with aria-button props */
 declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, keyof AriaButtonProps | "slot"> & {
@@ -49,7 +53,11 @@ export declare const SplitButton: {
     displayName: string;
 };
 
-export declare interface SplitButtonProps extends Omit<MenuTriggerProps, "trigger" | "children">, Required<Pick<MenuProps<object>, "onAction">>, Pick<ButtonProps, "size" | "variant" | "tone" | "isDisabled"> {
+export declare type SplitButtonButtonGroupSlotProps = HTMLChakraProps<"div">;
+
+export declare type SplitButtonPrimaryButtonSlotProps = HTMLChakraProps<"button">;
+
+export declare type SplitButtonProps = SplitButtonRecipeProps & Pick<ButtonProps, "size" | "tone" | "variant" | "isDisabled"> & Omit<MenuTriggerProps, "trigger" | "children"> & Required<Pick<MenuProps<object>, "onAction">> & {
     /**
      * Accessibility label for the dropdown trigger
      */
@@ -64,7 +72,13 @@ export declare interface SplitButtonProps extends Omit<MenuTriggerProps, "trigge
      * The component automatically selects the first enabled Menu.Item as the primary action.
      */
     children: ReactNode;
-}
+};
+
+declare type SplitButtonRecipeProps = SlotRecipeProps<"splitButton">;
+
+export declare type SplitButtonRootSlotProps = HTMLChakraProps<"div", SplitButtonRecipeProps>;
+
+export declare type SplitButtonTriggerSlotProps = HTMLChakraProps<"button">;
 
 export { }
 

package/dist/stack.d.ts

@@ -13,10 +13,10 @@ export declare const Stack: {
     displayName: string;
 };
 
-export declare interface StackProps extends StackProps_2 {
+export declare type StackProps = StackProps_2 & {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 export { }
 

package/dist/switch.d.ts

@@ -1,8 +1,7 @@
 import { AriaCheckboxProps } from 'react-aria';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 
 /**
  * List of props that should be excluded from the root props when combining with ARIA props
@@ -34,45 +33,9 @@ export declare type SwitchProps = Omit<SwitchRootProps, ExcludedSwitchProps | "o
     ref?: React.Ref<HTMLInputElement>;
 };
 
-/**
- * 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>> {
-}
+declare type SwitchRecipeProps = SlotRecipeProps<"switch">;
 
-/**
- * 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";
-};
-};
-};
-}>;
+declare type SwitchRootProps = HTMLChakraProps<"label", SwitchRecipeProps>;
 
 export { }