@orbitkit/components 0.2.0-beta.1 → 0.3.0

package/dist/astro/popover/popover.ts

@@ -1,113 +1,113 @@
-export class Popover {
-  // References to tooltip elements
-  private dropdownMenu: HTMLElement;
-  private trigger: HTMLElement | null;
-  private content: HTMLElement | null;
-
-  constructor(dropowndMenu: HTMLElement) {
-    this.dropdownMenu = dropowndMenu;
-    this.content = this.dropdownMenu.querySelector("[data-popover-content]");
-    this.trigger = this.dropdownMenu.querySelector("[data-trigger]");
-
-    if (!this.content || !this.trigger) {
-      console.error("Popover not initialized properly", {
-        content: this.content,
-        trigger: this.trigger,
-      });
-      return;
-    }
-
-    this.init();
-  }
-
-  private init() {
-    this.setupAccessibility();
-    this.setupEventListeners();
-  }
-
-  private setupAccessibility() {
-    if (!this.trigger || !this.content) return;
-
-    const id =
-      this.content.id ||
-      `popover-id-${Math.random().toString(36).substring(2, 9)}`;
-    this.content.id = id;
-    this.trigger.setAttribute("aria-describedby", id);
-    this.setState("closed");
-  }
-
-  private setupEventListeners() {
-    if (!this.trigger || !this.content) return;
-
-    this.trigger.addEventListener("click", () => this.popoverToggle());
-
-    this.content.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      const item = target.closest('[role="menuitem"]') as HTMLElement;
-
-      if (item && item.dataset.disabled !== "true") {
-        this.closePopover();
-      }
-    });
-
-    document.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      if (
-        this.content &&
-        !this.content.contains(target) &&
-        target !== this.trigger
-      ) {
-        this.closePopover();
-      }
-    });
-
-    this.trigger.addEventListener("keydown", (e) => {
-      const isOpen = this.content?.dataset.state === "open";
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        this.popoverToggle();
-      } else if (e.key === "Escape" && isOpen) {
-        e.preventDefault();
-        this.closePopover();
-      }
-    });
-
-    document.addEventListener("keydown", (e) => this.handleKeydown(e));
-  }
-
-  private popoverToggle() {
-    if (this.content?.dataset.state === "open") {
-      this.closePopover();
-    } else {
-      this.openPopover();
-    }
-  }
-
-  private openPopover() {
-    this.content?.classList.remove("hidden");
-
-    window.setTimeout(() => {
-      this.setState("open");
-    }, 0);
-  }
-
-  private closePopover() {
-    this.trigger?.focus();
-    this.setState("closed");
-    window.setTimeout(() => {
-      this.content?.classList.add("hidden");
-    }, 100);
-  }
-
-  private setState(state: "open" | "closed") {
-    this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
-    this.content?.setAttribute("data-state", state);
-  }
-
-  private handleKeydown = (event: KeyboardEvent) => {
-    if (event.key === "Escape" && this.content!.dataset.state === "open") {
-      this.closePopover();
-      event.preventDefault();
-    }
-  };
-}
+export class Popover {
+  // References to tooltip elements
+  private dropdownMenu: HTMLElement;
+  private trigger: HTMLElement | null;
+  private content: HTMLElement | null;
+
+  constructor(dropowndMenu: HTMLElement) {
+    this.dropdownMenu = dropowndMenu;
+    this.content = this.dropdownMenu.querySelector("[data-popover-content]");
+    this.trigger = this.dropdownMenu.querySelector("[data-trigger]");
+
+    if (!this.content || !this.trigger) {
+      console.error("Popover not initialized properly", {
+        content: this.content,
+        trigger: this.trigger,
+      });
+      return;
+    }
+
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+  }
+
+  private setupAccessibility() {
+    if (!this.trigger || !this.content) return;
+
+    const id =
+      this.content.id ||
+      `popover-id-${Math.random().toString(36).substring(2, 9)}`;
+    this.content.id = id;
+    this.trigger.setAttribute("aria-describedby", id);
+    this.setState("closed");
+  }
+
+  private setupEventListeners() {
+    if (!this.trigger || !this.content) return;
+
+    this.trigger.addEventListener("click", () => this.popoverToggle());
+
+    this.content.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      const item = target.closest('[role="menuitem"]') as HTMLElement;
+
+      if (item && item.dataset.disabled !== "true") {
+        this.closePopover();
+      }
+    });
+
+    document.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      if (
+        this.content &&
+        !this.content.contains(target) &&
+        target !== this.trigger
+      ) {
+        this.closePopover();
+      }
+    });
+
+    this.trigger.addEventListener("keydown", (e) => {
+      const isOpen = this.content?.dataset.state === "open";
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.popoverToggle();
+      } else if (e.key === "Escape" && isOpen) {
+        e.preventDefault();
+        this.closePopover();
+      }
+    });
+
+    document.addEventListener("keydown", (e) => this.handleKeydown(e));
+  }
+
+  private popoverToggle() {
+    if (this.content?.dataset.state === "open") {
+      this.closePopover();
+    } else {
+      this.openPopover();
+    }
+  }
+
+  private openPopover() {
+    this.content?.classList.remove("hidden");
+
+    window.setTimeout(() => {
+      this.setState("open");
+    }, 0);
+  }
+
+  private closePopover() {
+    this.trigger?.focus();
+    this.setState("closed");
+    window.setTimeout(() => {
+      this.content?.classList.add("hidden");
+    }, 100);
+  }
+
+  private setState(state: "open" | "closed") {
+    this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
+    this.content?.setAttribute("data-state", state);
+  }
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && this.content!.dataset.state === "open") {
+      this.closePopover();
+      event.preventDefault();
+    }
+  };
+}

