@starwind-ui/core 1.12.0 → 1.12.1

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

@@ -1,11 +0,0 @@
-import Kbd, { kbd } from "./Kbd.astro";
-import KbdGroup, { kbdGroup } from "./KbdGroup.astro";
-
-const KbdVariants = { kbd, kbdGroup };
-
-export { Kbd, KbdGroup, KbdVariants };
-
-export default {
-  Root: Kbd,
-  Group: KbdGroup,
-};

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

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"label"> & VariantProps<typeof label>;
-
-export 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" },
-});
-
-const { size, class: className, ...rest } = Astro.props;
----
-
-{/* eslint-disable-next-line astro/jsx-a11y/label-has-associated-control */}
-<label class={label({ size, class: className })} data-slot="label" {...rest}>
-  <slot />
-</label>

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

@@ -1,7 +0,0 @@
-import Label, { label } from "./Label.astro";
-
-const LabelVariants = { label };
-
-export { Label, LabelVariants };
-
-export default Label;

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

@@ -1,20 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"nav">;
-
-export const pagination = tv({ base: "mx-auto flex w-full justify-center" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<nav
-  role="navigation"
-  aria-label="pagination"
-  class={pagination({ class: className })}
-  data-slot="pagination"
-  {...rest}
->
-  <slot />
-</nav>

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

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"ul"> & {
-  children: any;
-};
-
-export const paginationContent = tv({ base: "flex flex-row items-center gap-1" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<ul class={paginationContent({ class: className })} data-slot="pagination-content" {...rest}>
-  <slot />
-</ul>

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

@@ -1,35 +0,0 @@
----
-import Dots from "@tabler/icons/outline/dots.svg";
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"span"> & VariantProps<typeof paginationEllipsis>;
-
-export const paginationEllipsis = tv({
-  base: "flex items-center justify-center",
-  variants: {
-    size: {
-      "icon-sm": "size-9",
-      icon: "size-11",
-      "icon-lg": "size-12",
-    },
-  },
-  defaultVariants: { size: "icon" },
-});
-
-const { class: className, size, ...rest } = Astro.props;
----
-
-<span
-  aria-hidden
-  class={paginationEllipsis({ size, class: className })}
-  data-slot="pagination-ellipsis"
-  {...rest}
->
-  <slot name="icon">
-    <Dots class="size-4" />
-  </slot>
-  <slot>
-    <span class="sr-only">More pages</span>
-  </slot>
-</span>

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

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"li"> & {
-  children: any;
-};
-
-export const paginationItem = tv({ base: "" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<li class={paginationItem({ class: className })} data-slot="pagination-item" {...rest}>
-  <slot />
-</li>

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

@@ -1,24 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import type { VariantProps } from "tailwind-variants";
-
-import { ButtonVariants } from "@/components/starwind/button";
-
-type Props = HTMLAttributes<"a"> &
-  Omit<VariantProps<typeof ButtonVariants.button>, "variant"> & {
-    isActive?: boolean;
-  };
-
-export const paginationLink = ButtonVariants.button;
-
-const { class: className, isActive, size = "icon", ...rest } = Astro.props;
----
-
-<a
-  aria-current={isActive ? "page" : undefined}
-  class={ButtonVariants.button({ variant: isActive ? "outline" : "ghost", size, class: className })}
-  data-slot="pagination-link"
-  {...rest}
->
-  <slot />
-</a>

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

@@ -1,30 +0,0 @@
----
-import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-import { ButtonVariants } from "@/components/starwind/button";
-
-import PaginationLink from "./PaginationLink.astro";
-
-type Props = HTMLAttributes<"a"> & {
-  size?: VariantProps<typeof ButtonVariants.button>["size"];
-};
-
-export const paginationNext = tv({ base: "group gap-1" });
-
-const { class: className, size = "md", ...rest } = Astro.props;
----
-
-<PaginationLink
-  aria-label="Go to next page"
-  size={size}
-  class={paginationNext({ class: className })}
-  data-slot="pagination-next"
-  {...rest}
->
-  <slot />
-  <slot name="icon">
-    <ChevronRight class="size-4 transition-transform group-hover:translate-x-1" />
-  </slot>
-</PaginationLink>

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

@@ -1,30 +0,0 @@
----
-import ChevronLeft from "@tabler/icons/outline/chevron-left.svg";
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-import { ButtonVariants } from "@/components/starwind/button";
-
-import PaginationLink from "./PaginationLink.astro";
-
-type Props = HTMLAttributes<"a"> & {
-  size?: VariantProps<typeof ButtonVariants.button>["size"];
-};
-
-export const paginationPrevious = tv({ base: "group gap-1" });
-
-const { class: className, size = "md", ...rest } = Astro.props;
----
-
-<PaginationLink
-  aria-label="Go to previous page"
-  size={size}
-  class={paginationPrevious({ class: className })}
-  data-slot="pagination-previous"
-  {...rest}
->
-  <slot name="icon">
-    <ChevronLeft class="size-4 transition-transform group-hover:-translate-x-1" />
-  </slot>
-  <slot />
-</PaginationLink>

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

@@ -1,38 +0,0 @@
-import Pagination, { pagination } from "./Pagination.astro";
-import PaginationContent, { paginationContent } from "./PaginationContent.astro";
-import PaginationEllipsis, { paginationEllipsis } from "./PaginationEllipsis.astro";
-import PaginationItem, { paginationItem } from "./PaginationItem.astro";
-import PaginationLink, { paginationLink } from "./PaginationLink.astro";
-import PaginationNext, { paginationNext } from "./PaginationNext.astro";
-import PaginationPrevious, { paginationPrevious } from "./PaginationPrevious.astro";
-
-const PaginationVariants = {
-  pagination,
-  paginationContent,
-  paginationEllipsis,
-  paginationItem,
-  paginationLink,
-  paginationNext,
-  paginationPrevious,
-};
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-  PaginationVariants,
-};
-
-export default {
-  Root: Pagination,
-  Content: PaginationContent,
-  Ellipsis: PaginationEllipsis,
-  Item: PaginationItem,
-  Link: PaginationLink,
-  Next: PaginationNext,
-  Previous: PaginationPrevious,
-};

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

@@ -1,154 +0,0 @@
----
-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}%`;
-
-export const progress = tv({
-  base: ["starwind-progress-bar", "bg-muted h-2 w-full overflow-hidden rounded-full"],
-  variants: {
-    variant: {
-      indeterminate: "relative",
-    },
-  },
-});
-
-export const progressIndicator = 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 indicator = progressIndicator;
-
-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}
-  data-slot="progress"
-  {...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

@@ -1,10 +0,0 @@
-import Progress, { progress, progressIndicator } from "./Progress.astro";
-
-const ProgressVariants = {
-  progress,
-  progressIndicator,
-};
-
-export { Progress, ProgressVariants };
-
-export default Progress;

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

@@ -1,157 +0,0 @@
----
-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";
-};
-
-export 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}
-  data-slot="radio-group"
-  {...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>