@orbitkit/components 0.2.0-beta.1 → 0.3.0

package/dist/astro/tab/TabList.astro

@@ -1,19 +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>
+---
+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/toast/Toast.astro

@@ -0,0 +1,36 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  data-toast
+  class={cn(
+    "fixed z-[1000] p-4 bg-background text-foreground border border-border rounded-lg shadow-lg flex flex-row items-start gap-2 overflow-hidden opacity-0 duration-500 transition-all ease-in-out min-w-xs max-w-md data-[state=showing]:opacity-100 data-[state=hide]:pointer-events-none ",
+    className,
+  )}
+  {...attrs}
+>
+  <slot />
+</div>
+
+<style>
+  @reference "@/styles/global.css";
+
+  [data-toast][data-toast-type="success"] {
+    @apply border-green-500 bg-green-50 text-green-800;
+  }
+  [data-toast][data-toast-type="error"] {
+    @apply border-red-500 bg-red-50 text-red-800;
+  }
+  [data-toast][data-toast-type="warning"] {
+    @apply border-orange-400 bg-orange-50 text-orange-800;
+  }
+  [data-toast][data-toast-type="info"] {
+    @apply border-blue-500 bg-blue-50 text-blue-800;
+  }
+</style>

package/dist/astro/toast/ToastDescription.astro

@@ -0,0 +1,10 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<p data-toast-description class={cn("text-sm", className)} {...attrs}></p>

package/dist/astro/toast/ToastTitle.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h5"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<h5
+  data-toast-title
+  class={cn(
+    "font-medium flex items-center justify-start gap-2 text-sm",
+    className,
+  )}
+  {...attrs}
+>
+</h5>

package/dist/astro/toast/Toaster.astro

@@ -0,0 +1,78 @@
+---
+import Toast from "./Toast.astro";
+import ToastDescription from "./ToastDescription.astro";
+import ToastTitle from "./ToastTitle.astro";
+
+interface Props {
+  offset?: number;
+  gap?: number;
+  position?:
+    | "top-right"
+    | "top-center"
+    | "top-left"
+    | "bottom-right"
+    | "bottom-center"
+    | "bottom-left";
+  visibleToasts?: number;
+  dismissible?: boolean;
+  autoClose?: boolean;
+}
+
+const {
+  offset = 24,
+  gap = 16,
+  position = "bottom-right",
+  visibleToasts = 3,
+  dismissible = true,
+  autoClose = true,
+} = Astro.props;
+---
+
+<section
+  tabindex="-1"
+  data-toaster
+  data-position={position}
+  data-visible-toasts={visibleToasts}
+  data-offset={offset}
+  data-dismissible={dismissible}
+  data-position={position}
+  data-gap={gap}
+  data-auto-close={autoClose}
+>
+  <template id="toast-template">
+    <slot>
+      <Toast>
+        <div data-toast-icon></div>
+
+        <div>
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+
+        <button
+          class="absolute right-1 top-1 cursor-pointer rounded-lg p-1 transition-colors duration-150"
+          aria-label="close toast"
+          data-close
+          data-dismissible-button
+        >
+          <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="M18 6l-12 12"></path>
+              <path d="M6 6l12 12"></path>
+            </>
+          </svg>
+        </button>
+      </Toast>
+    </slot>
+  </template>
+</section>

package/dist/astro/toast/assets.ts

@@ -0,0 +1,6 @@
+export const toastIcons: Record<string, string> = {
+  success: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" /></svg>`,
+  error: `<svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-alert-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" /></svg>`,
+  warning: `<svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" /></svg>`,
+  info: `<svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 9h-1l-.117 .007a1 1 0 0 0 0 1.986l.117 .007v3l.007 .117a1 1 0 0 0 .876 .876l.117 .007h1l.117 -.007a1 1 0 0 0 .876 -.876l.007 -.117l-.007 -.117a1 1 0 0 0 -.764 -.857l-.112 -.02l-.117 -.006v-3l-.007 -.117a1 1 0 0 0 -.876 -.876l-.117 -.007zm.01 -3l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z" /></svg>`,
+};

package/dist/astro/toast/index.ts

@@ -0,0 +1,30 @@
+import { toastIcons } from "./assets";
+import type {
+  ToastDomElements,
+  ToastOptions,
+  ToastPosition,
+  ToastType,
+} from "./toast";
+import { Toast as ToastHandler } from "./toast";
+import Toast from "./Toast.astro";
+import ToastDescription from "./ToastDescription.astro";
+import ToastTitle from "./ToastTitle.astro";
+
+export { Toast, ToastDescription, ToastHandler, toastIcons, ToastTitle };
+export type { ToastDomElements, ToastOptions, ToastPosition, ToastType };
+
+export const toast = Object.assign(
+  (opts: ToastOptions) => new ToastHandler(opts),
+  {
+    success: (opts: Omit<ToastOptions, "type">) =>
+      new ToastHandler({ ...opts, type: "success" }),
+    error: (opts: Omit<ToastOptions, "type">) =>
+      new ToastHandler({ ...opts, type: "error" }),
+    warning: (opts: Omit<ToastOptions, "type">) =>
+      new ToastHandler({ ...opts, type: "warning" }),
+    info: (opts: Omit<ToastOptions, "type">) =>
+      new ToastHandler({ ...opts, type: "info" }),
+    default: (opts: Omit<ToastOptions, "type">) =>
+      new ToastHandler({ ...opts, type: "default" }),
+  },
+);

