@starwind-ui/core 1.6.2 → 1.7.0

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

@@ -0,0 +1,13 @@
+import Dropzone from "./Dropzone.astro";
+import DropzoneFilesList from "./DropzoneFilesList.astro";
+import DropzoneLoadingIndicator from "./DropzoneLoadingIndicator.astro";
+import DropzoneUploadIndicator from "./DropzoneUploadIndicator.astro";
+
+export { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator };
+
+export default {
+  Root: Dropzone,
+  FilesList: DropzoneFilesList,
+  UploadIndicator: DropzoneUploadIndicator,
+  LoadingIndicator: DropzoneLoadingIndicator,
+};

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

@@ -1,21 +1,21 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { type VariantProps, tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"input"> & VariantProps<typeof input>;
 
 const input = tv({
-	base: [
-		"border-input bg-background text-foreground w-full rounded-md border",
-		"focus:outline-outline focus:ring-0 focus:outline-2 focus:outline-offset-2",
-		"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" },
+  base: [
+    "border-input bg-background text-foreground w-full rounded-md border",
+    "focus:outline-outline focus:ring-0 focus:outline-2 focus:outline-offset-2",
+    "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;

package/dist/src/components/label/Label.astro

@@ -1,16 +1,16 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { type VariantProps, tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"label"> & VariantProps<typeof label>;
 
 const label = tv({
-	base: [
-		"text-foreground leading-none font-medium",
-		"peer-disabled:cursor-not-allowed peer-disabled:opacity-70 has-[+:disabled]:cursor-not-allowed has-[+:disabled]:opacity-70",
-	],
-	variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
-	defaultVariants: { size: "md" },
+  base: [
+    "text-foreground leading-none font-medium",
+    "peer-disabled:cursor-not-allowed peer-disabled:opacity-70 has-[+:disabled]:cursor-not-allowed has-[+:disabled]:opacity-70",
+  ],
+  variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
+  defaultVariants: { size: "md" },
 });
 
 const { size, class: className, ...rest } = Astro.props;
@@ -18,5 +18,5 @@ const { size, class: className, ...rest } = Astro.props;
 
 {/* eslint-disable-next-line astro/jsx-a11y/label-has-associated-control */}
 <label class={label({ size, class: className })} {...rest}>
-	<slot />
+  <slot />
 </label>

package/dist/src/components/pagination/Pagination.astro

@@ -10,5 +10,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <nav role="navigation" aria-label="pagination" class={pagination({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </nav>

package/dist/src/components/pagination/PaginationContent.astro

@@ -3,8 +3,8 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"ul"> & {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	children: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children: any;
 };
 
 const paginationContent = tv({ base: "flex flex-row items-center gap-1" });
@@ -13,5 +13,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <ul class={paginationContent({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </ul>

package/dist/src/components/pagination/PaginationEllipsis.astro

@@ -11,6 +11,6 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <span aria-hidden class={paginationEllipsis({ class: className })} {...rest}>
-	<Dots class="size-4" />
-	<span class="sr-only">More pages</span>
+  <Dots class="size-4" />
+  <span class="sr-only">More pages</span>
 </span>

package/dist/src/components/pagination/PaginationItem.astro

@@ -3,8 +3,8 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"li"> & {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	children: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children: any;
 };
 
 const paginationItem = tv({ base: "" });
@@ -13,5 +13,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <li class={paginationItem({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </li>

package/dist/src/components/pagination/PaginationLink.astro

@@ -3,41 +3,41 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"a"> {
-	isActive?: boolean;
-	size?: "sm" | "md" | "lg" | "icon";
+  isActive?: boolean;
+  size?: "sm" | "md" | "lg" | "icon";
 }
 
 const paginationLink = tv({
-	base: [
-		"inline-flex items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap",
-		"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		"starwind-transition-colors",
-		"focus-visible:outline-2 focus-visible:outline-offset-2",
-		"disabled:pointer-events-none disabled:opacity-50",
-	],
-	variants: {
-		isActive: {
-			true: "border-border hover:bg-border hover:text-foreground focus-visible:outline-outline border",
-			false:
-				"hover:bg-foreground/10 hover:text-foreground focus-visible:outline-outline bg-transparent",
-		},
-		size: {
-			sm: "h-9 px-3 py-2 text-sm",
-			md: "h-11 px-4 py-2 text-base",
-			lg: "h-12 px-8 py-2 text-lg",
-			icon: "h-11 w-11",
-		},
-	},
-	defaultVariants: { isActive: false, size: "icon" },
+  base: [
+    "inline-flex items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    "starwind-transition-colors",
+    "focus-visible:outline-2 focus-visible:outline-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+  ],
+  variants: {
+    isActive: {
+      true: "border-border hover:bg-border hover:text-foreground focus-visible:outline-outline border",
+      false:
+        "hover:bg-foreground/10 hover:text-foreground focus-visible:outline-outline bg-transparent",
+    },
+    size: {
+      sm: "h-9 px-3 py-2 text-sm",
+      md: "h-11 px-4 py-2 text-base",
+      lg: "h-12 px-8 py-2 text-lg",
+      icon: "h-11 w-11",
+    },
+  },
+  defaultVariants: { isActive: false, size: "icon" },
 });
 
 const { class: className, isActive, size = "icon", ...rest } = Astro.props;
 ---
 
 <a
-	aria-current={isActive ? "page" : undefined}
-	class={paginationLink({ isActive, size, class: className })}
-	{...rest}
+  aria-current={isActive ? "page" : undefined}
+  class={paginationLink({ isActive, size, class: className })}
+  {...rest}
 >
-	<slot />
+  <slot />
 </a>

package/dist/src/components/pagination/PaginationNext.astro

@@ -2,6 +2,7 @@
 import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
 import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
+
 import PaginationLink from "./PaginationLink.astro";
 
 type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
@@ -12,11 +13,11 @@ const { class: className, size = "md", ...rest } = Astro.props;
 ---
 
 <PaginationLink
-	aria-label="Go to next page"
-	size={size}
-	class={paginationNext({ class: className })}
-	{...rest}
+  aria-label="Go to next page"
+  size={size}
+  class={paginationNext({ class: className })}
+  {...rest}
 >
-	<slot />
-	<ChevronRight class="size-4 transition-transform group-hover:translate-x-1" />
+  <slot />
+  <ChevronRight class="size-4 transition-transform group-hover:translate-x-1" />
 </PaginationLink>

package/dist/src/components/pagination/PaginationPrevious.astro

@@ -2,6 +2,7 @@
 import ChevronLeft from "@tabler/icons/outline/chevron-left.svg";
 import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
+
 import PaginationLink from "./PaginationLink.astro";
 
 type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
@@ -12,11 +13,11 @@ const { class: className, size = "md", ...rest } = Astro.props;
 ---
 
 <PaginationLink
-	aria-label="Go to previous page"
-	size={size}
-	class={paginationPrevious({ class: className })}
-	{...rest}
+  aria-label="Go to previous page"
+  size={size}
+  class={paginationPrevious({ class: className })}
+  {...rest}
 >
-	<ChevronLeft class="size-4 transition-transform group-hover:-translate-x-1" />
-	<slot />
+  <ChevronLeft class="size-4 transition-transform group-hover:-translate-x-1" />
+  <slot />
 </PaginationLink>

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

@@ -7,21 +7,21 @@ import PaginationNext from "./PaginationNext.astro";
 import PaginationPrevious from "./PaginationPrevious.astro";
 
 export {
-	Pagination,
-	PaginationContent,
-	PaginationEllipsis,
-	PaginationItem,
-	PaginationLink,
-	PaginationNext,
-	PaginationPrevious,
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
 };
 
 export default {
-	Root: Pagination,
-	Content: PaginationContent,
-	Ellipsis: PaginationEllipsis,
-	Item: PaginationItem,
-	Link: PaginationLink,
-	Next: PaginationNext,
-	Previous: PaginationPrevious,
+  Root: Pagination,
+  Content: PaginationContent,
+  Ellipsis: PaginationEllipsis,
+  Item: PaginationItem,
+  Link: PaginationLink,
+  Next: PaginationNext,
+  Previous: PaginationPrevious,
 };

package/dist/src/components/progress/Progress.astro

@@ -0,0 +1,151 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Current value of the progress bar (omit for indeterminate state)
+   */
+  value?: number;
+  /**
+   * Maximum value for the progress bar (default: 100)
+   */
+  max?: number;
+  /**
+   * Color variant for the progress indicator (default: default)
+   */
+  variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+};
+
+const { class: className, value, max = 100, variant = "default", ...rest } = Astro.props;
+
+const isIndeterminate = value == null;
+const valuePercent = isIndeterminate ? undefined : Math.round((value / max) * 100);
+const valueText = isIndeterminate ? undefined : `${valuePercent}%`;
+
+const progress = tv({
+  base: ["starwind-progress-bar", "bg-accent h-2 w-full overflow-hidden rounded-full"],
+  variants: {
+    variant: {
+      indeterminate: "relative",
+    },
+  },
+});
+
+const indicator = tv({
+  base: ["starwind-progress-indicator", "h-full w-full flex-1 transition-transform"],
+  variants: {
+    variant: {
+      indeterminate: "absolute inset-y-0 start-0 w-3/4",
+    },
+    color: {
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      default: "bg-foreground",
+      info: "bg-info",
+      success: "bg-success",
+      warning: "bg-warning",
+      error: "bg-error",
+    },
+  },
+  defaultVariants: {
+    color: "primary",
+  },
+});
+
+const progressClasses = progress({
+  variant: isIndeterminate ? "indeterminate" : undefined,
+  class: className,
+});
+
+const indicatorClasses = indicator({
+  variant: isIndeterminate ? "indeterminate" : undefined,
+  color: variant,
+});
+
+const indicatorStyle = isIndeterminate
+  ? ""
+  : `transform: translateX(-${100 - (valuePercent ?? 0)}%);`;
+---
+
+<div
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={isIndeterminate ? undefined : value}
+  aria-valuetext={valueText}
+  class:list={[progressClasses]}
+  data-value={value}
+  data-max={max}
+  data-indeterminate={isIndeterminate}
+  {...rest}
+>
+  <div class:list={[indicatorClasses]} style={indicatorStyle}></div>
+</div>
+
+<script>
+  class ProgressHandler {
+    private progressElement: HTMLElement;
+    private observer!: MutationObserver;
+
+    constructor(progressElement: HTMLElement) {
+      this.progressElement = progressElement;
+      this.setupMutationObserver();
+      this.updateProgress(); // Initial update
+    }
+
+    private setupMutationObserver(): void {
+      // Create a MutationObserver to watch for data-value attribute changes
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "data-value" || mutation.attributeName === "data-max") {
+            this.updateProgress();
+          }
+        });
+      });
+
+      // Start observing
+      this.observer.observe(this.progressElement, { attributes: true });
+    }
+
+    private updateProgress(): void {
+      const value = Number(this.progressElement.getAttribute("data-value"));
+      const max = Number(this.progressElement.getAttribute("data-max") || 100);
+      const isIndeterminate = this.progressElement.hasAttribute("data-indeterminate")
+        ? this.progressElement.getAttribute("data-indeterminate") === "true"
+        : value == null;
+
+      // Update ARIA attributes
+      if (!isIndeterminate) {
+        const valuePercent = Math.round((value / max) * 100);
+        this.progressElement.setAttribute("aria-valuenow", String(value));
+        this.progressElement.setAttribute("aria-valuetext", `${valuePercent}%`);
+
+        // Update indicator position
+        const indicator = this.progressElement.querySelector("div");
+        if (indicator) {
+          indicator.style.transform = `translateX(-${100 - valuePercent}%)`;
+        }
+      }
+    }
+
+    // Clean up method to disconnect observer
+    public destroy(): void {
+      this.observer.disconnect();
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const progressInstances = new WeakMap<HTMLElement, ProgressHandler>();
+
+  const setupProgressBars = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-progress-bar").forEach((progressElement) => {
+      if (!progressInstances.has(progressElement)) {
+        progressInstances.set(progressElement, new ProgressHandler(progressElement));
+      }
+    });
+  };
+
+  setupProgressBars();
+  document.addEventListener("astro:after-swap", setupProgressBars);
+</script>

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

@@ -0,0 +1,5 @@
+import Progress from "./Progress.astro";
+
+export { Progress };
+
+export default Progress;

package/dist/src/components/radio-group/RadioGroup.astro

@@ -0,0 +1,156 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"fieldset"> & {
+  /**
+   * Value for the radio group
+   */
+  value?: string;
+  /**
+   * Default value for the radio group
+   */
+  defaultValue?: string;
+  /**
+   * Legend for the radio group
+   */
+  legend?: string;
+  /**
+   * Whether the radio group is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Orientation of the radio group
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+const radioGroup = tv({
+  base: "starwind-radio-group disabled:cursor-not-allowed disabled:opacity-70",
+  variants: {
+    orientation: {
+      vertical: "grid gap-3",
+      horizontal: "flex flex-row items-center gap-3",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+const {
+  class: className,
+  value,
+  defaultValue,
+  legend,
+  disabled = false,
+  orientation = "vertical",
+  ...rest
+} = Astro.props;
+---
+
+<fieldset
+  class:list={[radioGroup({ orientation, class: className })]}
+  data-value={value || defaultValue}
+  disabled={disabled}
+  {...rest}
+>
+  {legend && <legend class="sr-only">{legend}</legend>}
+  <slot />
+</fieldset>
+
+<script>
+  import type { RadioGroupChangeEvent } from "./RadioGroupTypes";
+
+  class RadioGroupHandler {
+    private radioGroup: HTMLFieldSetElement;
+    private radioInputs: NodeListOf<HTMLInputElement> | undefined;
+    private radioGroupId: string | undefined;
+
+    constructor(radioGroup: HTMLFieldSetElement, idx: number) {
+      this.radioGroup = radioGroup;
+      this.radioGroupId = radioGroup.id || `starwind-radio-group-${idx}`;
+      this.radioInputs = radioGroup.querySelectorAll<HTMLInputElement>('input[type="radio"]');
+      this.init();
+    }
+
+    private init() {
+      // Initialize checked state based on data-value
+      this.syncWithDataValue();
+
+      // Setup event listeners
+      this.setupEvents();
+    }
+
+    private syncWithDataValue() {
+      const initialValue = this.radioGroup.dataset.value;
+      if (!initialValue || !this.radioInputs) return;
+
+      // Find the radio input with the matching value and check it
+      this.radioInputs.forEach((input) => {
+        if (input.value === initialValue) {
+          input.checked = true;
+        } else {
+          input.checked = false;
+        }
+      });
+    }
+
+    private setupEvents() {
+      // Listen for changes to update the fieldset's data-value attribute
+      this.radioGroup.addEventListener("change", this.handleChange.bind(this));
+    }
+
+    private handleChange(e: Event) {
+      const target = e.target as HTMLInputElement;
+      console.log("target", target);
+      if (target.type !== "radio") return;
+
+      // Update the data-value attribute
+      this.radioGroup.dataset.value = target.value;
+
+      // Ensure all other radio buttons in the group are unchecked
+      if (this.radioInputs) {
+        this.radioInputs.forEach((radio) => {
+          if (radio !== target) {
+            radio.checked = false;
+          }
+        });
+      }
+
+      // Explicitly mark the clicked radio as checked
+      target.checked = true;
+
+      // Dispatch custom event for external listeners
+      this.dispatchChangeEvent(target.value);
+    }
+
+    private dispatchChangeEvent(value: string) {
+      const event = new CustomEvent<RadioGroupChangeEvent["detail"]>("starwind:value-change", {
+        bubbles: true,
+        detail: {
+          value: value,
+          radioGroupId: this.radioGroupId,
+        },
+      });
+      this.radioGroup.dispatchEvent(event);
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const radioGroupInstances = new WeakMap<HTMLElement, RadioGroupHandler>();
+
+  const setupRadioGroups = () => {
+    document
+      .querySelectorAll<HTMLFieldSetElement>(".starwind-radio-group")
+      .forEach((radioGroup, idx) => {
+        if (!radioGroupInstances.has(radioGroup)) {
+          radioGroupInstances.set(radioGroup, new RadioGroupHandler(radioGroup, idx));
+        }
+      });
+  };
+
+  // Initialize on page load and after Astro view transitions
+  setupRadioGroups();
+  document.addEventListener("astro:after-swap", setupRadioGroups);
+</script>