package/dist/astro/popover/popoverVariants.ts

@@ -1,115 +1,115 @@
-import { cva } from "class-variance-authority";
-
-const baseClass = [
-  "hidden absolute z-50 bg-surface border border-border p-4 rounded-md",
-  "transform duration-100 transition-all ease-in data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data[state=open]:opacity-100 data[state=open]:scale-100",
-];
-
-const popoverVariants = cva(baseClass, {
-  variants: {
-    side: {
-      top: "bottom-full mb-(--tooltip-offset)",
-      bottom: "top-full mt-(--tooltip-offset)",
-      left: "right-full mr-(--tooltip-offset)",
-      right: "left-full ml-(--tooltip-offset)",
-    },
-    alignment: {
-      start: "",
-      center: "",
-      end: "",
-    },
-  },
-  compoundVariants: [
-    {
-      side: ["top", "bottom"],
-      alignment: "start",
-      class: "left-0",
-    },
-    {
-      side: ["top", "bottom"],
-      alignment: "end",
-      class: "left-full -translate-x-full",
-    },
-    {
-      side: ["top", "bottom"],
-      alignment: "center",
-      class: "left-1/2 -translate-x-1/2",
-    },
-    {
-      side: ["left", "right"],
-      alignment: "start",
-      class: "top-0 -translate-y-0",
-    },
-    {
-      side: ["left", "right"],
-      alignment: "center",
-      class: "top-1/2 -translate-y-1/2",
-    },
-    {
-      side: ["left", "right"],
-      alignment: "end",
-      class: "top-full -translate-y-full",
-    },
-  ],
-  defaultVariants: {
-    side: "bottom",
-    alignment: "center",
-  },
-});
-
-const arrowClass =
-  "absolute w-0 h-0 transition-all transform ease-in size-2 bg-surface transform rotate-45 border-border";
-
-const popoverArrowVariants = cva(arrowClass, {
-  variants: {
-    side: {
-      top: "top-full -mt-1 border-b border-r",
-      bottom: "bottom-full -mb-1 border-t border-l",
-      left: "left-full -ml-1 border-t border-r",
-      right: "right-full -mr-1 border-b border-l",
-    },
-    alignment: {
-      start: "",
-      center: "",
-      end: "",
-    },
-  },
-  compoundVariants: [
-    {
-      side: ["top", "bottom"],
-      alignment: "start",
-      class: "left-0 ml-3 ",
-    },
-    {
-      side: ["top", "bottom"],
-      alignment: "end",
-      class: "right-0 mr-3",
-    },
-    {
-      side: ["top", "bottom"],
-      alignment: "center",
-      class: "left-1/2 -translate-x-1/2",
-    },
-    {
-      side: ["left", "right"],
-      alignment: "start",
-      class: "top-0 mt-3",
-    },
-    {
-      side: ["left", "right"],
-      alignment: "center",
-      class: "top-1/2 -translate-y-1/2",
-    },
-    {
-      side: ["left", "right"],
-      alignment: "end",
-      class: "bottom-0 mb-3",
-    },
-  ],
-  defaultVariants: {
-    side: "bottom",
-    alignment: "center",
-  },
-});
-
-export { popoverArrowVariants, popoverVariants };
+import { cva } from "class-variance-authority";
+
+const baseClass = [
+  "hidden absolute z-50 bg-surface border border-border p-4 rounded-md",
+  "transform duration-100 transition-all ease-in data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data[state=open]:opacity-100 data[state=open]:scale-100",
+];
+
+const popoverVariants = cva(baseClass, {
+  variants: {
+    side: {
+      top: "bottom-full mb-(--tooltip-offset)",
+      bottom: "top-full mt-(--tooltip-offset)",
+      left: "right-full mr-(--tooltip-offset)",
+      right: "left-full ml-(--tooltip-offset)",
+    },
+    alignment: {
+      start: "",
+      center: "",
+      end: "",
+    },
+  },
+  compoundVariants: [
+    {
+      side: ["top", "bottom"],
+      alignment: "start",
+      class: "left-0",
+    },
+    {
+      side: ["top", "bottom"],
+      alignment: "end",
+      class: "left-full -translate-x-full",
+    },
+    {
+      side: ["top", "bottom"],
+      alignment: "center",
+      class: "left-1/2 -translate-x-1/2",
+    },
+    {
+      side: ["left", "right"],
+      alignment: "start",
+      class: "top-0 -translate-y-0",
+    },
+    {
+      side: ["left", "right"],
+      alignment: "center",
+      class: "top-1/2 -translate-y-1/2",
+    },
+    {
+      side: ["left", "right"],
+      alignment: "end",
+      class: "top-full -translate-y-full",
+    },
+  ],
+  defaultVariants: {
+    side: "bottom",
+    alignment: "center",
+  },
+});
+
+const arrowClass =
+  "absolute w-0 h-0 transition-all transform ease-in size-2 bg-surface transform rotate-45 border-border";
+
+const popoverArrowVariants = cva(arrowClass, {
+  variants: {
+    side: {
+      top: "top-full -mt-1 border-b border-r",
+      bottom: "bottom-full -mb-1 border-t border-l",
+      left: "left-full -ml-1 border-t border-r",
+      right: "right-full -mr-1 border-b border-l",
+    },
+    alignment: {
+      start: "",
+      center: "",
+      end: "",
+    },
+  },
+  compoundVariants: [
+    {
+      side: ["top", "bottom"],
+      alignment: "start",
+      class: "left-0 ml-3 ",
+    },
+    {
+      side: ["top", "bottom"],
+      alignment: "end",
+      class: "right-0 mr-3",
+    },
+    {
+      side: ["top", "bottom"],
+      alignment: "center",
+      class: "left-1/2 -translate-x-1/2",
+    },
+    {
+      side: ["left", "right"],
+      alignment: "start",
+      class: "top-0 mt-3",
+    },
+    {
+      side: ["left", "right"],
+      alignment: "center",
+      class: "top-1/2 -translate-y-1/2",
+    },
+    {
+      side: ["left", "right"],
+      alignment: "end",
+      class: "bottom-0 mb-3",
+    },
+  ],
+  defaultVariants: {
+    side: "bottom",
+    alignment: "center",
+  },
+});
+
+export { popoverArrowVariants, popoverVariants };

