@tribepad/themis 1.0.0

package/dist/chunk-3JHN4GAL.js

@@ -0,0 +1,326 @@
+'use strict';
+
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var panelContentVariants = classVarianceAuthority.cva(
+  [
+    "flex flex-col h-full",
+    "bg-[var(--content-background)] text-[var(--content-foreground)]",
+    "shadow-lg"
+  ],
+  {
+    variants: {
+      position: {
+        right: "border-l border-[var(--border)]",
+        left: "border-r border-[var(--border)]"
+      },
+      width: {
+        sm: "w-[300px]",
+        md: "w-[400px]",
+        lg: "w-[500px]",
+        xl: "w-[600px]",
+        auto: "w-auto"
+      }
+    },
+    defaultVariants: {
+      position: "right",
+      width: "md"
+    }
+  }
+);
+var panelHeaderVariants = classVarianceAuthority.cva([
+  "flex items-start justify-between",
+  "px-4 py-4",
+  "border-b border-[var(--border)]"
+]);
+var panelBodyVariants = classVarianceAuthority.cva(["flex-1 overflow-y-auto", "px-4 py-4"]);
+var panelFooterVariants = classVarianceAuthority.cva([
+  "flex items-center justify-end gap-2",
+  "px-4 py-4",
+  "border-t border-[var(--border)]"
+]);
+var panelCloseButtonVariants = classVarianceAuthority.cva([
+  "inline-flex items-center justify-center rounded-md",
+  "min-h-[44px] min-w-[44px]",
+  "text-[var(--menu-muted)]",
+  "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
+  "focus-visible:outline-none focus-visible:ring-2",
+  "focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
+  // No transition - instant state changes (v1)
+]);
+var PanelContext = react.createContext(null);
+function usePanelContext() {
+  const context = react.useContext(PanelContext);
+  if (!context) {
+    throw new Error("Panel compound components must be used within a Panel");
+  }
+  return context;
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = react.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = (e) => setMatches(e.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query, matches]);
+  return matches;
+}
+function PanelRoot({
+  children,
+  isOpen: controlledIsOpen,
+  defaultOpen = false,
+  onOpenChange,
+  onClose,
+  position = "right",
+  width = "md",
+  mobileBreakpoint = 768
+}) {
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = react.useState(defaultOpen);
+  const isControlled = controlledIsOpen !== void 0;
+  const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
+  const triggerRef = react.useRef(null);
+  const uniqueId = react.useId();
+  const panelId = `panel-${uniqueId}`;
+  const titleId = `panel-title-${uniqueId}`;
+  const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
+  const setIsOpen = react.useCallback(
+    (open) => {
+      if (!isControlled) {
+        setUncontrolledIsOpen(open);
+      }
+      onOpenChange?.(open);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleClose = react.useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+    if (triggerRef.current) {
+      window.requestAnimationFrame(() => {
+        triggerRef.current?.focus();
+      });
+    }
+  }, [setIsOpen, onClose]);
+  react.useEffect(() => {
+    if (!isOpen || isMobile) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, isMobile, handleClose]);
+  const contextValue = {
+    isOpen,
+    setIsOpen,
+    panelId,
+    titleId,
+    triggerRef,
+    position,
+    width,
+    mobileBreakpoint,
+    isMobile,
+    handleClose
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(PanelContext.Provider, { value: contextValue, children });
+}
+PanelRoot.displayName = "Panel";
+function PanelTrigger({
+  children,
+  asChild = true
+}) {
+  const { isOpen, setIsOpen, panelId, triggerRef } = usePanelContext();
+  const setRef = react.useCallback(
+    (element) => {
+      triggerRef.current = element;
+    },
+    [triggerRef]
+  );
+  const handlePress = react.useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [setIsOpen, isOpen]);
+  if (asChild && react.isValidElement(children)) {
+    const childProps = children.props;
+    return react.cloneElement(children, {
+      ref: setRef,
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? panelId : void 0,
+      "data-testid": "panel-trigger",
+      onPress: handlePress,
+      onClick: childProps.onClick ? () => {
+        childProps.onClick?.();
+        handlePress();
+      } : handlePress
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      ref: setRef,
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? panelId : void 0,
+      onPress: handlePress,
+      "data-testid": "panel-trigger",
+      children
+    }
+  );
+}
+PanelTrigger.displayName = "PanelTrigger";
+function BuiltInCloseButton() {
+  const { handleClose } = usePanelContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      "aria-label": "Close panel",
+      "data-testid": "panel-close",
+      onPress: handleClose,
+      className: panelCloseButtonVariants(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" })
+    }
+  );
+}
+function PanelContent({
+  children,
+  showClose = true,
+  className
+}) {
+  const { isOpen, isMobile, panelId, titleId, position, width, handleClose } = usePanelContext();
+  if (!isOpen) return null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.ModalOverlay,
+      {
+        isDismissable: true,
+        isOpen,
+        onOpenChange: (open) => !open && handleClose(),
+        className: "fixed inset-0 z-50 bg-black/50",
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Modal, { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.Dialog,
+          {
+            "aria-labelledby": titleId,
+            className: chunkVIREG536_js.cn(
+              "w-full max-w-lg rounded-lg bg-[var(--content-background)] shadow-lg outline-none",
+              "flex max-h-[90vh] flex-col",
+              className
+            ),
+            children: [
+              showClose && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsxRuntime.jsx(BuiltInCloseButton, {}) }),
+              children
+            ]
+          }
+        ) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      id: panelId,
+      "aria-labelledby": titleId,
+      "data-testid": "panel-content",
+      className: chunkVIREG536_js.cn(panelContentVariants({ position, width }), className),
+      children: [
+        children,
+        showClose && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsxRuntime.jsx(BuiltInCloseButton, {}) })
+      ]
+    }
+  );
+}
+PanelContent.displayName = "PanelContent";
+function PanelHeader({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: chunkVIREG536_js.cn(panelHeaderVariants(), className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children }) });
+}
+PanelHeader.displayName = "PanelHeader";
+function PanelTitle({
+  children,
+  as: Tag = "h2",
+  className
+}) {
+  const { titleId } = usePanelContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      id: titleId,
+      "aria-live": "polite",
+      className: chunkVIREG536_js.cn(
+        "text-lg font-semibold text-[var(--content-foreground)]",
+        className
+      ),
+      children
+    }
+  );
+}
+PanelTitle.displayName = "PanelTitle";
+function PanelDescription({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: chunkVIREG536_js.cn("text-sm text-[var(--menu-muted)]", className), children });
+}
+PanelDescription.displayName = "PanelDescription";
+function PanelBody({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkVIREG536_js.cn(panelBodyVariants(), className), children });
+}
+PanelBody.displayName = "PanelBody";
+function PanelFooter({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: chunkVIREG536_js.cn(panelFooterVariants(), className), children });
+}
+PanelFooter.displayName = "PanelFooter";
+function PanelClose({ children }) {
+  const { handleClose } = usePanelContext();
+  if (!react.isValidElement(children)) {
+    return null;
+  }
+  const childProps = children.props;
+  return react.cloneElement(children, {
+    onPress: () => {
+      childProps.onPress?.();
+      handleClose();
+    },
+    onClick: () => {
+      childProps.onClick?.();
+      handleClose();
+    }
+  });
+}
+PanelClose.displayName = "PanelClose";
+var Panel = Object.assign(PanelRoot, {
+  Trigger: PanelTrigger,
+  Content: PanelContent,
+  Header: PanelHeader,
+  Title: PanelTitle,
+  Description: PanelDescription,
+  Body: PanelBody,
+  Footer: PanelFooter,
+  Close: PanelClose
+});
+
+exports.Panel = Panel;
+exports.panelBodyVariants = panelBodyVariants;
+exports.panelCloseButtonVariants = panelCloseButtonVariants;
+exports.panelContentVariants = panelContentVariants;
+exports.panelFooterVariants = panelFooterVariants;
+exports.panelHeaderVariants = panelHeaderVariants;
+//# sourceMappingURL=chunk-3JHN4GAL.js.map
+//# sourceMappingURL=chunk-3JHN4GAL.js.map

