@orbitkit/components 0.1.0 → 0.2.0-beta.1

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

package/dist/astro/drawer/drawerVariants.ts

@@ -0,0 +1,83 @@
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "hidden fixed flex-col z-50 p-6 bg-surface text-foreground border-border shadow-sm transform duration-200 transition-all ease-in-out data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
+
+const drawerVariants = cva(baseClass, {
+  variants: {
+    position: {
+      top: "w-full top-0 left-0 border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0 mb-8",
+      bottom:
+        "w-full bottom-0 left-0 border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0 mt-8",
+      left: "h-dvh top-0 left-0 border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0 mr-8",
+      right:
+        "h-dvh top-0 right-0 border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 ml-8",
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: "",
+      full: "",
+    },
+  },
+  compoundVariants: [
+    {
+      position: ["left", "right"],
+      size: "sm",
+      class: "max-w-sm",
+    },
+    {
+      position: ["left", "right"],
+      size: "md",
+      class: "max-w-md",
+    },
+    {
+      position: ["left", "right"],
+      size: "lg",
+      class: "max-w-lg",
+    },
+    {
+      position: ["left", "right"],
+      size: "xl",
+      class: "max-w-xl",
+    },
+    {
+      position: ["left", "right"],
+      size: "full",
+      class: "w-full",
+    },
+    {
+      position: ["top", "bottom"],
+      size: "sm",
+      class: "max-h-[var(--container-sm)]",
+    },
+    {
+      position: ["top", "bottom"],
+      size: "md",
+      class: "max-h-[var(--container-md)]",
+    },
+    {
+      position: ["top", "bottom"],
+      size: "lg",
+      class: "max-h-[var(--container-lg)]",
+    },
+    {
+      position: ["top", "bottom"],
+      size: "xl",
+      class: "max-h-[var(--container-xl)]",
+    },
+    {
+      position: ["top", "bottom"],
+      size: "full",
+      class: "h-dvh",
+    },
+  ],
+  defaultVariants: {
+    position: "right",
+    size: "sm",
+  },
+});
+
+export { drawerVariants };

package/dist/astro/drawer/index.ts

@@ -0,0 +1,15 @@
+import Drawer from "./Drawer.astro";
+import DrawerContent from "./DrawerContent.astro";
+import DrawerDescription from "./DrawerDescription.astro";
+import DrawerFooter from "./DrawerFooter.astro";
+import DrawerHeader from "./DrawerHeader.astro";
+import DrawerTitle from "./DrawerTitle.astro";
+
+export {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+};

package/dist/astro/dropdown/DropdownMenu.astro

