@orbitkit/components 0.0.1 → 0.2.0-beta.1

package/dist/astro/card/CardDescription.astro

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

package/dist/astro/card/CardFooter.astro

@@ -1,15 +1,15 @@
----
-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("p-6 pt-0 flex items-center justify-between gap-2", className)}
->
-  <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
+  {...attrs}
+  class={cn("p-6 pt-0 flex items-center justify-between gap-2", className)}
+>
+  <slot />
+</div>

package/dist/astro/card/CardHeader.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 {...attrs} class={cn("p-6 pb-0 flex flex-col gap-1", className)}>
-  <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 {...attrs} class={cn("p-6 pb-0 flex flex-col gap-1", className)}>
+  <slot />
+</div>

package/dist/astro/card/CardTitle.astro

@@ -1,18 +1,18 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"h5"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<h5
-  {...attrs}
-  class={cn(
-    "flex items-center justify-start gap-2 text-2xl font-semibold tracking-tight",
-    className,
-  )}
->
-  <slot />
-</h5>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h5"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<h5
+  {...attrs}
+  class={cn(
+    "flex items-center justify-start gap-2 text-2xl font-semibold tracking-tight",
+    className,
+  )}
+>
+  <slot />
+</h5>

package/dist/astro/card/index.ts

@@ -1,15 +1,15 @@
-import Card from "./Card.astro";
-import CardContent from "./CardContent.astro";
-import CardDescription from "./CardDescription.astro";
-import CardFooter from "./CardFooter.astro";
-import CardHeader from "./CardHeader.astro";
-import CardTitle from "./CardTitle.astro";
-
-export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-};
+import Card from "./Card.astro";
+import CardContent from "./CardContent.astro";
+import CardDescription from "./CardDescription.astro";
+import CardFooter from "./CardFooter.astro";
+import CardHeader from "./CardHeader.astro";
+import CardTitle from "./CardTitle.astro";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/dist/astro/checkbox/Checkbox.astro

@@ -1,38 +1,38 @@
----
-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="checkbox"
-      class={"peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-border checked:bg-primary disabled:opacity-50 disabled:cursor-not-allowed"}
-    />
-    <span
-      class={cn(
-        "text-primary-foreground pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform opacity-0 peer-checked:opacity-100",
-        className,
-      )}
-    >
-      <slot>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-3.5 w-3.5"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="4"
-        >
-          <path d="M20 6 9 17l-5-5"></path>
-        </svg>
-      </slot>
-    </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="checkbox"
+      class={"peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-border checked:bg-primary disabled:opacity-50 disabled:cursor-not-allowed"}
+    />
+    <span
+      class={cn(
+        "text-primary-foreground pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform opacity-0 peer-checked:opacity-100",
+        className,
+      )}
+    >
+      <slot>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-3.5 w-3.5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="4"
+        >
+          <path d="M20 6 9 17l-5-5"></path>
+        </svg>
+      </slot>
+    </span>
+  </label>
+</div>

package/dist/astro/checkbox/index.ts

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

package/dist/astro/collapsible/Collapsible.astro

