@orbitkit/components 0.1.0 → 0.2.0

package/dist/astro/select/Select.astro

@@ -1,39 +1,39 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { selectVariants } from "./selectVariants";
-
-interface Props
-  extends Omit<HTMLAttributes<"select">, "disabled">,
-    VariantProps<typeof selectVariants> {}
-
-const { class: className, multiple, variant, disabled, ...attrs } = Astro.props;
----
-
-<div class="relative">
-  <select
-    {...attrs}
-    disabled={disabled}
-    multiple={multiple}
-    class={cn(selectVariants({ variant, disabled, className }))}
-  >
-    <slot />
-  </select>
-
-  {
-    !multiple && (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        class="text-input-placeholder absolute right-2.5 top-2.5 h-5 w-5"
-      >
-        <path d="m7 15 5 5 5-5" />
-        <path d="m7 9 5-5 5 5" />
-      </svg>
-    )
-  }
-</div>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { selectVariants } from "./selectVariants";
+
+interface Props
+  extends Omit<HTMLAttributes<"select">, "disabled">,
+    VariantProps<typeof selectVariants> {}
+
+const { class: className, multiple, variant, disabled, ...attrs } = Astro.props;
+---
+
+<div class="relative">
+  <select
+    {...attrs}
+    disabled={disabled}
+    multiple={multiple}
+    class={cn(selectVariants({ variant, disabled, className }))}
+  >
+    <slot />
+  </select>
+
+  {
+    !multiple && (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class="text-input-placeholder absolute right-2.5 top-2.5 h-5 w-5"
+      >
+        <path d="m7 15 5 5 5-5" />
+        <path d="m7 9 5-5 5 5" />
+      </svg>
+    )
+  }
+</div>

package/dist/astro/select/index.ts

@@ -1,5 +1,5 @@
-import Option from "./Option.astro";
-import Select from "./Select.astro";
-import { selectVariants } from "./selectVariants";
-
-export { Option, Select, selectVariants };
+import Option from "./Option.astro";
+import Select from "./Select.astro";
+import { selectVariants } from "./selectVariants";
+
+export { Option, Select, selectVariants };

package/dist/astro/select/selectVariants.ts

@@ -1,30 +1,30 @@
-import { cva } from "class-variance-authority";
-
-const baseClass =
-  "block w-full p-2.5 mb-2 text-sm rounded-lg outline-1 -outline-offset-1 appearance-none";
-
-const selectVariants = cva(baseClass, {
-  variants: {
-    variant: {
-      default:
-        "text-foreground bg-input outline-input-border placeholder-input-placeholder cursor-pointer",
-    },
-    disabled: {
-      false: null,
-      true: "bg-input/40 outline-input-border/40 text-muted-foreground cursor-not-allowed",
-    },
-  },
-  compoundVariants: [
-    {
-      variant: "default",
-      disabled: false,
-      class: "focus:outline-2 focus:-outline-offset-2 focus:outline-primary",
-    },
-  ],
-  defaultVariants: {
-    variant: "default",
-    disabled: false,
-  },
-});
-
-export { selectVariants };
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "block w-full p-2.5 mb-2 text-sm rounded-lg outline-1 -outline-offset-1 appearance-none";
+
+const selectVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default:
+        "text-foreground bg-input outline-input-border placeholder-input-placeholder cursor-pointer",
+    },
+    disabled: {
+      false: null,
+      true: "bg-input/40 outline-input-border/40 text-muted-foreground cursor-not-allowed",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: false,
+      class: "focus:outline-2 focus:-outline-offset-2 focus:outline-primary",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    disabled: false,
+  },
+});
+
+export { selectVariants };