package/dist/astro/toast/toast.ts

@@ -0,0 +1,277 @@
+import { toastIcons } from "./assets";
+
+export interface ToastDomElements {
+  title: HTMLElement | null;
+  description: HTMLElement | null;
+  dismissibleButton: HTMLElement | null;
+  iconContainer: HTMLElement | null;
+  closeButtons: NodeListOf<HTMLElement>;
+}
+
+export type ToastPosition =
+  | "top-right"
+  | "top-center"
+  | "top-left"
+  | "bottom-right"
+  | "bottom-center"
+  | "bottom-left";
+
+export type ToastType = "default" | "success" | "error" | "warning" | "info";
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  duration?: number;
+  dismissible?: boolean;
+  autoClose?: boolean;
+  type?: ToastType;
+  onClose?: () => void;
+}
+
+const DEFAULT_DURATION = 3000;
+const DEFAULT_MAX_VISIBLE_TOASTS = 3;
+const DEFAULT_OFFSET = 24;
+const DEFAULT_GAP = 16;
+const DEFAULT_POSITION: ToastPosition = "bottom-right";
+const DEFAULT_TOAST_TYPE: ToastType = "default";
+
+export class Toast {
+  private static instances: HTMLElement[] = [];
+
+  private opts: ToastOptions;
+  private toaster: HTMLElement | null;
+  private toast: HTMLElement | null;
+  private elements: ToastDomElements;
+
+  private duration: number;
+  private startTime: number = 0;
+  private remainingTime: number = 0;
+  private timeoutId: number | null = null;
+  private position: ToastPosition;
+  private dismissible: boolean;
+  private autoClose: boolean;
+
+  private maxVisibleToasts: number;
+  private offset: number;
+  private gap: number;
+
+  constructor(opts: ToastOptions) {
+    this.opts = opts;
+
+    this.toaster = document.querySelector("[data-toaster]");
+    if (!this.toaster) {
+      throw new Error(
+        "Toaster container with 'data-toaster' attribute not found in the document.",
+      );
+    }
+
+    this.toast = this.getTemplate().querySelector(
+      "[data-toast]",
+    ) as HTMLElement;
+    if (!this.toast) {
+      throw new Error("Toast element with 'data-toast' not found in template.");
+    }
+
+    this.elements = {
+      title: this.toast.querySelector("[data-toast-title]"),
+      description: this.toast.querySelector("[data-toast-description]"),
+      iconContainer: this.toast.querySelector("[data-toast-icon]"),
+      closeButtons: this.toast.querySelectorAll("[data-close]") ?? [],
+      dismissibleButton: this.toast.querySelector("[data-dismissible-button]"),
+    };
+
+    this.gap = parseInt(this.toaster.dataset.gap ?? `${DEFAULT_GAP}`, 10);
+    this.maxVisibleToasts = parseInt(
+      this.toaster.dataset.visibleToasts ?? `${DEFAULT_MAX_VISIBLE_TOASTS}`,
+      10,
+    );
+    this.offset = parseInt(
+      this.toaster.dataset.offset ?? `${DEFAULT_OFFSET}`,
+      10,
+    );
+    this.position =
+      (this.toaster?.dataset.position as typeof this.position) ??
+      DEFAULT_POSITION;
+    this.duration =
+      this.opts.duration ??
+      parseInt(this.toaster.dataset.duration ?? `${DEFAULT_DURATION}`);
+    this.dismissible =
+      this.opts.dismissible ?? this.toaster.dataset.dismissible === "true";
+    this.autoClose =
+      this.opts.autoClose ?? this.toaster.dataset.autoClose === "true";
+
+    this.init();
+  }
+
+  private init() {
+    this.initializeToastContent();
+    this.calculateInitialPosition();
+    this.setupAccessibility();
+    this.setupEventListeners();
+    this.showToast();
+  }
+
+  private setupAccessibility() {
+    if (this.toast) {
+      this.toast.setAttribute("role", "alert");
+      this.toast.setAttribute("aria-live", "assertive");
+      this.toast.setAttribute("aria-atomic", "true");
+    }
+  }
+
+  private initializeToastContent() {
+    this.toast!.setAttribute(
+      "data-toast-type",
+      this.opts.type ?? DEFAULT_TOAST_TYPE,
+    );
+
+    if (this.elements.iconContainer) {
+      const iconType = toastIcons[this.opts.type ?? DEFAULT_TOAST_TYPE];
+      if (iconType) {
+        this.elements.iconContainer.innerHTML = iconType;
+      } else {
+        this.elements.iconContainer.remove();
+        this.elements.iconContainer = null;
+      }
+    }
+
+    if (this.elements.title) {
+      this.elements.title.textContent = this.opts.title;
+    } else {
+      console.warn(
+        "Toast title element not found. Title might not be displayed.",
+      );
+    }
+
+    if (this.opts.description && this.elements.description) {
+      this.elements.description.textContent = this.opts.description;
+    } else if (this.elements.description) {
+      this.elements.description.remove();
+      this.elements.description = null;
+    }
+
+    if (!this.dismissible && this.elements.dismissibleButton) {
+      this.elements.dismissibleButton.remove();
+      this.elements.dismissibleButton = null;
+    }
+  }
+
+  private setupEventListeners() {
+    this.elements.closeButtons.forEach((trigger) => {
+      trigger.addEventListener("click", () => this.removeToast());
+    });
+    this.toaster!.addEventListener("mouseenter", () => this.handleMouseEnter());
+    this.toaster!.addEventListener("mouseleave", () => this.handleMouseLeave());
+  }
+
+  private showToast() {
+    this.toaster?.insertAdjacentElement("afterbegin", this.toast!);
+    Toast.instances.unshift(this.toast!);
+    this.adjustToastPositions();
+    this.setState(this.toast!, "showing");
+
+    if (this.autoClose) {
+      this.startTime = Date.now();
+      this.remainingTime = this.duration;
+      this.timeoutId = window.setInterval(() => {
+        this.removeToast();
+        this.opts.onClose?.();
+      }, this.duration);
+    }
+  }
+
+  private removeToast() {
+    this.setState(this.toast!, "hide");
+    const index = Toast.instances.indexOf(this.toast!);
+    if (index !== -1) {
+      Toast.instances.splice(index, 1);
+    }
+    this.adjustToastPositions();
+
+    setTimeout(() => {
+      this.toast?.remove();
+      this.opts.onClose?.();
+    }, 500);
+  }
+
+  private adjustToastPositions() {
+    const isButtom = this.position.startsWith("bottom");
+    let accumulatedHeight = this.offset;
+
+    Toast.instances.forEach((currentToast, index) => {
+      accumulatedHeight += currentToast.offsetHeight;
+      const verticalOffset = accumulatedHeight + index * this.gap;
+
+      const sign = isButtom ? -1 : 1;
+      const translateYValue =
+        sign * (verticalOffset - currentToast.offsetHeight);
+
+      let translateXValue = "";
+      if (this.position.endsWith("center")) {
+        translateXValue = "translateX(-50%)";
+      }
+
+      currentToast.style.transform = `${translateXValue} translateY(${translateYValue}px)`;
+
+      this.setState(
+        currentToast,
+        index < this.maxVisibleToasts ? "showing" : "hide",
+      );
+    });
+  }
+
+  private handleMouseEnter() {
+    if (!this.autoClose) return;
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      const elapsedTime = Date.now() - this.startTime;
+      this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);
+      this.timeoutId = null;
+    }
+  }
+
+  private handleMouseLeave() {
+    if (!this.autoClose) return;
+    if (this.remainingTime > 0) {
+      this.startTime = Date.now();
+      this.timeoutId = window.setTimeout(
+        () => this.removeToast(),
+        this.remainingTime,
+      );
+    } else {
+      this.removeToast();
+    }
+  }
+
+  private calculateInitialPosition() {
+    const [y, x] = this.position.split("-");
+
+    if (y === "top") {
+      this.toast!.style.top = `0px`;
+    } else {
+      this.toast!.style.bottom = `0px`;
+    }
+
+    if (x === "left") {
+      this.toast!.style.left = `${this.offset}px`;
+    } else if (x === "center") {
+      this.toast!.style.left = "50%";
+      this.toast!.style.transform = "translateX(-50%)";
+    } else {
+      this.toast!.style.right = `${this.offset}px`;
+    }
+  }
+
+  private setState(toast: HTMLElement, state: "showing" | "hide") {
+    toast.setAttribute("data-state", state);
+  }
+
+  private getTemplate() {
+    const toastTemplate =
+      this.toaster?.querySelector<HTMLTemplateElement>("#toast-template");
+    if (!toastTemplate) {
+      throw new Error("Toast template not found in the document.");
+    }
+    return toastTemplate.content.cloneNode(true) as DocumentFragment;
+  }
+}

package/dist/astro/tooltip/Tooltip.astro

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

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

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