@dogsbay/ui 0.2.0-beta.0

package/src/checkbox/Checkbox.astro

@@ -0,0 +1,70 @@
+---
+import { tv } from "tailwind-variants";
+
+const checkboxWrapper = tv({
+  base: "inline-flex items-center gap-2 cursor-pointer",
+});
+
+const checkboxInput = tv({
+  base: "absolute h-px w-px overflow-hidden [clip:rect(0,0,0,0)] whitespace-nowrap",
+});
+
+const checkboxVisual = tv({
+  base: "inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.25rem] border border-primary transition-colors peer-checked:bg-primary peer-checked:text-primary-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring",
+});
+
+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;
+---
+
+<label class={checkboxWrapper({ class: className })}>
+  <input
+    class={`peer ${checkboxInput()}`}
+    data-component="checkbox"
+    type="checkbox"
+    name={name}
+    value={value}
+    checked={defaultChecked}
+    disabled={disabled || undefined}
+    required={required || undefined}
+    {...rest}
+  />
+  <span
+    class={checkboxVisual()}
+    data-state={defaultChecked ? "checked" : "unchecked"}
+    aria-hidden="true"
+  >
+    <svg
+      class="hidden peer-checked:block h-3.5 w-3.5"
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+  </span>
+  <slot />
+</label>

package/src/checkbox/index.ts

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

package/src/checkbox-group/CheckboxGroup.astro

@@ -0,0 +1,38 @@
+---
+import { tv } from "tailwind-variants";
+
+const checkboxGroup = tv({
+  base: "space-y-3",
+});
+
+interface Props {
+  name?: string;
+  defaultValue?: string[];
+  disabled?: boolean;
+  orientation?: "vertical" | "horizontal";
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  name,
+  defaultValue = [],
+  disabled = false,
+  orientation = "vertical",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={checkboxGroup({ class: className })}
+  data-component="checkbox-group"
+  data-name={name}
+  data-default-value={defaultValue.join(",")}
+  data-disabled={disabled || undefined}
+  data-orientation={orientation}
+  role="group"
+  {...rest}
+>
+  <slot />
+</div>

package/src/checkbox-group/checkbox-group.ts

@@ -0,0 +1,53 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const name = root.getAttribute("data-name") || "";
+  const disabled = root.hasAttribute("data-disabled");
+
+  // Find all checkboxes inside the group
+  const checkboxes = () =>
+    Array.from(root.querySelectorAll<HTMLInputElement>("input[type='checkbox']"));
+
+  // Initialize default values
+  const defaultValue = root.getAttribute("data-default-value") || "";
+  const defaults = defaultValue ? defaultValue.split(",") : [];
+
+  checkboxes().forEach((cb) => {
+    if (defaults.includes(cb.value)) {
+      cb.checked = true;
+    }
+    if (disabled) {
+      cb.disabled = true;
+    }
+    // Ensure name is set for form submission
+    if (name && !cb.name) {
+      cb.name = name;
+    }
+  });
+
+  // Dispatch change event when any checkbox changes
+  root.addEventListener("change", () => {
+    const values = checkboxes()
+      .filter((cb) => cb.checked)
+      .map((cb) => cb.value);
+
+    root.dispatchEvent(
+      new CustomEvent("base-checkbox-group:change", {
+        detail: { values },
+        bubbles: true,
+      }),
+    );
+  });
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='checkbox-group']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/checkbox-group/index.ts

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

package/src/code-block/CodeBlock.astro

