@sproutsocial/seeds-react-modal 1.1.1 → 2.0.0

package/.turbo/turbo-build.log

@@ -8,34 +8,34 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js        32.36 KB
+CJS dist/index.js        58.46 KB
 CJS dist/v1/index.js     9.86 KB
-CJS dist/v2/index.js     24.54 KB
-CJS dist/index.js.map    54.80 KB
+CJS dist/v2/index.js     50.48 KB
+CJS dist/index.js.map    201.74 KB
 CJS dist/v1/index.js.map 13.03 KB
-CJS dist/v2/index.js.map 41.40 KB
-CJS ⚡️ Build success in 270ms
-ESM dist/esm/index.js              567.00 B
+CJS dist/v2/index.js.map 188.43 KB
+CJS ⚡️ Build success in 345ms
 ESM dist/esm/v1/index.js           165.00 B
-ESM dist/esm/v2/index.js           786.00 B
+ESM dist/esm/v2/index.js           596.00 B
+ESM dist/esm/index.js              583.00 B
 ESM dist/esm/chunk-IYDY4OPB.js     7.12 KB
-ESM dist/esm/chunk-4ITF4DBY.js     20.28 KB
-ESM dist/esm/index.js.map          963.00 B
+ESM dist/esm/chunk-ETVICNHP.js     45.64 KB
 ESM dist/esm/v1/index.js.map       71.00 B
 ESM dist/esm/v2/index.js.map       71.00 B
+ESM dist/esm/index.js.map          1.05 KB
 ESM dist/esm/chunk-IYDY4OPB.js.map 12.85 KB
-ESM dist/esm/chunk-4ITF4DBY.js.map 40.16 KB
-ESM ⚡️ Build success in 274ms
+ESM dist/esm/chunk-ETVICNHP.js.map 187.52 KB
+ESM ⚡️ Build success in 354ms
 DTS Build start
-DTS ⚡️ Build success in 32911ms
-DTS dist/index.d.ts               973.00 B
-DTS dist/v1/index.d.ts            413.00 B
-DTS dist/v2/index.d.ts            1.35 KB
-DTS dist/Modal-ki8oiGbC.d.ts      2.52 KB
-DTS dist/ModalRail-5PeilhW7.d.ts  7.61 KB
-DTS dist/index.d.mts              976.00 B
-DTS dist/v1/index.d.mts           415.00 B
-DTS dist/v2/index.d.mts           1.35 KB
-DTS dist/Modal-ki8oiGbC.d.mts     2.52 KB
-DTS dist/ModalRail-5PeilhW7.d.mts 7.61 KB
-Done in 37.47s.
+DTS ⚡️ Build success in 31689ms
+DTS dist/index.d.ts                 975.00 B
+DTS dist/v1/index.d.ts              413.00 B
+DTS dist/v2/index.d.ts              1021.00 B
+DTS dist/Modal-ki8oiGbC.d.ts        2.52 KB
+DTS dist/ModalAction-BB7qJtQj.d.ts  17.39 KB
+DTS dist/index.d.mts                978.00 B
+DTS dist/v1/index.d.mts             415.00 B
+DTS dist/v2/index.d.mts             1022.00 B
+DTS dist/Modal-ki8oiGbC.d.mts       2.52 KB
+DTS dist/ModalAction-BB7qJtQj.d.mts 17.39 KB
+Done in 34.53s.

package/CHANGELOG.md

@@ -1,5 +1,180 @@
 # @sproutsocial/seeds-react-modal
 
