@dogsbay/ui 0.2.0-beta.0

package/src/slider/slider.ts

@@ -0,0 +1,111 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const track = root.querySelector<HTMLElement>("[data-part='track']");
+  const range = root.querySelector<HTMLElement>("[data-part='range']");
+  const thumb = root.querySelector<HTMLElement>("[data-part='thumb']");
+  const hiddenInput = root.querySelector<HTMLInputElement>("[data-part='hidden-input']");
+  if (!track || !range || !thumb) return;
+
+  const min = Number(root.getAttribute("data-min") || "0");
+  const max = Number(root.getAttribute("data-max") || "100");
+  const step = Number(root.getAttribute("data-step") || "1");
+
+  let value = Number(thumb.getAttribute("aria-valuenow") || "50");
+
+  function setValue(n: number) {
+    // Snap to step
+    const snapped = Math.round((n - min) / step) * step + min;
+    value = Math.min(max, Math.max(min, snapped));
+    const pct = ((value - min) / (max - min)) * 100;
+
+    thumb.setAttribute("aria-valuenow", String(value));
+    thumb.style.left = `calc(${pct}% - 10px)`;
+    range.style.width = `${pct}%`;
+
+    if (hiddenInput) hiddenInput.value = String(value);
+
+    root.dispatchEvent(new CustomEvent("change", { detail: { value }, bubbles: true }));
+  }
+
+  // Pointer drag
+  let isDragging = false;
+
+  function valueFromPointer(e: PointerEvent) {
+    const rect = track.getBoundingClientRect();
+    const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+    return min + pct * (max - min);
+  }
+
+  thumb.addEventListener("pointerdown", (e) => {
+    if (root.hasAttribute("data-disabled")) return;
+    isDragging = true;
+    thumb.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  });
+
+  thumb.addEventListener("pointermove", (e) => {
+    if (!isDragging) return;
+    setValue(valueFromPointer(e));
+  });
+
+  thumb.addEventListener("pointerup", () => {
+    isDragging = false;
+  });
+
+  // Click on track
+  track.addEventListener("pointerdown", (e) => {
+    if (root.hasAttribute("data-disabled")) return;
+    if (e.target === thumb) return;
+    setValue(valueFromPointer(e));
+    // Start dragging from new position
+    isDragging = true;
+    thumb.setPointerCapture(e.pointerId);
+  });
+
+  // Keyboard
+  thumb.addEventListener("keydown", (e) => {
+    if (root.hasAttribute("data-disabled")) return;
+
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        e.preventDefault();
+        setValue(value + step);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        e.preventDefault();
+        setValue(value - step);
+        break;
+      case "Home":
+        e.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        e.preventDefault();
+        setValue(max);
+        break;
+      case "PageUp":
+        e.preventDefault();
+        setValue(value + step * 10);
+        break;
+      case "PageDown":
+        e.preventDefault();
+        setValue(value - step * 10);
+        break;
+    }
+  });
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='slider']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/spinner/Spinner.astro