package/dist/astro/scroll-progress/ScrollProgress.astro

@@ -0,0 +1,41 @@
+---
+import ScrollProgressBar from "./ScrollProgressBar.astro";
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  class={cn("fixed top-0 left-0 w-full h-[2px] bg-muted z-[1000]", className)}
+  {...attrs}
+>
+  <slot>
+    <ScrollProgressBar />
+  </slot>
+</div>
+
+<script>
+  function initScrollProgress() {
+    const bar = document.querySelector<HTMLElement>(
+      "[data-scroll-progress-bar]",
+    );
+    if (!bar) return;
+
+    function updateBar() {
+      const total = document.documentElement.scrollHeight - window.innerHeight;
+      const progress = (window.scrollY / total) * 100;
+      bar!.style.width = `${progress}%`;
+    }
+
+    window.addEventListener("scroll", updateBar);
+    updateBar();
+  }
+
+  initScrollProgress();
+  document.addEventListener("astro:after-swap", () => {
+    initScrollProgress();
+  });
+</script>

package/dist/astro/scroll-progress/ScrollProgressBar.astro

@@ -0,0 +1,19 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  data-scroll-progress-bar
+  class={cn(
+    "h-full bg-primary transition-all duration-100 ease-out",
+    className,
+  )}
+  style="width: 0%;"
+  {...attrs}
+>
+</div>

