@starwind-ui/core 1.15.1 → 1.15.2

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

@@ -0,0 +1,94 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Side of the tooltip
+   * @default bottom
+   */
+  side?: "top" | "bottom";
+  /**
+   * Alignment of the dropdown
+   * @default start
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
+  /**
+   * Size of the select content
+   * @default md
+   */
+  size?: "sm" | "md" | "lg";
+};
+
+export const selectContent = tv({
+  base: [
+    "starwind-select-content",
+    "bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
+    "data-[state=open]:animate-in fade-in zoom-in-95 overflow-hidden will-change-transform",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+  ],
+  variants: {
+    side: {
+      bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
+      top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
+    },
+    align: {
+      start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
+      center: "left-1/2 -translate-x-1/2",
+      end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
+    },
+    size: {
+      sm: "text-sm [&_[data-slot=select-label]]:text-xs",
+      md: "text-base [&_[data-slot=select-label]]:text-sm",
+      lg: "text-lg [&_[data-slot=select-label]]:text-base",
+    },
+  },
+  defaultVariants: { side: "bottom", align: "start", size: "md" },
+});
+
+export const selectContentInner = tv({
+  base: "max-h-96 w-full min-w-(--select-trigger-width) overflow-y-auto p-1",
+});
+
+const {
+  class: className,
+  side = "bottom",
+  align = "start",
+  size = "md",
+  sideOffset = 4,
+  animationDuration = 150,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={selectContent({ side, align, size, class: className })}
+  role="listbox"
+  data-side={side}
+  data-align={align}
+  data-state="closed"
+  data-slot="select-content"
+  tabindex="-1"
+  style={{
+    // hide the content initially. Script will remove this
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+    marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+    marginBottom: side === "top" ? `${sideOffset}px` : undefined,
+  }}
+  {...rest}
+>
+  <div class={selectContentInner()}>
+    <slot />
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+---
+/**
+ * This current doesn't do anything
+ */
+
+type Props = { children: any };
+---
+
+<slot />

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

@@ -0,0 +1,51 @@
+---
+import Check from "@tabler/icons/outline/check.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The value associated with this select item
+   */
+  value: string;
+  /**
+   * Whether this select item is disabled and cannot be selected
+   */
+  disabled?: boolean;
+};
+
+export const selectItem = tv({
+  base: [
+    "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 outline-none select-none",
+    "data-[active]:bg-accent data-[active]:text-accent-foreground",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "not-aria-selected:[&_svg]:hidden aria-selected:[&_svg]:flex",
+  ],
+});
+
+export const selectItemIcon = tv({
+  base: "absolute right-2 flex size-4 items-center justify-center",
+});
+
+const { class: className, value, disabled, ...rest } = Astro.props;
+---
+
+<div
+  class={selectItem({ class: className })}
+  data-value={value}
+  data-disabled={disabled}
+  data-slot="select-item"
+  aria-selected="false"
+  role="option"
+  tabindex="0"
+  {...rest}
+>
+  <span>
+    <slot />
+  </span>
+  <span class={selectItemIcon()}>
+    <slot name="icon">
+      <Check class="size-4" />
+    </slot>
+  </span>
+</div>

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

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

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

