@dogsbay/ui 0.2.0-beta.0

package/src/code-samples/CodeSamples.astro

@@ -0,0 +1,59 @@
+---
+import Tabs from "../tabs/Tabs.astro";
+import TabsList from "../tabs/TabsList.astro";
+import TabsTrigger from "../tabs/TabsTrigger.astro";
+import TabsContent from "../tabs/TabsContent.astro";
+import CodeBlock from "../code-block/CodeBlock.astro";
+
+interface CodeSample {
+  language: string;
+  label?: string;
+  code: string;
+}
+
+interface Props {
+  samples: CodeSample[];
+  class?: string;
+}
+
+const { samples, class: className } = Astro.props;
+
+const languageLabels: Record<string, string> = {
+  curl: "cURL",
+  python: "Python",
+  typescript: "TypeScript",
+  javascript: "JavaScript",
+  go: "Go",
+  ruby: "Ruby",
+  java: "Java",
+  csharp: "C#",
+  php: "PHP",
+  rust: "Rust",
+};
+
+// Map our language names to Shiki language IDs
+const shikiLangMap: Record<string, string> = {
+  curl: "bash",
+  csharp: "csharp",
+};
+---
+
+<Tabs defaultValue={samples[0]?.language} class={className}>
+  <TabsList>
+    {samples.map((s) => (
+      <TabsTrigger value={s.language}>
+        {s.label || languageLabels[s.language] || s.language}
+      </TabsTrigger>
+    ))}
+  </TabsList>
+
+  {samples.map((s, i) => (
+    <TabsContent value={s.language} default={i === 0}>
+      <CodeBlock
+        code={s.code}
+        lang={shikiLangMap[s.language] || s.language}
+        copy={true}
+      />
+    </TabsContent>
+  ))}
+</Tabs>

package/src/collapsible/Collapsible.astro

