@starwind-ui/core 1.7.3 → 1.9.0

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

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: "py-1.5 pr-2 pl-8 font-semibold" });
 
 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,7 +15,7 @@ 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",
@@ -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/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,90 @@
+---
+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",
+    "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary",
+    "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100",
+    "focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
+    "disabled:pointer-events-none",
+  ],
+});
+---
+
+<!-- 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" />
+    <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({
+export const skeleton = tv({
   base: "bg-accent 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/switch/Switch.astro

@@ -59,7 +59,7 @@ 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",
@@ -79,7 +79,7 @@ const switchButton = tv({
   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 +88,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 +109,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>

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

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
 
-const tableHead = tv({
+export const tableHead = tv({
   base: "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<th data-table-head class={tableHead({ class: className })} {...rest} role="columnheader">
+<th data-slot="table-head" class={tableHead({ class: className })} {...rest} role="columnheader">
   <slot />
 </th>

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

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

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

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>;
 
-const tableRow = tv({
+export const tableRow = tv({
   base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<tr data-table-row class={tableRow({ class: className })} {...rest} role="row">
+<tr data-slot="table-row" class={tableRow({ class: className })} {...rest} role="row">
   <slot />
 </tr>