@starwind-ui/core 1.8.0 → 1.10.0

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

@@ -2,7 +2,7 @@
 /**
  * This current doesn't do anything
  */
-// eslint-disable-next-line
+
 type Props = { children: any };
 ---
 

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

@@ -14,7 +14,7 @@ type Props = HTMLAttributes<"div"> & {
   disabled?: boolean;
 };
 
-const selectItem = tv({
+export const selectItem = tv({
   base: [
     "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 outline-none select-none",
     "focus:bg-accent focus:text-accent-foreground",
@@ -23,7 +23,7 @@ const selectItem = tv({
   ],
 });
 
-const selectItemIcon = tv({ base: "absolute left-2 size-3.5 items-center justify-center" });
+export const selectItemIcon = tv({ base: "absolute left-2 size-3.5 items-center justify-center" });
 
 const { class: className, value, disabled, ...rest } = Astro.props;
 ---
@@ -32,6 +32,7 @@ const { class: className, value, disabled, ...rest } = Astro.props;
   class={selectItem({ class: className })}
   data-value={value}
   data-disabled={disabled}
+  data-slot="select-item"
   aria-selected="false"
   role="option"
   tabindex="0"

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

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const selectLabel = tv({ base: "py-1.5 pr-2 pl-8 font-semibold" });
+export const selectLabel = tv({ base: "text-muted-foreground py-1.5 pr-2 pl-8 text-sm" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={selectLabel({ class: className })} {...rest}>
+<div class={selectLabel({ class: className })} data-slot="select-label" {...rest}>
   <slot />
 </div>

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

@@ -4,9 +4,9 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const selectSeparator = tv({ base: "bg-muted -mx-1 my-1 h-px" });
+export const selectSeparator = tv({ base: "bg-muted -mx-1 my-1 h-px" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={selectSeparator({ class: className })} {...rest}></div>
+<div class={selectSeparator({ class: className })} data-slot="select-separator" {...rest}></div>

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

@@ -15,11 +15,11 @@ type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
   required?: boolean;
 };
 
-const selectTrigger = tv({
+export const selectTrigger = tv({
   base: [
     "starwind-select-trigger",
-    "border-input bg-background text-foreground ring-offset-background flex h-11 items-center justify-between rounded-md border px-3 py-2",
-    "focus:outline-outline focus:outline-2 focus:outline-offset-2",
+    "border-input dark:bg-input/30 text-foreground ring-offset-background flex h-11 items-center justify-between rounded-md border bg-transparent px-3 py-2 shadow-xs",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
     "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
   ],
 });
@@ -38,6 +38,7 @@ const { class: className, required = false, ...rest } = Astro.props;
   aria-autocomplete="none"
   aria-required={required ? "true" : "false"}
   data-state="closed"
+  data-slot="select-trigger"
   {...rest}
 >
   <slot />

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

@@ -9,11 +9,11 @@ type Props = HTMLAttributes<"span"> & {
   placeholder?: string;
 };
 
-const selectValue = tv({ base: "pointer-events-none" });
+export const selectValue = tv({ base: "pointer-events-none" });
 
 const { placeholder = "select", class: className, ...rest } = Astro.props;
 ---
 
-<span class={selectValue({ class: className })} {...rest}>
+<span class={selectValue({ class: className })} data-slot="select-value" {...rest}>
   {placeholder}
 </span>

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

@@ -1,12 +1,23 @@
 import Select from "./Select.astro";
-import SelectContent from "./SelectContent.astro";
+import SelectContent, { selectContent, selectContentInner } from "./SelectContent.astro";
 import SelectGroup from "./SelectGroup.astro";
-import SelectItem from "./SelectItem.astro";
-import SelectLabel from "./SelectLabel.astro";
-import SelectSeparator from "./SelectSeparator.astro";
-import SelectTrigger from "./SelectTrigger.astro";
+import SelectItem, { selectItem, selectItemIcon } from "./SelectItem.astro";
+import SelectLabel, { selectLabel } from "./SelectLabel.astro";
+import SelectSeparator, { selectSeparator } from "./SelectSeparator.astro";
+import SelectTrigger, { selectTrigger } from "./SelectTrigger.astro";
 import type { SelectChangeEvent, SelectEvent } from "./SelectTypes";
-import SelectValue from "./SelectValue.astro";
+import SelectValue, { selectValue } from "./SelectValue.astro";
+
+const SelectVariants = {
+  selectContent,
+  selectContentInner,
+  selectItem,
+  selectItemIcon,
+  selectLabel,
+  selectSeparator,
+  selectTrigger,
+  selectValue,
+};
 
 export {
   Select,
@@ -19,6 +30,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  SelectVariants,
 };
 
 export default {

package/dist/src/components/separator/Separator.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"div">, "role" | "aria-orientation"> & {
+  /**
+   * The orientation of the separator.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const separator = tv({
+  base: "bg-border shrink-0",
+  variants: {
+    orientation: {
+      horizontal: "h-[1px] w-full",
+      vertical: "h-full w-[1px]",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+const { class: className, orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<div
+  role="separator"
+  aria-orientation={orientation}
+  class={separator({ orientation, class: className })}
+  data-slot="separator"
+  {...rest}
+>
+</div>

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

@@ -0,0 +1,7 @@
+import Separator, { separator } from "./Separator.astro";
+
+const SeparatorVariants = { separator };
+
+export { Separator, SeparatorVariants };
+
+export default Separator;

package/dist/src/components/sheet/Sheet.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types";
+
+import { Dialog } from "@/components/starwind/dialog";
+
+type Props = ComponentProps<typeof Dialog>;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Dialog class:list={["starwind-sheet", className]} data-slot="sheet" {...rest}>
+  <slot />
+</Dialog>

package/dist/src/components/sheet/SheetClose.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types";
+
+import { DialogClose } from "@/components/starwind/dialog";
+
+type Props = ComponentProps<typeof DialogClose>;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<DialogClose class:list={["starwind-sheet-close", className]} {...rest}>
+  <slot />
+</DialogClose>

package/dist/src/components/sheet/SheetContent.astro

@@ -0,0 +1,88 @@
+---
+import X from "@tabler/icons/outline/x.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"dialog"> & {
+  /**
+   * Side of the page the sheet opens from
+   */
+  side?: "top" | "right" | "bottom" | "left";
+};
+
+const { side = "right", class: className, ...rest } = Astro.props;
+
+export const dialogBackdrop = tv({
+  base: [
+    "starwind-dialog-backdrop fixed inset-0 top-0 left-0 z-50 hidden h-screen w-screen bg-black/80",
+    "data-[state=open]:animate-in fade-in",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",
+    "data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  ],
+});
+
+export const sheetContent = tv({
+  base: [
+    "starwind-dialog-content",
+    "bg-background fixed z-50 flex-col gap-4 shadow-lg transition ease-in-out open:flex",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
+    "data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  ],
+  variants: {
+    side: {
+      right: [
+        "slide-out-to-right slide-in-from-right",
+        "inset-y-0 right-0 left-auto h-full max-h-[100dvh] w-3/4 border-l sm:max-w-sm",
+      ],
+      left: [
+        "slide-out-to-left slide-in-from-left",
+        "inset-y-0 right-auto left-0 h-full max-h-[100dvh] w-3/4 border-r sm:max-w-sm",
+      ],
+      top: [
+        "slide-out-to-top slide-in-from-top",
+        "inset-x-0 top-0 bottom-auto h-auto w-full max-w-screen border-b",
+      ],
+      bottom: [
+        "slide-out-to-bottom slide-in-from-bottom",
+        "inset-x-0 top-auto bottom-0 h-auto w-full max-w-screen border-t",
+      ],
+    },
+  },
+  defaultVariants: {
+    side: "right",
+  },
+});
+
+export const sheetCloseButton = tv({
+  base: [
+    "starwind-dialog-close",
+    "absolute top-4 right-4 rounded-xs [&>svg]:opacity-70 hover:[&>svg]:opacity-100",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+  ],
+});
+---
+
+<!-- dialog overlay -->
+<div class={dialogBackdrop()} data-state="closed" data-slot="dialog-backdrop"></div>
+
+<dialog
+  class={sheetContent({
+    side,
+    class: className,
+  })}
+  data-state="closed"
+  data-slot="sheet-content"
+  data-close-duration="300"
+  {...rest}
+>
+  <slot />
+  <button
+    type="button"
+    class={sheetCloseButton()}
+    data-slot="sheet-close"
+    aria-label="Close dialog"
+  >
+    <X class="size-5 transition-opacity" />
+    <span class="sr-only">Close</span>
+  </button>
+</dialog>

package/dist/src/components/sheet/SheetDescription.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"p">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const sheetDescription = tv({
+  base: ["text-muted-foreground text-sm"],
+});
+---
+
+<p class={sheetDescription({ class: className })} data-slot="sheet-description" {...rest}>
+  <slot />
+</p>

package/dist/src/components/sheet/SheetFooter.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const sheetFooter = tv({
+  base: ["mt-auto flex flex-col gap-2 p-4"],
+});
+---
+
+<div class={sheetFooter({ class: className })} data-slot="sheet-footer" {...rest}>
+  <slot />
+</div>

package/dist/src/components/sheet/SheetHeader.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const sheetHeader = tv({
+  base: ["flex flex-col gap-1.5 p-4"],
+});
+---
+
+<div class={sheetHeader({ class: className })} data-slot="sheet-header" {...rest}>
+  <slot />
+</div>

package/dist/src/components/sheet/SheetTitle.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"h2">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const sheetTitle = tv({
+  base: ["starwind-sheet-title", "text-foreground font-semibold"],
+});
+---
+
+<h2 class={sheetTitle({ class: className })} data-slot="sheet-title" {...rest}>
+  <slot />
+</h2>

package/dist/src/components/sheet/SheetTrigger.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types";
+
+import { DialogTrigger } from "@/components/starwind/dialog";
+
+type Props = ComponentProps<typeof DialogTrigger>;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<DialogTrigger class:list={["starwind-sheet-trigger", className]} {...rest}>
+  <slot />
+</DialogTrigger>

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

@@ -0,0 +1,41 @@
+import Sheet from "./Sheet.astro";
+import SheetClose from "./SheetClose.astro";
+import SheetContent, { dialogBackdrop, sheetCloseButton, sheetContent } from "./SheetContent.astro";
+import SheetDescription, { sheetDescription } from "./SheetDescription.astro";
+import SheetFooter, { sheetFooter } from "./SheetFooter.astro";
+import SheetHeader, { sheetHeader } from "./SheetHeader.astro";
+import SheetTitle, { sheetTitle } from "./SheetTitle.astro";
+import SheetTrigger from "./SheetTrigger.astro";
+
+const SheetVariants = {
+  sheetCloseButton,
+  sheetDescription,
+  sheetFooter,
+  sheetHeader,
+  sheetTitle,
+  dialogBackdrop,
+  sheetContent,
+};
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetVariants,
+};
+
+export default {
+  Root: Sheet,
+  Trigger: SheetTrigger,
+  Content: SheetContent,
+  Header: SheetHeader,
+  Footer: SheetFooter,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Close: SheetClose,
+};

package/dist/src/components/skeleton/Skeleton.astro

@@ -6,9 +6,9 @@ type Props = HTMLAttributes<"div">;
 
 const { class: className, ...rest } = Astro.props;
 
-const skeleton = tv({
-  base: "bg-accent animate-pulse rounded-md",
+export const skeleton = tv({
+  base: "bg-muted animate-pulse rounded-md",
 });
 ---
 
-<div class={skeleton({ class: className })} {...rest}></div>
+<div class={skeleton({ class: className })} data-slot="skeleton" {...rest}></div>

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

@@ -1,5 +1,9 @@
-import Skeleton from "./Skeleton.astro";
+import Skeleton, { skeleton } from "./Skeleton.astro";
 
-export { Skeleton };
+const SkeletonVariants = {
+  skeleton,
+};
+
+export { Skeleton, SkeletonVariants };
 
 export default Skeleton;

package/dist/src/components/spinner/Spinner.astro

@@ -0,0 +1,21 @@
+---
+import Loader2 from "@tabler/icons/outline/loader-2.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"svg">, "role" | "aria-label">;
+
+export const spinner = tv({
+  base: "size-4 animate-spin",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Loader2
+  role="status"
+  aria-label="Loading"
+  class={spinner({ class: className })}
+  data-slot="spinner"
+  {...rest}
+/>

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

@@ -0,0 +1,7 @@
+import Spinner, { spinner } from "./Spinner.astro";
+
+const SpinnerVariants = { spinner };
+
+export { Spinner, SpinnerVariants };
+
+export default Spinner;

package/dist/src/components/switch/Switch.astro

@@ -59,27 +59,28 @@ if (rest["aria-label"]) {
   ariaLabel = "switch";
 }
 
-const switchButton = tv({
+export const switchButton = tv({
   base: [
-    "starwind-transition-colors border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
-    "group peer ring-offset-background focus-visible:outline-2 focus-visible:outline-offset-2",
+    "border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
+    "group peer ring-offset-background transition outline-none focus-visible:ring-3",
     "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
   ],
   variants: {
     variant: {
-      primary: "aria-checked:border-primary focus:outline-primary",
-      secondary: "aria-checked:border-secondary focus:outline-secondary",
-      default: "aria-checked:border-foreground focus:outline-outline",
-      info: "aria-checked:border-info focus:outline-info",
-      success: "aria-checked:border-success focus:outline-success",
-      warning: "aria-checked:border-warning focus:outline-warning",
-      error: "aria-checked:border-error focus:outline-error",
+      primary: "aria-checked:border-primary focus-visible:border-primary/70 focus:ring-primary/50",
+      secondary:
+        "aria-checked:border-secondary focus-visible:border-secondary/70 focus:ring-secondary/50",
+      default: "aria-checked:border-foreground focus-visible:border-outline focus:ring-outline/50",
+      info: "aria-checked:border-info focus-visible:border-info/70 focus:ring-info/50",
+      success: "aria-checked:border-success focus-visible:border-success/70 focus:ring-success/50",
+      warning: "aria-checked:border-warning focus-visible:border-warning/70 focus:ring-warning/50",
+      error: "aria-checked:border-error focus-visible:border-error/70 focus:ring-error/50",
     },
   },
   defaultVariants: { variant: "default" },
 });
 
-const switchToggle = tv({
+export const switchToggle = tv({
   base: [
     "bg-foreground inline-block transform rounded-full transition-transform",
     "group-aria-checked:translate-x-(--translation) group-aria-[checked=false]:translate-x-[calc(var(--padding)-var(--border-offset))]",
@@ -88,7 +89,7 @@ const switchToggle = tv({
   defaultVariants: { size: "md" },
 });
 
-const switchLabel = tv({
+export const switchLabel = tv({
   base: "text-foreground ml-2 font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
   variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
   defaultVariants: { size: "md" },
@@ -109,17 +110,19 @@ const switchLabel = tv({
       "--width": `calc((var(--spacing) * ${sizeMultiplier} * 2) + (var(--padding) * 3))`,
       "--border-offset": "1px",
     }}
+    data-slot="switch-button"
     {...rest}
   >
     <span
       class={switchToggle({ size })}
+      data-slot="switch-toggle"
       style={{
         "--translation": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2) - var(--border-offset))`,
       }}></span>
   </button>
   {
     label && (
-      <label for={id} class={switchLabel({ size })}>
+      <label for={id} class={switchLabel({ size })} data-slot="switch-label">
         {label}
       </label>
     )

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

@@ -1,6 +1,12 @@
-import Switch from "./Switch.astro";
+import Switch, { switchButton, switchLabel, switchToggle } from "./Switch.astro";
 import type { SwitchChangeEvent } from "./SwitchTypes";
 
-export { Switch, type SwitchChangeEvent };
+const SwitchVariants = {
+  switchButton,
+  switchToggle,
+  switchLabel,
+};
+
+export { Switch, type SwitchChangeEvent, SwitchVariants };
 
 export default Switch;

package/dist/src/components/table/Table.astro

@@ -4,15 +4,15 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"table"> & VariantProps<typeof table>;
 
-const table = tv({
+export const table = tv({
   base: "w-full caption-bottom text-sm",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div data-table-container class="relative w-full overflow-x-auto">
-  <table data-table class={table({ class: className })} {...rest} role="table">
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <table data-slot="table" class={table({ class: className })} {...rest} role="table">
     <slot />
   </table>
 </div>

package/dist/src/components/table/TableBody.astro

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"tbody"> & VariantProps<typeof tableBody>;
 
-const tableBody = tv({
+export const tableBody = tv({
   base: "[&_tr:last-child]:border-0",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<tbody data-table-body class={tableBody({ class: className })} {...rest}>
+<tbody data-slot="table-body" class={tableBody({ class: className })} {...rest}>
   <slot />
 </tbody>

package/dist/src/components/table/TableCaption.astro

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"caption"> & VariantProps<typeof tableCaption>;
 
-const tableCaption = tv({
+export const tableCaption = tv({
   base: "text-muted-foreground mt-4 text-sm",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<caption data-table-caption class={tableCaption({ class: className })} {...rest}>
+<caption data-slot="table-caption" class={tableCaption({ class: className })} {...rest}>
   <slot />
 </caption>

package/dist/src/components/table/TableCell.astro

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"td"> & VariantProps<typeof tableCell>;
 
-const tableCell = tv({
+export const tableCell = tv({
   base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<td data-table-cell class={tableCell({ class: className })} {...rest}>
+<td data-slot="table-cell" class={tableCell({ class: className })} {...rest}>
   <slot />
 </td>

package/dist/src/components/table/TableFoot.astro

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"tfoot"> & VariantProps<typeof tableFoot>;
 
-const tableFoot = tv({
+export const tableFoot = tv({
   base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<tfoot data-table-foot class={tableFoot({ class: className })} {...rest}>
+<tfoot data-slot="table-foot" class={tableFoot({ class: className })} {...rest}>
   <slot />
 </tfoot>