@starwind-ui/core 1.6.2 → 1.7.1

package/dist/src/components/dropdown/DropdownContent.astro

@@ -3,78 +3,78 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
-	/**
-	 * Side of the dropdown
-	 * @default bottom
-	 */
-	side?: "top" | "bottom";
-	/**
-	 * Alignment of the dropdown
-	 * @default start
-	 */
-	align?: "start" | "center" | "end";
-	/**
-	 * Offset distance in pixels
-	 * @default 4
-	 */
-	sideOffset?: number;
-	/**
-	 * Open and close animation duration in milliseconds
-	 * @default 150
-	 */
-	animationDuration?: number;
+  /**
+   * Side of the dropdown
+   * @default bottom
+   */
+  side?: "top" | "bottom";
+  /**
+   * Alignment of the dropdown
+   * @default start
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
 };
 
 const dropdownContent = tv({
-	base: [
-		"starwind-dropdown-content",
-		"bg-popover text-popover-foreground z-50 min-w-[9rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-		"data-[state=open]:animate-in fade-in zoom-in-95",
-		"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
-		"absolute will-change-transform",
-	],
-	variants: {
-		side: {
-			bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
-			top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
-		},
-		align: {
-			start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
-			center: "left-1/2 -translate-x-1/2",
-			end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
-		},
-	},
-	defaultVariants: {
-		side: "bottom",
-		align: "start",
-	},
+  base: [
+    "starwind-dropdown-content",
+    "bg-popover text-popover-foreground z-50 min-w-[9rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+    "data-[state=open]:animate-in fade-in zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+    "absolute will-change-transform",
+  ],
+  variants: {
+    side: {
+      bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
+      top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
+    },
+    align: {
+      start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
+      center: "left-1/2 -translate-x-1/2",
+      end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
+    },
+  },
+  defaultVariants: {
+    side: "bottom",
+    align: "start",
+  },
 });
 
 const {
-	class: className,
-	side = "bottom",
-	align = "start",
-	sideOffset = 4,
-	animationDuration = 150,
-	...rest
+  class: className,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  animationDuration = 150,
+  ...rest
 } = Astro.props;
 ---
 
 <div
-	class={dropdownContent({ side, align, class: className })}
-	role="menu"
-	data-side={side}
-	data-align={align}
-	data-state="closed"
-	tabindex="-1"
-	aria-orientation="vertical"
-	style={{
-		display: "none",
-		animationDuration: `${animationDuration}ms`,
-		marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
-		marginBottom: side === "top" ? `${sideOffset}px` : undefined,
-	}}
-	{...rest}
+  class={dropdownContent({ side, align, class: className })}
+  role="menu"
+  data-side={side}
+  data-align={align}
+  data-state="closed"
+  tabindex="-1"
+  aria-orientation="vertical"
+  style={{
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+    marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+    marginBottom: side === "top" ? `${sideOffset}px` : undefined,
+  }}
+  {...rest}
 >
-	<slot />
+  <slot />
 </div>

package/dist/src/components/dropdown/DropdownItem.astro

@@ -3,45 +3,45 @@ import type { HTMLTag, Polymorphic } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
-	/**
-	 * Whether the item is inset (has left padding)
-	 */
-	inset?: boolean;
-	/**
-	 * Whether the item is disabled
-	 */
-	disabled?: boolean;
+  /**
+   * Whether the item is inset (has left padding)
+   */
+  inset?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
 };
 
 const dropdownItem = tv({
-	base: [
-		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 transition-colors outline-none select-none",
-		"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		"[&>svg]:size-4 [&>svg]:shrink-0",
-	],
-	variants: {
-		inset: {
-			true: "pl-8",
-		},
-		disabled: {
-			true: "pointer-events-none opacity-50",
-		},
-	},
-	defaultVariants: {
-		inset: false,
-		disabled: false,
-	},
+  base: [
+    "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 transition-colors outline-none select-none",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "[&>svg]:size-4 [&>svg]:shrink-0",
+  ],
+  variants: {
+    inset: {
+      true: "pl-8",
+    },
+    disabled: {
+      true: "pointer-events-none opacity-50",
+    },
+  },
+  defaultVariants: {
+    inset: false,
+    disabled: false,
+  },
 });
 
 const { class: className, inset = false, disabled = false, as: Tag = "div", ...rest } = Astro.props;
 ---
 
 <Tag
