@rimelight/ui 0.0.1

package/src/components/dropdown/DropdownContent.astro

@@ -0,0 +1,118 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Side of the dropdown
+   * @default bottom
+   */
+  side?: "top" | "bottom" | "left" | "right";
+  /**
+   * 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;
+};
+
+export const dropdownContent = cv({
+  base: [
+    "starwind-dropdown-content",
+    "bg-popover text-popover-foreground z-50 min-w-5xl max-w-4xl overflow-x-hidden overflow-y-auto rounded-md b p-5xs 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",
+      right: "slide-in-from-left-2 slide-out-to-left-2 top-0 left-full",
+      left: "slide-in-from-right-2 slide-out-to-right-2 top-0 right-full",
+    },
+    align: {
+      start: "",
+      center: "",
+      end: "",
+    },
+  },
+  compoundVariants: [
+    {
+      side: ["top", "bottom"],
+      align: "start",
+      className: "slide-in-from-left-1 slide-out-to-left-1 left-0",
+    },
+    {
+      side: ["top", "bottom"],
+      align: "center",
+      className: "left-1/2 -translate-x-1/2",
+    },
+    {
+      side: ["top", "bottom"],
+      align: "end",
+      className: "slide-in-from-right-1 slide-out-to-right-1 right-0",
+    },
+    {
+      side: ["left", "right"],
+      align: "start",
+      className: "top-0",
+    },
+    {
+      side: ["left", "right"],
+      align: "center",
+      className: "top-1/2 -translate-y-1/2",
+    },
+    {
+      side: ["left", "right"],
+      align: "end",
+      className: "bottom-0",
+    },
+  ],
+  defaultVariants: {
+    side: "bottom",
+    align: "start",
+  },
+});
+
+const {
+  class: className,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  animationDuration = 150,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class:list={[dropdownContent({ side, align }), className]}
+  role="menu"
+  data-side={side}
+  data-align={align}
+  data-state="closed"
+  tabindex="-1"
+  aria-orientation="vertical"
+  style={{
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+    maxWidth: "min(256px, 100vw - 1rem)",
+    marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+    marginBottom: side === "top" ? `${sideOffset}px` : undefined,
+    marginLeft: side === "right" ? `${sideOffset}px` : undefined,
+    marginRight: side === "left" ? `${sideOffset}px` : undefined,
+  }}
+  {...rest}
+  data-slot="dropdown-content"
+>
+  <slot />
+</div>

package/src/components/dropdown/DropdownItem.astro

@@ -0,0 +1,48 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types";
+import { cv } from "css-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;
+};
+
+export const dropdownItem = cv({
+  base: [
+    "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-3xs rounded-sm px-3xs py-5xs transition-colors outline-none select-none",
+    "data-[disabled]:pointer-events-none data-[disabled]:op-50",
+    "group/dropdown-item [&>svg]:size-4 [&>svg]:shrink-0",
+  ],
+  variants: {
+    inset: {
+      true: "pl-3xl",
+    },
+    disabled: {
+      true: "pointer-events-none op-50",
+    },
+  },
+  defaultVariants: {
+    inset: false,
+    disabled: false,
+  },
+});
+
+const { class: className, inset = false, disabled = false, as: Tag = "div", ...rest } = Astro.props;
+---
+
+<Tag
+  class:list={[dropdownItem({ inset, disabled }), className]}
+  role="menuitem"
+  tabindex={disabled ? "-1" : "0"}
+  data-disabled={disabled ? "true" : undefined}
+  data-slot="dropdown-item"
+  {...rest}
+>
+  <slot />
+</Tag>

package/src/components/dropdown/DropdownLabel.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Whether the label is inset (has left padding)
+   */
+  inset?: boolean;
+};
+
+export const dropdownLabel = cv({
+  base: ["text-muted-foreground px-3xs py-5xs text-sm font-medium"],
+  variants: {
+    inset: {
+      true: "pl-3xl",
+    },
+  },
+  defaultVariants: {
+    inset: false,
+  },
+});
+
+const { class: className, inset = false, ...rest } = Astro.props;
+---
+
+<div class:list={[dropdownLabel({ inset }), className]} {...rest} data-slot="dropdown-label">
+  <slot />
+</div>

