@tribepad/themis 1.0.1 → 1.0.3

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/Modal/Modal.styles.ts","../../../src/elements/Modal/Modal.tsx"],"names":["cn","inputs","twMerge","clsx","modalContentVariants","cva","modalOverlayVariants","ModalContext","createContext","ModalRoot","children","defaultOpen","isOpen","onOpenChange","role","childArray","Children","hasTrigger","child","isValidElement","ModalTrigger","hasContent","ModalContent","triggerChild","contentChild","triggerElement","unwrappedTrigger","unwrappedContent","jsx","jsxs","AriaDialogTrigger","size","animation","animationDuration","isDismissable","isKeyboardDismissDisabled","showClose","className","useContext","overlayClasses","modalClasses","mergedModalClasses","AriaModalOverlay","AriaModal","AriaDialog","close","Fragment","AriaButton","X","ModalOverlay","_props","ModalHeader","ModalTitle","as","Heading","ModalDescription","ModalFooter","ModalClose","state","OverlayTriggerStateContext","childElement","handlePress","existingOnPress","cloneElement","Modal"],"mappings":"sYAcO,SAASA,KAAMC,CAAAA,CAA8B,CAClD,OAAOC,OAAAA,CAAQC,KAAKF,CAAM,CAAC,CAC7B,CCNO,IAAMG,EAAuBC,GAAAA,CAClC,CAEE,UAAA,CACA,gCAAA,CACA,mCACA,YAAA,CACA,WAAA,CACA,KAAA,CACA,QAAA,CACA,eAEA,MAAA,CACA,SACF,CAAA,CACA,CACE,SAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,WACJ,EAAA,CAAI,UAAA,CACJ,EAAA,CAAI,UAAA,CACJ,GAAI,WAAA,CACJ,IAAA,CAAM,sCACR,CAAA,CACA,UAAW,CACT,WAAA,CAAa,gBAAA,CACb,IAAA,CAAM,iBACN,KAAA,CAAO,iBAAA,CACP,IAAA,CAAM,EACR,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,KACN,SAAA,CAAW,WACb,CACF,CACF,EAQaC,CAAAA,CAAuBD,GAAAA,CAClC,CAEE,OAAA,CACA,UACA,MAAA,CACA,MAAA,CACA,cAAA,CACA,gBAAA,CACA,cACA,kBACF,CAAA,CACA,CACE,QAAA,CAAU,CACR,SAAA,CAAW,CACT,WAAA,CAAa,gBAAA,CACb,KAAM,gBAAA,CACN,KAAA,CAAO,gBAAA,CACP,IAAA,CAAM,EACR,CACF,CAAA,CACA,eAAA,CAAiB,CACf,UAAW,WACb,CACF,CACF,ECzBA,IAAME,CAAAA,CAAeC,cAA6C,MAAS,CAAA,CAc3E,SAASC,CAAAA,CAAU,CAAE,QAAA,CAAAC,CAAAA,CAAU,WAAA,CAAAC,CAAAA,CAAa,OAAAC,CAAAA,CAAQ,YAAA,CAAAC,CAAAA,CAAc,IAAA,CAAAC,EAAO,QAAS,CAAA,CAA6B,CAC7G,IAAMC,EAAaC,QAAAA,CAAS,OAAA,CAAQN,CAAQ,CAAA,CAG5C,GAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,GAAa,YAAA,CAAc,CACzC,IAAMO,CAAAA,CAAaF,CAAAA,CAAW,IAAA,CAC3BG,GACCC,cAAAA,CAAeD,CAAK,CAAA,GACnBA,CAAAA,CAAM,OAASE,CAAAA,EACbF,CAAAA,CAAM,IAAA,CAAkC,WAAA,GAAgB,eAC/D,CAAA,CAEMG,CAAAA,CAAaN,CAAAA,CAAW,IAAA,CAC3BG,GACCC,cAAAA,CAAeD,CAAK,CAAA,GACnBA,CAAAA,CAAM,OAASI,CAAAA,EACbJ,CAAAA,CAAM,IAAA,CAAkC,WAAA,GAAgB,eAC/D,CAAA,CAEA,GAAI,CAACD,CAAAA,EAAc,CAACI,CAAAA,CAClB,MAAM,IAAI,KAAA,CACR,4EACF,CAEJ,CAGA,IAAME,CAAAA,CAAeR,EAAW,IAAA,CAC7BG,CAAAA,EACCC,cAAAA,CAAeD,CAAK,IACnBA,CAAAA,CAAM,IAAA,GAASE,CAAAA,EACbF,CAAAA,CAAM,KAAkC,WAAA,GAAgB,cAAA,CAC/D,CAAA,CAEMM,CAAAA,CAAeT,EAAW,IAAA,CAC7BG,CAAAA,EACCC,cAAAA,CAAeD,CAAK,IACnBA,CAAAA,CAAM,IAAA,GAASI,CAAAA,EACbJ,CAAAA,CAAM,KAAkC,WAAA,GAAgB,cAAA,CAC/D,CAAA,CAIMO,CAAAA,CAAiBF,EACjBG,CAAAA,CAAmBP,cAAAA,CAAeM,CAAc,CAAA,CAChDA,EAAe,KAAA,CAA8C,QAAA,CAC/D,IAAA,CACEE,CAAAA,CAAmBH,EAEzB,OACEI,GAAAA,CAACrB,CAAAA,CAAa,QAAA,CAAb,CAAsB,KAAA,CAAO,CAAE,IAAA,CAAAO,CAAK,EACnC,QAAA,CAAAe,IAAAA,CAACC,aAAAA,CAAA,CACC,YAAanB,CAAAA,CACb,MAAA,CAAQC,CAAAA,CACR,YAAA,CAAcC,EAEb,QAAA,CAAA,CAAAa,CAAAA,CACAC,CAAAA,CAAAA,CACH,CAAA,CACF,CAEJ,CAEAlB,CAAAA,CAAU,WAAA,CAAc,OAAA,CAgBxB,SAASW,CAAAA,CAAa,CAAE,QAAA,CAAAV,CAAS,EAAoC,CAGnE,OAAOA,CACT,CAEAU,EAAa,WAAA,CAAc,cAAA,CAa3B,SAASE,CAAAA,CAAa,CACpB,QAAA,CAAAZ,CAAAA,CACA,KAAAqB,CAAAA,CAAO,IAAA,CACP,UAAAC,CAAAA,CAAY,WAAA,CACZ,iBAAA,CAAAC,CAAAA,CAAoB,IACpB,aAAA,CAAAC,CAAAA,CAAgB,IAAA,CAChB,yBAAA,CAAAC,EAA4B,KAAA,CAC5B,SAAA,CAAAC,CAAAA,CAAY,IAAA,CACZ,UAAAC,CACF,CAAA,CAAoC,CAGlC,IAAMvB,EADUwB,UAAAA,CAAW/B,CAAY,CAAA,EACjB,IAAA,EAAQ,SAGxBgC,CAAAA,CAAiBjC,CAAAA,CAAqB,CAAE,SAAA,CAAA0B,CAAU,CAAC,CAAA,CAGnDQ,CAAAA,CAAepC,CAAAA,CAAqB,CAAE,IAAA,CAAA2B,CAAAA,CAAM,SAAA,CAAAC,CAAU,CAAC,CAAA,CACvDS,CAAAA,CAAqBzC,CAAAA,CAAGwC,CAAAA,CAAcH,CAAS,CAAA,CAErD,OACET,GAAAA,CAACc,YAAAA,CAAA,CACC,aAAA,CAAeR,CAAAA,CACf,yBAAA,CAA2BC,CAAAA,CAC3B,UAAWI,CAAAA,CAEX,QAAA,CAAAX,GAAAA,CAACe,KAAAA,CAAA,CACC,SAAA,CAAWF,CAAAA,CACX,KAAA,CAAO,CACL,mBAAoB,CAAA,EAAGR,CAAiB,CAAA,EAAA,CAC1C,CAAA,CAEA,SAAAL,GAAAA,CAACgB,MAAAA,CAAA,CAAW,IAAA,CAAM9B,EAAM,SAAA,CAAU,cAAA,CAC/B,QAAA,CAAA,CAAC,CAAE,MAAA+B,CAAM,CAAA,GACRhB,IAAAA,CAAAiB,QAAAA,CAAA,CACG,QAAA,CAAA,CAAAV,CAAAA,EACCR,GAAAA,CAACmB,MAAAA,CAAA,CACC,OAAA,CAASF,CAAAA,CACT,SAAA,CAAU,+PAAA,CACV,aAAW,aAAA,CAEX,QAAA,CAAAjB,GAAAA,CAACoB,GAAAA,CAAA,CAAE,SAAA,CAAU,SAAA,CAAU,aAAA,CAAY,MAAA,CAAO,EAC5C,CAAA,CAEDtC,CAAAA,CAAAA,CACH,CAAA,CAEJ,CAAA,CACF,EACF,CAEJ,CAEAY,CAAAA,CAAa,WAAA,CAAc,eAM3B,SAAS2B,CAAAA,CAAaC,CAAAA,CAAiC,CACrD,OAAO,IACT,CAEAD,CAAAA,CAAa,WAAA,CAAc,eAU3B,SAASE,CAAAA,CAAY,CAAE,QAAA,CAAAzC,EAAU,SAAA,CAAA2B,CAAU,CAAA,CAAmC,CAC5E,OAAOT,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAW5B,CAAAA,CAAG,qDAAsDqC,CAAS,CAAA,CAAI,QAAA,CAAA3B,CAAAA,CAAS,CACxG,CAEAyC,CAAAA,CAAY,WAAA,CAAc,aAAA,CAW1B,SAASC,CAAAA,CAAW,CAAE,QAAA,CAAA1C,CAAAA,CAAU,GAAA2C,CAAAA,CAAK,IAAA,CAAM,UAAAhB,CAAU,CAAA,CAAkC,CACrF,OACET,GAAAA,CAAC0B,OAAAA,CAAA,CAAQ,KAAK,OAAA,CAAQ,KAAA,CAAO,QAAA,CAASD,CAAAA,CAAG,CAAC,CAAA,EAAK,GAAG,CAAA,CAAG,SAAA,CAAWrD,EAAG,mDAAA,CAAqDqC,CAAS,CAAA,CAC9H,QAAA,CAAA3B,EACH,CAEJ,CAEA0C,CAAAA,CAAW,WAAA,CAAc,aAWzB,SAASG,CAAAA,CAAiB,CAAE,QAAA,CAAA7C,EAAU,SAAA,CAAA2B,CAAU,CAAA,CAAwC,CACtF,OACET,GAAAA,CAAC,GAAA,CAAA,CAAE,IAAA,CAAK,aAAA,CAAc,UAAW5B,CAAAA,CAAG,kCAAA,CAAoCqC,CAAS,CAAA,CAC9E,SAAA3B,CAAAA,CACH,CAEJ,CAEA6C,CAAAA,CAAiB,YAAc,kBAAA,CAY/B,SAASC,CAAAA,CAAY,CAAE,SAAA9C,CAAAA,CAAU,SAAA,CAAA2B,CAAU,CAAA,CAAmC,CAC5E,OAAOT,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAW5B,EAAG,wDAAA,CAA0DqC,CAAS,CAAA,CAAI,QAAA,CAAA3B,EAAS,CAC5G,CAEA8C,CAAAA,CAAY,WAAA,CAAc,cAU1B,SAASC,CAAAA,CAAW,CAAE,QAAA,CAAA/C,CAAS,CAAA,CAAkC,CAE/D,IAAMgD,CAAAA,CAAQpB,WAAWqB,0BAA0B,CAAA,CAEnD,GAAI,CAACD,EACH,MAAM,IAAI,KAAA,CAAM,+CAA+C,EAIjE,GAAI,CAACvC,cAAAA,CAAeT,CAAQ,EAC1B,MAAM,IAAI,KAAA,CAAM,uDAAuD,EAIzE,IAAMkD,CAAAA,CAAelD,CAAAA,CAEfmD,CAAAA,CAAc,IAAY,CAC9BH,CAAAA,CAAM,KAAA,GACR,EAGMI,CAAAA,CAAmBF,CAAAA,CAAa,KAAA,EAA+C,OAAA,CASrF,OAAOG,YAAAA,CAAaH,CAAAA,CAAc,CAAE,OAAA,CARdE,EAClB,IAAY,CACVA,CAAAA,EAAgB,CAChBD,IACF,CAAA,CACAA,CAGuD,CAAkD,CAC/G,CAEAJ,CAAAA,CAAW,WAAA,CAAc,YAAA,KAqBZO,CAAAA,CAAQ,MAAA,CAAO,MAAA,CAAOvD,CAAAA,CAAW,CAC5C,OAAA,CAASW,CAAAA,CACT,OAAA,CAASE,CAAAA,CACT,QAAS2B,CAAAA,CACT,MAAA,CAAQE,CAAAA,CACR,KAAA,CAAOC,EACP,WAAA,CAAaG,CAAAA,CACb,OAAQC,CAAAA,CACR,KAAA,CAAOC,CACT,CAAC","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\n\n/**\n * CVA Variants for Modal.Content\n *\n * Size and animation variant definitions for the modal content container.\n * Uses CSS custom properties for all colours to support theming.\n *\n * @see Modal.types.ts (ModalSize, ModalAnimation)\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 *\n * Animation variant definitions for the modal backdrop overlay.\n * Uses CSS custom properties for all colours to support theming.\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 * Type exports for variant props\n * Allows TypeScript inference of variant combinations\n */\nexport type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;\nexport type ModalOverlayVariantProps = VariantProps<typeof modalOverlayVariants>;\n","'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 { X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { modalContentVariants, modalOverlayVariants } from './Modal.styles';\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  const childArray = Children.toArray(children);\n\n  // Validate children structure in development only\n  if (process.env.NODE_ENV !== 'production') {\n    const hasTrigger = childArray.some(\n      (child) =>\n        isValidElement(child) &&\n        (child.type === ModalTrigger ||\n          (child.type as { displayName?: string }).displayName === 'ModalTrigger')\n    );\n\n    const hasContent = childArray.some(\n      (child) =>\n        isValidElement(child) &&\n        (child.type === ModalContent ||\n          (child.type as { displayName?: string }).displayName === 'ModalContent')\n    );\n\n    if (!hasTrigger || !hasContent) {\n      throw new Error(\n        'Modal requires exactly one Modal.Trigger and one Modal.Content as children'\n      );\n    }\n  }\n\n  // Find trigger and content children\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  // Extract the actual children from Modal.Trigger and Modal.Content\n  // React Aria's DialogTrigger expects direct Button and Modal children\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;\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 = cn(modalClasses, className);\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\" aria-hidden=\"true\" />\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  return <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}>{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  return (\n    <Heading slot=\"title\" level={parseInt(as[1] ?? '2')} className={cn('text-lg font-semibold leading-none tracking-tight', className)}>\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  return (\n    <p slot=\"description\" className={cn('text-sm text-[var(--menu-muted)]', className)}>\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  return <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}>{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 * Re-export CVA variants from Modal.styles.ts for backwards compatibility.\n * Consumers importing { modalContentVariants, modalOverlayVariants } from './Modal'\n * will continue to work.\n */\nexport { modalContentVariants, modalOverlayVariants } from './Modal.styles';\n\n/**\n * Compound Component Export\n *\n * Follows Themis library pattern using Object.assign() for compound components.\n * Enables usage like Modal.Trigger, Modal.Content, etc.\n *\n * @deprecated The Object.assign compound pattern will be removed in v2.\n * Use the direct named exports (ModalTrigger, ModalContent, etc.) instead.\n * This pattern is kept for backwards compatibility only.\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"]}

package/dist/elements/NumberField/NumberField.variants.d.ts

@@ -7,7 +7,7 @@
  * Styling uses semantic CSS tokens that map to ThemeProvider variables:
  * - --background: Input background color
  * - --foreground: Text color
- * - --input: Input border color (default state)
+ * - --input-border: Input border color (default state)
  * - --ring: Focus ring color
  * - --accent: Stepper button hover background
  * - --accent-foreground: Stepper button hover text