@orbitkit/components 0.1.0 → 0.2.0-beta.1

package/dist/astro/pagination/Pagination.astro

@@ -0,0 +1,12 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"nav"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<nav role="navigation" aria-label="pagination" class={cn(className)} {...attrs}>
+  <slot />
+</nav>

package/dist/astro/pagination/PaginationContent.astro

@@ -0,0 +1,15 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"ul"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<ul
+  class={cn("inline-flex justify-center items-center gap-2", className)}
+  {...attrs}
+>
+  <slot />
+</ul>

package/dist/astro/pagination/PaginationEllipsis.astro

@@ -0,0 +1,33 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"nav"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<span
+  aria-hidden="true"
+  class={cn("flex items-center justify-center", className)}
+  {...attrs}
+>
+  <slot>
+    <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>
+      <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
+      <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
+      <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
+    </svg>
+  </slot>
+  <span class="sr-only">More pages</span>
+</span>

package/dist/astro/pagination/PaginationItem.astro

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

package/dist/astro/pagination/PaginationLink.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { paginationLinkVariants } from "./paginationVariants";
+
+interface Props
+  extends HTMLAttributes<"a">,
+    VariantProps<typeof paginationLinkVariants> {}
+
+const { class: className, isActive, size, ...attrs } = Astro.props;
+---
+
+<a
+  data-active={isActive}
+  aria-current={isActive ? "page" : undefined}
+  class={cn(paginationLinkVariants({ isActive, size, className }))}
+  {...attrs}
+>
+  <slot />
+</a>

package/dist/astro/pagination/PaginationNext.astro

@@ -0,0 +1,29 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import PaginationLink from "./PaginationLink.astro";
+import type { paginationLinkVariants } from "./paginationVariants";
+
+interface Props
+  extends HTMLAttributes<"a">,
+    Omit<VariantProps<typeof paginationLinkVariants>, "isActive"> {}
+
+const { class: className, size } = Astro.props;
+---
+
+<PaginationLink size={size} aria-label="Go to next page" class={cn(className)}>
+  <slot />
+  <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"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M9 6l6 6l-6 6"></path></svg
+  >
+</PaginationLink>

package/dist/astro/pagination/PaginationPrevious.astro

@@ -0,0 +1,34 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import PaginationLink from "./PaginationLink.astro";
+import type { paginationLinkVariants } from "./paginationVariants";
+
+interface Props
+  extends HTMLAttributes<"a">,
+    Omit<VariantProps<typeof paginationLinkVariants>, "isActive"> {}
+
+const { class: className, size, ...attrs } = Astro.props;
+---
+
+<PaginationLink
+  aria-label="Go to previous page"
+  size={size}
+  class={cn(className)}
+  {...attrs}
+>
+  <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"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M15 6l-6 6l6 6"></path>
+  </svg>
+  <slot />
+</PaginationLink>

package/dist/astro/pagination/index.ts

@@ -0,0 +1,13 @@
+import Pagination from "./Pagination.astro";
+import PaginationContent from "./PaginationContent.astro";
+import PaginationEllipsis from "./PaginationEllipsis.astro";
+import PaginationItem from "./PaginationItem.astro";
+import PaginationLink from "./PaginationLink.astro";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+};

package/dist/astro/pagination/paginationVariants.ts

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "inline-flex justify-center gap-1.5 items-center rounded-lg font-medium cursor-pointer outline-none whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const paginationLinkVariants = cva(baseClass, {
+  variants: {
+    isActive: {
+      true: "border border-border",
+      false: "hover:bg-foreground/5",
+    },
+    size: {
+      xs: "px-3 py-2 text-xs [&_svg]:size-3.5",
+      sm: "px-3 py-2 text-sm [&_svg]:size-4",
+      md: "px-5 py-2.5 text-sm [&_svg]:size-4",
+      lg: "px-5 py-3 text-base [&_svg]:size-[18px]",
+      xl: "px-6 py-3.5 text-base [&_svg]:size-[18px]",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+    isActive: false,
+  },
+});
+
+export { paginationLinkVariants };

package/dist/astro/popover/Popover.astro

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

package/dist/astro/popover/PopoverContent.astro

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

package/dist/astro/popover/index.ts

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

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 HTMLAttributes<"option"> {}
-
-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>