-	class={dropdownItem({ inset, disabled, class: className })}
-	role="menuitem"
-	tabindex={disabled ? "-1" : "0"}
-	data-disabled={disabled ? "true" : undefined}
-	{...rest}
+  class={dropdownItem({ inset, disabled, class: className })}
+  role="menuitem"
+  tabindex={disabled ? "-1" : "0"}
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
 >
-	<slot />
+  <slot />
 </Tag>

package/dist/src/components/dropdown/DropdownLabel.astro

@@ -3,27 +3,27 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
-	/**
-	 * Whether the label is inset (has left padding)
-	 */
-	inset?: boolean;
+  /**
+   * Whether the label is inset (has left padding)
+   */
+  inset?: boolean;
 };
 
 const dropdownLabel = tv({
-	base: ["px-2 py-1.5 font-semibold"],
-	variants: {
-		inset: {
-			true: "pl-8",
-		},
-	},
-	defaultVariants: {
-		inset: false,
-	},
+  base: ["px-2 py-1.5 font-semibold"],
+  variants: {
+    inset: {
+      true: "pl-8",
+    },
+  },
+  defaultVariants: {
+    inset: false,
+  },
 });
 
 const { class: className, inset = false, ...rest } = Astro.props;
 ---
 
 <div class={dropdownLabel({ inset, class: className })} {...rest}>
-	<slot />
+  <slot />
 </div>

package/dist/src/components/dropdown/DropdownSeparator.astro