package/dist/astro/skeleton/Skeleton.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} role="status" class={cn("animate-pulse", 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} role="status" class={cn("animate-pulse", className)}>
+  <slot />
+</div>

package/dist/astro/skeleton/SkeletonItem.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(
-    "rounded-md bg-muted text-muted-foreground flex items-center justify-center",
-    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(
+    "rounded-md bg-muted text-muted-foreground flex items-center justify-center",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/skeleton/index.ts

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

package/dist/astro/stat/Stat.astro

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

package/dist/astro/stat/StatDescription.astro

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

package/dist/astro/stat/StatTitle.astro

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

package/dist/astro/stat/StatValue.astro

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

package/dist/astro/stat/index.ts

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

package/dist/astro/switch/Switch.astro

@@ -1,19 +1,19 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-
-interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
-
-const { class: className, id, ...attrs } = Astro.props;
----
-
-<label class="inline-flex cursor-pointer items-center" id={id}>
-  <input {...attrs} id={id} type="checkbox" class="peer sr-only" />
-  <span
-    class={cn(
-      "relative w-11 h-6 bg-input-border rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-      className,
-    )}
-  >
-  </span>
-</label>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
+
+const { class: className, id, ...attrs } = Astro.props;
+---
+
+<label class="inline-flex cursor-pointer items-center" id={id}>
+  <input {...attrs} id={id} type="checkbox" class="peer sr-only" />
+  <span
+    class={cn(
+      "relative w-11 h-6 bg-input-border rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      className,
+    )}
+  >
+  </span>
+</label>

package/dist/astro/switch/index.ts

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

package/dist/astro/tab/Tab.astro

@@ -0,0 +1,33 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  defaultValue?: string;
+}
+
+const { class: className, defaultValue, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  data-tab
+  data-default-value={defaultValue}
+  class={cn(className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { Tab } from "./tab";
+
+  function init() {
+    const tabs = document.querySelectorAll<HTMLElement>("[data-tab]");
+    tabs.forEach((tab) => {
+      new Tab(tab);
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", () => init());
+</script>

package/dist/astro/tab/TabContent.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  value: string;
+}
+
+const { value } = Astro.props;
+---
+
+<div
+  role="tabpanel"
+  aria-orientation="horizontal"
+  data-tab-content
+  data-state="inactive"
+  data-value={value}
+  hidden
+  class="mt-2 w-full"
+>
+  <slot />
+</div>

package/dist/astro/tab/TabList.astro

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

package/dist/astro/tab/TabTrigger.astro

@@ -0,0 +1,24 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  value: string;
+}
+
+const { class: className, value } = Astro.props;
+---
+
+<button
+  role="tab"
+  aria-orientation="horizontal"
+  data-selected="false"
+  data-value={value}
+  data-tab-trigger
+  class={cn(
+    "rounded-sm px-3 py-1.5 flex justify-center gap-1.5 items-center font-medium cursor-pointer outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-100 ease-in data-[selected=true]:bg-secondary",
+    className,
+  )}
+>
+  <slot />
+</button>

package/dist/astro/tab/index.ts

@@ -0,0 +1,6 @@
+import Tab from "./Tab.astro";
+import TabContent from "./TabContent.astro";
+import TabList from "./TabList.astro";
+import TabTrigger from "./TabTrigger.astro";
+
+export { Tab, TabContent, TabList, TabTrigger };

package/dist/astro/tab/tab.ts

@@ -0,0 +1,142 @@
+export class Tab {
+  private tab: HTMLElement;
+  private tabList: HTMLElement | null;
+  private tabsTrigger: NodeListOf<HTMLElement> | null;
+  private tabContents: NodeListOf<HTMLElement> | null;
+  private contentMap: Map<string, HTMLElement> = new Map();
+
+  constructor(tabWrapper: HTMLElement) {
+    this.tab = tabWrapper;
+    this.tabList = this.tab.querySelector("[data-tab-list]");
+    this.tabsTrigger =
+      this.tabList?.querySelectorAll("[data-tab-trigger]") || null;
+    this.tabContents = this.tab.querySelectorAll("[data-tab-content]");
+
+    this.initializeContentMap();
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+    this.setDefaultTab();
+  }
+
+  private initializeContentMap(): void {
+    this.tabContents?.forEach((content) => {
+      const value = content.dataset.value?.toLowerCase();
+      if (value) {
+        if (this.contentMap.has(value)) {
+          console.warn(
+            `Duplicate data-value "${value}" found in content elements`,
+          );
+        }
+        this.contentMap.set(value, content);
+      }
+    });
+  }
+
+  private setupAccessibility() {
+    this.tabsTrigger?.forEach((trigger) => {
+      const triggerValue = trigger.dataset.value?.toLowerCase();
+      if (!triggerValue) return;
+
+      const content = this.contentMap.get(triggerValue);
+      if (!content) {
+        console.warn(`No content found for trigger value: ${triggerValue}`);
+        return;
+      }
+
+      const uniqueId = Math.random().toString(36).substring(2, 9);
+      const triggerId = trigger.id || `tab-trigger-${triggerValue}-${uniqueId}`;
+      const contentId = content.id || `tab-content-${triggerValue}-${uniqueId}`;
+
+      trigger.setAttribute("id", triggerId);
+      trigger.setAttribute("aria-controls", contentId);
+
+      content.setAttribute("id", contentId);
+      content.setAttribute("aria-labelledby", triggerId);
+    });
+  }
+
+  private setupEventListeners() {
+    this.tabsTrigger?.forEach((trigger) => {
+      trigger.addEventListener("click", () => this.activateTab(trigger));
+      trigger.addEventListener("keydown", (e) =>
+        this.handleKeydown(e, trigger),
+      );
+    });
+  }
+
+  private handleKeydown(event: KeyboardEvent, item: HTMLElement) {
+    const items = Array.from(this.tabsTrigger || []);
+    const currentItemIndex = items.indexOf(item);
+
+    const keyActions: Record<string, () => void> = {
+      ArrowRight: () => this.setFocusItem(items, currentItemIndex + 1),
+      ArrowLeft: () => 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: HTMLElement[], index: number) {
+    const newIndex = index % items.length;
+    if (items[newIndex]) {
+      this.activateTab(items[newIndex]);
+    }
+  }
+
+  private setDefaultTab() {
+    const defaultTrigger = this.getDefaultTrigger();
+    if (defaultTrigger) {
+      this.activateTab(defaultTrigger);
+    }
+  }
+
+  private getDefaultTrigger(): HTMLElement | undefined {
+    if (!this.tabsTrigger) return;
+
+    const defaultValue = this.tab.dataset.defaultValue?.toLowerCase();
+    if (defaultValue) {
+      return Array.from(this.tabsTrigger || []).find(
+        (trigger) => trigger.dataset.value?.toLowerCase() === defaultValue,
+      );
+    }
+    return this.tabsTrigger[0];
+  }
+
+  private activateTab(trigger: HTMLElement) {
+    this.tabsTrigger?.forEach((t) => {
+      t.setAttribute("aria-selected", "false");
+      t.setAttribute("data-selected", "false");
+      t.setAttribute("tabindex", "-1");
+    });
+
+    this.tabContents?.forEach((c) => {
+      c.setAttribute("data-state", "active");
+      c.setAttribute("hidden", "");
+    });
+
+    const triggerValue = trigger.dataset.value?.toLowerCase();
+    if (triggerValue) {
+      const content = this.contentMap.get(triggerValue);
+      if (content) {
+        content.removeAttribute("hidden");
+        setTimeout(() => {
+          content.setAttribute("data-state", "active");
+          trigger.setAttribute("aria-selected", "true");
+          trigger.setAttribute("data-selected", "true");
+          trigger.setAttribute("tabindex", "0");
+        }, 100);
+        trigger.focus();
+      }
+    }
+  }
+}

package/dist/astro/textarea/Textarea.astro

@@ -1,19 +1,19 @@
----
-import { cn } from "@/utils/cn";
-import { type HTMLAttributes } from "astro/types";
-import type { VariantProps } from "class-variance-authority";
-import { textareaVariants } from "./TextareaVariants";
-
-interface Props
-  extends Omit<HTMLAttributes<"textarea">, "disabled">,
-    VariantProps<typeof textareaVariants> {}
-
-const { class: className, variant, disabled, ...attrs } = Astro.props;
----
-
-<textarea
-  {...attrs}
-  disabled={disabled}
-  class={cn(textareaVariants({ variant, disabled, className }))}
->
-</textarea>
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { textareaVariants } from "./TextareaVariants";
+
+interface Props
+  extends Omit<HTMLAttributes<"textarea">, "disabled">,
+    VariantProps<typeof textareaVariants> {}
+
+const { class: className, variant, disabled, ...attrs } = Astro.props;
+---
+
+<textarea
+  {...attrs}
+  disabled={disabled}
+  class={cn(textareaVariants({ variant, disabled, className }))}
+>
+</textarea>