@orbitkit/components 0.0.1 → 0.2.0-beta.1

package/dist/astro/popover/popover.ts

@@ -0,0 +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();
+    }
+  };
+}

package/dist/astro/popover/popoverVariants.ts

@@ -0,0 +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 };

package/dist/astro/progress/Progress.astro

@@ -1,23 +1,23 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  value?: number;
-}
-
-const { class: className, value = 50 } = Astro.props;
-
-if (value < 0 || value > 100) {
-  throw new Error("Value must be between 0 and 100");
-}
----
-
-<div
-  class={cn(
-    "flex items-center justify-center h-full overflow-hidden text-primary-foreground break-all bg-primary rounded-full",
-    className,
-  )}
-  style={{ width: `${value}%` }}
->
-</div>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  value?: number;
+}
+
+const { class: className, value = 50 } = Astro.props;
+
+if (value < 0 || value > 100) {
+  throw new Error("Value must be between 0 and 100");
+}
+---
+
+<div
+  class={cn(
+    "flex items-center justify-center h-full overflow-hidden text-primary-foreground break-all bg-primary rounded-full",
+    className,
+  )}
+  style={{ width: `${value}%` }}
+>
+</div>

package/dist/astro/progress/index.ts

@@ -1,4 +1,4 @@
-import Progress from "./Progress.astro";
-import ProgressContainer from "./progressContainer.astro";
-
-export { Progress, ProgressContainer };
+import Progress from "./Progress.astro";
+import ProgressContainer from "./progressContainer.astro";
+
+export { Progress, ProgressContainer };

package/dist/astro/progress/progressContainer.astro

