@orbitkit/components 0.2.0-beta.1 → 0.3.0

package/dist/astro/accordion/Accordion.astro

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

package/dist/astro/accordion/AccordionItem.astro

@@ -1,16 +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
-  {...attrs}
-  data-accordion-item
-  class={cn("border-b border-border last:border-b-0", className)}
->
-  <slot />
-</div>
+---
+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-accordion-item
+  data-default-open={isOpen}
+  class={cn("border-b border-border last:border-b-0", className)}
+>
+  <slot />
+</div>

package/dist/astro/accordion/AccordionTrigger.astro

@@ -1,33 +1,33 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"button"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<h3>
-  <button
-    {...attrs}
-    aria-expanded="false"
-    data-accordion-trigger
-    class={cn(
-      "flex items-center justify-between py-4 border-b border-border last:border-b-0 w-full text-start text-base font-medium cursor-pointer [&[data-state=open]>svg]:rotate-180",
-      className,
-    )}
-  >
-    <slot />
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-4 transform transition-transform duration-200"
-      ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-        d="M6 9l6 6l6 -6"></path></svg
-    >
-  </button>
-</h3>
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<h3>
+  <button
+    {...attrs}
+    aria-expanded="false"
+    data-accordion-trigger
+    class={cn(
+      "flex items-center justify-between py-4 border-b border-border last:border-b-0 w-full text-start text-base font-medium cursor-pointer [&[data-state=open]>svg]:rotate-180",
+      className,
+    )}
+  >
+    <slot />
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="size-4 transform transition-transform duration-200"
+      ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+        d="M6 9l6 6l6 -6"></path></svg
+    >
+  </button>
+</h3>

package/dist/astro/accordion/AcordionContent.astro

@@ -1,26 +1,23 @@
----
-import { cn } from "@/utils/cn";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  open?: boolean;
-}
-
-const { class: className, open = false, ...attrs } = Astro.props;
----
-
-<div
-  {...attrs}
-  role="region"
-  data-accordion-content
-  data-open={open}
-  class={cn(
-    "overflow-hidden transition-all duration-300 ease-in-out",
-    { "max-h-0": !open },
-    className,
-  )}
->
-  <div class="pb-4">
-    <slot />
-  </div>
-</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}
+  role="region"
+  data-accordion-content
+  data-state="closed"
+  class={cn(
+    "overflow-hidden transition-all duration-300 ease-in-out data-[state=closed]:max-h-0",
+    className,
+  )}
+>
+  <div class="pb-4">
+    <slot />
+  </div>
+</div>

package/dist/astro/accordion/accordion.ts

