@rimelight/ui 0.0.1

package/src/components/popover/PopoverContent.astro

@@ -0,0 +1,102 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Side of the popover
+   * @default bottom
+   */
+  side?: "top" | "bottom" | "left" | "right";
+  /**
+   * Alignment of the popover
+   * @default center
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
+  /**
+   * Accessible name for the dialog when a PopoverTitle is not present.
+   * If neither aria-label nor aria-labelledby is provided, a fallback label is applied.
+   */
+  "aria-label"?: string;
+};
+
+export const popoverContent = cv({
+  base: [
+    "starwind-popover-content",
+    "bg-popover text-popover-foreground z-50 flex w-72 flex-col gap-2xl overflow-x-hidden overflow-y-auto rounded-lg b p-2xl shadow-md",
+    "data-[state=open]:animate-in fade-in zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+    "fixed isolate will-change-transform",
+  ],
+  variants: {
+    side: {
+      bottom: "slide-in-from-top-2 slide-out-to-top-2",
+      top: "slide-in-from-bottom-2 slide-out-to-bottom-2",
+      right: "slide-in-from-left-2 slide-out-to-left-2",
+      left: "slide-in-from-right-2 slide-out-to-right-2",
+    },
+    align: {
+      start: "",
+      center: "",
+      end: "",
+    },
+  },
+  compoundVariants: [
+    {
+      side: ["top", "bottom"],
+      align: "start",
+      className: "slide-in-from-left-1 slide-out-to-left-1",
+    },
+    {
+      side: ["top", "bottom"],
+      align: "end",
+      className: "slide-in-from-right-1 slide-out-to-right-1",
+    },
+  ],
+  defaultVariants: {
+    side: "bottom",
+    align: "center",
+  },
+});
+
+const {
+  class: className,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  animationDuration = 150,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class:list={[popoverContent({ side, align }), className]}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-state="closed"
+  role="dialog"
+  aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : "Popover dialog")}
+  aria-labelledby={ariaLabelledBy}
+  tabindex="-1"
+  style={{
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+  }}
+  {...rest}
+  data-slot="popover-content"
+>
+  <slot />
+</div>

package/src/components/popover/PopoverDescription.astro

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

package/src/components/popover/PopoverHeader.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const popoverHeader = cv({ base: "flex flex-col gap-2xs" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[popoverHeader(), className]} {...rest} data-slot="popover-header">
+  <slot />
+</div>

package/src/components/popover/PopoverTitle.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"h3">;
+
+export const popoverTitle = cv({ base: "font-medium" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<h3 class:list={[popoverTitle(), className]} {...rest} data-slot="popover-title">
+  <slot />
+</h3>

package/src/components/popover/PopoverTrigger.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
+  /**
+   * When true, the component will render its child element with a simple wrapper instead of a button component
+   */
+  asChild?: boolean;
+};
+
+export const popoverTrigger = cv({
+  base: [
+    "starwind-popover-trigger",
+    "inline-flex items-center justify-center",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none",
+  ],
+});
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+  hasChildren = true;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class:list={["starwind-popover-trigger", className]}
+      data-slot="popover-trigger"
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      class:list={[popoverTrigger(), className]}
+      type="button"
+      aria-haspopup="dialog"
+      aria-expanded="false"
+      data-state="closed"
+      {...rest}
+      data-slot="popover-trigger"
+    >
+      <slot />
+    </button>
+  )
+}

package/src/components/progress/Progress.astro

@@ -0,0 +1,154 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Current value of the progress bar (omit for indeterminate state)
+   */
+  value?: number;
+  /**
+   * Maximum value for the progress bar (default: 100)
+   */
+  max?: number;
+  /**
+   * Color variant for the progress indicator (default: default)
+   */
+  variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+};
+
+const { class: className, value, max = 100, variant = "default", ...rest } = Astro.props;
+
+const isIndeterminate = value == null;
+const valuePercent = isIndeterminate ? undefined : Math.round((value / max) * 100);
+const valueText = isIndeterminate ? undefined : `${valuePercent}%`;
+
+export const progress = cv({
+  base: ["starwind-progress-bar", "bg-muted h-5xs w-full overflow-hidden rounded-full"],
+  variants: {
+    variant: {
+      indeterminate: "relative",
+    },
+  },
+});
+
+export const progressIndicator = cv({
+  base: ["starwind-progress-indicator", "h-full w-full flex-1 transition-transform"],
+  variants: {
+    variant: {
+      indeterminate: "absolute inset-y-0 start-0 w-3/4",
+    },
+    color: {
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      default: "bg-foreground",
+      info: "bg-info",
+      success: "bg-success",
+      warning: "bg-warning",
+      error: "bg-error",
+    },
+  },
+  defaultVariants: {
+    color: "primary",
+  },
+});
+
+const indicator = progressIndicator;
+
+const progressClasses = progress({
+  variant: isIndeterminate ? "indeterminate" : undefined,
+});
+
+const indicatorClasses = indicator({
+  variant: isIndeterminate ? "indeterminate" : undefined,
+  color: variant,
+});
+
+const indicatorStyle = isIndeterminate
+  ? ""
+  : `transform: translateX(-${100 - (valuePercent ?? 0)}%);`;
+---
+
+<div
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={isIndeterminate ? undefined : value}
+  aria-valuetext={valueText}
+  class:list={[progressClasses, className]}
+  data-value={value}
+  data-max={max}
+  data-indeterminate={isIndeterminate}
+  {...rest}
+  data-slot="progress"
+>
+  <div class:list={[indicatorClasses]} style={indicatorStyle}></div>
+</div>
+
+<script>
+  class ProgressHandler {
+    private progressElement: HTMLElement;
+    private observer!: MutationObserver;
+
+    constructor(progressElement: HTMLElement) {
+      this.progressElement = progressElement;
+      this.setupMutationObserver();
+      this.updateProgress(); // Initial update
+    }
+
+    private setupMutationObserver(): void {
+      // Create a MutationObserver to watch for data-value attribute changes
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "data-value" || mutation.attributeName === "data-max") {
+            this.updateProgress();
+          }
+        });
+      });
+
+      // Start observing
+      this.observer.observe(this.progressElement, { attributes: true });
+    }
+
+    private updateProgress(): void {
+      const value = Number(this.progressElement.getAttribute("data-value"));
+      const max = Number(this.progressElement.getAttribute("data-max") || 100);
+      const isIndeterminate = this.progressElement.hasAttribute("data-indeterminate")
+        ? this.progressElement.getAttribute("data-indeterminate") === "true"
+        : value == null;
+
+      // Update ARIA attributes
+      if (!isIndeterminate) {
+        const valuePercent = Math.round((value / max) * 100);
+        this.progressElement.setAttribute("aria-valuenow", String(value));
+        this.progressElement.setAttribute("aria-valuetext", `${valuePercent}%`);
+
+        // Update indicator position
+        const indicator = this.progressElement.querySelector("div");
+        if (indicator) {
+          indicator.style.transform = `translateX(-${100 - valuePercent}%)`;
+        }
+      }
+    }
+
+    // Clean up method to disconnect observer
+    public destroy(): void {
+      this.observer.disconnect();
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const progressInstances = new WeakMap<HTMLElement, ProgressHandler>();
+
+  const setupProgressBars = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-progress-bar").forEach((progressElement) => {
+      if (!progressInstances.has(progressElement)) {
+        progressInstances.set(progressElement, new ProgressHandler(progressElement));
+      }
+    });
+  };
+
+  setupProgressBars();
+  document.addEventListener("astro:after-swap", setupProgressBars);
+  document.addEventListener("starwind:init", setupProgressBars);
+</script>