+## 2.0.0
+
+### Major Changes
+
+- b1c3b44: ## Modal V2 Complete Rewrite
+
+  Complete architectural overhaul of Modal V2 with improved API, accessibility, animations, and mobile responsiveness.
+
+  ### Breaking Changes
+
+  #### Component Name Changes
+
+  - **Root component**: `ModalV2` renamed to `Modal`
+  - **Removed components**: `ModalClose`, `ModalCloseButton`, `ModalTrigger`
+  - **New components**: `ModalBody`, `ModalCloseWrapper`, `ModalAction`, `ModalCustomHeader`, `ModalCustomFooter`
+
+  #### Removed Exports
+
+  - **Removed z-index constants**: `DEFAULT_MODAL_Z_INDEX`, `DEFAULT_OVERLAY_Z_INDEX_OFFSET`, `MODAL_PRIORITY_Z_INDEX`
+    - These are no longer needed as Radix UI Dialog handles stacking automatically via portal DOM order
+    - If you were using these constants, remove them from your code
+    - Stacking is now managed by the order modals are opened (last opened appears on top)
+
+  #### API Changes
+
+  - **Modal root**: Now built on Radix UI Dialog primitives with simplified props
+
+    - Removed children-based header composition
+    - Added slot-based API: `title`, `subtitle`, `description` props for common use cases
+    - Added `modalTrigger` prop for trigger element
+    - Added `draggable` prop for draggable modals
+    - Added `showOverlay` prop (defaults to `true`)
+    - Added `actions` prop for floating action rail
+    - **Removed `priority` prop**: z-index management is no longer needed
+    - Added `closeButtonAriaLabel` prop (defaults to "Close")
+
+  - **ModalHeader**: Converted to slot-based API
+
+    - Now only supports `title` and `subtitle` props
+    - Removed `children` prop
+    - For custom headers, use new `ModalCustomHeader` component
+    - Automatically becomes draggable handle when `<Modal draggable={true} />`
+
+  - **ModalFooter**: Converted to slot-based API with automatic button wrapping
+
+    - `primaryButton`: Main action (auto-closes modal)
+    - `cancelButton`: Secondary action (auto-closes modal)
+    - `leftAction`: Optional left-aligned action (no auto-close, for destructive actions)
+    - For custom footers, use new `ModalCustomFooter` component
+    - At least one action prop is required (TypeScript enforced)
+
+  - **ModalBody**: New component for modal content area
+    - Replaces direct content in Modal children
+    - Provides proper scrolling behavior and padding
+
+  #### Type Changes
+
+  - All types renamed from `TypeModalV2*` to `TypeModal*`
+  - `TypeModalV2Props` → `TypeModalProps`
+  - `TypeModalV2HeaderProps` → `TypeModalHeaderProps`
+  - `TypeModalV2FooterProps` → `TypeModalFooterProps`
+  - New types: `TypeModalBodyProps`, `TypeModalDescriptionProps`, `TypeModalRailProps`, `TypeModalActionProps`
+
+  ### New Features
+
+  #### Draggable Modals
+
+  - Enable with `draggable={true}` prop
+  - Drag from header to reposition modal
+  - Constrained to viewport boundaries
+  - TypeScript enforces `showOverlay={false}` when draggable (overlay would block interaction)
+  - Automatically sets Radix `modal={false}` to allow background interaction
+
+  #### Floating Action Rail
+
+  - Always-visible floating close button
+  - Support for additional custom actions via `actions` prop
+  - Positioned on right side (desktop) or above modal (mobile)
+  - Actions defined with `iconName`, `onClick`, `aria-label`
+
+  #### Mobile Responsiveness (≤780px)
+
+  - Bottom sheet layout anchored to screen bottom
+  - Rounded top corners, flat bottom corners
+  - Rail positioned above modal
+  - Content height hugs content with scrolling
+  - Smooth slide-up animation
+
+  #### Animation System
+
+  - Built with Framer Motion `AnimatePresence`
+  - Smooth fade + scale animation (desktop)
+  - Slide-up animation (mobile)
+  - Separate animations for overlay and content
+  - Draggable modals use opacity-only animation (no transform conflict)
+
+  #### Accessibility Improvements
+
+  - Built on Radix UI Dialog primitives
+  - Automatic ARIA attributes and focus management
+  - ESC key and outside click to close (when not draggable)
+  - Required `aria-label` when no title/subtitle provided (TypeScript enforced)
+  - Subtitle automatically wrapped in `Dialog.Description`
+
+  ### Component Details
+
+  #### ModalCloseWrapper
+
+  New utility component that wraps any element and makes it close the modal when clicked. Used internally by `ModalFooter` for automatic close behavior.
+
+  ```tsx
+  <ModalCloseWrapper>
+    <Button>Close</Button>
+  </ModalCloseWrapper>
+  ```
+
+  #### ModalAction
+
+  Action button component for the floating rail. Supports two types:
+
+  - `actionType="close"`: Closes modal on click
+  - `actionType="button"`: Custom action with onClick handler
+
+  #### ModalCustomHeader & ModalCustomFooter
+
+  Base styled components for custom header/footer layouts when slot-based API isn't sufficient. Provides styling and system props support.
+
+  ### Technical Improvements
+
+  #### Improved Stacking Behavior
+
+  Modal V2 no longer uses explicit z-index values, relying instead on Radix UI Dialog's portal-based stacking:
+
+  - **Automatic stacking**: Modal elements are portaled to `<body>` and stack naturally via DOM order
+  - **Simpler integration**: No z-index conflicts with other portal-based components (tooltips, popovers, etc.)
+  - **Better composability**: Works seamlessly with new popout components and other overlays
+  - **Predictable behavior**: Last opened modal always appears on top, regardless of configuration
+
+  **Migration Note**: If you were using the `priority` prop to control modal stacking, remove it. Modals now stack in the order they're opened, which provides more predictable and intuitive behavior.
+
+  #### Performance Optimizations
+
+  - **Split rendering paths**: Non-draggable modals now use lightweight `StaticModalContent` component, avoiding unnecessary drag logic, event listeners, and boundary calculations
+  - **Conditional component loading**: Draggable functionality only loads when `draggable={true}`, reducing runtime overhead for 99% of use cases
+  - **Optimized re-renders**: Removed drag context overhead from static modals entirely
+
+  #### Type Safety Enhancements
+
+  - **Discriminated unions for prop relationships**: TypeScript enforces `showOverlay={false}` when `draggable={true}`, preventing invalid configurations at compile time
+  - **Required footer actions**: Footer type system ensures at least one action button is provided, eliminating empty footer states
+  - **Removed ambiguous APIs**: Eliminated `children` override props from `ModalHeader` and `ModalFooter`, guiding developers toward the slot-based API while providing explicit `ModalCustomHeader`/`ModalCustomFooter` components for advanced use cases
+
+  #### Code Quality
+
+  - Removed redundant `width` styled-system import (already included in LAYOUT)
+  - Added POSITION system props to ModalOverlay for better positioning control
+  - Created `MotionConfig.ts` for centralized animation variants
+  - Split styles into component-specific files for better organization
+  - Consistent component naming and structure
+  - Updated Storybook stories to use semantic theme tokens instead of raw color scale values
+
+  ### Racine Updates
+
+  - Export name corrected: `Modal` instead of `ModalV2`
+  - All type exports updated to match new names
+  - Removed z-index constant exports to match Modal V2 changes
+
+### Patch Changes
+
+- Updated dependencies [b1c3b44]
+  - @sproutsocial/seeds-react-theme@3.1.1
+  - @sproutsocial/seeds-react-box@1.1.5
+  - @sproutsocial/seeds-react-icon@1.1.5
+  - @sproutsocial/seeds-react-button@1.3.1
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/ModalAction-BB7qJtQj.d.mts

