@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Modal/index.mjs

@@ -1,3 +1,222 @@
-export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalTitle, ModalTrigger, modalContentVariants, modalOverlayVariants } from '../../chunk-UE2S4PCX.mjs';
+"use client";
+import { createContext, Children, isValidElement, useContext, cloneElement } from 'react';
+import { DialogTrigger, OverlayTriggerStateContext, Heading, ModalOverlay as ModalOverlay$1, Modal as Modal$1, Dialog, Button } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/elements/Modal/Modal.tsx
+var ModalContext = createContext(void 0);
+function ModalRoot({ children, defaultOpen, isOpen, onOpenChange, role = "dialog" }) {
+  const childArray = Children.toArray(children);
+  const triggerChild = childArray.find(
+    (child) => isValidElement(child) && (child.type === ModalTrigger || child.type.displayName === "ModalTrigger")
+  );
+  const contentChild = childArray.find(
+    (child) => isValidElement(child) && (child.type === ModalContent || child.type.displayName === "ModalContent")
+  );
+  if (!triggerChild || !contentChild) {
+    throw new Error(
+      "Modal requires exactly one Modal.Trigger and one Modal.Content as children"
+    );
+  }
+  const triggerElement = triggerChild;
+  const unwrappedTrigger = isValidElement(triggerElement) ? triggerElement.props.children : null;
+  const unwrappedContent = contentChild;
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { role }, children: /* @__PURE__ */ jsxs(
+    DialogTrigger,
+    {
+      defaultOpen,
+      isOpen,
+      onOpenChange,
+      children: [
+        unwrappedTrigger,
+        unwrappedContent
+      ]
+    }
+  ) });
+}
+ModalRoot.displayName = "Modal";
+function ModalTrigger({ children }) {
+  return children;
+}
+ModalTrigger.displayName = "ModalTrigger";
+function ModalContent({
+  children,
+  size = "md",
+  animation = "fade-zoom",
+  animationDuration = 200,
+  isDismissable = true,
+  isKeyboardDismissDisabled = false,
+  showClose = true,
+  className
+}) {
+  const context = useContext(ModalContext);
+  const role = context?.role ?? "dialog";
+  const overlayClasses = modalOverlayVariants({ animation });
+  const modalClasses = modalContentVariants({ size, animation });
+  const mergedModalClasses = className ? `${modalClasses} ${className}` : modalClasses;
+  return /* @__PURE__ */ jsx(
+    ModalOverlay$1,
+    {
+      isDismissable,
+      isKeyboardDismissDisabled,
+      className: overlayClasses,
+      children: /* @__PURE__ */ jsx(
+        Modal$1,
+        {
+          className: mergedModalClasses,
+          style: {
+            transitionDuration: `${animationDuration}ms`
+          },
+          children: /* @__PURE__ */ jsx(Dialog, { role, className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            showClose && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                onPress: close,
+                className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-[var(--content-background)] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:ring-offset-2 disabled:pointer-events-none min-h-[44px] min-w-[44px]",
+                "aria-label": "Close modal",
+                children: [
+                  /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ),
+            children
+          ] }) })
+        }
+      )
+    }
+  );
+}
+ModalContent.displayName = "ModalContent";
+function ModalOverlay(_props) {
+  return null;
+}
+ModalOverlay.displayName = "ModalOverlay";
+function ModalHeader({ children, className }) {
+  const classes = className ? `flex flex-col space-y-1.5 text-center sm:text-left ${className}` : "flex flex-col space-y-1.5 text-center sm:text-left";
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+ModalHeader.displayName = "ModalHeader";
+function ModalTitle({ children, as = "h2", className }) {
+  const classes = className ? `text-lg font-semibold leading-none tracking-tight ${className}` : "text-lg font-semibold leading-none tracking-tight";
+  return /* @__PURE__ */ jsx(Heading, { slot: "title", level: parseInt(as[1] ?? "2"), className: classes, children });
+}
+ModalTitle.displayName = "ModalTitle";
+function ModalDescription({ children, className }) {
+  const classes = className ? `text-sm text-[var(--menu-muted)] ${className}` : "text-sm text-[var(--menu-muted)]";
+  return /* @__PURE__ */ jsx("p", { slot: "description", className: classes, children });
+}
+ModalDescription.displayName = "ModalDescription";
+function ModalFooter({ children, className }) {
+  const classes = className ? `flex flex-col-reverse sm:flex-row sm:justify-end gap-2 ${className}` : "flex flex-col-reverse sm:flex-row sm:justify-end gap-2";
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+ModalFooter.displayName = "ModalFooter";
+function ModalClose({ children }) {
+  const state = useContext(OverlayTriggerStateContext);
+  if (!state) {
+    throw new Error("Modal.Close must be used inside Modal.Content");
+  }
+  if (!isValidElement(children)) {
+    throw new Error("Modal.Close requires a valid React element as a child");
+  }
+  const childElement = children;
+  const handlePress = () => {
+    state.close();
+  };
+  const existingOnPress = childElement.props?.onPress;
+  const mergedOnPress = existingOnPress ? () => {
+    existingOnPress();
+    handlePress();
+  } : handlePress;
+  return cloneElement(childElement, { onPress: mergedOnPress });
+}
+ModalClose.displayName = "ModalClose";
+var modalContentVariants = cva(
+  [
+    // Base styles
+    "relative",
+    "bg-[var(--content-background)]",
+    "text-[var(--content-foreground)]",
+    "rounded-lg",
+    "shadow-lg",
+    "p-6",
+    "w-full",
+    "outline-none",
+    // Responsive: full-width on mobile with padding, constrained on desktop
+    "mx-4",
+    "sm:mx-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        // 300px
+        md: "max-w-md",
+        // 425px
+        lg: "max-w-lg",
+        // 600px
+        xl: "max-w-2xl",
+        // 800px
+        full: "max-w-full min-h-screen rounded-none"
+        // Full screen
+      },
+      animation: {
+        "fade-zoom": "animate-fadeIn",
+        // Fade in with scale
+        fade: "animate-fadeIn",
+        // Fade in only
+        slide: "animate-slideUp",
+        // Slide up
+        none: ""
+        // No animation
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      animation: "fade-zoom"
+    }
+  }
+);
+var modalOverlayVariants = cva(
+  [
+    // Base overlay styles
+    "fixed",
+    "inset-0",
+    "z-50",
+    "flex",
+    "items-center",
+    "justify-center",
+    "bg-black/50",
+    "backdrop-blur-sm"
+  ],
+  {
+    variants: {
+      animation: {
+        "fade-zoom": "animate-fadeIn",
+        fade: "animate-fadeIn",
+        slide: "animate-fadeIn",
+        none: ""
+      }
+    },
+    defaultVariants: {
+      animation: "fade-zoom"
+    }
+  }
+);
+var Modal = Object.assign(ModalRoot, {
+  Trigger: ModalTrigger,
+  Content: ModalContent,
+  Overlay: ModalOverlay,
+  Header: ModalHeader,
+  Title: ModalTitle,
+  Description: ModalDescription,
+  Footer: ModalFooter,
+  Close: ModalClose
+});
+
+export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalTitle, ModalTrigger, modalContentVariants, modalOverlayVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/elements/Modal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}
+{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["AriaDialogTrigger","AriaModalOverlay","AriaModal","AriaDialog","AriaButton"],"mappings":"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","file":"index.mjs","sourcesContent":["'use client';\n\n/**\n * Modal Component - Implementation\n *\n * Accessible modal dialog component combining React Aria primitives with ShadCN styling.\n * Follows Themis library patterns with compound component structure.\n *\n * @see PRD.md (Full requirements)\n * @see Modal.types.ts (Zod schemas)\n * @see RESEARCH.md (React Aria patterns)\n */\n\nimport {\n  Children,\n  isValidElement,\n  cloneElement,\n  useContext,\n  createContext,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport {\n  DialogTrigger as AriaDialogTrigger,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Dialog as AriaDialog,\n  Heading,\n  Button as AriaButton,\n  OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type {\n  ModalProps,\n  ModalTriggerProps,\n  ModalContentProps,\n  ModalOverlayProps,\n  ModalHeaderProps,\n  ModalTitleProps,\n  ModalDescriptionProps,\n  ModalFooterProps,\n  ModalCloseProps,\n} from './Modal.types';\n\n/**\n * Modal Context\n * Passes role prop from Modal root to Modal.Content\n */\ninterface ModalContextValue {\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst ModalContext = createContext<ModalContextValue | undefined>(undefined);\n\n/**\n * Modal Root Component\n *\n * Manages modal open/close state and validates required children structure.\n * Must contain exactly one Modal.Trigger and one Modal.Content.\n *\n * Unwraps compound component children and passes them to React Aria's DialogTrigger.\n *\n * @see PRD.md FR-001 (Modal Root Requirements)\n * @see PRD.md FR-012 (Controlled Mode)\n * @see PRD.md FR-013 (Uncontrolled Mode)\n */\nfunction ModalRoot({ children, defaultOpen, isOpen, onOpenChange, role = 'dialog' }: ModalProps): ReactElement {\n  // Validate children structure: must have exactly one Trigger and one Content\n  const childArray = Children.toArray(children);\n\n  const triggerChild = childArray.find(\n    (child) =>\n      isValidElement(child) &&\n      (child.type === ModalTrigger ||\n        (child.type as { displayName?: string }).displayName === 'ModalTrigger')\n  );\n\n  const contentChild = childArray.find(\n    (child) =>\n      isValidElement(child) &&\n      (child.type === ModalContent ||\n        (child.type as { displayName?: string }).displayName === 'ModalContent')\n  );\n\n  if (!triggerChild || !contentChild) {\n    throw new Error(\n      'Modal requires exactly one Modal.Trigger and one Modal.Content as children'\n    );\n  }\n\n  // Extract the actual children from Modal.Trigger and Modal.Content\n  // React Aria's DialogTrigger expects direct Button and Modal children\n  // Cast after validation\n  const triggerElement = triggerChild as ReactElement;\n  const unwrappedTrigger = isValidElement(triggerElement)\n    ? ((triggerElement.props as unknown as { children?: ReactNode }).children as ReactNode)\n    : null;\n  const unwrappedContent = contentChild as ReactElement; // Already validated above\n\n  return (\n    <ModalContext.Provider value={{ role }}>\n      <AriaDialogTrigger\n        defaultOpen={defaultOpen}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n      >\n        {unwrappedTrigger}\n        {unwrappedContent}\n      </AriaDialogTrigger>\n    </ModalContext.Provider>\n  );\n}\n\nModalRoot.displayName = 'Modal';\n\n/**\n * Modal.Trigger Component\n *\n * Wraps a single child element (typically Button) with modal trigger behavior.\n * Handles click events to open modal and manages ARIA attributes.\n *\n * React Aria's DialogTrigger (used in Modal root) automatically applies:\n * - aria-haspopup=\"dialog\"\n * - aria-expanded (true/false based on state)\n * - onClick handler to toggle modal\n *\n * @see PRD.md FR-002 (Trigger Requirements)\n * @see RESEARCH.md Section 2 (React Aria Integration)\n */\nfunction ModalTrigger({ children }: ModalTriggerProps): ReactElement {\n  // React Aria's DialogTrigger (in Modal root) automatically adds ARIA attributes\n  // to the first child component. We pass through the child element directly.\n  return children as ReactElement;\n}\n\nModalTrigger.displayName = 'ModalTrigger';\n\n/**\n * Modal.Content Component\n *\n * Renders the modal content with overlay backdrop.\n * Uses React Aria's Modal and ModalOverlay for accessibility.\n * Applies CVA variants for size and animation.\n *\n * @see PRD.md FR-003 (Content Requirements)\n * @see PRD.md TR-001 (CVA Variant Styling)\n * @see RESEARCH.md Section 2 (React Aria Integration)\n */\nfunction ModalContent({\n  children,\n  size = 'md',\n  animation = 'fade-zoom',\n  animationDuration = 200,\n  isDismissable = true,\n  isKeyboardDismissDisabled = false,\n  showClose = true,\n  className,\n}: ModalContentProps): ReactElement {\n  // Get role from context\n  const context = useContext(ModalContext);\n  const role = context?.role ?? 'dialog';\n\n  // Generate overlay classes with animation variant\n  const overlayClasses = modalOverlayVariants({ animation });\n\n  // Generate modal classes with size and animation variants, merged with custom className\n  const modalClasses = modalContentVariants({ size, animation });\n  const mergedModalClasses = className\n    ? `${modalClasses} ${className}`\n    : modalClasses;\n\n  return (\n    <AriaModalOverlay\n      isDismissable={isDismissable}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      className={overlayClasses}\n    >\n      <AriaModal\n        className={mergedModalClasses}\n        style={{\n          transitionDuration: `${animationDuration}ms`,\n        }}\n      >\n        <AriaDialog role={role} className=\"outline-none\">\n          {({ close }) => (\n            <>\n              {showClose && (\n                <AriaButton\n                  onPress={close}\n                  className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-[var(--content-background)] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:ring-offset-2 disabled:pointer-events-none min-h-[44px] min-w-[44px]\"\n                  aria-label=\"Close modal\"\n                >\n                  <X className=\"h-4 w-4\" />\n                  <span className=\"sr-only\">Close</span>\n                </AriaButton>\n              )}\n              {children}\n            </>\n          )}\n        </AriaDialog>\n      </AriaModal>\n    </AriaModalOverlay>\n  );\n}\n\nModalContent.displayName = 'ModalContent';\n\n/**\n * Modal.Overlay Component (Placeholder - not exposed in public API)\n * Overlay is managed internally by Modal.Content via AriaModalOverlay\n */\nfunction ModalOverlay(_props: ModalOverlayProps): null {\n  return null;\n}\n\nModalOverlay.displayName = 'ModalOverlay';\n\n/**\n * Modal.Header Component\n *\n * Container for modal header content (typically Title and Description).\n * Applies consistent spacing and layout.\n *\n * @see PRD.md FR-005 (Header Requirements)\n */\nfunction ModalHeader({ children, className }: ModalHeaderProps): ReactElement {\n  const classes = className\n    ? `flex flex-col space-y-1.5 text-center sm:text-left ${className}`\n    : 'flex flex-col space-y-1.5 text-center sm:text-left';\n\n  return <div className={classes}>{children}</div>;\n}\n\nModalHeader.displayName = 'ModalHeader';\n\n/**\n * Modal.Title Component\n *\n * Renders modal title using React Aria's Heading component.\n * Automatically links to modal via aria-labelledby.\n *\n * @see PRD.md FR-006 (Title Requirements)\n * @see PRD.md AR-002 (ARIA Attributes - auto-labelledby)\n */\nfunction ModalTitle({ children, as = 'h2', className }: ModalTitleProps): ReactElement {\n  const classes = className\n    ? `text-lg font-semibold leading-none tracking-tight ${className}`\n    : 'text-lg font-semibold leading-none tracking-tight';\n\n  return (\n    <Heading slot=\"title\" level={parseInt(as[1] ?? '2')} className={classes}>\n      {children}\n    </Heading>\n  );\n}\n\nModalTitle.displayName = 'ModalTitle';\n\n/**\n * Modal.Description Component\n *\n * Renders description text that automatically links to modal via aria-describedby.\n * Uses muted text color for visual hierarchy.\n *\n * @see PRD.md FR-007 (Description Requirements)\n * @see PRD.md AR-002 (ARIA Attributes - auto-describedby)\n */\nfunction ModalDescription({ children, className }: ModalDescriptionProps): ReactElement {\n  const classes = className\n    ? `text-sm text-[var(--menu-muted)] ${className}`\n    : 'text-sm text-[var(--menu-muted)]';\n\n  return (\n    <p slot=\"description\" className={classes}>\n      {children}\n    </p>\n  );\n}\n\nModalDescription.displayName = 'ModalDescription';\n\n/**\n * Modal.Footer Component\n *\n * Container for modal action buttons (Cancel, Confirm, etc.).\n * Aligns buttons to the right with consistent spacing.\n * Responsive: stacks vertically on mobile, horizontal on desktop.\n *\n * @see PRD.md FR-008 (Footer Requirements)\n * @see PRD.md DS-003 (Spacing - footer button gap)\n */\nfunction ModalFooter({ children, className }: ModalFooterProps): ReactElement {\n  const classes = className\n    ? `flex flex-col-reverse sm:flex-row sm:justify-end gap-2 ${className}`\n    : 'flex flex-col-reverse sm:flex-row sm:justify-end gap-2';\n\n  return <div className={classes}>{children}</div>;\n}\n\nModalFooter.displayName = 'ModalFooter';\n\n/**\n * Modal.Close Component\n *\n * Wraps a child element (typically Button) with modal close behavior.\n * Uses OverlayTriggerStateContext from React Aria to access close function.\n *\n * @see PRD.md FR-009 (Close Requirements)\n */\nfunction ModalClose({ children }: ModalCloseProps): ReactElement {\n  // Access the overlay trigger state from React Aria context\n  const state = useContext(OverlayTriggerStateContext);\n\n  if (!state) {\n    throw new Error('Modal.Close must be used inside Modal.Content');\n  }\n\n  // Clone the child element and add/merge the onPress handler to close the modal\n  if (!isValidElement(children)) {\n    throw new Error('Modal.Close requires a valid React element as a child');\n  }\n\n  // Cast to ReactElement after validation\n  const childElement = children as ReactElement;\n\n  const handlePress = (): void => {\n    state.close();\n  };\n\n  // Merge with existing onPress if present\n  const existingOnPress = (childElement.props as unknown as { onPress?: () => void })?.onPress;\n  const mergedOnPress = existingOnPress\n    ? (): void => {\n        existingOnPress();\n        handlePress();\n      }\n    : handlePress;\n\n  // cloneElement with onPress override - use unknown for flexible typing\n  return cloneElement(childElement, { onPress: mergedOnPress } as unknown as Partial<typeof childElement.props>);\n}\n\nModalClose.displayName = 'ModalClose';\n\n/**\n * CVA Variants for Modal.Content\n *\n * @see PRD.md TR-001 (CVA Variant Styling)\n * @see PRD.md DS-001 (Size Variants)\n */\nexport const modalContentVariants = cva(\n  [\n    // Base styles\n    'relative',\n    'bg-[var(--content-background)]',\n    'text-[var(--content-foreground)]',\n    'rounded-lg',\n    'shadow-lg',\n    'p-6',\n    'w-full',\n    'outline-none',\n    // Responsive: full-width on mobile with padding, constrained on desktop\n    'mx-4',\n    'sm:mx-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'max-w-sm',      // 300px\n        md: 'max-w-md',      // 425px\n        lg: 'max-w-lg',      // 600px\n        xl: 'max-w-2xl',     // 800px\n        full: 'max-w-full min-h-screen rounded-none', // Full screen\n      },\n      animation: {\n        'fade-zoom': 'animate-fadeIn', // Fade in with scale\n        fade: 'animate-fadeIn',        // Fade in only\n        slide: 'animate-slideUp',      // Slide up\n        none: '',                      // No animation\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      animation: 'fade-zoom',\n    },\n  }\n);\n\n/**\n * CVA Variants for Modal Overlay\n */\nexport const modalOverlayVariants = cva(\n  [\n    // Base overlay styles\n    'fixed',\n    'inset-0',\n    'z-50',\n    'flex',\n    'items-center',\n    'justify-center',\n    'bg-black/50',\n    'backdrop-blur-sm',\n  ],\n  {\n    variants: {\n      animation: {\n        'fade-zoom': 'animate-fadeIn',\n        fade: 'animate-fadeIn',\n        slide: 'animate-fadeIn',\n        none: '',\n      },\n    },\n    defaultVariants: {\n      animation: 'fade-zoom',\n    },\n  }\n);\n\n/**\n * Compound Component Export\n *\n * Follows Themis library pattern using Object.assign() for compound components.\n *\n * @see RESEARCH.md Section 1 (Compound Component Pattern)\n */\nexport const Modal = Object.assign(ModalRoot, {\n  Trigger: ModalTrigger,\n  Content: ModalContent,\n  Overlay: ModalOverlay,\n  Header: ModalHeader,\n  Title: ModalTitle,\n  Description: ModalDescription,\n  Footer: ModalFooter,\n  Close: ModalClose,\n});\n\n// Named exports for individual components\nexport {\n  ModalRoot,\n  ModalTrigger,\n  ModalContent,\n  ModalOverlay,\n  ModalHeader,\n  ModalTitle,\n  ModalDescription,\n  ModalFooter,\n  ModalClose,\n};\n"]}