@orbitkit/components 0.2.0-beta.1 → 0.3.0

package/dist/astro/dropdown/index.ts

@@ -1,15 +1,23 @@
-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,
-};
+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";
+import {
+  dropdownArrowVariants,
+  dropdownMenuItemVariants,
+  dropdownMenuVariants,
+} from "./dropdownVariants";
+
+export {
+  dropdownArrowVariants,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  dropdownMenuItemVariants,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  dropdownMenuVariants,
+};

package/dist/astro/marquee/Marquee.astro

@@ -0,0 +1,53 @@
+---
+import { cn } from "@/utils/cn";
+
+interface Props {
+  duration?: number;
+  gap?: number;
+  repeat?: number;
+  pauseOnHover?: boolean;
+  vertical?: boolean;
+  reverse?: boolean;
+}
+
+const {
+  duration = 10,
+  gap = 1,
+  repeat = 4,
+  pauseOnHover = true,
+  vertical = false,
+  reverse = false,
+} = Astro.props;
+---
+
+<div
+  class={cn(
+    "group flex overflow-hidden max-w-max p-2 gap-(--gap)",
+    vertical ? "flex-col" : "flex-row",
+  )}
+  style={{
+    "--gap": `${gap}rem`,
+    "--duration": `${duration}s`,
+  }}
+>
+  {
+    Array(repeat)
+      .fill(0)
+      .map(() => (
+        <div
+          class={cn(
+            "gap-(--gap) flex shrink-0 justify-around",
+            {
+              "group-hover:[animation-play-state:paused]": pauseOnHover,
+              "[animation-direction:reverse]": reverse,
+            },
+            vertical
+              ? "animate-marquee-vertical flex-col"
+              : "animate-marquee-horizontal flex-row",
+          )}
+        >
+          <slot />
+        </div>
+      ))
+  }
+</div>

package/dist/astro/marquee/index.ts

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

package/dist/astro/modal/Modal.astro

@@ -1,19 +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>
+<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

@@ -20,7 +20,7 @@ const {
 {
   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"
+      class="bg-background fixed inset-0 left-0 top-0 z-50 hidden h-dvh w-full transition-opacity duration-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-80"
       aria-hidden="true"
       data-state="closed"
       data-backdrop
@@ -36,7 +36,7 @@ const {
   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",
+    "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}

package/dist/astro/modal/ModalDescription.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/modal/ModalFooter.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("pt-4 flex items-center justify-end 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("pt-4 flex items-center justify-end gap-2", className)}
+>
+  <slot />
+</div>

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

package/dist/astro/modal/ModalTitle.astro

@@ -1,18 +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>
+---
+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

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

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

package/dist/astro/pagination/index.ts

@@ -3,6 +3,7 @@ import PaginationContent from "./PaginationContent.astro";
 import PaginationEllipsis from "./PaginationEllipsis.astro";
 import PaginationItem from "./PaginationItem.astro";
 import PaginationLink from "./PaginationLink.astro";
+import { paginationLinkVariants } from "./paginationVariants";
 
 export {
   Pagination,
@@ -10,4 +11,5 @@ export {
   PaginationEllipsis,
   PaginationItem,
   PaginationLink,
+  paginationLinkVariants,
 };

package/dist/astro/popover/Popover.astro

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

package/dist/astro/popover/PopoverContent.astro

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

package/dist/astro/popover/index.ts

@@ -1,4 +1,5 @@
-import Popover from "./Popover.astro";
-import PopoverContent from "./PopoverContent.astro";
-
-export { Popover, PopoverContent };
+import Popover from "./Popover.astro";
+import PopoverContent from "./PopoverContent.astro";
+import { popoverArrowVariants, popoverVariants } from "./popoverVariants";
+
+export { Popover, popoverArrowVariants, PopoverContent, popoverVariants };