@rimelight/ui 0.0.36 → 0.0.38

package/src/components/LighthouseScores.astro

@@ -1,204 +0,0 @@
----
-/**
- * LighthouseScores.astro
- * A callout component displaying perfect Lighthouse scores
- * Designed to match the authentic Lighthouse report aesthetic
- */
-export interface LighthouseScore {
-  label: string;
-  value: number;
-}
-
-export interface LighthouseScoresProps {
-  performance?: number;
-  accessibility?: number;
-  bestPractices?: number;
-  seo?: number;
-}
-
-const {
-  performance = 100,
-  accessibility = 100,
-  bestPractices = 100,
-  seo = 100,
-} = Astro.props;
-
-const scores = [
-  { label: 'Performance', value: performance },
-  { label: 'Accessibility', value: accessibility },
-  { label: 'Best Practices', value: bestPractices },
-  { label: 'SEO', value: seo },
-];
----
-
-<div class="lighthouse-container">
-  <!-- Header -->
-  <div class="mb-4xl text-center">
-    <h3 class="font-heading text-foreground text-3xl font-bold md:text-4xl">
-      Lighthouse Report
-    </h3>
-  </div>
-
-  <!-- Scores Grid -->
-  <div
-    class="lighthouse-scores mx-auto grid max-w-2xl grid-cols-2 gap-4xl sm:grid-cols-4"
-    role="list"
-    aria-label="Lighthouse scores"
-  >
-    {
-      scores.map((score) => {
-        const radius = 54;
-        const circumference = 2 * Math.PI * radius;
-        const offset = circumference - (score.value / 100) * circumference;
-        const color = score.value >= 90 ? "#0cce6b" : score.value >= 50 ? "#ffa400" : "#ff4e42";
-
-        return (
-          <div
-            class="lighthouse-score group flex flex-col items-center"
-            role="listitem"
-          >
-            <div class="relative">
-              <svg
-                class="lighthouse-gauge"
-                width="120"
-                height="120"
-                viewBox="0 0 120 120"
-                aria-hidden="true"
-                style="width: 96px; height: 96px;"
-              >
-                <style>
-                  @media (min-width: 640px) {
-                    .lighthouse-gauge {
-                      width: 112px !important;
-                      height: 112px !important;
-                    }
-                  }
-                  @media (min-width: 768px) {
-                    .lighthouse-gauge {
-                      width: 144px !important;
-                      height: 144px !important;
-                    }
-                  }
-                </style>
-                <circle
-                  cx="60"
-                  cy="60"
-                  r={radius}
-                  fill="none"
-                  stroke="#e0e0e0"
-                  stroke-width="8"
-                />
-                <circle
-                  cx="60"
-                  cy="60"
-                  r={radius}
-                  fill="none"
-                  stroke={color}
-                  stroke-width="8"
-                  stroke-linecap="round"
-                  stroke-dasharray={circumference}
-                  stroke-dashoffset={offset}
-                  class="lighthouse-progress"
-                  transform="rotate(-90 60 60)"
-                  style={`--target-offset: ${offset}`}
-                />
-                <text
-                  x="60"
-                  y="60"
-                  text-anchor="middle"
-                  dominant-baseline="central"
-                  class="lighthouse-number font-semibold font-sans"
-                  fill={color}
-                  style="font-size: 2rem;"
-                >
-                  {score.value}
-                </text>
-              </svg>
-            </div>
-
-            <span class="text-muted-foreground mt-2xl text-center text-sm font-medium">
-              {score.label}
-            </span>
-          </div>
-        );
-      })
-    }
-  </div>
-
-  <!-- Footer note -->
-  <p class="text-muted-foreground/60 mt-4xl text-center text-xs italic">
-    *Results represent the starting template. Changes to styling and features may affect final results.
-  </p>
-</div>
-
-<style>
-  /* Entrance animations */
-  .lighthouse-score {
-    animation: score-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
-  }
-
-  .lighthouse-progress {
-    animation: progress-fill 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
-  }
-
-  /* Staggered delays via nth-child to avoid inline style attributes */
-  .lighthouse-score:nth-child(1) { animation-delay: 100ms; }
-  .lighthouse-score:nth-child(2) { animation-delay: 180ms; }
-  .lighthouse-score:nth-child(3) { animation-delay: 260ms; }
-  .lighthouse-score:nth-child(4) { animation-delay: 340ms; }
-
-  .lighthouse-progress:nth-child(1) { animation-delay: 200ms; }
-  .lighthouse-progress:nth-child(2) { animation-delay: 280ms; }
-  .lighthouse-progress:nth-child(3) { animation-delay: 360ms; }
-  .lighthouse-progress:nth-child(4) { animation-delay: 440ms; }
-
-  @keyframes score-enter {
-    from {
-      opacity: 0;
-      transform: scale(0.9) translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-
-  @keyframes progress-fill {
-    from {
-      stroke-dashoffset: 339.292; /* Approximate circumference */
-    }
-    to {
-      stroke-dashoffset: var(--target-offset, 0);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .lighthouse-score,
-    .lighthouse-progress {
-      animation: none;
-    }
-
-    .lighthouse-progress {
-      stroke-dashoffset: 0;
-    }
-  }
-</style>
-
-<script>
-  // Run animations immediately
-  const initLighthouse = () => {
-    const scoresContainer = document.querySelector('.lighthouse-scores');
-    if (scoresContainer) {
-      const elements = scoresContainer.querySelectorAll<HTMLElement>('.lighthouse-score, .lighthouse-progress');
-      elements.forEach((el) => {
-        el.style.animationPlayState = 'running';
-      });
-    }
-  };
-
-  // Run on initial load
-  initLighthouse();
-
-  // Run on View Transitions navigate
-  document.addEventListener('astro:after-swap', initLighthouse);
-</script>

package/src/components/astro/RLA3dHover.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ThreeDHoverProps } from "../../types"
-import hover3dThemeDefault, { create3dHoverTheme } from "../../themes/3d-hover.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const hover3dTheme = uiConfig.colors ? create3dHoverTheme() : hover3dThemeDefault
-
-const hover3d = scv(hover3dTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ThreeDHoverProps
-
-const classes = resolveClasses(hover3d, {}, useUi("3dHover", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAAccordion.astro

@@ -1,94 +0,0 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AccordionProps } from "../../types"
-import accordionThemeDefault, { createAccordionTheme } from "../../themes/accordion.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const accordionTheme = uiConfig.colors ? createAccordionTheme() : accordionThemeDefault
-const accordion = scv(accordionTheme)
-
-const {
-  items,
-  summary,
-  multiple = false,
-  trailingIcon = "i-lucide-chevron-down",
-  disabled = false,
-  name,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AccordionProps
-
-const classes = resolveClasses(accordion, {
-  disabled
-}, useUi("accordion", uiProp), className)
-
-// Generate a unique name for HTML details grouping if single-open mode (multiple=false) is active
-const groupName = name || (!multiple ? `accordion-${Math.random().toString(36).substring(2, 9)}` : undefined)
----
-
-{items ? (
-  <div class={classes.root} data-slot="root" {...rest}>
-    {items.map((item) => {
-      const itemDisabled = disabled || item.disabled
-      const itemTrailingIcon = item.trailingIcon || trailingIcon
-      
-      return (
-        <details 
-          class={classes.item} 
-          data-slot="item" 
-          name={groupName}
-        >
-          <summary 
-            class={cx(classes.trigger, itemDisabled && "pointer-events-none opacity-50 select-none")} 
-            data-slot="trigger"
-          >
-            {item.icon && (
-              <span class={classes.leadingIcon} data-slot="leading-icon">
-                <span class={cx(item.icon)} aria-hidden="true" />
-              </span>
-            )}
-            
-            <span class={classes.label} data-slot="label">
-              {item.label}
-            </span>
-
-            {itemTrailingIcon && (
-              <span class={classes.trailingIcon} data-slot="trailing-icon">
-                <span class={cx(itemTrailingIcon)} aria-hidden="true" />
-              </span>
-            )}
-          </summary>
-
-          <div class={classes.content} data-slot="content">
-            <div class={classes.body} data-slot="body">
-              {item.content}
-            </div>
-          </div>
-        </details>
-      )
-    })}
-  </div>
-) : (
-  <details class:list={[classes.root, classes.item]} data-slot="root" name={name} {...rest}>
-    <summary 
-      class={cx(classes.trigger, disabled && "pointer-events-none opacity-50 select-none")} 
-      data-slot="trigger"
-    >
-      <span class={classes.label} data-slot="label">{summary}</span>
-      {trailingIcon && (
-        <span class={classes.trailingIcon} data-slot="trailing-icon">
-          <span class={cx(trailingIcon)} aria-hidden="true" />
-        </span>
-      )}
-    </summary>
-
-    <div class={classes.content} data-slot="content">
-      <div class={classes.body} data-slot="body">
-        <slot />
-      </div>
-    </div>
-  </details>
-)}

package/src/components/astro/RLAApp.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AppProps } from "../../types"
-import appThemeDefault, { createAppTheme } from "../../themes/app.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const appTheme = uiConfig.colors ? createAppTheme() : appThemeDefault
-
-const app = scv(appTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AppProps
-
-const classes = resolveClasses(app, {}, useUi("app", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAAspectRatio.astro

@@ -1,27 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AspectRatioProps } from "../../types"
-import aspectRatioThemeDefault, { createAspectRatioTheme } from "../../themes/aspect-ratio.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const aspectRatioTheme = uiConfig.colors ? createAspectRatioTheme() : aspectRatioThemeDefault
-
-const aspectRatio = scv(aspectRatioTheme)
-
-const {
-  ratio = 1,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AspectRatioProps
-
-const classes = resolveClasses(aspectRatio, {}, useUi("aspectRatio", uiProp), className)
----
-<div class:list={[classes.root]} data-slot="root" {...rest}>
-  <svg viewBox={`0 0 100 ${(1 / ratio) * 100}`} class="w-full h-auto pointer-events-none block" aria-hidden="true"></svg>
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>

package/src/components/astro/RLAAudio.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AudioProps } from "../../types"
-import audioThemeDefault, { createAudioTheme } from "../../themes/audio.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const audioTheme = uiConfig.colors ? createAudioTheme() : audioThemeDefault
-
-const audio = scv(audioTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AudioProps
-
-const classes = resolveClasses(audio, {}, useUi("audio", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAAvatar.astro

@@ -1,135 +0,0 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarProps } from "../../types"
-import avatarThemeDefault, { createAvatarTheme } from "../../themes/avatar.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const avatarTheme = uiConfig.colors ? createAvatarTheme(uiConfig.colors) : avatarThemeDefault
-
-const avatar = scv(avatarTheme)
-
-const {
-  src,
-  alt = "",
-  fallback,
-  initials,
-  title,
-  subtitle,
-  label,
-  size = "md",
-  badge = false,
-  badgeColor = "success",
-  badgePosition = "bottom-right",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarProps & {
-  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
-  badgeColor?: string
-}
-
-const classes = resolveClasses(avatar, {
-  size,
-  color: (Astro.props.color || "neutral") as "neutral",
-  badgePosition: badgePosition as "bottom-right"
-}, useUi("avatar", uiProp), className)
-
-const avatarFallback = fallback || initials
-const hasTextLayout = !!(title || subtitle)
----
-{hasTextLayout ? (
-  <div class="flex items-center gap-3" data-slot="profile-wrapper">
-    <span
-      class={classes.root}
-      data-slot="root"
-      aria-label={label || title}
-      role={label || title ? "img" : undefined}
-      {...rest}
-    >
-      <slot>
-        {src ? (
-          <img
-            src={src}
-            alt={alt}
-            class={classes.image}
-            data-slot="image"
-          />
-        ) : (
-          <span class={classes.fallback} data-slot="fallback">
-            <slot name="fallback">
-              {avatarFallback}
-            </slot>
-            {!avatarFallback && !Astro.slots.has("fallback") && (
-              <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
-            )}
-          </span>
-        )}
-      </slot>
-
-      <slot name="badge">
-        {badge && (
-          <span
-            class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
-            data-slot="badge"
-          >
-            {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
-          </span>
-        )}
-      </slot>
-    </span>
-    <div class="flex flex-col leading-tight">
-      {title && (
-        <span class="font-medium text-sm text-[var(--foreground)]" data-slot="title">
-          {title}
-        </span>
-      )}
-      {subtitle && (
-        <span class="text-xs text-[var(--muted-foreground)]" data-slot="subtitle">
-          {subtitle}
-        </span>
-      )}
-    </div>
-  </div>
-) : (
-  <span
-    class={classes.root}
-    data-slot="root"
-    aria-label={label}
-    role={label ? "img" : undefined}
-    {...rest}
-  >
-    <slot>
-      {src ? (
-        <img
-          src={src}
-          alt={alt}
-          class={classes.image}
-          data-slot="image"
-        />
-      ) : (
-        <span class={classes.fallback} data-slot="fallback">
-          <slot name="fallback">
-            {avatarFallback}
-          </slot>
-          {!avatarFallback && !Astro.slots.has("fallback") && (
-            <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
-          )}
-        </span>
-      )}
-    </slot>
-
-    <slot name="badge">
-      {badge && (
-        <span
-          class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
-          data-slot="badge"
-        >
-          {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
-        </span>
-      )}
-    </slot>
-  </span>
-)}
-

package/src/components/astro/RLAAvatarGroup.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarGroupProps } from "../../types"
-import avatarGroupThemeDefault, { createAvatarGroupTheme } from "../../themes/avatar-group.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const avatarGroupTheme = uiConfig.colors ? createAvatarGroupTheme() : avatarGroupThemeDefault
-
-const avatarGroup = scv(avatarGroupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarGroupProps
-
-const classes = resolveClasses(avatarGroup, {}, useUi("avatarGroup", uiProp), className)
----
-<div class={classes.root} data-slot="avatar-group" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLABadge.astro

@@ -1,36 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BadgeProps } from "../../types"
-import badgeThemeDefault, { createBadgeTheme } from "../../themes/badge.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const badgeTheme = uiConfig.colors ? createBadgeTheme(uiConfig.colors) : badgeThemeDefault
-const badge = scv(badgeTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  shape = "pill",
-  label,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BadgeProps & { label?: string }
-
-const resolvedVariant = (variant === "ghost") ? "soft" : ((variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid")
-
-const classes = resolveClasses(badge, {
-  variant: resolvedVariant as "solid",
-  color: color as "neutral",
-  size,
-  shape,
-  theme
-}, useUi("badge", uiProp), className)
----
-<span class={classes.root} data-slot="root" {...rest}>
-  <slot>{label}</slot>
-</span>