@orbitkit/components 0.0.1 → 0.2.0-beta.1

package/dist/astro/switch/Switch.astro

@@ -1,19 +1,19 @@
----
-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;
----
-
-<label class="inline-flex cursor-pointer items-center" id={id}>
-  <input {...attrs} id={id} type="checkbox" class="peer sr-only" />
-  <span
-    class={cn(
-      "relative w-11 h-6 bg-input-border rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-      className,
-    )}
-  >
-  </span>
-</label>
+---
+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;
+---
+
+<label class="inline-flex cursor-pointer items-center" id={id}>
+  <input {...attrs} id={id} type="checkbox" class="peer sr-only" />
+  <span
+    class={cn(
+      "relative w-11 h-6 bg-input-border rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      className,
+    )}
+  >
+  </span>
+</label>

package/dist/astro/switch/index.ts

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

package/dist/astro/tab/Tab.astro

@@ -0,0 +1,33 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  defaultValue?: string;
+}
+
+const { class: className, defaultValue, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  data-tab
+  data-default-value={defaultValue}
+  class={cn(className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { Tab } from "./tab";
+
+  function init() {
+    const tabs = document.querySelectorAll<HTMLElement>("[data-tab]");
+    tabs.forEach((tab) => {
+      new Tab(tab);
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", () => init());
+</script>

package/dist/astro/tab/TabContent.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  value: string;
+}
+
+const { value } = Astro.props;
+---
+
+<div
+  role="tabpanel"
+  aria-orientation="horizontal"
+  data-tab-content
+  data-state="inactive"
+  data-value={value}
+  hidden
+  class="mt-2 w-full"
+>
+  <slot />
+</div>

package/dist/astro/tab/TabList.astro

@@ -0,0 +1,19 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className } = Astro.props;
+---
+
+<div
+  role="tablist"
+  data-tab-list
+  class={cn(
+    "flex flex-row justify-between flex-wrap bg-surface border border-border p-1 rounded-lg w-fit",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/tab/TabTrigger.astro

@@ -0,0 +1,24 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  value: string;
+}
+
+const { class: className, value } = Astro.props;
+---
+
+<button
+  role="tab"
+  aria-orientation="horizontal"
+  data-selected="false"
+  data-value={value}
+  data-tab-trigger
+  class={cn(
+    "rounded-sm px-3 py-1.5 flex justify-center gap-1.5 items-center font-medium cursor-pointer outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-100 ease-in data-[selected=true]:bg-secondary",
+    className,
+  )}
+>
+  <slot />
+</button>

package/dist/astro/tab/index.ts

@@ -0,0 +1,6 @@
+import Tab from "./Tab.astro";
+import TabContent from "./TabContent.astro";
+import TabList from "./TabList.astro";
+import TabTrigger from "./TabTrigger.astro";
+
+export { Tab, TabContent, TabList, TabTrigger };

package/dist/astro/tab/tab.ts

@@ -0,0 +1,142 @@
+export class Tab {
+  private tab: HTMLElement;
+  private tabList: HTMLElement | null;
+  private tabsTrigger: NodeListOf<HTMLElement> | null;
+  private tabContents: NodeListOf<HTMLElement> | null;
+  private contentMap: Map<string, HTMLElement> = new Map();
+
+  constructor(tabWrapper: HTMLElement) {
+    this.tab = tabWrapper;
+    this.tabList = this.tab.querySelector("[data-tab-list]");
+    this.tabsTrigger =
+      this.tabList?.querySelectorAll("[data-tab-trigger]") || null;
+    this.tabContents = this.tab.querySelectorAll("[data-tab-content]");
+
+    this.initializeContentMap();
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+    this.setDefaultTab();
+  }
+
+  private initializeContentMap(): void {
+    this.tabContents?.forEach((content) => {
+      const value = content.dataset.value?.toLowerCase();
+      if (value) {
+        if (this.contentMap.has(value)) {
+          console.warn(
+            `Duplicate data-value "${value}" found in content elements`,
+          );
+        }
+        this.contentMap.set(value, content);
+      }
+    });
+  }
+
+  private setupAccessibility() {
+    this.tabsTrigger?.forEach((trigger) => {
+      const triggerValue = trigger.dataset.value?.toLowerCase();
+      if (!triggerValue) return;
+
+      const content = this.contentMap.get(triggerValue);
+      if (!content) {
+        console.warn(`No content found for trigger value: ${triggerValue}`);
+        return;
+      }
+
+      const uniqueId = Math.random().toString(36).substring(2, 9);
+      const triggerId = trigger.id || `tab-trigger-${triggerValue}-${uniqueId}`;
+      const contentId = content.id || `tab-content-${triggerValue}-${uniqueId}`;
+
+      trigger.setAttribute("id", triggerId);
+      trigger.setAttribute("aria-controls", contentId);
+
+      content.setAttribute("id", contentId);
+      content.setAttribute("aria-labelledby", triggerId);
+    });
+  }
+
+  private setupEventListeners() {
+    this.tabsTrigger?.forEach((trigger) => {
+      trigger.addEventListener("click", () => this.activateTab(trigger));
+      trigger.addEventListener("keydown", (e) =>
+        this.handleKeydown(e, trigger),
+      );
+    });
+  }
+
+  private handleKeydown(event: KeyboardEvent, item: HTMLElement) {
+    const items = Array.from(this.tabsTrigger || []);
+    const currentItemIndex = items.indexOf(item);
+
+    const keyActions: Record<string, () => void> = {
+      ArrowRight: () => this.setFocusItem(items, currentItemIndex + 1),
+      ArrowLeft: () => this.setFocusItem(items, currentItemIndex - 1),
+      Home: () => this.setFocusItem(items, 0),
+      End: () => this.setFocusItem(items, items.length - 1),
+    };
+
+    const action = keyActions[event.key];
+    if (action) {
+      event.preventDefault();
+      action();
+    }
+  }
+
+  private setFocusItem(items: HTMLElement[], index: number) {
+    const newIndex = index % items.length;
+    if (items[newIndex]) {
+      this.activateTab(items[newIndex]);
+    }
+  }
+
+  private setDefaultTab() {
+    const defaultTrigger = this.getDefaultTrigger();
+    if (defaultTrigger) {
+      this.activateTab(defaultTrigger);
+    }
+  }
+
+  private getDefaultTrigger(): HTMLElement | undefined {
+    if (!this.tabsTrigger) return;
+
+    const defaultValue = this.tab.dataset.defaultValue?.toLowerCase();
+    if (defaultValue) {
+      return Array.from(this.tabsTrigger || []).find(
+        (trigger) => trigger.dataset.value?.toLowerCase() === defaultValue,
+      );
+    }
+    return this.tabsTrigger[0];
+  }
+
+  private activateTab(trigger: HTMLElement) {
+    this.tabsTrigger?.forEach((t) => {
+      t.setAttribute("aria-selected", "false");
+      t.setAttribute("data-selected", "false");
+      t.setAttribute("tabindex", "-1");
+    });
+
+    this.tabContents?.forEach((c) => {
+      c.setAttribute("data-state", "active");
+      c.setAttribute("hidden", "");
+    });
+
+    const triggerValue = trigger.dataset.value?.toLowerCase();
+    if (triggerValue) {
+      const content = this.contentMap.get(triggerValue);
+      if (content) {
+        content.removeAttribute("hidden");
+        setTimeout(() => {
+          content.setAttribute("data-state", "active");
+          trigger.setAttribute("aria-selected", "true");
+          trigger.setAttribute("data-selected", "true");
+          trigger.setAttribute("tabindex", "0");
+        }, 100);
+        trigger.focus();
+      }
+    }
+  }
+}

package/dist/astro/textarea/Textarea.astro

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

package/dist/astro/textarea/TextareaVariants.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 textareaVariants = 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 { textareaVariants };
+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 textareaVariants = 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 { textareaVariants };

package/dist/astro/textarea/index.ts

@@ -1,4 +1,4 @@
-import Textarea from "./Textarea.astro";
-import { textareaVariants } from "./TextareaVariants";
-
-export { Textarea, textareaVariants };
+import Textarea from "./Textarea.astro";
+import { textareaVariants } from "./TextareaVariants";
+
+export { Textarea, textareaVariants };

package/dist/astro/tooltip/Tooltip.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+  disableHoverableContent?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  duration?: number;
+}
+
+const {
+  openDelay = 150,
+  closeDelay = 150,
+  duration = 200,
+  disableHoverableContent = false,
+} = Astro.props;
+---
+
+<div
+  class="relative inline-flex"
+  data-tooltip
+  data-open-delay={openDelay}
+  data-close-delay={closeDelay}
+  data-duration={duration}
+  data-disable-hoverable-content={disableHoverableContent}
+>
+  <slot />
+</div>
+
+<script>
+  import { Tooltip } from "./tooltip";
+
+  function init() {
+    const tooltips = document.querySelectorAll<HTMLElement>("[data-tooltip]");
+    tooltips.forEach((tooltip) => {
+      new Tooltip(tooltip);
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", () => init());
+</script>

package/dist/astro/tooltip/TooltipContent.astro

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

package/dist/astro/tooltip/index.ts

@@ -0,0 +1,6 @@
+import Tooltip from "./Tooltip.astro";
+import TooltipContent from "./TooltipContent.astro";
+import TooltipTrigger from "./TooltipTrigger.astro";
+import { tooltipVariants } from "./tooltipVariants";
+
+export { Tooltip, TooltipContent, TooltipTrigger, tooltipVariants };

package/dist/astro/tooltip/tooltip.ts

@@ -0,0 +1,137 @@
+export class Tooltip {
+  // References to tooltip elements
+  private tooltip: HTMLElement;
+  private trigger: HTMLElement | null;
+  private content: HTMLElement | null;
+
+  // Tooltip configuration options
+  private duration: number;
+  private openDelay: number;
+  private closeDelay: number;
+
+  // Timers for managing tooltip open/close/hide delays
+  private openTimerId: number | null = null;
+  private closeTimerId: number | null = null;
+  private hideTimerId: number | null = null;
+
+  constructor(tooltip: HTMLElement) {
+    this.tooltip = tooltip;
+    this.content = this.tooltip.querySelector("[data-tooltip-content]");
+    this.trigger = this.tooltip.querySelector("[data-trigger]");
+
+    this.duration = parseFloat(tooltip.dataset.duration || "200");
+    this.openDelay = parseFloat(tooltip.dataset.openDelay || "0");
+    this.closeDelay = parseFloat(tooltip.dataset.closeDelay || "0");
+
+    if (!this.tooltip || !this.content || !this.trigger) {
+      console.error("Tooltip not initialized properly", {
+        container: this.tooltip,
+        trigger: this.trigger,
+        content: this.content,
+      });
+      return;
+    }
+
+    // If you want to use animations instead of transitions
+    // set animation duration instead of transition duration.
+    this.content.style.transitionDuration = `${this.duration}ms`;
+
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+  }
+
+  private setupAccessibility() {
+    if (!this.trigger || !this.content) return;
+
+    const id =
+      this.content.id ||
+      `tooltip-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("mouseenter", () => this.showTooltip());
+    this.trigger!.addEventListener("mouseleave", () => this.hideTooltip());
+    this.trigger.addEventListener("focus", () => this.showTooltip(true));
+    this.trigger.addEventListener("blur", () => this.hideTooltip(true));
+
+    if (this.tooltip.dataset.disableHoverableContent === "false") {
+      this.content.addEventListener("mouseenter", () => this.showTooltip());
+      this.content.addEventListener("mouseleave", () => this.hideTooltip());
+    }
+
+    document.addEventListener("keydown", (e) => this.handleKeyDown(e));
+  }
+
+  private showTooltip(instant: boolean = false) {
+    this.clearCloseTimer();
+    this.content?.classList.remove("hidden");
+
+    if (instant) {
+      this.setState("open");
+      return;
+    }
+
+    this.openTimerId = window.setTimeout(() => {
+      this.setState("open");
+      this.openTimerId = null;
+    }, this.openDelay);
+  }
+
+  private hideTooltip(instant: boolean = false) {
+    this.clearOpenTimer();
+
+    if (instant) {
+      this.setState("closed");
+      this.content?.classList.add("hidden");
+      return;
+    }
+
+    this.closeTimerId = window.setTimeout(() => {
+      this.setState("closed");
+      this.hideTimerId = window.setTimeout(() => {
+        this.content?.classList.add("hidden");
+        this.closeTimerId = null;
+        this.hideTimerId = null;
+      }, this.duration);
+    }, this.closeDelay);
+  }
+
+  private setState(state: "open" | "closed") {
+    this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
+    this.content?.setAttribute("data-state", state);
+  }
+
+  private clearOpenTimer() {
+    if (this.openTimerId) {
+      window.clearTimeout(this.openTimerId);
+      this.openTimerId = null;
+    }
+  }
+
+  private clearCloseTimer() {
+    if (this.closeTimerId) {
+      window.clearTimeout(this.closeTimerId);
+      this.closeTimerId = null;
+    }
+    if (this.hideTimerId) {
+      window.clearTimeout(this.hideTimerId);
+      this.hideTimerId = null;
+    }
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && this.content!.dataset.status === "open") {
+      this.hideTooltip(true);
+      event.preventDefault();
+    }
+  };
+}