@orbitkit/components 0.2.0 → 0.4.0

package/dist/astro/dropdown/dropdown.ts

@@ -1,157 +1,157 @@
-export class DowndownMenu {
-  // References to tooltip elements
-  private dropdownMenu: HTMLElement;
-  private trigger: HTMLElement | null;
-  private content: HTMLElement | null;
-  private menuItems: HTMLElement[] = [];
-
-  constructor(dropowndMenu: HTMLElement) {
-    this.dropdownMenu = dropowndMenu;
-    this.content = this.dropdownMenu.querySelector("[data-dropdown-content]");
-    this.trigger = this.dropdownMenu.querySelector("[data-trigger]");
-    this.menuItems = Array.from(
-      this.content?.querySelectorAll(
-        '[role="menuitem"]:not([data-disabled="true"])',
-      ) || [],
-    );
-
-    if (!this.content || !this.trigger) {
-      console.error("Dropdown not initialized properly", {
-        content: this.content,
-        trigger: this.trigger,
-      });
-      return;
-    }
-
-    this.init();
-  }
-
-  private init() {
-    this.setupAccessibility();
-    this.setupEventListeners();
-  }
-
-  private setupAccessibility() {
-    if (!this.trigger || !this.content) return;
-
-    const id =
-      this.content.id ||
-      `dropdown-id-${Math.random().toString(36).substring(2, 9)}`;
-    this.content.id = id;
-    this.trigger.setAttribute("aria-describedby", id);
-    this.setState("closed");
-  }
-
-  private setupEventListeners() {
-    if (!this.trigger || !this.content) return;
-
-    this.trigger.addEventListener("click", () => this.toggleDropdown());
-
-    this.content.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      const item = target.closest('[role="menuitem"]') as HTMLElement;
-
-      if (item && item.dataset.disabled !== "true") {
-        this.closeDropdown();
-      }
-    });
-
-    document.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      if (
-        this.content &&
-        !this.content.contains(target) &&
-        target !== this.trigger
-      ) {
-        this.closeDropdown();
-      }
-    });
-
-    this.trigger.addEventListener("keydown", (e) => {
-      const isOpen = this.content?.dataset.state === "open";
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        this.toggleDropdown();
-      } else if (e.key === "Escape" && isOpen) {
-        e.preventDefault();
-        this.closeDropdown();
-      } else if (isOpen && e.key === "ArrowDown") {
-        e.preventDefault();
-        this.setFocusItem(0);
-      } else if (isOpen && e.key === "ArrowUp") {
-        e.preventDefault();
-        this.setFocusItem(this.menuItems.length - 1);
-      }
-    });
-
-    this.menuItems.forEach((menuItem) => {
-      menuItem.addEventListener("keydown", (e) =>
-        this.handleMenuKeydown(e, menuItem),
-      );
-    });
-    document.addEventListener("keydown", (e) => this.handleKeydown(e));
-  }
-
-  private toggleDropdown() {
-    if (this.content?.dataset.state === "open") {
-      this.closeDropdown();
-    } else {
-      this.openDropdown();
-    }
-  }
-
-  private openDropdown() {
-    this.content?.classList.remove("hidden");
-
-    window.setTimeout(() => {
-      this.setState("open");
-    }, 0);
-  }
-
-  private closeDropdown() {
-    this.trigger?.focus();
-    this.setState("closed");
-    window.setTimeout(() => {
-      this.content?.classList.add("hidden");
-    }, 100);
-  }
-
-  private setState(state: "open" | "closed") {
-    this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
-    this.content?.setAttribute("data-state", state);
-  }
-
-  private handleKeydown = (event: KeyboardEvent) => {
-    if (event.key === "Escape" && this.content!.dataset.state === "open") {
-      this.closeDropdown();
-      event.preventDefault();
-    }
-  };
-
-  private handleMenuKeydown(event: KeyboardEvent, item: HTMLElement) {
-    const currentItemIndex = this.menuItems.indexOf(item);
-
-    const keyActions: Record<string, () => void> = {
-      ArrowDown: () => this.setFocusItem(currentItemIndex + 1),
-      ArrowUp: () => this.setFocusItem(currentItemIndex - 1),
-      Home: () => this.setFocusItem(0),
-      End: () => this.setFocusItem(this.menuItems.length - 1),
-      Enter: () => item.click(),
-      " ": () => item.click(),
-    };
-
-    const action = keyActions[event.key];
-    if (action) {
-      event.preventDefault();
-      action();
-    }
-  }
-
-  private setFocusItem(index: number) {
-    const newIndex = (index + this.menuItems.length) % this.menuItems.length;
-
-    if (this.menuItems[newIndex]) {
-      this.menuItems[newIndex].focus();
-    }
-  }
-}
+export class DowndownMenu {
+  // References to tooltip elements
+  private dropdownMenu: HTMLElement;
+  private trigger: HTMLElement | null;
+  private content: HTMLElement | null;
+  private menuItems: HTMLElement[] = [];
+
+  constructor(dropowndMenu: HTMLElement) {
+    this.dropdownMenu = dropowndMenu;
+    this.content = this.dropdownMenu.querySelector("[data-dropdown-content]");
+    this.trigger = this.dropdownMenu.querySelector("[data-trigger]");
+    this.menuItems = Array.from(
+      this.content?.querySelectorAll(
+        '[role="menuitem"]:not([data-disabled="true"])',
+      ) || [],
+    );
+
+    if (!this.content || !this.trigger) {
+      console.error("Dropdown not initialized properly", {
+        content: this.content,
+        trigger: this.trigger,
+      });
+      return;
+    }
+
+    this.init();
+  }
+
+  private init() {
+    this.setupAccessibility();
+    this.setupEventListeners();
+  }
+
+  private setupAccessibility() {
+    if (!this.trigger || !this.content) return;
+
+    const id =
+      this.content.id ||
+      `dropdown-id-${Math.random().toString(36).substring(2, 9)}`;
+    this.content.id = id;
+    this.trigger.setAttribute("aria-describedby", id);
+    this.setState("closed");
+  }
+
+  private setupEventListeners() {
+    if (!this.trigger || !this.content) return;
+
+    this.trigger.addEventListener("click", () => this.toggleDropdown());
+
+    this.content.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      const item = target.closest('[role="menuitem"]') as HTMLElement;
+
+      if (item && item.dataset.disabled !== "true") {
+        this.closeDropdown();
+      }
+    });
+
+    document.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      if (
+        this.content &&
+        !this.content.contains(target) &&
+        target !== this.trigger
+      ) {
+        this.closeDropdown();
+      }
+    });
+
+    this.trigger.addEventListener("keydown", (e) => {
+      const isOpen = this.content?.dataset.state === "open";
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.toggleDropdown();
+      } else if (e.key === "Escape" && isOpen) {
+        e.preventDefault();
+        this.closeDropdown();
+      } else if (isOpen && e.key === "ArrowDown") {
+        e.preventDefault();
+        this.setFocusItem(0);
+      } else if (isOpen && e.key === "ArrowUp") {
+        e.preventDefault();
+        this.setFocusItem(this.menuItems.length - 1);
+      }
+    });
+
+    this.menuItems.forEach((menuItem) => {
+      menuItem.addEventListener("keydown", (e) =>
+        this.handleMenuKeydown(e, menuItem),
+      );
+    });
+    document.addEventListener("keydown", (e) => this.handleKeydown(e));
+  }
+
+  private toggleDropdown() {
+    if (this.content?.dataset.state === "open") {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+
+  private openDropdown() {
+    this.content?.classList.remove("hidden");
+
+    window.setTimeout(() => {
+      this.setState("open");
+    }, 0);
+  }
+
+  private closeDropdown() {
+    this.trigger?.focus();
+    this.setState("closed");
+    window.setTimeout(() => {
+      this.content?.classList.add("hidden");
+    }, 100);
+  }
+
+  private setState(state: "open" | "closed") {
+    this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
+    this.content?.setAttribute("data-state", state);
+  }
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && this.content!.dataset.state === "open") {
+      this.closeDropdown();
+      event.preventDefault();
+    }
+  };
+
+  private handleMenuKeydown(event: KeyboardEvent, item: HTMLElement) {
+    const currentItemIndex = this.menuItems.indexOf(item);
+
+    const keyActions: Record<string, () => void> = {
+      ArrowDown: () => this.setFocusItem(currentItemIndex + 1),
+      ArrowUp: () => this.setFocusItem(currentItemIndex - 1),
+      Home: () => this.setFocusItem(0),
+      End: () => this.setFocusItem(this.menuItems.length - 1),
+      Enter: () => item.click(),
+      " ": () => item.click(),
+    };
+
+    const action = keyActions[event.key];
+    if (action) {
+      event.preventDefault();
+      action();
+    }
+  }
+
+  private setFocusItem(index: number) {
+    const newIndex = (index + this.menuItems.length) % this.menuItems.length;
+
+    if (this.menuItems[newIndex]) {
+      this.menuItems[newIndex].focus();
+    }
+  }
+}

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/loader/Loader.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import { loaders, type LoaderType } from "./loaders";
+
+interface Props extends HTMLAttributes<"svg"> {
+  type?: LoaderType;
+  size?: number;
+}
+
+const { class: className, type, size = 32, ...attrs } = Astro.props;
+
+const LoaderIcon = loaders[type || "180-ring"];
+---
+
+<LoaderIcon class={cn(className)} width={size} height={size} {...attrs} />