@@ -0,0 +1,54 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const spinner = tv({
+  base: "animate-spin text-foreground",
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      default: "h-6 w-6",
+      lg: "h-10 w-10",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+type SpinnerVariants = VariantProps<typeof spinner>;
+
+interface Props {
+  size?: SpinnerVariants["size"];
+  class?: string;
+  [key: string]: unknown;
+}
+const { size = "default", class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={spinner({ size, class: className })}
+  role="status"
+  aria-label="Loading"
+  {...rest}
+>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    class="h-full w-full"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="3"
+      opacity="0.25"></circle>
+    <path
+      d="M12 2a10 10 0 0 1 10 10"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"></path>
+  </svg>
+</div>

package/src/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./Spinner.astro";

package/src/steps/Step.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * Single step item. Used inside <Steps> or <SubSteps>.
+ * Renders as <li> with step styling applied by the parent's CSS.
+ */
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li class={className} {...rest}>
+  <slot />
+</li>

package/src/steps/Steps.astro

@@ -0,0 +1,122 @@
+---
+import { tv } from "tailwind-variants";
+
+const steps = tv({
+  base: "steps-list",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ol
+  class={steps({ class: className })}
+  role="list"
+  {...rest}
+>
+  <slot />
+</ol>
+
+<style>
+  .steps-list {
+    position: relative;
+    padding-left: 1.75rem;
+    counter-reset: step;
+    list-style: none;
+    margin: 0;
+  }
+
+  .steps-list > :global(li) {
+    position: relative;
+    padding-bottom: 1.5rem;
+    counter-increment: step;
+  }
+
+  .steps-list > :global(li:last-child) {
+    padding-bottom: 0;
+  }
+
+  /* Numbered circle */
+  .steps-list > :global(li::before) {
+    content: counter(step);
+    position: absolute;
+    left: -1.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 9999px;
+    border: 2px solid var(--color-border);
+    background: var(--color-background);
+    color: var(--color-foreground);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  /* Connector line */
+  .steps-list > :global(li:not(:last-child)::after) {
+    content: "";
+    position: absolute;
+    left: calc(-1.75rem + 0.6875rem);
+    top: 1.75rem;
+    bottom: 0;
+    width: 1px;
+    background: var(--color-border);
+  }
+
+  /* Sub-steps: nested ol inside li */
+  .steps-list > :global(li) :global(ol) {
+    position: relative;
+    padding-left: 1.5rem;
+    counter-reset: substep;
+    list-style: none;
+    margin: 0.75rem 0 0 0;
+  }
+
+  .steps-list > :global(li) :global(ol > li) {
+    position: relative;
+    padding-bottom: 1rem;
+    counter-increment: substep;
+  }
+
+  .steps-list > :global(li) :global(ol > li:last-child) {
+    padding-bottom: 0;
+  }
+
+  /* Lettered circle (a, b, c) */
+  .steps-list > :global(li) :global(ol > li::before) {
+    content: counter(substep, lower-alpha);
+    position: absolute;
+    left: -1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    border: 1.5px solid var(--color-border);
+    background: var(--color-background);
+    color: var(--color-muted-foreground, #737373);
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  /* Sub-step connector line */
+  .steps-list > :global(li) :global(ol > li:not(:last-child)::after) {
+    content: "";
+    position: absolute;
+    left: calc(-1.5rem + 0.5625rem);
+    top: 1.5rem;
+    bottom: 0;
+    width: 1px;
+    background: var(--color-border);
+    opacity: 0.6;
+  }
+</style>

package/src/steps/SubSteps.astro

@@ -0,0 +1,73 @@
+---
+import { tv } from "tailwind-variants";
+
+const subSteps = tv({
+  base: "sub-steps-list",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ol
+  class={subSteps({ class: className })}
+  role="list"
+  {...rest}
+>
+  <slot />
+</ol>
+
+<style>
+  .sub-steps-list {
+    position: relative;
+    padding-left: 1.5rem;
+    counter-reset: substep;
+    list-style: none;
+    margin: 0.75rem 0 0 0;
+  }
+
+  .sub-steps-list > :global(li) {
+    position: relative;
+    padding-bottom: 1rem;
+    counter-increment: substep;
+  }
+
+  .sub-steps-list > :global(li:last-child) {
+    padding-bottom: 0;
+  }
+
+  /* Lettered circle (a, b, c) */
+  .sub-steps-list > :global(li::before) {
+    content: counter(substep, lower-alpha);
+    position: absolute;
+    left: -1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    border: 1.5px solid var(--color-border);
+    background: var(--color-background);
+    color: var(--color-muted-foreground, #737373);
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  /* Connector line (thinner) */
+  .sub-steps-list > :global(li:not(:last-child)::after) {
+    content: "";
+    position: absolute;
+    left: calc(-1.5rem + 0.5625rem);
+    top: 1.5rem;
+    bottom: 0;
+    width: 1px;
+    background: var(--color-border);
+    opacity: 0.6;
+  }
+</style>

package/src/switch/Switch.astro

@@ -0,0 +1,52 @@
+---
+import { tv } from "tailwind-variants";
+
+const switchRoot = tv({
+  base: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+});
+
+const switchThumb = tv({
+  base: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+});
+
+interface Props {
+  name?: string;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  value?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  name,
+  defaultChecked = false,
+  disabled = false,
+  required = false,
+  value = "on",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<button
+  class={switchRoot({ class: className })}
+  data-component="switch"
+  data-name={name}
+  data-value={value}
+  data-default-checked={defaultChecked || undefined}
+  type="button"
+  role="switch"
+  aria-checked={String(defaultChecked)}
+  disabled={disabled || undefined}
+  aria-disabled={disabled ? "true" : undefined}
+  aria-required={required ? "true" : undefined}
+  data-state={defaultChecked ? "checked" : "unchecked"}
+  {...rest}
+>
+  <span
+    class={switchThumb()}
+    data-part="thumb"
+    data-state={defaultChecked ? "checked" : "unchecked"}></span>
+</button>

package/src/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.astro";

package/src/switch/switch.ts

@@ -0,0 +1,109 @@
+interface SwitchInstance {
+  root: HTMLElement;
+  thumb: HTMLElement;
+  hiddenInput: HTMLInputElement | null;
+  checked: boolean;
+}
+
+const instances = new WeakMap<HTMLElement, SwitchInstance>();
+
+function initSwitch(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const thumb = root.querySelector("[data-part='thumb']") as HTMLElement | null;
+  if (!thumb) return;
+
+  const name = root.dataset.name;
+  const value = root.dataset.value || "on";
+  const defaultChecked = root.hasAttribute("data-default-checked");
+  const required = root.getAttribute("aria-required") === "true";
+
+  // Create hidden input for form submission
+  let hiddenInput: HTMLInputElement | null = null;
+  if (name) {
+    hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = name;
+    hiddenInput.value = defaultChecked ? value : "";
+    if (required) hiddenInput.required = true;
+    // Insert after the switch button
+    root.parentElement?.insertBefore(hiddenInput, root.nextSibling);
+  }
+
+  const instance: SwitchInstance = {
+    root,
+    thumb,
+    hiddenInput,
+    checked: defaultChecked,
+  };
+
+  instances.set(root, instance);
+
+  // Click handler
+  root.addEventListener("click", () => {
+    if (
+      root.hasAttribute("disabled") ||
+      root.getAttribute("aria-disabled") === "true"
+    ) {
+      return;
+    }
+    setChecked(root, !instance.checked);
+  });
+
+  // Keyboard — Space and Enter toggle (button role handles Enter natively,
+  // but switch role needs explicit Space handling)
+  root.addEventListener("keydown", (e) => {
+    if (
+      root.hasAttribute("disabled") ||
+      root.getAttribute("aria-disabled") === "true"
+    ) {
+      return;
+    }
+    if (e.key === " ") {
+      e.preventDefault();
+      setChecked(root, !instance.checked);
+    }
+  });
+}
+
+function setChecked(root: HTMLElement, checked: boolean) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  instance.checked = checked;
+  const state = checked ? "checked" : "unchecked";
+
+  root.setAttribute("aria-checked", String(checked));
+  root.setAttribute("data-state", state);
+  instance.thumb.setAttribute("data-state", state);
+
+  // Update hidden input
+  if (instance.hiddenInput) {
+    const value = root.dataset.value || "on";
+    instance.hiddenInput.value = checked ? value : "";
+  }
+
+  // Dispatch change event
+  root.dispatchEvent(
+    new CustomEvent("base-switch:change", {
+      detail: { checked },
+      bubbles: true,
+    }),
+  );
+}
+
+// Auto-initialize
+function init() {
+  document.querySelectorAll("[data-component='switch']").forEach((el) => {
+    initSwitch(el as HTMLElement);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initSwitch, setChecked };

package/src/table/Table.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableContainer = tv({
+  base: "relative w-full overflow-x-auto",
+});
+
+const table = tv({
+  base: "w-full caption-bottom text-sm",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={tableContainer()}>
+  <table class={table({ class: className })} {...rest}>
+    <slot />
+  </table>
+</div>

package/src/table/TableBody.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableBody = tv({
+  base: "[&_tr:last-child]:border-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tbody class={tableBody({ class: className })} {...rest}>
+  <slot />
+</tbody>

package/src/table/TableCaption.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableCaption = tv({
+  base: "mt-4 text-sm text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<caption class={tableCaption({ class: className })} {...rest}>
+  <slot />
+</caption>

package/src/table/TableCell.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableCell = tv({
+  base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<td class={tableCell({ class: className })} {...rest}>
+  <slot />
+</td>

package/src/table/TableFooter.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableFooter = tv({
+  base: "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tfoot class={tableFooter({ class: className })} {...rest}>
+  <slot />
+</tfoot>

package/src/table/TableHead.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableHead = tv({
+  base: "h-10 px-2 text-left align-middle font-semibold text-muted-foreground whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<th class={tableHead({ class: className })} {...rest}>
+  <slot />
+</th>

package/src/table/TableHeader.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableHeader = tv({
+  base: "[&_tr]:border-b",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<thead class={tableHeader({ class: className })} {...rest}>
+  <slot />
+</thead>