@dogsbay/ui 0.2.0-beta.0

package/src/sheet/sheet.ts

@@ -0,0 +1,173 @@
+import { ScrollLock } from "@dogsbay/primitives/scroll-lock";
+import { FocusTrap } from "@dogsbay/primitives/focus-trap";
+import { markOthersInert } from "@dogsbay/primitives/inert";
+import { createPortal } from "@dogsbay/primitives/portal";
+
+interface SheetInstance {
+  root: HTMLElement;
+  content: HTMLElement;
+  backdrop: HTMLElement;
+  focusTrap: FocusTrap;
+  cleanupPortal: (() => void) | null;
+  cleanupInert: (() => void) | null;
+  open: boolean;
+  openedBy: HTMLElement | null;
+}
+
+const instances = new WeakMap<HTMLElement, SheetInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function ownParts(root: HTMLElement, selector: string): HTMLElement[] {
+  return Array.from(root.querySelectorAll(selector)).filter(
+    (el) => el.closest("[data-component='sheet']") === root,
+  ) as HTMLElement[];
+}
+
+function initSheet(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const content = ownParts(root, "[data-part='content']")[0] as HTMLElement | undefined;
+  const backdrop = ownParts(root, "[data-part='backdrop']")[0] as HTMLElement | undefined;
+
+  if (!content) return;
+
+  // Generate IDs
+  const sheetId = uniqueId("base-sheet");
+  if (!content.id) content.id = `${sheetId}-content`;
+
+  // Link title for aria-labelledby
+  const title = ownParts(root, "[data-part='title']")[0] as HTMLElement | undefined;
+  if (title) {
+    if (!title.id) title.id = `${sheetId}-title`;
+    content.setAttribute("aria-labelledby", title.id);
+  }
+
+  const instance: SheetInstance = {
+    root,
+    content,
+    backdrop: backdrop!,
+    focusTrap: new FocusTrap(content),
+    cleanupPortal: null,
+    cleanupInert: null,
+    open: false,
+    openedBy: null,
+  };
+
+  instances.set(root, instance);
+
+  // Escape key — use capture phase to run before other handlers
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && instance.open) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      closeSheet(root);
+    }
+  }, true);
+
+  // Bind triggers
+  ownParts(root, "[data-part='trigger']").forEach((trigger) => {
+    const actualTrigger = trigger.hasAttribute("data-as-child")
+      ? (trigger.firstElementChild as HTMLElement) || trigger
+      : trigger;
+
+    actualTrigger.addEventListener("click", () => {
+      instance.openedBy = actualTrigger;
+      openSheet(root);
+    });
+  });
+
+  // Bind close buttons
+  ownParts(root, "[data-part='close']").forEach((close) => {
+    const actualClose = close.hasAttribute("data-as-child")
+      ? (close.firstElementChild as HTMLElement) || close
+      : close;
+
+    actualClose.addEventListener("click", () => closeSheet(root));
+  });
+
+  // Backdrop click
+  if (backdrop) {
+    backdrop.addEventListener("click", () => closeSheet(root));
+  }
+
+}
+
+function openSheet(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || instance.open) return;
+  instance.open = true;
+
+  // Portal
+  instance.cleanupPortal = createPortal(instance.content, instance.content.id);
+  if (instance.backdrop) {
+    createPortal(instance.backdrop, `${instance.content.id}-backdrop`);
+  }
+
+  // Show
+  instance.content.hidden = false;
+  instance.content.setAttribute("data-state", "open");
+  if (instance.backdrop) {
+    instance.backdrop.hidden = false;
+    instance.backdrop.setAttribute("data-state", "open");
+  }
+
+  // Lock scroll
+  ScrollLock.activate();
+
+  // Focus first focusable element
+  requestAnimationFrame(() => {
+    const focusable = instance.content.querySelector(
+      'a, button, input, [tabindex]:not([tabindex="-1"])',
+    ) as HTMLElement | null;
+    focusable?.focus();
+  });
+}
+
+function closeSheet(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || !instance.open) return;
+  instance.open = false;
+
+  // Unlock scroll
+  ScrollLock.deactivate();
+
+  // Hide
+  instance.content.setAttribute("data-state", "closed");
+  instance.content.hidden = true;
+  if (instance.backdrop) {
+    instance.backdrop.setAttribute("data-state", "closed");
+    instance.backdrop.hidden = true;
+  }
+
+  // Cleanup portal
+  if (instance.cleanupPortal) {
+    instance.cleanupPortal();
+    instance.cleanupPortal = null;
+  }
+
+  // Return focus
+  instance.openedBy?.focus();
+  instance.openedBy = null;
+}
+
+// Auto-initialize
+function init() {
+  document
+    .querySelectorAll("[data-component='sheet']")
+    .forEach((el) => {
+      initSheet(el as HTMLElement);
+    });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initSheet, openSheet, closeSheet };

package/src/sidebar/Sidebar.astro

