@rimelight/ui 0.0.1

package/src/components/kbd/Kbd.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"kbd">;
+
+export const kbd = cv({
+  base: [
+    "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+    "bg-muted text-muted-foreground",
+    "[&_svg:not([class*='size-'])]:size-3",
+    "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<kbd class:list={[kbd(), className]} {...rest} data-slot="kbd">
+  <slot />
+</kbd>

package/src/components/kbd/KbdGroup.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"kbd">;
+
+export const kbdGroup = cv({
+  base: "inline-flex items-center gap-2xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<kbd class:list={[kbdGroup(), className]} {...rest} data-slot="kbd-group">
+  <slot />
+</kbd>

package/src/components/label/Label.astro

@@ -0,0 +1,24 @@
+---
+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<"label"> & VariantProps<typeof label>;
+
+export const label = cv({
+  base: [
+    "text-foreground leading-none font-medium",
+    "peer-disabled:cursor-not-allowed peer-disabled:op-70 has-[+:disabled]:cursor-not-allowed has-[+:disabled]:op-70",
+  ],
+  variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
+  defaultVariants: { size: "md" },
+});
+
+const { size, class: className, ...rest } = Astro.props;
+---
+
+{/* eslint-disable-next-line astro/jsx-a11y/label-has-associated-control */}
+<label class:list={[label({ size }), className]} {...rest} data-slot="label">
+  <slot />
+</label>

package/src/components/marquee/Marquee.astro

@@ -0,0 +1,73 @@
+---
+import { scv } from "css-variants";
+
+const marqueeVariants = scv({
+  slots: ["root", "content"],
+  base: {
+    root: "relative flex overflow-hidden w-full py-8",
+    content: "flex shrink-0 items-center justify-around gap-8 min-w-full",
+  },
+  variants: {
+    variant: {
+      static: {
+        root: "justify-center",
+        content: "animate-none",
+      },
+      scroll: {
+        root: "",
+        content: "animate-marquee",
+      },
+    },
+    size: {
+      xs: {
+        content: "gap-xs",
+      },
+      sm: {
+        content: "gap-sm",
+      },
+      md: {
+        content: "gap-md",
+      },
+      lg: {
+        content: "gap-lg",
+      },
+      xl: {
+        content: "gap-xl",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "static",
+    size: "md",
+  },
+});
+
+export interface MarqueeProps extends NonNullable<Parameters<typeof marqueeVariants>[0]> {
+  class?: string;
+  repeat?: number;
+  title?: string;
+}
+type Props = MarqueeProps;
+
+const { variant, size, class: className, repeat = 2, title } = Astro.props;
+const { root, content } = marqueeVariants({ variant, size });
+---
+
+<div class:list={[root, className]}>
+  <div class="container flex flex-col items-center gap-8">
+    {title && (
+      <h4 class="text-lg font-medium text-muted-foreground/80">
+        {title}
+      </h4>
+    )}
+    <div class="flex w-full items-center justify-around gap-inherit">
+      {Array.from({ length: variant === "scroll" ? repeat : 1 }).map(() => (
+        <div class={content}>
+          <slot />
+        </div>
+      ))}
+    </div>
+  </div>
+</div>
+
+

package/src/components/native-select/NativeSelect.astro

@@ -0,0 +1,68 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconChevronDown from "~icons/lucide/chevron-down";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = Omit<HTMLAttributes<"select">, "size"> & VariantProps<typeof nativeSelect>;
+
+export const nativeSelectWrapper = cv({
+  base: [
+    "starwind-native-select-wrapper",
+    "group/native-select relative w-fit has-[select:disabled]:op-50",
+  ],
+});
+
+export const nativeSelect = cv({
+  base: [
+    "starwind-native-select",
+    "border-input dark:bg-input/30 text-foreground ring-offset-background w-full rounded-md b bg-transparent shadow-xs",
+    "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground appearance-none bg-none select-none",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40 aria-invalid:focus-visible:ring-3",
+  ],
+  variants: {
+    size: {
+      sm: "h-2xl pr-2xl pl-3xs text-sm",
+      md: "h-3xl pr-3xl pl-xs text-base",
+      lg: "h-3xl pr-3xl px-2xl text-lg",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const nativeSelectIcon = cv({
+  base: ["text-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 op-50"],
+  variants: {
+    size: {
+      sm: "right-3xs size-3.5",
+      md: "right-xs size-4",
+      lg: "right-2xl size-5",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const { class: className, size, ...rest } = Astro.props;
+---
+
+<div class={nativeSelectWrapper()} data-size={size} data-slot="native-select-wrapper">
+  <select class:list={[nativeSelect({ size }), className]} {...rest} data-slot="native-select">
+    <slot />
+  </select>
+  <slot name="icon">
+    <span
+      class={nativeSelectIcon({ size })}
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    >
+      <IconChevronDown />
+    </span>
+  </slot>
+</div>

package/src/components/native-select/NativeSelectOptGroup.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"optgroup">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<optgroup
+  class:list={["starwind-native-select-optgroup", className]}
+  {...rest}
+  data-slot="native-select-optgroup"
+>
+  <slot />
+</optgroup>

package/src/components/native-select/NativeSelectOption.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"option">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<option
+  class:list={["starwind-native-select-option", className]}
+  {...rest}
+  data-slot="native-select-option"
+>
+  <slot />
+</option>

package/src/components/pagination/Pagination.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"nav">;
+
+export const pagination = cv({ base: "mx-auto flex w-full justify-center" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<nav
+  role="navigation"
+  aria-label="pagination"
+  class:list={[pagination(), className]}
+  {...rest}
+  data-slot="pagination"
+>
+  <slot />
+</nav>

package/src/components/pagination/PaginationContent.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"ul"> & {
+  children: any;
+};
+
+export const paginationContent = cv({ base: "flex flex-row items-center gap-2xs" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul class:list={[paginationContent(), className]} {...rest} data-slot="pagination-content">
+  <slot />
+</ul>

package/src/components/pagination/PaginationEllipsis.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"span"> & VariantProps<typeof paginationEllipsis>;
+
+export const paginationEllipsis = cv({
+  base: "flex items-center justify-center",
+  variants: {
+    size: {
+      "icon-sm": "size-9",
+      icon: "size-11",
+      "icon-lg": "size-12",
+    },
+  },
+  defaultVariants: { size: "icon" },
+});
+
+const { class: className, size, ...rest } = Astro.props;
+---
+
+<span
+  aria-hidden
+  class:list={[paginationEllipsis({ size }), className]}
+  {...rest}
+  data-slot="pagination-ellipsis"
+>
+  <slot name="icon">
+    <IconMoreHorizontal class="size-4" />
+  </slot>
+  <slot>
+    <span class="sr-only">More pages</span>
+  </slot>
+</span>

package/src/components/pagination/PaginationItem.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"li"> & {
+  children: any;
+};
+
+export const paginationItem = cv({ base: "" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li class:list={[paginationItem(), className]} {...rest} data-slot="pagination-item">
+  <slot />
+</li>

package/src/components/pagination/PaginationLink.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+import { button } from "../button/Button.astro";
+
+type Props = HTMLAttributes<"a"> &
+  Omit<VariantProps<typeof button>, "variant"> & {
+    isActive?: boolean;
+  };
+
+export const paginationLink = button;
+
+const { class: className, isActive, size = "icon", ...rest } = Astro.props;
+---
+
+<a
+  aria-current={isActive ? "page" : undefined}
+  class:list={[button({ variant: isActive ? "outline" : "ghost", size }), className]}
+  {...rest}
+  data-slot="pagination-link"
+>
+  <slot />
+</a>
+

package/src/components/pagination/PaginationNext.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconChevronRight from "~icons/lucide/chevron-right";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+import type { button } from "../button/Button.astro";
+
+import PaginationLink from "./PaginationLink.astro";
+
+type Props = HTMLAttributes<"a"> & {
+  size?: VariantProps<typeof button>["size"];
+};
+
+export const paginationNext = cv({ base: "group gap-2xs" });
+
+const { class: className, size = "md", ...rest } = Astro.props;
+---
+
+<PaginationLink
+  aria-label="Go to next page"
+  size={size}
+  class:list={[paginationNext(), className]}
+  {...rest}
+  data-slot="pagination-next"
+>
+  <slot />
+  <slot name="icon">
+    <IconChevronRight class="size-4 transition-transform group-hover:translate-x-1" />
+  </slot>
+</PaginationLink>
+

package/src/components/pagination/PaginationPrevious.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconChevronLeft from "~icons/lucide/chevron-left";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+import type { button } from "../button/Button.astro";
+
+import PaginationLink from "./PaginationLink.astro";
+
+type Props = HTMLAttributes<"a"> & {
+  size?: VariantProps<typeof button>["size"];
+};
+
+export const paginationPrevious = cv({ base: "group gap-2xs" });
+
+const { class: className, size = "md", ...rest } = Astro.props;
+---
+
+<PaginationLink
+  aria-label="Go to previous page"
+  size={size}
+  class:list={[paginationPrevious(), className]}
+  {...rest}
+  data-slot="pagination-previous"
+>
+  <slot name="icon">
+    <IconChevronLeft class="size-4 transition-transform group-hover:-translate-x-1" />
+  </slot>
+  <slot />
+</PaginationLink>
+