@oddsmith/ui 0.0.0 → 1.0.1

package/src/components/sf-leaderboard/index.ts

@@ -1,77 +0,0 @@
-/**
- * Sf Leaderboard — public API.
- * Import: `import '@skinforge/sf-leaderboard'`
- */
-export type {
-  Player,
-  Activity,
-  TimeFrame,
-  Category,
-} from './shared/types/data.js';
-export type {
-  SfLeaderboardLayout,
-  SfLeaderboardHeaderSection,
-  SfLeaderboardStatsSection,
-  SfLeaderboardStatItem,
-  SfLeaderboardRankingSection,
-  SfLeaderboardPodiumSection,
-  SfLeaderboardPlayerStatsSection,
-  SfLeaderboardTableSection,
-  SfLeaderboardTableFiltersSection,
-} from './shared/types/sections.js';
-/** @deprecated Use `SfLeaderboardStatItem` */
-export type { SfLeaderboardOverviewStat } from './shared/constants/stats-overview.js';
-export type {
-  SfLeaderboardState,
-  SfLeaderboardConfig,
-  SfLeaderboardLabels,
-  SfLeaderboardSectionData,
-  SfLeaderboardSectionId,
-  SfLeaderboardSectionEntry,
-  SfLeaderboardSectionPayloadMap,
-  SfLeaderboardSectionPatch,
-  /** @deprecated Use `SfLeaderboardState` */
-  SfLeaderboardData,
-} from './services/index.js';
-export {
-  EMPTY_SF_LEADERBOARD_STATE,
-  applySectionPatch,
-  getSectionData,
-  hasSection,
-  patchSectionData,
-  sectionEntry,
-  updateSections,
-} from './services/index.js';
-export * from './shared/constants/index.js';
-export * from './shared/types/events.js';
-export { sfLeaderboardDataService } from './services/index.js';
-export { Component, type ComponentOptions } from '../../lib/lit/component.js';
-export { SfLeaderboard } from './sf-leaderboard.js';
-export { SfLeaderboardHeaderBlock } from './sections/header-section/header-section.js';
-export { SfLeaderboardStatsBlock } from './sections/stats-section/stats-section.js';
-export { SfLeaderboardRankingBlock } from './sections/ranking-section/ranking-section.js';
-export { SfLeaderboardTableBlock } from './sections/table-section/table-section.js';
-export { SfLeaderboardFooterBlock } from './sections/footer-section/footer-section.js';
-export { SfLeaderboardPlayerStatsCard } from './shared/components/player-stats-card/player-stats-card.js';
-export { SfLeaderboardStatCard } from './shared/components/stat-card/stat-card.js';
-export { SfLeaderboardPodium } from './shared/components/podium/podium.js';
-
-export type {
-  SfLeaderboardTheme,
-  SfLeaderboardPlacementTheme,
-  SfLeaderboardTableColumnTheme,
-  TableColumnId,
-} from './theme/index.js';
-export {
-  sfLeaderboardTheme,
-  loadThemeFromJson,
-  parseThemeJson,
-  injectTheme,
-  clearTheme,
-  getThemeLabel,
-  mergeSfLeaderboardTheme,
-  themeToCssVars,
-  DEFAULT_SF_LEADERBOARD_THEME,
-} from './theme/index.js';
-
-import './sf-leaderboard.js';

package/src/components/sf-leaderboard/sections/footer-section/footer-section.html

@@ -1,3 +0,0 @@
-<footer class="page-footer">
-  <p>${host.text}</p>
-</footer>

package/src/components/sf-leaderboard/sections/footer-section/footer-section.scss

@@ -1,18 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-.page-footer {
-  border-top: 1px solid var(--border);
-  margin-top: clamp(1.5rem, 4vw, 3rem);
-  padding-top: 1rem;
-  width: 100%;
-
-  p {
-    margin: 0;
-    text-align: center;
-    font-size: 0.875rem;
-    color: var(--muted-foreground);
-  }
-}

package/src/components/sf-leaderboard/sections/footer-section/footer-section.ts