@@ -1,125 +1,151 @@
-interface AccordionItem extends HTMLElement {
-  trigger?: HTMLElement;
-  content?: HTMLElement;
-}
-
-export class Accordion {
-  private wrapper: HTMLElement;
-  private items: NodeListOf<HTMLElement> | null;
-
-  constructor(accordionWrapper: HTMLElement) {
-    this.wrapper = accordionWrapper;
-    this.items = this.wrapper.querySelectorAll("[data-accordion-item]");
-
-    this.init();
-  }
-
-  private init() {
-    this.items?.forEach((item: AccordionItem) => {
-      const trigger = item.querySelector<HTMLElement>(
-        "[data-accordion-trigger]",
-      );
-      const content = item.querySelector<HTMLElement>(
-        "[data-accordion-content]",
-      );
-
-      if (trigger && content) {
-        item.trigger = trigger;
-        item.content = content;
-
-        this.setupAccessibility(item);
-        this.setupEventListeners(item);
-      }
-    });
-  }
-
-  private setupAccessibility(item: AccordionItem) {
-    if (item.trigger && item.content) {
-      const triggerId =
-        item.trigger.id ||
-        `accordion-id-${Math.random().toString(36).substring(2, 9)}`;
-      const contentId =
-        item.content.id ||
-        `accordion-id-${Math.random().toString(36).substring(2, 9)}`;
-
-      item.trigger.id = triggerId;
-      item.trigger.setAttribute("aria-controls", contentId);
-
-      item.content.id = contentId;
-      item.content.setAttribute("aria-labelledby", triggerId);
-      item.content.setAttribute("role", "region");
-
-      this.setState(item, "closed");
-    }
-  }
-
-  private setupEventListeners(item: AccordionItem) {
-    if (!item.trigger && !item.content) return;
-
-    item.trigger?.addEventListener("click", () =>
-      this.toggleAccordionItem(item),
-    );
-    item.trigger?.addEventListener("keydown", (e) =>
-      this.handleKeydown(e, item),
-    );
-  }
-
-  private toggleAccordionItem(item: AccordionItem) {
-    if (item.trigger?.getAttribute("aria-expanded") === "true") {
-      this.closeAccordionItem(item);
-    } else {
-      if (this.wrapper.dataset.multiple !== "true") {
-        this.closeAllContents();
-      }
-      this.openAccordionItem(item);
-    }
-  }
-
-  private openAccordionItem(item: AccordionItem) {
-    this.setState(item, "open");
-    const height = item.content?.scrollHeight + "px";
-    item.content!.style.maxHeight = height;
-  }
-
-  private closeAccordionItem(item: AccordionItem) {
-    this.setState(item, "closed");
-    item.content!.style.maxHeight = "0px";
-  }
-
-  private closeAllContents() {
-    this.items?.forEach((item) => {
-      this.closeAccordionItem(item);
-    });
-  }
-
-  private handleKeydown(event: KeyboardEvent, item: AccordionItem) {
-    const items = Array.from(this.items || []);
-    const currentItemIndex = items.indexOf(item);
-
-    const keyActions: Record<string, () => void> = {
-      ArrowDown: () => this.setFocusItem(items, currentItemIndex + 1),
-      ArrowUp: () => 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: AccordionItem[], index: number) {
-    const newIndex = (index + items.length) % items.length;
-    if (items[newIndex].trigger) {
-      items[newIndex].trigger.focus();
-    }
-  }
-
-  private setState(item: AccordionItem, state: "closed" | "open") {
-    item.trigger?.setAttribute("data-state", state);
-    item.trigger?.setAttribute("aria-expanded", `${state === "open"}`);
-    item.content?.setAttribute("data-state", state);
-  }
-}
+interface AccordionItem extends HTMLElement {
+  trigger?: HTMLElement;
+  content?: HTMLElement;
+}
+
+export class Accordion {
+  private wrapper: HTMLElement;
+  private items: NodeListOf<HTMLElement> | null;
+
+  constructor(accordionWrapper: HTMLElement) {
+    this.wrapper = accordionWrapper;
+    this.items = this.wrapper.querySelectorAll("[data-accordion-item]");
+
+    this.init();
+  }
+
+  private init() {
+    const defaultOpenItems = [];
+
+    this.items?.forEach((item: AccordionItem) => {
+      const trigger = item.querySelector<HTMLElement>(
+        "[data-accordion-trigger]",
+      );
+      const content = item.querySelector<HTMLElement>(
+        "[data-accordion-content]",
+      );
+
+      if (trigger && content) {
+        item.trigger = trigger;
+        item.content = content;
+
+        this.setupAccessibility(item);
+        this.setupEventListeners(item);
+
+        if (item.dataset.defaultOpen === "true") {
+          if (
+            defaultOpenItems.length > 0 &&
+            this.wrapper.dataset.multiple !== "true"
+          ) {
+            console.warn(
+              "Warning! This accordion is not configured to open multiple items by default. " +
+                "Only the first item will be opened." +
+                "Consider adding the multiple prop to the accordion if you want to allow multiple items to be open by default.",
+            );
+            return;
+          }
+
+          this.setContentHeight(content);
+          this.setState(item, "open");
+          defaultOpenItems.push(item);
+        }
+      }
+    });
+  }
+
+  private setupAccessibility(item: AccordionItem) {
+    if (item.trigger && item.content) {
+      const triggerId =
+        item.trigger.id ||
+        `accordion-id-${Math.random().toString(36).substring(2, 9)}`;
+      const contentId =
+        item.content.id ||
+        `accordion-id-${Math.random().toString(36).substring(2, 9)}`;
+
+      item.trigger.id = triggerId;
+      item.trigger.setAttribute("aria-controls", contentId);
+
+      item.content.id = contentId;
+      item.content.setAttribute("aria-labelledby", triggerId);
+      item.content.setAttribute("role", "region");
+
+      this.setState(item, "closed");
+    }
+  }
+
+  private setupEventListeners(item: AccordionItem) {
+    if (!item.trigger && !item.content) return;
+
+    item.trigger?.addEventListener("click", () =>
+      this.toggleAccordionItem(item),
+    );
+    item.trigger?.addEventListener("keydown", (e) =>
+      this.handleKeydown(e, item),
+    );
+  }
+
+  private toggleAccordionItem(item: AccordionItem) {
+    if (item.trigger?.getAttribute("aria-expanded") === "true") {
+      this.closeAccordionItem(item);
+    } else {
+      if (this.wrapper.dataset.multiple !== "true") {
+        this.closeAllContents();
+      }
+      this.openAccordionItem(item);
+    }
+  }
+
+  private openAccordionItem(item: AccordionItem) {
+    this.setState(item, "open");
+    if (item.content) {
+      this.setContentHeight(item.content);
+    }
+  }
+
+  private closeAccordionItem(item: AccordionItem) {
+    this.setState(item, "closed");
+    item.content!.style.maxHeight = "0px";
+  }
+
+  private closeAllContents() {
+    this.items?.forEach((item) => {
+      this.closeAccordionItem(item);
+    });
+  }
+
+  private handleKeydown(event: KeyboardEvent, item: AccordionItem) {
+    const items = Array.from(this.items || []);
+    const currentItemIndex = items.indexOf(item);
+
+    const keyActions: Record<string, () => void> = {
+      ArrowDown: () => this.setFocusItem(items, currentItemIndex + 1),
+      ArrowUp: () => 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: AccordionItem[], index: number) {
+    const newIndex = (index + items.length) % items.length;
+    if (items[newIndex].trigger) {
+      items[newIndex].trigger.focus();
+    }
+  }
+
+  private setContentHeight(content: HTMLElement) {
+    const height = content.scrollHeight + "px";
+    content.style.maxHeight = height;
+  }
+
+  private setState(item: AccordionItem, state: "closed" | "open") {
+    item.trigger?.setAttribute("data-state", state);
+    item.trigger?.setAttribute("aria-expanded", `${state === "open"}`);
+    item.content?.setAttribute("data-state", state);
+  }
+}

package/dist/astro/accordion/index.ts

@@ -1,6 +1,6 @@
-import Accordion from "./Accordion.astro";
-import AccordionItem from "./AccordionItem.astro";
-import AccordionTrigger from "./AccordionTrigger.astro";
-import AccordionContent from "./AcordionContent.astro";
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+import Accordion from "./Accordion.astro";
+import AccordionItem from "./AccordionItem.astro";
+import AccordionTrigger from "./AccordionTrigger.astro";
+import AccordionContent from "./AcordionContent.astro";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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>