@dogsbay/ui 0.2.0-beta.0

package/src/select/index.ts

@@ -0,0 +1,8 @@
+export { default as Select } from "./Select.astro";
+export { default as SelectTrigger } from "./SelectTrigger.astro";
+export { default as SelectValue } from "./SelectValue.astro";
+export { default as SelectContent } from "./SelectContent.astro";
+export { default as SelectItem } from "./SelectItem.astro";
+export { default as SelectGroup } from "./SelectGroup.astro";
+export { default as SelectLabel } from "./SelectLabel.astro";
+export { default as SelectSeparator } from "./SelectSeparator.astro";

package/src/select/select.ts

@@ -0,0 +1,381 @@
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { createPortal } from "@dogsbay/primitives/portal";
+import { setupFloating } from "@dogsbay/primitives/floating";
+import { Typeahead } from "@dogsbay/primitives/typeahead";
+
+interface SelectInstance {
+  root: HTMLElement;
+  trigger: HTMLElement;
+  content: HTMLElement;
+  valueEl: HTMLElement | null;
+  items: HTMLElement[];
+  hiddenInput: HTMLInputElement | null;
+  dismiss: DismissController;
+  typeahead: Typeahead;
+  cleanupPortal: (() => void) | null;
+  cleanupFloating: (() => void) | null;
+  open: boolean;
+  value: string;
+  highlightedIndex: number;
+  placeholder: string;
+}
+
+const instances = new WeakMap<HTMLElement, SelectInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function getEnabledItems(items: HTMLElement[]): HTMLElement[] {
+  return items.filter((item) => item.getAttribute("aria-disabled") !== "true");
+}
+
+function initSelect(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const trigger = root.querySelector(
+    "[data-part='trigger']",
+  ) as HTMLElement | null;
+  const content = root.querySelector(
+    "[data-part='content']",
+  ) as HTMLElement | null;
+  const valueEl = root.querySelector(
+    "[data-part='value']",
+  ) as HTMLElement | null;
+
+  if (!trigger || !content) return;
+
+  const items = Array.from(
+    content.querySelectorAll("[data-part='item']"),
+  ) as HTMLElement[];
+  const name = root.dataset.name;
+  const defaultValue = root.dataset.defaultValue || "";
+  const required = root.hasAttribute("data-required");
+  const placeholder = valueEl?.dataset.placeholder || "Select...";
+
+  // Generate IDs
+  const selectId = uniqueId("base-select");
+  const contentId = content.id || `${selectId}-listbox`;
+  content.id = contentId;
+  trigger.setAttribute("aria-controls", contentId);
+
+  items.forEach((item, i) => {
+    const itemId = item.id || `${selectId}-item-${i}`;
+    item.id = itemId;
+  });
+
+  // Link groups to their labels
+  content.querySelectorAll("[data-part='group']").forEach((group) => {
+    const label = group.querySelector("[data-part='label']") as HTMLElement;
+    if (label) {
+      const labelId = label.id || uniqueId("base-select-label");
+      label.id = labelId;
+      (group as HTMLElement).setAttribute("aria-labelledby", labelId);
+    }
+  });
+
+  // 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 = defaultValue;
+    if (required) hiddenInput.required = true;
+    root.appendChild(hiddenInput);
+  }
+
+  const typeahead = new Typeahead({
+    onMatch: (index) => {
+      const enabledItems = getEnabledItems(items);
+      if (index < enabledItems.length) {
+        const actualIndex = items.indexOf(enabledItems[index]);
+        highlightItem(root, actualIndex);
+      }
+    },
+    getItemText: (i) => {
+      const enabledItems = getEnabledItems(items);
+      return enabledItems[i]?.textContent?.trim() || "";
+    },
+    getItemCount: () => getEnabledItems(items).length,
+  });
+
+  const instance: SelectInstance = {
+    root,
+    trigger,
+    content,
+    valueEl,
+    items,
+    hiddenInput,
+    dismiss: new DismissController(content, {
+      onDismiss: () => closeSelect(root),
+    }),
+    typeahead,
+    cleanupPortal: null,
+    cleanupFloating: null,
+    open: false,
+    value: "",
+    highlightedIndex: -1,
+    placeholder,
+  };
+
+  instances.set(root, instance);
+
+  // Trigger click
+  trigger.addEventListener("click", () => {
+    if (instance.open) {
+      closeSelect(root);
+    } else {
+      openSelect(root);
+    }
+  });
+
+  // All keyboard handling on the trigger (focus stays here in virtual focus pattern)
+  trigger.addEventListener("keydown", (e) => {
+    if (!instance.open) {
+      // Closed: open on ArrowDown/ArrowUp/Enter/Space
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openSelect(root);
+        const enabledItems = getEnabledItems(items);
+        if (enabledItems.length > 0) {
+          const idx =
+            e.key === "ArrowDown"
+              ? items.indexOf(enabledItems[0])
+              : items.indexOf(enabledItems[enabledItems.length - 1]);
+          highlightItem(root, idx);
+        }
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        openSelect(root);
+      }
+      return;
+    }
+
+    // Open: navigate and select
+    const enabledItems = getEnabledItems(items);
+    if (enabledItems.length === 0) return;
+
+    const currentHighlighted =
+      instance.highlightedIndex >= 0 ? items[instance.highlightedIndex] : null;
+    const currentEnabledIndex = currentHighlighted
+      ? enabledItems.indexOf(currentHighlighted)
+      : -1;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const nextIdx =
+        currentEnabledIndex < enabledItems.length - 1
+          ? currentEnabledIndex + 1
+          : 0;
+      highlightItem(root, items.indexOf(enabledItems[nextIdx]));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prevIdx =
+        currentEnabledIndex > 0
+          ? currentEnabledIndex - 1
+          : enabledItems.length - 1;
+      highlightItem(root, items.indexOf(enabledItems[prevIdx]));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      highlightItem(root, items.indexOf(enabledItems[0]));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      highlightItem(root, items.indexOf(enabledItems[enabledItems.length - 1]));
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (instance.highlightedIndex >= 0) {
+        selectItem(root, items[instance.highlightedIndex]);
+      }
+      closeSelect(root);
+    } else if (e.key === "Tab") {
+      closeSelect(root);
+    } else {
+      typeahead.handle(e.key);
+    }
+  });
+
+  // Item click
+  items.forEach((item) => {
+    item.addEventListener("click", () => {
+      if (item.getAttribute("aria-disabled") === "true") return;
+      selectItem(root, item);
+      closeSelect(root);
+    });
+
+    item.addEventListener("pointerenter", () => {
+      if (item.getAttribute("aria-disabled") === "true") return;
+      highlightItem(root, items.indexOf(item));
+    });
+  });
+
+  // Set initial value
+  if (defaultValue) {
+    const defaultItem = items.find(
+      (item) => item.dataset.value === defaultValue,
+    );
+    if (defaultItem) {
+      selectItem(root, defaultItem);
+    }
+  }
+}
+
+function openSelect(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || instance.open) return;
+  instance.open = true;
+
+  // Portal
+  instance.cleanupPortal = createPortal(instance.content, instance.content.id);
+
+  // Show
+  instance.content.hidden = false;
+  instance.content.setAttribute("data-state", "open");
+  instance.trigger.setAttribute("aria-expanded", "true");
+  instance.root.setAttribute("data-state", "open");
+
+  // Position
+  instance.cleanupFloating = setupFloating(instance.trigger, instance.content, {
+    placement: "bottom-start",
+    offset: 4,
+    matchWidth: true,
+  });
+
+  // Highlight selected item or first item
+  const selectedItem = instance.items.find(
+    (item) => item.dataset.value === instance.value,
+  );
+  const enabledItems = getEnabledItems(instance.items);
+  if (selectedItem && selectedItem.getAttribute("aria-disabled") !== "true") {
+    highlightItem(root, instance.items.indexOf(selectedItem));
+  } else if (enabledItems.length > 0) {
+    highlightItem(root, instance.items.indexOf(enabledItems[0]));
+  }
+
+  // Dismiss
+  instance.dismiss.activate();
+
+  // Keep focus on trigger (virtual focus pattern)
+  instance.trigger.focus();
+
+  // Reset typeahead
+  instance.typeahead.reset();
+}
+
+function closeSelect(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || !instance.open) return;
+  instance.open = false;
+
+  instance.dismiss.deactivate();
+
+  // Update state
+  instance.content.setAttribute("data-state", "closed");
+  instance.trigger.setAttribute("aria-expanded", "false");
+  instance.trigger.removeAttribute("aria-activedescendant");
+  instance.root.removeAttribute("data-state");
+
+  // Clear highlights
+  instance.items.forEach((item) => {
+    item.removeAttribute("data-highlighted");
+  });
+  instance.highlightedIndex = -1;
+
+  // Hide and cleanup
+  instance.content.hidden = true;
+  if (instance.cleanupFloating) {
+    instance.cleanupFloating();
+    instance.cleanupFloating = null;
+  }
+  if (instance.cleanupPortal) {
+    instance.cleanupPortal();
+    instance.cleanupPortal = null;
+  }
+
+  // Return focus to trigger
+  instance.trigger.focus();
+
+  // Reset typeahead
+  instance.typeahead.reset();
+}
+
+function highlightItem(root: HTMLElement, index: number) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  if (index < 0 || index >= instance.items.length) return;
+
+  // Clear previous highlight
+  if (instance.highlightedIndex >= 0) {
+    instance.items[instance.highlightedIndex].removeAttribute(
+      "data-highlighted",
+    );
+  }
+
+  // Set new highlight
+  instance.highlightedIndex = index;
+  const item = instance.items[index];
+  item.setAttribute("data-highlighted", "");
+
+  // Virtual focus — tell screen readers which item is active
+  instance.trigger.setAttribute("aria-activedescendant", item.id);
+
+  // Scroll into view within the dropdown container only
+  const container = instance.content;
+  const itemTop = item.offsetTop;
+  const itemBottom = itemTop + item.offsetHeight;
+  if (itemTop < container.scrollTop) {
+    container.scrollTop = itemTop;
+  } else if (itemBottom > container.scrollTop + container.clientHeight) {
+    container.scrollTop = itemBottom - container.clientHeight;
+  }
+}
+
+function selectItem(root: HTMLElement, item: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  if (item.getAttribute("aria-disabled") === "true") return;
+
+  const value = item.dataset.value || "";
+  instance.value = value;
+
+  // Update aria-selected on all items
+  instance.items.forEach((i) => {
+    i.setAttribute("aria-selected", i === item ? "true" : "false");
+  });
+
+  // Update display value
+  if (instance.valueEl) {
+    instance.valueEl.textContent = item.textContent?.trim() || "";
+    instance.valueEl.removeAttribute("data-placeholder");
+  }
+
+  // Update hidden input
+  if (instance.hiddenInput) {
+    instance.hiddenInput.value = value;
+  }
+
+  // Dispatch change event
+  root.dispatchEvent(
+    new CustomEvent("base-select:change", {
+      detail: { value },
+      bubbles: true,
+    }),
+  );
+}
+
+// Auto-initialize
+function init() {
+  document.querySelectorAll("[data-component='select']").forEach((el) => {
+    initSelect(el as HTMLElement);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initSelect, openSelect, closeSelect };

package/src/separator/Separator.astro

@@ -0,0 +1,35 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const separator = tv({
+  base: "shrink-0 bg-border",
+  variants: {
+    orientation: {
+      horizontal: "h-[1px] w-full",
+      vertical: "w-[1px] self-stretch",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+type SeparatorVariants = VariantProps<typeof separator>;
+
+interface Props {
+  orientation?: SeparatorVariants["orientation"];
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { orientation = "horizontal", class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={separator({ orientation, class: className })}
+  role="separator"
+  aria-orientation={orientation}
+  data-orientation={orientation}
+  {...rest}
+>
+</div>

package/src/separator/index.ts

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

package/src/sheet/Sheet.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={className} data-component="sheet" {...rest}>
+  <slot />
+</div>

package/src/sheet/SheetClose.astro

@@ -0,0 +1,35 @@
+---
+import { tv } from "tailwind-variants";
+
+const sheetClose = tv({
+  base: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+});
+
+interface Props {
+  asChild?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { asChild = false, class: className, ...rest } = Astro.props;
+---
+
+{
+  asChild ? (
+    <span data-part="close" data-as-child>
+      <slot />
+    </span>
+  ) : (
+    <button
+      class={sheetClose({ class: className })}
+      data-part="close"
+      type="button"
+      aria-label="Close"
+      {...rest}
+    >
+      <slot>
+        <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" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+      </slot>
+    </button>
+  )
+}

package/src/sheet/SheetContent.astro

@@ -0,0 +1,52 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const sheetBackdrop = tv({
+  base: "fixed inset-0 z-50 bg-black/80",
+});
+
+const sheetContent = tv({
+  base: "fixed z-[51] gap-4 bg-background p-6 shadow-lg transition-transform",
+  variants: {
+    side: {
+      top: "inset-x-0 top-0 border-b",
+      bottom: "inset-x-0 bottom-0 border-t",
+      left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+      right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+    },
+  },
+  defaultVariants: {
+    side: "right",
+  },
+});
+
+type SheetContentVariants = VariantProps<typeof sheetContent>;
+
+interface Props {
+  side?: SheetContentVariants["side"];
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { side = "right", class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={sheetBackdrop()}
+  data-part="backdrop"
+  data-state="closed"
+  hidden
+>
+</div>
+<div
+  class={sheetContent({ side, class: className })}
+  data-part="content"
+  data-side={side}
+  role="dialog"
+  aria-modal="true"
+  data-state="closed"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/sheet/SheetDescription.astro

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

package/src/sheet/SheetFooter.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sheetFooter = tv({
+  base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sheetFooter({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/sheet/SheetHeader.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sheetHeader = tv({
+  base: "flex flex-col space-y-2 text-center sm:text-left",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sheetHeader({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/sheet/SheetTitle.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sheetTitle = tv({
+  base: "text-lg font-semibold text-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<h2 class={sheetTitle({ class: className })} data-part="title" {...rest}>
+  <slot />
+</h2>

package/src/sheet/SheetTrigger.astro

@@ -0,0 +1,32 @@
+---
+import { tv } from "tailwind-variants";
+
+const sheetTrigger = tv({
+  base: "inline-flex items-center justify-center",
+});
+
+interface Props {
+  asChild?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { asChild = false, class: className, ...rest } = Astro.props;
+---
+
+{
+  asChild ? (
+    <span data-part="trigger" data-as-child>
+      <slot />
+    </span>
+  ) : (
+    <button
+      class={sheetTrigger({ class: className })}
+      data-part="trigger"
+      type="button"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/sheet/index.ts

@@ -0,0 +1,8 @@
+export { default as Sheet } from "./Sheet.astro";
+export { default as SheetTrigger } from "./SheetTrigger.astro";
+export { default as SheetContent } from "./SheetContent.astro";
+export { default as SheetHeader } from "./SheetHeader.astro";
+export { default as SheetFooter } from "./SheetFooter.astro";
+export { default as SheetTitle } from "./SheetTitle.astro";
+export { default as SheetDescription } from "./SheetDescription.astro";
+export { default as SheetClose } from "./SheetClose.astro";