@oddsmith/ui 0.0.0 → 1.0.0

package/src/components/streaks/sf-streaks.scss

@@ -1,351 +0,0 @@
-:host {
-      display: block;
-      font-family: 'Inter', system-ui, -apple-system, sans-serif;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    .container {
-      position: relative;
-      padding: 32px;
-      border-radius: 24px;
-      background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a1a 100%);
-      border: 1px solid rgba(99, 102, 241, 0.3);
-      overflow: hidden;
-      max-width: 600px;
-    }
-
-    /* Animated background glow */
-    .container::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: radial-gradient(
-        circle at 30% 30%,
-        rgba(99, 102, 241, 0.15) 0%,
-        transparent 50%
-      );
-      animation: pulse 8s ease-in-out infinite;
-      pointer-events: none;
-    }
-
-    .container::after {
-      content: '';
-      position: absolute;
-      bottom: -30%;
-      right: -30%;
-      width: 60%;
-      height: 60%;
-      background: radial-gradient(
-        circle,
-        rgba(236, 72, 153, 0.1) 0%,
-        transparent 60%
-      );
-      animation: pulse 6s ease-in-out infinite reverse;
-      pointer-events: none;
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 0.5; transform: scale(1); }
-      50% { opacity: 1; transform: scale(1.1); }
-    }
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-bottom: 24px;
-      position: relative;
-      z-index: 1;
-    }
-
-    .title-section {
-      flex: 1;
-    }
-
-    .title {
-      font-size: 1.75rem;
-      font-weight: 700;
-      margin: 0 0 8px 0;
-      background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #ec4899 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      letter-spacing: -0.02em;
-    }
-
-    .subtitle {
-      font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.7);
-      margin: 0;
-      line-height: 1.5;
-      max-width: 320px;
-    }
-
-    .wheel-container {
-      position: relative;
-      width: 100px;
-      height: 100px;
-      flex-shrink: 0;
-    }
-
-    .wheel {
-      width: 100%;
-      height: 100%;
-      animation: float 4s ease-in-out infinite;
-    }
-
-    .wheel-ring {
-      position: absolute;
-      inset: -8px;
-      border-radius: 50%;
-      border: 2px solid transparent;
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(236, 72, 153, 0.5)) border-box;
-      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-      animation: spin 20s linear infinite;
-    }
-
-    @keyframes float {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-8px); }
-    }
-
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-
-    .steps-container {
-      display: flex;
-      gap: 12px;
-      position: relative;
-      z-index: 1;
-    }
-
-    /* Connection line */
-    .steps-container::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 24px;
-      right: 24px;
-      height: 2px;
-      background: linear-gradient(90deg, 
-        rgba(99, 102, 241, 0.5) 0%,
-        rgba(168, 85, 247, 0.5) 50%,
-        rgba(236, 72, 153, 0.5) 100%
-      );
-      transform: translateY(-50%);
-      z-index: 0;
-    }
-
-    .step {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      position: relative;
-      z-index: 1;
-    }
-
-    .step-box {
-      width: 100%;
-      aspect-ratio: 1;
-      border-radius: 16px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      background: rgba(255, 255, 255, 0.03);
-      backdrop-filter: blur(12px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .step-box::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(135deg, 
-        transparent 0%,
-        rgba(99, 102, 241, 0.1) 50%,
-        transparent 100%
-      );
-      opacity: 0;
-      transition: opacity 0.4s ease;
-    }
-
-    .step-box:hover::before {
-      opacity: 1;
-    }
-
-    .step-box:hover {
-      transform: translateY(-4px);
-      border-color: rgba(99, 102, 241, 0.4);
-      box-shadow: 
-        0 8px 32px rgba(99, 102, 241, 0.2),
-        0 0 0 1px rgba(99, 102, 241, 0.2);
-    }
-
-    .step-box.completed {
-      background: linear-gradient(135deg, 
-        rgba(34, 197, 94, 0.15) 0%,
-        rgba(34, 197, 94, 0.05) 100%
-      );
-      border-color: rgba(34, 197, 94, 0.4);
-    }
-
-    .step-box.completed:hover {
-      border-color: rgba(34, 197, 94, 0.6);
-      box-shadow: 
-        0 8px 32px rgba(34, 197, 94, 0.2),
-        0 0 0 1px rgba(34, 197, 94, 0.3);
-    }
-
-    .step-box.reward {
-      background: linear-gradient(135deg, 
-        rgba(236, 72, 153, 0.15) 0%,
-        rgba(168, 85, 247, 0.15) 100%
-      );
-      border-color: rgba(236, 72, 153, 0.4);
-      animation: glow 2s ease-in-out infinite;
-    }
-
-    .step-box.reward:hover {
-      border-color: rgba(236, 72, 153, 0.6);
-      box-shadow: 
-        0 8px 32px rgba(236, 72, 153, 0.3),
-        0 0 0 1px rgba(236, 72, 153, 0.3);
-    }
-
-    @keyframes glow {
-      0%, 100% { 
-        box-shadow: 
-          0 0 20px rgba(236, 72, 153, 0.2),
-          inset 0 0 20px rgba(236, 72, 153, 0.05);
-      }
-      50% { 
-        box-shadow: 
-          0 0 30px rgba(236, 72, 153, 0.4),
-          inset 0 0 30px rgba(236, 72, 153, 0.1);
-      }
-    }
-
-    .step-label {
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: rgba(255, 255, 255, 0.9);
-      letter-spacing: 0.05em;
-    }
-
-    .step-icon {
-      width: 28px;
-      height: 28px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .check-icon {
-      width: 100%;
-      height: 100%;
-      color: #22c55e;
-      animation: checkIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    @keyframes checkIn {
-      0% { 
-        transform: scale(0) rotate(-45deg);
-        opacity: 0;
-      }
-      50% { transform: scale(1.2) rotate(0deg); }
-      100% { transform: scale(1) rotate(0deg); opacity: 1; }
-    }
-
-    .gift-icon {
-      width: 100%;
-      height: 100%;
-      color: #ec4899;
-      animation: bounce 1s ease-in-out infinite;
-    }
-
-    @keyframes bounce {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-4px); }
-    }
-
-    .pending-icon {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.2);
-      border: 2px solid rgba(255, 255, 255, 0.3);
-    }
-
-    .progress-bar {
-      margin-top: 20px;
-      position: relative;
-      z-index: 1;
-    }
-
-    .progress-track {
-      height: 6px;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-
-    .progress-fill {
-      height: 100%;
-      background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
-      border-radius: 3px;
-      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-      position: relative;
-    }
-
-    .progress-fill::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(
-        90deg,
-        transparent 0%,
-        rgba(255, 255, 255, 0.3) 50%,
-        transparent 100%
-      );
-      animation: shimmer 2s infinite;
-    }
-
-    @keyframes shimmer {
-      0% { transform: translateX(-100%); }
-      100% { transform: translateX(100%); }
-    }
-
-    .progress-text {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 8px;
-      font-size: 0.75rem;
-      color: rgba(255, 255, 255, 0.5);
-    }
-
-    .progress-percentage {
-      color: #22c55e;
-      font-weight: 600;
-    }

