@rimelight/ui 0.0.1

package/src/components/embeds/YoutubeEmbed.astro

@@ -0,0 +1,94 @@
+---
+import { getYoutubeEmbedUrl, getYoutubeThumbnail } from "../../utils";
+import { Image } from "astro:assets";
+import IconCirclePlay from "~icons/lucide/circle-play";
+
+export interface YoutubeEmbedProps {
+  src: string;
+  title?: string;
+  class?: string;
+}
+type Props = YoutubeEmbedProps;
+
+const { src, title = "YouTube video player", class: className } = Astro.props;
+
+const embedUrl = getYoutubeEmbedUrl(src);
+const thumbnail = await getYoutubeThumbnail(src);
+const isPlayable = Boolean(embedUrl);
+const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable";
+---
+
+<div class:list={["group relative aspect-video h-full w-full cursor-pointer overflow-hidden", className]} data-youtube-video>
+  <button
+    type="button"
+    class="absolute inset-0 aspect-video h-full w-full overflow-hidden"
+    data-youtube-trigger
+    aria-label={ariaLabel}
+    data-embed-url={isPlayable ? embedUrl : undefined}
+    disabled={!isPlayable}
+    data-video-title={title}
+  >
+    <Image
+      layout="full-width"
+      src={thumbnail}
+      width={1280}
+      height={720}
+      class="h-full w-full object-cover"
+      alt={title}
+    />
+  </button>
+
+  <div 
+    class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20"
+    style="width: 80px; height: 80px;"
+  >
+    <IconCirclePlay 
+      class="w-full h-full op-80 group-hover:op-100 text-white transition-all" 
+    />
+  </div>
+</div>
+
+<script>
+  const setupYoutubeEmbeds = () => {
+    document.querySelectorAll("[data-youtube-video]").forEach((root) => {
+      // Avoid duplicated listeners
+      if (root.getAttribute("data-hydrated") === "true") return;
+
+      const trigger = root.querySelector("[data-youtube-trigger]");
+      if (!(trigger instanceof HTMLButtonElement)) return;
+
+      const embedUrl = trigger.dataset.embedUrl;
+      const title = trigger.dataset.videoTitle;
+      if (!embedUrl) return;
+
+      const activate = () => {
+        const iframe = document.createElement("iframe");
+        iframe.src = embedUrl;
+        iframe.title = title || "YouTube video player";
+        iframe.allow =
+          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+        iframe.allowFullscreen = true;
+        iframe.loading = "lazy";
+        iframe.referrerPolicy = "strict-origin-when-cross-origin";
+        iframe.classList.add("w-full", "h-full", "absolute", "inset-0");
+
+        root.replaceChildren(iframe);
+      };
+
+      // click and accessibility activation
+      trigger.addEventListener("click", activate, { once: true });
+      trigger.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          activate();
+        }
+      }, { once: true });
+
+      root.setAttribute("data-hydrated", "true");
+    });
+  };
+
+  // Run on initial load and view transitions
+  setupYoutubeEmbeds();
+  document.addEventListener("astro:after-swap", setupYoutubeEmbeds);
+</script>

package/src/components/hero/Hero.astro

