@mehdashti/modals 0.1.0

package/README.md

@@ -0,0 +1,287 @@
+# @mehdashti/modals
+
+Modal and drawer management with stacking support for Smart Platform.
+
+## Features
+
+- **Multiple Modal Types**: Modal, Drawer, Confirmation Dialog
+- **Modal Stacking**: Support for multiple modals simultaneously
+- **Focus Management**: Automatic focus trap and restoration
+- **Accessible**: Built with Radix UI for WCAG compliance
+- **Customizable**: 5 sizes and flexible styling
+- **Keyboard Support**: ESC to close, Tab for focus management
+- **Programmatic Control**: Imperative API via context
+- **Animations**: Smooth enter/exit animations
+- **Type Safe**: Full TypeScript support
+
+## Installation
+
+```bash
+pnpm add @mehdashti/modals
+```
+
+## Usage
+
+### Basic Modal
+
+```tsx
+import { Modal } from '@mehdashti/modals'
+import { useState } from 'react'
+
+function MyComponent() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open Modal</button>
+
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Modal Title"
+        description="This is a modal description"
+      >
+        <p>Modal content goes here</p>
+      </Modal>
+    </>
+  )
+}
+```
+
+### Modal Sizes
+
+```tsx
+<Modal
+  open={open}
+  onClose={onClose}
+  title="Small Modal"
+  size="sm" // sm | md | lg | xl | full
+>
+  <p>Content</p>
+</Modal>
+```
+
+### Modal Context (Programmatic Control)
+
+```tsx
+import { ModalProvider, useModal } from '@mehdashti/modals'
+
+// Wrap your app
+function App() {
+  return (
+    <ModalProvider>
+      <YourApp />
+    </ModalProvider>
+  )
+}
+
+// Use in any component
+function MyComponent() {
+  const { openModal, closeModal } = useModal()
+
+  const handleOpen = () => {
+    openModal('user-profile', {
+      title: 'User Profile',
+      children: <UserProfile />,
+    })
+  }
+
+  const handleClose = () => {
+    closeModal('user-profile')
+  }
+
+  return <button onClick={handleOpen}>Open Profile</button>
+}
+```
+
+### Confirmation Dialog
+
+```tsx
+import { ConfirmDialog } from '@mehdashti/modals'
+
+function DeleteButton() {
+  const [open, setOpen] = useState(false)
+
+  const handleConfirm = async () => {
+    await deleteUser()
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Delete User</button>
+
+      <ConfirmDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        onConfirm={handleConfirm}
+        title="Delete User"
+        description="Are you sure you want to delete this user? This action cannot be undone."
+        confirmText="Delete"
+        cancelText="Cancel"
+        variant="destructive"
+      />
+    </>
+  )
+}
+```
+
+### Drawer (Slide from Side)
+
+```tsx
+import { Drawer } from '@mehdashti/modals'
+
+function MyComponent() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open Drawer</button>
+
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Settings"
+        side="right" // left | right
+      >
+        <SettingsForm />
+      </Drawer>
+    </>
+  )
+}
+```
+
+### Form Modal
+
+```tsx
+import { FormModal } from '@mehdashti/modals'
+import { useSmartForm } from '@mehdashti/forms'
+
+function CreateUserModal({ open, onClose }) {
+  const form = useSmartForm({
+    schema: userSchema,
+    onSubmit: async (data) => {
+      await createUser(data)
+      onClose()
+    },
+  })
+
+  return (
+    <FormModal
+      open={open}
+      onClose={onClose}
+      title="Create User"
+      form={form}
+      submitText="Create"
+    >
+      <FormField name="name" label="Name" control={form.control} />
+      <FormField name="email" label="Email" control={form.control} />
+    </FormModal>
+  )
+}
+```
+
+### Modal Stacking
+
+Multiple modals can be opened simultaneously:
+
+```tsx
+function App() {
+  return (
+    <ModalProvider>
+      <YourApp />
+    </ModalProvider>
+  )
+}
+
+function Component() {
+  const { openModal } = useModal()
+
+  const handleOpenFirst = () => {
+    openModal('first', {
+      title: 'First Modal',
+      children: (
+        <button onClick={() => openModal('second', {
+          title: 'Second Modal',
+          children: <p>This is stacked on top!</p>
+        })}>
+          Open Second Modal
+        </button>
+      ),
+    })
+  }
+
+  return <button onClick={handleOpenFirst}>Open Modal</button>
+}
+```
+
+## API
+
+### Modal Props
+
+```typescript
+interface ModalProps {
+  open: boolean
+  onClose?: () => void
+  title?: React.ReactNode
+  description?: React.ReactNode
+  children: React.ReactNode
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  showClose?: boolean
+  dismissable?: boolean
+  className?: string
+}
+```
+
+### Drawer Props
+
+```typescript
+interface DrawerProps extends ModalProps {
+  side?: 'left' | 'right'
+}
+```
+
+### ConfirmDialog Props
+
+```typescript
+interface ConfirmDialogProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void | Promise<void>
+  title: string
+  description: string
+  confirmText?: string
+  cancelText?: string
+  variant?: 'default' | 'destructive'
+  isLoading?: boolean
+}
+```
+
+### ModalContext API
+
+```typescript
+interface ModalContextValue {
+  openModal: (id: string, props: Omit<ModalProps, 'open' | 'onClose'>) => void
+  closeModal: (id: string) => void
+  closeAllModals: () => void
+  isOpen: (id: string) => boolean
+}
+```
+
+## Accessibility
+
+All components follow WCAG 2.1 guidelines:
+
+- **Focus trap**: Focus is trapped within the modal
+- **Focus restoration**: Focus returns to trigger on close
+- **Keyboard navigation**: ESC to close, Tab to navigate
+- **ARIA attributes**: Proper roles and labels
+- **Screen reader support**: Announcements for state changes
+
+## Examples
+
+See [Storybook stories](./src/components/modal.stories.tsx) for more examples.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,160 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Modal Types
+ *
+ * Type definitions for modal management.
+ */
+
+interface ModalProps {
+    /**
+     * Whether the modal is open
+     */
+    open?: boolean;
+    /**
+     * Callback when modal is closed
+     */
+    onClose?: () => void;
+    /**
+     * Modal title
+     */
+    title?: string;
+    /**
+     * Modal description
+     */
+    description?: string;
+    /**
+     * Modal content
+     */
+    children: React.ReactNode;
+    /**
+     * Modal size
+     */
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    /**
+     * Whether to show close button
+     */
+    showClose?: boolean;
+    /**
+     * Custom className for modal content
+     */
+    className?: string;
+    /**
+     * Whether the modal can be dismissed by clicking outside or pressing Escape
+     */
+    dismissable?: boolean;
+}
+interface ModalContextValue {
+    /**
+     * Open a modal
+     */
+    openModal: (id: string, props: Omit<ModalProps, "open" | "onClose">) => void;
+    /**
+     * Close a modal
+     */
+    closeModal: (id: string) => void;
+    /**
+     * Close all modals
+     */
+    closeAllModals: () => void;
+    /**
+     * Check if a modal is open
+     */
+    isModalOpen: (id: string) => boolean;
+    /**
+     * Get all open modal IDs
+     */
+    openModals: string[];
+}
+interface ConfirmModalProps {
+    /**
+     * Confirmation title
+     */
+    title: string;
+    /**
+     * Confirmation message
+     */
+    message: string;
+    /**
+     * Confirm button text
+     */
+    confirmText?: string;
+    /**
+     * Cancel button text
+     */
+    cancelText?: string;
+    /**
+     * Callback when confirmed
+     */
+    onConfirm: () => void | Promise<void>;
+    /**
+     * Callback when cancelled
+     */
+    onCancel?: () => void;
+    /**
+     * Confirm button variant
+     */
+    variant?: "default" | "destructive";
+}
+
+/**
+ * Modal Component
+ *
+ * Accessible modal dialog with stacking support.
+ */
+declare function Modal({ open, onClose, title, description, children, size, showClose, className, dismissable, }: ModalProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Confirm Modal
+ *
+ * Modal for confirming user actions.
+ */
+declare function ConfirmModal({ title, message, confirmText, cancelText, onConfirm, onCancel, variant, }: ConfirmModalProps & {
+    open?: boolean;
+    onClose?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * useModal Hook
+ *
+ * Hook for programmatic modal control.
+ */
+
+/**
+ * Use Modal
+ *
+ * Get modal control functions for a specific modal ID.
+ */
+declare function useModal(id: string): {
+    /**
+     * Open this modal
+     */
+    open: (props: Omit<ModalProps, "open" | "onClose">) => void;
+    /**
+     * Close this modal
+     */
+    close: () => void;
+    /**
+     * Check if this modal is open
+     */
+    isOpen: boolean;
+};
+
+interface ModalProviderProps {
+    children: React.ReactNode;
+}
+/**
+ * Modal Provider
+ *
+ * Provides modal management functionality to the app.
+ */
+declare function ModalProvider({ children }: ModalProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Use Modal Context
+ *
+ * Access modal management functions.
+ */
+declare function useModalContext(): ModalContextValue;
+
+export { ConfirmModal, type ConfirmModalProps, Modal, type ModalContextValue, type ModalProps, ModalProvider, useModal, useModalContext };

package/dist/index.js

@@ -0,0 +1,232 @@
+// src/components/modal.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-full"
+};
+function Modal({
+  open = false,
+  onClose,
+  title,
+  description,
+  children,
+  size = "md",
+  showClose = true,
+  className,
+  dismissable = true
+}) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: (open2) => !open2 && onClose?.(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        className: clsx(
+          "fixed left-[50%] top-[50%] z-50 w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "sm:rounded-lg",
+          sizeClasses[size],
+          className
+        ),
+        onEscapeKeyDown: (e) => {
+          if (!dismissable) {
+            e.preventDefault();
+          }
+        },
+        onPointerDownOutside: (e) => {
+          if (!dismissable) {
+            e.preventDefault();
+          }
+        },
+        children: [
+          (title || description) && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            title && /* @__PURE__ */ jsx(Dialog.Title, { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+            description && /* @__PURE__ */ jsx(Dialog.Description, { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4", children }),
+          showClose && /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "h-4 w-4",
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/confirm-modal.tsx
+import * as React from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConfirmModal({
+  title,
+  message,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default"
+}) {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(true);
+  const handleConfirm = async () => {
+    setIsLoading(true);
+    try {
+      await onConfirm();
+      setIsOpen(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleCancel = () => {
+    onCancel?.();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsx2(
+    Modal,
+    {
+      open: isOpen,
+      onClose: handleCancel,
+      title,
+      size: "sm",
+      dismissable: !isLoading,
+      children: /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: message }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex justify-end space-x-2", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancel,
+              disabled: isLoading,
+              className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2",
+              children: cancelText
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: handleConfirm,
+              disabled: isLoading,
+              className: `inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 ${variant === "destructive" ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90"}`,
+              children: isLoading ? "Loading..." : confirmText
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/context/modal-context.tsx
+import * as React2 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ModalContext = React2.createContext(
+  void 0
+);
+function ModalProvider({ children }) {
+  const [modals, setModals] = React2.useState([]);
+  const openModal = React2.useCallback(
+    (id, props) => {
+      setModals((prev) => {
+        const existing = prev.find((m) => m.id === id);
+        if (existing) {
+          return prev.map((m) => m.id === id ? { id, props } : m);
+        }
+        return [...prev, { id, props }];
+      });
+    },
+    []
+  );
+  const closeModal = React2.useCallback((id) => {
+    setModals((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+  const closeAllModals = React2.useCallback(() => {
+    setModals([]);
+  }, []);
+  const isModalOpen = React2.useCallback(
+    (id) => {
+      return modals.some((m) => m.id === id);
+    },
+    [modals]
+  );
+  const value = {
+    openModal,
+    closeModal,
+    closeAllModals,
+    isModalOpen,
+    openModals: modals.map((m) => m.id)
+  };
+  return /* @__PURE__ */ jsxs3(ModalContext.Provider, { value, children: [
+    children,
+    modals.map((modal) => /* @__PURE__ */ jsx3(
+      Modal,
+      {
+        open: true,
+        onClose: () => closeModal(modal.id),
+        ...modal.props
+      },
+      modal.id
+    ))
+  ] });
+}
+function useModalContext() {
+  const context = React2.useContext(ModalContext);
+  if (!context) {
+    throw new Error("useModalContext must be used within ModalProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-modal.ts
+function useModal(id) {
+  const { openModal, closeModal, isModalOpen } = useModalContext();
+  return {
+    /**
+     * Open this modal
+     */
+    open: (props) => openModal(id, props),
+    /**
+     * Close this modal
+     */
+    close: () => closeModal(id),
+    /**
+     * Check if this modal is open
+     */
+    isOpen: isModalOpen(id)
+  };
+}
+export {
+  ConfirmModal,
+  Modal,
+  ModalProvider,
+  useModal,
+  useModalContext
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/modal.tsx","../src/components/confirm-modal.tsx","../src/context/modal-context.tsx","../src/hooks/use-modal.ts"],"sourcesContent":["/**\n * Modal Component\n *\n * Modal dialog with Radix UI.\n */\n\nimport * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { clsx } from \"clsx\";\nimport type { ModalProps } from \"../types/index.js\";\n\nconst sizeClasses = {\n  sm: \"max-w-md\",\n  md: \"max-w-lg\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  full: \"max-w-full\",\n};\n\n/**\n * Modal Component\n *\n * Accessible modal dialog with stacking support.\n */\nexport function Modal({\n  open = false,\n  onClose,\n  title,\n  description,\n  children,\n  size = \"md\",\n  showClose = true,\n  className,\n  dismissable = true,\n}: ModalProps) {\n  return (\n    <Dialog.Root open={open} onOpenChange={(open) => !open && onClose?.()}>\n      <Dialog.Portal>\n        <Dialog.Overlay className=\"fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\" />\n        <Dialog.Content\n          className={clsx(\n            \"fixed left-[50%] top-[50%] z-50 w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]\",\n            \"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n            \"sm:rounded-lg\",\n            sizeClasses[size],\n            className\n          )}\n          onEscapeKeyDown={(e) => {\n            if (!dismissable) {\n              e.preventDefault();\n            }\n          }}\n          onPointerDownOutside={(e) => {\n            if (!dismissable) {\n              e.preventDefault();\n            }\n          }}\n        >\n          {(title || description) && (\n            <div className=\"space-y-2\">\n              {title && (\n                <Dialog.Title className=\"text-lg font-semibold leading-none tracking-tight\">\n                  {title}\n                </Dialog.Title>\n              )}\n              {description && (\n                <Dialog.Description className=\"text-sm text-muted-foreground\">\n                  {description}\n                </Dialog.Description>\n              )}\n            </div>\n          )}\n\n          <div className=\"mt-4\">{children}</div>\n\n          {showClose && (\n            <Dialog.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"h-4 w-4\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n              <span className=\"sr-only\">Close</span>\n            </Dialog.Close>\n          )}\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n","/**\n * Confirm Modal Component\n *\n * Confirmation dialog with confirm/cancel actions.\n */\n\nimport * as React from \"react\";\nimport { Modal } from \"./modal.js\";\nimport type { ConfirmModalProps } from \"../types/index.js\";\n\n/**\n * Confirm Modal\n *\n * Modal for confirming user actions.\n */\nexport function ConfirmModal({\n  title,\n  message,\n  confirmText = \"Confirm\",\n  cancelText = \"Cancel\",\n  onConfirm,\n  onCancel,\n  variant = \"default\",\n}: ConfirmModalProps & { open?: boolean; onClose?: () => void }) {\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [isOpen, setIsOpen] = React.useState(true);\n\n  const handleConfirm = async () => {\n    setIsLoading(true);\n    try {\n      await onConfirm();\n      setIsOpen(false);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    setIsOpen(false);\n  };\n\n  return (\n    <Modal\n      open={isOpen}\n      onClose={handleCancel}\n      title={title}\n      size=\"sm\"\n      dismissable={!isLoading}\n    >\n      <div className=\"space-y-4\">\n        <p className=\"text-sm text-muted-foreground\">{message}</p>\n\n        <div className=\"flex justify-end space-x-2\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={isLoading}\n            className=\"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2\"\n          >\n            {cancelText}\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isLoading}\n            className={`inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 ${\n              variant === \"destructive\"\n                ? \"bg-destructive text-destructive-foreground hover:bg-destructive/90\"\n                : \"bg-primary text-primary-foreground hover:bg-primary/90\"\n            }`}\n          >\n            {isLoading ? \"Loading...\" : confirmText}\n          </button>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n","/**\n * Modal Context\n *\n * Context for managing multiple modals with stacking support.\n */\n\nimport * as React from \"react\";\nimport type { ModalContextValue, ModalProps } from \"../types/index.js\";\nimport { Modal } from \"../components/modal.js\";\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n  undefined\n);\n\ninterface ModalState {\n  id: string;\n  props: Omit<ModalProps, \"open\" | \"onClose\">;\n}\n\nexport interface ModalProviderProps {\n  children: React.ReactNode;\n}\n\n/**\n * Modal Provider\n *\n * Provides modal management functionality to the app.\n */\nexport function ModalProvider({ children }: ModalProviderProps) {\n  const [modals, setModals] = React.useState<ModalState[]>([]);\n\n  const openModal = React.useCallback(\n    (id: string, props: Omit<ModalProps, \"open\" | \"onClose\">) => {\n      setModals((prev) => {\n        // If modal already exists, update it\n        const existing = prev.find((m) => m.id === id);\n        if (existing) {\n          return prev.map((m) => (m.id === id ? { id, props } : m));\n        }\n        // Otherwise add new modal\n        return [...prev, { id, props }];\n      });\n    },\n    []\n  );\n\n  const closeModal = React.useCallback((id: string) => {\n    setModals((prev) => prev.filter((m) => m.id !== id));\n  }, []);\n\n  const closeAllModals = React.useCallback(() => {\n    setModals([]);\n  }, []);\n\n  const isModalOpen = React.useCallback(\n    (id: string) => {\n      return modals.some((m) => m.id === id);\n    },\n    [modals]\n  );\n\n  const value: ModalContextValue = {\n    openModal,\n    closeModal,\n    closeAllModals,\n    isModalOpen,\n    openModals: modals.map((m) => m.id),\n  };\n\n  return (\n    <ModalContext.Provider value={value}>\n      {children}\n      {modals.map((modal) => (\n        <Modal\n          key={modal.id}\n          open={true}\n          onClose={() => closeModal(modal.id)}\n          {...modal.props}\n        />\n      ))}\n    </ModalContext.Provider>\n  );\n}\n\n/**\n * Use Modal Context\n *\n * Access modal management functions.\n */\nexport function useModalContext(): ModalContextValue {\n  const context = React.useContext(ModalContext);\n\n  if (!context) {\n    throw new Error(\"useModalContext must be used within ModalProvider\");\n  }\n\n  return context;\n}\n","/**\n * useModal Hook\n *\n * Hook for programmatic modal control.\n */\n\nimport { useModalContext } from \"../context/modal-context.js\";\nimport type { ModalProps } from \"../types/index.js\";\n\n/**\n * Use Modal\n *\n * Get modal control functions for a specific modal ID.\n */\nexport function useModal(id: string) {\n  const { openModal, closeModal, isModalOpen } = useModalContext();\n\n  return {\n    /**\n     * Open this modal\n     */\n    open: (props: Omit<ModalProps, \"open\" | \"onClose\">) =>\n      openModal(id, props),\n\n    /**\n     * Close this modal\n     */\n    close: () => closeModal(id),\n\n    /**\n     * Check if this modal is open\n     */\n    isOpen: isModalOpen(id),\n  };\n}\n"],"mappings":"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","names":["open","jsx","jsxs","React","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@mehdashti/modals",
+  "version": "0.1.0",
+  "description": "Modal management system with stacking support for Smart Platform",
+  "author": "mehdashti",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mehdashti/smart-platform.git",
+    "directory": "packages/modals"
+  },
+  "homepage": "https://github.com/mehdashti/smart-platform#readme",
+  "bugs": {
+    "url": "https://github.com/mehdashti/smart-platform/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "@mehdashti/ui": "workspace:^",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@mehdashti/ui": "workspace:^",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  },
+  "keywords": [
+    "react",
+    "modal",
+    "dialog",
+    "radix-ui",
+    "stacking",
+    "smart-platform"
+  ]
+}