@@ -5,16 +5,16 @@ import { tv } from "tailwind-variants";
 type Props = HTMLAttributes<"div">;
 
 const dropdownSeparator = tv({
-	base: "bg-muted -mx-1 my-1 h-px",
+  base: "bg-muted -mx-1 my-1 h-px",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
 <div
-	class={dropdownSeparator({ class: className })}
-	role="separator"
-	aria-orientation="horizontal"
-	{...rest}
+  class={dropdownSeparator({ class: className })}
+  role="separator"
+  aria-orientation="horizontal"
+  {...rest}
 >
 </div>

package/dist/src/components/dropdown/DropdownTrigger.astro

@@ -3,18 +3,18 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
-	/**
-	 * When true, the component will render its child element with a simple wrapper instead of a button component
-	 */
-	asChild?: boolean;
+  /**
+   * When true, the component will render its child element with a simple wrapper instead of a button component
+   */
+  asChild?: boolean;
 };
 
 const dropdownTrigger = tv({
-	base: [
-		"starwind-dropdown-trigger",
-		"inline-flex items-center justify-center",
-		"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-	],
+  base: [
+    "starwind-dropdown-trigger",
+    "inline-flex items-center justify-center",
+    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+  ],
 });
 
 const { class: className, asChild = false, ...rest } = Astro.props;
@@ -22,25 +22,25 @@ const { class: className, asChild = false, ...rest } = Astro.props;
 // Get the first child element if asChild is true
 let hasChildren = false;
 if (Astro.slots.has("default")) {
-	hasChildren = true;
+  hasChildren = true;
 }
 ---
 
 {
-	asChild && hasChildren ? (
-		<div class={`starwind-dropdown-trigger ${className}`} data-as-child>
-			<slot />
-		</div>
-	) : (
-		<button
-			class={dropdownTrigger({ class: className })}
-			type="button"
-			aria-haspopup="true"
-			aria-expanded="false"
-			data-state="closed"
-			{...rest}
-		>
-			<slot />
-		</button>
-	)
+  asChild && hasChildren ? (
+    <div class={`starwind-dropdown-trigger ${className}`} data-as-child>
+      <slot />
+    </div>
+  ) : (
+    <button
+      class={dropdownTrigger({ class: className })}
+      type="button"
+      aria-haspopup="true"
+      aria-expanded="false"
+      data-state="closed"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
 }

package/dist/src/components/dropdown/index.ts

@@ -6,19 +6,19 @@ import DropdownSeparator from "./DropdownSeparator.astro";
 import DropdownTrigger from "./DropdownTrigger.astro";
 
 export {
-	Dropdown,
-	DropdownTrigger,
-	DropdownContent,
-	DropdownItem,
-	DropdownLabel,
-	DropdownSeparator,
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownLabel,
+  DropdownSeparator,
+  DropdownTrigger,
 };
 
 export default {
-	Root: Dropdown,
-	Trigger: DropdownTrigger,
-	Content: DropdownContent,
-	Item: DropdownItem,
-	Label: DropdownLabel,
-	Separator: DropdownSeparator,
+  Root: Dropdown,
+  Trigger: DropdownTrigger,
+  Content: DropdownContent,
+  Item: DropdownItem,
+  Label: DropdownLabel,
+  Separator: DropdownSeparator,
 };

package/dist/src/components/dropzone/Dropzone.astro

@@ -0,0 +1,232 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import DropzoneFilesList from "./DropzoneFilesList.astro";
+import DropzoneLoadingIndicator from "./DropzoneLoadingIndicator.astro";
+import DropzoneUploadIndicator from "./DropzoneUploadIndicator.astro";
+
+type Props = HTMLAttributes<"input"> & {
+  /**
+   * Whether to show the loading indicator initially
+   */
+  isUploading?: boolean;
+};
+
+// extract id separately so it can be used in the label. The input will get the same id with "-input" suffix.
+const { class: className, id, isUploading = false, ...rest } = Astro.props as Props;
+
+const root = tv({
+  base: [
+    "starwind-dropzone",
+    "relative flex w-full flex-col items-center justify-center gap-1 rounded-lg px-6 py-12",
+    "bg-background text-muted-foreground border-input cursor-pointer border border-dashed text-center text-sm",
+    "starwind-transition-colors data-[is-uploading=false]:hover:bg-muted/50 data-[drag-active=true]:bg-muted/50",
+    "focus-visible:outline-outline focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2",
+  ],
+});
+---
+
+<label
+  id={id}
+  tabindex="0"
+  class={root({ class: className })}
+  data-drag-active="false"
+  data-has-files="false"
+  data-is-uploading={String(isUploading)}
+>
+  <slot>
+    <DropzoneUploadIndicator />
+    <DropzoneLoadingIndicator />
+    <DropzoneFilesList />
+  </slot>
+
+  <input tabindex="-1" type="file" class="sr-only" {...rest} />
+</label>
+
+<script>
+  const fileSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /></svg>`;
+  class FileInputHandler {
+    private label: HTMLLabelElement;
+    private input: HTMLInputElement;
+    private uploadIndicator: HTMLElement | null;
+    private loadingIndicator: HTMLElement | null;
+    private filesList: HTMLElement | null;
+    private files: File[] = [];
+    private hasFiles: boolean = false;
+    private isUploading: boolean = false;
+    private observer: MutationObserver | null = null;
+
+    constructor(label: HTMLLabelElement, idx: number) {
+      this.label = label;
+      const maybeInput = label.querySelector<HTMLInputElement>('input[type="file"]');
+      if (!maybeInput) {
+        throw new Error("No file input found inside starwind-dropzone");
+      }
+      this.input = maybeInput;
+      this.uploadIndicator = label.querySelector(".starwind-upload-indicator");
+      this.loadingIndicator = label.querySelector(".starwind-loading-indicator");
+      this.filesList = label.querySelector(".starwind-files-list");
+
+      // generate ID
+      if (this.label.id) {
+        const inputId = this.label.id + "-input";
+        this.input.id = inputId;
+        this.label.htmlFor = inputId;
+      } else {
+        const generatedId = `starwind-dropzone-${idx}`;
+        this.input.id = generatedId;
+        this.label.htmlFor = generatedId;
+      }
+
+      // Setup event handlers
+      this.setupEvents();
+    }
+
+    private setActive(active: boolean) {
+      this.label.dataset.dragActive = String(active);
+    }
+
+    // Set up mutation observer to watch for external attribute changes
+    private observeAttributeChanges() {
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && mutation.attributeName === "data-is-uploading") {
+            this.handleAttributeChange();
+          }
+        });
+      });
+
+      this.observer.observe(this.label, {
+        attributes: true,
+        attributeFilter: ["data-is-uploading"],
+      });
+    }
+
+    // Handle attribute changes from external sources
+    private handleAttributeChange() {
+      const isUploading = this.label.dataset.isUploading === "true";
+
+      // Only update internal state if it's different
+      if (isUploading !== this.isUploading) {
+        this.isUploading = isUploading;
+
+        // Update UI
+        if (this.uploadIndicator && this.loadingIndicator) {
+          if (isUploading) {
+            this.uploadIndicator.classList.add("hidden");
+            this.loadingIndicator.classList.remove("hidden");
+          } else {
+            this.loadingIndicator.classList.add("hidden");
+            this.uploadIndicator.classList.remove("hidden");
+          }
+        }
+      }
+    }
+
+    private updateFilesList() {
+      if (!this.filesList) return;
+
+      const hasFiles = this.files.length > 0;
+      this.label.dataset.hasFiles = String(hasFiles);
+
+      if (hasFiles) {
+        this.filesList.classList.remove("invisible");
+
+        // Clear previous files
+        this.filesList.innerHTML = "";
+
+        // Create file list
+        this.files.forEach((file) => {
+          const fileItem = document.createElement("div");
+
+          // Insert SVG directly
+          fileItem.innerHTML = fileSvg;
+
+          const fileText = document.createElement("span");
+          fileText.textContent = file.name;
+
+          // Append text after the SVG
+          fileItem.appendChild(fileText);
+
+          // Use non-null assertion since we already checked at the beginning of the method
+          this.filesList!.appendChild(fileItem);
+        });
+      } else {
+        this.filesList.classList.add("invisible");
+      }
+    }
+
+    private handleFiles(files: FileList | null) {
+      if (!files || files.length === 0) return;
+
+      this.files = Array.from(files);
+      this.updateFilesList();
+    }
+
+    private setupEvents() {
+      this.label.addEventListener("dragover", (e) => {
+        e.preventDefault();
+        this.setActive(true);
+      });
+
+      this.label.addEventListener("dragleave", () => {
+        this.setActive(false);
+      });
+
+      this.label.addEventListener("drop", (e) => {
+        e.preventDefault();
+        this.setActive(false);
+
+        const { files } = e.dataTransfer || {};
+        if (files && files.length) {
+          const dt = new DataTransfer();
+          Array.from(files).forEach((file) => dt.items.add(file));
+          this.input.files = dt.files;
+          this.input.dispatchEvent(new Event("change", { bubbles: true }));
+
+          this.handleFiles(files);
+        }
+      });
+
+      // Handle file selection from dialog
+      this.input.addEventListener("change", () => {
+        this.handleFiles(this.input.files);
+      });
+
+      // Add keyboard accessibility for Enter and Space keys
+      this.label.addEventListener("keydown", (e) => {
+        // Handle Enter (13) and Space (32) keys
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.input.click(); // Trigger the native file dialog
+        }
+      });
+
+      if (this.loadingIndicator) {
+        // Watch for external changes to data-is-uploading attribute
+        this.observeAttributeChanges();
+        // Initialize based on current attribute values
+        this.handleAttributeChange();
+      }
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const fileInputInstances = new WeakMap<HTMLElement, FileInputHandler>();
+
+  const setupFileInputs = () => {
+    document.querySelectorAll<HTMLLabelElement>(".starwind-dropzone").forEach((label, idx) => {
+      if (!fileInputInstances.has(label)) {
+        try {
+          fileInputInstances.set(label, new FileInputHandler(label, idx));
+        } catch {
+          /* ignore labels without inputs */
+        }
+      }
+    });
+  };
+
+  setupFileInputs();
+  document.addEventListener("astro:after-swap", setupFileInputs);
+</script>

package/dist/src/components/dropzone/DropzoneFilesList.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+
+const filesList = tv({
+  base: [
+    "starwind-files-list",
+    "mt-1 -mb-8 min-h-8",
+    "bg-muted invisible flex flex-col items-center justify-center gap-1 rounded-md px-2 py-1 text-sm",
+    "[&_div]:flex [&_div]:items-center [&_div]:gap-1 [&_svg]:size-3.5",
+  ],
+});
+---
+
+<div
+  class={filesList({ class: className })}
+  aria-live="polite"
+  aria-label="Uploaded files"
+  {...rest}
+>
+</div>

package/dist/src/components/dropzone/DropzoneLoadingIndicator.astro

@@ -0,0 +1,10 @@
+---
+import LoaderIcon from "@tabler/icons/outline/loader-2.svg";
+---
+
+<div class="starwind-loading-indicator hidden">
+  <slot>
+    <LoaderIcon class="mx-auto size-10 animate-spin" aria-hidden="true" />
+    <p class="mt-1 text-sm">Uploading file(s)...</p>
+  </slot>
+</div>

package/dist/src/components/dropzone/DropzoneUploadIndicator.astro

@@ -0,0 +1,10 @@
+---
+import CloudUploadIcon from "@tabler/icons/outline/cloud-upload.svg";
+---
+
+<div class="starwind-upload-indicator">
+  <slot>
+    <CloudUploadIcon class="mx-auto size-10" aria-hidden="true" />
+    <p class="mt-1 text-sm">Click to upload or drag and drop</p>
+  </slot>
+</div>