@commercetools/nimbus 2.0.1-rc2 → 2.0.1-rc4

package/dist/components/draggable-list/draggable-list.types.d.ts

@@ -0,0 +1,141 @@
+import { ReactNode, Ref } from 'react';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+import { FormFieldProps } from '..';
+import { GridListProps as RaGridListProps, GridListItemProps as RaGridListItemProps, Key } from 'react-aria-components';
+type DraggableListRecipeProps = {
+    /**
+     * Size variant of the draggable list
+     * @default "md"
+     */
+    size?: SlotRecipeProps<"draggableList">["size"];
+};
+export type DraggableListRootSlotProps = HTMLChakraProps<"div", DraggableListRecipeProps>;
+export type DraggableListItemSlotProps = HTMLChakraProps<"div">;
+export type DraggableListItemContentSlotProps = HTMLChakraProps<"div">;
+export type DraggableListEmptySlotProps = HTMLChakraProps<"div">;
+/**
+ * Base data shape for draggable list items
+ *
+ * @property key - Unique identifier for the item (required for default rendering)
+ * @property label - Display content for the item (required for default rendering)
+ *
+ * If either `key` or `label` are not defined, you must provide custom children
+ * to the DraggableList.Root component.
+ */
+export type DraggableListItemData = {
+    key?: string;
+    label?: ReactNode;
+} & Record<string, unknown>;
+/**
+ * Data shape for items used in DraggableList.Field
+ *
+ * Extends DraggableListItemData with required key and label properties.
+ * This ensures all items have the necessary data for default rendering in form fields.
+ *
+ * @property key - Unique identifier for the item (required)
+ * @property label - Display content for the item (required)
+ */
+export type DraggableListFieldItemData = DraggableListItemData & {
+    key: string;
+    label: string;
+};
+/**
+ * Props for the DraggableList.Root component
+ *
+ * The root component that provides context and state management for the draggable list.
+ * Uses React Aria's GridList for accessibility and drag-and-drop functionality.
+ *
+ * @template T - Type for item data displayed in the list. Items array type is `T[]`.
+ */
+export type DraggableListRootProps<T extends DraggableListItemData> = Omit<RaGridListProps<T>, "autoFocus" | "className" | "style" | "translate" | "renderEmptyState"> & Omit<HTMLChakraProps<"div", SlotRecipeProps<"draggableList">>, "children" | "slot"> & {
+    /**
+     * Array of items to display in the list.
+     * If `children` is not provided, each item must have both `key` and `label` properties.
+     */
+    items?: T[];
+    /**
+     * Callback fired when the list is updated by drag-and-drop or item removal
+     * @param updatedItems - The new array of items after the update
+     */
+    onUpdateItems?: (updatedItems: T[]) => void;
+    /**
+     * Ref to the root container element
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Whether to show a remove button for each item.
+     * When an item is removed, `onUpdateItems` is called with the updated list.
+     * @default false
+     */
+    removableItems?: boolean;
+    /**
+     * Custom render function for list items.
+     * If not provided, items will be rendered using their `key` and `label` properties.
+     */
+    children?: RaGridListProps<T>["children"];
+    /**
+     * Content to display when the list is empty
+     * @default "drop items here"
+     */
+    renderEmptyState?: ReactNode;
+};
+/**
+ * Props for the DraggableList.Item component
+ *
+ * The item component renders each individual item in the draggable list.
+ * Supports drag-and-drop interaction and optional removal.
+ *
+ * @template T - Type for the item's data object
+ */
+export type DraggableListItemProps<T extends DraggableListItemData> = Omit<RaGridListItemProps<T>, "className" | "onClick" | "style" | "translate"> & Omit<DraggableListItemSlotProps, "children"> & {
+    /**
+     * The unique identifier for the item
+     */
+    id?: string;
+    /**
+     * Ref to the item container element
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The content to display for this item
+     */
+    children?: ReactNode;
+    /**
+     * Callback fired when the remove button is pressed.
+     * The remove button is only rendered when this callback is provided.
+     * @param key - The key of the item being removed
+     */
+    onRemoveItem?: (key: Key) => void;
+};
+/**
+ * Props for the DraggableList.Field component
+ *
+ * A form field wrapper for DraggableList that combines the draggable list
+ * functionality with form field labeling, description, and error handling.
+ *
+ * This component is configured via props only and does not accept children.
+ * Items are rendered using their `key` and `label` properties.
+ *
+ * @template T - Type for item data, must extend DraggableListFieldItemData
+ */
+export type DraggableListFieldProps<T extends DraggableListFieldItemData> = Omit<DraggableListRootProps<T>, "children" | "direction"> & Omit<FormFieldProps, "slot"> & {
+    /**
+     * The form field label (required)
+     *
+     * If a visible label is not necessary, use `DraggableList.Root`
+     */
+    label: ReactNode;
+    /**
+     * Optional description text displayed below the label
+     */
+    description?: ReactNode;
+    /**
+     * Error message to display when validation fails
+     */
+    error?: ReactNode;
+    /**
+     * Optional info box content for additional context
+     */
+    infoBox?: ReactNode;
+};
+export {};

