@orbitkit/components 0.1.0 → 0.2.0

package/README.md

@@ -1,25 +1,25 @@
-# @orbitkit/components
-
-_A collection of accessible, customizable, and lightweight UI components for Astro projects, powered by Tailwind CSS._
-
-> **Warning:** Do not install or use this package directly in your projects. Use the Orbit CLI for integration and component management.
-
-## 🛠️ Customization
-
-All components are styled with Tailwind CSS utility classes. You can easily override or extend styles via your project's Tailwind configuration.
-
-## 📖 Documentation
-
-Full documentation is coming soon.
-
-## 🤝 Contributing
-
-Pull requests are welcome! For major changes, please open an issue first.
-
-## 📜 License
-
-This project is licensed under the MIT License - See [MIT License](https://github.com/NSMichelJ/orbitkit/blob/main/LICENSE) for details.
-
----
-
-<p align="center"><strong>Built with ❤️</strong></p>
+# @orbitkit/components
+
+_A collection of accessible, customizable, and lightweight UI components for Astro projects, powered by Tailwind CSS._
+
+> **Warning:** Do not install or use this package directly in your projects. Use the Orbit CLI for integration and component management.
+
+## 🛠️ Customization
+
+All components are styled with Tailwind CSS utility classes. You can easily override or extend styles via your project's Tailwind configuration.
+
+## 📖 Documentation
+
+Full documentation is coming soon.
+
+## 🤝 Contributing
+
+Pull requests are welcome! For major changes, please open an issue first.
+
+## 📜 License
+
+This project is licensed under the MIT License - See [MIT License](https://github.com/NSMichelJ/orbitkit/blob/main/LICENSE) for details.
+
+---
+
+<p align="center"><strong>Built with ❤️</strong></p>

package/dist/astro/accordion/Accordion.astro

@@ -0,0 +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>

package/dist/astro/accordion/AccordionItem.astro

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

@@ -0,0 +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>

package/dist/astro/accordion/AcordionContent.astro

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

@@ -0,0 +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() {
+    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

@@ -0,0 +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 };

package/dist/astro/alert/Alert.astro

@@ -1,30 +1,30 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { alertVariants } from "./alertVariants";
-
-interface Props
-  extends HTMLAttributes<"div">,
-    VariantProps<typeof alertVariants> {}
-
-const {
-  class: className,
-  variant,
-  rounded,
-  size,
-  direction,
-  border,
-  ...attrs
-} = Astro.props;
----
-
-<div
-  {...attrs}
-  role="alert"
-  class={cn(
-    alertVariants({ variant, rounded, size, direction, border, className }),
-  )}
->
-  <slot />
-</div>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { alertVariants } from "./alertVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof alertVariants> {}
+
+const {
+  class: className,
+  variant,
+  rounded,
+  size,
+  direction,
+  border,
+  ...attrs
+} = Astro.props;
+---
+
+<div
+  {...attrs}
+  role="alert"
+  class={cn(
+    alertVariants({ variant, rounded, size, direction, border, className }),
+  )}
+>
+  <slot />
+</div>

package/dist/astro/alert/AlertDescription.astro

@@ -1,10 +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 {...attrs} class={cn(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(className)}><slot /></p>

package/dist/astro/alert/AlertTitle.astro

@@ -1,15 +1,15 @@
----
-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-medium flex items-center justify-start gap-2", 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-medium flex items-center justify-start gap-2", className)}
+>
+  <slot />
+</p>

package/dist/astro/alert/alertVariants.ts

@@ -1,51 +1,51 @@
-import { cva } from "class-variance-authority";
-
-const baseClass = "flex justify-start gap-y-1 gap-x-2 flex-wrap w-full";
-
-const alertVariants = cva(baseClass, {
-  variants: {
-    variant: {
-      default: "bg-surface border-border text-foreground",
-      info: " text-blue-800 border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800",
-      danger:
-        "text-red-800 border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800",
-      success:
-        "text-green-800 border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800",
-      warning:
-        "text-yellow-800 border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-800",
-    },
-    rounded: {
-      none: "rounded-none",
-      xs: "rounded-xs",
-      sm: "rounded-sm",
-      md: "rounded-md",
-      lg: "rounded-lg",
-      xl: "rounded-xl",
-      full: "rounded-full",
-    },
-    size: {
-      xs: "p-3 text-xs",
-      sm: "p-3 text-sm",
-      md: "p-4 text-sm",
-      lg: "p-5 text-base",
-      xl: "p-5 text-lg",
-    },
-    direction: {
-      row: "flex-row",
-      col: "flex-col",
-    },
-    border: {
-      false: null,
-      true: "border",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "sm",
-    rounded: "lg",
-    direction: "col",
-    border: true,
-  },
-});
-
-export { alertVariants };
+import { cva } from "class-variance-authority";
+
+const baseClass = "flex justify-start gap-y-1 gap-x-2 flex-wrap w-full";
+
+const alertVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default: "bg-surface border-border text-foreground",
+      info: " text-blue-800 border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800",
+      danger:
+        "text-red-800 border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800",
+      success:
+        "text-green-800 border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800",
+      warning:
+        "text-yellow-800 border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-800",
+    },
+    rounded: {
+      none: "rounded-none",
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+    size: {
+      xs: "p-3 text-xs",
+      sm: "p-3 text-sm",
+      md: "p-4 text-sm",
+      lg: "p-5 text-base",
+      xl: "p-5 text-lg",
+    },
+    direction: {
+      row: "flex-row",
+      col: "flex-col",
+    },
+    border: {
+      false: null,
+      true: "border",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "sm",
+    rounded: "lg",
+    direction: "col",
+    border: true,
+  },
+});
+
+export { alertVariants };