package/dist/chunk-3JHN4GAL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Panel/Panel.tsx"],"names":["cva","createContext","useContext","useState","useEffect","useRef","useId","useCallback","isValidElement","cloneElement","jsx","AriaButton","X","AriaModalOverlay","AriaModal","jsxs","AriaDialog","cn"],"mappings":"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","file":"chunk-3JHN4GAL.js","sourcesContent":["\"use client\";\n\n/**\n * Panel Component - Accessible Non-Modal Sidebar\n * Disclosure pattern + Complementary region for WCAG 2.2 AAA\n *\n * @see plan.md for architecture details\n * @see panel-prd.md for requirements\n * @see ADR 0007 for accessibility decisions\n */\n\nimport {\n  type ReactElement,\n  type MutableRefObject,\n  createContext,\n  useContext,\n  useState,\n  useId,\n  useRef,\n  useCallback,\n  useEffect,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport {\n  Button as AriaButton,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Dialog as AriaDialog,\n} from \"react-aria-components\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport type {\n  PanelProps,\n  PanelTriggerProps,\n  PanelContentProps,\n  PanelHeaderProps,\n  PanelTitleProps,\n  PanelDescriptionProps,\n  PanelBodyProps,\n  PanelFooterProps,\n  PanelCloseProps,\n  PanelPosition,\n  PanelWidth,\n} from \"./Panel.types\";\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Panel content variants\n * Controls position-based styling and width\n */\nexport const panelContentVariants = cva(\n  [\n    \"flex flex-col h-full\",\n    \"bg-[var(--content-background)] text-[var(--content-foreground)]\",\n    \"shadow-lg\",\n  ],\n  {\n    variants: {\n      position: {\n        right: \"border-l border-[var(--border)]\",\n        left: \"border-r border-[var(--border)]\",\n      },\n      width: {\n        sm: \"w-[300px]\",\n        md: \"w-[400px]\",\n        lg: \"w-[500px]\",\n        xl: \"w-[600px]\",\n        auto: \"w-auto\",\n      },\n    },\n    defaultVariants: {\n      position: \"right\",\n      width: \"md\",\n    },\n  }\n);\n\n/**\n * Panel header variants\n */\nexport const panelHeaderVariants = cva([\n  \"flex items-start justify-between\",\n  \"px-4 py-4\",\n  \"border-b border-[var(--border)]\",\n]);\n\n/**\n * Panel body variants\n */\nexport const panelBodyVariants = cva([\"flex-1 overflow-y-auto\", \"px-4 py-4\"]);\n\n/**\n * Panel footer variants\n */\nexport const panelFooterVariants = cva([\n  \"flex items-center justify-end gap-2\",\n  \"px-4 py-4\",\n  \"border-t border-[var(--border)]\",\n]);\n\n/**\n * Close button variants\n */\nexport const panelCloseButtonVariants = cva([\n  \"inline-flex items-center justify-center rounded-md\",\n  \"min-h-[44px] min-w-[44px]\",\n  \"text-[var(--menu-muted)]\",\n  \"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]\",\n  \"focus-visible:outline-none focus-visible:ring-2\",\n  \"focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n  // No transition - instant state changes (v1)\n]);\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface PanelContextValue {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  panelId: string;\n  titleId: string;\n  triggerRef: MutableRefObject<HTMLElement | null>;\n  position: PanelPosition;\n  width: PanelWidth;\n  mobileBreakpoint: number;\n  isMobile: boolean;\n  handleClose: () => void;\n}\n\nconst PanelContext = createContext<PanelContextValue | null>(null);\n\nfunction usePanelContext(): PanelContextValue {\n  const context = useContext(PanelContext);\n  if (!context) {\n    throw new Error(\"Panel compound components must be used within a Panel\");\n  }\n  return context;\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\n/**\n * SSR-safe media query hook\n * Defaults to false on server (desktop mode)\n */\nfunction useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = useState(() => {\n    // Default to false on server (desktop mode)\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const media = window.matchMedia(query);\n    // Sync state after mount (handles SSR mismatch)\n    if (media.matches !== matches) {\n      setMatches(media.matches);\n    }\n    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);\n    media.addEventListener(\"change\", listener);\n    return () => media.removeEventListener(\"change\", listener);\n  }, [query, matches]);\n\n  return matches;\n}\n\n// ============================================================================\n// Panel Root\n// ============================================================================\n\nfunction PanelRoot({\n  children,\n  isOpen: controlledIsOpen,\n  defaultOpen = false,\n  onOpenChange,\n  onClose,\n  position = \"right\",\n  width = \"md\",\n  mobileBreakpoint = 768,\n}: PanelProps): ReactElement {\n  // State management (controlled/uncontrolled)\n  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;\n\n  // Refs\n  const triggerRef = useRef<HTMLElement | null>(null);\n\n  // IDs for ARIA\n  const uniqueId = useId();\n  const panelId = `panel-${uniqueId}`;\n  const titleId = `panel-title-${uniqueId}`;\n\n  // Responsive detection\n  const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);\n\n  // State setter\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (!isControlled) {\n        setUncontrolledIsOpen(open);\n      }\n      onOpenChange?.(open);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  // Close handler with focus restoration\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    onClose?.();\n    // Return focus to trigger if it still exists in DOM\n    if (triggerRef.current) {\n      window.requestAnimationFrame(() => {\n        triggerRef.current?.focus();\n      });\n    }\n  }, [setIsOpen, onClose]);\n\n  // Escape key handler (desktop only - mobile handled by React Aria)\n  useEffect(() => {\n    if (!isOpen || isMobile) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        handleClose();\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen, isMobile, handleClose]);\n\n  const contextValue: PanelContextValue = {\n    isOpen,\n    setIsOpen,\n    panelId,\n    titleId,\n    triggerRef,\n    position,\n    width,\n    mobileBreakpoint,\n    isMobile,\n    handleClose,\n  };\n\n  return (\n    <PanelContext.Provider value={contextValue}>\n      {children}\n    </PanelContext.Provider>\n  );\n}\nPanelRoot.displayName = \"Panel\";\n\n// ============================================================================\n// Panel.Trigger\n// ============================================================================\n\nfunction PanelTrigger({\n  children,\n  asChild = true,\n}: PanelTriggerProps): ReactElement | null {\n  const { isOpen, setIsOpen, panelId, triggerRef } = usePanelContext();\n\n  // Capture ref via callback ref pattern\n  const setRef = useCallback(\n    (element: HTMLElement | null) => {\n      triggerRef.current = element;\n    },\n    [triggerRef]\n  );\n\n  const handlePress = useCallback(() => {\n    setIsOpen(!isOpen);\n  }, [setIsOpen, isOpen]);\n\n  // If asChild, clone the child element and add props\n  if (asChild && isValidElement(children)) {\n    const childProps = children.props as unknown as {\n      onPress?: () => void;\n      onClick?: () => void;\n    };\n    return cloneElement(children, {\n      ref: setRef,\n      \"aria-expanded\": isOpen,\n      \"aria-controls\": isOpen ? panelId : undefined,\n      \"data-testid\": \"panel-trigger\",\n      onPress: handlePress,\n      onClick: childProps.onClick\n        ? () => {\n            childProps.onClick?.();\n            handlePress();\n          }\n        : handlePress,\n    } as unknown as Record<string, unknown>);\n  }\n\n  // Fallback: wrap in AriaButton\n  return (\n    <AriaButton\n      ref={setRef}\n      aria-expanded={isOpen}\n      aria-controls={isOpen ? panelId : undefined}\n      onPress={handlePress}\n      data-testid=\"panel-trigger\"\n    >\n      {children}\n    </AriaButton>\n  );\n}\nPanelTrigger.displayName = \"PanelTrigger\";\n\n// ============================================================================\n// Built-in Close Button\n// ============================================================================\n\nfunction BuiltInCloseButton(): ReactElement {\n  const { handleClose } = usePanelContext();\n\n  return (\n    <AriaButton\n      aria-label=\"Close panel\"\n      data-testid=\"panel-close\"\n      onPress={handleClose}\n      className={panelCloseButtonVariants()}\n    >\n      <X className=\"h-5 w-5\" />\n    </AriaButton>\n  );\n}\n\n// ============================================================================\n// Panel.Content\n// ============================================================================\n\nfunction PanelContent({\n  children,\n  showClose = true,\n  className,\n}: PanelContentProps): ReactElement | null {\n  const { isOpen, isMobile, panelId, titleId, position, width, handleClose } =\n    usePanelContext();\n\n  if (!isOpen) return null;\n\n  // Mobile: Use React Aria Modal primitives\n  if (isMobile) {\n    return (\n      <AriaModalOverlay\n        isDismissable\n        isOpen={isOpen}\n        onOpenChange={(open) => !open && handleClose()}\n        className=\"fixed inset-0 z-50 bg-black/50\"\n      >\n        <AriaModal className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n          <AriaDialog\n            aria-labelledby={titleId}\n            className={cn(\n              \"w-full max-w-lg rounded-lg bg-[var(--content-background)] shadow-lg outline-none\",\n              \"flex max-h-[90vh] flex-col\",\n              className\n            )}\n          >\n            {showClose && (\n              <div className=\"absolute right-2 top-2\">\n                <BuiltInCloseButton />\n              </div>\n            )}\n            {children}\n          </AriaDialog>\n        </AriaModal>\n      </AriaModalOverlay>\n    );\n  }\n\n  // Desktop: Render aside in-place\n  return (\n    <aside\n      id={panelId}\n      aria-labelledby={titleId}\n      data-testid=\"panel-content\"\n      className={cn(panelContentVariants({ position, width }), className)}\n    >\n      {children}\n      {showClose && (\n        <div className=\"absolute right-2 top-2\">\n          <BuiltInCloseButton />\n        </div>\n      )}\n    </aside>\n  );\n}\nPanelContent.displayName = \"PanelContent\";\n\n// ============================================================================\n// Panel.Header\n// ============================================================================\n\nfunction PanelHeader({\n  children,\n  className,\n}: PanelHeaderProps): ReactElement | null {\n  // Note: We use a <header> element but DON'T add role=\"banner\"\n  // because banner landmarks should not be contained in other landmarks (like aside)\n  // The header element still provides structural meaning for the panel\n  return (\n    <header className={cn(panelHeaderVariants(), className)}>\n      <div className=\"flex flex-col gap-1\">{children}</div>\n    </header>\n  );\n}\nPanelHeader.displayName = \"PanelHeader\";\n\n// ============================================================================\n// Panel.Title\n// ============================================================================\n\nfunction PanelTitle({\n  children,\n  as: Tag = \"h2\",\n  className,\n}: PanelTitleProps): ReactElement | null {\n  const { titleId } = usePanelContext();\n\n  return (\n    <Tag\n      id={titleId}\n      // aria-live=\"polite\" announces title changes to screen readers\n      // This is important for master-detail patterns where panel content\n      // updates when selecting different items (e.g., candidate profiles)\n      aria-live=\"polite\"\n      className={cn(\n        \"text-lg font-semibold text-[var(--content-foreground)]\",\n        className\n      )}\n    >\n      {children}\n    </Tag>\n  );\n}\nPanelTitle.displayName = \"PanelTitle\";\n\n// ============================================================================\n// Panel.Description\n// ============================================================================\n\nfunction PanelDescription({\n  children,\n  className,\n}: PanelDescriptionProps): ReactElement | null {\n  return (\n    <p className={cn(\"text-sm text-[var(--menu-muted)]\", className)}>\n      {children}\n    </p>\n  );\n}\nPanelDescription.displayName = \"PanelDescription\";\n\n// ============================================================================\n// Panel.Body\n// ============================================================================\n\nfunction PanelBody({ children, className }: PanelBodyProps): ReactElement | null {\n  return <div className={cn(panelBodyVariants(), className)}>{children}</div>;\n}\nPanelBody.displayName = \"PanelBody\";\n\n// ============================================================================\n// Panel.Footer\n// ============================================================================\n\nfunction PanelFooter({\n  children,\n  className,\n}: PanelFooterProps): ReactElement | null {\n  // Note: We use a <footer> element but DON'T add role=\"contentinfo\"\n  // because contentinfo landmarks should not be contained in other landmarks (like aside)\n  // The footer element still provides structural meaning for the panel\n  return (\n    <footer className={cn(panelFooterVariants(), className)}>\n      {children}\n    </footer>\n  );\n}\nPanelFooter.displayName = \"PanelFooter\";\n\n// ============================================================================\n// Panel.Close\n// ============================================================================\n\nfunction PanelClose({ children }: PanelCloseProps): ReactElement | null {\n  const { handleClose } = usePanelContext();\n\n  if (!isValidElement(children)) {\n    return null;\n  }\n\n  // Clone the child and add onPress/onClick handler\n  const childProps = children.props as unknown as {\n    onPress?: () => void;\n    onClick?: () => void;\n  };\n\n  return cloneElement(children, {\n    onPress: () => {\n      childProps.onPress?.();\n      handleClose();\n    },\n    onClick: () => {\n      childProps.onClick?.();\n      handleClose();\n    },\n  } as unknown as Record<string, unknown>);\n}\nPanelClose.displayName = \"PanelClose\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Panel Component\n *\n * Accessible non-modal sidebar panel using the disclosure pattern with\n * a complementary region for WCAG 2.2 AAA compliance.\n *\n * @example\n * ```tsx\n * <Panel>\n *   <Panel.Trigger>\n *     <Button>Open Panel</Button>\n *   </Panel.Trigger>\n *   <Panel.Content>\n *     <Panel.Header>\n *       <Panel.Title>Panel Title</Panel.Title>\n *       <Panel.Description>Optional description</Panel.Description>\n *     </Panel.Header>\n *     <Panel.Body>\n *       Panel content here\n *     </Panel.Body>\n *     <Panel.Footer>\n *       <Button>Action</Button>\n *     </Panel.Footer>\n *   </Panel.Content>\n * </Panel>\n * ```\n */\nexport const Panel = Object.assign(PanelRoot, {\n  Trigger: PanelTrigger,\n  Content: PanelContent,\n  Header: PanelHeader,\n  Title: PanelTitle,\n  Description: PanelDescription,\n  Body: PanelBody,\n  Footer: PanelFooter,\n  Close: PanelClose,\n});\n\n// Named exports for individual components\nexport {\n  PanelRoot,\n  PanelTrigger,\n  PanelContent,\n  PanelHeader,\n  PanelTitle,\n  PanelDescription,\n  PanelBody,\n  PanelFooter,\n  PanelClose,\n};\n\n// Export CVA variant types for customization\nexport type PanelContentVariants = VariantProps<typeof panelContentVariants>;\n"]}

