@tampadevs/react 0.1.0

package/dist/index19.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index19.js","sources":["../src/components/EventCard.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type EventCardVariant = 'default' | 'compact' | 'featured';\n\nexport interface EventCardProps {\n  variant?: EventCardVariant;\n  title: string;\n  date: string;\n  time?: string;\n  location?: string;\n  groupName?: string;\n  groupUrl?: string;\n  eventUrl?: string;\n  imageUrl?: string;\n  rsvpCount?: number;\n  isOnline?: boolean;\n  description?: string;\n  relativeTime?: string;\n  className?: string;\n}\n\nfunction getMonth(date: string): string {\n  if (!date) return '';\n  const d = new Date(date);\n  return d.toLocaleDateString('en-US', { month: 'short' });\n}\n\nfunction getDay(date: string): number {\n  if (!date) return 0;\n  return new Date(date).getDate();\n}\n\nexport function EventCard({\n  variant = 'default',\n  title,\n  date,\n  time = '',\n  location = '',\n  groupName = '',\n  groupUrl = '',\n  eventUrl = '',\n  imageUrl = '',\n  rsvpCount = 0,\n  isOnline = false,\n  description = '',\n  relativeTime = '',\n  className,\n}: EventCardProps) {\n  const month = getMonth(date);\n  const day = getDay(date);\n\n  return (\n    <>\n      {variant === 'compact' && (\n        <article className={clsx('td-event-card-compact', className)}>\n          <div className=\"td-event-card-compact__date\">\n            <div className=\"td-event-card-compact__month\">{month}</div>\n            <div className=\"td-event-card-compact__day\">{day}</div>\n            <div className=\"td-event-card-compact__time\">{time}</div>\n          </div>\n          <div className=\"td-event-card-compact__content\">\n            <a href={eventUrl || '#'}>\n              <h3 className=\"td-event-card-compact__title\">{title}</h3>\n            </a>\n            <div className=\"td-event-card-compact__group\">\n              {groupUrl ? <a href={groupUrl}>{groupName}</a> : groupName}\n            </div>\n            <div className=\"td-event-card-compact__meta\">\n              {isOnline ? (\n                <span className=\"td-event-card__online-indicator\">\n                  <span className=\"td-event-card__online-dot\" />\n                  Online\n                </span>\n              ) : location ? (\n                <span>{location}</span>\n              ) : null}\n              <span>·</span>\n              <span>{rsvpCount} going</span>\n            </div>\n          </div>\n        </article>\n      )}\n\n      {variant === 'featured' && (\n        <article className={clsx('td-event-card-featured', className)}>\n          {imageUrl && (\n            <img className=\"td-event-card-featured__bg\" src={imageUrl} alt=\"\" />\n          )}\n          <div className=\"td-event-card-featured__overlay\" />\n          <div className=\"td-event-card-featured__content\">\n            <div className=\"td-event-card-featured__meta\">\n              <span className=\"td-event-card-featured__label\">\n                {relativeTime || 'Upcoming'}\n              </span>\n              <span>·</span>\n              <span>{time}</span>\n            </div>\n\n            <h2 className=\"td-event-card-featured__title\">\n              <a href={eventUrl || '#'}>{title}</a>\n            </h2>\n\n            <div className=\"td-event-card-featured__group\">\n              {groupUrl ? <a href={groupUrl}>{groupName}</a> : groupName}\n            </div>\n\n            {description && (\n              <p className=\"td-event-card-featured__description\">{description}</p>\n            )}\n\n            <div className=\"td-event-card-featured__footer\">\n              {!isOnline && location && (\n                <div className=\"td-event-card-featured__location\">\n                  <svg className=\"td-event-card__icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n                  </svg>\n                  <span>{location}</span>\n                </div>\n              )}\n              <div className=\"td-event-card-featured__rsvp\">\n                <svg className=\"td-event-card__icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z\" />\n                </svg>\n                <span>{rsvpCount} going</span>\n              </div>\n            </div>\n\n            <a className=\"td-event-card-featured__cta\" href={eventUrl || '#'}>\n              View Event\n              <svg className=\"td-event-card__icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M14 5l7 7m0 0l-7 7m7-7H3\" />\n              </svg>\n            </a>\n          </div>\n        </article>\n      )}\n\n      {variant === 'default' && (\n        <article className={clsx('td-event-card-default', className)}>\n          <div className=\"td-event-card-default__image-wrapper\">\n            {imageUrl ? (\n              <img className=\"td-event-card-default__image\" src={imageUrl} alt=\"\" />\n            ) : (\n              <div className=\"td-event-card-default__placeholder\">\n                <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n                </svg>\n              </div>\n            )}\n            <div className=\"td-event-card-default__date-badge\">\n              <div className=\"td-event-card-default__badge-month\">{month}</div>\n              <div className=\"td-event-card-default__badge-day\">{day}</div>\n            </div>\n            {isOnline && (\n              <div className=\"td-event-card-default__online-badge\">\n                <span className=\"td-event-card-default__online-dot\" />\n                Online\n              </div>\n            )}\n          </div>\n\n          <div className=\"td-event-card-default__content\">\n            <div className=\"td-event-card-default__time\">{time}</div>\n            <a href={eventUrl || '#'}>\n              <h3 className=\"td-event-card-default__title\">{title}</h3>\n            </a>\n            <div className=\"td-event-card-default__group\">\n              {groupUrl ? <a href={groupUrl}>{groupName}</a> : groupName}\n            </div>\n\n            <div className=\"td-event-card-default__spacer\" />\n\n            <div className=\"td-event-card-default__footer\">\n              <div className=\"td-event-card-default__location\">\n                {!isOnline && location ? (\n                  <>\n                    <svg className=\"td-event-card__icon-sm\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n                    </svg>\n                    <span>{location}</span>\n                  </>\n                ) : (\n                  <span style={{ color: '#16A34A' }}>Online Event</span>\n                )}\n              </div>\n              <div className=\"td-event-card-default__rsvp\">\n                <svg className=\"td-event-card__icon-sm\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z\" />\n                </svg>\n                <span>{rsvpCount}</span>\n              </div>\n            </div>\n          </div>\n        </article>\n      )}\n\n      <EventCardStyles />\n    </>\n  );\n}\n\nfunction EventCardStyles() {\n  return (\n    <style>{`\n      /* ============================================\n         COMPACT VARIANT\n         ============================================ */\n      .td-event-card-compact {\n        display: flex;\n        gap: 1rem;\n        padding: 1rem;\n        background: rgba(255, 255, 255, 0.8);\n        border-radius: 0.75rem;\n        border: 1px solid rgba(28, 36, 56, 0.1);\n        transition: border-color 0.15s ease, background-color 0.15s ease;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact {\n          background: rgba(17, 24, 39, 0.8);\n          border-color: rgba(55, 65, 81, 0.5);\n        }\n      }\n\n      .td-event-card-compact:hover {\n        border-color: rgba(28, 36, 56, 0.3);\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact:hover {\n          border-color: rgba(107, 114, 128, 0.5);\n        }\n      }\n\n      .td-event-card-compact__date {\n        flex-shrink: 0;\n        width: 4rem;\n        text-align: center;\n      }\n\n      .td-event-card-compact__month {\n        font-size: 0.875rem;\n        font-weight: 600;\n        color: #1C2438;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__month {\n          color: #D1D5DB;\n        }\n      }\n\n      .td-event-card-compact__day {\n        font-size: 1.5rem;\n        font-weight: 700;\n        color: #111827;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__day {\n          color: #F9FAFB;\n        }\n      }\n\n      .td-event-card-compact__time {\n        font-size: 0.75rem;\n        color: #6B7280;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__time {\n          color: #9CA3AF;\n        }\n      }\n\n      .td-event-card-compact__content {\n        flex: 1;\n        min-width: 0;\n      }\n\n      .td-event-card-compact__title {\n        font-weight: 600;\n        color: #111827;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0;\n        transition: color 0.15s ease;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__title {\n          color: #F9FAFB;\n        }\n      }\n\n      .td-event-card-compact__title:hover {\n        color: #1C2438;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__title:hover {\n          color: #FFFFFF;\n        }\n      }\n\n      .td-event-card-compact__group {\n        font-size: 0.875rem;\n        color: #6B7280;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__group {\n          color: #9CA3AF;\n        }\n      }\n\n      .td-event-card-compact__group a:hover {\n        color: #1C2438;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__group a:hover {\n          color: #FFFFFF;\n        }\n      }\n\n      .td-event-card-compact__meta {\n        margin-top: 0.25rem;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-size: 0.75rem;\n        color: #6B7280;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-compact__meta {\n          color: #6B7280;\n        }\n      }\n\n      .td-event-card__online-indicator {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n      }\n\n      .td-event-card__online-dot {\n        width: 0.5rem;\n        height: 0.5rem;\n        background: #22C55E;\n        border-radius: 50%;\n      }\n\n      /* ============================================\n         FEATURED VARIANT\n         ============================================ */\n      .td-event-card-featured {\n        position: relative;\n        overflow: hidden;\n        border-radius: 1rem;\n        background: linear-gradient(135deg, #1C2438 0%, #1A2031 100%);\n        color: white;\n        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(28, 36, 56, 0.3);\n      }\n\n      .td-event-card-featured__bg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        opacity: 0.3;\n      }\n\n      .td-event-card-featured__overlay {\n        position: absolute;\n        inset: 0;\n        backdrop-filter: blur(2px);\n        background: linear-gradient(135deg, rgba(28, 36, 56, 0.6) 0%, rgba(26, 32, 49, 0.8) 100%);\n      }\n\n      .td-event-card-featured__content {\n        position: relative;\n        padding: 1.5rem;\n      }\n\n      @media (min-width: 768px) {\n        .td-event-card-featured__content {\n          padding: 2rem;\n        }\n      }\n\n      .td-event-card-featured__meta {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        color: #D1D5DB;\n        font-size: 0.875rem;\n        margin-bottom: 0.5rem;\n      }\n\n      .td-event-card-featured__label {\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        font-weight: 600;\n      }\n\n      .td-event-card-featured__title {\n        font-size: 1.5rem;\n        font-weight: 700;\n        margin: 0 0 0.5rem 0;\n      }\n\n      @media (min-width: 768px) {\n        .td-event-card-featured__title {\n          font-size: 1.875rem;\n        }\n      }\n\n      .td-event-card-featured__title a {\n        color: inherit;\n        text-decoration: none;\n      }\n\n      .td-event-card-featured__title a:hover {\n        text-decoration: underline;\n      }\n\n      .td-event-card-featured__group {\n        color: #D1D5DB;\n      }\n\n      .td-event-card-featured__group a {\n        color: inherit;\n        text-decoration: none;\n      }\n\n      .td-event-card-featured__group a:hover {\n        color: white;\n      }\n\n      .td-event-card-featured__description {\n        margin-top: 1rem;\n        color: rgba(209, 213, 219, 0.8);\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      .td-event-card-featured__footer {\n        margin-top: 1.5rem;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 1rem;\n      }\n\n      .td-event-card-featured__location,\n      .td-event-card-featured__rsvp {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-size: 0.875rem;\n      }\n\n      .td-event-card-featured__cta {\n        margin-top: 1.5rem;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n        background-color: #E85A4F;\n        color: white;\n        padding: 0.875rem 1.5rem;\n        border-radius: 0.5rem;\n        font-weight: 600;\n        font-size: 0.875rem;\n        text-transform: uppercase;\n        letter-spacing: 0.025em;\n        transition: all 0.15s ease;\n        box-shadow: 0 4px 6px -1px rgba(232, 90, 79, 0.25);\n        text-decoration: none;\n      }\n\n      .td-event-card-featured__cta:hover {\n        background-color: #F07167;\n        transform: translateY(-1px);\n        box-shadow: 0 6px 10px -2px rgba(232, 90, 79, 0.3);\n      }\n\n      /* ============================================\n         DEFAULT VARIANT\n         ============================================ */\n      .td-event-card-default {\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        border-radius: 0.875rem;\n        overflow: hidden;\n        transition: all 0.2s ease;\n        backdrop-filter: blur(4px);\n        background: rgba(255, 255, 255, 0.8);\n        border: 1px solid rgba(255, 255, 255, 0.2);\n        box-shadow:\n          0 4px 6px -1px rgba(0, 0, 0, 0.05),\n          0 2px 4px -2px rgba(0, 0, 0, 0.03),\n          inset 0 1px 0 0 rgba(255, 255, 255, 0.1);\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default {\n          background: rgba(17, 24, 39, 0.8);\n          border-color: rgba(55, 65, 81, 0.5);\n        }\n      }\n\n      .td-event-card-default:hover {\n        background: rgba(255, 255, 255, 0.9);\n        box-shadow:\n          0 10px 15px -3px rgba(0, 0, 0, 0.08),\n          0 4px 6px -4px rgba(0, 0, 0, 0.04),\n          inset 0 1px 0 0 rgba(255, 255, 255, 0.15);\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default:hover {\n          background: rgba(17, 24, 39, 0.9);\n        }\n      }\n\n      .td-event-card-default__image-wrapper {\n        height: 10rem;\n        flex-shrink: 0;\n        background: #F3F4F6;\n        position: relative;\n        overflow: hidden;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__image-wrapper {\n          background: #1F2937;\n        }\n      }\n\n      .td-event-card-default__image {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .td-event-card-default__placeholder {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .td-event-card-default__placeholder svg {\n        width: 3rem;\n        height: 3rem;\n        color: #D1D5DB;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__placeholder svg {\n          color: #4B5563;\n        }\n      }\n\n      .td-event-card-default__date-badge {\n        position: absolute;\n        top: 0.75rem;\n        left: 0.75rem;\n        backdrop-filter: blur(12px);\n        background: rgba(255, 255, 255, 0.8);\n        border-radius: 0.5rem;\n        padding: 0.25rem 0.5rem;\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);\n        border: 1px solid rgba(255, 255, 255, 0.5);\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__date-badge {\n          background: rgba(17, 24, 39, 0.8);\n          border-color: rgba(55, 65, 81, 0.5);\n        }\n      }\n\n      .td-event-card-default__badge-month {\n        font-size: 0.75rem;\n        font-weight: 600;\n        color: #1C2438;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__badge-month {\n          color: #D1D5DB;\n        }\n      }\n\n      .td-event-card-default__badge-day {\n        font-size: 1.125rem;\n        font-weight: 700;\n        color: #111827;\n        line-height: 1.2;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__badge-day {\n          color: #F9FAFB;\n        }\n      }\n\n      .td-event-card-default__online-badge {\n        position: absolute;\n        top: 0.75rem;\n        right: 0.75rem;\n        backdrop-filter: blur(12px);\n        background: rgba(34, 197, 94, 0.9);\n        color: white;\n        font-size: 0.75rem;\n        font-weight: 500;\n        padding: 0.25rem 0.625rem;\n        border-radius: 9999px;\n        display: flex;\n        align-items: center;\n        gap: 0.375rem;\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(34, 197, 94, 0.25);\n        border: 1px solid rgba(74, 222, 128, 0.3);\n      }\n\n      .td-event-card-default__online-dot {\n        width: 0.375rem;\n        height: 0.375rem;\n        background: white;\n        border-radius: 50%;\n        animation: td-event-card-pulse 2s infinite;\n      }\n\n      @keyframes td-event-card-pulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.5; }\n      }\n\n      .td-event-card-default__content {\n        flex: 1;\n        padding: 1rem;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .td-event-card-default__time {\n        font-size: 0.875rem;\n        color: #6B7280;\n        margin-bottom: 0.25rem;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__time {\n          color: #9CA3AF;\n        }\n      }\n\n      .td-event-card-default__title {\n        font-weight: 600;\n        color: #111827;\n        transition: color 0.15s ease;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        min-height: 3rem;\n        margin: 0;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__title {\n          color: #F9FAFB;\n        }\n      }\n\n      .td-event-card-default__title:hover {\n        color: #1C2438;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__title:hover {\n          color: #FFFFFF;\n        }\n      }\n\n      .td-event-card-default__group {\n        font-size: 0.875rem;\n        color: #6B7280;\n        margin-top: 0.25rem;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__group {\n          color: #9CA3AF;\n        }\n      }\n\n      .td-event-card-default__group a {\n        color: inherit;\n        text-decoration: none;\n      }\n\n      .td-event-card-default__group a:hover {\n        color: #1C2438;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__group a:hover {\n          color: #FFFFFF;\n        }\n      }\n\n      .td-event-card-default__spacer {\n        flex: 1;\n      }\n\n      .td-event-card-default__footer {\n        margin-top: 0.75rem;\n        padding-top: 0.75rem;\n        border-top: 1px solid #F3F4F6;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        font-size: 0.75rem;\n        color: #6B7280;\n      }\n\n      @media (prefers-color-scheme: dark) {\n        .td-event-card-default__footer {\n          border-top-color: #1F2937;\n        }\n      }\n\n      .td-event-card-default__location {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n        overflow: hidden;\n      }\n\n      .td-event-card-default__location span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .td-event-card-default__rsvp {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n        flex-shrink: 0;\n        margin-left: 0.5rem;\n      }\n\n      .td-event-card__icon {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .td-event-card__icon-sm {\n        width: 0.875rem;\n        height: 0.875rem;\n        flex-shrink: 0;\n      }\n\n      .td-event-card-compact a,\n      .td-event-card-default a {\n        color: inherit;\n        text-decoration: none;\n      }\n    `}</style>\n  );\n}\n"],"names":["getMonth","date","getDay","EventCard","variant","title","time","location","groupName","groupUrl","eventUrl","imageUrl","rsvpCount","isOnline","description","relativeTime","className","month","day","jsxs","Fragment","clsx","jsx","EventCardStyles"],"mappings":";;AAqBA,SAASA,EAASC,GAAsB;AACtC,SAAKA,IACK,IAAI,KAAKA,CAAI,EACd,mBAAmB,SAAS,EAAE,OAAO,SAAS,IAFrC;AAGpB;AAEA,SAASC,EAAOD,GAAsB;AACpC,SAAKA,IACE,IAAI,KAAKA,CAAI,EAAE,QAAA,IADJ;AAEpB;AAEO,SAASE,EAAU;AAAA,EACxB,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,MAAAJ;AAAA,EACA,MAAAK,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,cAAAC,IAAe;AAAA,EACf,WAAAC;AACF,GAAmB;AACjB,QAAMC,IAAQjB,EAASC,CAAI,GACrBiB,IAAMhB,EAAOD,CAAI;AAEvB,SACE,gBAAAkB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAhB,MAAY,aACX,gBAAAe,EAAC,WAAA,EAAQ,WAAWE,EAAK,yBAAyBL,CAAS,GACzD,UAAA;AAAA,MAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,gCAAgC,UAAAL,GAAM;AAAA,QACrD,gBAAAK,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAJ,GAAI;AAAA,QACjD,gBAAAI,EAAC,OAAA,EAAI,WAAU,+BAA+B,UAAAhB,EAAA,CAAK;AAAA,MAAA,GACrD;AAAA,MACA,gBAAAa,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,QAAA,gBAAAG,EAAC,KAAA,EAAE,MAAMZ,KAAY,KACnB,4BAAC,MAAA,EAAG,WAAU,gCAAgC,UAAAL,EAAA,CAAM,EAAA,CACtD;AAAA,QACA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,gCACZ,UAAAb,IAAW,gBAAAa,EAAC,KAAA,EAAE,MAAMb,GAAW,UAAAD,EAAA,CAAU,IAAOA,GACnD;AAAA,QACA,gBAAAW,EAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,UAAAN,IACC,gBAAAM,EAAC,QAAA,EAAK,WAAU,mCACd,UAAA;AAAA,YAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,YAAE;AAAA,UAAA,GAEhD,IACEf,IACF,gBAAAe,EAAC,QAAA,EAAM,aAAS,IACd;AAAA,UACJ,gBAAAA,EAAC,UAAK,UAAA,IAAA,CAAC;AAAA,4BACN,QAAA,EAAM,UAAA;AAAA,YAAAV;AAAA,YAAU;AAAA,UAAA,EAAA,CAAM;AAAA,QAAA,EAAA,CACzB;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAGDR,MAAY,cACX,gBAAAe,EAAC,WAAA,EAAQ,WAAWE,EAAK,0BAA0BL,CAAS,GACzD,UAAA;AAAA,MAAAL,uBACE,OAAA,EAAI,WAAU,8BAA6B,KAAKA,GAAU,KAAI,IAAG;AAAA,MAEpE,gBAAAW,EAAC,OAAA,EAAI,WAAU,kCAAA,CAAkC;AAAA,MACjD,gBAAAH,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,iCACb,UAAAP,KAAgB,YACnB;AAAA,UACA,gBAAAO,EAAC,UAAK,UAAA,IAAA,CAAC;AAAA,UACP,gBAAAA,EAAC,UAAM,UAAAhB,EAAA,CAAK;AAAA,QAAA,GACd;AAAA,QAEA,gBAAAgB,EAAC,MAAA,EAAG,WAAU,iCACZ,UAAA,gBAAAA,EAAC,OAAE,MAAMZ,KAAY,KAAM,UAAAL,EAAA,CAAM,EAAA,CACnC;AAAA,QAEA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,iCACZ,UAAAb,IAAW,gBAAAa,EAAC,KAAA,EAAE,MAAMb,GAAW,UAAAD,EAAA,CAAU,IAAOA,GACnD;AAAA,QAECM,KACC,gBAAAQ,EAAC,KAAA,EAAE,WAAU,uCAAuC,UAAAR,GAAY;AAAA,QAGlE,gBAAAK,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,UAAA,CAACN,KAAYN,KACZ,gBAAAY,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,uBAAsB,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC1E,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,qFAAA,CAAqF;AAAA,cAC1J,gBAAAA,EAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,mCAAA,CAAmC;AAAA,YAAA,GAC1G;AAAA,YACA,gBAAAA,EAAC,UAAM,UAAAf,EAAA,CAAS;AAAA,UAAA,GAClB;AAAA,UAEF,gBAAAY,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,YAAA,gBAAAG,EAAC,SAAI,WAAU,uBAAsB,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC1E,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,6MAA4M,EAAA,CACnR;AAAA,8BACC,QAAA,EAAM,UAAA;AAAA,cAAAV;AAAA,cAAU;AAAA,YAAA,EAAA,CAAM;AAAA,UAAA,EAAA,CACzB;AAAA,QAAA,GACF;AAAA,0BAEC,KAAA,EAAE,WAAU,+BAA8B,MAAMF,KAAY,KAAK,UAAA;AAAA,UAAA;AAAA,UAEhE,gBAAAY,EAAC,SAAI,WAAU,uBAAsB,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC1E,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,4BAA2B,EAAA,CAClG;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAGDlB,MAAY,aACX,gBAAAe,EAAC,WAAA,EAAQ,WAAWE,EAAK,yBAAyBL,CAAS,GACzD,UAAA;AAAA,MAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,QAAAR,IACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,gCAA+B,KAAKX,GAAU,KAAI,GAAA,CAAG,IAEpE,gBAAAW,EAAC,OAAA,EAAI,WAAU,sCACb,4BAAC,OAAA,EAAI,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC1C,UAAA,gBAAAA,EAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,KAAK,GAAE,yFAAA,CAAyF,GAClK,GACF;AAAA,QAEF,gBAAAH,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,sCAAsC,UAAAL,GAAM;AAAA,UAC3D,gBAAAK,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAJ,EAAA,CAAI;AAAA,QAAA,GACzD;AAAA,QACCL,KACC,gBAAAM,EAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,oCAAA,CAAoC;AAAA,UAAE;AAAA,QAAA,EAAA,CAExD;AAAA,MAAA,GAEJ;AAAA,MAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,+BAA+B,UAAAhB,GAAK;AAAA,QACnD,gBAAAgB,EAAC,KAAA,EAAE,MAAMZ,KAAY,KACnB,4BAAC,MAAA,EAAG,WAAU,gCAAgC,UAAAL,EAAA,CAAM,EAAA,CACtD;AAAA,QACA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,gCACZ,UAAAb,IAAW,gBAAAa,EAAC,KAAA,EAAE,MAAMb,GAAW,UAAAD,EAAA,CAAU,IAAOA,GACnD;AAAA,QAEA,gBAAAc,EAAC,OAAA,EAAI,WAAU,gCAAA,CAAgC;AAAA,QAE/C,gBAAAH,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,UAAA,gBAAAG,EAAC,SAAI,WAAU,mCACZ,UAAA,CAACT,KAAYN,IACZ,gBAAAY,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAE,EAAC,SAAI,WAAU,0BAAyB,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC7E,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,sFAAqF,EAAA,CAC5J;AAAA,YACA,gBAAAA,EAAC,UAAM,UAAAf,EAAA,CAAS;AAAA,UAAA,EAAA,CAClB,sBAEC,QAAA,EAAK,OAAO,EAAE,OAAO,aAAa,UAAA,eAAA,CAAY,EAAA,CAEnD;AAAA,UACA,gBAAAY,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,YAAA,gBAAAG,EAAC,SAAI,WAAU,0BAAyB,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC7E,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,6MAA4M,EAAA,CACnR;AAAA,YACA,gBAAAA,EAAC,UAAM,UAAAV,EAAA,CAAU;AAAA,UAAA,EAAA,CACnB;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,sBAGDW,GAAA,CAAA,CAAgB;AAAA,EAAA,GACnB;AAEJ;AAEA,SAASA,IAAkB;AACzB,2BACG,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAgkBN;AAEN;"}

package/dist/index2.js

@@ -0,0 +1,181 @@
+import { jsxs as a, Fragment as e, jsx as t } from "react/jsx-runtime";
+import { clsx as y } from "./index28.js";
+function v({
+  variant: c = "primary",
+  size: p = "md",
+  loading: o = !1,
+  disabled: g = !1,
+  href: d,
+  type: m = "button",
+  className: x,
+  children: h,
+  onClick: i,
+  ...f
+}) {
+  const n = g || o, s = (r) => {
+    if (n) {
+      r.preventDefault(), r.stopPropagation();
+      return;
+    }
+    i && i(r);
+  }, b = y(
+    "td-button",
+    `td-button--${c}`,
+    `td-button--${p}`,
+    o && "td-button--loading",
+    x
+  ), u = /* @__PURE__ */ a(e, { children: [
+    o && /* @__PURE__ */ t("span", { className: "td-button__spinner" }),
+    h
+  ] });
+  return d && !n ? /* @__PURE__ */ a(e, { children: [
+    /* @__PURE__ */ t("a", { href: d, className: b, onClick: s, children: u }),
+    /* @__PURE__ */ t(l, {})
+  ] }) : /* @__PURE__ */ a(e, { children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: m,
+        className: b,
+        disabled: n,
+        onClick: s,
+        ...f,
+        children: u
+      }
+    ),
+    /* @__PURE__ */ t(l, {})
+  ] });
+}
+function l() {
+  return /* @__PURE__ */ t("style", { children: `
+      .td-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        font-weight: 600;
+        border-radius: 0.5rem;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+        text-decoration: none;
+        cursor: pointer;
+        border: none;
+        font-family: inherit;
+      }
+
+      .td-button:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #0F1729, 0 0 0 4px #E85A4F;
+      }
+
+      .td-button:disabled,
+      .td-button--loading {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      /* Sizes */
+      .td-button--sm {
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+      }
+
+      .td-button--md {
+        padding: 0.75rem 1.5rem;
+        font-size: 1rem;
+      }
+
+      .td-button--lg {
+        padding: 1rem 2rem;
+        font-size: 1.125rem;
+      }
+
+      /* Primary variant */
+      .td-button--primary {
+        background: #E85A4F;
+        color: white;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+        box-shadow: 0 4px 6px -1px rgba(232, 90, 79, 0.25);
+      }
+
+      .td-button--primary:hover:not(:disabled):not(.td-button--loading) {
+        background: #F07167;
+        transform: translateY(-1px);
+        box-shadow: 0 6px 10px -2px rgba(232, 90, 79, 0.3);
+      }
+
+      .td-button--primary:active:not(:disabled):not(.td-button--loading) {
+        background: #C44D44;
+        transform: translateY(0);
+      }
+
+      /* Secondary variant */
+      .td-button--secondary {
+        background: #1C2438;
+        color: white;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      }
+
+      .td-button--secondary:hover:not(:disabled):not(.td-button--loading) {
+        background: #2B3447;
+        transform: translateY(-1px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      }
+
+      .td-button--secondary:active:not(:disabled):not(.td-button--loading) {
+        background: #1A2031;
+        transform: translateY(0);
+      }
+
+      /* Ghost variant - uses currentColor for flexibility on any background */
+      .td-button--ghost {
+        background: transparent;
+        color: currentColor;
+        box-shadow: none;
+        border: 1px solid currentColor;
+        opacity: 0.8;
+      }
+
+      .td-button--ghost:hover:not(:disabled):not(.td-button--loading) {
+        background: rgba(255, 255, 255, 0.1);
+        opacity: 1;
+      }
+
+      .td-button--ghost:active:not(:disabled):not(.td-button--loading) {
+        background: rgba(255, 255, 255, 0.15);
+      }
+
+      /* Danger variant */
+      .td-button--danger {
+        background: #DC2626;
+        color: white;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(220, 38, 38, 0.25);
+      }
+
+      .td-button--danger:hover:not(:disabled):not(.td-button--loading) {
+        background: #B91C1C;
+        transform: translateY(-1px);
+      }
+
+      /* Loading spinner */
+      .td-button__spinner {
+        width: 1em;
+        height: 1em;
+        border: 2px solid currentColor;
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: td-button-spin 0.75s linear infinite;
+      }
+
+      @keyframes td-button-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    ` });
+}
+export {
+  v as Button
+};
+//# sourceMappingURL=index2.js.map