package/dist/astro/alert/index.ts

@@ -1,6 +1,6 @@
-import Alert from "./Alert.astro";
-import AlertDescription from "./AlertDescription.astro";
-import AlertTitle from "./AlertTitle.astro";
-import { alertVariants } from "./alertVariants";
-
-export { Alert, AlertDescription, AlertTitle, alertVariants };
+import Alert from "./Alert.astro";
+import AlertDescription from "./AlertDescription.astro";
+import AlertTitle from "./AlertTitle.astro";
+import { alertVariants } from "./alertVariants";
+
+export { Alert, AlertDescription, AlertTitle, alertVariants };

package/dist/astro/avatar/Avatar.astro

@@ -1,16 +1,16 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { avatarVariants } from "./avatarVariants";
-
-interface Props
-  extends HTMLAttributes<"div">,
-    VariantProps<typeof avatarVariants> {}
-
-const { class: className, variant, bordered, ...attrs } = Astro.props;
----
-
-<div {...attrs} class={cn(avatarVariants({ variant, bordered, className }))}>
-  <slot />
-</div>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { avatarVariants } from "./avatarVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof avatarVariants> {}
+
+const { class: className, variant, bordered, ...attrs } = Astro.props;
+---
+
+<div {...attrs} class={cn(avatarVariants({ variant, bordered, className }))}>
+  <slot />
+</div>

package/dist/astro/avatar/AvatarFallback.astro

@@ -1,18 +1,18 @@
----
-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(
-    "absolute z-0 font-medium text-gray-600 dark:text-gray-300",
-    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(
+    "absolute z-0 font-medium text-gray-600 dark:text-gray-300",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/avatar/AvatarImage.astro

@@ -1,14 +1,14 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"img"> {}
-
-const { class: className, ...attrs } = Astro.props;
----
-
-<img
-  {...attrs}
-  class={cn("relative aspect-square object-cover z-10", className)}
-  onerror="this.style.display='none'"
-/>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"img"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<img
+  {...attrs}
+  class={cn("relative aspect-square object-cover z-10", className)}
+  onerror="this.style.display='none'"
+/>