package/dist/chunk-3MJPASQU.js

@@ -0,0 +1,232 @@
+'use strict';
+
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ModalContext = react.createContext(void 0);
+function ModalRoot({ children, defaultOpen, isOpen, onOpenChange, role = "dialog" }) {
+  const childArray = react.Children.toArray(children);
+  const triggerChild = childArray.find(
+    (child) => react.isValidElement(child) && (child.type === ModalTrigger || child.type.displayName === "ModalTrigger")
+  );
+  const contentChild = childArray.find(
+    (child) => react.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 = react.isValidElement(triggerElement) ? triggerElement.props.children : null;
+  const unwrappedContent = contentChild;
+  return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { role }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.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 = react.useContext(ModalContext);
+  const role = context?.role ?? "dialog";
+  const overlayClasses = modalOverlayVariants({ animation });
+  const modalClasses = modalContentVariants({ size, animation });
+  const mergedModalClasses = className ? `${modalClasses} ${className}` : modalClasses;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ModalOverlay,
+    {
+      isDismissable,
+      isKeyboardDismissDisabled,
+      className: overlayClasses,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Modal,
+        {
+          className: mergedModalClasses,
+          style: {
+            transitionDuration: `${animationDuration}ms`
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { role, className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            showClose && /* @__PURE__ */ jsxRuntime.jsxs(
+              reactAriaComponents.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactAriaComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+ModalFooter.displayName = "ModalFooter";
+function ModalClose({ children }) {
+  const state = react.useContext(reactAriaComponents.OverlayTriggerStateContext);
+  if (!state) {
+    throw new Error("Modal.Close must be used inside Modal.Content");
+  }
+  if (!react.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 react.cloneElement(childElement, { onPress: mergedOnPress });
+}
+ModalClose.displayName = "ModalClose";
+var modalContentVariants = classVarianceAuthority.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 = classVarianceAuthority.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
+});
+
+exports.Modal = Modal;
+exports.ModalClose = ModalClose;
+exports.ModalContent = ModalContent;
+exports.ModalDescription = ModalDescription;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalOverlay = ModalOverlay;
+exports.ModalTitle = ModalTitle;
+exports.ModalTrigger = ModalTrigger;
+exports.modalContentVariants = modalContentVariants;
+exports.modalOverlayVariants = modalOverlayVariants;
+//# sourceMappingURL=chunk-3MJPASQU.js.map
+//# sourceMappingURL=chunk-3MJPASQU.js.map

package/dist/chunk-3MJPASQU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Modal/Modal.tsx"],"names":["createContext","Children","isValidElement","jsxs","AriaDialogTrigger","useContext","jsx","AriaModalOverlay","AriaModal","AriaDialog","Fragment","AriaButton","X","Heading","OverlayTriggerStateContext","cloneElement","cva"],"mappings":"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","file":"chunk-3MJPASQU.js","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"]}