@orbitkit/components 0.2.0 → 0.3.0

package/dist/astro/popover/popoverVariants.ts

@@ -1,115 +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 };
+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/scroll-progress/ScrollProgress.astro

@@ -0,0 +1,41 @@
+---
+import ScrollProgressBar from "./ScrollProgressBar.astro";
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  class={cn("fixed top-0 left-0 w-full h-[2px] bg-muted z-[1000]", className)}
+  {...attrs}
+>
+  <slot>
+    <ScrollProgressBar />
+  </slot>
+</div>
+
+<script>
+  function initScrollProgress() {
+    const bar = document.querySelector<HTMLElement>(
+      "[data-scroll-progress-bar]",
+    );
+    if (!bar) return;
+
+    function updateBar() {
+      const total = document.documentElement.scrollHeight - window.innerHeight;
+      const progress = (window.scrollY / total) * 100;
+      bar!.style.width = `${progress}%`;
+    }
+
+    window.addEventListener("scroll", updateBar);
+    updateBar();
+  }
+
+  initScrollProgress();
+  document.addEventListener("astro:after-swap", () => {
+    initScrollProgress();
+  });
+</script>

package/dist/astro/scroll-progress/ScrollProgressBar.astro

@@ -0,0 +1,19 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  data-scroll-progress-bar
+  class={cn(
+    "h-full bg-primary transition-all duration-100 ease-out",
+    className,
+  )}
+  style="width: 0%;"
+  {...attrs}
+>
+</div>

package/dist/astro/scroll-progress/index.ts

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

package/dist/astro/stat/Stat.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 class={cn("inline-flex flex-col gap-0.5", className)} {...attrs}>
-  <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 class={cn("inline-flex flex-col gap-0.5", className)} {...attrs}>
+  <slot />
+</div>

package/dist/astro/stat/StatDescription.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;
----
-
-<p class={cn("text-sm text-foreground/70", className)} {...attrs}>
-  <slot />
-</p>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<p class={cn("text-sm text-foreground/70", className)} {...attrs}>
+  <slot />
+</p>

package/dist/astro/stat/StatTitle.astro

@@ -1,18 +1,18 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"h3"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<h3
-  class={cn(
-    "text-sm font-medium text-foreground/80 uppercase tracking-wide",
-    className,
-  )}
-  {...attrs}
->
-  <slot />
-</h3>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h3"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<h3
+  class={cn(
+    "text-sm font-medium text-foreground/80 uppercase tracking-wide",
+    className,
+  )}
+  {...attrs}
+>
+  <slot />
+</h3>

package/dist/astro/stat/StatValue.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;
----
-
-<span class={cn("text-3xl font-bold text-foreground", className)} {...attrs}>
-  <slot />
-</span>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<span class={cn("text-3xl font-bold text-foreground", className)} {...attrs}>
+  <slot />
+</span>

package/dist/astro/stat/index.ts

@@ -1,6 +1,6 @@
-import Stat from "./Stat.astro";
-import StatDescription from "./StatDescription.astro";
-import StatTitle from "./StatTitle.astro";
-import StatValue from "./StatValue.astro";
-
-export { Stat, StatDescription, StatTitle, StatValue };
+import Stat from "./Stat.astro";
+import StatDescription from "./StatDescription.astro";
+import StatTitle from "./StatTitle.astro";
+import StatValue from "./StatValue.astro";
+
+export { Stat, StatDescription, StatTitle, StatValue };

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" }),
+  },
+);