{"version":3,"file":"index.tsx.cjs","sources":["../../../src/lib/kapwa/banner/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '@kapwa/utils';\nimport { Button } from '@kapwa/button';\n\nexport type BannerType = 'info' | 'warning' | 'error' | 'success' | 'default';\n\nexport interface BannerProps {\n  title?: string;\n  description: string;\n  type?: BannerType;\n  icon?: boolean;\n  cta?:\n    | {\n        label: string;\n        onClick: () => void;\n        href?: string;\n        variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';\n        size?: 'sm' | 'md' | 'lg';\n      }\n    | Array<{\n        label: string;\n        onClick: () => void;\n        href?: string;\n        variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';\n        size?: 'sm' | 'md' | 'lg';\n      }>;\n  className?: string;\n  onDismiss?: () => void;\n  titleSize?: 'sm' | 'md' | 'lg';\n}\n\nconst Banner: React.FC<BannerProps> = ({\n  title,\n  description,\n  type = 'default',\n  icon = false,\n  cta,\n  className,\n  onDismiss,\n  titleSize = 'lg',\n}) => {\n  const typeStyles = {\n    success: {\n      container:\n        'border border-[var(--color-kapwa-border-success)] bg-[var(--color-kapwa-bg-success-weak)]',\n      icon: 'text-[var(--color-kapwa-text-success)]',\n      title: 'text-[var(--color-kapwa-text-success)]',\n      description: 'text-[var(--color-kapwa-text-success)]',\n      iconSvg: (\n        <svg\n          className='h-6 w-6'\n          fill='none'\n          stroke='currentColor'\n          viewBox='0 0 24 24'\n        >\n          <path\n            strokeLinecap='round'\n            strokeLinejoin='round'\n            strokeWidth={2}\n            d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'\n          />\n        </svg>\n      ),\n    },\n    error: {\n      container:\n        'border border-[var(--color-kapwa-border-danger)] bg-[var(--color-kapwa-bg-danger-weak)]',\n      icon: 'text-[var(--color-kapwa-text-danger)]',\n      title: 'text-[var(--color-kapwa-text-danger)]',\n      description: 'text-[var(--color-kapwa-text-danger)]',\n      iconSvg: (\n        <svg\n          className='h-6 w-6'\n          fill='none'\n          stroke='currentColor'\n          viewBox='0 0 24 24'\n        >\n          <path\n            strokeLinecap='round'\n            strokeLinejoin='round'\n            strokeWidth={2}\n            d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'\n          />\n        </svg>\n      ),\n    },\n    warning: {\n      container:\n        'border border-[var(--color-kapwa-border-warning)] bg-[var(--color-kapwa-bg-warning-weak)]',\n      icon: 'text-[var(--color-kapwa-text-warning)]',\n      title: 'text-[var(--color-kapwa-text-warning)]',\n      description: 'text-[var(--color-kapwa-text-warning)]',\n      iconSvg: (\n        <svg\n          className='h-6 w-6'\n          fill='none'\n          stroke='currentColor'\n          viewBox='0 0 24 24'\n        >\n          <path\n            strokeLinecap='round'\n            strokeLinejoin='round'\n            strokeWidth={2}\n            d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'\n          />\n        </svg>\n      ),\n    },\n    info: {\n      container:\n        'border border-[var(--color-kapwa-border-info)] bg-[var(--color-kapwa-bg-info-weak)]',\n      icon: 'text-[var(--color-kapwa-text-info)]',\n      title: 'text-[var(--color-kapwa-text-info)]',\n      description: 'text-[var(--color-kapwa-text-info)]',\n      iconSvg: (\n        <svg\n          className='h-6 w-6'\n          fill='none'\n          stroke='currentColor'\n          viewBox='0 0 24 24'\n        >\n          <path\n            strokeLinecap='round'\n            strokeLinejoin='round'\n            strokeWidth={2}\n            d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'\n          />\n        </svg>\n      ),\n    },\n    default: {\n      container:\n        'border border-[var(--color-kapwa-border-weak)] bg-[var(--color-kapwa-bg-surface-raised)]',\n      icon: 'text-[var(--color-kapwa-text-support)]',\n      title: 'text-[var(--color-kapwa-text-strong)]',\n      description: 'text-[var(--color-kapwa-text-support)]',\n      iconSvg: (\n        <svg\n          className='h-6 w-6'\n          fill='none'\n          stroke='currentColor'\n          viewBox='0 0 24 24'\n        >\n          <path\n            strokeLinecap='round'\n            strokeLinejoin='round'\n            strokeWidth={2}\n            d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'\n          />\n        </svg>\n      ),\n    },\n  };\n\n  const titleSizes = {\n    sm: 'text-base',\n    md: 'text-lg',\n    lg: 'text-xl',\n  };\n\n  const getLinkStyling = (variant: string = 'primary', size: string = 'md') => {\n    const variants = {\n      primary:\n        'bg-[var(--color-kapwa-bg-brand-default)] text-[var(--color-kapwa-text-inverse)] hover:bg-[var(--color-kapwa-bg-brand-hover)] active:bg-[var(--color-kapwa-bg-brand-active)] focus-visible:ring-[var(--color-kapwa-border-focus)]',\n      secondary:\n        'bg-[var(--color-kapwa-bg-gray-default)] text-[var(--color-kapwa-text-strong)] hover:bg-[var(--color-kapwa-bg-gray-hover)] active:bg-[var(--color-kapwa-bg-gray-active)] focus-visible:ring-[var(--color-kapwa-border-focus)]',\n      outline:\n        'border border-[var(--color-kapwa-border-strong)] bg-transparent text-[var(--color-kapwa-text-support)] hover:bg-[var(--color-kapwa-bg-gray-default)] active:bg-[var(--color-kapwa-bg-gray-hover)] focus-visible:ring-[var(--color-kapwa-border-focus)]',\n      ghost:\n        'bg-transparent text-[var(--color-kapwa-text-support)] hover:bg-[var(--color-kapwa-bg-gray-default)] active:bg-[var(--color-kapwa-bg-gray-hover)] focus-visible:ring-[var(--color-kapwa-border-focus)]',\n      link: 'h-auto bg-transparent p-0 text-[var(--color-kapwa-text-link)] hover:text-[var(--color-kapwa-text-link-hover)] hover:underline focus-visible:ring-0 shadow-none',\n    };\n\n    const sizes = {\n      sm: 'h-8 px-3 py-1.5 text-sm',\n      md: 'h-10 px-4 py-2 text-base',\n      lg: 'h-12 px-6 py-3 text-lg',\n    };\n\n    return cn(\n      'inline-flex items-center justify-center rounded-md font-medium transition-colors',\n      'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',\n      variants[variant as keyof typeof variants],\n      sizes[size as keyof typeof sizes],\n      variant !== 'link' && 'shadow-xs'\n    );\n  };\n\n  const currentStyles = typeStyles[type];\n\n  // Helper function to render a single CTA button\n  const renderCTAButton = (\n    ctaItem: {\n      label: string;\n      onClick: () => void;\n      href?: string;\n      variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';\n      size?: 'sm' | 'md' | 'lg';\n    },\n    index: number\n  ) => {\n    if (ctaItem.href) {\n      return (\n        <a\n          key={index}\n          href={ctaItem.href}\n          className={getLinkStyling(ctaItem.variant, ctaItem.size)}\n        >\n          {ctaItem.label}\n        </a>\n      );\n    }\n\n    return (\n      <Button\n        key={index}\n        onClick={ctaItem.onClick}\n        variant={ctaItem.variant || 'primary'}\n        size={ctaItem.size || 'md'}\n      >\n        {ctaItem.label}\n      </Button>\n    );\n  };\n\n  // CTA button (for banner with button layout)\n  if (cta) {\n    const ctaArray = Array.isArray(cta) ? cta : [cta];\n\n    return (\n      <div\n        className={cn(\n          'relative rounded-lg p-4',\n          currentStyles.container,\n          className\n        )}\n      >\n        <div className='md:flex items-center'>\n          <div\n            className={cn(\n              'mb-6 md:mb-0 md:w-2/3 md:pr-8',\n              onDismiss ? 'pr-10 md:pr-8' : ''\n            )}\n          >\n            {title && (\n              <h3\n                className={cn(\n                  'font-semibold mb-2',\n                  currentStyles.title,\n                  titleSizes[titleSize]\n                )}\n              >\n                {title}\n              </h3>\n            )}\n            <p className={currentStyles.description}>{description}</p>\n          </div>\n          <div className='md:w-1/3 flex justify-center md:justify-end'>\n            <div className='flex space-x-2 items-center'>\n              {ctaArray.map((ctaItem, index) =>\n                renderCTAButton(ctaItem, index)\n              )}\n              {onDismiss && (\n                <button\n                  onClick={onDismiss}\n                  className='absolute top-2 right-2 md:relative md:top-auto md:right-auto rounded-md p-2 transition-colors hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-offset-2'\n                  aria-label='Dismiss banner'\n                >\n                  <svg\n                    className='w-4 h-4 opacity-60'\n                    fill='currentColor'\n                    viewBox='0 0 20 20'\n                  >\n                    <path\n                      fillRule='evenodd'\n                      d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'\n                      clipRule='evenodd'\n                    />\n                  </svg>\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Standard banner layout (with or without icon)\n  return (\n    <div\n      className={cn(\n        'relative flex justify-between rounded-lg p-4',\n        currentStyles.container,\n        className\n      )}\n    >\n      {onDismiss && (\n        <button\n          onClick={onDismiss}\n          className='absolute top-2 right-2 md:relative md:top-auto md:right-auto md:flex md:items-center md:justify-end md:ml-3 flex-shrink-0 rounded-md p-2 transition-colors hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-offset-2'\n          aria-label='Dismiss banner'\n        >\n          <svg\n            className='w-4 h-4 opacity-60'\n            fill='currentColor'\n            viewBox='0 0 20 20'\n          >\n            <path\n              fillRule='evenodd'\n              d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'\n              clipRule='evenodd'\n            />\n          </svg>\n        </button>\n      )}\n      <div\n        className={cn(\n          'flex items-center',\n          title ? 'items-start' : 'items-center',\n          onDismiss ? 'pr-10 md:pr-0' : ''\n        )}\n      >\n        {icon && (\n          <div className={cn('mr-3', title ? 'mt-1' : '', currentStyles.icon)}>\n            {currentStyles.iconSvg}\n          </div>\n        )}\n\n        <div className='flex-1'>\n          {title && (\n            <h3\n              className={cn(\n                'font-semibold',\n                currentStyles.title,\n                titleSizes[titleSize]\n              )}\n            >\n              {title}\n            </h3>\n          )}\n          <p className={cn(currentStyles.description, 'text-sm')}>\n            {description}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport { Banner };\n"],"names":["Banner","title","description","type","icon","cta","className","onDismiss","titleSize","typeStyles","jsx","titleSizes","getLinkStyling","variant","size","variants","sizes","cn","currentStyles","renderCTAButton","ctaItem","index","Button","ctaArray","jsxs"],"mappings":"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"}