@texturehq/edges 1.18.1 → 1.19.0

package/dist/index-DKA9NMRw.d.cts

@@ -0,0 +1,311 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+
+/**
+ * Shared action type for Dialog and Drawer footer buttons
+ */
+interface DialogAction {
+    label: string;
+    onPress: () => void;
+    variant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+    isDisabled?: boolean;
+}
+/**
+ * Shared header props for Dialog and Drawer
+ */
+interface DialogHeaderConfig {
+    /**
+     * Title text for the header
+     */
+    title?: string;
+    /**
+     * Custom header content (overrides title)
+     */
+    headerContent?: ReactNode;
+    /**
+     * Alignment of the title
+     * @default "left"
+     */
+    titleAlign?: "left" | "center";
+    /**
+     * Whether to hide the close button
+     * @default false
+     */
+    hideCloseIcon?: boolean;
+    /**
+     * Whether to show a back arrow
+     * @default false
+     */
+    hasBackArrow?: boolean;
+    /**
+     * Callback when back arrow is clicked (required if hasBackArrow is true)
+     */
+    onBack?: () => void;
+}
+/**
+ * Shared footer props for Dialog and Drawer
+ */
+interface DialogFooterConfig {
+    /**
+     * Primary action button configuration
+     */
+    primaryAction?: DialogAction;
+    /**
+     * Secondary action button configuration
+     */
+    secondaryAction?: DialogAction;
+    /**
+     * Custom footer content above the action buttons
+     */
+    footerContent?: ReactNode;
+}
+
+interface DialogProps extends Omit<DialogHeaderConfig, "onClose">, DialogFooterConfig {
+    /**
+     * Whether the dialog is open (controlled mode)
+     * When using DialogTrigger, leave this undefined for automatic state management
+     * @default undefined
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when the dialog is closed (controlled mode)
+     * When using DialogTrigger, leave this undefined for automatic state management
+     * @default undefined
+     */
+    onClose?: () => void;
+    /**
+     * Dialog content
+     */
+    children: React__default.ReactNode;
+    /**
+     * Whether to use a transparent backdrop
+     * @default false
+     */
+    transparentOverlay?: boolean;
+    /**
+     * Maximum width of the dialog
+     * @default "600px"
+     */
+    maxWidth?: string;
+    /**
+     * Minimum width of the dialog (desktop only, mobile uses full width)
+     * @default "400px"
+     */
+    minWidth?: string;
+    /**
+     * Maximum height of the dialog on desktop
+     * @default "85vh"
+     */
+    maxHeight?: string;
+    /**
+     * Explicit height of the dialog on desktop (overrides maxHeight if set)
+     * Content will scroll within this fixed height
+     * @default undefined
+     */
+    height?: string;
+    /**
+     * Maximum height of the dialog on mobile (tray version)
+     * @default "90vh"
+     */
+    mobileMaxHeight?: string;
+    /**
+     * Explicit height of the dialog on mobile (overrides mobileMaxHeight if set)
+     * Content will scroll within this fixed height
+     * @default undefined
+     */
+    mobileHeight?: string;
+    /**
+     * Whether to include padding inside the content area
+     * @default true
+     */
+    contentPadding?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Dialog
+ *
+ * Responsive modal dialog component with backdrop.
+ *
+ * **Desktop (≥768px):** Centered modal with scale and fade animation
+ * **Mobile (<768px):** Uses Tray component for native bottom sheet experience with drag handle
+ *
+ * Includes optional header with title/back button and footer with action buttons.
+ *
+ * ## Usage Patterns
+ *
+ * ### Uncontrolled with DialogTrigger (Recommended)
+ * ```tsx
+ * import { DialogTrigger, Dialog, Button } from "@texturehq/edges";
+ *
+ * <DialogTrigger>
+ *   <Button>Open Dialog</Button>
+ *   <Dialog title="My Dialog">
+ *     <p>Dialog content</p>
+ *   </Dialog>
+ * </DialogTrigger>
+ * ```
+ *
+ * ### Controlled (Advanced)
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="My Dialog">
+ *   <p>Dialog content</p>
+ * </Dialog>
+ * ```
+ */
+declare function Dialog({ isOpen, onClose, title, headerContent, titleAlign, hideCloseIcon, hasBackArrow, onBack, children, primaryAction, secondaryAction, footerContent, transparentOverlay, maxWidth, minWidth, maxHeight, height, mobileMaxHeight, mobileHeight, contentPadding, className, }: DialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface DrawerProps extends DialogHeaderConfig, DialogFooterConfig {
+    /**
+     * Drawer content
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Whether the drawer is open
+     */
+    isOpen: boolean;
+    /**
+     * Side to slide in from
+     * @default "right"
+     */
+    slideInFrom?: "left" | "right";
+    /**
+     * Whether to use a transparent backdrop
+     * @default false
+     */
+    transparentOverlay?: boolean;
+    /**
+     * Callback when the drawer is closed
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether to include padding inside the content area
+     * @default true
+     */
+    contentPadding?: boolean;
+    /**
+     * Maximum width of the drawer
+     * @default "400px"
+     */
+    maxWidth?: string;
+}
+/**
+ * Drawer
+ *
+ * Sliding panel that anchors to screen edges.
+ */
+declare function Drawer({ children, title, headerContent, titleAlign, hideCloseIcon, hasBackArrow, onBack, isOpen, slideInFrom, transparentOverlay, onClose, className, primaryAction, secondaryAction, footerContent, contentPadding, maxWidth, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+declare namespace Drawer {
+    var displayName: string;
+}
+
+interface DialogFormProps extends Omit<DialogProps, "children" | "footerContent"> {
+    formId?: string;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    onCancel?: () => void;
+    primaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    secondaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    children?: React.ReactNode;
+}
+declare function DialogForm({ formId, onSubmit, primaryLabel, secondaryLabel, onCancel, primaryVariant, secondaryVariant, children, title, ...dialogProps }: DialogFormProps): react_jsx_runtime.JSX.Element;
+
+interface DrawerFormProps extends Omit<DrawerProps, "children" | "footerContent"> {
+    formId?: string;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    onCancel?: () => void;
+    primaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    secondaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    children?: React.ReactNode;
+}
+declare function DrawerForm({ formId, onSubmit, primaryLabel, secondaryLabel, onCancel, primaryVariant, secondaryVariant, children, ...drawerProps }: DrawerFormProps): react_jsx_runtime.JSX.Element;
+
+interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "end" | "between";
+}
+declare function FormActions({ align, className, ...rest }: FormActionsProps): react_jsx_runtime.JSX.Element;
+
+interface FormGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: {
+        base?: 1 | 2 | 3 | 4;
+        md?: 1 | 2 | 3 | 4;
+        lg?: 1 | 2 | 3 | 4;
+    };
+    gap?: "sm" | "md" | "lg";
+}
+declare function FormGrid({ cols, gap, className, ...rest }: FormGridProps): react_jsx_runtime.JSX.Element;
+
+interface FormSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    showDivider?: boolean;
+}
+declare function FormSection({ title, description, showDivider, className, children, ...rest }: FormSectionProps): react_jsx_runtime.JSX.Element;
+declare function FormDivider(): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface FormStepperProps {
+    steps: Step[];
+    currentStepId: string;
+    onStepClick?: (id: string) => void;
+    className?: string;
+}
+declare function FormStepper({ steps, currentStepId, onStepClick, className }: FormStepperProps): react_jsx_runtime.JSX.Element;
+
+interface SaveBarProps {
+    formId?: string;
+    show: boolean;
+    isSubmitting?: boolean;
+    onCancel?: () => void;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    className?: string;
+}
+declare function SaveBar({ formId, show, isSubmitting, onCancel, primaryLabel, secondaryLabel, className, }: SaveBarProps): react_jsx_runtime.JSX.Element | null;
+
+interface UnsavedChangesPromptProps {
+    when: boolean;
+    message?: string;
+}
+declare function UnsavedChangesPrompt({ when, message, }: UnsavedChangesPromptProps): null;
+
+interface WizardStep {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface UseWizardOptions {
+    steps: WizardStep[];
+    initialStepId?: string;
+    canNavigate?: (fromId: string, toId: string) => Promise<boolean> | boolean;
+}
+declare function useWizard({ steps, initialStepId, canNavigate }: UseWizardOptions): {
+    steps: WizardStep[];
+    currentStepId: string;
+    setCurrentStepId: (id: string) => Promise<boolean>;
+    next: () => Promise<boolean>;
+    prev: () => Promise<boolean>;
+    hasNext: boolean;
+    hasPrev: boolean;
+    stepIndex: number;
+};
+
+export { type DialogAction as D, FormActions as F, SaveBar as S, UnsavedChangesPrompt as U, type WizardStep as W, type DialogHeaderConfig as a, type DialogFooterConfig as b, type DialogProps as c, Dialog as d, type DrawerProps as e, Drawer as f, DialogForm as g, DrawerForm as h, FormGrid as i, FormDivider as j, FormSection as k, FormStepper as l, type DialogFormProps as m, type DrawerFormProps as n, type FormActionsProps as o, type FormGridProps as p, type FormSectionProps as q, type Step as r, type FormStepperProps as s, type SaveBarProps as t, useWizard as u, type UnsavedChangesPromptProps as v, type UseWizardOptions as w };

package/dist/index-DKA9NMRw.d.ts

@@ -0,0 +1,311 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+
+/**
+ * Shared action type for Dialog and Drawer footer buttons
+ */
+interface DialogAction {
+    label: string;
+    onPress: () => void;
+    variant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+    isDisabled?: boolean;
+}
+/**
+ * Shared header props for Dialog and Drawer
+ */
+interface DialogHeaderConfig {
+    /**
+     * Title text for the header
+     */
+    title?: string;
+    /**
+     * Custom header content (overrides title)
+     */
+    headerContent?: ReactNode;
+    /**
+     * Alignment of the title
+     * @default "left"
+     */
+    titleAlign?: "left" | "center";
+    /**
+     * Whether to hide the close button
+     * @default false
+     */
+    hideCloseIcon?: boolean;
+    /**
+     * Whether to show a back arrow
+     * @default false
+     */
+    hasBackArrow?: boolean;
+    /**
+     * Callback when back arrow is clicked (required if hasBackArrow is true)
+     */
+    onBack?: () => void;
+}
+/**
+ * Shared footer props for Dialog and Drawer
+ */
+interface DialogFooterConfig {
+    /**
+     * Primary action button configuration
+     */
+    primaryAction?: DialogAction;
+    /**
+     * Secondary action button configuration
+     */
+    secondaryAction?: DialogAction;
+    /**
+     * Custom footer content above the action buttons
+     */
+    footerContent?: ReactNode;
+}
+
+interface DialogProps extends Omit<DialogHeaderConfig, "onClose">, DialogFooterConfig {
+    /**
+     * Whether the dialog is open (controlled mode)
+     * When using DialogTrigger, leave this undefined for automatic state management
+     * @default undefined
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when the dialog is closed (controlled mode)
+     * When using DialogTrigger, leave this undefined for automatic state management
+     * @default undefined
+     */
+    onClose?: () => void;
+    /**
+     * Dialog content
+     */
+    children: React__default.ReactNode;
+    /**
+     * Whether to use a transparent backdrop
+     * @default false
+     */
+    transparentOverlay?: boolean;
+    /**
+     * Maximum width of the dialog
+     * @default "600px"
+     */
+    maxWidth?: string;
+    /**
+     * Minimum width of the dialog (desktop only, mobile uses full width)
+     * @default "400px"
+     */
+    minWidth?: string;
+    /**
+     * Maximum height of the dialog on desktop
+     * @default "85vh"
+     */
+    maxHeight?: string;
+    /**
+     * Explicit height of the dialog on desktop (overrides maxHeight if set)
+     * Content will scroll within this fixed height
+     * @default undefined
+     */
+    height?: string;
+    /**
+     * Maximum height of the dialog on mobile (tray version)
+     * @default "90vh"
+     */
+    mobileMaxHeight?: string;
+    /**
+     * Explicit height of the dialog on mobile (overrides mobileMaxHeight if set)
+     * Content will scroll within this fixed height
+     * @default undefined
+     */
+    mobileHeight?: string;
+    /**
+     * Whether to include padding inside the content area
+     * @default true
+     */
+    contentPadding?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Dialog
+ *
+ * Responsive modal dialog component with backdrop.
+ *
+ * **Desktop (≥768px):** Centered modal with scale and fade animation
+ * **Mobile (<768px):** Uses Tray component for native bottom sheet experience with drag handle
+ *
+ * Includes optional header with title/back button and footer with action buttons.
+ *
+ * ## Usage Patterns
+ *
+ * ### Uncontrolled with DialogTrigger (Recommended)
+ * ```tsx
+ * import { DialogTrigger, Dialog, Button } from "@texturehq/edges";
+ *
+ * <DialogTrigger>
+ *   <Button>Open Dialog</Button>
+ *   <Dialog title="My Dialog">
+ *     <p>Dialog content</p>
+ *   </Dialog>
+ * </DialogTrigger>
+ * ```
+ *
+ * ### Controlled (Advanced)
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="My Dialog">
+ *   <p>Dialog content</p>
+ * </Dialog>
+ * ```
+ */
+declare function Dialog({ isOpen, onClose, title, headerContent, titleAlign, hideCloseIcon, hasBackArrow, onBack, children, primaryAction, secondaryAction, footerContent, transparentOverlay, maxWidth, minWidth, maxHeight, height, mobileMaxHeight, mobileHeight, contentPadding, className, }: DialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface DrawerProps extends DialogHeaderConfig, DialogFooterConfig {
+    /**
+     * Drawer content
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Whether the drawer is open
+     */
+    isOpen: boolean;
+    /**
+     * Side to slide in from
+     * @default "right"
+     */
+    slideInFrom?: "left" | "right";
+    /**
+     * Whether to use a transparent backdrop
+     * @default false
+     */
+    transparentOverlay?: boolean;
+    /**
+     * Callback when the drawer is closed
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether to include padding inside the content area
+     * @default true
+     */
+    contentPadding?: boolean;
+    /**
+     * Maximum width of the drawer
+     * @default "400px"
+     */
+    maxWidth?: string;
+}
+/**
+ * Drawer
+ *
+ * Sliding panel that anchors to screen edges.
+ */
+declare function Drawer({ children, title, headerContent, titleAlign, hideCloseIcon, hasBackArrow, onBack, isOpen, slideInFrom, transparentOverlay, onClose, className, primaryAction, secondaryAction, footerContent, contentPadding, maxWidth, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+declare namespace Drawer {
+    var displayName: string;
+}
+
+interface DialogFormProps extends Omit<DialogProps, "children" | "footerContent"> {
+    formId?: string;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    onCancel?: () => void;
+    primaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    secondaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    children?: React.ReactNode;
+}
+declare function DialogForm({ formId, onSubmit, primaryLabel, secondaryLabel, onCancel, primaryVariant, secondaryVariant, children, title, ...dialogProps }: DialogFormProps): react_jsx_runtime.JSX.Element;
+
+interface DrawerFormProps extends Omit<DrawerProps, "children" | "footerContent"> {
+    formId?: string;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    onCancel?: () => void;
+    primaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    secondaryVariant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
+    children?: React.ReactNode;
+}
+declare function DrawerForm({ formId, onSubmit, primaryLabel, secondaryLabel, onCancel, primaryVariant, secondaryVariant, children, ...drawerProps }: DrawerFormProps): react_jsx_runtime.JSX.Element;
+
+interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "end" | "between";
+}
+declare function FormActions({ align, className, ...rest }: FormActionsProps): react_jsx_runtime.JSX.Element;
+
+interface FormGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: {
+        base?: 1 | 2 | 3 | 4;
+        md?: 1 | 2 | 3 | 4;
+        lg?: 1 | 2 | 3 | 4;
+    };
+    gap?: "sm" | "md" | "lg";
+}
+declare function FormGrid({ cols, gap, className, ...rest }: FormGridProps): react_jsx_runtime.JSX.Element;
+
+interface FormSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    showDivider?: boolean;
+}
+declare function FormSection({ title, description, showDivider, className, children, ...rest }: FormSectionProps): react_jsx_runtime.JSX.Element;
+declare function FormDivider(): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface FormStepperProps {
+    steps: Step[];
+    currentStepId: string;
+    onStepClick?: (id: string) => void;
+    className?: string;
+}
+declare function FormStepper({ steps, currentStepId, onStepClick, className }: FormStepperProps): react_jsx_runtime.JSX.Element;
+
+interface SaveBarProps {
+    formId?: string;
+    show: boolean;
+    isSubmitting?: boolean;
+    onCancel?: () => void;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    className?: string;
+}
+declare function SaveBar({ formId, show, isSubmitting, onCancel, primaryLabel, secondaryLabel, className, }: SaveBarProps): react_jsx_runtime.JSX.Element | null;
+
+interface UnsavedChangesPromptProps {
+    when: boolean;
+    message?: string;
+}
+declare function UnsavedChangesPrompt({ when, message, }: UnsavedChangesPromptProps): null;
+
+interface WizardStep {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface UseWizardOptions {
+    steps: WizardStep[];
+    initialStepId?: string;
+    canNavigate?: (fromId: string, toId: string) => Promise<boolean> | boolean;
+}
+declare function useWizard({ steps, initialStepId, canNavigate }: UseWizardOptions): {
+    steps: WizardStep[];
+    currentStepId: string;
+    setCurrentStepId: (id: string) => Promise<boolean>;
+    next: () => Promise<boolean>;
+    prev: () => Promise<boolean>;
+    hasNext: boolean;
+    hasPrev: boolean;
+    stepIndex: number;
+};
+
+export { type DialogAction as D, FormActions as F, SaveBar as S, UnsavedChangesPrompt as U, type WizardStep as W, type DialogHeaderConfig as a, type DialogFooterConfig as b, type DialogProps as c, Dialog as d, type DrawerProps as e, Drawer as f, DialogForm as g, DrawerForm as h, FormGrid as i, FormDivider as j, FormSection as k, FormStepper as l, type DialogFormProps as m, type DrawerFormProps as n, type FormActionsProps as o, type FormGridProps as p, type FormSectionProps as q, type Step as r, type FormStepperProps as s, type SaveBarProps as t, useWizard as u, type UnsavedChangesPromptProps as v, type UseWizardOptions as w };