@orbitkit/components 0.1.0 → 0.2.0-beta.1

package/dist/astro/input/inputVariants.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";
-
-const inputVariants = cva(baseClass, {
-  variants: {
-    variant: {
-      default:
-        "text-foreground bg-input outline-input-border placeholder-input-placeholder",
-    },
-    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 { inputVariants };
+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";
+
+const inputVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default:
+        "text-foreground bg-input outline-input-border placeholder-input-placeholder",
+    },
+    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 { inputVariants };

package/dist/astro/kbd/Kbd.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"kbd"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<kbd
+  class={cn(
+    "border border-b-2 border-muted-foreground p-1 text-xs font-semibold text-foreground bg-muted rounded-lg uppercase",
+    className,
+  )}
+  {...attrs}
+>
+  <slot />
+</kbd>

package/dist/astro/kbd/index.ts

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

package/dist/astro/label/Label.astro

@@ -1,14 +1,14 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"label"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<label
-  {...attrs}
-  class={cn("block mb-2 text-sm font-medium text-foreground", className)}
-  ><slot /></label
->
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"label"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<label
+  {...attrs}
+  class={cn("block mb-2 text-sm font-medium text-foreground", className)}
+  ><slot /></label
+>

package/dist/astro/label/index.ts

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

package/dist/astro/list/List.astro

@@ -1,25 +1,25 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { listVariants } from "./ListVariants";
-
-interface Props
-  extends HTMLAttributes<"div">,
-    VariantProps<typeof listVariants> {}
-
-const {
-  class: className,
-  outerBorder,
-  innerBorders,
-  rounded,
-  ...attrs
-} = Astro.props;
----
-
-<div
-  {...attrs}
-  class={cn(listVariants({ outerBorder, innerBorders, rounded, className }))}
->
-  <slot />
-</div>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { listVariants } from "./ListVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof listVariants> {}
+
+const {
+  class: className,
+  outerBorder,
+  innerBorders,
+  rounded,
+  ...attrs
+} = Astro.props;
+---
+
+<div
+  {...attrs}
+  class={cn(listVariants({ outerBorder, innerBorders, rounded, className }))}
+>
+  <slot />
+</div>

package/dist/astro/list/ListItem.astro

@@ -1,39 +1,39 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { listItemVariants } from "./ListVariants";
-
-export interface Props
-  extends HTMLAttributes<"div">,
-    Omit<HTMLAttributes<"a">, "type" | "disabled">,
-    Omit<HTMLAttributes<"button">, "type" | "disabled">,
-    VariantProps<typeof listItemVariants> {
-  as?: "a" | "button" | "div";
-}
-
-const {
-  class: className,
-  as,
-  disabled,
-  rounded,
-  active,
-  ...attrs
-} = Astro.props;
-
-let Comp: typeof as = "div";
-if (as === "a" || Astro.props.href) {
-  Comp = "a";
-} else if (as === "button") {
-  Comp = "button";
-}
----
-
-<Comp
-  {...attrs}
-  disabled={disabled}
-  class={cn(listItemVariants({ active, disabled, rounded, className }))}
-  aria-label="list-item"
->
-  <slot />
-</Comp>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { listItemVariants } from "./ListVariants";
+
+export interface Props
+  extends HTMLAttributes<"div">,
+    Omit<HTMLAttributes<"a">, "type" | "disabled">,
+    Omit<HTMLAttributes<"button">, "type" | "disabled">,
+    VariantProps<typeof listItemVariants> {
+  as?: "a" | "button" | "div";
+}
+
+const {
+  class: className,
+  as,
+  disabled,
+  rounded,
+  active,
+  ...attrs
+} = Astro.props;
+
+let Comp: typeof as = "div";
+if (as === "a" || Astro.props.href) {
+  Comp = "a";
+} else if (as === "button") {
+  Comp = "button";
+}
+---
+
+<Comp
+  {...attrs}
+  disabled={disabled}
+  class={cn(listItemVariants({ active, disabled, rounded, className }))}
+  aria-label="list-item"
+>
+  <slot />
+</Comp>

package/dist/astro/list/ListVariants.ts

@@ -1,65 +1,65 @@
-import { cva } from "class-variance-authority";
-
-const baseClass = "flex flex-col bg-surface text-foreground overflow-hidden";
-
-const listVariants = cva(baseClass, {
-  variants: {
-    outerBorder: {
-      true: "border  border-border",
-      false: null,
-    },
-    innerBorders: {
-      true: "divide-y divide-border",
-      false: null,
-    },
-    rounded: {
-      none: "rounded-none",
-      xs: "rounded-xs",
-      sm: "rounded-sm",
-      md: "rounded-md",
-      lg: "rounded-lg",
-      xl: "rounded-xl",
-    },
-  },
-  defaultVariants: {
-    outerBorder: true,
-    innerBorders: true,
-    rounded: "lg",
-  },
-});
-
-const listItemBaseClass =
-  "px-4 py-2 flex items-center justify-between text-base text-start";
-
-const listItemVariants = cva(listItemBaseClass, {
-  variants: {
-    active: {
-      true: "bg-foreground/5",
-      false: null,
-    },
-    disabled: {
-      false: null,
-      true: "opacity-50 cursor-not-allowed",
-    },
-    rounded: {
-      none: "rounded-none",
-      xs: "rounded-xs",
-      sm: "rounded-sm",
-      md: "rounded-md",
-      lg: "rounded-lg",
-      xl: "rounded-xl",
-    },
-  },
-  compoundVariants: [
-    {
-      disabled: false,
-      class: "hover:bg-foreground/5 focus:outline-none",
-    },
-  ],
-  defaultVariants: {
-    disabled: false,
-    rounded: "none",
-  },
-});
-
-export { listItemVariants, listVariants };
+import { cva } from "class-variance-authority";
+
+const baseClass = "flex flex-col bg-surface text-foreground overflow-hidden";
+
+const listVariants = cva(baseClass, {
+  variants: {
+    outerBorder: {
+      true: "border  border-border",
+      false: null,
+    },
+    innerBorders: {
+      true: "divide-y divide-border",
+      false: null,
+    },
+    rounded: {
+      none: "rounded-none",
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+    },
+  },
+  defaultVariants: {
+    outerBorder: true,
+    innerBorders: true,
+    rounded: "lg",
+  },
+});
+
+const listItemBaseClass =
+  "px-4 py-2 flex items-center justify-between text-base text-start";
+
+const listItemVariants = cva(listItemBaseClass, {
+  variants: {
+    active: {
+      true: "bg-foreground/5",
+      false: null,
+    },
+    disabled: {
+      false: null,
+      true: "opacity-50 cursor-not-allowed",
+    },
+    rounded: {
+      none: "rounded-none",
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      class: "hover:bg-foreground/5 focus:outline-none",
+    },
+  ],
+  defaultVariants: {
+    disabled: false,
+    rounded: "none",
+  },
+});
+
+export { listItemVariants, listVariants };

package/dist/astro/list/index.ts

@@ -1,5 +1,5 @@
-import List from "./List.astro";
-import ListItem from "./ListItem.astro";
-import { listItemVariants, listVariants } from "./ListVariants";
-
-export { List, ListItem, listItemVariants, listVariants };
+import List from "./List.astro";
+import ListItem from "./ListItem.astro";
+import { listItemVariants, listVariants } from "./ListVariants";
+
+export { List, ListItem, listItemVariants, listVariants };

package/dist/astro/modal/Modal.astro

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

package/dist/astro/modal/ModalContent.astro

@@ -0,0 +1,71 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  showCloseButton?: boolean;
+  backdrop?: boolean;
+  allowOutsideClick?: boolean;
+}
+
+const {
+  class: className,
+  showCloseButton = true,
+  backdrop = true,
+  allowOutsideClick = true,
+  ...attrs
+} = Astro.props;
+---
+
+{
+  backdrop && (
+    <div
+      class="bg-background/10 fixed inset-0 left-0 top-0 z-50 hidden h-dvh w-full backdrop-blur-md transition-opacity duration-200"
+      aria-hidden="true"
+      data-state="closed"
+      data-backdrop
+    />
+  )
+}
+
+<div
+  data-modal
+  role="dialog"
+  aria-hidden="true"
+  data-state="closed"
+  data-show-close-button={showCloseButton}
+  data-allow-outside-click={allowOutsideClick}
+  class={cn(
+    "hidden fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-surface text-foreground border-border border rounded-lg shadow-sm p-6 w-full max-w-[calc(100%-2rem)] sm:max-w-md transform transition-all ease-in data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data[state=open]:opacity-100 data[state=open]:scale-100",
+    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-modal
+      >
+        <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/modal/ModalDescription.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/modal/ModalFooter.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
+  {...attrs}
+  class={cn("pt-4 flex items-center justify-end gap-2", className)}
+>
+  <slot />
+</div>

package/dist/astro/modal/ModalHeader.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} class={cn("flex flex-col gap-1 pb-4", className)}>
+  <slot />
+</div>

package/dist/astro/modal/ModalTitle.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h2"> {}
+
+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/modal/index.ts

@@ -0,0 +1,15 @@
+import Modal from "./Modal.astro";
+import ModalContent from "./ModalContent.astro";
+import ModalDescription from "./ModalDescription.astro";
+import ModalFooter from "./ModalFooter.astro";
+import ModalHeader from "./ModalHeader.astro";
+import ModalTitle from "./ModalTitle.astro";
+
+export {
+  Modal,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+};

package/dist/astro/modal/modal.ts

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