@@ -0,0 +1,49 @@
+---
+import Search from "@tabler/icons/outline/search.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"input">, "type" | "autocomplete"> & {
+  /**
+   * The text to display when no results are found
+   * @default "No results found."
+   */
+  emptyText?: string;
+};
+
+export const selectSearch = tv({
+  base: [
+    "placeholder:text-muted-foreground flex w-full border-0 bg-transparent px-0 py-2.5",
+    "ring-0 outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  ],
+});
+
+const {
+  class: className,
+  placeholder = "Search...",
+  emptyText = "No results found.",
+  ...rest
+} = Astro.props;
+---
+
+<div
+  data-slot="select-search-wrapper"
+  class="-mx-1 -mt-1 mb-1 flex items-center gap-2 border-b px-3"
+>
+  <slot name="icon">
+    <Search class="text-muted-foreground size-4.5 shrink-0" />
+  </slot>
+  <input
+    type="text"
+    class={selectSearch({ class: className })}
+    data-slot="select-search"
+    placeholder={placeholder}
+    autocomplete="off"
+    aria-label={placeholder}
+    {...rest}
+  />
+</div>
+
+<div class="text-muted-foreground hidden py-6 text-center text-sm" data-slot="select-empty">
+  <slot name="empty">{emptyText}</slot>
+</div>

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

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

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

@@ -0,0 +1,54 @@
+---
+import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type"> &
+  VariantProps<typeof selectTrigger> & {
+    /**
+     * The content to be rendered inside the select trigger
+     */
+    children: any;
+  };
+
+export const selectTrigger = tv({
+  base: [
+    "starwind-select-trigger",
+    "border-input dark:bg-input/30 text-foreground ring-offset-background flex items-center justify-between gap-2 rounded-md border bg-transparent 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",
+    "aria-invalid:border-error aria-invalid:focus:ring-error/40 aria-invalid:focus:ring-3",
+  ],
+  variants: {
+    size: {
+      sm: "h-9 px-2 text-sm",
+      md: "h-11 px-3 text-base",
+      lg: "h-12 px-4 text-lg",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const { class: className, size, ...rest } = Astro.props;
+---
+
+<button
+  class={selectTrigger({ size, class: className })}
+  type="button"
+  role="combobox"
+  aria-label="Select field"
+  aria-controls=""
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-autocomplete="none"
+  data-state="closed"
+  data-slot="select-trigger"
+  {...rest}
+>
+  <slot />
+  <slot name="icon">
+    <ChevronDown class="size-4 opacity-50" />
+  </slot>
+</button>

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

@@ -0,0 +1,13 @@
+export interface SelectChangeEvent extends CustomEvent {
+  detail: {
+    value: string;
+    selectId: string;
+    label: string;
+  };
+}
+
+export interface SelectEvent extends CustomEvent {
+  detail:
+    | { value: string; selectId: string; selectName?: string }
+    | { value: string; selectId?: string; selectName: string };
+}

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

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"span"> & {
+  /**
+   * The text to display when no value is selected
+   */
+  placeholder?: string;
+};
+
+export const selectValue = tv({ base: "pointer-events-none" });
+
+const { placeholder = "select", class: className, ...rest } = Astro.props;
+---
+
+<span class={selectValue({ class: className })} data-slot="select-value" {...rest}>
+  {placeholder}
+</span>

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

@@ -0,0 +1,49 @@
+import Select from "./Select.astro";
+import SelectContent, { selectContent, selectContentInner } from "./SelectContent.astro";
+import SelectGroup from "./SelectGroup.astro";
+import SelectItem, { selectItem, selectItemIcon } from "./SelectItem.astro";
+import SelectLabel, { selectLabel } from "./SelectLabel.astro";
+import SelectSearch, { selectSearch } from "./SelectSearch.astro";
+import SelectSeparator, { selectSeparator } from "./SelectSeparator.astro";
+import SelectTrigger, { selectTrigger } from "./SelectTrigger.astro";
+import type { SelectChangeEvent, SelectEvent } from "./SelectTypes";
+import SelectValue, { selectValue } from "./SelectValue.astro";
+
+const SelectVariants = {
+  selectContent,
+  selectContentInner,
+  selectItem,
+  selectItemIcon,
+  selectLabel,
+  selectSearch,
+  selectSeparator,
+  selectTrigger,
+  selectValue,
+};
+
+export {
+  Select,
+  type SelectChangeEvent,
+  SelectContent,
+  type SelectEvent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSearch,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SelectVariants,
+};
+
+export default {
+  Root: Select,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Search: SelectSearch,
+  Item: SelectItem,
+  Separator: SelectSeparator,
+};

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,92 @@
+---
+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 -->
+<slot name="backdrop">
+  <div class={dialogBackdrop()} data-state="closed" data-slot="dialog-backdrop"></div>
+</slot>
+
+<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"
+  >
+    <slot name="icon">
+      <X class="size-5 transition-opacity" />
+    </slot>
+    <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-heading 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,
+};