@rimelight/ui 0.0.4 → 0.0.6

package/src/components/avatar/AvatarFallback.astro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/card/CardFooter.astro

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const cardFooter = cv({
-  base: "bg-muted/50 flex items-center rounded-b-xl border-t p-xl group-data-[size=sm]/card:p-2xl",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class:list={[cardFooter(), className]} {...rest} data-slot="card-footer">
-  <slot />
-</div>

package/src/components/card/CardHeader.astro

@@ -1,19 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const cardHeader = cv({
-  base: [
-    "@container/card-header grid auto-rows-min items-start gap-1 px-xl group-data-[size=sm]/card:px-2xl",
-    "has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class:list={[cardHeader(), className]} {...rest} data-slot="card-header">
-  <slot />
-</div>

package/src/components/card/CardTitle.astro

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

package/src/components/carousel/Carousel.astro

@@ -1,55 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { type EmblaOptionsType } from "embla-carousel";
-import { cv } from "css-variants";
-
-export const carousel = cv({
-  base: "starwind-carousel group/carousel relative",
-});
-
-export interface Props extends HTMLAttributes<"div"> {
-  orientation?: "horizontal" | "vertical";
-  opts?: EmblaOptionsType;
-  autoInit?: boolean;
-}
-
-const {
-  class: className,
-  orientation = "horizontal",
-  opts = {},
-  autoInit = true,
-  ...rest
-} = Astro.props;
----
-
-<div
-  class:list={[carousel(), className]}
-  role="region"
-  aria-roledescription="carousel"
-  data-axis={orientation === "horizontal" ? "x" : "y"}
-  data-opts={JSON.stringify(opts)}
-  data-auto-init={autoInit}
-  {...rest}
-  data-slot="carousel"
->
-  <slot />
-</div>
-
-<script>
-  import { initCarousel } from "./carousel-script";
-
-  const setupCarousels = () => {
-    const carousels = document.querySelectorAll(".starwind-carousel") as NodeListOf<HTMLElement>;
-    carousels.forEach((carousel) => {
-      if (carousel.dataset.autoInit === "false") {
-        return;
-      }
-      initCarousel(carousel);
-    });
-  };
-
-  document.addEventListener("DOMContentLoaded", setupCarousels);
-
-  // Re-initialize after Astro page transitions
-  document.addEventListener("astro:after-swap", setupCarousels);
-</script>