@starwind-ui/core 1.8.0 → 1.10.0

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

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

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

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

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

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

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

@@ -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/label/Label.astro

@@ -4,7 +4,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"label"> & VariantProps<typeof label>;
 
-const label = tv({
+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",
@@ -17,6 +17,6 @@ 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}>
+<label class={label({ size, class: className })} data-slot="label" {...rest}>
   <slot />
 </label>

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

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

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

@@ -4,11 +4,17 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"nav">;
 
-const pagination = tv({ base: "mx-auto flex w-full justify-center" });
+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 })} {...rest}>
+<nav
+  role="navigation"
+  aria-label="pagination"
+  class={pagination({ class: className })}
+  data-slot="pagination"
+  {...rest}
+>
   <slot />
 </nav>

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

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

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

@@ -5,12 +5,17 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"span">;
 
-const paginationEllipsis = tv({ base: "flex h-9 w-9 items-center justify-center" });
+export const paginationEllipsis = tv({ base: "flex h-9 w-9 items-center justify-center" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<span aria-hidden class={paginationEllipsis({ class: className })} {...rest}>
+<span
+  aria-hidden
+  class={paginationEllipsis({ class: className })}
+  data-slot="pagination-ellipsis"
+  {...rest}
+>
   <Dots class="size-4" />
   <span class="sr-only">More pages</span>
 </span>

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

@@ -6,11 +6,11 @@ type Props = HTMLAttributes<"li"> & {
   children: any;
 };
 
-const paginationItem = tv({ base: "" });
+export const paginationItem = tv({ base: "" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<li class={paginationItem({ class: className })} {...rest}>
+<li class={paginationItem({ class: className })} data-slot="pagination-item" {...rest}>
   <slot />
 </li>

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

@@ -1,42 +1,23 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 
-interface Props extends HTMLAttributes<"a"> {
-  isActive?: boolean;
-  size?: "sm" | "md" | "lg" | "icon";
-}
+import { ButtonVariants } from "@/components/starwind/button";
 
-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" },
-});
+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={paginationLink({ isActive, size, class: className })}
+  class={ButtonVariants.button({ variant: isActive ? "outline" : "ghost", size, class: className })}
+  data-slot="pagination-link"
   {...rest}
 >
   <slot />

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

@@ -7,7 +7,7 @@ import PaginationLink from "./PaginationLink.astro";
 
 type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
 
-const paginationNext = tv({ base: "group gap-1" });
+export const paginationNext = tv({ base: "group gap-1" });
 
 const { class: className, size = "md", ...rest } = Astro.props;
 ---
@@ -16,6 +16,7 @@ const { class: className, size = "md", ...rest } = Astro.props;
   aria-label="Go to next page"
   size={size}
   class={paginationNext({ class: className })}
+  data-slot="pagination-next"
   {...rest}
 >
   <slot />

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

@@ -7,7 +7,7 @@ import PaginationLink from "./PaginationLink.astro";
 
 type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
 
-const paginationPrevious = tv({ base: "group gap-1" });
+export const paginationPrevious = tv({ base: "group gap-1" });
 
 const { class: className, size = "md", ...rest } = Astro.props;
 ---
@@ -16,6 +16,7 @@ const { class: className, size = "md", ...rest } = Astro.props;
   aria-label="Go to previous page"
   size={size}
   class={paginationPrevious({ class: className })}
+  data-slot="pagination-previous"
   {...rest}
 >
   <ChevronLeft class="size-4 transition-transform group-hover:-translate-x-1" />

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

@@ -1,10 +1,20 @@
-import Pagination from "./Pagination.astro";
-import PaginationContent from "./PaginationContent.astro";
-import PaginationEllipsis from "./PaginationEllipsis.astro";
-import PaginationItem from "./PaginationItem.astro";
-import PaginationLink from "./PaginationLink.astro";
-import PaginationNext from "./PaginationNext.astro";
-import PaginationPrevious from "./PaginationPrevious.astro";
+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,
@@ -14,6 +24,7 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationVariants,
 };
 
 export default {

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

@@ -23,8 +23,8 @@ 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"],
+export const progress = tv({
+  base: ["starwind-progress-bar", "bg-muted h-2 w-full overflow-hidden rounded-full"],
   variants: {
     variant: {
       indeterminate: "relative",
@@ -32,7 +32,7 @@ const progress = tv({
   },
 });
 
-const indicator = tv({
+export const progressIndicator = tv({
   base: ["starwind-progress-indicator", "h-full w-full flex-1 transition-transform"],
   variants: {
     variant: {
@@ -53,6 +53,8 @@ const indicator = tv({
   },
 });
 
+const indicator = progressIndicator;
+
 const progressClasses = progress({
   variant: isIndeterminate ? "indeterminate" : undefined,
   class: className,
@@ -78,6 +80,7 @@ const indicatorStyle = isIndeterminate
   data-value={value}
   data-max={max}
   data-indeterminate={isIndeterminate}
+  data-slot="progress"
   {...rest}
 >
   <div class:list={[indicatorClasses]} style={indicatorStyle}></div>

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

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

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

@@ -25,7 +25,7 @@ type Props = HTMLAttributes<"fieldset"> & {
   orientation?: "horizontal" | "vertical";
 };
 
-const radioGroup = tv({
+export const radioGroup = tv({
   base: "starwind-radio-group disabled:cursor-not-allowed disabled:opacity-70",
   variants: {
     orientation: {
@@ -53,6 +53,7 @@ const {
   class:list={[radioGroup({ orientation, class: className })]}
   data-value={value || defaultValue}
   disabled={disabled}
+  data-slot="radio-group"
   {...rest}
 >
   {legend && <legend class="sr-only">{legend}</legend>}

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

@@ -28,7 +28,7 @@ type Props = HTMLAttributes<"input"> &
     checked?: boolean;
   };
 
-const radioWrapper = tv({
+export const radioWrapper = tv({
   base: "relative isolate flex shrink-0",
   variants: {
     size: {
@@ -42,7 +42,7 @@ const radioWrapper = tv({
   },
 });
 
-const radioItem = tv({
+export const radioItem = tv({
   base: [
     "starwind-radio-item peer z-10 h-full w-full",
     "absolute inset-0 cursor-pointer opacity-0 outline-none focus:outline-none focus-visible:outline-none",
@@ -50,30 +50,31 @@ const radioItem = tv({
   ],
 });
 
-const radioControl = tv({
+export const radioControl = tv({
   base: [
     "starwind-radio-control",
-    "border-input bg-background",
+    "border-input bg-background dark:bg-input/30",
     "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:transition-none",
+    "outline-none peer-focus-visible:ring-3",
     "absolute inset-0 rounded-full border shadow-xs",
-    "starwind-transition-colors peer-checked:[&>svg]:opacity-100",
+    "transition-all peer-checked:[&>svg]:opacity-100",
     "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
     "flex items-center justify-center",
   ],
   variants: {
     variant: {
       default:
-        "peer-checked:border-foreground [&>svg]:fill-foreground peer-focus-visible:outline-outline",
+        "peer-checked:border-foreground [&>svg]:fill-foreground peer-focus-visible:ring-outline/50",
       primary:
-        "peer-checked:border-primary [&>svg]:fill-primary peer-focus-visible:outline-primary",
+        "peer-checked:border-primary [&>svg]:fill-primary peer-focus-visible:ring-primary/50",
       secondary:
-        "peer-checked:border-secondary [&>svg]:fill-secondary peer-focus-visible:outline-secondary",
-      info: "peer-checked:border-info [&>svg]:fill-info peer-focus-visible:outline-info",
+        "peer-checked:border-secondary [&>svg]:fill-secondary peer-focus-visible:ring-secondary/50",
+      info: "peer-checked:border-info [&>svg]:fill-info peer-focus-visible:ring-info/50",
       success:
-        "peer-checked:border-success [&>svg]:fill-success peer-focus-visible:outline-success",
+        "peer-checked:border-success [&>svg]:fill-success peer-focus-visible:ring-success/50",
       warning:
-        "peer-checked:border-warning [&>svg]:fill-warning peer-focus-visible:outline-warning",
-      error: "peer-checked:border-error [&>svg]:fill-error peer-focus-visible:outline-error",
+        "peer-checked:border-warning [&>svg]:fill-warning peer-focus-visible:ring-warning/50",
+      error: "peer-checked:border-error [&>svg]:fill-error peer-focus-visible:ring-error/50",
     },
   },
   defaultVariants: {
@@ -81,7 +82,7 @@ const radioControl = tv({
   },
 });
 
-const radioIndicator = tv({
+export const radioIndicator = tv({
   base: ["starwind-radio-indicator", "opacity-0 transition-opacity"],
   variants: {
     size: {
@@ -108,7 +109,7 @@ const {
 } = Astro.props;
 ---
 
-<div class={radioWrapper({ size })}>
+<div class={radioWrapper({ size })} data-slot="radio-group-item-wrapper">
   <input
     type="radio"
     class={radioItem()}
@@ -117,9 +118,10 @@ const {
     value={value}
     checked={checked}
     disabled={disabled}
+    data-slot="radio-group-item"
     {...rest}
   />
-  <span class={radioControl({ variant, class: className })}>
+  <span class={radioControl({ variant, class: className })} data-slot="radio-group-item-control">
     <CircleFilled class={radioIndicator({ size })} />
   </span>
 </div>

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

@@ -1,8 +1,21 @@
-import RadioGroup from "./RadioGroup.astro";
-import RadioGroupItem from "./RadioGroupItem.astro";
+import RadioGroup, { radioGroup } from "./RadioGroup.astro";
+import RadioGroupItem, {
+  radioControl,
+  radioIndicator,
+  radioItem,
+  radioWrapper,
+} from "./RadioGroupItem.astro";
 import type { RadioGroupChangeEvent } from "./RadioGroupTypes";
 
-export { RadioGroup, type RadioGroupChangeEvent, RadioGroupItem };
+const RadioGroupVariants = {
+  radioGroup,
+  radioWrapper,
+  radioItem,
+  radioControl,
+  radioIndicator,
+};
+
+export { RadioGroup, type RadioGroupChangeEvent, RadioGroupItem, RadioGroupVariants };
 
 export default {
   Root: RadioGroup,

package/dist/src/components/select/Select.astro

@@ -21,6 +21,7 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
   class:list={["starwind-select", "relative", className]}
   data-name={name}
   data-value={defaultValue}
+  data-slot="select"
   {...rest}
 >
   <slot />

package/dist/src/components/select/SelectContent.astro

@@ -25,7 +25,7 @@ type Props = HTMLAttributes<"div"> & {
   animationDuration?: number;
 };
 
-const selectContent = tv({
+export const selectContent = tv({
   base: [
     "starwind-select-content",
     "bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
@@ -46,7 +46,7 @@ const selectContent = tv({
   defaultVariants: { side: "bottom", align: "start" },
 });
 
-const selectContentInner = tv({
+export const selectContentInner = tv({
   base: "max-h-96 w-full min-w-(--select-trigger-width) overflow-y-auto p-1",
 });
 
@@ -66,6 +66,7 @@ const {
   data-side={side}
   data-align={align}
   data-state="closed"
+  data-slot="select-content"
   tabindex="-1"
   style={{
     // hide the content initially. Script will remove this