@starwind-ui/core 1.7.3 → 1.9.0

package/dist/src/components/dialog/DialogTrigger.astro

@@ -24,7 +24,12 @@ if (Astro.slots.has("default")) {
 
 {
   asChild && hasChildren ? (
-    <div class="starwind-dialog-trigger" data-as-child data-dialog-for={dialogFor}>
+    <div
+      class:list={["starwind-dialog-trigger", className]}
+      data-slot="dialog-trigger"
+      data-as-child
+      data-dialog-for={dialogFor}
+    >
       <slot />
     </div>
   ) : (
@@ -32,6 +37,7 @@ if (Astro.slots.has("default")) {
       type="button"
       aria-haspopup="dialog"
       class:list={["starwind-dialog-trigger", className]}
+      data-slot="dialog-trigger"
       data-dialog-for={dialogFor}
       {...rest}
     >

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

@@ -1,12 +1,26 @@
 import Dialog from "./Dialog.astro";
 import DialogClose from "./DialogClose.astro";
-import DialogContent from "./DialogContent.astro";
-import DialogDescription from "./DialogDescription.astro";
-import DialogFooter from "./DialogFooter.astro";
-import DialogHeader from "./DialogHeader.astro";
-import DialogTitle from "./DialogTitle.astro";
+import DialogContent, {
+  dialogBackdrop,
+  dialogCloseButton,
+  dialogContent,
+} from "./DialogContent.astro";
+import DialogDescription, { dialogDescription } from "./DialogDescription.astro";
+import DialogFooter, { dialogFooter } from "./DialogFooter.astro";
+import DialogHeader, { dialogHeader } from "./DialogHeader.astro";
+import DialogTitle, { dialogTitle } from "./DialogTitle.astro";
 import DialogTrigger from "./DialogTrigger.astro";
 
+const DialogVariants = {
+  dialogBackdrop,
+  dialogContent,
+  dialogCloseButton,
+  dialogDescription,
+  dialogFooter,
+  dialogHeader,
+  dialogTitle,
+};
+
 export {
   Dialog,
   DialogClose,
@@ -16,6 +30,7 @@ export {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DialogVariants,
 };
 
 export default {

package/dist/src/components/dropdown/Dropdown.astro

@@ -22,6 +22,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
   class:list={["starwind-dropdown", "relative", className]}
   data-open-on-hover={openOnHover ? "true" : undefined}
   data-close-delay={closeDelay}
+  data-slot="dropdown"
   {...rest}
 >
   <slot />

package/dist/src/components/dropdown/DropdownContent.astro

@@ -25,7 +25,7 @@ type Props = HTMLAttributes<"div"> & {
   animationDuration?: number;
 };
 
-const dropdownContent = tv({
+export const dropdownContent = tv({
   base: [
     "starwind-dropdown-content",
     "bg-popover text-popover-foreground z-50 min-w-[9rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
@@ -66,6 +66,7 @@ const {
   data-side={side}
   data-align={align}
   data-state="closed"
+  data-slot="dropdown-content"
   tabindex="-1"
   aria-orientation="vertical"
   style={{

package/dist/src/components/dropdown/DropdownItem.astro

@@ -13,7 +13,7 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
   disabled?: boolean;
 };
 
-const dropdownItem = tv({
+export const dropdownItem = tv({
   base: [
     "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 transition-colors outline-none select-none",
     "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -41,6 +41,7 @@ const { class: className, inset = false, disabled = false, as: Tag = "div", ...r
   role="menuitem"
   tabindex={disabled ? "-1" : "0"}
   data-disabled={disabled ? "true" : undefined}
+  data-slot="dropdown-item"
   {...rest}
 >
   <slot />

package/dist/src/components/dropdown/DropdownLabel.astro

@@ -9,7 +9,7 @@ type Props = HTMLAttributes<"div"> & {
   inset?: boolean;
 };
 
-const dropdownLabel = tv({
+export const dropdownLabel = tv({
   base: ["px-2 py-1.5 font-semibold"],
   variants: {
     inset: {
@@ -24,6 +24,6 @@ const dropdownLabel = tv({
 const { class: className, inset = false, ...rest } = Astro.props;
 ---
 
-<div class={dropdownLabel({ inset, class: className })} {...rest}>
+<div class={dropdownLabel({ inset, class: className })} data-slot="dropdown-label" {...rest}>
   <slot />
 </div>

package/dist/src/components/dropdown/DropdownSeparator.astro

@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const dropdownSeparator = tv({
+export const dropdownSeparator = tv({
   base: "bg-muted -mx-1 my-1 h-px",
 });
 
@@ -15,6 +15,7 @@ const { class: className, ...rest } = Astro.props;
   class={dropdownSeparator({ class: className })}
   role="separator"
   aria-orientation="horizontal"
+  data-slot="dropdown-separator"
   {...rest}
 >
 </div>

package/dist/src/components/dropdown/DropdownTrigger.astro

@@ -9,7 +9,7 @@ type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
   asChild?: boolean;
 };
 
-const dropdownTrigger = tv({
+export const dropdownTrigger = tv({
   base: [
     "starwind-dropdown-trigger",
     "inline-flex items-center justify-center",
@@ -28,7 +28,11 @@ if (Astro.slots.has("default")) {
 
 {
   asChild && hasChildren ? (
-    <div class={`starwind-dropdown-trigger ${className}`} data-as-child>
+    <div
+      class={`starwind-dropdown-trigger ${className}`}
+      data-slot="dropdown-trigger"
+      data-as-child
+    >
       <slot />
     </div>
   ) : (
@@ -38,6 +42,7 @@ if (Astro.slots.has("default")) {
       aria-haspopup="true"
       aria-expanded="false"
       data-state="closed"
+      data-slot="dropdown-trigger"
       {...rest}
     >
       <slot />

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

@@ -1,9 +1,17 @@
 import Dropdown from "./Dropdown.astro";
-import DropdownContent from "./DropdownContent.astro";
-import DropdownItem from "./DropdownItem.astro";
-import DropdownLabel from "./DropdownLabel.astro";
-import DropdownSeparator from "./DropdownSeparator.astro";
-import DropdownTrigger from "./DropdownTrigger.astro";
+import DropdownContent, { dropdownContent } from "./DropdownContent.astro";
+import DropdownItem, { dropdownItem } from "./DropdownItem.astro";
+import DropdownLabel, { dropdownLabel } from "./DropdownLabel.astro";
+import DropdownSeparator, { dropdownSeparator } from "./DropdownSeparator.astro";
+import DropdownTrigger, { dropdownTrigger } from "./DropdownTrigger.astro";
+
+const DropdownVariants = {
+  dropdownContent,
+  dropdownItem,
+  dropdownLabel,
+  dropdownSeparator,
+  dropdownTrigger,
+};
 
 export {
   Dropdown,
@@ -12,6 +20,7 @@ export {
   DropdownLabel,
   DropdownSeparator,
   DropdownTrigger,
+  DropdownVariants,
 };
 
 export default {

package/dist/src/components/dropzone/Dropzone.astro

@@ -16,7 +16,7 @@ type Props = HTMLAttributes<"input"> & {
 // extract id separately so it can be used in the label. The input will get the same id with "-input" suffix.
 const { class: className, id, isUploading = false, ...rest } = Astro.props as Props;
 
-const root = tv({
+export const dropzone = tv({
   base: [
     "starwind-dropzone",
     "relative flex w-full flex-col items-center justify-center gap-1 rounded-lg px-6 py-12",
@@ -30,7 +30,8 @@ const root = tv({
 <label
   id={id}
   tabindex="0"
-  class={root({ class: className })}
+  class={dropzone({ class: className })}
+  data-slot="dropzone"
   data-drag-active="false"
   data-has-files="false"
   data-is-uploading={String(isUploading)}

package/dist/src/components/dropzone/DropzoneFilesList.astro

@@ -6,7 +6,7 @@ type Props = HTMLAttributes<"div">;
 
 const { class: className, ...rest } = Astro.props;
 
-const filesList = tv({
+export const dropzoneFilesList = tv({
   base: [
     "starwind-files-list",
     "mt-1 -mb-8 min-h-8",
@@ -17,9 +17,10 @@ const filesList = tv({
 ---
 
 <div
-  class={filesList({ class: className })}
+  class={dropzoneFilesList({ class: className })}
   aria-live="polite"
   aria-label="Uploaded files"
+  data-slot="dropzone-files-list"
   {...rest}
 >
 </div>

package/dist/src/components/dropzone/DropzoneLoadingIndicator.astro

@@ -2,7 +2,7 @@
 import LoaderIcon from "@tabler/icons/outline/loader-2.svg";
 ---
 
-<div class="starwind-loading-indicator hidden">
+<div class="starwind-loading-indicator hidden" data-slot="dropzone-loading-indicator">
   <slot>
     <LoaderIcon class="mx-auto size-10 animate-spin" aria-hidden="true" />
     <p class="mt-1 text-sm">Uploading file(s)...</p>

package/dist/src/components/dropzone/DropzoneUploadIndicator.astro

@@ -2,7 +2,7 @@
 import CloudUploadIcon from "@tabler/icons/outline/cloud-upload.svg";
 ---
 
-<div class="starwind-upload-indicator">
+<div class="starwind-upload-indicator" data-slot="dropzone-upload-indicator">
   <slot>
     <CloudUploadIcon class="mx-auto size-10" aria-hidden="true" />
     <p class="mt-1 text-sm">Click to upload or drag and drop</p>

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

@@ -1,9 +1,20 @@
-import Dropzone from "./Dropzone.astro";
-import DropzoneFilesList from "./DropzoneFilesList.astro";
+import Dropzone, { dropzone } from "./Dropzone.astro";
+import DropzoneFilesList, { dropzoneFilesList } from "./DropzoneFilesList.astro";
 import DropzoneLoadingIndicator from "./DropzoneLoadingIndicator.astro";
 import DropzoneUploadIndicator from "./DropzoneUploadIndicator.astro";
 
-export { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator };
+const DropzoneVariants = {
+  dropzone,
+  dropzoneFilesList,
+};
+
+export {
+  Dropzone,
+  DropzoneFilesList,
+  DropzoneLoadingIndicator,
+  DropzoneUploadIndicator,
+  DropzoneVariants,
+};
 
 export default {
   Root: Dropzone,

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

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

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

@@ -1,5 +1,7 @@
-import Input from "./Input.astro";
+import Input, { input } from "./Input.astro";
 
-export { Input };
+const InputVariants = { input };
+
+export { Input, InputVariants };
 
 export default Input;

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

@@ -7,7 +7,7 @@ interface Props extends HTMLAttributes<"a"> {
   size?: "sm" | "md" | "lg" | "icon";
 }
 
-const paginationLink = tv({
+export 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",
@@ -37,6 +37,7 @@ const { class: className, isActive, size = "icon", ...rest } = Astro.props;
 <a
   aria-current={isActive ? "page" : undefined}
   class={paginationLink({ isActive, 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,7 +23,7 @@ const isIndeterminate = value == null;
 const valuePercent = isIndeterminate ? undefined : Math.round((value / max) * 100);
 const valueText = isIndeterminate ? undefined : `${valuePercent}%`;
 
-const progress = tv({
+export const progress = tv({
   base: ["starwind-progress-bar", "bg-accent h-2 w-full overflow-hidden rounded-full"],
   variants: {
     variant: {
@@ -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,7 +50,7 @@ const radioItem = tv({
   ],
 });
 
-const radioControl = tv({
+export const radioControl = tv({
   base: [
     "starwind-radio-control",
     "border-input bg-background",
@@ -81,7 +81,7 @@ const radioControl = tv({
   },
 });
 
-const radioIndicator = tv({
+export const radioIndicator = tv({
   base: ["starwind-radio-indicator", "opacity-0 transition-opacity"],
   variants: {
     size: {
@@ -108,7 +108,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 +117,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 />