package/src/components/dropdown/DropdownSeparator.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const dropdownSeparator = cv({
+  base: "bg-border -mx-5xs my-5xs h-6xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[dropdownSeparator(), className]}
+  role="separator"
+  aria-orientation="horizontal"
+  {...rest}
+  data-slot="dropdown-separator"
+>
+</div>

package/src/components/dropdown/DropdownShortcut.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"span">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  class:list={[
+    "group-focus/dropdown-item:text-accent-foreground text-muted-foreground ml-auto text-sm tracking-widest transition-colors",
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</span>

package/src/components/dropdown/DropdownSub.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={["starwind-dropdown-sub", "relative", className]}
+  {...rest}
+  data-slot="dropdown-sub"
+>
+  <slot />
+</div>

package/src/components/dropdown/DropdownSubContent.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+import { dropdownContent } from "./DropdownContent.astro";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
+};
+
+const { class: className, animationDuration = 150, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[
+    dropdownContent({
+      side: "right",
+      align: "start",
+    }),
+    "starwind-dropdown-sub-content",
+    className,
+  ]}
+  data-sub-content
+  role="menu"
+  data-state="closed"
+  tabindex="-1"
+  aria-orientation="vertical"
+  style={{
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+  }}
+  {...rest}
+  data-slot="dropdown-content"
+>
+  <slot />
+</div>

package/src/components/dropdown/DropdownSubTrigger.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import IconChevronRight from "~icons/lucide/chevron-right";
+
+import { dropdownItem } from "./DropdownItem.astro";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Whether the item is inset (has left padding)
+   */
+  inset?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
+};
+
+const { class: className, inset = false, disabled = false, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[dropdownItem({ inset, disabled }), "starwind-dropdown-sub-trigger", className]}
+  role="menuitem"
+  aria-haspopup="true"
+  aria-expanded="false"
+  tabindex={disabled ? "-1" : "0"}
+  data-disabled={disabled ? "true" : undefined}
+  data-sub-trigger
+  {...rest}
+  data-slot="dropdown-item"
+>
+  <slot />
+  <IconChevronRight class="ml-auto size-4" />
+</div>

package/src/components/dropdown/DropdownTrigger.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-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;
+};
+
+export const dropdownTrigger = cv({
+  base: [
+    "starwind-dropdown-trigger",
+    "inline-flex items-center justify-center",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none",
+  ],
+});
+
+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;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class:list={["starwind-dropdown-trigger", className]}
+      data-slot="dropdown-trigger"
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      class:list={[dropdownTrigger(), className]}
+      type="button"
+      aria-haspopup="true"
+      aria-expanded="false"
+      data-state="closed"
+      {...rest}
+      data-slot="dropdown-trigger"
+    >
+      <slot />
+    </button>
+  )
+}

package/src/components/dropzone/Dropzone.astro

@@ -0,0 +1,236 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-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;
+
+export const dropzone = cv({
+  base: [
+    "starwind-dropzone",
+    "relative flex w-full flex-col items-center justify-center gap-1 rounded-lg px-6 py-12 shadow-xs",
+    "bg-background dark:bg-input/30 text-muted-foreground b-input cursor-pointer b b-dashed text-center text-sm",
+    "data-[is-uploading=false]:hover:bg-muted data-[drag-active=true]:bg-muted transition",
+    "focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+    "disabled:cursor-not-allowed disabled:op-50",
+  ],
+});
+---
+
+<label
+  id={id}
+  tabindex="0"
+  class:list={[dropzone(), className]}
+  data-slot="dropzone"
+  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 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>();
+  let dropzoneCounter = 0;
+
+  const setupFileInputs = () => {
+    document.querySelectorAll<HTMLLabelElement>(".starwind-dropzone").forEach((label) => {
+      if (!fileInputInstances.has(label)) {
+        try {
+          fileInputInstances.set(label, new FileInputHandler(label, dropzoneCounter++));
+        } catch {
+          /* ignore labels without inputs */
+        }
+      }
+    });
+  };
+
+  setupFileInputs();
+  document.addEventListener("astro:after-swap", setupFileInputs);
+  document.addEventListener("starwind:init", setupFileInputs);
+</script>

package/src/components/dropzone/DropzoneFilesList.astro

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

package/src/components/dropzone/DropzoneLoadingIndicator.astro

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

package/src/components/dropzone/DropzoneUploadIndicator.astro

@@ -0,0 +1,10 @@
+---
+import IconCloudUpload from "~icons/lucide/cloud-upload";
+---
+
+<div class="starwind-upload-indicator" data-slot="dropzone-upload-indicator">
+  <slot>
+    <IconCloudUpload class="mx-auto size-10" aria-hidden="true" />
+    <p class="mt-1 text-sm">Click to upload or drag and drop</p>
+  </slot>
+</div>