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

package/dist/components.d.ts

@@ -1,32 +1,34 @@
 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 { ModalOverlayProps } from 'react-aria-components';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
-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;
-}
+};
 
 export declare const DialogBody: {
     (props: DialogBodyProps): JSX.Element;
@@ -38,7 +40,7 @@ export declare const DialogBody: {
  *
  * The main body content section of the dialog.
  */
-declare interface DialogBodyProps extends DialogBodySlotProps {
+declare type DialogBodyProps = DialogBodySlotProps & {
     /**
      * The body content
      */
@@ -47,7 +49,7 @@ declare interface DialogBodyProps extends DialogBodySlotProps {
      * The ref to the dialog body
      */
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 declare type DialogBodySlotProps = HTMLChakraProps<"div">;
 
@@ -62,13 +64,13 @@ export declare const DialogCloseTrigger: {
  * A button that closes the dialog when activated.
  * Displays an IconButton with an X icon by default.
  */
-declare interface DialogCloseTriggerProps extends Omit<IconButtonProps, "aria-label"> {
+declare type DialogCloseTriggerProps = Omit<IconButtonProps, "aria-label"> & {
     /**
      * Accessible label for the close button
      * @default "Close dialog"
      */
     "aria-label"?: string;
-}
+};
 
 export declare const DialogContent: {
     (props: DialogContentProps): JSX.Element;
@@ -81,7 +83,7 @@ export declare const DialogContent: {
  * The main dialog content container that wraps the React Aria Dialog and Dialog.
  * Configuration (size, placement, etc.) is inherited from Dialog.Root via context.
  */
-declare interface DialogContentProps extends DialogModalOverlaySlotProps {
+declare type DialogContentProps = DialogModalOverlaySlotProps & {
     /**
      * The dialog content
      */
@@ -90,7 +92,7 @@ declare interface DialogContentProps extends DialogModalOverlaySlotProps {
      * The ref to the dialog content
      */
     ref?: React.RefObject<HTMLDivElement>;
-}
+};
 
 export declare const DialogFooter: {
     (props: DialogFooterProps): JSX.Element;
@@ -102,7 +104,7 @@ export declare const DialogFooter: {
  *
  * The footer section of the dialog, typically containing action buttons.
  */
-declare interface DialogFooterProps extends DialogFooterSlotProps {
+declare type DialogFooterProps = DialogFooterSlotProps & {
     /**
      * The footer content (usually buttons)
      */
@@ -111,7 +113,7 @@ declare interface DialogFooterProps extends DialogFooterSlotProps {
      * The ref to the dialog footer
      */
     ref?: React.Ref<HTMLElement>;
-}
+};
 
 declare type DialogFooterSlotProps = HTMLChakraProps<"footer">;
 
@@ -125,7 +127,7 @@ export declare const DialogHeader: {
  *
  * The header section of the dialog content.
  */
-declare interface DialogHeaderProps extends DialogHeaderSlotProps {
+declare type DialogHeaderProps = DialogHeaderSlotProps & {
     /**
      * The header content
      */
@@ -134,12 +136,17 @@ declare interface DialogHeaderProps extends DialogHeaderSlotProps {
      * The ref to the dialog header
      */
     ref?: React.Ref<HTMLElement>;
-}
+};
 
 declare type DialogHeaderSlotProps = HTMLChakraProps<"header">;
 
 declare type DialogModalOverlaySlotProps = HTMLChakraProps<"div">;
 
+declare type DialogRecipeProps = {
+    placement?: SlotRecipeProps<"dialog">["placement"];
+    scrollBehavior?: SlotRecipeProps<"dialog">["scrollBehavior"];
+};
+
 export declare const DialogRoot: {
     (props: DialogRootProps): JSX.Element;
     displayName: string;
@@ -154,7 +161,7 @@ export declare const DialogRoot: {
  * This component handles configuration through recipe variants that are passed
  * down to child components via context.
  */
-declare interface DialogRootProps extends RecipeVariantProps<typeof dialogSlotRecipe> {
+declare type DialogRootProps = DialogRootSlotProps & {
     /**
      * The children components (Trigger, Content, etc.)
      */
@@ -195,62 +202,9 @@ declare interface DialogRootProps extends RecipeVariantProps<typeof dialogSlotRe
      * a `slot`-property set to `title`.
      */
     "aria-label"?: string;
-}
-
-/**
- * Dialog recipe - styling for Dialog component overlays
- * Supports center positioning, various sizes, and motion presets for accessible dialog experiences
- */
-declare const dialogSlotRecipe: SlotRecipeDefinition<"trigger" | "modalOverlay" | "modal" | "content" | "title" | "closeTrigger" | "header" | "body" | "footer", {
-placement: {
-center: {
-modal: {
-alignItems: "center";
-};
-content: {
-"--dialog-base-margin": "auto";
-mx: "auto";
-};
-};
-top: {
-modal: {
-alignItems: "flex-start";
-};
-content: {
-"--dialog-base-margin": "spacing.1600";
-mx: "auto";
 };
-};
-bottom: {
-modal: {
-alignItems: "flex-end";
-};
-content: {
-"--dialog-base-margin": "spacing.1600";
-mx: "auto";
-};
-};
-};
-scrollBehavior: {
-inside: {
-modal: {
-overflow: "hidden";
-};
-content: {
-maxH: "calc(100% - 7.5rem)";
-};
-body: {
-overflow: "auto";
-focusVisibleRing: "outside";
-};
-};
-outside: {
-modal: {
-overflow: "auto";
-};
-};
-};
-}>;
+
+declare type DialogRootSlotProps = HTMLChakraProps<"div", DialogRecipeProps>;
 
 export declare const DialogTitle: {
     (props: DialogTitleProps): JSX.Element;
@@ -262,7 +216,7 @@ export declare const DialogTitle: {
  *
  * The accessible title element for the dialog.
  */
-declare interface DialogTitleProps extends DialogTitleSlotProps {
+declare type DialogTitleProps = DialogTitleSlotProps & {
     /**
      * The title text
      */
@@ -271,7 +225,7 @@ declare interface DialogTitleProps extends DialogTitleSlotProps {
      * The ref to the dialog title
      */
     ref?: React.Ref<HTMLHeadingElement>;
-}
+};
 
 declare type DialogTitleSlotProps = HTMLChakraProps<"h2">;
 
@@ -285,7 +239,7 @@ export declare const DialogTrigger: {
  *
  * The trigger element that opens the dialog when activated.
  */
-declare interface DialogTriggerProps extends DialogTriggerSlotProps {
+declare type DialogTriggerProps = DialogTriggerSlotProps & {
     /**
      * The trigger content
      */
@@ -304,7 +258,7 @@ declare interface DialogTriggerProps extends DialogTriggerSlotProps {
      * The ref to the trigger html-button
      */
     ref?: React.RefObject<HTMLButtonElement>;
-}
+};
 
 declare type DialogTriggerSlotProps = HTMLChakraProps<"button">;
 
@@ -316,11 +270,11 @@ declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, key
 /**
  * Main props interface for the IconButton component.
  */
-declare interface IconButtonProps extends ButtonProps {
+declare type IconButtonProps = ButtonProps & {
     /** explains the intended action, required for accessibility */
     "aria-label": string;
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
 export { }