@@ -0,0 +1,19 @@
+<div class="relative" data-dropdown-menu>
+  <slot />
+</div>
+
+<script>
+  import { DowndownMenu } from "./dropdown";
+
+  function init() {
+    const dropdowns = document.querySelectorAll<HTMLElement>(
+      "[data-dropdown-menu]",
+    );
+    dropdowns.forEach((dropdown) => {
+      new DowndownMenu(dropdown);
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", () => init());
+</script>

package/dist/astro/dropdown/DropdownMenuContent.astro

@@ -0,0 +1,42 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import {
+  dropdownArrowVariants,
+  dropdownMenuVariants,
+} from "./dropdownVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof dropdownMenuVariants> {
+  sideOffset?: number;
+  arrow?: boolean;
+}
+
+const {
+  class: className,
+  side,
+  alignment,
+  sideOffset = 2,
+  arrow = false,
+  ...attrs
+} = Astro.props;
+---
+
+<div
+  {...attrs}
+  role="menu"
+  data-dropdown-content
+  aria-hidden="true"
+  data-state="closed"
+  data-side={sideOffset}
+  data-alignment={alignment}
+  class={cn(dropdownMenuVariants({ side, alignment, className }))}
+  style={{
+    "--tooltip-offset": `calc(var(--spacing) * ${sideOffset})`,
+  }}
+>
+  <slot />
+  {arrow && <span class={cn(dropdownArrowVariants({ side, alignment }))} />}
+</div>

package/dist/astro/dropdown/DropdownMenuGroup.astro

@@ -0,0 +1,3 @@
+<div role="group">
+  <slot />
+</div>

package/dist/astro/dropdown/DropdownMenuItem.astro

@@ -0,0 +1,27 @@
+---
+import { cn } from "@/utils/cn";
+import type { VariantProps } from "class-variance-authority";
+import { dropdownMenuItemVariants } from "./dropdownVariants";
+
+import type { HTMLTag, Polymorphic } from "astro/types";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> &
+  VariantProps<typeof dropdownMenuItemVariants>;
+
+const {
+  class: className,
+  as: Tag = "div",
+  disabled = false,
+  ...attrs
+} = Astro.props;
+---
+
+<Tag
+  role="menuitem"
+  tabindex={disabled ? "-1" : "0"}
+  data-disabled={disabled}
+  class={cn(dropdownMenuItemVariants({ disabled, className }))}
+  {...attrs}
+>
+  <slot />
+</Tag>

package/dist/astro/dropdown/DropdownMenuLabel.astro

@@ -0,0 +1,3 @@
+<div class="px-2 py-1.5 text-sm font-medium">
+  <slot />
+</div>

package/dist/astro/dropdown/DropdownMenuSeparator.astro

@@ -0,0 +1,6 @@
+<div
+  role="separator"
+  aria-orientation="horizontal"
+  class="bg-border -mx-1 my-1 h-px"
+>
+</div>

package/dist/astro/dropdown/dropdown.ts

@@ -0,0 +1,157 @@
+export class DowndownMenu {
+  // References to tooltip elements
+  private dropdownMenu: HTMLElement;
+  private trigger: HTMLElement | null;
+  private content: HTMLElement | null;
+  private menuItems: HTMLElement[] = [];
+
+  constructor(dropowndMenu: HTMLElement) {
+    this.dropdownMenu = dropowndMenu;
+    this.content = this.dropdownMenu.querySelector("[data-dropdown-content]");
+    this.trigger = this.dropdownMenu.querySelector("[data-trigger]");
+    this.menuItems = Array.from(
+      this.content?.querySelectorAll(
+        '[role="menuitem"]:not([data-disabled="true"])',
+      ) || [],
+    );
+
+    if (!this.content || !this.trigger) {
+      console.error("Dropdown 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 ||
+      `dropdown-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.toggleDropdown());
+
+    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.closeDropdown();
+      }
+    });
+
+    document.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      if (
+        this.content &&
+        !this.content.contains(target) &&
+        target !== this.trigger
+      ) {
+        this.closeDropdown();
+      }
+    });
+
+    this.trigger.addEventListener("keydown", (e) => {
+      const isOpen = this.content?.dataset.state === "open";
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.toggleDropdown();
+      } else if (e.key === "Escape" && isOpen) {
+        e.preventDefault();
+        this.closeDropdown();
+      } else if (isOpen && e.key === "ArrowDown") {
+        e.preventDefault();
+        this.setFocusItem(0);
+      } else if (isOpen && e.key === "ArrowUp") {
+        e.preventDefault();
+        this.setFocusItem(this.menuItems.length - 1);
+      }
+    });
+
+    this.menuItems.forEach((menuItem) => {
+      menuItem.addEventListener("keydown", (e) =>
+        this.handleMenuKeydown(e, menuItem),
+      );
+    });
+    document.addEventListener("keydown", (e) => this.handleKeydown(e));
+  }
+
+  private toggleDropdown() {
+    if (this.content?.dataset.state === "open") {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+
+  private openDropdown() {
+    this.content?.classList.remove("hidden");
+
+    window.setTimeout(() => {
+      this.setState("open");
+    }, 0);
+  }
+
+  private closeDropdown() {
+    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.closeDropdown();
+      event.preventDefault();
+    }
+  };
+
+  private handleMenuKeydown(event: KeyboardEvent, item: HTMLElement) {
+    const currentItemIndex = this.menuItems.indexOf(item);
+
+    const keyActions: Record<string, () => void> = {
+      ArrowDown: () => this.setFocusItem(currentItemIndex + 1),
+      ArrowUp: () => this.setFocusItem(currentItemIndex - 1),
+      Home: () => this.setFocusItem(0),
+      End: () => this.setFocusItem(this.menuItems.length - 1),
+      Enter: () => item.click(),
+      " ": () => item.click(),
+    };
+
+    const action = keyActions[event.key];
+    if (action) {
+      event.preventDefault();
+      action();
+    }
+  }
+
+  private setFocusItem(index: number) {
+    const newIndex = (index + this.menuItems.length) % this.menuItems.length;
+
+    if (this.menuItems[newIndex]) {
+      this.menuItems[newIndex].focus();
+    }
+  }
+}

package/dist/astro/dropdown/dropdownVariants.ts

@@ -0,0 +1,134 @@
+import { cva } from "class-variance-authority";
+
+const baseClass = [
+  "hidden absolute z-50 bg-surface border border-border p-1 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 dropdownMenuVariants = 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 dropdownMenuItemBaseClass =
+  "flex justify-between items-center gap-2 px-2 py-1.5 text-sm cursor-default rounded-md outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4";
+
+const dropdownMenuItemVariants = cva(dropdownMenuItemBaseClass, {
+  variants: {
+    disabled: {
+      false: "hover:bg-foreground/5 focus:bg-foreground/5 ",
+      true: "opacity-70 pointer-events-none",
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+  },
+});
+
+const arrowClass =
+  "absolute w-0 h-0 transition-all transform ease-in size-2 bg-surface transform rotate-45 border-border";
+
+const dropdownArrowVariants = 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 {
+  dropdownArrowVariants,
+  dropdownMenuItemVariants,
+  dropdownMenuVariants,
+};

package/dist/astro/dropdown/index.ts

@@ -0,0 +1,15 @@
+import DropdownMenu from "./DropdownMenu.astro";
+import DropdownMenuContent from "./DropdownMenuContent.astro";
+import DropdownMenuGroup from "./DropdownMenuGroup.astro";
+import DropdownMenuItem from "./DropdownMenuItem.astro";
+import DropdownMenuLabel from "./DropdownMenuLabel.astro";
+import DropdownMenuSeparator from "./DropdownMenuSeparator.astro";
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+};

package/dist/astro/input/Input.astro

@@ -1,18 +1,18 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { inputVariants } from "./inputVariants";
-
-interface Props
-  extends Omit<HTMLAttributes<"input">, "disabled">,
-    VariantProps<typeof inputVariants> {}
-
-const { class: className, variant, disabled, ...attrs } = Astro.props;
----
-
-<input
-  {...attrs}
-  disabled={disabled}
-  class={cn(inputVariants({ variant, disabled, className }))}
-/>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { inputVariants } from "./inputVariants";
+
+interface Props
+  extends Omit<HTMLAttributes<"input">, "disabled">,
+    VariantProps<typeof inputVariants> {}
+
+const { class: className, variant, disabled, ...attrs } = Astro.props;
+---
+
+<input
+  {...attrs}
+  disabled={disabled}
+  class={cn(inputVariants({ variant, disabled, className }))}
+/>

package/dist/astro/input/index.ts

@@ -1,4 +1,4 @@
-import Input from "./Input.astro";
-import { inputVariants } from "./inputVariants";
-
-export { Input, inputVariants };
+import Input from "./Input.astro";
+import { inputVariants } from "./inputVariants";
+
+export { Input, inputVariants };