@rimelight/ui 0.0.4 → 0.0.6

package/src/components/popover/PopoverContent.astro

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

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

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

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

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

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