@rimelight/ui 0.0.5 → 0.0.7

package/src/components/dropdown/DropdownContent.astro

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

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

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

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

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

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

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

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

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

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

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

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

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