@@ -0,0 +1,113 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarOuter = tv({
+  base: "group peer text-sidebar-foreground max-md:hidden",
+});
+
+const sidebarGap = tv({
+  base: "relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",
+});
+
+const sidebarContainer = tv({
+  base: "fixed inset-y-0 z-10 h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear max-md:hidden md:flex",
+});
+
+const sidebarInner = tv({
+  base: "flex size-full flex-col bg-sidebar",
+});
+
+interface Props {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  defaultOpen?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  defaultOpen = true,
+  class: className,
+  ...rest
+} = Astro.props;
+
+// Determine gap class based on variant
+const isFloatingOrInset = variant === "floating" || variant === "inset";
+const gapIconClass = isFloatingOrInset
+  ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]"
+  : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]";
+
+// Container border/padding based on variant
+const containerVariantClass = isFloatingOrInset
+  ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]"
+  : `group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] ${side === "left" ? "group-data-[side=left]:border-r" : ""} ${side === "right" ? "group-data-[side=right]:border-l" : ""}`;
+
+// Inner variant styling
+const innerVariantClass = isFloatingOrInset
+  ? "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+  : "";
+
+// Side positioning
+const sideClass = side === "left"
+  ? "data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+  : "data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]";
+
+const mobileSideClass = side === "left" ? "left-0" : "right-0";
+---
+
+{collapsible === "none" ? (
+  <div
+    data-component="sidebar"
+    data-collapsible="none"
+    data-side={side}
+    data-variant={variant}
+    data-default-open={String(defaultOpen)}
+    class={`flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground ${className || ""}`}
+    {...rest}
+  >
+    <slot />
+  </div>
+) : (
+  <div
+    data-component="sidebar"
+    data-collapsible={collapsible}
+    data-side={side}
+    data-variant={variant}
+    data-default-open={String(defaultOpen)}
+  >
+    {/* Desktop sidebar */}
+    <div
+      class={sidebarOuter()}
+      data-sidebar-desktop
+      data-state="expanded"
+      data-collapsible=""
+      data-variant={variant}
+      data-side={side}
+    >
+      <div class={`${sidebarGap()} ${gapIconClass}`} />
+      <div
+        class={`${sidebarContainer()} ${containerVariantClass} ${sideClass} ${className || ""}`}
+        data-side={side}
+        {...rest}
+      >
+        <div class={`${sidebarInner()} ${innerVariantClass}`} data-sidebar="sidebar-inner">
+          <slot />
+        </div>
+      </div>
+    </div>
+
+    {/* Mobile backdrop + sidebar shell (content moved here by JS) */}
+    <div class="fixed inset-0 z-50 bg-black/80" data-sidebar-mobile-backdrop hidden></div>
+    <div
+      class={`fixed inset-y-0 z-50 flex h-svh w-[18rem] flex-col bg-sidebar p-0 text-sidebar-foreground ${mobileSideClass}`}
+      data-sidebar-mobile
+      data-state="closed"
+      hidden
+    >
+    </div>
+  </div>
+)}

package/src/sidebar/SidebarContent.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarContent = tv({
+  base: "flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarContent({ class: className })} data-sidebar="content" {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarFooter.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarFooter = tv({
+  base: "flex flex-col gap-2 p-2",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarFooter({ class: className })} data-sidebar="footer" {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarGroup.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarGroup = tv({
+  base: "relative flex w-full min-w-0 flex-col p-2",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarGroup({ class: className })} data-sidebar="group" {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarGroupContent.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarGroupContent = tv({
+  base: "w-full text-sm",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarGroupContent({ class: className })} data-sidebar="group-content" {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarGroupLabel.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarGroupLabel = tv({
+  base: "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarGroupLabel({ class: className })} data-sidebar="group-label" {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarHeader.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarHeader = tv({
+  base: "flex flex-col gap-2 p-2",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarHeader({ class: className })} data-sidebar="header" {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarInset.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarInset = tv({
+  base: "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarInset({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarMenu.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarMenu = tv({
+  base: "flex w-full min-w-0 flex-col gap-0",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul class={sidebarMenu({ class: className })} data-sidebar="menu" {...rest}>
+  <slot />
+</ul>

package/src/sidebar/SidebarMenuBadge.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarMenuBadge = tv({
+  base: "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-[active]/menu-button:text-sidebar-accent-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sidebarMenuBadge({ class: className })} data-sidebar="menu-badge" {...rest}>
+  <slot />
+</div>

package/src/sidebar/SidebarMenuButton.astro

@@ -0,0 +1,71 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const sidebarMenuButton = tv({
+  base: "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active]:bg-sidebar-accent data-[active]:font-medium data-[active]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2",
+  variants: {
+    variant: {
+      default: "",
+      outline:
+        "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+    },
+    size: {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type MenuButtonVariants = VariantProps<typeof sidebarMenuButton>;
+
+interface Props {
+  variant?: MenuButtonVariants["variant"];
+  size?: MenuButtonVariants["size"];
+  isActive?: boolean;
+  href?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  variant = "default",
+  size = "default",
+  isActive = false,
+  href,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = sidebarMenuButton({ variant, size, class: className });
+---
+
+{
+  href ? (
+    <a
+      class={classes}
+      href={href}
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive || undefined}
+      {...rest}
+    >
+      <slot />
+    </a>
+  ) : (
+    <button
+      class={classes}
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive || undefined}
+      type="button"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/sidebar/SidebarMenuItem.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarMenuItem = tv({
+  base: "group/menu-item relative",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li class={sidebarMenuItem({ class: className })} data-sidebar="menu-item" {...rest}>
+  <slot />
+</li>

package/src/sidebar/SidebarMenuSub.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarMenuSub = tv({
+  base: "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul class={sidebarMenuSub({ class: className })} data-sidebar="menu-sub" {...rest}>
+  <slot />
+</ul>

package/src/sidebar/SidebarMenuSubButton.astro

@@ -0,0 +1,45 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const sidebarMenuSubButton = tv({
+  base: "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden",
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+type SubButtonVariants = VariantProps<typeof sidebarMenuSubButton>;
+
+interface Props {
+  size?: SubButtonVariants["size"];
+  isActive?: boolean;
+  href?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  size = "md",
+  isActive = false,
+  href,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<a
+  class={sidebarMenuSubButton({ size, class: className })}
+  href={href || "#"}
+  data-sidebar="menu-sub-button"
+  data-size={size}
+  data-active={isActive || undefined}
+  {...rest}
+>
+  <slot />
+</a>

package/src/sidebar/SidebarMenuSubItem.astro

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