@@ -0,0 +1,35 @@
+---
+import { tv } from "tailwind-variants";
+
+const collapsible = tv({
+  base: "w-full",
+});
+
+interface Props {
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  defaultOpen = false,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<db-collapsible
+  class={collapsible({ class: className })}
+  default-open={defaultOpen || undefined}
+  disabled={disabled || undefined}
+  data-state={defaultOpen ? "open" : "closed"}
+  {...rest}
+>
+  <slot />
+</db-collapsible>
+
+<script>
+  import "@dogsbay/elements/db-collapsible";
+</script>

package/src/collapsible/CollapsibleContent.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const collapsibleContent = tv({
+  base: "overflow-hidden text-sm transition-all data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={collapsibleContent({ class: className })}
+  data-part="content"
+  role="region"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/collapsible/CollapsibleTrigger.astro

@@ -0,0 +1,23 @@
+---
+import { tv } from "tailwind-variants";
+
+const collapsibleTrigger = tv({
+  base: "flex items-center justify-between gap-2 font-medium transition-colors hover:text-foreground/80 disabled:pointer-events-none disabled:opacity-50 [&[aria-expanded=true]>svg]:rotate-180",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={collapsibleTrigger({ class: className })}
+  data-part="trigger"
+  type="button"
+  {...rest}
+>
+  <slot />
+</button>

package/src/collapsible/collapsible.ts

@@ -0,0 +1,42 @@
+import { Collapsible } from "@dogsbay/primitives/collapsible";
+
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const trigger = root.querySelector<HTMLElement>("[data-part='trigger']");
+  const content = root.querySelector<HTMLElement>("[data-part='content']");
+  if (!trigger || !content) return;
+
+  const disabled = root.hasAttribute("data-disabled");
+  if (disabled) {
+    trigger.setAttribute("disabled", "");
+    trigger.setAttribute("aria-disabled", "true");
+  }
+
+  const collapsible = new Collapsible(trigger, content, {
+    onToggle(open) {
+      root.setAttribute("data-state", open ? "open" : "closed");
+      content.setAttribute("data-state", open ? "open" : "closed");
+    },
+  });
+
+  // Open by default if specified
+  if (root.hasAttribute("data-default-open")) {
+    collapsible.expand();
+    content.setAttribute("data-state", "open");
+  }
+}
+
+function initAll() {
+  document
+    .querySelectorAll<HTMLElement>("[data-component='collapsible']")
+    .forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.astro";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.astro";
+export { default as CollapsibleContent } from "./CollapsibleContent.astro";

package/src/combobox/Combobox.astro

@@ -0,0 +1,53 @@
+---
+import { tv } from "tailwind-variants";
+
+const combobox = tv({
+  base: "relative w-full",
+});
+
+interface Props {
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  name,
+  placeholder = "Search...",
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={combobox({ class: className })}
+  data-component="combobox"
+  data-name={name}
+  data-disabled={disabled || undefined}
+  {...rest}
+>
+  <input
+    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    data-part="input"
+    type="text"
+    role="combobox"
+    aria-expanded="false"
+    aria-autocomplete="list"
+    aria-haspopup="listbox"
+    autocomplete="off"
+    placeholder={placeholder}
+    name={name}
+    disabled={disabled || undefined}
+  />
+  <div
+    class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+    data-part="listbox"
+    role="listbox"
+    hidden
+  >
+    <slot />
+  </div>
+</div>

package/src/combobox/ComboboxEmpty.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const comboboxEmpty = tv({
+  base: "py-6 text-center text-sm text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={comboboxEmpty({ class: className })} data-part="empty" hidden {...rest}>
+  <slot />
+</div>

package/src/combobox/ComboboxItem.astro

@@ -0,0 +1,28 @@
+---
+import { tv } from "tailwind-variants";
+
+const comboboxItem = tv({
+  base: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+});
+
+interface Props {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { value, disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={comboboxItem({ class: className })}
+  data-part="option"
+  data-value={value}
+  role="option"
+  aria-selected="false"
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  <slot />
+</div>

package/src/combobox/combobox.ts

@@ -0,0 +1,179 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const input = root.querySelector<HTMLInputElement>("[data-part='input']");
+  const listbox = root.querySelector<HTMLElement>("[data-part='listbox']");
+  const emptyEl = root.querySelector<HTMLElement>("[data-part='empty']");
+  if (!input || !listbox) return;
+
+  const allOptions = Array.from(listbox.querySelectorAll<HTMLElement>("[data-part='option']"));
+  let highlightedIndex = -1;
+  let isOpen = false;
+
+  function getVisible(): HTMLElement[] {
+    return allOptions.filter((o) => !o.hidden && o.getAttribute("data-disabled") !== "true");
+  }
+
+  function open() {
+    if (isOpen) return;
+    isOpen = true;
+    listbox.hidden = false;
+    input.setAttribute("aria-expanded", "true");
+  }
+
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    listbox.hidden = true;
+    input.setAttribute("aria-expanded", "false");
+    clearHighlight();
+  }
+
+  function filter(query: string) {
+    const q = query.toLowerCase();
+    let visibleCount = 0;
+
+    allOptions.forEach((option) => {
+      const text = option.textContent?.toLowerCase() || "";
+      const value = (option.getAttribute("data-value") || "").toLowerCase();
+      const matches = !q || text.includes(q) || value.includes(q);
+      option.hidden = !matches;
+      if (matches) visibleCount++;
+    });
+
+    // Show/hide empty state
+    if (emptyEl) {
+      emptyEl.hidden = visibleCount > 0 || !q;
+    }
+
+    if (visibleCount > 0) {
+      open();
+      highlightItem(0);
+    } else if (q && emptyEl) {
+      open();
+      clearHighlight();
+    } else {
+      close();
+    }
+  }
+
+  function highlightItem(index: number) {
+    const visible = getVisible();
+    if (index < 0 || index >= visible.length) return;
+
+    clearHighlight();
+    highlightedIndex = allOptions.indexOf(visible[index]);
+    const item = allOptions[highlightedIndex];
+    item.setAttribute("data-highlighted", "");
+    item.scrollIntoView({ block: "nearest" });
+    input.setAttribute("aria-activedescendant", item.id || "");
+  }
+
+  function clearHighlight() {
+    if (highlightedIndex >= 0) {
+      allOptions[highlightedIndex].removeAttribute("data-highlighted");
+    }
+    highlightedIndex = -1;
+    input.removeAttribute("aria-activedescendant");
+  }
+
+  function selectItem(item: HTMLElement) {
+    const value = item.getAttribute("data-value") || "";
+    const text = item.textContent?.trim() || value;
+    input.value = text;
+
+    // Deselect all, select this
+    allOptions.forEach((o) => o.setAttribute("aria-selected", "false"));
+    item.setAttribute("aria-selected", "true");
+
+    close();
+    root.dispatchEvent(new CustomEvent("change", { detail: { value, text }, bubbles: true }));
+  }
+
+  // Input events
+  input.addEventListener("input", () => {
+    filter(input.value);
+  });
+
+  input.addEventListener("focus", () => {
+    if (input.value) {
+      filter(input.value);
+    } else {
+      open();
+    }
+  });
+
+  input.addEventListener("keydown", (e) => {
+    const visible = getVisible();
+
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (!isOpen) { open(); highlightItem(0); return; }
+        const curIdx = highlightedIndex >= 0 ? visible.indexOf(allOptions[highlightedIndex]) : -1;
+        highlightItem(Math.min(curIdx + 1, visible.length - 1));
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (!isOpen) return;
+        const curIdx2 = highlightedIndex >= 0 ? visible.indexOf(allOptions[highlightedIndex]) : visible.length;
+        highlightItem(Math.max(curIdx2 - 1, 0));
+        break;
+      }
+      case "Enter":
+        e.preventDefault();
+        if (highlightedIndex >= 0) {
+          selectItem(allOptions[highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+      case "Home":
+        if (isOpen) { e.preventDefault(); highlightItem(0); }
+        break;
+      case "End":
+        if (isOpen) { e.preventDefault(); highlightItem(visible.length - 1); }
+        break;
+    }
+  });
+
+  // Option click
+  allOptions.forEach((option) => {
+    option.addEventListener("click", () => {
+      if (option.getAttribute("data-disabled") === "true") return;
+      selectItem(option);
+    });
+    option.addEventListener("pointerenter", () => {
+      if (option.getAttribute("data-disabled") === "true") return;
+      const visible = getVisible();
+      highlightItem(visible.indexOf(option));
+    });
+  });
+
+  // Close on click outside
+  document.addEventListener("pointerdown", (e) => {
+    if (!root.contains(e.target as Node)) close();
+  });
+
+  // Generate IDs for options
+  allOptions.forEach((o, i) => {
+    if (!o.id) o.id = `${input.id || "combobox"}-option-${i}`;
+  });
+  if (listbox.id === "") listbox.id = `${input.id || "combobox"}-listbox`;
+  input.setAttribute("aria-controls", listbox.id);
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='combobox']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/combobox/index.ts

@@ -0,0 +1,3 @@
+export { default as Combobox } from "./Combobox.astro";
+export { default as ComboboxItem } from "./ComboboxItem.astro";
+export { default as ComboboxEmpty } from "./ComboboxEmpty.astro";

package/src/command/Command.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const command = tv({
+  base: "flex size-full flex-col overflow-hidden rounded-xl bg-popover p-1 text-popover-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={command({ class: className })}
+  data-component="command"
+  {...rest}
+>
+  <slot />
+</div>

package/src/command/CommandEmpty.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const commandEmpty = tv({
+  base: "py-6 text-center text-sm text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={commandEmpty({ class: className })} data-part="empty" hidden {...rest}>
+  <slot>No results found.</slot>
+</div>

package/src/command/CommandGroup.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const commandGroup = tv({
+  base: "overflow-hidden p-1 text-foreground",
+});
+
+const commandGroupHeading = tv({
+  base: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+});
+
+interface Props {
+  heading?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { heading, class: className, ...rest } = Astro.props;
+---
+
+<div class={commandGroup({ class: className })} data-part="group" role="group" {...rest}>
+  {heading && <div class={commandGroupHeading()}>{heading}</div>}
+  <slot />
+</div>

package/src/command/CommandInput.astro

@@ -0,0 +1,49 @@
+---
+import { tv } from "tailwind-variants";
+
+const commandInputWrapper = tv({
+  base: "flex items-center gap-2 border-b px-3",
+});
+
+const commandInput = tv({
+  base: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+});
+
+interface Props {
+  placeholder?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { placeholder = "Type a command or search...", class: className, ...rest } = Astro.props;
+---
+
+<div class={commandInputWrapper()}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="size-4 shrink-0 text-muted-foreground"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="8"></circle>
+    <path d="m21 21-4.3-4.3"></path>
+  </svg>
+  <input
+    class={commandInput({ class: className })}
+    data-part="input"
+    type="text"
+    aria-label={placeholder}
+    placeholder={placeholder}
+    autocomplete="off"
+    autocorrect="off"
+    spellcheck="false"
+    {...rest}
+  />
+</div>

package/src/command/CommandItem.astro

@@ -0,0 +1,26 @@
+---
+import { tv } from "tailwind-variants";
+
+const commandItem = tv({
+  base: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-70 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+});
+
+interface Props {
+  disabled?: boolean;
+  keywords?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { disabled = false, keywords, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={commandItem({ class: className })}
+  data-part="item"
+  data-disabled={disabled ? "true" : undefined}
+  data-keywords={keywords}
+  {...rest}
+>
+  <slot />
+</div>

package/src/command/CommandList.astro

@@ -0,0 +1,19 @@
+---
+import { tv } from "tailwind-variants";
+
+const commandList = tv({
+  base: "max-h-72 overflow-x-hidden overflow-y-auto p-1 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+});
+
+interface Props {
+  "aria-label"?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { "aria-label": ariaLabel = "Command results", class: className, ...rest } = Astro.props;
+---
+
+<div class={commandList({ class: className })} data-part="list" {...rest}>
+  <slot />
+</div>

package/src/command/CommandSeparator.astro

@@ -0,0 +1,16 @@
+---
+import { tv } from "tailwind-variants";
+
+const commandSeparator = tv({
+  base: "-mx-1 h-px bg-border",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={commandSeparator({ class: className })} role="separator" {...rest}></div>

package/src/command/CommandShortcut.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const commandShortcut = tv({
+  base: "ml-auto text-xs tracking-widest text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span class={commandShortcut({ class: className })} {...rest}>
+  <slot />
+</span>