@@ -0,0 +1,445 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as styled_components from 'styled-components';
+import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
+import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
+import * as React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+
+/**
+ * Props for ModalHeader component.
+ *
+ * Renders the modal's header with title and optional subtitle. Supports draggable functionality
+ * when the modal has draggable enabled.
+ *
+ * Note: This component only supports slots (title/subtitle props). For custom headers,
+ * use ModalCustomHeader instead.
+ */
+interface TypeModalHeaderProps extends TypeBoxProps {
+    /** Modal title text displayed as a headline */
+    title?: string;
+    /**
+     * Modal subtitle text.
+     *
+     * This is automatically wrapped in `Dialog.Description` from Radix UI,
+     * which provides accessible description text for screen readers. The subtitle
+     * provides additional context about the modal and is announced alongside
+     * the title when the dialog opens. Radix UI automatically connects this to
+     * the dialog via ARIA attributes (typically `aria-describedby` on the dialog root).
+     */
+    subtitle?: string;
+    /** Additional props for the Dialog.Title when title is provided */
+    titleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Title>, "asChild" | "children">;
+    /**
+     * Additional props for the Dialog.Description when subtitle is provided.
+     *
+     * Dialog.Description provides accessible description text for the modal that
+     * screen readers announce when the dialog opens. It complements Dialog.Title
+     * by providing additional context about the modal. Radix UI automatically
+     * connects this to the dialog via ARIA attributes.
+     */
+    subtitleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
+}
+/**
+ * Props for ModalFooter component.
+ *
+ * Provides automatic button wrapping and layout management. At least one action
+ * (cancelButton, primaryButton, or leftAction) must be provided.
+ *
+ * Note: This component only supports slots (button props). For custom footers,
+ * use ModalCustomFooter instead.
+ *
+ * @example
+ * // ✅ Valid - has primary button
+ * <ModalFooter primaryButton={<Button>Save</Button>} />
+ *
+ * @example
+ * // ✅ Valid - has cancel and primary
+ * <ModalFooter
+ *   cancelButton={<Button>Cancel</Button>}
+ *   primaryButton={<Button>Save</Button>}
+ * />
+ *
+ * @example
+ * // ✅ Valid - left action only
+ * <ModalFooter leftAction={<Button>Delete</Button>} />
+ *
+ * @example
+ * // ❌ TypeScript Error - no actions provided
+ * <ModalFooter />
+ */
+type TypeModalFooterProps = TypeBoxProps & ({
+    /** Primary action button - automatically wrapped in ModalCloseWrapper to close the modal */
+    primaryButton: React.ReactNode;
+    /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper to close the modal */
+    cancelButton?: React.ReactNode;
+    /** Optional action on the far left (e.g., Delete button) - NOT automatically wrapped */
+    leftAction?: React.ReactNode;
+} | {
+    /** Primary action button - automatically wrapped in ModalCloseWrapper to close the modal */
+    primaryButton?: React.ReactNode;
+    /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper to close the modal */
+    cancelButton: React.ReactNode;
+    /** Optional action on the far left (e.g., Delete button) - NOT automatically wrapped */
+    leftAction?: React.ReactNode;
+} | {
+    /** Primary action button - automatically wrapped in ModalCloseWrapper to close the modal */
+    primaryButton?: React.ReactNode;
+    /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper to close the modal */
+    cancelButton?: React.ReactNode;
+    /** Optional action on the far left (e.g., Delete button) - NOT automatically wrapped */
+    leftAction: React.ReactNode;
+});
+/**
+ * Props for ModalBody component.
+ *
+ * Renders the scrollable main content area of the modal between the header and footer.
+ */
+interface TypeModalBodyProps extends TypeBoxProps {
+    /** The main content of the modal body */
+    children?: React.ReactNode;
+}
+/**
+ * Props for ModalDescription component.
+ *
+ * Wraps content with Radix UI's Dialog.Description for accessible modal descriptions
+ * that are announced by screen readers.
+ */
+interface TypeModalDescriptionProps extends TypeBoxProps {
+    /** The description text content */
+    children: React.ReactNode;
+    /** Additional props for the Dialog.Description */
+    descriptionProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
+}
+/** Common props shared by all modal variants */
+type TypeModalCommonProps = TypeContainerProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> & {
+    /** Controls whether the modal is open (controlled mode) */
+    open?: boolean;
+    /** Default open state for uncontrolled mode */
+    defaultOpen?: boolean;
+    /** body content of the modal */
+    children: React.ReactNode;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** The element that will trigger the modal when clicked.
+     *  Can be any React element like a button, link, or custom component. */
+    modalTrigger?: React.ReactElement<any>;
+    /** Simplified API: Modal description (automatically wrapped in Dialog.Description) */
+    description?: string;
+    /**
+     * Custom attributes to be added to the modals container
+     * Each key will be prepended with "data-" when rendered in the DOM
+     */
+    data?: Record<string, string | boolean | number>;
+    /** Optional quick actions to render on a modal side rail */
+    actions?: TypeModalActionProps[];
+    /** Accessible label for the close button in the rail (defaults to "Close") */
+    closeButtonAriaLabel?: string;
+};
+/**
+ * Base props with draggable and showOverlay relationship enforced.
+ *
+ * When draggable is true, showOverlay must be false or undefined because
+ * the overlay would block interaction with content behind the modal,
+ * defeating the purpose of being able to drag the modal aside.
+ */
+type TypeModalBaseProps = (TypeModalCommonProps & {
+    /** Enable draggable functionality */
+    draggable: true;
+    /**
+     * Whether to show the background overlay.
+     * Must be false when draggable is true to allow interaction with background content.
+     */
+    showOverlay?: false;
+}) | (TypeModalCommonProps & {
+    /** Enable draggable functionality */
+    draggable?: false;
+    /** Whether to show the background overlay (defaults to true) */
+    showOverlay?: boolean;
+});
+/**
+ * Modal props with title provided.
+ * aria-label is optional since Dialog.Title can serve as the accessible name.
+ */
+type TypeModalPropsWithTitle = TypeModalBaseProps & {
+    /** Simplified API: Modal title (creates ModalHeader automatically) */
+    title: string;
+    /**
+     * Simplified API: Modal subtitle (creates ModalHeader automatically).
+     *
+     * This is automatically wrapped in `Dialog.Description` from Radix UI,
+     * which provides accessible description text for screen readers. The subtitle
+     * provides additional context about the modal and is announced alongside
+     * the title when the dialog opens.
+     */
+    subtitle?: string;
+    /** Accessible label for the modal dialog (optional when title or subtitle is provided) */
+    "aria-label"?: string;
+};
+/**
+ * Modal props with subtitle provided but no title.
+ * aria-label is optional since Dialog.Description can help identify the modal.
+ */
+type TypeModalPropsWithSubtitleOnly = TypeModalBaseProps & {
+    /** Simplified API: Modal title (creates ModalHeader automatically) */
+    title?: never;
+    /**
+     * Simplified API: Modal subtitle (creates ModalHeader automatically).
+     *
+     * This is automatically wrapped in `Dialog.Description` from Radix UI,
+     * which provides accessible description text for screen readers. The subtitle
+     * provides additional context about the modal and is announced alongside
+     * the title when the dialog opens.
+     */
+    subtitle: string;
+    /** Accessible label for the modal dialog (optional when title or subtitle is provided) */
+    "aria-label"?: string;
+};
+/**
+ * Modal props without title or subtitle.
+ *
+ * **IMPORTANT**: When no header (title or subtitle) is provided,
+ * `aria-label` is REQUIRED for accessibility compliance.
+ *
+ * Without a visible header, screen readers need `aria-label` to identify
+ * what the modal dialog is about.
+ *
+ * @example
+ * // ✅ Valid - provides aria-label when no header
+ * <Modal aria-label="Delete confirmation dialog">
+ *   <p>Are you sure you want to delete this item?</p>
+ * </Modal>
+ *
+ * @example
+ * // ❌ Invalid - missing required aria-label
+ * <Modal>
+ *   <p>Are you sure you want to delete this item?</p>
+ * </Modal>
+ */
+type TypeModalPropsWithoutHeader = TypeModalBaseProps & {
+    /** Simplified API: Modal title (creates ModalHeader automatically) - not allowed when no header */
+    title?: never;
+    /** Simplified API: Modal subtitle (creates ModalHeader automatically) - not allowed when no header */
+    subtitle?: never;
+    /**
+     * **REQUIRED: aria-label must be provided when no title or subtitle is given**
+     *
+     * Accessible label for the modal dialog. This is required for accessibility
+     * when the modal has no visible header. Screen readers use this to announce
+     * what the modal is about.
+     *
+     * **Error**: If you see a TypeScript error saying this property is missing,
+     * it means you need to either:
+     * 1. Provide `aria-label` (required when no header), OR
+     * 2. Provide `title` or `subtitle` (which makes aria-label optional)
+     *
+     * If you have a title or subtitle, this prop is optional.
+     */
+    "aria-label": string;
+};
+/**
+ * Modal component props with discriminated union based on header presence.
+ *
+ * **Accessibility Requirements:**
+ * - ✅ **With header** (title or subtitle provided): `aria-label` is optional
+ * - ❌ **Without header** (no title, no subtitle): `aria-label` is **REQUIRED**
+ *
+ * TypeScript will error if you forget to provide `aria-label` when no header is present.
+ * This ensures accessibility compliance and better screen reader support.
+ *
+ * @example
+ * // ✅ Valid - has title, aria-label optional
+ * <Modal title="Delete Item" />
+ *
+ * @example
+ * // ✅ Valid - has subtitle only, aria-label optional
+ * <Modal subtitle="Confirmation" />
+ *
+ * @example
+ * // ✅ Valid - no header, aria-label provided
+ * <Modal aria-label="Delete confirmation dialog" />
+ *
+ * @example
+ * // ❌ TypeScript Error - no header and missing required aria-label
+ * <Modal /> // Error: Property 'aria-label' is missing
+ */
+type TypeModalProps = TypeModalPropsWithTitle | TypeModalPropsWithSubtitleOnly | TypeModalPropsWithoutHeader;
+/**
+ * Props for ModalRail component.
+ *
+ * Container for floating action buttons displayed alongside the modal.
+ */
+type TypeModalRailProps = {
+    /** ModalAction components to display in the rail */
+    children?: React.ReactNode;
+};
+/**
+ * Base props for modal action buttons.
+ *
+ * Extends standard button HTML attributes with modal-specific properties.
+ */
+type ModalActionBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    /** Icon name from the Seeds icon set */
+    iconName?: TypeIconName;
+    /** Optional click handler; ignored for type "close" */
+    onClick?: () => void;
+    /** Accessible name for the action button */
+    "aria-label": string;
+};
+/**
+ * Props for ModalAction component.
+ *
+ * Discriminated union supporting two action types:
+ * - "close": Automatically closes the modal when clicked (uses Dialog.Close)
+ * - "button": Custom action with user-defined onClick handler
+ */
+type TypeModalActionProps = (ModalActionBase & {
+    actionType: "close";
+}) | (ModalActionBase & {
+    actionType?: "button";
+});
+
+/**
+ * Accessible modal dialog component built on Radix UI Dialog primitives.
+ *
+ * This component provides a flexible modal implementation with comprehensive accessibility
+ * features, keyboard navigation, and focus management built in.
+ *
+ * Key capabilities:
+ * - Automatic ARIA attributes and focus trapping
+ * - ESC key and outside click to close
+ * - Simplified API with title/subtitle props for common use cases
+ * - Controlled and uncontrolled state modes
+ * - Optional draggable behavior for side-by-side interaction
+ * - Floating action rail for quick actions like close, expand, etc.
+ * - Responsive bottom sheet layout on mobile
+ *
+ * @example
+ * // Simple uncontrolled modal
+ * <Modal
+ *   title="Delete Item"
+ *   subtitle="This action cannot be undone"
+ *   modalTrigger={<Button>Delete</Button>}
+ * >
+ *   <ModalBody>Are you sure you want to delete this item?</ModalBody>
+ *   <ModalFooter
+ *     cancelButton={<Button>Cancel</Button>}
+ *     primaryButton={<Button appearance="destructive">Delete</Button>}
+ *   />
+ * </Modal>
+ */
+declare const Modal: (props: TypeModalProps) => react_jsx_runtime.JSX.Element;
+
+interface HeaderProps {
+    draggable?: boolean;
+    isDragging?: boolean;
+}
+/**
+ * Base styled header component for custom modal headers.
+ *
+ * Use this component when you need complete control over the header layout
+ * and don't want to use the slot-based ModalHeader component.
+ *
+ * @example
+ * <ModalCustomHeader>
+ *   <YourCustomHeaderContent />
+ * </ModalCustomHeader>
+ */
+declare const ModalCustomHeader: styled_components.StyledComponent<React.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, HeaderProps, never>;
+/**
+ * Modal header component with title and subtitle slots.
+ *
+ * This component only supports slot-based rendering via title and subtitle props.
+ * For custom header layouts, use ModalCustomHeader instead.
+ *
+ * @example
+ * <ModalHeader title="Delete Item" subtitle="This action cannot be undone" />
+ */
+declare const ModalHeader: {
+    (props: TypeModalHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Base styled footer component for custom modal footers.
+ *
+ * Use this component when you need complete control over the footer layout
+ * and don't want to use the slot-based ModalFooter component.
+ *
+ * @example
+ * <ModalCustomFooter>
+ *   <YourCustomFooterContent />
+ * </ModalCustomFooter>
+ */
+declare const ModalCustomFooter: styled_components.StyledComponent<React.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {}, never>;
+/**
+ * Modal footer component for action buttons.
+ *
+ * This component only supports slot-based rendering with button props.
+ * For custom footer layouts, use ModalCustomFooter instead.
+ *
+ * Provides automatic button wrapping and layout management. Supports three button positions:
+ * - primaryButton: Main action button on the right (auto-closes modal)
+ * - cancelButton: Secondary action on the right (auto-closes modal)
+ * - leftAction: Optional action on the left (no auto-close, for destructive actions)
+ *
+ * @example
+ * <ModalFooter
+ *   cancelButton={<Button>Cancel</Button>}
+ *   primaryButton={<Button appearance="primary">Save</Button>}
+ * />
+ *
+ * @example
+ * // With left action
+ * <ModalFooter
+ *   leftAction={<Button appearance="destructive">Delete</Button>}
+ *   cancelButton={<Button>Cancel</Button>}
+ *   primaryButton={<Button appearance="primary">Save</Button>}
+ * />
+ */
+declare const ModalFooter: {
+    (props: TypeModalFooterProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+declare const ModalBody: React.ForwardRefExoticComponent<Omit<TypeModalBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Modal description component that wraps content with accessible Dialog.Description.
+ *
+ * This component automatically connects description text to the modal dialog via ARIA attributes,
+ * ensuring screen readers announce the description when the modal opens. Use this for additional
+ * context beyond the title that helps users understand the modal's purpose.
+ *
+ * @example
+ * <ModalDescription>
+ *   Deleting this item will permanently remove it from your account.
+ * </ModalDescription>
+ */
+declare const ModalDescription: React.ForwardRefExoticComponent<Omit<TypeModalDescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for ModalCloseWrapper component.
+ */
+interface ModalCloseWrapperProps {
+    /** The element to wrap with close functionality */
+    children: React.ReactNode;
+    /** Optional click handler called before closing the modal */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Whether to merge props into the child element (default: true) */
+    asChild?: boolean;
+}
+/**
+ * A wrapper component that closes the modal when its child is clicked.
+ * Uses asChild pattern like Radix primitives - by default asChild is true.
+ */
+declare const ModalCloseWrapper: {
+    (props: ModalCloseWrapperProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const ModalRail: React.FC<TypeModalRailProps>;
+
+declare const ModalAction: React.FC<TypeModalActionProps>;
+
+export { Modal as M, type TypeModalProps as T, ModalDescription as a, ModalHeader as b, ModalFooter as c, ModalBody as d, ModalCloseWrapper as e, ModalRail as f, ModalAction as g, ModalCustomHeader as h, ModalCustomFooter as i, type TypeModalHeaderProps as j, type TypeModalFooterProps as k, type TypeModalBodyProps as l, type TypeModalDescriptionProps as m, type TypeModalRailProps as n, type TypeModalActionProps as o, type ModalCloseWrapperProps as p };