@starwind-ui/core 1.15.1 → 1.15.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,155 @@
+---
+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);
+  document.addEventListener("starwind:init", setupProgressBars);
+</script>

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

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