@rimelight/ui 0.0.1

package/src/components/alert-dialog/AlertDialogTrigger.astro

@@ -0,0 +1,47 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"button"> & {
+  /**
+   * When true, the component will render its child element with a simple wrapper instead of a button component
+   */
+  asChild?: boolean;
+  /**
+   * Optional ID of the dialog to trigger. If not provided and the trigger is inside a Dialog component,
+   * it will automatically target that dialog. Required when used outside a Dialog component.
+   */
+  for?: string;
+};
+
+const { class: className, asChild = false, for: dialogFor, ...rest } = Astro.props;
+
+// Get the first child element if asChild is true
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+  hasChildren = true;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class:list={["starwind-alert-dialog-trigger", className]}
+      data-slot="alert-dialog-trigger"
+      data-dialog-for={dialogFor}
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      type="button"
+      aria-haspopup="dialog"
+      class:list={["starwind-alert-dialog-trigger", className]}
+      data-dialog-for={dialogFor}
+      {...rest}
+      data-slot="alert-dialog-trigger"
+    >
+      <slot />
+    </button>
+  )
+}

package/src/components/aspect-ratio/AspectRatio.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types";
+import { cv } from "css-variants";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  /**
+   * The aspect ratio of the container (e.g., 16/9, 4/3, 1)
+   * @default 1
+   */
+  ratio?: number;
+};
+
+export const aspectRatioWrapper = cv({
+  base: "relative w-full",
+});
+
+export const aspectRatio = cv({
+  base: "absolute inset-0",
+});
+
+const { ratio = 1, class: className, as: Tag = "div", ...rest } = Astro.props;
+---
+
+<div
+  class={aspectRatioWrapper()}
+  style={`padding-bottom: ${100 / ratio}%`}
+  data-slot="aspect-ratio-wrapper"
+>
+  <Tag class:list={[aspectRatio(), className]} data-slot="aspect-ratio" {...rest}>
+    <slot />
+  </Tag>
+</div>

package/src/components/avatar/Avatar.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+interface Props extends HTMLAttributes<"div">, NonNullable<Parameters<typeof avatar>[0]> {}
+
+export const avatar = cv({
+  base: "text-foreground bg-muted relative overflow-hidden rounded-full border-2",
+  variants: {
+    variant: {
+      default: "border-border",
+      primary: "border-primary",
+      secondary: "border-secondary",
+      info: "border-info",
+      success: "border-success",
+      warning: "border-warning",
+      error: "border-error",
+    },
+    size: { sm: "h-2xl w-2xl text-xs", md: "h-3xl w-3xl text-sm", lg: "h-3xl w-3xl text-base" },
+  },
+  defaultVariants: { variant: "default", size: "md" },
+});
+
+const { variant, size, class: className, ...rest } = Astro.props;
+---
+
+<figure class:list={[avatar({ variant, size }), className]} {...rest} data-slot="avatar">
+  <slot />
+</figure>

package/src/components/avatar/AvatarFallback.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export const avatarFallback = cv({
+  base: "absolute inset-0.5 flex items-center justify-center rounded-full font-medium",
+});
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[avatarFallback(), className]} {...rest} data-slot="avatar-fallback">
+  <slot />
+</div>

package/src/components/avatar/AvatarImage.astro