package/dist/astro/loader/index.ts

@@ -0,0 +1,6 @@
+import Loader from "./Loader.astro";
+import { type LoaderType, loaders } from "./loaders";
+
+export { Loader, loaders };
+
+export type { LoaderType };

package/dist/astro/loader/loaders/12-dots-scale-rotate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><circle cx="12" cy="3" r="1" fill="currentColor"><animate id="SVGelgoqhuA" attributeName="r" begin="0;SVGSRzJybSJ.end-0.5s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="16.5" cy="4.21" r="1" fill="currentColor"><animate id="SVGBcQu6cCi" attributeName="r" begin="SVGelgoqhuA.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="7.5" cy="4.21" r="1" fill="currentColor"><animate id="SVGSRzJybSJ" attributeName="r" begin="SVGeZGzNdVZ.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="19.79" cy="7.5" r="1" fill="currentColor"><animate id="SVGG5Q0fe0M" attributeName="r" begin="SVGBcQu6cCi.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="4.21" cy="7.5" r="1" fill="currentColor"><animate id="SVGeZGzNdVZ" attributeName="r" begin="SVGUTnihcal.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="21" cy="12" r="1" fill="currentColor"><animate id="SVG8aQG8dpc" attributeName="r" begin="SVGG5Q0fe0M.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="3" cy="12" r="1" fill="currentColor"><animate id="SVGUTnihcal" attributeName="r" begin="SVGHktsvT5Q.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="19.79" cy="16.5" r="1" fill="currentColor"><animate id="SVGqCF3Scrd" attributeName="r" begin="SVG8aQG8dpc.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="4.21" cy="16.5" r="1" fill="currentColor"><animate id="SVGHktsvT5Q" attributeName="r" begin="SVGSFNCBbxb.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="16.5" cy="19.79" r="1" fill="currentColor"><animate id="SVGMFYo1cJN" attributeName="r" begin="SVGqCF3Scrd.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="7.5" cy="19.79" r="1" fill="currentColor"><animate id="SVGSFNCBbxb" attributeName="r" begin="SVGLSoLpdOI.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="12" cy="21" r="1" fill="currentColor"><animate id="SVGLSoLpdOI" attributeName="r" begin="SVGMFYo1cJN.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><animateTransform attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="360 12 12;0 12 12"/></g></svg>

package/dist/astro/loader/loaders/180-ring-with-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity="0.25"/><path fill="currentColor" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>