@orbitkit/components 0.2.0 → 0.4.0

package/dist/astro/button-group/buttonGroupVariants.ts

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "inline-flex items-stretch w-fit *:focus:relative *:focus:z-10 has-[>[data-button-group]]:gap-2";
+const buttonGroupVariants = cva(baseClass, {
+  variants: {
+    orientation: {
+      vertical: [
+        "flex-row",
+        "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-r-none",
+        "[&>*:not(:first-child)>select]:rounded-l-none [&>*:not(:first-child)>select]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))>select]:rounded-r-none",
+        "[&>*:not(:first-child)>[data-trigger]]:rounded-l-none [&>*:not(:first-child)>[data-trigger]]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))>[data-trigger]]:rounded-r-none",
+      ],
+
+      horizontal: [
+        "flex-col",
+        "[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-b-none",
+        "[&>*:not(:first-child)>select]:rounded-t-none [&>*:not(:first-child)>select]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))>select]:rounded-b-none",
+        "[&>*:not(:first-child)>[data-trigger]]:rounded-t-none [&>*:not(:first-child)>[data-trigger]]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))>[data-trigger]]:rounded-b-none",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+export { buttonGroupVariants };

package/dist/astro/button-group/index.ts

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

package/dist/astro/collapsible/Collapsible.astro

@@ -1,34 +1,34 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  isOpen?: boolean;
-}
-
-const { class: className, isOpen = false, ...attrs } = Astro.props;
----
-
-<div
-  {...attrs}
-  data-collapsible
-  data-open={isOpen}
-  class={cn("w-full", className)}
->
-  <slot />
-</div>
-
-<script>
-  import { Collapsible } from "./collapsible";
-
-  function init() {
-    const collapsibles =
-      document.querySelectorAll<HTMLElement>("[data-collapsible]");
-    collapsibles.forEach((collapsible) => {
-      new Collapsible(collapsible);
-    });
-  }
-
-  init();
-  document.addEventListener("astro:page-load", () => init());
-</script>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  isOpen?: boolean;
+}
+
+const { class: className, isOpen = false, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  data-collapsible
+  data-open={isOpen}
+  class={cn("w-full", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { Collapsible } from "./collapsible";
+
+  function init() {
+    const collapsibles =
+      document.querySelectorAll<HTMLElement>("[data-collapsible]");
+    collapsibles.forEach((collapsible) => {
+      new Collapsible(collapsible);
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", () => init());
+</script>

package/dist/astro/collapsible/CollapsibleContent.astro

@@ -1,20 +1,20 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<div
-  data-collapsible-content
-  class={cn(
-    "overflow-hidden transition-all duration-300 ease-in-out",
-    className,
-  )}
-  hidden
-  {...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
+  data-collapsible-content
+  class={cn(
+    "overflow-hidden transition-all duration-300 ease-in-out",
+    className,
+  )}
+  hidden
+  {...attrs}
+>
+  <slot />
+</div>

package/dist/astro/collapsible/collapsible.ts

@@ -1,81 +1,81 @@
-export class Collapsible {
-  private wrapper: HTMLElement;
-  private content: HTMLElement | null;
-  private trigger: HTMLElement | null;
-
-  constructor(collapsibleWrapper: HTMLElement) {
-    this.wrapper = collapsibleWrapper;
-    this.content = this.wrapper.querySelector("[data-collapsible-content]");
-    this.trigger = this.wrapper.querySelector("[data-trigger]");
-
-    this.init();
-  }
-
-  private init() {
-    this.setupAccessibility();
-    this.setupEventListeners();
-  }
-
-  private setupAccessibility() {
-    if (!this.trigger || !this.content) return;
-
-    const id =
-      this.content.id ||
-      `collapsible-id-${Math.random().toString(36).substring(2, 9)}`;
-
-    this.content.id = id;
-    this.trigger.setAttribute("aria-controls", id);
-
-    if (this.wrapper.dataset.open === "true") {
-      this.setState("open");
-      this.content?.removeAttribute("hidden");
-      const height = this.content?.scrollHeight + "px";
-      this.content!.style.maxHeight = height;
-    } else {
-      this.setState("closed");
-      this.content?.setAttribute("hidden", "");
-      this.content!.style.maxHeight = "0px";
-    }
-  }
-
-  private setupEventListeners() {
-    this.trigger?.addEventListener("click", () => this.toggleCollapsible());
-    this.trigger?.addEventListener("keydown", (e) => this.handleKeyDown(e));
-  }
-
-  private toggleCollapsible() {
-    if (this.trigger?.dataset.state === "open") {
-      this.closeCollapsible();
-    } else {
-      this.openCollapsible();
-    }
-  }
-
-  private openCollapsible() {
-    this.content?.removeAttribute("hidden");
-    this.setState("open");
-    const height = this.content?.scrollHeight + "px";
-    this.content!.style.maxHeight = height;
-  }
-
-  private closeCollapsible() {
-    this.setState("closed");
-    this.content!.style.maxHeight = "0px";
-    window.setTimeout(() => {
-      this.content?.setAttribute("hidden", "");
-    }, 300);
-  }
-
-  private setState(state: "closed" | "open") {
-    this.trigger?.setAttribute("data-state", state);
-    this.trigger?.setAttribute("aria-expanded", `${state === "open"}`);
-    this.content?.setAttribute("data-state", state);
-  }
-
-  private handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "Escape" && this.content!.dataset.status === "open") {
-      this.closeCollapsible();
-      event.preventDefault();
-    }
-  };
-}
+export class Collapsible {
+  private wrapper: HTMLElement;
+  private content: HTMLElement | null;
+  private trigger: HTMLElement | null;
+
+  constructor(collapsibleWrapper: HTMLElement) {
+    this.wrapper = collapsibleWrapper;
+    this.content = this.wrapper.querySelector("[data-collapsible-content]");
+    this.trigger = this.wrapper.querySelector("[data-trigger]");
+
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+  }
+
+  private setupAccessibility() {
+    if (!this.trigger || !this.content) return;
+
+    const id =
+      this.content.id ||
+      `collapsible-id-${Math.random().toString(36).substring(2, 9)}`;
+
+    this.content.id = id;
+    this.trigger.setAttribute("aria-controls", id);
+
+    if (this.wrapper.dataset.open === "true") {
+      this.setState("open");
+      this.content?.removeAttribute("hidden");
+      const height = this.content?.scrollHeight + "px";
+      this.content!.style.maxHeight = height;
+    } else {
+      this.setState("closed");
+      this.content?.setAttribute("hidden", "");
+      this.content!.style.maxHeight = "0px";
+    }
+  }
+
+  private setupEventListeners() {
+    this.trigger?.addEventListener("click", () => this.toggleCollapsible());
+    this.trigger?.addEventListener("keydown", (e) => this.handleKeyDown(e));
+  }
+
+  private toggleCollapsible() {
+    if (this.trigger?.dataset.state === "open") {
+      this.closeCollapsible();
+    } else {
+      this.openCollapsible();
+    }
+  }
+
+  private openCollapsible() {
+    this.content?.removeAttribute("hidden");
+    this.setState("open");
+    const height = this.content?.scrollHeight + "px";
+    this.content!.style.maxHeight = height;
+  }
+
+  private closeCollapsible() {
+    this.setState("closed");
+    this.content!.style.maxHeight = "0px";
+    window.setTimeout(() => {
+      this.content?.setAttribute("hidden", "");
+    }, 300);
+  }
+
+  private setState(state: "closed" | "open") {
+    this.trigger?.setAttribute("data-state", state);
+    this.trigger?.setAttribute("aria-expanded", `${state === "open"}`);
+    this.content?.setAttribute("data-state", state);
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && this.content!.dataset.status === "open") {
+      this.closeCollapsible();
+      event.preventDefault();
+    }
+  };
+}

package/dist/astro/collapsible/index.ts

@@ -1,4 +1,4 @@
-import Collapsible from "./Collapsible.astro";
-import CollapsibleContent from "./CollapsibleContent.astro";
-
-export { Collapsible, CollapsibleContent };
+import Collapsible from "./Collapsible.astro";
+import CollapsibleContent from "./CollapsibleContent.astro";
+
+export { Collapsible, CollapsibleContent };

package/dist/astro/diff/Diff.astro

@@ -0,0 +1,55 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"figure"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<figure
+  data-diff
+  class={cn(
+    "diff relative grid aspect-video w-full overflow-hidden select-none grid-cols-[auto_1fr] grid-rows-[1fr_1.8rem_1fr]",
+    className,
+  )}
+  style={{
+    "container-type": "inline-size",
+  }}
+  tabindex="0"
+  {...attrs}
+>
+  <slot />
+  <div
+    data-resize
+    class="bg-background relative isolate z-2 col-start-1 row-start-2 h-3 w-[50cqi] max-w-[calc(100cqi-1rem)] min-w-4 cursor-ew-resize resize-x overflow-hidden opacity-0"
+    style={{
+      "clip-path": "inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem))",
+      "transform-origin": "100% 100%",
+      transition: "min-width 0.3s ease-out, max-width 0.3s ease-out",
+      transform: "scaleY(5) translate(0.32rem, 50%)",
+    }}
+  >
+  </div>
+</figure>
+
+<style is:global>
+  [data-diff-item]:nth-child(2)::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    bottom: 0;
+    right: 1px;
+    translate: 50% -50%;
+    width: 1rem;
+    height: 1.8rem;
+    background: var(--color-background);
+    z-index: 2;
+    pointer-events: none;
+    border-radius: 25%;
+  }
+
+  [data-diff-item]:nth-of-type(n + 3) {
+    display: none;
+  }
+</style>

package/dist/astro/diff/DiffItem.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  data-diff-item
+  class={cn(
+    "first:border-background relative col-start-1 row-[1/span_3] *:pointer-events-none *:absolute *:inset-0 *:h-full *:w-[100cqi] *:max-w-none *:object-cover *:object-center first:z-1 first:overflow-hidden first:border-e-2 first:border-solid",
+    className,
+  )}
+  role="img"
+  tabindex="0"
+  {...attrs}
+>
+  <slot />
+</div>

package/dist/astro/diff/index.ts

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

package/dist/astro/drawer/DrawerContent.astro

@@ -1,74 +1,74 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { drawerVariants } from "./drawerVariants";
-
-interface Props
-  extends HTMLAttributes<"div">,
-    VariantProps<typeof drawerVariants> {
-  showCloseButton?: boolean;
-  backdrop?: boolean;
-  allowOutsideClick?: boolean;
-}
-
-const {
-  class: className,
-  showCloseButton = true,
-  backdrop = true,
-  allowOutsideClick = true,
-  position = "right",
-  size = "sm",
-  ...attrs
-} = Astro.props;
----
-
-{
-  backdrop && (
-    <div
-      aria-hidden="true"
-      data-state="closed"
-      data-drawer-backdrop
-      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"
-    />
-  )
-}
-
-<div
-  data-drawer-content
-  aria-hidden="true"
-  data-state="closed"
-  data-position={position}
-  data-show-close-button={showCloseButton}
-  data-allow-outside-click={allowOutsideClick}
-  class={cn(drawerVariants({ position, size, 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
-      >
-        <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";
+import type { VariantProps } from "class-variance-authority";
+import { drawerVariants } from "./drawerVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof drawerVariants> {
+  showCloseButton?: boolean;
+  backdrop?: boolean;
+  allowOutsideClick?: boolean;
+}
+
+const {
+  class: className,
+  showCloseButton = true,
+  backdrop = true,
+  allowOutsideClick = true,
+  position = "right",
+  size = "sm",
+  ...attrs
+} = Astro.props;
+---
+
+{
+  backdrop && (
+    <div
+      aria-hidden="true"
+      data-state="closed"
+      data-drawer-backdrop
+      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"
+    />
+  )
+}
+
+<div
+  data-drawer-content
+  aria-hidden="true"
+  data-state="closed"
+  data-position={position}
+  data-show-close-button={showCloseButton}
+  data-allow-outside-click={allowOutsideClick}
+  class={cn(drawerVariants({ position, size, 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
+      >
+        <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>