@@ -0,0 +1,66 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { Image } from "astro:assets";
+import { cv } from "css-variants";
+
+export const avatarImage = cv({ base: "relative z-1 h-full w-full object-cover" });
+
+type BaseProps = { alt: string; class?: string };
+
+type WithSrc = BaseProps & { src: string; image?: never };
+
+type WithImage = BaseProps & { src?: never; image: ImageMetadata };
+
+type Props = HTMLAttributes<"img"> & (WithSrc | WithImage);
+
+const { src, image, alt, class: className, width, height, ...rest } = Astro.props;
+
+if (!src && !image) {
+  throw new Error("Either 'src' or 'image' is required for an avatar image.");
+}
+---
+
+{
+  src && (
+    // eslint-disable-next-line astro/jsx-a11y/no-noninteractive-element-interactions
+    <img
+      src={src}
+      alt={alt}
+      class:list={[avatarImage(), className]}
+      width={64}
+      height={64}
+      {...rest}
+      data-slot="avatar-image"
+    />
+  )
+}
+{
+  image && (
+    <Image
+      src={image}
+      alt={alt}
+      class:list={[avatarImage(), className]}
+      width={64}
+      {...rest}
+      data-slot="avatar-image"
+    />
+  )
+}
+
+<script>
+  const handleImageError = (event: Event) => {
+    const target = event.target as HTMLImageElement;
+    if (target) {
+      target.style.display = "none";
+    }
+  };
+
+  const setupAvatarErrors = () => {
+    document.querySelectorAll('[data-slot="avatar-image"]').forEach((img) => {
+      img.addEventListener("error", handleImageError);
+    });
+  };
+
+  setupAvatarErrors();
+  document.addEventListener("astro:after-swap", setupAvatarErrors);
+</script>

package/src/components/badge/Badge.astro

@@ -0,0 +1,57 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface BadgeProps
+  extends HTMLAttributes<"div">, Omit<HTMLAttributes<"a">, "type">, NonNullable<Parameters<typeof badge>[0]> {}
+
+type Props = BadgeProps;
+
+export const badge = cv({
+  base: [
+    "starwind-badge inline-flex items-center gap-4xs rounded-full font-medium ws-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-all outline-none focus-visible:ring-3",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+  ],
+  variants: {
+    variant: {
+      default: "bg-foreground text-background focus-visible:ring-outline/50",
+      primary: "bg-primary text-primary-foreground focus-visible:ring-primary/50",
+      secondary: "bg-secondary text-secondary-foreground focus-visible:ring-secondary/50",
+      outline: "border-border focus-visible:border-outline focus-visible:ring-outline/50 b",
+      ghost: "bg-foreground/10 text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground focus-visible:ring-info/50",
+      success: "bg-success text-success-foreground focus-visible:ring-success/50",
+      warning: "bg-warning text-warning-foreground focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground focus-visible:ring-error/50",
+    },
+    size: {
+      sm: "px-2xs py-6xs text-xs [&_svg:not([class*='size-'])]:size-3",
+      md: "px-xs py-6xs text-sm [&_svg:not([class*='size-'])]:size-4",
+      lg: "px-2xl py-5xs text-base [&_svg:not([class*='size-'])]:size-4.5",
+    },
+    isLink: { true: "cursor-pointer", false: "" },
+  },
+  compoundVariants: [
+    { isLink: true, variant: "default", className: "hover:bg-foreground/80" },
+    { isLink: true, variant: "primary", className: "hover:bg-primary/80" },
+    { isLink: true, variant: "secondary", className: "hover:bg-secondary/80" },
+    { isLink: true, variant: "outline", className: "hover:border-border/80" },
+    { isLink: true, variant: "ghost", className: "hover:bg-foreground/7" },
+    { isLink: true, variant: "info", className: "hover:bg-info/80" },
+    { isLink: true, variant: "success", className: "hover:bg-success/80" },
+    { isLink: true, variant: "warning", className: "hover:bg-warning/80" },
+    { isLink: true, variant: "error", className: "hover:bg-error/80" },
+  ],
+  defaultVariants: { variant: "default", size: "md", isLink: false },
+});
+
+const { variant, size, class: className, ...rest } = Astro.props;
+const isLink = !!Astro.props.href;
+const Tag = Astro.props.href ? "a" : "div";
+---
+
+<Tag class:list={[badge({ variant, size, isLink }), className]} data-slot="badge" {...rest}>
+  <slot />
+</Tag>

package/src/components/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+export interface BreadcrumbProps extends HTMLAttributes<"nav"> {}
+type Props = BreadcrumbProps;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<nav aria-label="breadcrumb" class={className} {...rest} data-slot="breadcrumb">
+  <slot />
+</nav>