@@ -1,17 +1,17 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className } = Astro.props;
----
-
-<div
-  class={cn(
-    "flex-start flex h-2.5 w-full overflow-hidden rounded-full bg-muted font-sans text-xs font-medium",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className } = Astro.props;
+---
+
+<div
+  class={cn(
+    "flex-start flex h-2.5 w-full overflow-hidden rounded-full bg-muted font-sans text-xs font-medium",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/radio/Radio.astro

@@ -1,26 +1,26 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
-
-const { class: className, id, ...attrs } = Astro.props;
----
-
-<div class="inline-flex items-center">
-  <label class="relative flex cursor-pointer items-center" for={id}>
-    <input
-      {...attrs}
-      id={id}
-      type="radio"
-      class="border-input-border checked:border-primary peer h-5 w-5 cursor-pointer appearance-none rounded-full border transition-all"
-    />
-    <span
-      class={cn(
-        "absolute bg-primary w-3 h-3 rounded-full opacity-0 peer-checked:opacity-100 transition-opacity duration-200 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className,
-      )}
-    >
-    </span>
-  </label>
-</div>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
+
+const { class: className, id, ...attrs } = Astro.props;
+---
+
+<div class="inline-flex items-center">
+  <label class="relative flex cursor-pointer items-center" for={id}>
+    <input
+      {...attrs}
+      id={id}
+      type="radio"
+      class="border-input-border checked:border-primary peer h-5 w-5 cursor-pointer appearance-none rounded-full border transition-all"
+    />
+    <span
+      class={cn(
+        "absolute bg-primary w-3 h-3 rounded-full opacity-0 peer-checked:opacity-100 transition-opacity duration-200 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+    >
+    </span>
+  </label>
+</div>

package/dist/astro/radio/index.ts

@@ -1,3 +1,3 @@
-import Radio from "./Radio.astro";
-
-export { Radio };
+import Radio from "./Radio.astro";
+
+export { Radio };

package/dist/astro/select/Option.astro

@@ -1,11 +1,11 @@
----
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends Omit<HTMLAttributes<"select">, "type"> {}
-
-const { ...attrs } = Astro.props;
----
-
-<option {...attrs}>
-  <slot />
-</option>
+---
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"option"> {}
+
+const { ...attrs } = Astro.props;
+---
+
+<option {...attrs}>
+  <slot />
+</option>

package/dist/astro/select/Select.astro

@@ -1,39 +1,39 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { selectVariants } from "./selectVariants";
-
-interface Props
-  extends Omit<HTMLAttributes<"select">, "disabled">,
-    VariantProps<typeof selectVariants> {}
-
-const { class: className, multiple, variant, disabled, ...attrs } = Astro.props;
----
-
-<div class="relative">
-  <select
-    {...attrs}
-    disabled={disabled}
-    multiple={multiple}
-    class={cn(selectVariants({ variant, disabled, className }))}
-  >
-    <slot />
-  </select>
-
-  {
-    !multiple && (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        class="text-input-placeholder absolute right-2.5 top-2.5 h-5 w-5"
-      >
-        <path d="m7 15 5 5 5-5" />
-        <path d="m7 9 5-5 5 5" />
-      </svg>
-    )
-  }
-</div>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { selectVariants } from "./selectVariants";
+
+interface Props
+  extends Omit<HTMLAttributes<"select">, "disabled">,
+    VariantProps<typeof selectVariants> {}
+
+const { class: className, multiple, variant, disabled, ...attrs } = Astro.props;
+---
+
+<div class="relative">
+  <select
+    {...attrs}
+    disabled={disabled}
+    multiple={multiple}
+    class={cn(selectVariants({ variant, disabled, className }))}
+  >
+    <slot />
+  </select>
+
+  {
+    !multiple && (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class="text-input-placeholder absolute right-2.5 top-2.5 h-5 w-5"
+      >
+        <path d="m7 15 5 5 5-5" />
+        <path d="m7 9 5-5 5 5" />
+      </svg>
+    )
+  }
+</div>

package/dist/astro/select/index.ts

@@ -1,5 +1,5 @@
-import Option from "./Option.astro";
-import Select from "./Select.astro";
-import { selectVariants } from "./selectVariants";
-
-export { Option, Select, selectVariants };
+import Option from "./Option.astro";
+import Select from "./Select.astro";
+import { selectVariants } from "./selectVariants";
+
+export { Option, Select, selectVariants };

package/dist/astro/select/selectVariants.ts

@@ -1,30 +1,30 @@
-import { cva } from "class-variance-authority";
-
-const baseClass =
-  "block w-full p-2.5 mb-2 text-sm rounded-lg outline-1 -outline-offset-1 appearance-none";
-
-const selectVariants = cva(baseClass, {
-  variants: {
-    variant: {
-      default:
-        "text-foreground bg-input outline-input-border placeholder-input-placeholder cursor-pointer",
-    },
-    disabled: {
-      false: null,
-      true: "bg-input/40 outline-input-border/40 text-muted-foreground cursor-not-allowed",
-    },
-  },
-  compoundVariants: [
-    {
-      variant: "default",
-      disabled: false,
-      class: "focus:outline-2 focus:-outline-offset-2 focus:outline-primary",
-    },
-  ],
-  defaultVariants: {
-    variant: "default",
-    disabled: false,
-  },
-});
-
-export { selectVariants };
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "block w-full p-2.5 mb-2 text-sm rounded-lg outline-1 -outline-offset-1 appearance-none";
+
+const selectVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default:
+        "text-foreground bg-input outline-input-border placeholder-input-placeholder cursor-pointer",
+    },
+    disabled: {
+      false: null,
+      true: "bg-input/40 outline-input-border/40 text-muted-foreground cursor-not-allowed",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: false,
+      class: "focus:outline-2 focus:-outline-offset-2 focus:outline-primary",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    disabled: false,
+  },
+});
+
+export { selectVariants };

package/dist/astro/skeleton/Skeleton.astro

@@ -0,0 +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 {...attrs} role="status" class={cn("animate-pulse", className)}>
+  <slot />
+</div>

package/dist/astro/skeleton/SkeletonItem.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  class={cn(
+    "rounded-md bg-muted text-muted-foreground flex items-center justify-center",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/skeleton/index.ts

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

package/dist/astro/stat/Stat.astro

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

package/dist/astro/stat/StatDescription.astro

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

package/dist/astro/stat/StatTitle.astro

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

package/dist/astro/stat/StatValue.astro

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

package/dist/astro/stat/index.ts

@@ -0,0 +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 };