@starwind-ui/core 1.11.2 → 1.12.1

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

@@ -1,48 +0,0 @@
----
-import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
-  /**
-   * The content to be rendered inside the select trigger
-   */
-
-  children: any;
-  /**
-   * Whether the select field is required in a form context
-   */
-  required?: boolean;
-};
-
-export const selectTrigger = tv({
-  base: [
-    "starwind-select-trigger",
-    "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",
-  ],
-});
-
-const { class: className, required = false, ...rest } = Astro.props;
----
-
-<button
-  class={selectTrigger({ class: className })}
-  type="button"
-  role="combobox"
-  aria-label="Select field"
-  aria-controls=""
-  aria-expanded="false"
-  aria-haspopup="listbox"
-  aria-autocomplete="none"
-  aria-required={required ? "true" : "false"}
-  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

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

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

@@ -1,45 +0,0 @@
-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 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,
-  selectSeparator,
-  selectTrigger,
-  selectValue,
-};
-
-export {
-  Select,
-  type SelectChangeEvent,
-  SelectContent,
-  type SelectEvent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  SelectVariants,
-};
-
-export default {
-  Root: Select,
-  Trigger: SelectTrigger,
-  Value: SelectValue,
-  Content: SelectContent,
-  Group: SelectGroup,
-  Label: SelectLabel,
-  Item: SelectItem,
-  Separator: SelectSeparator,
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-const { class: className, ...rest } = Astro.props;
-
-export const skeleton = tv({
-  base: "bg-muted animate-pulse rounded-md",
-});
----
-
-<div class={skeleton({ class: className })} data-slot="skeleton" {...rest}></div>

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

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

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

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

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

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

@@ -1,191 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = Omit<HTMLAttributes<"button">, "role" | "type" | "aria-checked"> & {
-  /**
-   * Unique identifier for the switch component.
-   */
-  id: string;
-  /**
-   * Optional text label to display alongside the switch.
-   */
-  label?: string;
-  /**
-   * Controls the checked state of the switch.
-   */
-  checked?: boolean;
-  /**
-   * Custom padding in pixels to apply around the switch.
-   */
-  padding?: number;
-  /**
-   * Size variant of the switch component.
-   */
-  size?: "sm" | "md" | "lg";
-  /**
-   * Visual style variant of the switch.
-   * @default "default"
-   */
-  variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
-};
-
-const {
-  id,
-  label,
-  checked = false,
-  padding,
-  size = "md",
-  variant = "default",
-  class: className,
-  ...rest
-} = Astro.props;
-
-// if no specific padding is set, base it off of size
-let newPadding = padding;
-if (!padding) {
-  newPadding = size === "sm" ? 2.5 : size === "lg" ? 4 : 3;
-}
-
-const sizeMultiplier = size === "sm" ? 4 : size === "lg" ? 6 : 5;
-
-let ariaLabel;
-if (rest["aria-label"]) {
-  ariaLabel = rest["aria-label"];
-  delete rest["aria-label"];
-} else if (label) {
-  ariaLabel = label;
-} else {
-  ariaLabel = "switch";
-}
-
-export const switchButton = tv({
-  base: [
-    "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-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" },
-});
-
-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))]",
-  ],
-  variants: { size: { sm: "size-4", md: "size-5", lg: "size-6" } },
-  defaultVariants: { size: "md" },
-});
-
-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" },
-});
----
-
-<div class="starwind-switch flex items-center">
-  <button
-    type="button"
-    id={id}
-    role="switch"
-    aria-checked={checked ? "true" : "false"}
-    aria-label={ariaLabel}
-    class={switchButton({ variant, class: className })}
-    style={{
-      "--padding": `${newPadding}px`,
-      "--height": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2))`,
-      "--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 })} data-slot="switch-label">
-        {label}
-      </label>
-    )
-  }
-</div>
-
-<script>
-  import type { SwitchChangeEvent } from "./SwitchTypes";
-
-  class SwitchHandler {
-    private switchButton: HTMLButtonElement;
-
-    constructor(switchButton: HTMLButtonElement) {
-      this.switchButton = switchButton;
-      this.setupEventListeners();
-    }
-
-    private setupEventListeners(): void {
-      this.switchButton.addEventListener("click", () => this.handleStateChange());
-      this.switchButton.addEventListener("keydown", (event) => this.handleKeyDown(event));
-    }
-
-    private handleStateChange(): void {
-      if (this.switchButton.disabled) return;
-
-      const isChecked = this.switchButton.getAttribute("aria-checked") === "true";
-      const newState = !isChecked;
-
-      this.switchButton.setAttribute("aria-checked", newState.toString());
-
-      // Dispatch custom event with the new state
-      const event = new CustomEvent<SwitchChangeEvent["detail"]>("starwind-switch:change", {
-        detail: { checked: newState, switchId: this.switchButton.id },
-        bubbles: true,
-        cancelable: true,
-      });
-
-      this.switchButton.dispatchEvent(event);
-    }
-
-    private handleKeyDown(event: KeyboardEvent): void {
-      if (this.switchButton.disabled) return;
-
-      if (event.key === " " || event.key === "Enter") {
-        event.preventDefault();
-        this.handleStateChange();
-      }
-    }
-  }
-
-  // Store instances in a WeakMap to avoid memory leaks
-  const switchInstances = new WeakMap<HTMLButtonElement, SwitchHandler>();
-
-  const setupSwitches = () => {
-    document
-      .querySelectorAll<HTMLButtonElement>('.starwind-switch button[role="switch"]')
-      .forEach((switchButton) => {
-        if (!switchInstances.has(switchButton)) {
-          switchInstances.set(switchButton, new SwitchHandler(switchButton));
-        }
-      });
-  };
-
-  setupSwitches();
-  document.addEventListener("astro:after-swap", setupSwitches);
-</script>

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

@@ -1,6 +0,0 @@
-export interface SwitchChangeEvent extends CustomEvent {
-  detail: {
-    checked: boolean;
-    switchId: string;
-  };
-}