{"version":3,"file":"callout.cjs","sources":["../../../components/callout/callout.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type ComponentProps,\n  type CSSProperties,\n  type ReactNode,\n  useEffect,\n  useState\n} from 'react';\nimport { InfoIcon, XIcon } from '~/icons';\n\nimport { IconButton } from '../icon-button';\nimport styles from './callout.module.css';\n\n/** Exit duration. Keep in sync with --rs-duration-normal (styles/effects.css:38). */\nconst EXIT_MS = 200;\n\nconst callout = cva(styles.callout, {\n  variants: {\n    type: {\n      grey: styles['callout-grey'],\n      success: styles['callout-success'],\n      alert: styles['callout-alert'],\n      gradient: styles['callout-gradient'],\n      accent: styles['callout-accent'],\n      attention: styles['callout-attention'],\n      normal: styles['callout-normal']\n    },\n    variant: {\n      solid: '',\n      outline: styles['callout-outline']\n    },\n    highContrast: {\n      true: styles['callout-high-contrast']\n    }\n  },\n  defaultVariants: {\n    variant: 'solid'\n  }\n});\n\nexport interface CalloutProps\n  extends ComponentProps<'div'>,\n    VariantProps<typeof callout> {\n  children: ReactNode;\n  action?: ReactNode;\n  /** Show a dismiss (close) button. */\n  dismissible?: boolean;\n  /**\n   * Called when the dismiss button is clicked. When provided, the consumer owns\n   * removal (the callout stays mounted). When omitted, the callout hides itself.\n   */\n  onDismiss?: () => void;\n  style?: CSSProperties;\n  icon?: ReactNode;\n}\n\nexport function Callout({\n  className,\n  type = 'grey',\n  variant,\n  highContrast,\n  children,\n  action,\n  dismissible,\n  onDismiss,\n  icon = <InfoIcon />,\n  ...props\n}: CalloutProps) {\n  // Dismissal is controlled when `onDismiss` is given; otherwise fall back to\n  // uncontrolled: play the exit transition, then unmount.\n  const [state, setState] = useState<'open' | 'closing' | 'closed'>('open');\n\n  useEffect(() => {\n    if (state !== 'closing') return;\n    const timer = setTimeout(() => setState('closed'), EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [state]);\n\n  const handleDismiss = () => {\n    onDismiss?.();\n    if (!onDismiss) setState('closing');\n  };\n  if (state === 'closed') return null;\n\n  const role = type === 'alert' ? 'alert' : 'status';\n\n  return (\n    <div\n      className={styles.transitionShell}\n      data-state={state}\n      data-slot='callout-transition'\n    >\n      <div\n        className={styles.transitionBody}\n        data-slot='callout-transition-body'\n      >\n        <div\n          className={callout({ type, variant, highContrast, className })}\n          role={role}\n          aria-live={type === 'alert' ? 'assertive' : 'polite'}\n          data-slot='callout'\n          {...props}\n        >\n          <div className={styles.container} data-slot='callout-container'>\n            <div\n              className={styles.messageContainer}\n              data-slot='callout-message-container'\n            >\n              {icon && (\n                <div\n                  className={styles.icon}\n                  aria-hidden='true'\n                  data-slot='callout-icon'\n                >\n                  {icon}\n                </div>\n              )}\n              <div className={styles.message} data-slot='callout-message'>\n                {children}\n              </div>\n            </div>\n\n            <div\n              className={styles.actionsContainer}\n              data-slot='callout-actions'\n            >\n              {action && (\n                <div className={styles.action} data-slot='callout-action'>\n                  {action}\n                </div>\n              )}\n              {dismissible && (\n                <IconButton\n                  size={1}\n                  className={styles.dismiss}\n                  onClick={handleDismiss}\n                  aria-label='Dismiss message'\n                  data-slot='callout-dismiss'\n                >\n                  <XIcon />\n                </IconButton>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nCallout.displayName = 'Callout';\n"],"names":[],"mappings":";;;;;;;;;;;AAeA;AACA;AAEA;AACE;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAkBe;;;;;;;AAkBZ;AACA;AACF;;;AAIE;;AACF;;AACwB;AAExB;AAEA;AA8DF;AAEA;;"}