@sproutsocial/seeds-react-modal 1.1.0 → 2.0.0

package/dist/ModalRail-5PeilhW7.d.mts

@@ -1,186 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
-import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
-import { TypeIconName } from '@sproutsocial/seeds-react-icon';
-
-interface TypeModalV2TriggerProps extends TypeButtonProps {
-    /** The content to display inside the trigger button */
-    children: React.ReactNode;
-    /** Custom click handler - will be called before the modal opens */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Use asChild to render a custom trigger element */
-    asChild?: boolean;
-}
-interface TypeModalV2CloseButtonProps extends Omit<TypeButtonProps, "children" | "size"> {
-    children?: React.ReactNode;
-    /** Custom click handler - will be called before the modal closes */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Use asChild to render a custom close element */
-    asChild?: boolean;
-    /** aria-label for modal close button */
-    closeButtonLabel?: string;
-    /** Size of the close button in pixels */
-    size?: number;
-    /** Position type - absolute (outside modal) or relative (inside modal) */
-    position?: "absolute" | "relative";
-    /** Which side to position the button on (for absolute positioning) */
-    side?: "right" | "left";
-    /** Offset from the modal edge in pixels (for absolute positioning) */
-    offset?: number;
-}
-interface TypeModalV2HeaderProps extends TypeBoxProps {
-    title?: string;
-    subtitle?: string;
-    /** Passing children will override the default modal header */
-    children?: React.ReactNode;
-    /** 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 */
-    subtitleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
-    /** Opt-in inline close inside header; default is floating rail */
-    showInlineClose?: boolean;
-}
-interface TypeModalV2FooterProps extends TypeBoxProps {
-    bg?: string;
-    children: React.ReactNode;
-}
-interface TypeModalV2ContentProps extends TypeBoxProps {
-    children?: React.ReactNode;
-}
-interface TypeModalV2DescriptionProps extends TypeBoxProps {
-    children: React.ReactNode;
-    /** Additional props for the Dialog.Description */
-    descriptionProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
-}
-interface TypeModalV2Props extends 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>;
-    /** Enable draggable functionality using react-dnd */
-    draggable?: boolean;
-    /** Simplified API: Modal title (creates ModalHeader automatically) */
-    title?: string;
-    /** Simplified API: Modal subtitle (creates ModalHeader automatically) */
-    subtitle?: string;
-    /** Simplified API: Modal description (automatically wrapped in Dialog.Description) */
-    description?: string;
-    /** Modal size preset or custom width */
-    size?: "small" | "medium" | "large" | "full" | string | number;
-    /** Priority level that maps to z-index presets */
-    priority?: "low" | "medium" | "high";
-    /**
-     * 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>;
-    /** Whether to show the background overlay (defaults to true) */
-    showOverlay?: boolean;
-    /** Optional quick actions to render on a modal side rail */
-    actions?: TypeModalActionProps[];
-    /** Optional props to customize the side rail position/size */
-    railProps?: Partial<TypeModalRailProps>;
-}
-type TypeModalRailProps = {
-    side?: "right" | "left";
-    offset?: number;
-    gap?: number;
-    size?: number;
-    children?: React.ReactNode;
-};
-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;
-};
-type TypeModalActionProps = (ModalActionBase & {
-    actionType: "close";
-}) | (ModalActionBase & {
-    actionType?: "button";
-});
-
-interface DragContextValue {
-    position: {
-        x: number;
-        y: number;
-    };
-    isDragging: boolean;
-    onHeaderMouseDown: (e: React.MouseEvent) => void;
-    contentRef: React.RefObject<HTMLDivElement>;
-    draggable: boolean;
-}
-declare const useDragContext: () => DragContextValue | null;
-/**
- * The modal you want - with Radix UI Dialog
- *
- * Features:
- * - Built with Radix UI Dialog for superior accessibility
- * - Same API as the original Modal component
- * - Automatic focus management and keyboard navigation
- * - Portal rendering for proper z-index layering
- * - Customizable styling through system props
- * - Optional draggable functionality using react-dnd
- */
-declare const Modal: (props: TypeModalV2Props) => react_jsx_runtime.JSX.Element;
-
-declare const ModalHeader: {
-    (props: TypeModalV2HeaderProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const ModalFooter: {
-    (props: TypeModalV2FooterProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const ModalContent: React.ForwardRefExoticComponent<Omit<TypeModalV2ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-declare const ModalDescription: React.ForwardRefExoticComponent<Omit<TypeModalV2DescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-declare const ModalCloseButton: {
-    (props: TypeModalV2CloseButtonProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-/**
- * A trigger button that opens the modal when clicked.
- * Must be used inside a Modal component's Dialog.Root context.
- * Uses Seeds Button by default but supports asChild for custom elements.
- */
-declare const ModalTrigger: {
-    (props: TypeModalV2TriggerProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface ModalCloseProps {
-    children: React.ReactNode;
-    onClick?: (e: React.MouseEvent) => void;
-    asChild?: boolean;
-}
-/**
- * A component that closes the modal when clicked.
- * Uses asChild pattern like Radix primitives.
- */
-declare const ModalClose: {
-    (props: ModalCloseProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const ModalRail: React.FC<TypeModalRailProps>;
-declare const ModalAction: React.FC<TypeModalActionProps & {
-    size?: number;
-}>;
-
-export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q, useDragContext as u };

package/dist/ModalRail-5PeilhW7.d.ts

@@ -1,186 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
-import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
-import { TypeIconName } from '@sproutsocial/seeds-react-icon';
-
-interface TypeModalV2TriggerProps extends TypeButtonProps {
-    /** The content to display inside the trigger button */
-    children: React.ReactNode;
-    /** Custom click handler - will be called before the modal opens */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Use asChild to render a custom trigger element */
-    asChild?: boolean;
-}
-interface TypeModalV2CloseButtonProps extends Omit<TypeButtonProps, "children" | "size"> {
-    children?: React.ReactNode;
-    /** Custom click handler - will be called before the modal closes */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Use asChild to render a custom close element */
-    asChild?: boolean;
-    /** aria-label for modal close button */
-    closeButtonLabel?: string;
-    /** Size of the close button in pixels */
-    size?: number;
-    /** Position type - absolute (outside modal) or relative (inside modal) */
-    position?: "absolute" | "relative";
-    /** Which side to position the button on (for absolute positioning) */
-    side?: "right" | "left";
-    /** Offset from the modal edge in pixels (for absolute positioning) */
-    offset?: number;
-}
-interface TypeModalV2HeaderProps extends TypeBoxProps {
-    title?: string;
-    subtitle?: string;
-    /** Passing children will override the default modal header */
-    children?: React.ReactNode;
-    /** 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 */
-    subtitleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
-    /** Opt-in inline close inside header; default is floating rail */
-    showInlineClose?: boolean;
-}
-interface TypeModalV2FooterProps extends TypeBoxProps {
-    bg?: string;
-    children: React.ReactNode;
-}
-interface TypeModalV2ContentProps extends TypeBoxProps {
-    children?: React.ReactNode;
-}
-interface TypeModalV2DescriptionProps extends TypeBoxProps {
-    children: React.ReactNode;
-    /** Additional props for the Dialog.Description */
-    descriptionProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
-}
-interface TypeModalV2Props extends 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>;
-    /** Enable draggable functionality using react-dnd */
-    draggable?: boolean;
-    /** Simplified API: Modal title (creates ModalHeader automatically) */
-    title?: string;
-    /** Simplified API: Modal subtitle (creates ModalHeader automatically) */
-    subtitle?: string;
-    /** Simplified API: Modal description (automatically wrapped in Dialog.Description) */
-    description?: string;
-    /** Modal size preset or custom width */
-    size?: "small" | "medium" | "large" | "full" | string | number;
-    /** Priority level that maps to z-index presets */
-    priority?: "low" | "medium" | "high";
-    /**
-     * 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>;
-    /** Whether to show the background overlay (defaults to true) */
-    showOverlay?: boolean;
-    /** Optional quick actions to render on a modal side rail */
-    actions?: TypeModalActionProps[];
-    /** Optional props to customize the side rail position/size */
-    railProps?: Partial<TypeModalRailProps>;
-}
-type TypeModalRailProps = {
-    side?: "right" | "left";
-    offset?: number;
-    gap?: number;
-    size?: number;
-    children?: React.ReactNode;
-};
-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;
-};
-type TypeModalActionProps = (ModalActionBase & {
-    actionType: "close";
-}) | (ModalActionBase & {
-    actionType?: "button";
-});
-
-interface DragContextValue {
-    position: {
-        x: number;
-        y: number;
-    };
-    isDragging: boolean;
-    onHeaderMouseDown: (e: React.MouseEvent) => void;
-    contentRef: React.RefObject<HTMLDivElement>;
-    draggable: boolean;
-}
-declare const useDragContext: () => DragContextValue | null;
-/**
- * The modal you want - with Radix UI Dialog
- *
- * Features:
- * - Built with Radix UI Dialog for superior accessibility
- * - Same API as the original Modal component
- * - Automatic focus management and keyboard navigation
- * - Portal rendering for proper z-index layering
- * - Customizable styling through system props
- * - Optional draggable functionality using react-dnd
- */
-declare const Modal: (props: TypeModalV2Props) => react_jsx_runtime.JSX.Element;
-
-declare const ModalHeader: {
-    (props: TypeModalV2HeaderProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const ModalFooter: {
-    (props: TypeModalV2FooterProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const ModalContent: React.ForwardRefExoticComponent<Omit<TypeModalV2ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-declare const ModalDescription: React.ForwardRefExoticComponent<Omit<TypeModalV2DescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-declare const ModalCloseButton: {
-    (props: TypeModalV2CloseButtonProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-/**
- * A trigger button that opens the modal when clicked.
- * Must be used inside a Modal component's Dialog.Root context.
- * Uses Seeds Button by default but supports asChild for custom elements.
- */
-declare const ModalTrigger: {
-    (props: TypeModalV2TriggerProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface ModalCloseProps {
-    children: React.ReactNode;
-    onClick?: (e: React.MouseEvent) => void;
-    asChild?: boolean;
-}
-/**
- * A component that closes the modal when clicked.
- * Uses asChild pattern like Radix primitives.
- */
-declare const ModalClose: {
-    (props: ModalCloseProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const ModalRail: React.FC<TypeModalRailProps>;
-declare const ModalAction: React.FC<TypeModalActionProps & {
-    size?: number;
-}>;
-
-export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q, useDragContext as u };