@@ -0,0 +1,34 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  isOpen?: boolean;
+}
+
+const { class: className, isOpen = false, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  data-collapsible
+  data-open={isOpen}
+  class={cn("w-full", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { Collapsible } from "./collapsible";
+
+  function init() {
+    const collapsibles =
+      document.querySelectorAll<HTMLElement>("[data-collapsible]");
+    collapsibles.forEach((collapsible) => {
+      new Collapsible(collapsible);
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", () => init());
+</script>

package/dist/astro/collapsible/CollapsibleContent.astro

@@ -0,0 +1,20 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  data-collapsible-content
+  class={cn(
+    "overflow-hidden transition-all duration-300 ease-in-out",
+    className,
+  )}
+  hidden
+  {...attrs}
+>
+  <slot />
+</div>

package/dist/astro/collapsible/collapsible.ts

@@ -0,0 +1,81 @@
+export class Collapsible {
+  private wrapper: HTMLElement;
+  private content: HTMLElement | null;
+  private trigger: HTMLElement | null;
+
+  constructor(collapsibleWrapper: HTMLElement) {
+    this.wrapper = collapsibleWrapper;
+    this.content = this.wrapper.querySelector("[data-collapsible-content]");
+    this.trigger = this.wrapper.querySelector("[data-trigger]");
+
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+  }
+
+  private setupAccessibility() {
+    if (!this.trigger || !this.content) return;
+
+    const id =
+      this.content.id ||
+      `collapsible-id-${Math.random().toString(36).substring(2, 9)}`;
+
+    this.content.id = id;
+    this.trigger.setAttribute("aria-controls", id);
+
+    if (this.wrapper.dataset.open === "true") {
+      this.setState("open");
+      this.content?.removeAttribute("hidden");
+      const height = this.content?.scrollHeight + "px";
+      this.content!.style.maxHeight = height;
+    } else {
+      this.setState("closed");
+      this.content?.setAttribute("hidden", "");
+      this.content!.style.maxHeight = "0px";
+    }
+  }
+
+  private setupEventListeners() {
+    this.trigger?.addEventListener("click", () => this.toggleCollapsible());
+    this.trigger?.addEventListener("keydown", (e) => this.handleKeyDown(e));
+  }
+
+  private toggleCollapsible() {
+    if (this.trigger?.dataset.state === "open") {
+      this.closeCollapsible();
+    } else {
+      this.openCollapsible();
+    }
+  }
+
+  private openCollapsible() {
+    this.content?.removeAttribute("hidden");
+    this.setState("open");
+    const height = this.content?.scrollHeight + "px";
+    this.content!.style.maxHeight = height;
+  }
+
+  private closeCollapsible() {
+    this.setState("closed");
+    this.content!.style.maxHeight = "0px";
+    window.setTimeout(() => {
+      this.content?.setAttribute("hidden", "");
+    }, 300);
+  }
+
+  private setState(state: "closed" | "open") {
+    this.trigger?.setAttribute("data-state", state);
+    this.trigger?.setAttribute("aria-expanded", `${state === "open"}`);
+    this.content?.setAttribute("data-state", state);
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && this.content!.dataset.status === "open") {
+      this.closeCollapsible();
+      event.preventDefault();
+    }
+  };
+}

package/dist/astro/collapsible/index.ts

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

package/dist/astro/divider/Divider.astro

@@ -0,0 +1,22 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+
+const { class: className, orientation = "horizontal", ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  aria-orientation={orientation}
+  role="separator"
+  class={cn(
+    "shrink-0 bg-border",
+    orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+    className,
+  )}
+>
+</div>

package/dist/astro/divider/index.ts

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

package/dist/astro/drawer/Drawer.astro

@@ -0,0 +1,19 @@
+<div data-drawer-wrapper>
+  <slot />
+</div>
+
+<script>
+  import { Drawer } from "./drawer";
+
+  function init() {
+    const drawers = document.querySelectorAll<HTMLElement>(
+      "[data-drawer-wrapper]",
+    );
+    drawers.forEach((modal) => {
+      new Drawer(modal);
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", () => init());
+</script>

package/dist/astro/drawer/DrawerContent.astro

@@ -0,0 +1,74 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { drawerVariants } from "./drawerVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof drawerVariants> {
+  showCloseButton?: boolean;
+  backdrop?: boolean;
+  allowOutsideClick?: boolean;
+}
+
+const {
+  class: className,
+  showCloseButton = true,
+  backdrop = true,
+  allowOutsideClick = true,
+  position = "right",
+  size = "sm",
+  ...attrs
+} = Astro.props;
+---
+
+{
+  backdrop && (
+    <div
+      aria-hidden="true"
+      data-state="closed"
+      data-drawer-backdrop
+      class="bg-background/10 backdrop-blur-xs fixed inset-0 left-0 top-0 z-50 hidden h-dvh w-full transition-opacity duration-200"
+    />
+  )
+}
+
+<div
+  data-drawer-content
+  aria-hidden="true"
+  data-state="closed"
+  data-position={position}
+  data-show-close-button={showCloseButton}
+  data-allow-outside-click={allowOutsideClick}
+  class={cn(drawerVariants({ position, size, className }))}
+  {...attrs}
+>
+  {
+    showCloseButton && (
+      <button
+        class="text-foreground hover:bg-muted absolute right-3 top-3 cursor-pointer rounded-lg p-1 transition-colors duration-150"
+        aria-label="close modal"
+        data-close
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="size-4"
+        >
+          <>
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M18 6l-12 12" />
+            <path d="M6 6l12 12" />
+          </>
+        </svg>
+      </button>
+    )
+  }
+  <slot />
+</div>

package/dist/astro/drawer/DrawerDescription.astro

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

package/dist/astro/drawer/DrawerFooter.astro

@@ -0,0 +1,15 @@
+---
+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("pt-4 flex items-center justify-end gap-2", className)}
+  {...attrs}
+>
+  <slot />
+</div>

package/dist/astro/drawer/DrawerHeader.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("flex flex-col gap-1 pb-4", className)} {...attrs}>
+  <slot />
+</div>

package/dist/astro/drawer/DrawerTitle.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h5"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<h2
+  {...attrs}
+  class={cn(
+    "flex items-center justify-start gap-2 text-2xl font-semibold tracking-tight",
+    className,
+  )}
+>
+  <slot />
+</h2>

package/dist/astro/drawer/drawer.ts

@@ -0,0 +1,104 @@
+export class Drawer {
+  private wrapper: HTMLElement;
+  private drawer: HTMLElement | null;
+  private trigger: HTMLElement | null;
+  private backdrop: HTMLElement | null;
+  private closeButtons: NodeListOf<HTMLElement> | null;
+
+  constructor(drawerWrraper: HTMLElement) {
+    this.wrapper = drawerWrraper;
+    this.drawer = this.wrapper.querySelector("[data-drawer-content]");
+    this.backdrop = this.wrapper.querySelector("[data-drawer-backdrop]");
+    this.trigger = this.wrapper.querySelector("[data-trigger]");
+    this.closeButtons =
+      this.wrapper.querySelectorAll<HTMLElement>("[data-close]");
+
+    if (!this.drawer || !this.trigger) {
+      console.error("Drawer not initialized properly", {
+        drawer: this.drawer,
+        trigger: this.trigger,
+      });
+      return;
+    }
+
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+  }
+
+  private setupAccessibility() {
+    const title = this.drawer?.querySelector<HTMLElement>(
+      "h1, h2, h3, h4, h5, h6",
+    );
+
+    if (title) {
+      const id =
+        title.id || `drawer-id-${Math.random().toString(36).substring(2, 9)}`;
+      title.id = id;
+      this.drawer?.setAttribute("aria-describedby", id);
+    }
+
+    this.setState("closed");
+  }
+
+  private setupEventListeners() {
+    this.trigger!.addEventListener("click", () => this.openDrawer());
+
+    if (this.drawer?.dataset.allowOutsideClick === "true") {
+      this.backdrop?.addEventListener("click", () => this.closeDrawer());
+      document.addEventListener("click", (e) => {
+        const target = e.target as HTMLElement;
+        if (
+          this.drawer &&
+          !this.drawer.contains(target) &&
+          target !== this.trigger
+        ) {
+          this.closeDrawer();
+        }
+      });
+    }
+
+    this.closeButtons?.forEach((trigger) => {
+      trigger.addEventListener("click", () => this.closeDrawer());
+    });
+
+    document.addEventListener("keydown", (e) => this.handleKeyDown(e));
+  }
+
+  private openDrawer() {
+    this.backdrop?.classList.remove("hidden");
+    this.drawer?.classList.replace("hidden", "flex");
+
+    document.body.classList.add("overflow-hidden");
+    setTimeout(() => {
+      this.setState("open");
+    }, 0);
+  }
+
+  private closeDrawer() {
+    this.setState("closed");
+    setTimeout(() => {
+      this.backdrop?.classList.add("hidden");
+      this.drawer?.classList.replace("flex", "hidden");
+      document.body.classList.remove("overflow-hidden");
+    }, 200);
+  }
+
+  private setState(state: "open" | "closed") {
+    this.trigger?.focus();
+    this.drawer?.setAttribute("aria-hidden", `${state === "closed"}`);
+    this.drawer?.setAttribute("data-state", state);
+    this.backdrop?.setAttribute("aria-hidden", `${state === "closed"}`);
+    this.backdrop?.setAttribute("data-state", state);
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && this.drawer!.dataset.status === "open") {
+      this.closeDrawer();
+      event.preventDefault();
+    }
+  };
+}