@rimelight/ui 0.0.4 → 0.0.6

package/src/components/embeds/YoutubeEmbed.astro

@@ -1,94 +0,0 @@
----
-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

@@ -1,166 +0,0 @@
----
-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

@@ -1,62 +0,0 @@
----
-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

@@ -1,46 +0,0 @@
----
-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

@@ -1,25 +0,0 @@
----
-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

@@ -1,27 +0,0 @@
----
-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

@@ -1,28 +0,0 @@
----
-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

@@ -1,76 +0,0 @@
----
-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

@@ -1,36 +0,0 @@
----
-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

@@ -1,18 +0,0 @@
----
-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

@@ -1,17 +0,0 @@
----
-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

@@ -1,22 +0,0 @@
----
-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"
-/>
-