@starwind-ui/core 1.12.0 → 1.12.1

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;
-  };
-}

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

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

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

@@ -1,18 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"table"> & VariantProps<typeof table>;
-
-export const table = tv({
-  base: "w-full caption-bottom text-sm",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<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

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

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

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

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

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"td"> & VariantProps<typeof tableCell>;
-
-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-slot="table-cell" class={tableCell({ class: className })} {...rest}>
-  <slot />
-</td>

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

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"tfoot"> & VariantProps<typeof tableFoot>;
-
-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-slot="table-foot" class={tableFoot({ class: className })} {...rest}>
-  <slot />
-</tfoot>

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

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
-
-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-slot="table-head" class={tableHead({ class: className })} {...rest} role="columnheader">
-  <slot />
-</th>

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

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

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

@@ -1,16 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>;
-
-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-slot="table-row" class={tableRow({ class: className })} {...rest} role="row">
-  <slot />
-</tr>

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

@@ -1,42 +0,0 @@
-import Table, { table } from "./Table.astro";
-import TableBody, { tableBody } from "./TableBody.astro";
-import TableCaption, { tableCaption } from "./TableCaption.astro";
-import TableCell, { tableCell } from "./TableCell.astro";
-import TableFoot, { tableFoot } from "./TableFoot.astro";
-import TableHead, { tableHead } from "./TableHead.astro";
-import TableHeader, { tableHeader } from "./TableHeader.astro";
-import TableRow, { tableRow } from "./TableRow.astro";
-
-const TableVariants = {
-  table,
-  tableBody,
-  tableCaption,
-  tableCell,
-  tableFoot,
-  tableHead,
-  tableHeader,
-  tableRow,
-};
-
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFoot,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableVariants,
-};
-
-export default {
-  Root: Table,
-  Body: TableBody,
-  Caption: TableCaption,
-  Cell: TableCell,
-  Foot: TableFoot,
-  Head: TableHead,
-  Header: TableHeader,
-  Row: TableRow,
-};