package/dist/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":["../src/components/Button.tsx"],"sourcesContent":["import { ReactNode, ButtonHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  href?: string;\n  type?: 'button' | 'submit' | 'reset';\n  children?: ReactNode;\n}\n\nexport function Button({\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  href,\n  type = 'button',\n  className,\n  children,\n  onClick,\n  ...props\n}: ButtonProps) {\n  const isDisabled = disabled || loading;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    if (onClick) {\n      onClick(e as React.MouseEvent<HTMLButtonElement>);\n    }\n  };\n\n  const buttonClass = clsx(\n    'td-button',\n    `td-button--${variant}`,\n    `td-button--${size}`,\n    loading && 'td-button--loading',\n    className\n  );\n\n  const content = (\n    <>\n      {loading && <span className=\"td-button__spinner\" />}\n      {children}\n    </>\n  );\n\n  if (href && !isDisabled) {\n    return (\n      <>\n        <a href={href} className={buttonClass} onClick={handleClick}>\n          {content}\n        </a>\n        <ButtonStyles />\n      </>\n    );\n  }\n\n  return (\n    <>\n      <button\n        type={type}\n        className={buttonClass}\n        disabled={isDisabled}\n        onClick={handleClick}\n        {...props}\n      >\n        {content}\n      </button>\n      <ButtonStyles />\n    </>\n  );\n}\n\nfunction ButtonStyles() {\n  return (\n    <style>{`\n      .td-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n        font-weight: 600;\n        border-radius: 0.5rem;\n        transition: all 0.15s ease;\n        white-space: nowrap;\n        text-decoration: none;\n        cursor: pointer;\n        border: none;\n        font-family: inherit;\n      }\n\n      .td-button:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px #0F1729, 0 0 0 4px #E85A4F;\n      }\n\n      .td-button:disabled,\n      .td-button--loading {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      /* Sizes */\n      .td-button--sm {\n        padding: 0.5rem 1rem;\n        font-size: 0.875rem;\n      }\n\n      .td-button--md {\n        padding: 0.75rem 1.5rem;\n        font-size: 1rem;\n      }\n\n      .td-button--lg {\n        padding: 1rem 2rem;\n        font-size: 1.125rem;\n      }\n\n      /* Primary variant */\n      .td-button--primary {\n        background: #E85A4F;\n        color: white;\n        text-transform: uppercase;\n        letter-spacing: 0.025em;\n        box-shadow: 0 4px 6px -1px rgba(232, 90, 79, 0.25);\n      }\n\n      .td-button--primary:hover:not(:disabled):not(.td-button--loading) {\n        background: #F07167;\n        transform: translateY(-1px);\n        box-shadow: 0 6px 10px -2px rgba(232, 90, 79, 0.3);\n      }\n\n      .td-button--primary:active:not(:disabled):not(.td-button--loading) {\n        background: #C44D44;\n        transform: translateY(0);\n      }\n\n      /* Secondary variant */\n      .td-button--secondary {\n        background: #1C2438;\n        color: white;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n      }\n\n      .td-button--secondary:hover:not(:disabled):not(.td-button--loading) {\n        background: #2B3447;\n        transform: translateY(-1px);\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n      }\n\n      .td-button--secondary:active:not(:disabled):not(.td-button--loading) {\n        background: #1A2031;\n        transform: translateY(0);\n      }\n\n      /* Ghost variant - uses currentColor for flexibility on any background */\n      .td-button--ghost {\n        background: transparent;\n        color: currentColor;\n        box-shadow: none;\n        border: 1px solid currentColor;\n        opacity: 0.8;\n      }\n\n      .td-button--ghost:hover:not(:disabled):not(.td-button--loading) {\n        background: rgba(255, 255, 255, 0.1);\n        opacity: 1;\n      }\n\n      .td-button--ghost:active:not(:disabled):not(.td-button--loading) {\n        background: rgba(255, 255, 255, 0.15);\n      }\n\n      /* Danger variant */\n      .td-button--danger {\n        background: #DC2626;\n        color: white;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(220, 38, 38, 0.25);\n      }\n\n      .td-button--danger:hover:not(:disabled):not(.td-button--loading) {\n        background: #B91C1C;\n        transform: translateY(-1px);\n      }\n\n      /* Loading spinner */\n      .td-button__spinner {\n        width: 1em;\n        height: 1em;\n        border: 2px solid currentColor;\n        border-top-color: transparent;\n        border-radius: 50%;\n        animation: td-button-spin 0.75s linear infinite;\n      }\n\n      @keyframes td-button-spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `}</style>\n  );\n}\n"],"names":["Button","variant","size","loading","disabled","href","type","className","children","onClick","props","isDisabled","handleClick","e","buttonClass","clsx","content","jsxs","Fragment","jsx","ButtonStyles"],"mappings":";;AAeO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAaP,KAAYD,GAEzBS,IAAc,CAACC,MAA+D;AAClF,QAAIF,GAAY;AACd,MAAAE,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AACA,IAAIJ,KACFA,EAAQI,CAAwC;AAAA,EAEpD,GAEMC,IAAcC;AAAA,IAClB;AAAA,IACA,cAAcd,CAAO;AAAA,IACrB,cAAcC,CAAI;AAAA,IAClBC,KAAW;AAAA,IACXI;AAAA,EAAA,GAGIS,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAf,KAAW,gBAAAgB,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,IAChDX;AAAA,EAAA,GACH;AAGF,SAAIH,KAAQ,CAACM,IAET,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAE,MAAAd,GAAY,WAAWS,GAAa,SAASF,GAC7C,UAAAI,GACH;AAAA,sBACCI,GAAA,CAAA,CAAa;AAAA,EAAA,GAChB,IAKF,gBAAAH,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAb;AAAA,QACA,WAAWQ;AAAA,QACX,UAAUH;AAAA,QACV,SAASC;AAAA,QACR,GAAGF;AAAA,QAEH,UAAAM;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEFI,GAAA,CAAA,CAAa;AAAA,EAAA,GAChB;AAEJ;AAEA,SAASA,IAAe;AACtB,2BACG,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OA8HN;AAEN;"}