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

package/dist/field-errors.d.ts

@@ -39,7 +39,7 @@ export declare const FieldErrors: {
 /**
  * Props for FieldErrors component
  */
-export declare interface FieldErrorsProps extends FieldErrorsRootProps {
+export declare type FieldErrorsProps = FieldErrorsRootProps & {
     /**
      * ID of the error field for accessibility
      */
@@ -84,22 +84,13 @@ export declare interface FieldErrorsProps extends FieldErrorsRootProps {
         notFound?: ReactNode;
         blocked?: ReactNode;
     };
-}
-
-declare interface FieldErrorsRootProps extends HTMLChakraProps<"div"> {
-    id?: string;
-    role?: string;
-    children?: ReactNode;
-}
+};
 
-/**
- * Props for FieldErrors root slot
- */
-declare interface FieldErrorsRootProps {
+declare type FieldErrorsRootProps = HTMLChakraProps<"div"> & {
     id?: string;
     role?: string;
     children?: ReactNode;
-}
+};
 
 /**
  * Built-in error types that FieldErrors can handle automatically

package/dist/form-field.d.ts

@@ -1,35 +1,32 @@
-import { FormFieldDescriptionSlotProps } from './form-field.slots';
-import { FormFieldErrorSlotProps } from './form-field.slots';
-import { FormFieldInputSlotProps } from './form-field.slots';
-import { FormFieldLabelSlotProps } from './form-field.slots';
+import { FormFieldDescriptionSlotProps as FormFieldDescriptionSlotProps_2 } from './form-field.types';
+import { FormFieldErrorSlotProps as FormFieldErrorSlotProps_2 } from './form-field.types';
+import { FormFieldInputSlotProps as FormFieldInputSlotProps_2 } from './form-field.types';
+import { FormFieldLabelSlotProps as FormFieldLabelSlotProps_2 } from './form-field.types';
 import { FormFieldProps as FormFieldProps_2 } from './form-field.types';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
 export declare const FormField: {
     Root: ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: FormFieldProps_2) => JSX.Element;
-    Label: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps) => null;
-    Input: ({ children, ...inputSlotProps }: FormFieldInputSlotProps) => null;
-    Description: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps) => null;
-    Error: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps) => null;
+    Label: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps_2) => null;
+    Input: ({ children, ...inputSlotProps }: FormFieldInputSlotProps_2) => null;
+    Description: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps_2) => null;
+    Error: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps_2) => null;
     InfoBox: ({ children }: {
         children: ReactNode;
     }) => null;
 };
 
-export declare const _FormFieldDescription: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps_2) => null;
+export declare const _FormFieldDescription: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps) => null;
 
-declare interface FormFieldDescriptionSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldDescriptionSlotProps = HTMLChakraProps<"div">;
 
-export declare const _FormFieldError: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps_2) => null;
+export declare const _FormFieldError: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps) => null;
 
-declare interface FormFieldErrorSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldErrorSlotProps = HTMLChakraProps<"div">;
 
 export declare const _FormFieldInfoBox: ({ children }: FormFieldInfoBoxProps) => null;
 
@@ -40,22 +37,22 @@ declare type FormFieldInfoBoxProps = {
     children: ReactNode;
 };
 
-export declare const _FormFieldInput: ({ children, ...inputSlotProps }: FormFieldInputSlotProps_2) => null;
+export declare const _FormFieldInput: ({ children, ...inputSlotProps }: FormFieldInputSlotProps) => null;
 
-declare interface FormFieldInputSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldInputSlotProps = HTMLChakraProps<"div">;
 
-export declare const _FormFieldLabel: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps_2) => null;
+export declare const _FormFieldLabel: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps) => null;
 
-declare interface FormFieldLabelSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldLabelSlotProps = HTMLChakraProps<"div">;
+
+export declare type FormFieldPopoverSlotProps = HTMLChakraProps<"div">;
 
 /**
  * Main props interface for the FormField component.
  * Extends FormFieldVariantProps to include both root props and variant props,
  * while adding support for React children.
  */
-export declare interface FormFieldProps extends FormFieldRootSlotProps {
+export declare type FormFieldProps = FormFieldRootSlotProps & {
     children?: React.ReactNode;
     /** true if the field is a required field */
     isRequired?: boolean;
@@ -71,57 +68,12 @@ export declare interface FormFieldProps extends FormFieldRootSlotProps {
      * React ref to be forwarded to the root element
      */
     ref?: React.Ref<HTMLDivElement>;
-}
-
-/**
- * Recipe configuration for the FormField component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const formFieldRecipe: SlotRecipeDefinition<"description" | "input" | "label" | "popover" | "root" | "error", {
-size: {
-md: {
-root: {
-"--form-field-font-size": "fontSizes.350";
-"--form-field-line-height": "lineHeights.500";
-};
-};
-sm: {
-root: {
-"--form-field-font-size": "fontSizes.300";
-"--form-field-line-height": "lineHeights.450";
-};
-};
-};
-direction: {
-column: {
-root: {
-gridTemplateAreas: "\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n";
-};
-input: {
-mt: "var(--grid-gap)";
-};
-description: {
-mt: "var(--grid-gap)";
-};
-error: {
-mt: "var(--grid-gap)";
-};
-};
-row: {
-root: {
-gridTemplateAreas: "\n\"label input\"\n\"label description\"\n\"label error\"\n";
-gridTemplateColumns: "auto 1fr";
-gridColumnGap: "200";
-};
-description: {
-mt: "var(--grid-gap)";
-};
-error: {
-mt: "var(--grid-gap)";
-};
 };
+
+export declare type FormFieldRecipeProps = {
+    size?: SlotRecipeProps<"formField">["size"];
+    direction?: SlotRecipeProps<"formField">["direction"];
 };
-}>;
 
 /**
  * # FormField
@@ -132,8 +84,7 @@ mt: "var(--grid-gap)";
  */
 export declare const _FormFieldRoot: ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: FormFieldProps) => JSX.Element;
 
-declare interface FormFieldRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp> {
-}
+export declare type FormFieldRootSlotProps = HTMLChakraProps<"div", FormFieldRecipeProps & UnstyledProp>;
 
 export { }
 

package/dist/grid.d.ts

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

package/dist/group.d.ts

@@ -21,16 +21,14 @@ export declare interface GroupProps extends Omit<GroupSlotProps, DefaultExcluded
  * Base recipe props interface that combines Chakra UI's recipe props
  * with the unstyled prop option for the div element.
  */
-declare interface GroupRecipeProps extends RecipeProps<"div">, UnstyledProp {
-}
+declare type GroupRecipeProps = RecipeProps<"group"> & 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 GroupSlotProps extends HTMLChakraProps<"div", GroupRecipeProps> {
-}
+export declare type GroupSlotProps = HTMLChakraProps<"div", GroupRecipeProps>;
 
 export { }
 

package/dist/heading.d.ts

@@ -19,7 +19,7 @@ export declare const Heading: {
  * @property {React.Ref<HTMLHeadingElement>} [ref] - Ref to the underlying heading element.
  * @property {string | null | undefined} [slot] - Slot attribute for custom element slotting.
  */
-export declare interface HeadingProps extends Omit<HeadingProps_2, "slot"> {
+export declare type HeadingProps = HeadingRecipeVariantProps & Omit<HeadingProps_2, "slot"> & {
     /**
      * Ref to the underlying heading element.
      */
@@ -28,7 +28,20 @@ export declare interface HeadingProps extends Omit<HeadingProps_2, "slot"> {
      * Slot attribute for custom element slotting.
      */
     slot?: string | null | undefined;
-}
+    /**
+     * Size variant
+     * @default "xl"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+};
+
+declare type HeadingRecipeVariantProps = {
+    /**
+     * Size variant
+     * @default "xl"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+};
 
 export { }
 

package/dist/icon-button.d.ts

@@ -1,29 +1,32 @@
 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 { RecipeProps } from '@chakra-ui/react/styled-system';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { RecipeProps } 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"> & {
@@ -45,11 +48,11 @@ export declare const IconButton: {
 /**
  * Main props interface for the IconButton component.
  */
-export declare interface IconButtonProps extends ButtonProps {
+export declare type IconButtonProps = ButtonProps & {
     /** explains the intended action, required for accessibility */
     "aria-label": string;
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
 export { }
 

package/dist/icon-toggle-button.d.ts

@@ -1,15 +1,13 @@
-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 { RecipeVariantProps } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
 import { ToggleButtonProps as ToggleButtonProps_2 } from 'react-aria-components';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
 
 /**
  * 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";
+declare type ExcludedProps = "css" | "colorScheme" | "recipe" | "as" | "asChild";
 
 /**
  * # IconToggleButton
@@ -23,121 +21,27 @@ export declare const IconToggleButton: {
     displayName: string;
 };
 
-export declare interface IconToggleButtonProps extends Omit<ToggleButtonProps, "aria-label"> {
+export declare type IconToggleButtonProps = Omit<ToggleButtonProps, "aria-label"> & {
     /** explains the intended action, required for accessibility */
     "aria-label": string;
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
-declare interface ToggleButtonProps extends ToggleButtonProps_2, Omit<ToggleButtonRootProps, keyof ToggleButtonProps_2 | ExcludedProps> {
+declare type ToggleButtonProps = Omit<ToggleButtonRootProps, keyof ToggleButtonProps_2 | ExcludedProps> & ToggleButtonProps_2 & {
     /**
      * 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.
+ * Base recipe props interface.
  */
-declare interface ToggleButtonRecipeProps extends RecipeVariantProps<typeof toggleButtonRecipe>, UnstyledProp {
-}
+declare type ToggleButtonRecipeProps = {
+    size?: RecipeProps<"toggleButton">["size"];
+    variant?: RecipeProps<"toggleButton">["variant"];
+    tone?: RecipeProps<"toggleButton">["tone"];
+};
 
 /**
  * Root props interface that extends Chakra's HTML props with our recipe props.

package/dist/icon.d.ts

@@ -1,14 +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 { UnstyledProp } from '@chakra-ui/react/styled-system';
-
-declare interface BoxProps extends HTMLChakraProps<"div"> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-}
+import { RecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
 /**
  * # Icon
@@ -27,7 +20,7 @@ export declare const Icon: {
  * Extends IconVariantProps to include both root props and variant props,
  * while adding support for React children.
  */
-export declare interface IconProps extends IconVariantProps {
+export declare type IconProps = IconVariantProps & {
     /**
      * Accepts only a single child - an icon-component or SVG html-element.
      * Alternatively, as shorthand, use the `as` property.
@@ -36,11 +29,11 @@ export declare interface IconProps extends IconVariantProps {
     /**
      * Colors the icon, accepts a color token from the theme or a custom value
      */
-    color?: BoxProps["color"];
+    color?: IconRootSlotProps["color"];
     /**
      * Accepts a React component to be rendered as the icon .
      */
-    as?: BoxProps["as"];
+    as?: IconRootSlotProps["as"];
     /**
      * Ref to the icon element
      */
@@ -50,59 +43,27 @@ export declare interface IconProps extends IconVariantProps {
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/slot
      */
     slot?: string | null | undefined;
-}
-
-/**
- * Recipe configuration for the Icon component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const iconRecipe: RecipeDefinition<    {
-/**
-* allows applying a predefined size to the icon
-*/
-size: {
-"2xs": {
-boxSize: "600";
-};
-xs: {
-boxSize: "800";
-};
-sm: {
-boxSize: "900";
-};
-md: {
-boxSize: "1000";
-};
-lg: {
-boxSize: "1200";
-};
-xl: {
-boxSize: "1400";
-};
 };
-}>;
 
 /**
  * Base recipe props interface that combines Chakra UI's recipe props
  * with the unstyled prop option for the svg element.
  */
-declare interface IconRecipeProps extends RecipeProps<"svg">, UnstyledProp {
-}
+declare type IconRecipeProps = RecipeProps<"icon"> & 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 IconRootSlotProps extends HTMLChakraProps<"svg", IconRecipeProps> {
-}
+export declare type IconRootSlotProps = HTMLChakraProps<"svg", IconRecipeProps>;
 
 /**
  * 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 IconVariantProps = Omit<IconRootSlotProps, keyof React.SVGProps<SVGSVGElement> | "css" | "unstyled" | "asChild" | "recipe"> & RecipeVariantProps<typeof iconRecipe>;
+declare type IconVariantProps = Omit<IconRootSlotProps, keyof React.SVGProps<SVGSVGElement> | "css" | "unstyled" | "asChild" | "recipe">;
 
 export { }
 

package/dist/image.d.ts

@@ -14,8 +14,7 @@ declare const Image_2: {
 };
 export { Image_2 as Image }
 
-export declare interface ImageProps extends ImageProps_2 {
-}
+export declare type ImageProps = ImageProps_2;
 
 export { }