@starwind-ui/core 1.12.0 → 1.12.1

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>

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

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

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

@@ -1,40 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div"> & {
-  /**
-   * Variant of the item media
-   * @default "default"
-   */
-  variant?: "default" | "icon" | "image";
-};
-
-export const itemMedia = tv({
-  base: [
-    "flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
-    "group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start",
-  ],
-  variants: {
-    variant: {
-      default: "bg-transparent",
-      icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-      image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-});
-
-const { variant = "default", class: className, ...rest } = Astro.props;
----
-
-<div
-  class={itemMedia({ variant, class: className })}
-  data-slot="item-media"
-  data-variant={variant}
-  {...rest}
->
-  <slot />
-</div>

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

@@ -1,21 +0,0 @@
----
-import type { ComponentProps } from "astro/types";
-import { tv } from "tailwind-variants";
-
-import { Separator } from "@/components/starwind/separator";
-
-type Props = ComponentProps<typeof Separator>;
-
-export const itemSeparator = tv({
-  base: "my-0",
-});
-
-const { class: className, orientation = "horizontal", ...rest } = Astro.props;
----
-
-<Separator
-  orientation={orientation}
-  class={itemSeparator({ class: className })}
-  data-slot="item-separator"
-  {...rest}
-/>

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

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

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

@@ -1,50 +0,0 @@
-import Item, { item } from "./Item.astro";
-import ItemActions, { itemActions } from "./ItemActions.astro";
-import ItemContent, { itemContent } from "./ItemContent.astro";
-import ItemDescription, { itemDescription } from "./ItemDescription.astro";
-import ItemFooter, { itemFooter } from "./ItemFooter.astro";
-import ItemGroup, { itemGroup } from "./ItemGroup.astro";
-import ItemHeader, { itemHeader } from "./ItemHeader.astro";
-import ItemMedia, { itemMedia } from "./ItemMedia.astro";
-import ItemSeparator, { itemSeparator } from "./ItemSeparator.astro";
-import ItemTitle, { itemTitle } from "./ItemTitle.astro";
-
-const ItemVariants = {
-  item,
-  itemActions,
-  itemContent,
-  itemDescription,
-  itemFooter,
-  itemGroup,
-  itemHeader,
-  itemMedia,
-  itemSeparator,
-  itemTitle,
-};
-
-export {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemFooter,
-  ItemGroup,
-  ItemHeader,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-  ItemVariants,
-};
-
-export default {
-  Root: Item,
-  Actions: ItemActions,
-  Content: ItemContent,
-  Description: ItemDescription,
-  Footer: ItemFooter,
-  Group: ItemGroup,
-  Header: ItemHeader,
-  Media: ItemMedia,
-  Separator: ItemSeparator,
-  Title: ItemTitle,
-};

package/dist/src/components/kbd/Kbd.astro

@@ -1,21 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"kbd">;
-
-export const kbd = tv({
-  base: [
-    "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
-    "bg-muted text-muted-foreground",
-    "[&_svg:not([class*='size-'])]:size-3",
-    "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<kbd class={kbd({ class: className })} data-slot="kbd" {...rest}>
-  <slot />
-</kbd>

package/dist/src/components/kbd/KbdGroup.astro

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