@@ -0,0 +1,166 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+import type { button } from "../button/Button.astro";
+import Button from "../button/Button.astro";
+
+export interface HeroAction {
+  text: string;
+  href: string;
+  variant?: NonNullable<Parameters<typeof button>[0]>["variant"];
+  icon?: any;
+}
+
+export interface HeroProps extends HTMLAttributes<"section">, NonNullable<Parameters<typeof heroVariants>[0]> {
+  /** Main title text */
+  title?: string;
+  /** Description text */
+  description?: string;
+  /** Action buttons */
+  actions?: HeroAction[];
+}
+
+type Props = HeroProps;
+
+const heroVariants = cv({
+  base: "container py-5xl",
+
+  variants: {
+    orientation: {
+      vertical: "flex flex-col gap-2xl items-center",
+      horizontal: "flex flex-col gap-2xl items-center lg:grid lg:grid-cols-2 lg:items-center lg:gap-4xl",
+    },
+    alignment: {
+      left: "text-start items-start",
+      center: "text-center items-center",
+      right: "text-end items-end",
+    },
+    inverted: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      inverted: false,
+      className: "flex-col-reverse",
+    },
+    {
+      orientation: "vertical",
+      inverted: true,
+      className: "flex-col",
+    },
+    {
+      orientation: "horizontal",
+      inverted: false,
+      className: "lg:[&_.hero-content-wrapper]:order-1 lg:[&_.hero-content]:order-2",
+    },
+    {
+      orientation: "horizontal",
+      inverted: true,
+      className: "lg:[&_.hero-content]:order-1 lg:[&_.hero-content-wrapper]:order-2",
+    },
+    {
+      orientation: "horizontal",
+      className: "[&_.hero-content]:text-start [&_.hero-content]:items-start lg:text-start lg:items-start",
+    },
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    alignment: "center",
+    inverted: false,
+  },
+});
+
+const {
+  title,
+  description,
+  actions = [],
+  orientation = "vertical",
+  alignment = "center",
+  inverted = false,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const effectiveAlignment = orientation === "horizontal" ? "left" : alignment;
+---
+
+<section class="relative w-full overflow-hidden" {...rest}>
+  <div class="absolute inset-0 -z-10" aria-hidden="true">
+    <slot name="bg" />
+  </div>
+
+  <div class:list={[heroVariants({ orientation, alignment, inverted }), className]}>
+    <div
+      class:list={[
+        "hero-content-wrapper flex flex-col w-full",
+        orientation === "vertical" && [
+          effectiveAlignment === "center" && "mx-auto",
+          effectiveAlignment === "left" && "mr-auto",
+          effectiveAlignment === "right" && "ml-auto",
+        ],
+        effectiveAlignment === "center" && "text-center items-center",
+        effectiveAlignment === "left" && "text-start items-start",
+        effectiveAlignment === "right" && "text-end items-end",
+      ]}
+      data-slot="main"
+    >
+      {
+        title && (
+          <h1 class="font-heading text-4xl font-bold tracking-tight text-pretty lg:text-5xl xl:text-6xl">
+            {title}
+          </h1>
+        )
+      }
+      {
+        description && (
+          <p class="text-muted-foreground mt-xl text-pretty lg:text-lg">
+            {description}
+          </p>
+        )
+      }
+      {
+        actions.length > 0 && (
+          <div
+            class:list={[
+              "mt-2xl flex w-full flex-wrap gap-xs md:w-fit",
+              effectiveAlignment === "center" && "justify-center mx-auto",
+              effectiveAlignment === "left" && "justify-start",
+              effectiveAlignment === "right" && "justify-end md:ml-auto",
+            ]}
+          >
+            {actions.map(({ text, href, variant, icon: Icon }) => (
+              <Button variant={variant} class="group w-full md:w-auto" href={href}>
+                {text}
+                {Icon && (
+                  <Icon class="transition-transform group-hover:translate-x-5xs" />
+                )}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+
+    {
+      Astro.slots.has("content") && (
+        <div 
+          class:list={[
+            "hero-content w-full flex",
+            effectiveAlignment === "center" && "justify-center",
+            effectiveAlignment === "left" && "justify-start",
+            effectiveAlignment === "right" && "justify-end",
+          ]} 
+          data-slot="content"
+        >
+          <slot name="content" />
+        </div>
+      )
+    }
+  </div>
+</section>
+
+

package/src/components/icons/Flag.astro

@@ -0,0 +1,62 @@
+---
+import IconGlobe from "~icons/lucide/globe"
+import FlagUS from "~icons/flag/us-4x3"
+import FlagDE from "~icons/flag/de-4x3"
+import FlagES from "~icons/flag/es-4x3"
+import FlagJP from "~icons/flag/jp-4x3"
+import FlagBR from "~icons/flag/br-4x3"
+
+import type { FlagCode } from '../../domain/i18n/flags'
+
+const FLAG_COMPONENTS: Record<string, any> = {
+  // Legacy short codes
+  us: FlagUS,
+  de: FlagDE,
+  es: FlagES,
+  jp: FlagJP,
+  br: FlagBR,
+
+  // Full library codes
+  'us-4x3': FlagUS,
+  'de-4x3': FlagDE,
+  'es-4x3': FlagES,
+  'jp-4x3': FlagJP,
+  'br-4x3': FlagBR,
+}
+
+export interface FlagProps {
+  code: FlagCode | string | null;
+  size?: number;
+  title?: string;
+  class?: string;
+  [key: string]: any;
+}
+type Props = FlagProps;
+
+const { code, size = 16, title, class: className, ...rest } = Astro.props
+const Svg = code ? FLAG_COMPONENTS[code] : undefined
+---
+
+{
+  Svg ? (
+    <Svg
+      width={size}
+      height={size}
+      class={className}
+      aria-hidden={title ? 'false' : 'true'}
+      role={title ? 'img' : 'presentation'}
+      {...rest}
+    >
+      {title && <title>{title}</title>}
+    </Svg>
+  ) : (
+    <IconGlobe
+      width={size}
+      height={size}
+      aria-hidden={title ? undefined : true}
+      role={title ? 'img' : 'presentation'}
+      class={className}
+      {...rest}
+    />
+  )
+}

package/src/components/image/ExtendedImage.astro

@@ -0,0 +1,46 @@
+---
+import type { ComponentProps } from "astro/types";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import Image from "./Image.astro";
+
+type Props = ComponentProps<typeof Image> & {
+  darkSrc?: any;
+};
+
+const { src, darkSrc, class: className, ...rest } = Astro.props;
+
+const isSvg = (source: any) => {
+  if (!source) return false;
+  const url = typeof source === 'string' ? source : (source.src || '');
+  if (!url) return false;
+  return url.split('?')[0].toLowerCase().endsWith('.svg') || source.format === 'svg';
+};
+
+const getSrc = (source: any) => {
+  if (typeof source === 'string') return source;
+  return source?.src || source;
+};
+---
+
+{
+  darkSrc ? (
+    <div class="contents group/extended-image">
+      {isSvg(src) ? (
+        <img src={getSrc(src)} class:list={[className, "dark:hidden"]} {...(rest as any)} />
+      ) : (
+        <Image src={src} class:list={[className, "dark:hidden"]} {...(rest as any)} />
+      )}
+      {isSvg(darkSrc) ? (
+        <img src={getSrc(darkSrc)} class:list={[className, "hidden dark:block"]} {...(rest as any)} />
+      ) : (
+        <Image src={darkSrc} class:list={[className, "hidden dark:block"]} {...(rest as any)} />
+      )}
+    </div>
+  ) : isSvg(src) ? (
+    <img src={getSrc(src)} class={className} {...(rest as any)} />
+  ) : (
+    <Image src={src} class={className} {...(rest as any)} />
+  )
+}
+
+

package/src/components/image/Image.astro

@@ -0,0 +1,25 @@
+---
+import type { ComponentProps } from "astro/types";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import { Image as AstroImage } from "astro:assets";
+import { cv } from "css-variants";
+
+export const image = cv({ base: "starwind-image" });
+
+type Props = Partial<ComponentProps<typeof AstroImage>> & { inferSize?: boolean };
+
+const { class: className, src, alt = "", inferSize = true, ...rest } = Astro.props;
+---
+
+{
+  src && (
+    <AstroImage
+      class:list={[image(), className]}
+      src={src}
+      alt={alt}
+      inferSize={inferSize}
+      {...(rest as any)}
+      data-slot="image"
+    />
+  )
+}

package/src/components/input/Input.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"input"> & VariantProps<typeof input>;
+
+export const input = cv({
+  base: [
+    "border-input dark:bg-input/30 text-foreground w-full rounded-md b bg-transparent shadow-xs",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
+    "file:text-foreground file:my-auto file:mr-3xs file:h-full file:border-0 file:bg-transparent file:text-sm file:font-medium",
+    "disabled:cursor-not-allowed disabled:op-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+    "peer placeholder:text-muted-foreground",
+  ],
+  variants: {
+    size: { sm: "h-2xl px-3xs text-sm", md: "h-3xl px-xs text-base", lg: "h-3xl px-2xl text-lg" },
+  },
+  defaultVariants: { size: "md" },
+});
+
+const { size, class: className, ...rest } = Astro.props;
+---
+
+<input class:list={[input({ size }), className]} {...rest} data-slot="input" />

package/src/components/input-group/InputGroup.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const inputGroup = cv({
+  base: [
+    "border-input dark:bg-input/30 group/input-group relative flex h-11 w-full min-w-0 items-center rounded-lg b transition-colors outline-none",
+    "has-[[data-slot=input-group-control]:focus-visible]:border-outline has-[[data-slot=input-group-control]:focus-visible]:ring-outline/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3",
+    "has-[[data-slot][aria-invalid=true]]:border-error has-[[data-slot][aria-invalid=true]]:ring-error/40 has-[[data-slot][aria-invalid=true]]:ring-3",
+    "has-disabled:bg-input/50 has-disabled:op-50",
+    "has-[>textarea]:h-auto",
+    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
+    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col",
+    "has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3",
+    "has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3",
+    "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-1.5",
+    "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-1.5",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div role="group" class:list={[inputGroup(), className]} {...rest} data-slot="input-group">
+  <slot />
+</div>

package/src/components/input-group/InputGroupAddon.astro

@@ -0,0 +1,76 @@
+---
+import { cv } from "css-variants";
+
+export const inputGroupAddon = cv({
+  base: [
+    "text-muted-foreground flex cursor-text items-center justify-center gap-md text-sm font-medium select-none",
+    "group-data-[disabled=true]/input-group:op-50 [&>kbd]:rounded-xs [&>svg:not([class*='size-'])]:size-4",
+  ],
+  variants: {
+    align: {
+      "inline-start": "order-first pl-2.5 has-[>button]:ml-[-0.3rem]",
+      "inline-end": "order-last pr-2.5 has-[>button]:mr-[-0.3rem]",
+      "block-start":
+        "order-first w-full justify-start px-3 pt-2 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-2.5",
+      "block-end":
+        "order-last w-full justify-start px-3 pb-2 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-2.5",
+    },
+  },
+  defaultVariants: {
+    align: "inline-start",
+  },
+});
+
+const { align, class: className, ...rest } = Astro.props;
+---
+
+<div
+  role="group"
+  data-align={align}
+  class:list={[inputGroupAddon({ align }), className]}
+  {...rest}
+  data-slot="input-group-addon"
+>
+  <slot />
+</div>
+
+<script>
+  class InputGroupAddonHandler {
+    private addon: HTMLElement;
+
+    constructor(addon: HTMLElement) {
+      this.addon = addon;
+      this.setupEventListeners();
+    }
+
+    private setupEventListeners(): void {
+      this.addon.addEventListener("click", (e) => this.handleClick(e));
+    }
+
+    private handleClick(e: MouseEvent): void {
+      if ((e.target as HTMLElement).closest("button")) return;
+
+      const input = this.addon.parentElement?.querySelector("input, textarea") as
+        | HTMLInputElement
+        | HTMLTextAreaElement;
+
+      if (input) {
+        input.focus();
+      }
+    }
+  }
+
+  const addonInstances = new WeakMap<HTMLElement, InputGroupAddonHandler>();
+
+  const setupAddons = () => {
+    document.querySelectorAll<HTMLElement>('[data-slot="input-group-addon"]').forEach((addon) => {
+      if (!addonInstances.has(addon)) {
+        addonInstances.set(addon, new InputGroupAddonHandler(addon));
+      }
+    });
+  };
+
+  setupAddons();
+  document.addEventListener("astro:after-swap", setupAddons);
+  document.addEventListener("starwind:init", setupAddons);
+</script>

package/src/components/input-group/InputGroupButton.astro

@@ -0,0 +1,36 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Button from "../button/Button.astro";
+
+type Props = Omit<ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButton>;
+
+export const inputGroupButton = cv({
+  base: "gap-3xs rounded-sm shadow-none",
+  variants: {
+    size: {
+      sm: "h-8 px-2",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+
+const { type = "button", variant = "ghost", size, class: className, ...rest } = Astro.props;
+---
+
+<Button
+  type={type}
+  data-size={size}
+  class:list={[inputGroupButton({ size: size as "sm" }), className]}
+  {...rest}
+>
+  <slot />
+</Button>
+

package/src/components/input-group/InputGroupInput.astro

@@ -0,0 +1,18 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Input from "../input/Input.astro";
+
+type Props = ComponentProps<typeof Input>;
+
+export const inputGroupInput = cv({
+  base: "h-full flex-1 rounded-none border-0 shadow-none ring-0 outline-none focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Input class:list={[inputGroupInput(), className]} {...rest} data-slot="input-group-control" />
+

package/src/components/input-group/InputGroupText.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"span">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  class:list={[
+    "text-muted-foreground flex items-center gap-md text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.5",
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</span>

package/src/components/input-group/InputGroupTextarea.astro

@@ -0,0 +1,22 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Textarea from "../textarea/Textarea.astro";
+
+type Props = ComponentProps<typeof Textarea>;
+
+export const inputGroupTextarea = cv({
+  base: "h-full flex-1 resize-none rounded-none border-0 shadow-none ring-0 outline-none focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Textarea
+  class:list={[inputGroupTextarea(), className]}
+  {...rest}
+  data-slot="input-group-control"
+/>
+