@starwind-ui/core 1.15.1 → 1.15.2

package/dist/src/components/avatar/AvatarImage.astro

@@ -0,0 +1,49 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { Image } from "astro:assets";
+import { tv } from "tailwind-variants";
+
+export const avatarImage = tv({ base: "relative z-1 h-full w-full object-cover" });
+
+type BaseProps = { alt: string; class?: string };
+
+type WithSrc = BaseProps & { src: string; image?: never };
+
+type WithImage = BaseProps & { src?: never; image: ImageMetadata };
+
+type Props = HTMLAttributes<"img"> & (WithSrc | WithImage);
+
+const { src, image, alt, class: className, width, height, ...rest } = Astro.props;
+
+if (!src && !image) {
+  throw new Error("Either 'src' or 'image' is required for an avatar image.");
+}
+---
+
+{
+  src && (
+    // eslint-disable-next-line astro/jsx-a11y/no-noninteractive-element-interactions
+    <img
+      src={src}
+      alt={alt}
+      class={avatarImage({ class: className })}
+      width={64}
+      height={64}
+      onerror="this.style.display='none'"
+      data-slot="avatar-image"
+      {...rest}
+    />
+  )
+}
+{
+  image && (
+    <Image
+      src={image}
+      alt={alt}
+      class={avatarImage({ class: className })}
+      width={64}
+      data-slot="avatar-image"
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1,13 @@
+import Avatar, { avatar } from "./Avatar.astro";
+import AvatarFallback, { avatarFallback } from "./AvatarFallback.astro";
+import AvatarImage, { avatarImage } from "./AvatarImage.astro";
+
+const AvatarVariants = { avatar, avatarFallback, avatarImage };
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarVariants };
+
+export default {
+  Root: Avatar,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+};

package/dist/src/components/badge/Badge.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+interface Props
+  extends HTMLAttributes<"div">, Omit<HTMLAttributes<"a">, "type">, VariantProps<typeof badge> {}
+
+export const badge = tv({
+  base: [
+    "starwind-badge inline-flex items-center gap-1.5 rounded-full font-medium whitespace-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-all outline-none focus-visible:ring-3",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+  ],
+  variants: {
+    variant: {
+      default: "bg-foreground text-background focus-visible:ring-outline/50",
+      primary: "bg-primary text-primary-foreground focus-visible:ring-primary/50",
+      secondary: "bg-secondary text-secondary-foreground focus-visible:ring-secondary/50",
+      outline: "border-border focus-visible:border-outline focus-visible:ring-outline/50 border",
+      ghost: "bg-foreground/10 text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground focus-visible:ring-info/50",
+      success: "bg-success text-success-foreground focus-visible:ring-success/50",
+      warning: "bg-warning text-warning-foreground focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground focus-visible:ring-error/50",
+    },
+    size: {
+      sm: "px-2.5 py-0.5 text-xs [&_svg:not([class*='size-'])]:size-3",
+      md: "px-3 py-0.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+      lg: "px-4 py-1 text-base [&_svg:not([class*='size-'])]:size-4.5",
+    },
+    isLink: { true: "cursor-pointer", false: "" },
+  },
+  compoundVariants: [
+    { isLink: true, variant: "default", className: "hover:bg-foreground/80" },
+    { isLink: true, variant: "primary", className: "hover:bg-primary/80" },
+    { isLink: true, variant: "secondary", className: "hover:bg-secondary/80" },
+    { isLink: true, variant: "outline", className: "hover:border-border/80" },
+    { isLink: true, variant: "ghost", className: "hover:bg-foreground/7" },
+    { isLink: true, variant: "info", className: "hover:bg-info/80" },
+    { isLink: true, variant: "success", className: "hover:bg-success/80" },
+    { isLink: true, variant: "warning", className: "hover:bg-warning/80" },
+    { isLink: true, variant: "error", className: "hover:bg-error/80" },
+  ],
+  defaultVariants: { variant: "default", size: "md", isLink: false },
+});
+
+const { variant, size, class: className, ...rest } = Astro.props;
+const isLink = Astro.props.href ? true : false;
+const Tag = Astro.props.href ? "a" : "div";
+---
+
+<Tag class={badge({ variant, size, isLink, class: className })} data-slot="badge" {...rest}>
+  <slot />
+</Tag>

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

@@ -0,0 +1,7 @@
+import Badge, { badge } from "./Badge.astro";
+
+const BadgeVariants = { badge };
+
+export { Badge, BadgeVariants };
+
+export default Badge;

package/dist/src/components/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"nav">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<nav aria-label="breadcrumb" class={className} data-slot="breadcrumb" {...rest}>
+  <slot />
+</nav>

package/dist/src/components/breadcrumb/BreadcrumbEllipsis.astro

@@ -0,0 +1,28 @@
+---
+import Dots from "@tabler/icons/outline/dots.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"span">;
+
+export const breadcrumbEllipsis = tv({
+  base: "flex size-6 items-center justify-center [&>svg]:size-4",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  role="presentation"
+  aria-hidden="true"
+  class={breadcrumbEllipsis({ class: className })}
+  data-slot="breadcrumb-ellipsis"
+  {...rest}
+>
+  <slot name="icon">
+    <Dots />
+  </slot>
+  <slot>
+    <span class="sr-only">More</span>
+  </slot>
+</span>

package/dist/src/components/breadcrumb/BreadcrumbItem.astro

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

package/dist/src/components/breadcrumb/BreadcrumbLink.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"a"> & {
+  asChild?: boolean;
+};
+
+export const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+---
+
+{
+  asChild ? (
+    <slot />
+  ) : (
+    <a class={breadcrumbLink({ class: className })} data-slot="breadcrumb-link" {...rest}>
+      <slot />
+    </a>
+  )
+}

package/dist/src/components/breadcrumb/BreadcrumbList.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"ol">;
+
+export const breadcrumbList = tv({
+  base: "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words sm:gap-2",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ol class={breadcrumbList({ class: className })} data-slot="breadcrumb-list" {...rest}>
+  <slot />
+</ol>

package/dist/src/components/breadcrumb/BreadcrumbPage.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"span">;
+
+export const breadcrumbPage = tv({ base: "text-foreground font-normal" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class={breadcrumbPage({ class: className })}
+  data-slot="breadcrumb-page"
+  {...rest}
+>
+  <slot />
+</span>

package/dist/src/components/breadcrumb/BreadcrumbSeparator.astro

@@ -0,0 +1,23 @@
+---
+import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"li">;
+
+export const breadcrumbSeparator = tv({ base: "[&>svg]:size-4" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li
+  role="presentation"
+  aria-hidden="true"
+  class={breadcrumbSeparator({ class: className })}
+  data-slot="breadcrumb-separator"
+  {...rest}
+>
+  <slot>
+    <ChevronRight />
+  </slot>
+</li>

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

@@ -0,0 +1,37 @@
+import Breadcrumb from "./Breadcrumb.astro";
+import BreadcrumbEllipsis, { breadcrumbEllipsis } from "./BreadcrumbEllipsis.astro";
+import BreadcrumbItem, { breadcrumbItem } from "./BreadcrumbItem.astro";
+import BreadcrumbLink, { breadcrumbLink } from "./BreadcrumbLink.astro";
+import BreadcrumbList, { breadcrumbList } from "./BreadcrumbList.astro";
+import BreadcrumbPage, { breadcrumbPage } from "./BreadcrumbPage.astro";
+import BreadcrumbSeparator, { breadcrumbSeparator } from "./BreadcrumbSeparator.astro";
+
+const BreadcrumbVariants = {
+  breadcrumbEllipsis,
+  breadcrumbItem,
+  breadcrumbLink,
+  breadcrumbList,
+  breadcrumbPage,
+  breadcrumbSeparator,
+};
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbVariants,
+};
+
+export default {
+  Root: Breadcrumb,
+  List: BreadcrumbList,
+  Ellipsis: BreadcrumbEllipsis,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Separator: BreadcrumbSeparator,
+  Page: BreadcrumbPage,
+};

package/dist/src/components/button/Button.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+interface Props
+  extends
+    HTMLAttributes<"button">,
+    Omit<HTMLAttributes<"a">, "type">,
+    VariantProps<typeof button> {}
+
+const { variant, size, class: className, ...rest } = Astro.props;
+
+export const button = tv({
+  base: [
+    "inline-flex items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-all outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+  ],
+  variants: {
+    variant: {
+      default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
+      primary:
+        "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
+      secondary:
+        "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      outline:
+        "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
+      ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
+      success:
+        "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/50",
+      warning:
+        "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:ring-error/50",
+    },
+    size: {
+      sm: "h-9 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3.5",
+      md: "h-11 px-5 text-base has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4.5",
+      lg: "h-12 px-8 text-lg has-[>svg]:px-6 [&_svg:not([class*='size-'])]:size-5",
+      "icon-sm": "size-9 [&_svg:not([class*='size-'])]:size-3.5",
+      icon: "size-11 [&_svg:not([class*='size-'])]:size-4.5",
+      "icon-lg": "size-12 [&_svg:not([class*='size-'])]:size-5",
+    },
+  },
+  defaultVariants: { variant: "default", size: "md" },
+});
+
+const Tag = Astro.props.href ? "a" : "button";
+---
+
+<Tag class={button({ variant, size, class: className })} data-slot="button" {...rest}>
+  <slot />
+</Tag>

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

@@ -0,0 +1,7 @@
+import Button, { button } from "./Button.astro";
+
+const ButtonVariants = { button };
+
+export { Button, ButtonVariants };
+
+export default Button;

package/dist/src/components/button-group/ButtonGroup.astro

@@ -0,0 +1,62 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The orientation of the button group.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const buttonGroup = tv({
+  base: [
+    "flex w-fit items-stretch",
+    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+    "has-[>[data-slot=button-group]]:gap-2 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  ],
+  variants: {
+    orientation: {
+      horizontal: [
+        "[&>*:not(:first-child)]:rounded-l-none",
+        "[&>*:not(:first-child)]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-r-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:rounded-l-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-as-child]_>_*]:rounded-r-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:rounded-l-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-slot=select-trigger]]:rounded-r-none",
+      ],
+      vertical: [
+        "flex-col",
+        "[&>*:not(:first-child)]:rounded-t-none",
+        "[&>*:not(:first-child)]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-b-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:rounded-t-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-as-child]_>_*]:rounded-b-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:rounded-t-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-slot=select-trigger]]:rounded-b-none",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+const { class: className, orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<div
+  role="group"
+  data-slot="button-group"
+  data-orientation={orientation}
+  class={buttonGroup({ orientation, class: className })}
+  {...rest}
+>
+  <slot />
+</div>

package/dist/src/components/button-group/ButtonGroupSeparator.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Separator } from "@/components/starwind/separator";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The orientation of the separator.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const buttonGroupSeparator = tv({
+  base: ["bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto"],
+});
+
+const { class: className, orientation = "vertical", ...rest } = Astro.props;
+---
+
+<Separator
+  data-slot="button-group-separator"
+  orientation={orientation}
+  class={buttonGroupSeparator({ class: className })}
+  {...rest}
+/>

package/dist/src/components/button-group/ButtonGroupText.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const buttonGroupText = tv({
+  base: [
+    "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[buttonGroupText(), className]} data-slot="button-group-text" {...rest}>
+  <slot />
+</div>

package/dist/src/components/button-group/index.ts

@@ -0,0 +1,17 @@
+import ButtonGroup, { buttonGroup } from "./ButtonGroup.astro";
+import ButtonGroupSeparator, { buttonGroupSeparator } from "./ButtonGroupSeparator.astro";
+import ButtonGroupText, { buttonGroupText } from "./ButtonGroupText.astro";
+
+const ButtonGroupVariants = {
+  buttonGroup,
+  buttonGroupSeparator,
+  buttonGroupText,
+};
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonGroupVariants };
+
+export default {
+  Root: ButtonGroup,
+  Separator: ButtonGroupSeparator,
+  Text: ButtonGroupText,
+};

package/dist/src/components/card/Card.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const card = tv({ base: "bg-card text-card-foreground rounded-2xl border shadow-sm" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={card({ class: className })} data-slot="card" {...rest}>
+  <slot />
+</div>

package/dist/src/components/card/CardContent.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardContent = tv({ base: "p-8 pt-0" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardContent({ class: className })} data-slot="card-content" {...rest}>
+  <slot />
+</div>

package/dist/src/components/card/CardDescription.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardDescription = tv({ base: "text-muted-foreground text-base" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardDescription({ class: className })} data-slot="card-description" {...rest}>
+  <slot />
+</div>

package/dist/src/components/card/CardFooter.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardFooter = tv({ base: "flex items-center p-8 pt-0" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardFooter({ class: className })} data-slot="card-footer" {...rest}>
+  <slot />
+</div>

package/dist/src/components/card/CardHeader.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardHeader = tv({ base: "flex flex-col space-y-2 p-8" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardHeader({ class: className })} data-slot="card-header" {...rest}>
+  <slot />
+</div>

package/dist/src/components/card/CardTitle.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardTitle = tv({ base: "text-xl leading-none font-semibold tracking-tight" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={cardTitle({ class: className })} data-slot="card-title" {...rest}>
+  <slot />
+</div>

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

@@ -0,0 +1,26 @@
+import Card, { card } from "./Card.astro";
+import CardContent, { cardContent } from "./CardContent.astro";
+import CardDescription, { cardDescription } from "./CardDescription.astro";
+import CardFooter, { cardFooter } from "./CardFooter.astro";
+import CardHeader, { cardHeader } from "./CardHeader.astro";
+import CardTitle, { cardTitle } from "./CardTitle.astro";
+
+const CardVariants = {
+  card,
+  cardContent,
+  cardDescription,
+  cardFooter,
+  cardHeader,
+  cardTitle,
+};
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardVariants };
+
+export default {
+  Root: Card,
+  Header: CardHeader,
+  Footer: CardFooter,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+};