@@ -0,0 +1,160 @@
+---
+import { Code } from "astro/components";
+import { tv } from "tailwind-variants";
+
+const codeBlockWrapper = tv({
+  base: "group relative overflow-hidden rounded-lg border bg-code-bg text-sm",
+});
+
+const codeBlockHeader = tv({
+  base: "flex items-center justify-between border-b border-code-fg/10 bg-code-fg/5 px-4 py-2 text-xs text-code-fg/70",
+});
+
+const codeBlockCopy = tv({
+  base: "inline-flex h-7 w-7 items-center justify-center rounded-md text-code-fg/50 transition-colors hover:bg-code-fg/10 hover:text-code-fg/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+});
+
+interface Props {
+  /** The code string to highlight */
+  code: string;
+  /** Programming language for syntax highlighting */
+  lang?: string;
+  /** Optional title displayed in the header bar */
+  title?: string;
+  /** Show copy button (default: true) */
+  copy?: boolean;
+  /** Show the header title bar. true = always, false = never, "auto" = only when title prop is set (default: true) */
+  showTitle?: boolean | "auto";
+  /** Shiki theme (default: "github-dark") */
+  theme?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  code,
+  lang = "plaintext",
+  title,
+  copy = true,
+  showTitle = true,
+  theme = "github-dark-default",
+  class: className,
+  ...rest
+} = Astro.props;
+
+// Show header bar based on showTitle prop:
+// - true: show when there's a title or a declared language (default, original behavior)
+// - false: never show
+// - "auto": only show when an explicit title is provided (not lang-only)
+const showHeader =
+  showTitle === false ? false
+  : showTitle === "auto" ? !!title
+  : !!title || lang !== "plaintext";
+// When no header, copy button floats inside the code body
+const floatingCopy = copy && !showHeader;
+---
+
+<div
+  class={codeBlockWrapper({ class: className })}
+  data-component="code-block"
+  {...rest}
+>
+  {showHeader && (
+    <div class={codeBlockHeader()}>
+      <span class="select-none">{title || lang}</span>
+      {copy && (
+        <button
+          class={codeBlockCopy()}
+          data-part="copy"
+          data-copy-text={code}
+          type="button"
+          aria-label="Copy code"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            data-copy-icon
+            aria-hidden="true"
+          >
+            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            data-check-icon
+            class="hidden"
+            aria-hidden="true"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </button>
+      )}
+    </div>
+  )}
+  <div class="relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:px-4 [&_pre]:py-3">
+    <Code code={code} lang={lang.toLowerCase()} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
+    {floatingCopy && (
+      <button
+        class:list={[codeBlockCopy(), "absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"]}
+        data-part="copy"
+        data-copy-text={code}
+        type="button"
+        aria-label="Copy code"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-copy-icon aria-hidden="true">
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-check-icon class="hidden" aria-hidden="true">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      </button>
+    )}
+  </div>
+</div>
+
+<script>
+  function setupCodeBlockCopy() {
+    document.querySelectorAll("[data-component='code-block'] [data-part='copy']").forEach((btn) => {
+      if ((btn as any).__copyBound) return;
+      (btn as any).__copyBound = true;
+
+      btn.addEventListener("click", async () => {
+        const text = btn.getAttribute("data-copy-text") || "";
+        try {
+          await navigator.clipboard.writeText(text);
+          const copyIcon = btn.querySelector("[data-copy-icon]") as HTMLElement;
+          const checkIcon = btn.querySelector("[data-check-icon]") as HTMLElement;
+          if (copyIcon && checkIcon) {
+            copyIcon.classList.add("hidden");
+            checkIcon.classList.remove("hidden");
+            setTimeout(() => {
+              copyIcon.classList.remove("hidden");
+              checkIcon.classList.add("hidden");
+            }, 2000);
+          }
+        } catch {
+          // Fallback: do nothing
+        }
+      });
+    });
+  }
+
+  setupCodeBlockCopy();
+  document.addEventListener("astro:after-swap", setupCodeBlockCopy);
+</script>

package/src/code-rich/CodeRich.astro

@@ -0,0 +1,267 @@
+---
+import "./code-rich.css";
+import { codeToHtml, type BundledLanguage, type BundledTheme } from "shiki";
+import {
+  transformerNotationDiff,
+  transformerNotationHighlight,
+  transformerNotationFocus,
+  transformerNotationErrorLevel,
+  transformerNotationWordHighlight,
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+} from "@shikijs/transformers";
+import type { ShikiTransformer } from "shiki";
+import { tv } from "tailwind-variants";
+
+const codeRichWrapper = tv({
+  base: "group relative overflow-hidden rounded-lg border bg-code-bg text-sm",
+});
+
+const codeRichHeader = tv({
+  base: "flex items-center justify-between border-b border-code-fg/10 bg-code-fg/5 px-4 py-2 text-xs text-code-fg/70",
+});
+
+const codeRichCopy = tv({
+  base: "inline-flex h-7 w-7 items-center justify-center rounded-md text-code-fg/50 transition-colors hover:bg-code-fg/10 hover:text-code-fg/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+});
+
+interface Props {
+  /** The code string to highlight */
+  code: string;
+  /** Programming language for syntax highlighting */
+  lang?: string;
+  /** Optional title/filename displayed in the header bar */
+  title?: string;
+  /** Show copy button (default: true) */
+  copy?: boolean;
+  /** Show line numbers (default: false) */
+  lineNumbers?: boolean;
+  /** Starting line number (default: 1) */
+  startLine?: number;
+  /** Lines to highlight, e.g. "1,3-5" */
+  highlights?: string;
+  /** Words to highlight, e.g. "Hello" */
+  wordHighlights?: string;
+  /** Shiki theme */
+  theme?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  code,
+  lang = "plaintext",
+  title,
+  copy = true,
+  lineNumbers = false,
+  startLine = 1,
+  highlights,
+  wordHighlights,
+  theme = "github-dark-default",
+  class: className,
+  ...rest
+} = Astro.props;
+
+// Build transformers list
+const transformers: ShikiTransformer[] = [
+  transformerNotationDiff(),
+  transformerNotationHighlight(),
+  transformerNotationFocus(),
+  transformerNotationErrorLevel(),
+  transformerNotationWordHighlight(),
+];
+
+// Meta-based highlights: ```ts {1,3-5}
+if (highlights) {
+  transformers.push(transformerMetaHighlight());
+}
+
+// Meta-based word highlights: ```ts /word/
+if (wordHighlights) {
+  transformers.push(transformerMetaWordHighlight());
+}
+
+// Gutter: inject line number + diff marker spans into each line
+// Single gutter: "5 +" or "5 −" or "5" or "+" or "−"
+transformers.push({
+  name: "gutter",
+  code(node) {
+    // Runs after all line hooks — diff classes are now set
+    const lines = node.children.filter(
+      (c: any) => c.type === "element" && c.tagName === "span",
+    );
+
+    // Check if any line has diffs — if so, reserve the +/- column for all lines
+    const getClass = (n: any) => {
+      const rc = n.properties?.class ?? n.properties?.className ?? "";
+      return Array.isArray(rc) ? rc.join(" ") : String(rc);
+    };
+    const hasDiffs = lines.some((n: any) => getClass(n).includes("diff"));
+
+    let lineNum = startLine;
+    for (const lineNode of lines) {
+      const cls = getClass(lineNode);
+      if (!cls.includes("line")) continue;
+
+      const isAdd = cls.includes("add");
+      const isRemove = cls.includes("remove");
+
+      const needsGutter = lineNumbers || hasDiffs;
+      if (needsGutter) {
+        // Build separate fixed-width parts
+        const parts: string[] = [];
+        if (lineNumbers) {
+          parts.push(String(lineNum).padStart(3));
+        }
+        if (hasDiffs) {
+          parts.push(isAdd ? "+" : isRemove ? "−" : " ");
+        }
+
+        const gutterClass = `gutter${isAdd ? " add" : isRemove ? " remove" : ""}`;
+        (lineNode as any).children.unshift({
+          type: "element",
+          tagName: "span",
+          properties: { class: gutterClass },
+          children: [{ type: "text", value: parts.join(" ") }],
+        });
+      }
+
+      lineNum++;
+    }
+  },
+});
+
+// Build meta string
+let metaStr = "";
+if (highlights) metaStr += `{${highlights}} `;
+if (wordHighlights) metaStr += `/${wordHighlights}/ `;
+
+// Strip annotation comments from the copy text
+const copyText = code
+  .replace(/\s*\/\/\s*\[!code\s[^\]]*\]\s*$/gm, "")
+  .replace(/\s*\/\/\s*![a-z]+.*$/gm, "")
+  .trim();
+
+const html = await codeToHtml(code, {
+  lang: lang.toLowerCase() as BundledLanguage,
+  themes: {
+    light: "github-light-default" as BundledTheme,
+    dark: (theme || "github-dark-default") as BundledTheme,
+  },
+  defaultColor: false,
+  transformers,
+  meta: metaStr ? { __raw: metaStr } : undefined,
+});
+
+// Show header bar only when there's a title or a declared language
+const hasLabel = !!title || (lang !== "plaintext");
+const showHeader = hasLabel;
+// When no header, copy button floats inside the code body
+const floatingCopy = copy && !showHeader;
+---
+
+<div
+  class={codeRichWrapper({ class: className })}
+  data-component="code-rich"
+  data-line-numbers={lineNumbers || undefined}
+  {...rest}
+>
+  {showHeader && (
+    <div class={codeRichHeader()}>
+      <span class="select-none">{title || lang}</span>
+      {copy && (
+        <button
+          class={codeRichCopy()}
+          data-part="copy"
+          data-copy-text={copyText}
+          type="button"
+          aria-label="Copy code"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            data-copy-icon
+            aria-hidden="true"
+          >
+            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            data-check-icon
+            class="hidden"
+            aria-hidden="true"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </button>
+      )}
+    </div>
+  )}
+  <div class="code-rich-body relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:!bg-transparent [&_pre]:px-4 [&_pre]:py-3">
+    <Fragment set:html={html} />
+    {floatingCopy && (
+      <button
+        class:list={[codeRichCopy(), "absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"]}
+        data-part="copy"
+        data-copy-text={copyText}
+        type="button"
+        aria-label="Copy code"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-copy-icon aria-hidden="true">
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-check-icon class="hidden" aria-hidden="true">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      </button>
+    )}
+  </div>
+</div>
+
+<script>
+  function setupCodeRichCopy() {
+    document.querySelectorAll("[data-component='code-rich'] [data-part='copy']").forEach((btn) => {
+      if ((btn as any).__copyBound) return;
+      (btn as any).__copyBound = true;
+
+      btn.addEventListener("click", async () => {
+        const text = btn.getAttribute("data-copy-text") || "";
+        try {
+          await navigator.clipboard.writeText(text);
+          const copyIcon = btn.querySelector("[data-copy-icon]") as HTMLElement;
+          const checkIcon = btn.querySelector("[data-check-icon]") as HTMLElement;
+          if (copyIcon && checkIcon) {
+            copyIcon.classList.add("hidden");
+            checkIcon.classList.remove("hidden");
+            setTimeout(() => {
+              copyIcon.classList.remove("hidden");
+              checkIcon.classList.add("hidden");
+            }, 2000);
+          }
+        } catch {
+          // Fallback: do nothing
+        }
+      });
+    });
+  }
+
+  setupCodeRichCopy();
+  document.addEventListener("astro:after-swap", setupCodeRichCopy);
+</script>

package/src/code-rich/code-rich.css

@@ -0,0 +1,68 @@
+/* CodeRich annotation styles — applied via CSS classes from Shiki transformers */
+
+/* ── All lines ────────────────────────────────────────── */
+.code-rich-body .line {
+  display: inline-flex;
+  width: 100%;
+}
+
+/* ── Gutter (single column: line number + diff marker) ── */
+.code-rich-body .gutter {
+  display: inline-block;
+  min-width: 4ch;
+  margin-right: 1.5ch;
+  text-align: right;
+  color: oklch(0.35 0 0 / 0.7);
+  user-select: none;
+  flex-shrink: 0;
+}
+.code-rich-body .gutter.add {
+  color: oklch(0.55 0.2 145);
+}
+.code-rich-body .gutter.remove {
+  color: oklch(0.55 0.2 25);
+}
+
+/* ── Diff line backgrounds ────────────────────────────── */
+.code-rich-body .line.diff.add {
+  background-color: oklch(0.75 0.18 145 / 0.15);
+}
+.code-rich-body .line.diff.remove {
+  background-color: oklch(0.65 0.2 25 / 0.15);
+}
+
+/* ── Focus ─────────────────────────────────────────────── */
+.code-rich-body pre.has-focused .line:not(.focused) {
+  opacity: 0.7;
+  transition: opacity 0.3s;
+}
+.code-rich-body pre.has-focused:hover .line:not(.focused) {
+  opacity: 0.9;
+}
+.code-rich-body pre.has-focused .line.focused {
+  opacity: 1;
+}
+
+/* ── Highlight (background only) ──────────────────────── */
+.code-rich-body .line.highlighted {
+  background-color: oklch(0.7 0.1 250 / 0.08);
+}
+
+/* ── Error / Warning / Info levels ─────────────────────── */
+.code-rich-body .line.highlighted.error {
+  background-color: oklch(0.65 0.2 25 / 0.08);
+}
+.code-rich-body .line.highlighted.warning {
+  background-color: oklch(0.75 0.18 65 / 0.08);
+}
+.code-rich-body .line.highlighted.info {
+  background-color: oklch(0.7 0.15 250 / 0.08);
+}
+
+/* ── Word highlight ────────────────────────────────────── */
+.code-rich-body .highlighted-word {
+  background-color: oklch(0.7 0.1 250 / 0.25);
+  border-radius: 3px;
+  padding: 1px 4px;
+  margin: 0 -1px;
+}

package/src/code-rich/index.ts

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