package/dist/components/draggable-list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './draggable-list';
+export * from './draggable-list.types';

package/dist/components/draggable-list/utils/draggable-list.test-data.d.ts

@@ -0,0 +1,3 @@
+import { DraggableListItemData, DraggableListFieldItemData } from '../draggable-list.types';
+export declare const items: DraggableListItemData[];
+export declare const fieldItems: DraggableListFieldItemData[];

package/dist/components/draggable-list/utils/draggable-list.test-utils.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/drawer/components/drawer.body.d.ts

@@ -0,0 +1,5 @@
+import { DrawerBodyProps } from '../drawer.types';
+export declare const DrawerBody: {
+    (props: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/drawer.close-trigger.d.ts

@@ -0,0 +1,5 @@
+import { DrawerCloseTriggerProps } from '../drawer.types';
+export declare const DrawerCloseTrigger: {
+    (props: DrawerCloseTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/drawer.content.d.ts

@@ -0,0 +1,5 @@
+import { DrawerContentProps } from '../drawer.types';
+export declare const DrawerContent: {
+    (props: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/drawer.context.d.ts

@@ -0,0 +1,19 @@
+import { DrawerRootProps } from '../drawer.types';
+/**
+ * Context value containing drawer configuration passed from Root to child components
+ */
+export type DrawerContextValue = DrawerRootProps;
+export declare const DrawerContext: import('react').Context<DrawerRootProps | undefined>;
+/**
+ * Hook to access drawer configuration from DrawerContext
+ * @returns Drawer configuration from context
+ * @throws Error if used outside of Drawer.Root
+ */
+export declare const useDrawerRootContext: () => DrawerContextValue;
+/**
+ * Provider component that passes drawer configuration down to child components
+ */
+export declare const DrawerProvider: ({ children, value, }: {
+    children: React.ReactNode;
+    value: DrawerContextValue;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/components/drawer.footer.d.ts

@@ -0,0 +1,5 @@
+import { DrawerFooterProps } from '../drawer.types';
+export declare const DrawerFooter: {
+    (props: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/drawer.header.d.ts

@@ -0,0 +1,5 @@
+import { DrawerHeaderProps } from '../drawer.types';
+export declare const DrawerHeader: {
+    (props: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/drawer.root.d.ts

@@ -0,0 +1,5 @@
+import { DrawerRootProps } from '../drawer.types';
+export declare const DrawerRoot: {
+    (props: DrawerRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/drawer.title.d.ts

@@ -0,0 +1,5 @@
+import { DrawerTitleProps } from '../drawer.types';
+export declare const DrawerTitle: {
+    (props: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/drawer.trigger.d.ts

@@ -0,0 +1,5 @@
+import { DrawerTriggerProps } from '../drawer.types';
+export declare const DrawerTrigger: {
+    ({ ref: forwardedRef, children, asChild, ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drawer/components/index.d.ts

@@ -0,0 +1,8 @@
+export { DrawerRoot } from './drawer.root';
+export { DrawerTrigger } from './drawer.trigger';
+export { DrawerContent } from './drawer.content';
+export { DrawerHeader } from './drawer.header';
+export { DrawerBody } from './drawer.body';
+export { DrawerFooter } from './drawer.footer';
+export { DrawerTitle } from './drawer.title';
+export { DrawerCloseTrigger } from './drawer.close-trigger';

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,228 @@
+import { DrawerRoot } from './components/drawer.root';
+import { DrawerTrigger } from './components/drawer.trigger';
+import { DrawerContent } from './components/drawer.content';
+import { DrawerHeader } from './components/drawer.header';
+import { DrawerBody } from './components/drawer.body';
+import { DrawerFooter } from './components/drawer.footer';
+import { DrawerTitle } from './components/drawer.title';
+import { DrawerCloseTrigger } from './components/drawer.close-trigger';
+/**
+ * Drawer
+ * ============================================================
+ * A foundational drawer component for overlays that require user attention.
+ * Built for accessibility and WCAG 2.1 AA compliance.
+ *
+ * Features:
+ * - Controlled and uncontrolled modes
+ * - Customizable placement, size, and animations
+ * - Focus management and keyboard navigation
+ * - Click-outside and Escape key dismissal
+ * - Portal rendering support
+ * - Backdrop overlay with animations
+ *
+ * @example
+ * ```tsx
+ * <Drawer.Root>
+ *   <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+ *   <Drawer.Content size="md" placement="center">
+ *     <Drawer.Header>
+ *       <Drawer.Title>Drawer Title</Drawer.Title>
+ *       <Drawer.CloseTrigger>×</Drawer.CloseTrigger>
+ *     </Drawer.Header>
+ *     <Drawer.Body>
+ *       Drawer content goes here
+ *     </Drawer.Body>
+ *     <Drawer.Footer>
+ *       <button>Cancel</button>
+ *       <button>Save</button>
+ *     </Drawer.Footer>
+ *   </Drawer.Content>
+ * </Drawer.Root>
+ * ```
+ * @see https://nimbus-documentation.vercel.app/components/feedback/drawer
+ */
+export declare const Drawer: {
+    /**
+     * # Drawer.Root
+     *
+     * The root component that provides context and state management for the drawer.
+     * Handles accessibility and keyboard interaction.
+     *
+     * This component must wrap all drawer parts (Trigger, Content, etc.) and provides
+     * the drawer open/close state and variant styling context.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Root>
+     *   <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+     *   <Drawer.Content>
+     *     <Drawer.Header>
+     *       <Drawer.Title>Drawer Title</Drawer.Title>
+     *     </Drawer.Header>
+     *     <Drawer.Body>Drawer content</Drawer.Body>
+     *   </Drawer.Content>
+     * </Drawer.Root>
+     * ```
+     */
+    Root: {
+        (props: import('./drawer.types').DrawerRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Drawer.Trigger
+     *
+     * The trigger element that opens the drawer when activated.
+     * Provides accessibility and keyboard support.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Root>
+     *   <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+     *   <Drawer.Content>...</Drawer.Content>
+     * </Drawer.Root>
+     * ```
+     */
+    Trigger: {
+        ({ ref: forwardedRef, children, asChild, ...props }: import('./drawer.types').DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Drawer.Content
+     *
+     * The main drawer content container that handles portalling, backdrop,
+     * positioning, and content styling.
+     *
+     * This component creates the drawer overlay, positions the content, and provides
+     * accessibility features like focus management and keyboard dismissal.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Root>
+     *   <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+     *   <Drawer.Content size="md" placement="center">
+     *     <Drawer.Header>
+     *       <Drawer.Title>Title</Drawer.Title>
+     *     </Drawer.Header>
+     *     <Drawer.Body>Content</Drawer.Body>
+     *     <Drawer.Footer>Actions</Drawer.Footer>
+     *   </Drawer.Content>
+     * </Drawer.Root>
+     * ```
+     */
+    Content: {
+        (props: import('./drawer.types').DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Drawer.Header
+     *
+     * The header section of the drawer content.
+     * Typically contains the title and close button.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Content>
+     *   <Drawer.Header>
+     *     <Drawer.Title>Drawer Title</Drawer.Title>
+     *     <Drawer.CloseTrigger />
+     *   </Drawer.Header>
+     *   <Drawer.Body>...</Drawer.Body>
+     * </Drawer.Content>
+     * ```
+     */
+    Header: {
+        (props: import('./drawer.types').DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Drawer.Body
+     *
+     * The main body content section of the drawer.
+     * Contains the primary drawer content and handles overflow/scrolling.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Content>
+     *   <Drawer.Header>...</Drawer.Header>
+     *   <Drawer.Body>
+     *     <p>This is the main content of the drawer.</p>
+     *   </Drawer.Body>
+     *   <Drawer.Footer>...</Drawer.Footer>
+     * </Drawer.Content>
+     * ```
+     */
+    Body: {
+        (props: import('./drawer.types').DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Drawer.Footer
+     *
+     * The footer section of the drawer, typically containing action buttons.
+     * Provides consistent spacing and alignment for drawer actions.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Content>
+     *   <Drawer.Header>...</Drawer.Header>
+     *   <Drawer.Body>...</Drawer.Body>
+     *   <Drawer.Footer>
+     *     <Button variant="outline">Cancel</Button>
+     *     <Button>Confirm</Button>
+     *   </Drawer.Footer>
+     * </Drawer.Content>
+     * ```
+     */
+    Footer: {
+        (props: import('./drawer.types').DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Drawer.Title
+     *
+     * The accessible title element for the drawer.
+     * Provides proper accessibility and screen reader support.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Content>
+     *   <Drawer.Header>
+     *     <Drawer.Title>Confirm Action</Drawer.Title>
+     *   </Drawer.Header>
+     *   <Drawer.Body>...</Drawer.Body>
+     * </Drawer.Content>
+     * ```
+     */
+    Title: {
+        (props: import('./drawer.types').DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Drawer.CloseTrigger
+     *
+     * A button that closes the drawer when activated.
+     * Displays an IconButton with a close (X) icon by default.
+     *
+     * The component automatically handles the close behavior,
+     * so no additional onPress handler is needed.
+     *
+     * @example
+     * ```tsx
+     * <Drawer.Root>
+     *   <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+     *   <Drawer.Content>
+     *     <Drawer.Header>
+     *       <Drawer.Title>Title</Drawer.Title>
+     *       <Drawer.CloseTrigger aria-label="Close drawer" />
+     *     </Drawer.Header>
+     *     <Drawer.Body>Content</Drawer.Body>
+     *   </Drawer.Content>
+     * </Drawer.Root>
+     * ```
+     */
+    CloseTrigger: {
+        (props: import('./drawer.types').DrawerCloseTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { DrawerRoot as _DrawerRoot, DrawerTrigger as _DrawerTrigger, DrawerContent as _DrawerContent, DrawerHeader as _DrawerHeader, DrawerBody as _DrawerBody, DrawerFooter as _DrawerFooter, DrawerTitle as _DrawerTitle, DrawerCloseTrigger as _DrawerCloseTrigger, };

package/dist/components/drawer/drawer.i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    closeTrigger: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/components/drawer/drawer.recipe.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Drawer recipe - styling for Drawer component overlays
+ * Supports center positioning, various sizes, and motion presets for accessible drawer experiences
+ */
+export declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "modal" | "trigger" | "title" | "header" | "footer" | "modalOverlay" | "closeTrigger", {
+    showBackdrop: {
+        true: {
+            modalOverlay: {
+                bg: {
+                    _dark: "bg/20";
+                    _light: "fg/20";
+                };
+                backdropFilter: "blur({sizes.100})";
+            };
+        };
+        false: {
+            modalOverlay: {
+                bg: "transparent";
+            };
+        };
+    };
+    placement: {
+        left: {
+            modal: {
+                justifyContent: "flex-start";
+                alignItems: "stretch";
+                "&[data-entering]": {
+                    animationName: "slide-from-left-full";
+                };
+                "&[data-exiting]": {
+                    animationName: "slide-to-left-full";
+                };
+            };
+            content: {
+                "--drawer-base-margin": number;
+                mx: number;
+                height: "100vh";
+                maxH: "100vh";
+                borderRadius: number;
+            };
+        };
+        right: {
+            modal: {
+                justifyContent: "flex-end";
+                alignItems: "stretch";
+                "&[data-entering]": {
+                    animationName: "slide-from-right-full";
+                };
+                "&[data-exiting]": {
+                    animationName: "slide-to-right-full";
+                };
+            };
+            content: {
+                "--drawer-base-margin": number;
+                mx: number;
+                height: "100vh";
+                maxH: "100vh";
+                borderRadius: number;
+            };
+        };
+        top: {
+            modal: {
+                alignItems: "flex-start";
+                justifyContent: "stretch";
+                "&[data-entering]": {
+                    animationName: "slide-from-top-full";
+                };
+                "&[data-exiting]": {
+                    animationName: "slide-to-top-full";
+                };
+            };
+            content: {
+                "--drawer-base-margin": number;
+                mx: number;
+                width: "100vw";
+                borderRadius: number;
+            };
+        };
+        bottom: {
+            modal: {
+                alignItems: "flex-end";
+                justifyContent: "stretch";
+                "&[data-entering]": {
+                    animationName: "slide-from-bottom-full";
+                };
+                "&[data-exiting]": {
+                    animationName: "slide-to-bottom-full";
+                };
+            };
+            content: {
+                "--drawer-base-margin": number;
+                mx: number;
+                width: "100vw";
+                borderRadius: number;
+            };
+        };
+    };
+}>;