package/dist/astro/scroll-progress/index.ts

@@ -0,0 +1,4 @@
+import ScrollProgress from "./ScrollProgress.astro";
+import ScrollProgressBar from "./ScrollProgressBar.astro";
+
+export { ScrollProgress, ScrollProgressBar };

package/dist/astro/stat/Stat.astro

@@ -1,12 +1,12 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<div class={cn("inline-flex flex-col gap-0.5", className)} {...attrs}>
-  <slot />
-</div>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div class={cn("inline-flex flex-col gap-0.5", className)} {...attrs}>
+  <slot />
+</div>

package/dist/astro/stat/StatDescription.astro

@@ -1,12 +1,12 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<p class={cn("text-sm text-foreground/70", className)} {...attrs}>
-  <slot />
-</p>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<p class={cn("text-sm text-foreground/70", className)} {...attrs}>
+  <slot />
+</p>

package/dist/astro/stat/StatTitle.astro

@@ -1,18 +1,18 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"h3"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<h3
-  class={cn(
-    "text-sm font-medium text-foreground/80 uppercase tracking-wide",
-    className,
-  )}
-  {...attrs}
->
-  <slot />
-</h3>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h3"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<h3
+  class={cn(
+    "text-sm font-medium text-foreground/80 uppercase tracking-wide",
+    className,
+  )}
+  {...attrs}
+>
+  <slot />
+</h3>

package/dist/astro/stat/StatValue.astro

@@ -1,12 +1,12 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<span class={cn("text-3xl font-bold text-foreground", className)} {...attrs}>
-  <slot />
-</span>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<span class={cn("text-3xl font-bold text-foreground", className)} {...attrs}>
+  <slot />
+</span>

package/dist/astro/stat/index.ts

@@ -1,6 +1,6 @@
-import Stat from "./Stat.astro";
-import StatDescription from "./StatDescription.astro";
-import StatTitle from "./StatTitle.astro";
-import StatValue from "./StatValue.astro";
-
-export { Stat, StatDescription, StatTitle, StatValue };
+import Stat from "./Stat.astro";
+import StatDescription from "./StatDescription.astro";
+import StatTitle from "./StatTitle.astro";
+import StatValue from "./StatValue.astro";
+
+export { Stat, StatDescription, StatTitle, StatValue };