@starwind-ui/core 1.11.2 → 1.12.1

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

@@ -1,48 +0,0 @@
----
-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;
-};
-
-export 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,
-  },
-});
-
-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}
-  data-slot="dropdown-item"
-  {...rest}
->
-  <slot />
-</Tag>

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

@@ -1,29 +0,0 @@
----
-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;
-};
-
-export const dropdownLabel = tv({
-  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 })} data-slot="dropdown-label" {...rest}>
-  <slot />
-</div>

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

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

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

@@ -1,52 +0,0 @@
----
-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;
-};
-
-export const dropdownTrigger = tv({
-  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={`starwind-dropdown-trigger ${className}`}
-      data-slot="dropdown-trigger"
-      data-as-child
-    >
-      <slot />
-    </div>
-  ) : (
-    <button
-      class={dropdownTrigger({ class: className })}
-      type="button"
-      aria-haspopup="true"
-      aria-expanded="false"
-      data-state="closed"
-      data-slot="dropdown-trigger"
-      {...rest}
-    >
-      <slot />
-    </button>
-  )
-}

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

@@ -1,33 +0,0 @@
-import Dropdown from "./Dropdown.astro";
-import DropdownContent, { dropdownContent } from "./DropdownContent.astro";
-import DropdownItem, { dropdownItem } from "./DropdownItem.astro";
-import DropdownLabel, { dropdownLabel } from "./DropdownLabel.astro";
-import DropdownSeparator, { dropdownSeparator } from "./DropdownSeparator.astro";
-import DropdownTrigger, { dropdownTrigger } from "./DropdownTrigger.astro";
-
-const DropdownVariants = {
-  dropdownContent,
-  dropdownItem,
-  dropdownLabel,
-  dropdownSeparator,
-  dropdownTrigger,
-};
-
-export {
-  Dropdown,
-  DropdownContent,
-  DropdownItem,
-  DropdownLabel,
-  DropdownSeparator,
-  DropdownTrigger,
-  DropdownVariants,
-};
-
-export default {
-  Root: Dropdown,
-  Trigger: DropdownTrigger,
-  Content: DropdownContent,
-  Item: DropdownItem,
-  Label: DropdownLabel,
-  Separator: DropdownSeparator,
-};

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