package/src/components/streaks/sf-streaks.ts

@@ -1,235 +0,0 @@
-import { LitElement, html, PropertyValues } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { scss } from '../../lib/lit/scss.js';
-import {
-  SF_STREAKS_TAG,
-  DEFAULT_STREAKS_TITLE,
-  DEFAULT_STREAKS_SUBTITLE,
-  DEFAULT_STREAKS_STEPS,
-} from './constants.js';
-import { STREAKS_STEP_CLICK } from './events.js';
-import type { StreaksStep } from './types.js';
-import renderTemplate from './sf-streaks.html?lit-html';
-import styles from './sf-streaks.scss?inline';
-
-@customElement(SF_STREAKS_TAG)
-export class SfStreaks extends LitElement {
-  static override styles = scss(styles);
-
-  static override properties = {
-    streaksTitle: { type: String, attribute: 'streak-title' },
-    streaksSubtitle: { type: String, attribute: 'streak-subtitle' },
-    streaksSteps: { type: Array, attribute: false },
-    _animatedProgress: { type: Number, state: true },
-  };
-
-  private _streaksTitle = DEFAULT_STREAKS_TITLE;
-  private _streaksSubtitle = DEFAULT_STREAKS_SUBTITLE;
-  private _streaksSteps: StreaksStep[] = [...DEFAULT_STREAKS_STEPS];
-  private _progress = 0;
-
-  get streaksTitle() {
-    return this._streaksTitle;
-  }
-  set streaksTitle(value: string) {
-    const oldVal = this._streaksTitle;
-    this._streaksTitle = value;
-    this.requestUpdate('streaksTitle', oldVal);
-  }
-
-  get streaksSubtitle() {
-    return this._streaksSubtitle;
-  }
-  set streaksSubtitle(value: string) {
-    const oldVal = this._streaksSubtitle;
-    this._streaksSubtitle = value;
-    this.requestUpdate('streaksSubtitle', oldVal);
-  }
-
-  get streaksSteps() {
-    return this._streaksSteps;
-  }
-  set streaksSteps(value: StreaksStep[]) {
-    const oldVal = this._streaksSteps;
-    this._streaksSteps = value;
-    this.requestUpdate('streaksSteps', oldVal);
-  }
-
-  get _animatedProgress() {
-    return this._progress;
-  }
-  set _animatedProgress(value: number) {
-    const oldVal = this._progress;
-    this._progress = value;
-    this.requestUpdate('_animatedProgress', oldVal);
-  }
-
-  override firstUpdated() {
-    requestAnimationFrame(() => {
-      this._animatedProgress = this.progress;
-    });
-  }
-
-  override updated(changedProperties: PropertyValues) {
-    if (changedProperties.has('streaksSteps')) {
-      this._animatedProgress = this.progress;
-    }
-  }
-
-  get completedCount() {
-    return this._streaksSteps.filter((s) => s.completed).length;
-  }
-
-  get progress() {
-    return (this.completedCount / this._streaksSteps.length) * 100;
-  }
-
-  private _handleStepClick(step: StreaksStep) {
-    this.dispatchEvent(
-      new CustomEvent(STREAKS_STEP_CLICK, {
-        detail: { step },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  private _renderCheckIcon() {
-    return html`
-      <svg
-        class="check-icon"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <polyline points="20 6 9 17 4 12"></polyline>
-      </svg>
-    `;
-  }
-
-  private _renderGiftIcon() {
-    return html`
-      <svg
-        class="gift-icon"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <polyline points="20 12 20 22 4 22 4 12"></polyline>
-        <rect x="2" y="7" width="20" height="5"></rect>
-        <line x1="12" y1="22" x2="12" y2="7"></line>
-        <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
-        <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
-      </svg>
-    `;
-  }
-
-  _renderSteps() {
-    return this._streaksSteps.map(
-      (step) => html`
-        <div class="step">
-          <div
-            class=${classMap({
-              'step-box': true,
-              completed: step.completed,
-              reward: !!step.isReward && !step.completed,
-            })}
-            @click=${() => this._handleStepClick(step)}
-          >
-            <span class="step-label">${step.label}</span>
-            <div class="step-icon">
-              ${step.completed
-                ? this._renderCheckIcon()
-                : step.isReward
-                  ? this._renderGiftIcon()
-                  : html`<div class="pending-icon"></div>`}
-            </div>
-          </div>
-        </div>
-      `,
-    );
-  }
-
-  _renderWheel() {
-    return html`
-      <svg class="wheel" viewBox="0 0 100 100" fill="none">
-        <defs>
-          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="2" result="coloredBlur" />
-            <feMerge>
-              <feMergeNode in="coloredBlur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-          <linearGradient id="segment1" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#ef4444" />
-            <stop offset="100%" style="stop-color:#dc2626" />
-          </linearGradient>
-          <linearGradient id="segment2" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#f97316" />
-            <stop offset="100%" style="stop-color:#ea580c" />
-          </linearGradient>
-          <linearGradient id="segment3" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#eab308" />
-            <stop offset="100%" style="stop-color:#ca8a04" />
-          </linearGradient>
-          <linearGradient id="segment4" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#22c55e" />
-            <stop offset="100%" style="stop-color:#16a34a" />
-          </linearGradient>
-          <linearGradient id="segment5" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#3b82f6" />
-            <stop offset="100%" style="stop-color:#2563eb" />
-          </linearGradient>
-          <linearGradient id="segment6" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#a855f7" />
-            <stop offset="100%" style="stop-color:#9333ea" />
-          </linearGradient>
-        </defs>
-        <g filter="url(#glow)">
-          <path d="M50 50 L50 10 A40 40 0 0 1 84.64 30 Z" fill="url(#segment1)" />
-          <path d="M50 50 L84.64 30 A40 40 0 0 1 84.64 70 Z" fill="url(#segment2)" />
-          <path d="M50 50 L84.64 70 A40 40 0 0 1 50 90 Z" fill="url(#segment3)" />
-          <path d="M50 50 L50 90 A40 40 0 0 1 15.36 70 Z" fill="url(#segment4)" />
-          <path d="M50 50 L15.36 70 A40 40 0 0 1 15.36 30 Z" fill="url(#segment5)" />
-          <path d="M50 50 L15.36 30 A40 40 0 0 1 50 10 Z" fill="url(#segment6)" />
-        </g>
-        <circle
-          cx="50"
-          cy="50"
-          r="12"
-          fill="#1a1a3a"
-          stroke="rgba(255,255,255,0.2)"
-          stroke-width="2"
-        />
-        <circle cx="50" cy="50" r="6" fill="#6366f1" />
-        <polygon points="50,2 46,12 54,12" fill="#fff" filter="url(#glow)" />
-        <circle
-          cx="50"
-          cy="50"
-          r="44"
-          fill="none"
-          stroke="rgba(255,255,255,0.1)"
-          stroke-width="2"
-        />
-      </svg>
-    `;
-  }
-
-  override render() {
-    return renderTemplate(this);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sf-streaks': SfStreaks;
-  }
-}

package/src/components/streaks/types.ts

@@ -1,7 +0,0 @@
-/** A single step in the streaks progress track. */
-export interface StreaksStep {
-  id: string;
-  label: string;
-  completed: boolean;
-  isReward?: boolean;
-}

package/src/lib/lit/component.ts

@@ -1,10 +0,0 @@
-import { customElement } from './safe-custom-element.js';
-
-export interface ComponentOptions {
-  selector: string;
-}
-
-/** Angular-style `@Component` — registers a Lit class as a custom element. */
-export function Component(options: ComponentOptions) {
-  return customElement(options.selector);
-}

package/src/lib/lit/safe-custom-element.ts

@@ -1,12 +0,0 @@
-/**
- * Registers a custom element only if the tag is not already in the registry.
- * Use instead of Lit's `@customElement` when HMR or duplicate bundles are possible.
- */
-export function customElement(tag: string) {
-  return <T extends CustomElementConstructor>(cls: T): T => {
-    if (!customElements.get(tag)) {
-      customElements.define(tag, cls);
-    }
-    return cls;
-  };
-}

package/src/lib/lit/scss.ts

@@ -1,6 +0,0 @@
-import { unsafeCSS, type CSSResult } from 'lit';
-
-/** Compiled SCSS string → adoptable shadow-root stylesheet. */
-export function scss(stylesheet: string): CSSResult {
-  return unsafeCSS(stylesheet);
-}

package/src/vite-env.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.scss?inline' {
-  const css: string;
-  export default css;
-}
-
-declare module '*.theme.json' {
-  import type { SfLeaderboardTheme } from './theme/types.js';
-  const theme: SfLeaderboardTheme;
-  export default theme;
-}
-
-declare module '*.html?lit-html' {
-  import type { TemplateResult } from 'lit';
-
-  export default function render(host: unknown): TemplateResult;
-}