package/src/components/breadcrumb/BreadcrumbEllipsis.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+
+export interface BreadcrumbEllipsisProps extends HTMLAttributes<"span"> {}
+type Props = BreadcrumbEllipsisProps;
+
+export const breadcrumbEllipsis = cv({
+  base: "flex size-6 items-center justify-center [&>svg]:size-4",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  role="presentation"
+  aria-hidden="true"
+  class:list={[breadcrumbEllipsis(), className]}
+  {...rest}
+  data-slot="breadcrumb-ellipsis"
+>
+  <slot name="icon">
+    <IconMoreHorizontal />
+  </slot>
+  <slot>
+    <span class="sr-only">More</span>
+  </slot>
+</span>

package/src/components/breadcrumb/BreadcrumbItem.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface BreadcrumbItemProps extends HTMLAttributes<"li"> {}
+type Props = BreadcrumbItemProps;
+
+export const breadcrumbItem = cv({ base: "inline-flex items-center gap-1.5" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li class:list={[breadcrumbItem(), className]} {...rest} data-slot="breadcrumb-item">
+  <slot />
+</li>

package/src/components/breadcrumb/BreadcrumbLink.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface BreadcrumbLinkProps extends HTMLAttributes<"a"> {
+  asChild?: boolean;
+}
+
+type Props = BreadcrumbLinkProps;
+
+export const breadcrumbLink = cv({ base: "hover:text-foreground transition-colors" });
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+---
+
+{
+  asChild ? (
+    <slot />
+  ) : (
+    <a class:list={[breadcrumbLink(), className]} {...rest} data-slot="breadcrumb-link">
+      <slot />
+    </a>
+  )
+}

package/src/components/breadcrumb/BreadcrumbList.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface BreadcrumbListProps extends HTMLAttributes<"ol"> {}
+type Props = BreadcrumbListProps;
+
+export const breadcrumbList = cv({
+  base: "text-muted-foreground flex flex-wrap items-center gap-xs break-words text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ol class:list={[breadcrumbList(), className]} {...rest} data-slot="breadcrumb-list">
+  <slot />
+</ol>

package/src/components/breadcrumb/BreadcrumbPage.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface BreadcrumbPageProps extends HTMLAttributes<"span"> {}
+type Props = BreadcrumbPageProps;
+
+export const breadcrumbPage = cv({ base: "text-foreground font-normal" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class:list={[breadcrumbPage(), className]}
+  {...rest}
+  data-slot="breadcrumb-page"
+>
+  <slot />
+</span>

package/src/components/breadcrumb/BreadcrumbSeparator.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconChevronRight from "~icons/lucide/chevron-right";
+
+export interface BreadcrumbSeparatorProps extends HTMLAttributes<"li"> {}
+type Props = BreadcrumbSeparatorProps;
+
+export const breadcrumbSeparator = cv({ base: "[&>svg]:size-4" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li
+  role="presentation"
+  aria-hidden="true"
+  class:list={[breadcrumbSeparator(), className]}
+  {...rest}
+  data-slot="breadcrumb-separator"
+>
+  <slot>
+    <IconChevronRight />
+  </slot>
+</li>

package/src/components/button/Button.astro

@@ -0,0 +1,58 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface ButtonProps
+  extends
+    HTMLAttributes<"button">,
+    Omit<HTMLAttributes<"a">, "type">,
+    NonNullable<Parameters<typeof button>[0]> {}
+
+type Props = ButtonProps;
+
+const { variant, size, class: className, ...rest } = Astro.props;
+
+export const button = cv({
+  base: [
+    "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-all outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:op-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+  ],
+  variants: {
+    variant: {
+      default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
+      primary:
+        "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
+      secondary:
+        "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      outline:
+        "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground b shadow-xs",
+      ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
+      success:
+        "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/50",
+      warning:
+        "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:ring-error/50",
+    },
+    size: {
+      xs: "px-xs py-2xs text-xs has-[>svg]:px-xs [&_svg:not([class*='size-'])]:size-xs",
+      sm: "px-sm py-3xs text-sm has-[>svg]:px-sm [&_svg:not([class*='size-'])]:size-sm",
+      md: "px-md py-2xs text-md has-[>svg]:px-md [&_svg:not([class*='size-'])]:size-md",
+      lg: "px-lg py-xs text-lg has-[>svg]:px-lg [&_svg:not([class*='size-'])]:size-lg",
+      xl: "px-xl py-sm text-xl has-[>svg]:px-xl [&_svg:not([class*='size-'])]:size-xl",
+      icon: "size-10 p-0",
+      "icon-sm": "size-8 p-0",
+    },
+  },
+  defaultVariants: { variant: "default", size: "md" },
+});
+
+const Tag = Astro.props.href ? "a" : "button";
+---
+
+<Tag class:list={[button({ variant, size }), className]} data-slot="button" {...rest}>
+  <slot />
+</Tag>

package/src/components/button-group/ButtonGroup.astro

@@ -0,0 +1,64 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface ButtonGroupProps extends HTMLAttributes<"div"> {
+  /**
+   * The orientation of the button group.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+}
+
+type Props = ButtonGroupProps;
+
+export const buttonGroup = cv({
+  base: [
+    "flex w-fit items-stretch",
+    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+    "has-[>[data-slot=button-group]]:gap-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  ],
+  variants: {
+    orientation: {
+      horizontal: [
+        "[&>*:not(:first-child)]:rounded-l-none",
+        "[&>*:not(:first-child)]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-r-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:rounded-l-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-as-child]_>_*]:rounded-r-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:rounded-l-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-slot=select-trigger]]:rounded-r-none",
+      ],
+      vertical: [
+        "flex-col",
+        "[&>*:not(:first-child)]:rounded-t-none",
+        "[&>*:not(:first-child)]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-b-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:rounded-t-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-as-child]_>_*]:rounded-b-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:rounded-t-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-slot=select-trigger]]:rounded-b-none",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+const { class: className, orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<div
+  role="group"
+  data-orientation={orientation}
+  class:list={[buttonGroup({ orientation }), className]}
+  {...rest}
+  data-slot="button-group"
+>
+  <slot />
+</div>

package/src/components/button-group/ButtonGroupSeparator.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The orientation of the separator.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const buttonGroupSeparator = cv({
+  base: ["bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto"],
+});
+
+const { class: className, orientation = "vertical", ...rest } = Astro.props;
+---
+
+<div class:list={[buttonGroupSeparator(), className]} {...rest} data-slot="button-group-separator"></div>

package/src/components/button-group/ButtonGroupText.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const buttonGroupText = cv({
+  base: [
+    "bg-muted flex items-center gap-md rounded-md b px-4 text-sm font-medium shadow-xs",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[buttonGroupText(), className]} {...rest} data-slot="button-group-text">
+  <slot />
+</div>

package/src/components/card/Card.astro

@@ -0,0 +1,36 @@
+---
+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<"div"> & VariantProps<typeof card>;
+
+export const card = cv({
+  base: [
+    "bg-card text-card-foreground group/card ring-border flex flex-col rounded-xl ring-1",
+    "has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0",
+    "*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+  ],
+  variants: {
+    size: {
+      default: "gap-xl py-xl",
+      sm: "gap-2xl py-2xl text-sm",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+const { class: className, size, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[card({ size }), className]}
+  data-size={size ?? "default"}
+  {...rest}
+  data-slot="card"
+>
+  <slot />
+</div>

package/src/components/card/CardAction.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardAction = cv({
+  base: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[cardAction(), className]} {...rest} data-slot="card-action">
+  <slot />
+</div>

package/src/components/card/CardContent.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardContent = cv({
+  base: "px-xl group-data-[size=sm]/card:px-2xl",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[cardContent(), className]} {...rest} data-slot="card-content">
+  <slot />
+</div>

package/src/components/card/CardDescription.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardDescription = cv({
+  base: "text-muted-foreground text-base group-data-[size=sm]/card:text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[cardDescription(), className]} {...rest} data-slot="card-description">
+  <slot />
+</div>