@@ -1,22 +0,0 @@
-import { LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { Component } from '../../../../../lib/lit/component.js';
-import { scss } from '../../../../../lib/lit/scss.js';
-import { SF_LEADERBOARD_FOOTER_SECTION } from '../../shared/constants/tags.js';
-import { sfLeaderboardTheme } from '../../theme/styles.js';
-import type { FooterSectionHost } from './footer-section.host.js';
-import renderTemplate from './footer-section.html?lit-html';
-import styles from './footer-section.scss?inline';
-
-@Component({ selector: SF_LEADERBOARD_FOOTER_SECTION })
-export class SfLeaderboardFooterBlock extends LitElement implements FooterSectionHost {
-  static styles = [sfLeaderboardTheme, scss(styles)];
-
-  @property({ type: String })
-  text = '';
-
-  render() {
-    if (!this.text) return nothing;
-    return renderTemplate(this);
-  }
-}

package/src/components/sf-leaderboard/sections/header-section/header-section.host.ts

@@ -1,14 +0,0 @@
-import type { SfLeaderboardRefreshDetail } from '../../shared/types/events.js';
-import type { SfLeaderboardHeaderSection } from '../../shared/types/sections.js';
-
-export interface HeaderSectionHost {
-  section: SfLeaderboardHeaderSection;
-  refreshContext?: SfLeaderboardRefreshDetail;
-  showIcon: boolean;
-  showSubtitle: boolean;
-  showLive: boolean;
-  showBack: boolean;
-  backLabel: string;
-  isRefreshing: boolean;
-  onBackClick(): void;
-}

package/src/components/sf-leaderboard/sections/header-section/header-section.html

@@ -1,27 +0,0 @@
-<header class="header">
-  <div class="header-content">
-    <div class="logo-section">
-      <div class="logo-icon" ?hidden="${!host.showIcon}">${host.section.icon}</div>
-      <div class="logo-text">
-        <h1>${host.section.title}</h1>
-        <p ?hidden="${!host.showSubtitle}">${host.section.subtitle}</p>
-      </div>
-    </div>
-
-    <div class="header-actions">
-      <div class="live-badge" ?hidden="${!host.showLive}">
-        <span class="live-dot"></span>
-        Live
-      </div>
-      <button
-        type="button"
-        class="back-btn ${host.isRefreshing ? 'refreshing' : ''}"
-        ?hidden="${!host.showBack}"
-        @click="${host.onBackClick}"
-      >
-        <span class="icon" aria-hidden="true">←</span>
-        ${host.backLabel}
-      </button>
-    </div>
-  </div>
-</header>

package/src/components/sf-leaderboard/sections/header-section/header-section.scss

@@ -1,189 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-.header {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  backdrop-filter: blur(16px);
-  background: color-mix(in srgb, var(--background) 82%, transparent);
-  padding: 12px 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.header-content {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.logo-section {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.logo-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius);
-  background: var(--accent-soft);
-  border: 1px solid var(--surface-border-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  box-shadow: var(--surface-shadow-hover);
-}
-
-.logo-text h1 {
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin: 0;
-  text-shadow: var(--accent-text-glow);
-}
-
-.logo-text p {
-  font-size: 0.75rem;
-  color: var(--muted-foreground);
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.live-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 9999px;
-  border: 1px solid rgba(var(--success-rgb), 0.35);
-  background: rgba(var(--success-rgb), 0.08);
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--success);
-}
-
-.live-dot {
-  position: relative;
-  width: 8px;
-  height: 8px;
-  background: var(--success);
-  border-radius: 50%;
-}
-
-.live-dot::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  background: var(--success);
-  animation: ping 1.5s ease-out infinite;
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(2.5);
-    opacity: 0;
-  }
-}
-
-.back-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--surface-border-color);
-  background: var(--surface-gradient);
-  color: var(--foreground);
-  font-size: 0.875rem;
-  font-family: inherit;
-  cursor: pointer;
-  box-shadow: var(--surface-shadow);
-  transition: border-color var(--transition-fast),
-    box-shadow var(--transition-fast);
-}
-
-.back-btn:hover {
-  border-color: var(--surface-border-hover);
-  box-shadow: var(--surface-shadow-hover);
-}
-
-.back-btn .icon {
-  transition: transform 0.3s ease;
-}
-
-.back-btn.refreshing .icon {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (max-width: 639px) {
-  .header-content {
-    flex-wrap: wrap;
-    gap: 0.75rem;
-  }
-
-  .logo-section {
-    flex: 1 1 100%;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .logo-icon {
-    width: clamp(32px, 9vw, 40px);
-    height: clamp(32px, 9vw, 40px);
-    font-size: clamp(1rem, 4vw, 1.25rem);
-  }
-
-  .logo-text {
-    text-align: center;
-  }
-
-  .logo-text h1 {
-    text-align: center;
-    font-size: clamp(1rem, 4.5vw, 1.25rem);
-  }
-
-  .logo-text p {
-    display: none;
-  }
-
-  .header-actions {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .back-btn {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.8125rem;
-  }
-}
-
-@media (max-width: 380px) {
-  .live-badge {
-    font-size: 0.6875rem;
-    padding: 0.3rem 0.6rem;
-  }
-}

package/src/components/sf-leaderboard/sections/header-section/header-section.ts

@@ -1,70 +0,0 @@
-import { LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { Component } from '../../../../../lib/lit/component.js';
-import { scss } from '../../../../../lib/lit/scss.js';
-import {
-  DEFAULT_CATEGORY,
-  DEFAULT_TIMEFRAME,
-  SF_LEADERBOARD_HEADER_SECTION,
-} from '../../shared/constants/index.js';
-import { sfLeaderboardTheme } from '../../theme/styles.js';
-import { SF_LEADERBOARD_REFRESH } from '../../shared/types/events.js';
-import type { SfLeaderboardRefreshDetail } from '../../shared/types/events.js';
-import type { SfLeaderboardHeaderSection as HeaderSectionData } from '../../shared/types/sections.js';
-import type { HeaderSectionHost } from './header-section.host.js';
-import renderTemplate from './header-section.html?lit-html';
-import styles from './header-section.scss?inline';
-
-@Component({ selector: SF_LEADERBOARD_HEADER_SECTION })
-export class SfLeaderboardHeaderBlock extends LitElement implements HeaderSectionHost {
-  static styles = [sfLeaderboardTheme, scss(styles)];
-
-  @property({ attribute: false })
-  section!: HeaderSectionData;
-
-  @property({ attribute: false })
-  refreshContext?: SfLeaderboardRefreshDetail;
-
-  get showIcon(): boolean {
-    return Boolean(this.section?.icon);
-  }
-
-  get showSubtitle(): boolean {
-    return Boolean(this.section?.subtitle);
-  }
-
-  get showLive(): boolean {
-    return Boolean(this.section?.showLive);
-  }
-
-  get showBack(): boolean {
-    return this.section?.backButton != null;
-  }
-
-  get backLabel(): string {
-    return this.section?.backButton?.label ?? 'Back';
-  }
-
-  get isRefreshing(): boolean {
-    return this.section?.isRefreshing ?? false;
-  }
-
-  onBackClick() {
-    const ctx = this.refreshContext;
-    this.dispatchEvent(
-      new CustomEvent(SF_LEADERBOARD_REFRESH, {
-        detail: {
-          timeframe: ctx?.timeframe ?? DEFAULT_TIMEFRAME,
-          category: ctx?.category ?? DEFAULT_CATEGORY,
-        },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  render() {
-    if (!this.section) return nothing;
-    return renderTemplate(this);
-  }
-}

package/src/components/sf-leaderboard/sections/ranking-section/ranking-section.host.ts

@@ -1,22 +0,0 @@
-import type { Player } from '../../shared/types/data.js';
-import type { SfLeaderboardRankingSection } from '../../shared/types/sections.js';
-
-export interface RankingSectionHost {
-  ranking: SfLeaderboardRankingSection;
-  hasPair: boolean;
-  hasPodium: boolean;
-  hasPlayerStats: boolean;
-  podiumTitle: string;
-  podiumBadge: string;
-  showPodiumBadge: boolean;
-  podiumPlayers: Player[];
-  playerStatsTitle: string;
-  playerStatsRank: number;
-  playerStatsPercentile: number;
-  playerStatsUsername: string;
-  playerStatsEarnings: string;
-  playerStatsWinRate: number;
-  playerStatsGamesPlayed: number;
-  playerStatsWinStreak: number;
-  playerStatsLevel: number;
-}

package/src/components/sf-leaderboard/sections/ranking-section/ranking-section.html

@@ -1,38 +0,0 @@
-<section class="section ranking-section">
-  <div class="ranking-grid ${host.hasPair ? 'has-pair' : 'single'}">
-    <div
-      class="ranking-column ranking-column--podium"
-      ?hidden="${!host.hasPodium}"
-    >
-      <div class="section-header">
-        <h2 class="section-title">${host.podiumTitle}</h2>
-        <span class="elite-badge" ?hidden="${!host.showPodiumBadge}"
-          >${host.podiumBadge}</span
-        >
-      </div>
-      <div class="podium-slot">
-        <sf-leaderboard-podium
-          .players="${host.podiumPlayers}"
-        ></sf-leaderboard-podium>
-      </div>
-    </div>
-    <div
-      class="ranking-column ranking-column--player-stats"
-      ?hidden="${!host.hasPlayerStats}"
-    >
-      <div class="section-header">
-        <h2 class="section-title">${host.playerStatsTitle}</h2>
-      </div>
-      <sf-leaderboard-player-stats-card
-        rank="${host.playerStatsRank}"
-        percentile="${host.playerStatsPercentile}"
-        username="${host.playerStatsUsername}"
-        earnings="${host.playerStatsEarnings}"
-        winRate="${host.playerStatsWinRate}"
-        gamesPlayed="${host.playerStatsGamesPlayed}"
-        winStreak="${host.playerStatsWinStreak}"
-        level="${host.playerStatsLevel}"
-      ></sf-leaderboard-player-stats-card>
-    </div>
-  </div>
-</section>

package/src/components/sf-leaderboard/sections/ranking-section/ranking-section.scss

@@ -1,99 +0,0 @@
-@use '../../shared/styles/section';
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.ranking-section {
-  --ranking-podium-min-h: clamp(300px, min(36vh, 36dvh), 420px);
-  --ranking-player-stats-min-h: clamp(300px, min(36vh, 36dvh), 420px);
-}
-
-.ranking-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: clamp(0.75rem, 2vw, 1rem);
-  width: 100%;
-  align-items: stretch;
-}
-
-.ranking-grid.has-pair {
-  @media (min-width: 1080px) {
-    grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.82fr);
-    min-height: var(--ranking-podium-min-h);
-  }
-}
-
-.ranking-column {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-
-.ranking-column--player-stats {
-  min-height: var(--ranking-player-stats-min-h);
-
-  sf-leaderboard-player-stats-card {
-    flex: 1 1 auto;
-    width: 100%;
-    min-height: 0;
-  }
-}
-
-.podium-slot {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: var(--ranking-podium-min-h);
-  overflow: hidden;
-}
-
-.podium-slot > sf-leaderboard-podium {
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-}
-
-@media (max-width: 1079px) {
-  .ranking-section {
-    --ranking-podium-min-h: clamp(280px, min(38vh, 38dvh), 400px);
-    --ranking-player-stats-min-h: clamp(280px, min(34vh, 34dvh), 360px);
-  }
-}
-
-@media (min-width: 677px) and (max-width: 1079px) {
-  .ranking-section {
-    --ranking-player-stats-min-h: clamp(360px, min(42vh, 42dvh), 440px);
-  }
-}
-
-@media (max-width: 676px) {
-  .ranking-column--player-stats {
-    min-height: 0;
-    height: auto;
-  }
-}
-
-@media (min-width: 1280px) {
-  .ranking-section {
-    --ranking-podium-min-h: clamp(340px, min(38vh, 38dvh), 460px);
-    --ranking-player-stats-min-h: clamp(340px, min(38vh, 38dvh), 460px);
-  }
-}
-
-@media (max-width: 639px) {
-  .ranking-section {
-    --ranking-podium-min-h: clamp(280px, min(44dvh, 46vh), 360px);
-    --ranking-player-stats-min-h: clamp(240px, min(34dvh, 36vh), 288px);
-  }
-}
-
-@media (max-width: 380px) {
-  .ranking-section {
-    --ranking-podium-min-h: clamp(268px, 48dvh, 340px);
-    --ranking-player-stats-min-h: clamp(248px, 44dvh, 300px);
-  }
-}