@dogsbay/ui 0.2.0-beta.0

package/src/field/FieldDescription.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const fieldDescription = tv({
+  base: "text-sm text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<p
+  class={fieldDescription({ class: className })}
+  data-part="description"
+  {...rest}
+>
+  <slot />
+</p>

package/src/field/FieldLabel.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const fieldLabel = tv({
+  base: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+});
+
+interface Props {
+  for?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { for: htmlFor, class: className, ...rest } = Astro.props;
+---
+
+<label
+  class={fieldLabel({ class: className })}
+  for={htmlFor}
+  data-part="label"
+  {...rest}
+>
+  <slot />
+</label>

package/src/field/field.ts

@@ -0,0 +1,61 @@
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const label = root.querySelector<HTMLElement>("[data-part='label']");
+  const description = root.querySelector<HTMLElement>("[data-part='description']");
+  const error = root.querySelector<HTMLElement>("[data-part='error']");
+
+  // Find the input/textarea/select inside the field
+  const input = root.querySelector<HTMLElement>(
+    "input, textarea, select, [role='radiogroup'], [role='spinbutton'], [role='slider']",
+  );
+  if (!input) return;
+
+  const fieldId = uniqueId("base-field");
+
+  // Ensure input has an ID for label association
+  if (!input.id) input.id = `${fieldId}-input`;
+
+  // Link label
+  if (label) {
+    label.setAttribute("for", input.id);
+  }
+
+  // Link description via aria-describedby
+  const describedBy: string[] = [];
+  if (description) {
+    const descId = description.id || `${fieldId}-desc`;
+    description.id = descId;
+    describedBy.push(descId);
+  }
+  if (error) {
+    const errId = error.id || `${fieldId}-error`;
+    error.id = errId;
+    describedBy.push(errId);
+  }
+  if (describedBy.length > 0) {
+    input.setAttribute("aria-describedby", describedBy.join(" "));
+  }
+
+  // Set aria-invalid if error is present
+  if (root.hasAttribute("data-invalid")) {
+    input.setAttribute("aria-invalid", "true");
+  }
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='field']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/field/index.ts

@@ -0,0 +1,3 @@
+export { default as Field } from "./Field.astro";
+export { default as FieldLabel } from "./FieldLabel.astro";
+export { default as FieldDescription } from "./FieldDescription.astro";

package/src/fieldset/Fieldset.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const fieldset = tv({
+  base: "space-y-4",
+});
+
+interface Props {
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<fieldset
+  class={fieldset({ class: className })}
+  data-component="fieldset"
+  disabled={disabled || undefined}
+  {...rest}
+>
+  <slot />
+</fieldset>

package/src/fieldset/FieldsetLegend.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const fieldsetLegend = tv({
+  base: "text-sm font-medium leading-none",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<legend class={fieldsetLegend({ class: className })} {...rest}>
+  <slot />
+</legend>

package/src/fieldset/index.ts

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

package/src/footnote/Footnote.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * Footnote component — click a superscript reference to show content in a popover.
+ *
+ * Usage:
+ *   <Footnote label="1" content="<p>Footnote content</p>" />
+ *
+ * Or with a slot:
+ *   <Footnote label="1">
+ *     <p>Footnote content</p>
+ *   </Footnote>
+ */
+import Popover from "../popover/Popover.astro";
+import PopoverTrigger from "../popover/PopoverTrigger.astro";
+import PopoverContent from "../popover/PopoverContent.astro";
+
+interface Props {
+  /** Footnote label (e.g. "1", "note") */
+  label: string;
+  /** Pre-rendered HTML content (alternative to slot) */
+  content?: string;
+  class?: string;
+}
+
+const { label, content, class: className } = Astro.props;
+---
+
+<Popover class:list={["inline", className]}>
+  <PopoverTrigger asChild>
+    <sup class="cursor-pointer text-primary hover:underline" aria-label={`Footnote ${label}`}>
+      [{label}]
+    </sup>
+  </PopoverTrigger>
+  <PopoverContent side="top" align="center" class="max-w-sm text-sm">
+    {content ? <Fragment set:html={content} /> : <slot />}
+  </PopoverContent>
+</Popover>

package/src/footnote/footnote.ts

@@ -0,0 +1,79 @@
+/**
+ * Footnote runtime — hover shows tooltip, click navigates to definition.
+ */
+import { setupFloating } from "@dogsbay/primitives/floating";
+
+const initialized = new WeakSet<HTMLElement>();
+
+function createPopover(content: string): HTMLElement {
+  const el = document.createElement("div");
+  el.className =
+    "fixed z-50 max-w-sm rounded-lg border bg-popover p-3 text-sm text-popover-foreground shadow-md";
+  el.innerHTML = content;
+  el.setAttribute("role", "tooltip");
+  el.hidden = true;
+  document.body.appendChild(el);
+  return el;
+}
+
+function initFootnote(trigger: HTMLElement) {
+  if (initialized.has(trigger)) return;
+  initialized.add(trigger);
+
+  const content = trigger.getAttribute("data-content") || "";
+  let popover: HTMLElement | null = null;
+  let cleanup: (() => void) | null = null;
+  let hideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  function show() {
+    if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout = null; }
+    if (!popover) {
+      popover = createPopover(content);
+      // Keep popover open while hovering it
+      popover.addEventListener("mouseenter", () => {
+        if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout = null; }
+      });
+      popover.addEventListener("mouseleave", () => {
+        hideTimeout = setTimeout(hide, 150);
+      });
+    }
+    popover.hidden = false;
+    cleanup = setupFloating(trigger, popover, {
+      placement: "top",
+      offset: 8,
+    });
+  }
+
+  function hide() {
+    if (popover) popover.hidden = true;
+    if (cleanup) { cleanup(); cleanup = null; }
+    hideTimeout = null;
+  }
+
+  // Hover to show tooltip
+  trigger.addEventListener("mouseenter", show);
+  trigger.addEventListener("mouseleave", () => {
+    hideTimeout = setTimeout(hide, 150);
+  });
+
+  // Focus for keyboard accessibility
+  trigger.addEventListener("focus", show);
+  trigger.addEventListener("blur", () => {
+    hideTimeout = setTimeout(hide, 150);
+  });
+
+  // Click navigates to footnote definition (default <a> behavior)
+  // No preventDefault — let the browser follow the href="#fn-{label}"
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-footnote]").forEach(initFootnote);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+
+document.addEventListener("astro:page-load", initAll);

package/src/footnote/index.ts

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

package/src/form/Form.astro

@@ -0,0 +1,27 @@
+---
+import { tv } from "tailwind-variants";
+
+const form = tv({
+  base: "space-y-6",
+});
+
+interface Props {
+  action?: string;
+  method?: "GET" | "POST";
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { action, method = "POST", class: className, ...rest } = Astro.props;
+---
+
+<form
+  class={form({ class: className })}
+  data-component="form"
+  action={action}
+  method={method}
+  novalidate
+  {...rest}
+>
+  <slot />
+</form>

package/src/form/form.ts

@@ -0,0 +1,160 @@
+interface ValidationRule {
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  type?: "email" | "url";
+  message?: string;
+}
+
+function init(root: HTMLFormElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  root.addEventListener("submit", (e) => {
+    const errors = validate(root);
+    if (errors.size > 0) {
+      e.preventDefault();
+      showErrors(root, errors);
+      // Focus first invalid field
+      const firstInvalid = root.querySelector<HTMLElement>("[aria-invalid='true']");
+      firstInvalid?.focus();
+    } else {
+      clearErrors(root);
+    }
+  });
+
+  // Clear field error on input
+  root.addEventListener("input", (e) => {
+    const input = e.target as HTMLInputElement;
+    const field = input.closest<HTMLElement>("[data-component='field']");
+    if (field) clearFieldError(field);
+  });
+
+  // Validate on blur (tab away)
+  root.addEventListener("focusout", (e) => {
+    const input = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+    if (!input.name) return;
+    // Only validate if the field has been interacted with (has a value or is required)
+    if (!input.value && !input.required) return;
+    const errors = validateField(input);
+    if (errors) {
+      showFieldError(root, input, errors);
+    }
+  });
+}
+
+/**
+ * Validate a single field. Returns error message or null.
+ */
+function validateField(input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): string | null {
+  const value = input.value.trim();
+
+  if (input.required && !value) {
+    return `${labelFor(input) || input.name} is required.`;
+  }
+
+  if (!value) return null;
+
+  if (input.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+    return "Please enter a valid email address.";
+  }
+
+  if (input.type === "url" && !/^https?:\/\/.+/.test(value)) {
+    return "Please enter a valid URL.";
+  }
+
+  if (input.minLength > 0 && value.length < input.minLength) {
+    return `Must be at least ${input.minLength} characters.`;
+  }
+
+  if (input.maxLength > 0 && value.length > input.maxLength) {
+    return `Must be at most ${input.maxLength} characters.`;
+  }
+
+  if (input.pattern) {
+    const re = new RegExp(`^${input.pattern}$`);
+    if (!re.test(value)) {
+      return input.title || "Please match the required format.";
+    }
+  }
+
+  return null;
+}
+
+function validate(form: HTMLFormElement): Map<string, string> {
+  const errors = new Map<string, string>();
+  form.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
+    "input, textarea, select",
+  ).forEach((input) => {
+    if (!input.name) return;
+    const error = validateField(input);
+    if (error) errors.set(input.name, error);
+  });
+  return errors;
+}
+
+function labelFor(input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): string | null {
+  const field = input.closest<HTMLElement>("[data-component='field']");
+  const label = field?.querySelector<HTMLElement>("[data-part='label']");
+  return label?.textContent?.trim() || null;
+}
+
+function showFieldError(form: HTMLFormElement, input: HTMLElement, message: string) {
+  const field = input.closest<HTMLElement>("[data-component='field']");
+  if (!field) return;
+
+  input.setAttribute("aria-invalid", "true");
+  field.setAttribute("data-invalid", "");
+
+  let errorEl = field.querySelector<HTMLElement>("[data-part='error']");
+  if (!errorEl) {
+    errorEl = document.createElement("p");
+    errorEl.className = "text-sm font-medium text-destructive";
+    errorEl.setAttribute("data-part", "error");
+    errorEl.setAttribute("role", "alert");
+    field.appendChild(errorEl);
+  }
+  errorEl.textContent = message;
+
+  if (!errorEl.id) errorEl.id = `${input.id || (input as HTMLInputElement).name}-error`;
+  const existing = input.getAttribute("aria-describedby") || "";
+  if (!existing.includes(errorEl.id)) {
+    input.setAttribute("aria-describedby", `${existing} ${errorEl.id}`.trim());
+  }
+}
+
+function showErrors(form: HTMLFormElement, errors: Map<string, string>) {
+  clearErrors(form);
+  errors.forEach((message, name) => {
+    const input = form.querySelector<HTMLElement>(`[name='${name}']`);
+    if (input) showFieldError(form, input, message);
+  });
+}
+
+function clearErrors(form: HTMLFormElement) {
+  form.querySelectorAll<HTMLElement>("[data-component='field']").forEach(clearFieldError);
+}
+
+function clearFieldError(field: HTMLElement) {
+  field.removeAttribute("data-invalid");
+  const input = field.querySelector<HTMLElement>("input, textarea, select");
+  if (input) input.removeAttribute("aria-invalid");
+
+  // Remove dynamically-added error messages (keep server-rendered ones)
+  const errorEl = field.querySelector<HTMLElement>("[data-part='error']");
+  if (errorEl && !errorEl.hasAttribute("data-server")) {
+    errorEl.remove();
+  }
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLFormElement>("[data-component='form']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/form/index.ts

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

package/src/grid/Grid.astro

@@ -0,0 +1,117 @@
+---
+interface Props {
+  /** Number of columns. Can be responsive: [mobile, sm, md, lg] */
+  cols?: number | number[];
+  /** Gap between items in Tailwind spacing units (1 = 0.25rem). Can be responsive array. */
+  gap?: number | number[];
+  /** Column gap override. Same format as gap. */
+  colGap?: number | number[];
+  /** Row gap override. Same format as gap. */
+  rowGap?: number | number[];
+  /** Vertical alignment of items. Can be responsive. */
+  align?: AlignValue | AlignValue[];
+  class?: string;
+  [key: string]: unknown;
+}
+
+type AlignValue = "start" | "center" | "end" | "stretch";
+
+const {
+  cols = 1,
+  gap,
+  colGap,
+  rowGap,
+  align,
+  class: className,
+  ...rest
+} = Astro.props;
+
+// Breakpoints: sm=640px, md=768px, lg=1024px
+const breakpoints = [0, 640, 768, 1024];
+
+function toArray<T>(value: T | T[] | undefined): T[] {
+  if (value === undefined) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+function toRem(spacingUnit: number): string {
+  return `${spacingUnit * 0.25}rem`;
+}
+
+const colsArr = toArray(cols);
+const gapArr = toArray(gap);
+const colGapArr = toArray(colGap);
+const rowGapArr = toArray(rowGap);
+const alignArr = toArray(align);
+
+function buildResponsiveCSS(id: string): string {
+  let css = "";
+
+  const baseCols = colsArr[0] || 1;
+  const baseGap = gapArr[0];
+  const baseColGap = colGapArr[0] ?? baseGap;
+  const baseRowGap = rowGapArr[0] ?? baseGap;
+  const baseAlign = alignArr[0];
+
+  css += `[data-grid-id="${id}"] {
+    display: grid;
+    grid-template-columns: repeat(${baseCols}, minmax(0, 1fr));`;
+
+  if (baseColGap !== undefined)
+    css += `\n    column-gap: ${toRem(baseColGap)};`;
+  if (baseRowGap !== undefined) css += `\n    row-gap: ${toRem(baseRowGap)};`;
+  if (baseAlign) css += `\n    align-items: ${baseAlign};`;
+  css += "\n  }\n";
+
+  const maxLen = Math.max(
+    colsArr.length,
+    gapArr.length,
+    colGapArr.length,
+    rowGapArr.length,
+    alignArr.length,
+  );
+
+  for (let i = 1; i < maxLen; i++) {
+    const bp = breakpoints[i] || breakpoints[breakpoints.length - 1];
+    const bpCols = colsArr[i];
+    const bpGap = gapArr[i];
+    const bpColGap = colGapArr[i] ?? bpGap;
+    const bpRowGap = rowGapArr[i] ?? bpGap;
+    const bpAlign = alignArr[i];
+
+    const hasChanges =
+      bpCols !== undefined ||
+      bpColGap !== undefined ||
+      bpRowGap !== undefined ||
+      bpAlign !== undefined;
+
+    if (hasChanges) {
+      css += `  @media (min-width: ${bp}px) {\n`;
+      css += `    [data-grid-id="${id}"] {`;
+      if (bpCols !== undefined)
+        css += `\n      grid-template-columns: repeat(${bpCols}, minmax(0, 1fr));`;
+      if (bpColGap !== undefined)
+        css += `\n      column-gap: ${toRem(bpColGap)};`;
+      if (bpRowGap !== undefined) css += `\n      row-gap: ${toRem(bpRowGap)};`;
+      if (bpAlign) css += `\n      align-items: ${bpAlign};`;
+      css += "\n    }\n  }\n";
+    }
+  }
+
+  return css;
+}
+
+const gridId = `g${Math.random().toString(36).slice(2, 8)}`;
+const responsiveCSS = buildResponsiveCSS(gridId);
+---
+
+<div
+  class:list={["base-grid", className]}
+  data-grid-id={gridId}
+  data-cols={Array.isArray(cols) ? cols.join(",") : cols}
+  {...rest}
+>
+  <slot />
+</div>
+
+<style set:html={responsiveCSS}></style>

package/src/grid/GridItem.astro

@@ -0,0 +1,95 @@
+---
+interface Props {
+  /** Number of columns this item spans. Can be responsive: [mobile, sm, md, lg] */
+  span?: number | number[];
+  /** Number of rows this item spans. */
+  rowSpan?: number;
+  /** Number of columns to skip (offset). Can be responsive. */
+  skip?: number | number[];
+  /** CSS order for reordering items. Can be responsive. */
+  order?: number | number[];
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { span, rowSpan, skip, order, class: className, ...rest } = Astro.props;
+
+// Breakpoints match Grid.astro
+const breakpoints = [0, 640, 768, 1024];
+
+function toArray(value: number | number[] | undefined): number[] {
+  if (value === undefined) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+const spanArr = toArray(span);
+const skipArr = toArray(skip);
+const orderArr = toArray(order);
+
+const needsResponsiveCSS =
+  spanArr.length > 1 || skipArr.length > 1 || orderArr.length > 1;
+
+// For non-responsive, use inline styles (simpler)
+const inlineStyle: Record<string, string> = {};
+if (spanArr.length === 1)
+  inlineStyle["grid-column"] = `span ${spanArr[0]} / span ${spanArr[0]}`;
+if (rowSpan !== undefined && rowSpan > 1)
+  inlineStyle["grid-row"] = `span ${rowSpan} / span ${rowSpan}`;
+if (skipArr.length === 1)
+  inlineStyle["grid-column-start"] = String(skipArr[0] + 1);
+if (orderArr.length === 1) inlineStyle["order"] = String(orderArr[0]);
+
+// For responsive, generate scoped CSS
+let responsiveCSS = "";
+let itemId = "";
+
+if (needsResponsiveCSS) {
+  itemId = `gi${Math.random().toString(36).slice(2, 8)}`;
+
+  const baseSpan = spanArr[0];
+  const baseSkip = skipArr[0];
+  const baseOrder = orderArr[0];
+
+  responsiveCSS += `[data-grid-item-id="${itemId}"] {`;
+  if (baseSpan)
+    responsiveCSS += `\n    grid-column: span ${baseSpan} / span ${baseSpan};`;
+  if (baseSkip) responsiveCSS += `\n    grid-column-start: ${baseSkip + 1};`;
+  if (baseOrder !== undefined) responsiveCSS += `\n    order: ${baseOrder};`;
+  responsiveCSS += "\n  }\n";
+
+  const maxLen = Math.max(spanArr.length, skipArr.length, orderArr.length);
+  for (let i = 1; i < maxLen; i++) {
+    const bp = breakpoints[i] || breakpoints[breakpoints.length - 1];
+    const bpSpan = spanArr[i];
+    const bpSkip = skipArr[i];
+    const bpOrder = orderArr[i];
+
+    if (bpSpan !== undefined || bpSkip !== undefined || bpOrder !== undefined) {
+      responsiveCSS += `  @media (min-width: ${bp}px) {\n`;
+      responsiveCSS += `    [data-grid-item-id="${itemId}"] {`;
+      if (bpSpan !== undefined)
+        responsiveCSS += `\n      grid-column: span ${bpSpan} / span ${bpSpan};`;
+      if (bpSkip !== undefined)
+        responsiveCSS += `\n      grid-column-start: ${bpSkip + 1};`;
+      if (bpOrder !== undefined) responsiveCSS += `\n      order: ${bpOrder};`;
+      responsiveCSS += "\n    }\n  }\n";
+    }
+  }
+}
+
+const styleStr =
+  Object.entries(inlineStyle)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join("; ") || undefined;
+---
+
+<div
+  class:list={["base-grid-item", className]}
+  style={!needsResponsiveCSS ? styleStr : undefined}
+  data-grid-item-id={needsResponsiveCSS ? itemId : undefined}
+  {...rest}
+>
+  <slot />
+</div>
+
+{needsResponsiveCSS && <style set:html={responsiveCSS} />}

package/src/grid/index.ts

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