@@ -1,233 +0,0 @@
----
-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;
-
-export const dropzone = tv({
-  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 border-input cursor-pointer border border-dashed text-center text-sm",
-    "data-[is-uploading=false]:hover:bg-muted/50 data-[drag-active=true]:bg-muted/50 transition",
-    "focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
-  ],
-});
----
-
-<label
-  id={id}
-  tabindex="0"
-  class={dropzone({ class: 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 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

@@ -1,26 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-const { class: className, ...rest } = Astro.props;
-
-export const dropzoneFilesList = 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={dropzoneFilesList({ class: className })}
-  aria-live="polite"
-  aria-label="Uploaded files"
-  data-slot="dropzone-files-list"
-  {...rest}
->
-</div>

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

@@ -1,10 +0,0 @@
----
-import LoaderIcon from "@tabler/icons/outline/loader-2.svg";
----
-
-<div class="starwind-loading-indicator hidden" data-slot="dropzone-loading-indicator">
-  <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

@@ -1,10 +0,0 @@
----
-import CloudUploadIcon from "@tabler/icons/outline/cloud-upload.svg";
----
-
-<div class="starwind-upload-indicator" data-slot="dropzone-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>

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

@@ -1,24 +0,0 @@
-import Dropzone, { dropzone } from "./Dropzone.astro";
-import DropzoneFilesList, { dropzoneFilesList } from "./DropzoneFilesList.astro";
-import DropzoneLoadingIndicator from "./DropzoneLoadingIndicator.astro";
-import DropzoneUploadIndicator from "./DropzoneUploadIndicator.astro";
-
-const DropzoneVariants = {
-  dropzone,
-  dropzoneFilesList,
-};
-
-export {
-  Dropzone,
-  DropzoneFilesList,
-  DropzoneLoadingIndicator,
-  DropzoneUploadIndicator,
-  DropzoneVariants,
-};
-
-export default {
-  Root: Dropzone,
-  FilesList: DropzoneFilesList,
-  UploadIndicator: DropzoneUploadIndicator,
-  LoadingIndicator: DropzoneLoadingIndicator,
-};

package/dist/src/components/input/Input.astro

@@ -1,24 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"input"> & VariantProps<typeof input>;
-
-export const input = tv({
-  base: [
-    "border-input dark:bg-input/30 text-foreground w-full rounded-md border bg-transparent shadow-xs",
-    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
-    "file:text-foreground file:my-auto file:mr-4 file:h-full file:border-0 file:bg-transparent file:text-sm file:font-medium",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "peer placeholder:text-muted-foreground",
-  ],
-  variants: {
-    size: { sm: "h-9 px-2 text-sm", md: "h-11 px-3 text-base", lg: "h-12 px-4 text-lg" },
-  },
-  defaultVariants: { size: "md" },
-});
-
-const { size, class: className, ...rest } = Astro.props;
----
-
-<input class={input({ size, class: className })} data-slot="input" {...rest} />

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

@@ -1,7 +0,0 @@
-import Input, { input } from "./Input.astro";
-
-const InputVariants = { input };
-
-export { Input, InputVariants };
-
-export default Input;

package/dist/src/components/item/Item.astro

@@ -1,52 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
-  /**
-   * Variant of the item
-   * @default "default"
-   */
-  variant?: "default" | "outline" | "muted";
-  /**
-   * Size of the item
-   * @default "default"
-   */
-  size?: "default" | "sm";
-};
-
-export const item = tv({
-  base: [
-    "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors",
-    "[a]:hover:bg-accent/50 [a]:transition-colors",
-    "focus-visible:border-ring focus-visible:ring-outline/50 outline-none focus-visible:ring-[3px]",
-  ],
-  variants: {
-    variant: {
-      default: "bg-transparent",
-      outline: "border-border",
-      muted: "bg-muted/50",
-    },
-    size: {
-      default: "gap-4 p-4",
-      sm: "gap-2.5 px-4 py-3",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-  },
-});
-
-const {
-  variant = "default",
-  size = "default",
-  class: className,
-  as: Tag = "div",
-  ...rest
-} = Astro.props;
----
-
-<Tag class={item({ variant, size, class: className })} data-slot="item" {...rest}>
-  <slot />
-</Tag>

package/dist/src/components/item/ItemActions.astro

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const itemActions = tv({
-  base: "flex items-center gap-2",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class={itemActions({ class: className })} data-slot="item-actions" {...rest}>
-  <slot />
-</div>

package/dist/src/components/item/ItemContent.astro

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const itemContent = tv({
-  base: "flex flex-1 flex-col gap-1.5 [&+[data-slot=item-content]]:flex-none",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class={itemContent({ class: className })} data-slot="item-content" {...rest}>
-  <slot />
-</div>

package/dist/src/components/item/ItemDescription.astro

@@ -1,19 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"p">;
-
-export const itemDescription = tv({
-  base: [
-    "text-muted-foreground line-clamp-2 leading-snug font-normal text-balance",
-    "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<p class={itemDescription({ class: className })} data-slot="item-description" {...rest}>
-  <slot />
-</p>

package/dist/src/components/item/ItemFooter.astro

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const itemFooter = tv({
-  base: "flex basis-full items-center justify-between gap-2",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class={itemFooter({ class: className })} data-slot="item-footer" {...rest}>
-  <slot />
-</div>

package/dist/src/components/item/ItemGroup.astro

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const itemGroup = tv({
-  base: "group/item-group flex flex-col",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div role="list" class={itemGroup({ class: className })} data-slot="item-group" {...rest}>
-  <slot />
-</div>