@orbitkit/components 0.2.0 → 0.3.0

package/dist/astro/dropdown/dropdownVariants.ts

@@ -1,134 +1,134 @@
-import { cva } from "class-variance-authority";
-
-const baseClass = [
-  "hidden absolute z-50 bg-surface border border-border p-1 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 dropdownMenuVariants = 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 dropdownMenuItemBaseClass =
-  "flex justify-between items-center gap-2 px-2 py-1.5 text-sm cursor-default rounded-md outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4";
-
-const dropdownMenuItemVariants = cva(dropdownMenuItemBaseClass, {
-  variants: {
-    disabled: {
-      false: "hover:bg-foreground/5 focus:bg-foreground/5 ",
-      true: "opacity-70 pointer-events-none",
-    },
-  },
-  defaultVariants: {
-    disabled: false,
-  },
-});
-
-const arrowClass =
-  "absolute w-0 h-0 transition-all transform ease-in size-2 bg-surface transform rotate-45 border-border";
-
-const dropdownArrowVariants = 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 {
-  dropdownArrowVariants,
-  dropdownMenuItemVariants,
-  dropdownMenuVariants,
-};
+import { cva } from "class-variance-authority";
+
+const baseClass = [
+  "hidden absolute z-50 bg-surface border border-border p-1 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 dropdownMenuVariants = 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 dropdownMenuItemBaseClass =
+  "flex justify-between items-center gap-2 px-2 py-1.5 text-sm cursor-default rounded-md outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4";
+
+const dropdownMenuItemVariants = cva(dropdownMenuItemBaseClass, {
+  variants: {
+    disabled: {
+      false: "hover:bg-foreground/5 focus:bg-foreground/5 ",
+      true: "opacity-70 pointer-events-none",
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+  },
+});
+
+const arrowClass =
+  "absolute w-0 h-0 transition-all transform ease-in size-2 bg-surface transform rotate-45 border-border";
+
+const dropdownArrowVariants = 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 {
+  dropdownArrowVariants,
+  dropdownMenuItemVariants,
+  dropdownMenuVariants,
+};

package/dist/astro/dropdown/index.ts

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

@@ -1,71 +1,71 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  showCloseButton?: boolean;
-  backdrop?: boolean;
-  allowOutsideClick?: boolean;
-}
-
-const {
-  class: className,
-  showCloseButton = true,
-  backdrop = true,
-  allowOutsideClick = true,
-  ...attrs
-} = Astro.props;
----
-
-{
-  backdrop && (
-    <div
-      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
-    />
-  )
-}
-
-<div
-  data-modal
-  role="dialog"
-  aria-hidden="true"
-  data-state="closed"
-  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",
-    className,
-  )}
-  {...attrs}
->
-  {
-    showCloseButton && (
-      <button
-        class="text-foreground hover:bg-muted absolute right-3 top-3 cursor-pointer rounded-lg p-1 transition-colors duration-150"
-        aria-label="close modal"
-        data-close-modal
-      >
-        <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 d="M18 6l-12 12" />
-            <path d="M6 6l12 12" />
-          </>
-        </svg>
-      </button>
-    )
-  }
-  <slot />
-</div>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  showCloseButton?: boolean;
+  backdrop?: boolean;
+  allowOutsideClick?: boolean;
+}
+
+const {
+  class: className,
+  showCloseButton = true,
+  backdrop = true,
+  allowOutsideClick = true,
+  ...attrs
+} = Astro.props;
+---
+
+{
+  backdrop && (
+    <div
+      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
+    />
+  )
+}
+
+<div
+  data-modal
+  role="dialog"
+  aria-hidden="true"
+  data-state="closed"
+  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",
+    className,
+  )}
+  {...attrs}
+>
+  {
+    showCloseButton && (
+      <button
+        class="text-foreground hover:bg-muted absolute right-3 top-3 cursor-pointer rounded-lg p-1 transition-colors duration-150"
+        aria-label="close modal"
+        data-close-modal
+      >
+        <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 d="M18 6l-12 12" />
+            <path d="M6 6l12 12" />
+          </>
+        </svg>
+      </button>
+    )
+  }
+  <slot />
+</div>

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>