@nuykon/basecoat-react 0.0.0-stage → 1.0.1

package/dist/index.js

@@ -0,0 +1,2328 @@
+'use client';
+"use client";
+
+// src/primitives.tsx
+import {
+  cloneElement,
+  createElement,
+  forwardRef,
+  useEffect,
+  useRef,
+  isValidElement
+} from "react";
+
+// ../core/src/chart.ts
+function attachCanvasChart(canvas, config) {
+  const doc = canvas.ownerDocument, win = doc.defaultView, ctx = canvas.getContext("2d");
+  if (!ctx) return () => {
+  };
+  const data = config.data ?? [], series = Object.entries(config.series ?? {}), labelKey = config.labelKey ?? "label";
+  const color = (value) => value.startsWith("var(") ? win.getComputedStyle(canvas).getPropertyValue(value.slice(4, -1)).trim() || "#888" : value;
+  const legend = doc.createElement("ul");
+  legend.className = "chart-legend";
+  if (config.legend) {
+    for (const [index, [key, options]] of series.entries()) {
+      const item = doc.createElement("li"), content = doc.createElement("span"), indicator = doc.createElement("span");
+      content.className = "chart-legend-item";
+      indicator.className = "chart-legend-indicator";
+      indicator.style.setProperty(
+        "--chart-indicator-color",
+        options.color ?? `var(--chart-${index + 1})`
+      );
+      content.append(indicator, doc.createTextNode(options.label ?? key));
+      item.append(content);
+      legend.append(item);
+    }
+    canvas.after(legend);
+  }
+  canvas.style.width = "100%";
+  canvas.style.aspectRatio = "16 / 9";
+  canvas.style.display = "block";
+  const draw = () => {
+    const width = Math.max(200, canvas.parentElement?.clientWidth ?? 400), height = width * 9 / 16, ratio = win.devicePixelRatio || 1;
+    canvas.width = Math.round(width * ratio);
+    canvas.height = Math.round(height * ratio);
+    canvas.style.height = `${height}px`;
+    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    const padding = { left: 30, top: 10, right: 10, bottom: 30 }, w = width - padding.left - padding.right, h = height - padding.top - padding.bottom;
+    const max = Math.max(
+      1,
+      ...data.map(
+        (row) => config.options?.scales?.y?.stacked ? series.reduce((sum, [key]) => sum + Number(row[key] ?? 0), 0) : Math.max(...series.map(([key]) => Number(row[key] ?? 0)))
+      )
+    );
+    const x = (index) => padding.left + index / Math.max(1, data.length - 1) * w, y = (value) => padding.top + h - value / max * h;
+    ctx.font = '12px "Geist Sans",system-ui';
+    ctx.fillStyle = color("var(--muted-foreground)");
+    ctx.strokeStyle = color("var(--border)");
+    ctx.lineWidth = 0.5;
+    if (config.type !== "doughnut" && config.type !== "radar") {
+      for (let index = 0; index <= 4; index++) {
+        const top = padding.top + index * h / 4;
+        ctx.beginPath();
+        ctx.moveTo(padding.left, top);
+        ctx.lineTo(width - padding.right, top);
+        ctx.stroke();
+        ctx.fillText(String(Math.round(max * (4 - index) / 4)), 0, top + 4);
+      }
+      for (let index = 0; index < data.length; index++)
+        if (index % Math.max(1, Math.ceil(data.length / 6)) === 0)
+          ctx.fillText(String(data[index][labelKey] ?? ""), x(index) - 10, height - 8);
+    }
+    if (config.type === "doughnut") {
+      const key = series[0]?.[0] ?? "value", values = data.map((row) => Number(row[key] ?? 0)), total = values.reduce((a, b) => a + b, 0) || 1, radius = Math.min(w, h) * 0.45, cx2 = width / 2, cy = height / 2;
+      let start = -Math.PI / 2;
+      values.forEach((value, index) => {
+        const end = start + value / total * Math.PI * 2;
+        ctx.beginPath();
+        ctx.arc(cx2, cy, radius, start, end);
+        ctx.arc(cx2, cy, radius * 0.62, end, start, true);
+        ctx.closePath();
+        ctx.fillStyle = color(`var(--chart-${index % 5 + 1})`);
+        ctx.fill();
+        start = end;
+      });
+    } else if (config.type === "radar") {
+      const radius = Math.min(w, h) * 0.4, cx2 = width / 2, cy = height / 2;
+      const point = (index, scale) => {
+        const angle = index / Math.max(1, data.length) * Math.PI * 2 - Math.PI / 2;
+        return [
+          cx2 + Math.cos(angle) * radius * scale,
+          cy + Math.sin(angle) * radius * scale
+        ];
+      };
+      for (let ring = 1; ring <= 4; ring++) {
+        ctx.beginPath();
+        data.forEach((_, i) => {
+          const [x2, y2] = point(i, ring / 4);
+          if (i === 0) ctx.moveTo(x2, y2);
+          else ctx.lineTo(x2, y2);
+        });
+        ctx.closePath();
+        ctx.stroke();
+      }
+      series.forEach(([key, options], index) => {
+        ctx.beginPath();
+        data.forEach((row, i) => {
+          const [x2, y2] = point(i, Number(row[key] ?? 0) / max);
+          if (i === 0) ctx.moveTo(x2, y2);
+          else ctx.lineTo(x2, y2);
+        });
+        ctx.closePath();
+        ctx.strokeStyle = color(options.color ?? `var(--chart-${index + 1})`);
+        ctx.stroke();
+        ctx.globalAlpha = 0.2;
+        ctx.fillStyle = ctx.strokeStyle;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      });
+      ctx.fillStyle = color("var(--muted-foreground)");
+      data.forEach((row, i) => {
+        const [x2, y2] = point(i, 1.15);
+        ctx.fillText(String(row[labelKey] ?? ""), x2 - 15, y2);
+      });
+    } else {
+      const stacks2 = data.map(() => 0);
+      series.forEach(([key, options], seriesIndex) => {
+        const fill = color(options.color ?? `var(--chart-${seriesIndex + 1})`);
+        ctx.strokeStyle = fill;
+        ctx.fillStyle = fill;
+        ctx.lineWidth = 1.5;
+        if (config.type === "bar")
+          data.forEach((row, index) => {
+            const value = Number(row[key] ?? 0), stacked = config.options?.scales?.y?.stacked, group = w / Math.max(1, data.length), barWidth = group * 0.65 / (stacked ? 1 : series.length), left = padding.left + index * group + group * 0.15 + (stacked ? 0 : seriesIndex * barWidth), base = stacks2[index];
+            ctx.beginPath();
+            ctx.roundRect(
+              left,
+              y(value + base),
+              Math.max(1, barWidth - 2),
+              Math.max(0, y(base) - y(value + base)),
+              3
+            );
+            ctx.fill();
+            if (stacked) stacks2[index] += value;
+          });
+        else {
+          ctx.beginPath();
+          data.forEach((row, index) => {
+            const top = y(Number(row[key] ?? 0));
+            if (index === 0) ctx.moveTo(x(index), top);
+            else if (options.dataset?.stepped) {
+              ctx.lineTo(x(index), y(Number(data[index - 1][key] ?? 0)));
+              ctx.lineTo(x(index), top);
+            } else ctx.lineTo(x(index), top);
+          });
+          ctx.stroke();
+          if (options.dataset?.fill || options.surface === "gradient") {
+            ctx.lineTo(x(data.length - 1), y(0));
+            ctx.lineTo(x(0), y(0));
+            ctx.closePath();
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, fill);
+            gradient.addColorStop(1, "transparent");
+            ctx.globalAlpha = 0.3;
+            ctx.fillStyle = gradient;
+            ctx.fill();
+            ctx.globalAlpha = 1;
+          }
+        }
+      });
+    }
+  };
+  const resize = new win.ResizeObserver(draw), themes = new win.MutationObserver(draw);
+  resize.observe(canvas.parentElement ?? canvas);
+  themes.observe(doc.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-style-variant"]
+  });
+  doc.addEventListener("basecoat:stylechange", draw);
+  draw();
+  return () => {
+    resize.disconnect();
+    themes.disconnect();
+    legend.remove();
+    doc.removeEventListener("basecoat:stylechange", draw);
+  };
+}
+
+// ../core/src/widgets.ts
+function attachWidget(root) {
+  const abort = new AbortController(), signal = abort.signal, cleanups = [];
+  const on = (element, name, fn) => element?.addEventListener(name, fn, { signal });
+  const emit = (detail) => root.dispatchEvent(new CustomEvent("basecoat:change", { bubbles: true, detail }));
+  if (root instanceof HTMLCanvasElement && root.dataset.chartConfig)
+    cleanups.push(attachCanvasChart(root, JSON.parse(root.dataset.chartConfig)));
+  if (root.classList.contains("sidebar")) {
+    const media = root.ownerDocument.defaultView.matchMedia("(min-width: 768px)");
+    root.dataset.sidebarInitialized = "true";
+    const set = (open) => root.setAttribute("aria-hidden", String(!open));
+    const toggle = () => set(root.getAttribute("aria-hidden") === "true");
+    const sidebar = root;
+    sidebar.toggle = toggle;
+    set(media.matches);
+    on(media, "change", () => set(media.matches));
+    on(root, "click", (event) => {
+      if (event.target === root && !media.matches) set(false);
+    });
+    on(root.ownerDocument, "keydown", (event) => {
+      if (event.key === "Escape" && !media.matches) set(false);
+    });
+    cleanups.push(() => {
+      delete sidebar.toggle;
+      delete root.dataset.sidebarInitialized;
+    });
+  }
+  if (root.classList.contains("toaster")) {
+    const timers = /* @__PURE__ */ new Set();
+    const toast = (message) => {
+      const item = root.ownerDocument.createElement("div");
+      item.className = "toast";
+      item.setAttribute("role", "status");
+      const content = root.ownerDocument.createElement("div");
+      content.className = "toast-content";
+      const section = root.ownerDocument.createElement("section"), heading = root.ownerDocument.createElement("h2");
+      heading.textContent = message.title ?? "";
+      section.append(heading);
+      if (message.description) {
+        const description = root.ownerDocument.createElement("p");
+        description.textContent = message.description;
+        section.append(description);
+      }
+      const footer = root.ownerDocument.createElement("footer"), close = root.ownerDocument.createElement("button");
+      close.type = "button";
+      close.className = "btn";
+      close.dataset.variant = "outline";
+      close.dataset.toastCancel = "";
+      close.textContent = message.cancel?.label ?? "Dismiss";
+      close.addEventListener("click", () => item.remove(), { signal });
+      footer.append(close);
+      if (message.action) {
+        const action = root.ownerDocument.createElement("button");
+        action.type = "button";
+        action.className = "btn";
+        action.textContent = message.action.label ?? "Action";
+        action.addEventListener(
+          "click",
+          () => {
+            message.action?.onclick?.();
+            item.remove();
+          },
+          { signal }
+        );
+        footer.append(action);
+      }
+      content.append(section, footer);
+      item.append(content);
+      root.append(item);
+      if ((message.duration ?? 5e3) > 0) {
+        const timer = setTimeout(() => {
+          item.remove();
+          timers.delete(timer);
+        }, message.duration ?? 5e3);
+        timers.add(timer);
+      }
+      return item;
+    };
+    root.toast = toast;
+    on(root, "click", (event) => {
+      const button = event.target.closest("[data-toast-cancel]");
+      button?.closest(".toast")?.remove();
+    });
+    cleanups.push(() => {
+      timers.forEach(clearTimeout);
+      delete root.toast;
+    });
+  }
+  if (root.classList.contains("tabs")) {
+    const tabs = [...root.querySelectorAll("[role=tab]")].filter(
+      (tab) => tab.closest(".tabs") === root
+    );
+    const set = (target) => {
+      if (target.disabled || target.getAttribute("aria-disabled") === "true") return;
+      for (const tab of tabs) {
+        const active = tab === target;
+        tab.setAttribute("aria-selected", String(active));
+        tab.tabIndex = active ? 0 : -1;
+        const panel = root.ownerDocument.getElementById(tab.getAttribute("aria-controls") ?? "");
+        if (panel) {
+          panel.hidden = !active;
+          panel.setAttribute("aria-selected", String(active));
+        }
+      }
+      emit(target.id);
+    };
+    for (const [index, tab] of tabs.entries()) {
+      on(tab, "click", () => set(tab));
+      on(tab, "keydown", (event) => {
+        const key = event.key, vertical = tab.parentElement?.getAttribute("aria-orientation") === "vertical";
+        if (!(vertical ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"]).includes(key) && !["Home", "End"].includes(key))
+          return;
+        event.preventDefault();
+        const target = tabs[nextIndex(
+          tabs.map((item) => ({
+            disabled: item.disabled || item.getAttribute("aria-disabled") === "true"
+          })),
+          index,
+          key
+        )];
+        target?.focus();
+        if (target) set(target);
+      });
+    }
+  }
+  if (root.classList.contains("accordion")) {
+    const summaries = [...root.querySelectorAll("summary")];
+    on(root, "keydown", (event) => {
+      const index = summaries.indexOf(event.target), key = event.key;
+      if (index >= 0 && ["ArrowUp", "ArrowDown", "Home", "End"].includes(key)) {
+        event.preventDefault();
+        summaries[nextIndex(
+          summaries.map((el) => ({ disabled: el.getAttribute("aria-disabled") === "true" })),
+          index,
+          key
+        )]?.focus();
+      }
+    });
+    on(root, "click", (event) => {
+      const summary = event.target.closest("summary");
+      if (summary?.getAttribute("aria-disabled") === "true" || summary?.parentElement?.getAttribute("aria-disabled") === "true")
+        event.preventDefault();
+    });
+  }
+  const kind = ["select", "combobox", "dropdown-menu", "popover"].find(
+    (kind2) => root.classList.contains(kind2)
+  );
+  if (kind) {
+    const trigger = root.querySelector(
+      ":scope > button, :scope > input[role=combobox], :scope > .input-group input[role=combobox]"
+    ), popup = root.querySelector(":scope > [data-popover]");
+    const search = root.querySelector(
+      "[data-popover] input, input[role=combobox]"
+    );
+    if (trigger && popup) {
+      let open = false, active = -1, disposePosition, disposeLayer;
+      const selector = kind === "dropdown-menu" ? "[role=menuitem], [role=menuitemcheckbox], [role=menuitemradio]" : "[role=option]";
+      const items = () => [...popup.querySelectorAll(selector)].filter(
+        (item) => !item.hidden && item.getAttribute("aria-hidden") !== "true"
+      );
+      const disabled = (item) => item.matches(":disabled") || item.getAttribute("aria-disabled") === "true";
+      const cursor = () => items().map((item) => ({
+        value: item.dataset.value ?? item.id,
+        label: item.textContent?.trim() ?? "",
+        disabled: disabled(item)
+      }));
+      const typeahead = createTypeahead();
+      const highlight = (index) => {
+        active = index;
+        const all = items();
+        for (const [i, item2] of all.entries()) {
+          item2.classList.toggle("active", i === index);
+          if (kind === "dropdown-menu") item2.tabIndex = i === index ? 0 : -1;
+        }
+        const item = all[index];
+        if (item) {
+          if (kind === "dropdown-menu") item.focus();
+          else {
+            const list = popup.querySelector("[role=listbox]");
+            if (list) {
+              list.setAttribute("aria-activedescendant", item.id);
+              scrollWithin(list, item);
+            }
+            search?.setAttribute("aria-activedescendant", item.id);
+          }
+        }
+      };
+      const close = (restore = false) => {
+        if (!open) return;
+        open = false;
+        disposeLayer?.();
+        disposePosition?.();
+        trigger.setAttribute("aria-expanded", "false");
+        popup.setAttribute("aria-hidden", "true");
+        popup.hidden = true;
+        if (restore) trigger.focus();
+      };
+      const show = (last = false) => {
+        if (open || disabled(trigger)) return;
+        open = true;
+        popup.hidden = false;
+        popup.setAttribute("aria-hidden", "false");
+        popup.setAttribute("popover", "manual");
+        popup.classList.add("bc-floating");
+        trigger.setAttribute("aria-expanded", "true");
+        disposePosition = attachFloating(trigger, popup, {
+          side: popup.dataset.side,
+          align: popup.dataset.align,
+          matchWidth: kind === "select" || kind === "combobox"
+        });
+        disposeLayer = dismissableLayer(root.ownerDocument, {
+          elements: () => [trigger, popup],
+          dismiss: (reason) => close(reason === "escape")
+        });
+        const list = popup.querySelector("[role=listbox],[role=menu]");
+        if (list) {
+          list.tabIndex = -1;
+          (search ?? list).focus();
+        }
+        if (kind === "popover") focusFirst(popup);
+        else highlight(nextIndex(cursor(), -1, last ? "End" : "Home"));
+      };
+      const choose = (item) => {
+        if (disabled(item)) return;
+        if (kind === "select" || kind === "combobox") {
+          const multiple = popup.querySelector("[aria-multiselectable=true]") !== null;
+          if (!multiple)
+            items().forEach(
+              (option) => option.setAttribute("aria-selected", String(option === item))
+            );
+          else
+            item.setAttribute(
+              "aria-selected",
+              String(item.getAttribute("aria-selected") !== "true")
+            );
+          const selected = items().filter(
+            (option) => option.getAttribute("aria-selected") === "true"
+          ), values = selected.map(
+            (option) => option.dataset.value ?? option.textContent?.trim() ?? ""
+          );
+          if (trigger instanceof HTMLInputElement) trigger.value = item.textContent?.trim() ?? "";
+          else {
+            const label = trigger.querySelector("span");
+            if (label)
+              label.textContent = selected.map((option) => option.textContent?.trim()).join(", ");
+          }
+          const hidden = root.querySelector("input[type=hidden]");
+          if (hidden) {
+            hidden.value = multiple ? JSON.stringify(values) : values[0] ?? "";
+            hidden.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          emit(multiple ? values : values[0]);
+          if (!multiple) close(true);
+        } else if (kind === "dropdown-menu") {
+          if (item.getAttribute("role") === "menuitemcheckbox") {
+            item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+            emit(item.id);
+          } else close(true);
+        }
+      };
+      popup.hidden = popup.getAttribute("aria-hidden") !== "false";
+      on(trigger, "click", () => open ? close() : show());
+      on(trigger, "keydown", (event) => {
+        const key = event.key;
+        if (!open && ["ArrowDown", "ArrowUp", "Enter", " "].includes(key)) {
+          event.preventDefault();
+          show(key === "ArrowUp");
+        }
+      });
+      on(popup, "keydown", (event) => {
+        const keyboard = event;
+        if (["ArrowDown", "ArrowUp", "Home", "End"].includes(keyboard.key)) {
+          event.preventDefault();
+          highlight(nextIndex(cursor(), active, keyboard.key));
+        } else if (keyboard.key === "Enter" || !search && keyboard.key === " ") {
+          event.preventDefault();
+          const item = items()[active];
+          if (item) {
+            choose(item);
+            if (item instanceof HTMLAnchorElement) item.click();
+          }
+        } else if (keyboard.key === "Tab") close();
+        else if (!search && keyboard.key.length === 1 && !keyboard.ctrlKey && !keyboard.metaKey) {
+          event.preventDefault();
+          highlight(typeahead(keyboard.key, cursor(), active));
+        }
+      });
+      on(popup, "click", (event) => {
+        const item = event.target.closest(selector);
+        if (item) {
+          if (disabled(item)) event.preventDefault();
+          else choose(item);
+        }
+      });
+      on(popup, "pointermove", (event) => {
+        const pointer = event, item = event.target.closest(selector);
+        if (item && !disabled(item) && (pointer.movementX || pointer.movementY))
+          highlight(items().indexOf(item));
+      });
+      on(search, "input", () => {
+        for (const item of popup.querySelectorAll(selector)) {
+          const hidden = !item.textContent?.toLocaleLowerCase().includes(search.value.toLocaleLowerCase());
+          item.hidden = hidden;
+          item.setAttribute("aria-hidden", String(hidden));
+        }
+        if (!open) show();
+        highlight(nextIndex(cursor(), -1, "Home"));
+      });
+      cleanups.push(() => close());
+    }
+  }
+  if (root.classList.contains("command")) {
+    const input = root.querySelector("input"), list = root.querySelector("[role=menu],[role=listbox]");
+    let active = 0;
+    const items = () => [...list?.querySelectorAll("[role=menuitem],[role=option]") ?? []].filter(
+      (item) => !item.hidden
+    );
+    const refresh = () => {
+      const all = items();
+      all.forEach((item, index) => item.classList.toggle("active", index === active));
+      const current = all[active];
+      if (current) input?.setAttribute("aria-activedescendant", current.id);
+    };
+    on(input, "input", () => {
+      list?.querySelectorAll("[role=menuitem],[role=option]").forEach((item) => {
+        item.hidden = !item.textContent?.toLocaleLowerCase().includes(input.value.toLocaleLowerCase());
+        item.setAttribute("aria-hidden", String(item.hidden));
+      });
+      active = 0;
+      refresh();
+    });
+    on(input, "keydown", (event) => {
+      const key = event.key;
+      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(key)) {
+        event.preventDefault();
+        active = nextIndex(
+          items().map((item) => ({ disabled: item.getAttribute("aria-disabled") === "true" })),
+          active,
+          key
+        );
+        refresh();
+      } else if (key === "Enter") {
+        event.preventDefault();
+        items()[active]?.click();
+      }
+    });
+    root.refresh = refresh;
+  }
+  if (root.matches("input[type=range]")) {
+    const range = root, update = () => range.style.setProperty(
+      "--slider-value",
+      `${percentage(range.valueAsNumber, Number(range.min || 0), Number(range.max || 100))}%`
+    );
+    on(range, "input", update);
+    update();
+  }
+  return () => {
+    abort.abort();
+    cleanups.forEach((cleanup) => cleanup());
+  };
+}
+
+// ../core/src/index.ts
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function percentage(value, min = 0, max = 100) {
+  return Number.isFinite(value) && max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
+}
+function nextIndex(items, current, key, loop = true) {
+  const enabled = items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0);
+  if (!enabled.length) return -1;
+  if (key === "Home") return enabled[0];
+  if (key === "End") return enabled[enabled.length - 1];
+  const direction = key === "ArrowUp" || key === "ArrowLeft" ? -1 : 1;
+  const position = enabled.indexOf(current);
+  if (position < 0) return direction < 0 ? enabled[enabled.length - 1] : enabled[0];
+  const next = position + direction;
+  return enabled[loop ? (next + enabled.length) % enabled.length : Math.min(enabled.length - 1, Math.max(0, next))];
+}
+function createTypeahead() {
+  let buffer = "", last = 0;
+  return (key, items, current) => {
+    const now = Date.now();
+    buffer = now - last > 700 ? key : buffer + key;
+    last = now;
+    const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+    for (let offset = 1; offset <= items.length; offset++) {
+      const index = (current + offset + items.length) % items.length;
+      if (!items[index].disabled && items[index].label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()))
+        return index;
+    }
+    return current;
+  };
+}
+var stacks = /* @__PURE__ */ new WeakMap();
+function dismissableLayer(doc, layer) {
+  let stack = stacks.get(doc);
+  if (!stack) {
+    const layers = [];
+    const pointer = (event) => {
+      const top = layers.at(-1);
+      if (top && !top.elements().some((el) => el && event.composedPath().includes(el)))
+        top.dismiss("outside");
+    };
+    const keyboard = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented && layers.length) {
+        event.preventDefault();
+        event.stopPropagation();
+        layers.at(-1)?.dismiss("escape");
+      }
+    };
+    doc.addEventListener("pointerdown", pointer, true);
+    doc.addEventListener("keydown", keyboard);
+    stack = {
+      layers,
+      dispose: () => {
+        doc.removeEventListener("pointerdown", pointer, true);
+        doc.removeEventListener("keydown", keyboard);
+      }
+    };
+    stacks.set(doc, stack);
+  }
+  stack.layers.push(layer);
+  return () => {
+    const index = stack.layers.indexOf(layer);
+    if (index >= 0) stack.layers.splice(index, 1);
+    if (!stack.layers.length) {
+      stack.dispose();
+      stacks.delete(doc);
+    }
+  };
+}
+function floatingPosition(anchor, popup, width, height, options = {}) {
+  let side = options.side ?? "bottom";
+  const align = options.align ?? "start", offset = options.offset ?? 6, padding = 8;
+  const available = {
+    bottom: height - anchor.bottom,
+    top: anchor.top,
+    right: width - anchor.right,
+    left: anchor.left
+  };
+  const opposite = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  };
+  const required = (side === "top" || side === "bottom" ? popup.height : popup.width) + offset + padding;
+  if (available[side] < required && available[opposite[side]] > available[side])
+    side = opposite[side];
+  const vertical = side === "top" || side === "bottom";
+  let x = vertical ? anchor.left : side === "left" ? anchor.left - popup.width - offset : anchor.right + offset;
+  let y = vertical ? side === "top" ? anchor.top - popup.height - offset : anchor.bottom + offset : anchor.top;
+  if (vertical)
+    x += align === "end" ? anchor.width - popup.width : align === "center" ? (anchor.width - popup.width) / 2 : 0;
+  else
+    y += align === "end" ? anchor.height - popup.height : align === "center" ? (anchor.height - popup.height) / 2 : 0;
+  return {
+    x: Math.max(padding, Math.min(x, width - popup.width - padding)),
+    y: Math.max(padding, Math.min(y, height - popup.height - padding)),
+    side,
+    maxHeight: Math.max(40, available[side] - offset - padding)
+  };
+}
+function attachFloating(anchor, popup, options = {}) {
+  const win = anchor.ownerDocument.defaultView;
+  if (typeof popup.showPopover === "function") popup.showPopover();
+  const update = () => {
+    const rect = anchor.getBoundingClientRect();
+    if (options.matchWidth) popup.style.minWidth = `${rect.width}px`;
+    const viewport = win.visualViewport;
+    const result = floatingPosition(
+      rect,
+      popup.getBoundingClientRect(),
+      viewport?.width ?? win.innerWidth,
+      viewport?.height ?? win.innerHeight,
+      options
+    );
+    Object.assign(popup.style, {
+      left: `${result.x + (viewport?.offsetLeft ?? 0)}px`,
+      top: `${result.y + (viewport?.offsetTop ?? 0)}px`,
+      maxHeight: `${result.maxHeight}px`
+    });
+    popup.dataset.side = result.side;
+  };
+  let frame = 0;
+  const schedule = () => {
+    win.cancelAnimationFrame(frame);
+    frame = win.requestAnimationFrame(update);
+  };
+  const observer = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(schedule) : null;
+  observer?.observe(anchor);
+  observer?.observe(popup);
+  win.addEventListener("resize", schedule);
+  win.addEventListener("scroll", schedule, true);
+  win.visualViewport?.addEventListener("resize", schedule);
+  win.visualViewport?.addEventListener("scroll", schedule);
+  update();
+  return () => {
+    win.cancelAnimationFrame(frame);
+    observer?.disconnect();
+    win.removeEventListener("resize", schedule);
+    win.removeEventListener("scroll", schedule, true);
+    win.visualViewport?.removeEventListener("resize", schedule);
+    win.visualViewport?.removeEventListener("scroll", schedule);
+    if (typeof popup.hidePopover === "function" && popup.matches(":popover-open"))
+      popup.hidePopover();
+  };
+}
+var scrollLocks = /* @__PURE__ */ new WeakMap();
+function lockScroll(doc) {
+  const record = scrollLocks.get(doc) ?? { count: 0, overflow: doc.documentElement.style.overflow };
+  record.count++;
+  scrollLocks.set(doc, record);
+  doc.documentElement.style.overflow = "hidden";
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    if (--record.count === 0) {
+      doc.documentElement.style.overflow = record.overflow;
+      scrollLocks.delete(doc);
+    }
+  };
+}
+function focusFirst(root) {
+  const target = root.querySelector(
+    '[autofocus],button:not(:disabled),[href],input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex="0"]'
+  );
+  (target ?? root).focus({ preventScroll: true });
+}
+function scrollWithin(container, item) {
+  const parent = container.scrollHeight > container.clientHeight ? container : container.parentElement ?? container;
+  const outer = parent.getBoundingClientRect(), inner = item.getBoundingClientRect();
+  if (inner.top < outer.top) parent.scrollTop -= outer.top - inner.top;
+  else if (inner.bottom > outer.bottom) parent.scrollTop += inner.bottom - outer.bottom;
+}
+function formReset(element, reset) {
+  const form = element.closest("form");
+  let timer;
+  const listener = (event) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (!event.defaultPrevented) reset();
+    }, 0);
+  };
+  form?.addEventListener("reset", listener);
+  return () => {
+    clearTimeout(timer);
+    form?.removeEventListener("reset", listener);
+  };
+}
+var primitiveDefinitions = {
+  ChartRoot: ["canvas", "chart-canvas"],
+  SelectRoot: ["div", "select"],
+  ComboboxRoot: ["div", "combobox"],
+  DropdownMenuRoot: ["div", "dropdown-menu"],
+  PopoverRoot: ["div", "popover"],
+  TabsRoot: ["div", "tabs"],
+  AccordionRoot: ["div", "accordion"],
+  CommandRoot: ["div", "command"],
+  SidebarRoot: ["div", "sidebar"],
+  DialogRoot: ["dialog", "dialog"],
+  DrawerRoot: ["dialog", "drawer"],
+  AlertDialogRoot: ["dialog", "alert-dialog"],
+  Button: ["button", "btn"],
+  Badge: ["span", "badge"],
+  Card: ["article", "card"],
+  CardHeader: ["header", ""],
+  CardTitle: ["h3", "card-title"],
+  CardDescription: ["p", ""],
+  CardContent: ["section", ""],
+  CardFooter: ["footer", ""],
+  CardAction: ["div", "card-action"],
+  Alert: ["div", "alert"],
+  AlertTitle: ["h2", ""],
+  AlertDescription: ["section", ""],
+  Avatar: ["span", "avatar"],
+  AvatarImage: ["img", ""],
+  AvatarFallback: ["span", ""],
+  Breadcrumb: ["nav", "breadcrumb"],
+  BreadcrumbList: ["ol", ""],
+  BreadcrumbItem: ["li", ""],
+  BreadcrumbLink: ["a", ""],
+  BreadcrumbSeparator: ["li", ""],
+  ButtonGroup: ["div", "button-group"],
+  Field: ["div", "field"],
+  FieldLabel: ["label", "label"],
+  FieldDescription: ["p", ""],
+  FieldError: ["p", ""],
+  Label: ["label", "label"],
+  Input: ["input", "input"],
+  Textarea: ["textarea", "textarea"],
+  NativeSelect: ["select", "select"],
+  InputGroup: ["div", "input-group"],
+  InputGroupAddon: ["div", ""],
+  Empty: ["div", "empty"],
+  EmptyHeader: ["header", ""],
+  EmptyTitle: ["h3", ""],
+  EmptyDescription: ["p", ""],
+  EmptyContent: ["section", ""],
+  Item: ["div", "item"],
+  ItemContent: ["section", ""],
+  ItemTitle: ["h3", ""],
+  ItemDescription: ["p", ""],
+  ItemActions: ["div", ""],
+  Kbd: ["kbd", "kbd"],
+  ScrollArea: ["div", "scrollbar"],
+  Skeleton: ["div", "skeleton"],
+  Spinner: ["span", "bc-spinner"],
+  Separator: ["hr", ""],
+  Table: ["table", "table"],
+  TableHeader: ["thead", ""],
+  TableBody: ["tbody", ""],
+  TableFooter: ["tfoot", ""],
+  TableRow: ["tr", ""],
+  TableHead: ["th", ""],
+  TableCell: ["td", ""],
+  TableCaption: ["caption", ""],
+  DialogHeader: ["header", ""],
+  DialogTitle: ["h2", ""],
+  DialogDescription: ["p", ""],
+  DialogContent: ["section", ""],
+  DialogFooter: ["footer", ""],
+  SidebarHeader: ["header", ""],
+  SidebarContent: ["section", ""],
+  SidebarFooter: ["footer", ""],
+  SidebarGroup: ["section", ""],
+  SidebarItem: ["a", ""]
+};
+
+// src/primitives.tsx
+function primitive(name, tag) {
+  const Component = forwardRef((props, ref) => {
+    const local = useRef(null);
+    useEffect(
+      () => name.endsWith("Root") && local.current ? attachWidget(local.current) : void 0,
+      [props.as]
+    );
+    const composedRef = (element) => {
+      local.current = element;
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    };
+    const { className, variant, size, asChild, as, children, ...rest } = props;
+    const attributes = {
+      ...rest,
+      ref: composedRef,
+      className: cx(primitiveDefinitions[name][1], className)
+    };
+    if (variant !== void 0) attributes["data-variant"] = variant;
+    if (size !== void 0) attributes["data-size"] = size;
+    if (tag === "button") attributes.type ??= "button";
+    if (name === "Alert") attributes.role ??= "alert";
+    if (name === "Breadcrumb") attributes["aria-label"] ??= "Breadcrumb";
+    if (name === "BreadcrumbSeparator") {
+      attributes["aria-hidden"] = true;
+      attributes.role = "presentation";
+    }
+    if (name === "Skeleton") attributes["aria-hidden"] = true;
+    if (name === "Spinner") {
+      attributes.role ??= "status";
+      attributes["aria-label"] ??= "Loading";
+    }
+    if (name === "FieldError") attributes.role ??= "alert";
+    if (name === "ScrollArea") attributes.style = { overflow: "auto", ...rest.style ?? {} };
+    if (asChild) {
+      if (!isValidElement(children))
+        throw new Error(`${name} with asChild expects a single element.`);
+      const child = children;
+      const merged = {
+        ...attributes,
+        ...child.props,
+        className: cx(attributes.className, child.props.className)
+      };
+      for (const key of Object.keys(attributes)) {
+        if (key.startsWith("on") && typeof attributes[key] === "function" && typeof child.props[key] === "function") {
+          merged[key] = (event) => {
+            child.props[key](event);
+            if (!event.defaultPrevented) attributes[key](event);
+          };
+        }
+      }
+      const childRef = child.props.ref;
+      merged.ref = (element) => {
+        composedRef(element);
+        if (typeof childRef === "function") childRef(element);
+        else if (childRef && typeof childRef === "object")
+          childRef.current = element;
+      };
+      return cloneElement(child, merged);
+    }
+    return createElement(as ?? tag, attributes, children);
+  });
+  Component.displayName = name;
+  return Component;
+}
+
+// src/components/ChartRoot.tsx
+var ChartRoot = /* @__PURE__ */ primitive("ChartRoot", "canvas");
+
+// src/components/SelectRoot.tsx
+var SelectRoot = /* @__PURE__ */ primitive("SelectRoot", "div");
+
+// src/components/ComboboxRoot.tsx
+var ComboboxRoot = /* @__PURE__ */ primitive("ComboboxRoot", "div");
+
+// src/components/DropdownMenuRoot.tsx
+var DropdownMenuRoot = /* @__PURE__ */ primitive("DropdownMenuRoot", "div");
+
+// src/components/PopoverRoot.tsx
+var PopoverRoot = /* @__PURE__ */ primitive("PopoverRoot", "div");
+
+// src/components/TabsRoot.tsx
+var TabsRoot = /* @__PURE__ */ primitive("TabsRoot", "div");
+
+// src/components/AccordionRoot.tsx
+var AccordionRoot = /* @__PURE__ */ primitive("AccordionRoot", "div");
+
+// src/components/CommandRoot.tsx
+var CommandRoot = /* @__PURE__ */ primitive("CommandRoot", "div");
+
+// src/components/SidebarRoot.tsx
+var SidebarRoot = /* @__PURE__ */ primitive("SidebarRoot", "div");
+
+// src/components/DialogRoot.tsx
+var DialogRoot = /* @__PURE__ */ primitive("DialogRoot", "dialog");
+
+// src/components/DrawerRoot.tsx
+var DrawerRoot = /* @__PURE__ */ primitive("DrawerRoot", "dialog");
+
+// src/components/AlertDialogRoot.tsx
+var AlertDialogRoot = /* @__PURE__ */ primitive("AlertDialogRoot", "dialog");
+
+// src/components/Button.tsx
+var Button = /* @__PURE__ */ primitive("Button", "button");
+
+// src/components/Badge.tsx
+var Badge = /* @__PURE__ */ primitive("Badge", "span");
+
+// src/components/Card.tsx
+var Card = /* @__PURE__ */ primitive("Card", "article");
+
+// src/components/CardHeader.tsx
+var CardHeader = /* @__PURE__ */ primitive("CardHeader", "header");
+
+// src/components/CardTitle.tsx
+var CardTitle = /* @__PURE__ */ primitive("CardTitle", "h3");
+
+// src/components/CardDescription.tsx
+var CardDescription = /* @__PURE__ */ primitive("CardDescription", "p");
+
+// src/components/CardContent.tsx
+var CardContent = /* @__PURE__ */ primitive("CardContent", "section");
+
+// src/components/CardFooter.tsx
+var CardFooter = /* @__PURE__ */ primitive("CardFooter", "footer");
+
+// src/components/CardAction.tsx
+var CardAction = /* @__PURE__ */ primitive("CardAction", "div");
+
+// src/components/Alert.tsx
+var Alert = /* @__PURE__ */ primitive("Alert", "div");
+
+// src/components/AlertTitle.tsx
+var AlertTitle = /* @__PURE__ */ primitive("AlertTitle", "h2");
+
+// src/components/AlertDescription.tsx
+var AlertDescription = /* @__PURE__ */ primitive("AlertDescription", "section");
+
+// src/components/Avatar.tsx
+var Avatar = /* @__PURE__ */ primitive("Avatar", "span");
+
+// src/components/AvatarImage.tsx
+var AvatarImage = /* @__PURE__ */ primitive("AvatarImage", "img");
+
+// src/components/AvatarFallback.tsx
+var AvatarFallback = /* @__PURE__ */ primitive("AvatarFallback", "span");
+
+// src/components/Breadcrumb.tsx
+var Breadcrumb = /* @__PURE__ */ primitive("Breadcrumb", "nav");
+
+// src/components/BreadcrumbList.tsx
+var BreadcrumbList = /* @__PURE__ */ primitive("BreadcrumbList", "ol");
+
+// src/components/BreadcrumbItem.tsx
+var BreadcrumbItem = /* @__PURE__ */ primitive("BreadcrumbItem", "li");
+
+// src/components/BreadcrumbLink.tsx
+var BreadcrumbLink = /* @__PURE__ */ primitive("BreadcrumbLink", "a");
+
+// src/components/BreadcrumbSeparator.tsx
+var BreadcrumbSeparator = /* @__PURE__ */ primitive("BreadcrumbSeparator", "li");
+
+// src/components/ButtonGroup.tsx
+var ButtonGroup = /* @__PURE__ */ primitive("ButtonGroup", "div");
+
+// src/components/Field.tsx
+var Field = /* @__PURE__ */ primitive("Field", "div");
+
+// src/components/FieldLabel.tsx
+var FieldLabel = /* @__PURE__ */ primitive("FieldLabel", "label");
+
+// src/components/FieldDescription.tsx
+var FieldDescription = /* @__PURE__ */ primitive("FieldDescription", "p");
+
+// src/components/FieldError.tsx
+var FieldError = /* @__PURE__ */ primitive("FieldError", "p");
+
+// src/components/Label.tsx
+var Label = /* @__PURE__ */ primitive("Label", "label");
+
+// src/components/Input.tsx
+var Input = /* @__PURE__ */ primitive("Input", "input");
+
+// src/components/Textarea.tsx
+var Textarea = /* @__PURE__ */ primitive("Textarea", "textarea");
+
+// src/components/NativeSelect.tsx
+var NativeSelect = /* @__PURE__ */ primitive("NativeSelect", "select");
+
+// src/components/InputGroup.tsx
+var InputGroup = /* @__PURE__ */ primitive("InputGroup", "div");
+
+// src/components/InputGroupAddon.tsx
+var InputGroupAddon = /* @__PURE__ */ primitive("InputGroupAddon", "div");
+
+// src/components/Empty.tsx
+var Empty = /* @__PURE__ */ primitive("Empty", "div");
+
+// src/components/EmptyHeader.tsx
+var EmptyHeader = /* @__PURE__ */ primitive("EmptyHeader", "header");
+
+// src/components/EmptyTitle.tsx
+var EmptyTitle = /* @__PURE__ */ primitive("EmptyTitle", "h3");
+
+// src/components/EmptyDescription.tsx
+var EmptyDescription = /* @__PURE__ */ primitive("EmptyDescription", "p");
+
+// src/components/EmptyContent.tsx
+var EmptyContent = /* @__PURE__ */ primitive("EmptyContent", "section");
+
+// src/components/Item.tsx
+var Item = /* @__PURE__ */ primitive("Item", "div");
+
+// src/components/ItemContent.tsx
+var ItemContent = /* @__PURE__ */ primitive("ItemContent", "section");
+
+// src/components/ItemTitle.tsx
+var ItemTitle = /* @__PURE__ */ primitive("ItemTitle", "h3");
+
+// src/components/ItemDescription.tsx
+var ItemDescription = /* @__PURE__ */ primitive("ItemDescription", "p");
+
+// src/components/ItemActions.tsx
+var ItemActions = /* @__PURE__ */ primitive("ItemActions", "div");
+
+// src/components/Kbd.tsx
+var Kbd = /* @__PURE__ */ primitive("Kbd", "kbd");
+
+// src/components/ScrollArea.tsx
+var ScrollArea = /* @__PURE__ */ primitive("ScrollArea", "div");
+
+// src/components/Skeleton.tsx
+var Skeleton = /* @__PURE__ */ primitive("Skeleton", "div");
+
+// src/components/Spinner.tsx
+var Spinner = /* @__PURE__ */ primitive("Spinner", "span");
+
+// src/components/Separator.tsx
+var Separator = /* @__PURE__ */ primitive("Separator", "hr");
+
+// src/components/Table.tsx
+var Table = /* @__PURE__ */ primitive("Table", "table");
+
+// src/components/TableHeader.tsx
+var TableHeader = /* @__PURE__ */ primitive("TableHeader", "thead");
+
+// src/components/TableBody.tsx
+var TableBody = /* @__PURE__ */ primitive("TableBody", "tbody");
+
+// src/components/TableFooter.tsx
+var TableFooter = /* @__PURE__ */ primitive("TableFooter", "tfoot");
+
+// src/components/TableRow.tsx
+var TableRow = /* @__PURE__ */ primitive("TableRow", "tr");
+
+// src/components/TableHead.tsx
+var TableHead = /* @__PURE__ */ primitive("TableHead", "th");
+
+// src/components/TableCell.tsx
+var TableCell = /* @__PURE__ */ primitive("TableCell", "td");
+
+// src/components/TableCaption.tsx
+var TableCaption = /* @__PURE__ */ primitive("TableCaption", "caption");
+
+// src/components/DialogHeader.tsx
+var DialogHeader = /* @__PURE__ */ primitive("DialogHeader", "header");
+
+// src/components/DialogTitle.tsx
+var DialogTitle = /* @__PURE__ */ primitive("DialogTitle", "h2");
+
+// src/components/DialogDescription.tsx
+var DialogDescription = /* @__PURE__ */ primitive("DialogDescription", "p");
+
+// src/components/DialogContent.tsx
+var DialogContent = /* @__PURE__ */ primitive("DialogContent", "section");
+
+// src/components/DialogFooter.tsx
+var DialogFooter = /* @__PURE__ */ primitive("DialogFooter", "footer");
+
+// src/components/SidebarHeader.tsx
+var SidebarHeader = /* @__PURE__ */ primitive("SidebarHeader", "header");
+
+// src/components/SidebarContent.tsx
+var SidebarContent = /* @__PURE__ */ primitive("SidebarContent", "section");
+
+// src/components/SidebarFooter.tsx
+var SidebarFooter = /* @__PURE__ */ primitive("SidebarFooter", "footer");
+
+// src/components/SidebarGroup.tsx
+var SidebarGroup = /* @__PURE__ */ primitive("SidebarGroup", "section");
+
+// src/components/SidebarItem.tsx
+var SidebarItem = /* @__PURE__ */ primitive("SidebarItem", "a");
+
+// src/components/Checkbox.tsx
+import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef3 } from "react";
+
+// src/hooks.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+function useValue(value, defaultValue, onChange) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value === void 0 ? internal : value;
+  const latest = useRef2({ value, current, onChange });
+  latest.current = { value, current, onChange };
+  const set = useCallback((next) => {
+    if (Object.is(latest.current.current, next)) return;
+    if (latest.current.value === void 0) setInternal(next);
+    latest.current.onChange?.(next);
+  }, []);
+  return [current, set];
+}
+function useLatest(value) {
+  const ref = useRef2(value);
+  ref.current = value;
+  return ref;
+}
+function useFloating(open, close, options = {}) {
+  const anchor = useRef2(null), popup = useRef2(null);
+  const latest = useLatest(close);
+  useEffect2(() => {
+    if (!open || !anchor.current || !popup.current) return;
+    const trigger = anchor.current, content = popup.current;
+    const position = attachFloating(trigger, content, options);
+    const layer = dismissableLayer(trigger.ownerDocument, {
+      elements: () => [trigger, content],
+      dismiss: (reason) => latest.current(reason === "escape")
+    });
+    return () => {
+      layer();
+      position();
+    };
+  }, [open, options.side, options.align, options.offset, options.matchWidth]);
+  return { anchor, popup };
+}
+
+// src/components/Checkbox.tsx
+import { jsx } from "react/jsx-runtime";
+var Checkbox = forwardRef2(
+  ({
+    checked,
+    defaultChecked = false,
+    onCheckedChange,
+    indeterminate = false,
+    className,
+    onChange,
+    ...props
+  }, forwarded) => {
+    const ref = useRef3(null);
+    const [value, set] = useValue(checked, defaultChecked, onCheckedChange);
+    useEffect3(() => {
+      if (ref.current) ref.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    useEffect3(
+      () => ref.current ? formReset(ref.current, () => set(defaultChecked)) : void 0,
+      [defaultChecked, set]
+    );
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        className: cx("input", className),
+        type: "checkbox",
+        checked: value,
+        ref: (element) => {
+          ref.current = element;
+          if (typeof forwarded === "function") forwarded(element);
+          else if (forwarded) forwarded.current = element;
+        },
+        onChange: (event) => {
+          onChange?.(event);
+          if (!event.defaultPrevented) set(event.currentTarget.checked);
+        }
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Switch.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Switch = forwardRef3(
+  (props, ref) => /* @__PURE__ */ jsx2(Checkbox, { ...props, role: "switch", ref })
+);
+Switch.displayName = "Switch";
+
+// src/components/Slider.tsx
+import { forwardRef as forwardRef4, useEffect as useEffect4, useRef as useRef4 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Slider = forwardRef4(
+  ({ value, defaultValue = 0, onValueChange, min = 0, max = 100, onChange, style, ...props }, ref) => {
+    const [current, set] = useValue(value, defaultValue, onValueChange);
+    const local = useRef4(null);
+    useEffect4(
+      () => local.current ? formReset(local.current, () => set(defaultValue)) : void 0,
+      [defaultValue, set]
+    );
+    return /* @__PURE__ */ jsx3(
+      Input,
+      {
+        ...props,
+        ref: (element) => {
+          local.current = element;
+          if (typeof ref === "function") ref(element);
+          else if (ref) ref.current = element;
+        },
+        type: "range",
+        min,
+        max,
+        value: current,
+        style: {
+          ...style,
+          "--slider-value": `${percentage(current, Number(min), Number(max))}%`
+        },
+        onChange: (event) => {
+          onChange?.(event);
+          if (!event.defaultPrevented) set(event.currentTarget.valueAsNumber);
+        }
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+// src/components/RadioGroup.tsx
+import { useEffect as useEffect5, useId, useRef as useRef5 } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function RadioGroup({
+  options,
+  value,
+  defaultValue = "",
+  onValueChange,
+  name,
+  disabled,
+  required,
+  className,
+  ...props
+}) {
+  const generated = useId(), root = useRef5(null);
+  const [current, set] = useValue(value, defaultValue, onValueChange);
+  useEffect5(
+    () => root.current ? formReset(root.current, () => set(defaultValue)) : void 0,
+    [defaultValue, set]
+  );
+  return /* @__PURE__ */ jsx4("div", { ...props, ref: root, role: "radiogroup", className: cx("bc-radio-group", className), children: options.map((option) => /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        className: "input",
+        type: "radio",
+        name: name ?? generated,
+        value: option.value,
+        checked: current === option.value,
+        disabled: disabled || option.disabled,
+        required,
+        onChange: () => set(option.value)
+      }
+    ),
+    " ",
+    option.label
+  ] }, option.value)) });
+}
+
+// src/components/Progress.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Progress({
+  value,
+  max = 100,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ...props,
+      className: cx("progress", className),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-busy": value === void 0,
+      children: /* @__PURE__ */ jsx5("span", { style: { width: value === void 0 ? "100%" : `${percentage(value, 0, max)}%` } })
+    }
+  );
+}
+
+// src/components/Tabs.tsx
+import { useId as useId2, useRef as useRef6 } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  activation = "automatic",
+  variant,
+  renderPanel,
+  keepMounted = false,
+  className,
+  ...props
+}) {
+  const id = useId2(), refs = useRef6([]);
+  const [current, set] = useValue(
+    value,
+    defaultValue ?? items.find((item) => !item.disabled)?.value ?? "",
+    onValueChange
+  );
+  const active = items.findIndex((item) => item.value === current && !item.disabled);
+  const selected = active >= 0 ? active : items.findIndex((item) => !item.disabled);
+  return /* @__PURE__ */ jsxs2("div", { ...props, className: cx("tabs", className), children: [
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": props["aria-label"],
+        "aria-orientation": orientation,
+        "data-variant": variant,
+        children: items.map((item, index) => /* @__PURE__ */ jsx6(
+          "button",
+          {
+            ref: (el) => {
+              refs.current[index] = el;
+            },
+            type: "button",
+            role: "tab",
+            id: `${id}-tab-${index}`,
+            "aria-controls": `${id}-panel-${index}`,
+            "aria-selected": index === selected,
+            disabled: item.disabled,
+            tabIndex: index === selected ? 0 : -1,
+            onClick: () => set(item.value),
+            onKeyDown: (event) => {
+              const arrows = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+              if (!arrows.includes(event.key) && !["Home", "End"].includes(event.key)) return;
+              event.preventDefault();
+              const key = orientation === "horizontal" && event.currentTarget.closest('[dir="rtl"]') ? event.key === "ArrowLeft" ? "ArrowRight" : event.key === "ArrowRight" ? "ArrowLeft" : event.key : event.key;
+              const next = nextIndex(items, index, key);
+              refs.current[next]?.focus();
+              if (activation === "automatic" && next >= 0) set(items[next].value);
+            },
+            children: item.label
+          },
+          item.value
+        ))
+      }
+    ),
+    items.map((item, index) => /* @__PURE__ */ jsx6(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${id}-panel-${index}`,
+        "aria-labelledby": `${id}-tab-${index}`,
+        tabIndex: 0,
+        hidden: index !== selected,
+        children: keepMounted || index === selected ? renderPanel(item) : null
+      },
+      item.value
+    ))
+  ] });
+}
+
+// src/components/Accordion.tsx
+import { useRef as useRef7 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function Accordion({
+  items,
+  value,
+  defaultValue = [],
+  onValueChange,
+  multiple = false,
+  renderPanel,
+  className,
+  ...props
+}) {
+  const [current, set] = useValue(value, defaultValue, onValueChange);
+  const refs = useRef7([]);
+  return /* @__PURE__ */ jsx7("div", { ...props, className: cx("accordion", className), children: items.map((item, index) => /* @__PURE__ */ jsxs3(
+    "details",
+    {
+      open: current.includes(item.value),
+      "aria-disabled": item.disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "summary",
+          {
+            ref: (el) => {
+              refs.current[index] = el;
+            },
+            "aria-disabled": item.disabled || void 0,
+            tabIndex: item.disabled ? -1 : 0,
+            onClick: (event) => {
+              event.preventDefault();
+              if (!item.disabled)
+                set(
+                  current.includes(item.value) ? current.filter((key) => key !== item.value) : multiple ? [...current, item.value] : [item.value]
+                );
+            },
+            onKeyDown: (event) => {
+              if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+                event.preventDefault();
+                refs.current[nextIndex(items, index, event.key)]?.focus();
+              }
+            },
+            children: [
+              item.label,
+              /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2304" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7("section", { children: renderPanel(item) })
+      ]
+    },
+    item.value
+  )) });
+}
+
+// src/components/Collapsible.tsx
+import { useId as useId3 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function Collapsible({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  children,
+  className,
+  ...props
+}) {
+  const [current, set] = useValue(open, defaultOpen, onOpenChange);
+  const id = useId3();
+  return /* @__PURE__ */ jsxs4("div", { ...props, className: cx("collapsible", className), children: [
+    /* @__PURE__ */ jsx8(
+      Button,
+      {
+        variant: "ghost",
+        "aria-expanded": current,
+        "aria-controls": id,
+        onClick: () => set(!current),
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsx8("div", { id, hidden: !current, children })
+  ] });
+}
+
+// src/components/Dialog.tsx
+import { useEffect as useEffect6, useId as useId4, useRef as useRef8 } from "react";
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function Dialog({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  footer,
+  children,
+  closeOnOutside = true,
+  closeOnEscape = true,
+  closeLabel = "Close",
+  kind = "dialog",
+  side = "right",
+  className,
+  ...props
+}) {
+  const [current, set] = useValue(open, defaultOpen, onOpenChange);
+  const ref = useRef8(null), id = useId4();
+  const latest = useLatest(current);
+  useEffect6(() => {
+    const dialog = ref.current;
+    if (!current) {
+      if (dialog.open) dialog.close();
+      return;
+    }
+    if (!dialog.open) dialog.showModal();
+    const unlock = lockScroll(dialog.ownerDocument);
+    return () => {
+      unlock();
+      if (dialog.open) dialog.close();
+    };
+  }, [current]);
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    trigger !== void 0 && /* @__PURE__ */ jsx9(Button, { variant: "outline", onClick: () => set(true), children: trigger }),
+    /* @__PURE__ */ jsx9(
+      "dialog",
+      {
+        ...props,
+        className: cx(kind, className),
+        "data-side": kind === "drawer" ? side : void 0,
+        ref,
+        "aria-labelledby": `${id}-title`,
+        "aria-describedby": description ? `${id}-description` : void 0,
+        onCancel: (event) => {
+          event.preventDefault();
+          if (closeOnEscape) set(false);
+        },
+        onClose: () => {
+          if (latest.current) {
+            set(false);
+            queueMicrotask(() => {
+              if (latest.current && ref.current?.isConnected && !ref.current.open)
+                ref.current.showModal();
+            });
+          }
+        },
+        onClick: (event) => {
+          props.onClick?.(event);
+          if (!event.defaultPrevented && closeOnOutside && event.target === event.currentTarget)
+            set(false);
+        },
+        children: /* @__PURE__ */ jsxs5("div", { className: kind === "drawer" ? "bc-drawer-surface" : "bc-dialog-surface", children: [
+          /* @__PURE__ */ jsxs5("header", { children: [
+            /* @__PURE__ */ jsx9("h2", { id: `${id}-title`, children: title }),
+            description && /* @__PURE__ */ jsx9("p", { id: `${id}-description`, children: description })
+          ] }),
+          /* @__PURE__ */ jsx9("section", { children }),
+          footer && /* @__PURE__ */ jsx9("footer", { children: footer }),
+          kind !== "alert-dialog" && /* @__PURE__ */ jsx9(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": closeLabel,
+              onClick: () => set(false),
+              children: "\xD7"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/AlertDialog.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function AlertDialog(props) {
+  return /* @__PURE__ */ jsx10(Dialog, { ...props, kind: "alert-dialog", role: "alertdialog", closeOnOutside: false });
+}
+
+// src/components/Drawer.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Drawer(props) {
+  return /* @__PURE__ */ jsx11(Dialog, { ...props, kind: "drawer" });
+}
+
+// src/components/Popover.tsx
+import { useEffect as useEffect7, useId as useId5 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function Popover({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  side,
+  align,
+  label = "Popover",
+  children,
+  className,
+  ...props
+}) {
+  const [current, set] = useValue(open, defaultOpen, onOpenChange);
+  const id = useId5();
+  const { anchor, popup } = useFloating(
+    current,
+    (restore) => {
+      set(false);
+      if (restore) anchor.current?.focus();
+    },
+    { side, align }
+  );
+  useEffect7(() => {
+    if (current && popup.current) focusFirst(popup.current);
+  }, [current]);
+  return /* @__PURE__ */ jsxs6("div", { ...props, className: cx("popover", className), children: [
+    /* @__PURE__ */ jsx12(
+      Button,
+      {
+        ref: anchor,
+        variant: "outline",
+        "aria-haspopup": "dialog",
+        "aria-expanded": current,
+        "aria-controls": id,
+        onClick: () => set(!current),
+        children: trigger
+      }
+    ),
+    current && /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref: popup,
+        id,
+        "data-popover": "",
+        popover: "manual",
+        className: "bc-floating",
+        role: "dialog",
+        "aria-label": label,
+        tabIndex: -1,
+        children
+      }
+    )
+  ] });
+}
+
+// src/components/Tooltip.tsx
+import { useEffect as useEffect8, useId as useId6, useRef as useRef9 } from "react";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  children,
+  delay = 300,
+  side = "top"
+}) {
+  const [open, set] = useValue(void 0, false);
+  const id = useId6();
+  const timer = useRef9(void 0);
+  const { anchor, popup } = useFloating(open, () => set(false), { side, align: "center" });
+  const close = () => {
+    clearTimeout(timer.current);
+    set(false);
+  };
+  useEffect8(() => () => clearTimeout(timer.current), []);
+  return /* @__PURE__ */ jsxs7(
+    "span",
+    {
+      onPointerEnter: () => {
+        timer.current = setTimeout(() => set(true), delay);
+      },
+      onPointerLeave: close,
+      onFocus: () => set(true),
+      onBlur: close,
+      children: [
+        /* @__PURE__ */ jsx13(Button, { asChild: true, ref: anchor, "aria-describedby": open ? id : void 0, children }),
+        open && /* @__PURE__ */ jsx13("div", { ref: popup, id, role: "tooltip", popover: "manual", className: "bc-floating tooltip", children: content })
+      ]
+    }
+  );
+}
+
+// src/components/Select.tsx
+import { useEffect as useEffect9, useId as useId7, useRef as useRef10, useState as useState2 } from "react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function Select({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  disabled,
+  name,
+  required,
+  placeholder = "Select\u2026",
+  label,
+  searchable = false,
+  searchPlaceholder = "Search\u2026",
+  emptyLabel = "No results",
+  className,
+  ...props
+}) {
+  const [current, set] = useValue(
+    value,
+    defaultValue ?? (multiple ? [] : ""),
+    onValueChange
+  );
+  const [open, setOpen] = useState2(false), [query, setQuery] = useState2(""), [active, setActive] = useState2(-1);
+  const id = useId7(), list = useRef10(null), search = useRef10(null), native = useRef10(null), typeahead = useRef10(createTypeahead());
+  const visible = options.filter(
+    (option) => !searchable || option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())
+  );
+  const selected = Array.isArray(current) ? current : [current];
+  const close = (restore) => {
+    setOpen(false);
+    setQuery("");
+    if (restore) anchor.current?.focus();
+  };
+  const { anchor, popup } = useFloating(open, close, { matchWidth: true });
+  useEffect9(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  useEffect9(() => {
+    if (open) (search.current ?? list.current)?.focus();
+  }, [open]);
+  useEffect9(() => {
+    const item = list.current?.querySelector(`[data-index="${active}"]`);
+    if (list.current && item) scrollWithin(list.current, item);
+  }, [active]);
+  useEffect9(
+    () => native.current ? formReset(native.current, () => set(defaultValue ?? (multiple ? [] : ""))) : void 0,
+    [defaultValue, multiple, set]
+  );
+  const choose = (index) => {
+    const option = visible[index];
+    if (!option || option.disabled) return;
+    set(
+      multiple ? selected.includes(option.value) ? selected.filter((value2) => value2 !== option.value) : [...selected.filter(Boolean), option.value] : option.value
+    );
+    if (!multiple) close(true);
+  };
+  const keyboard = (event) => {
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      setActive(nextIndex(visible, active, event.key));
+    } else if (event.key === "Enter" || !searchable && event.key === " ") {
+      event.preventDefault();
+      choose(active);
+    } else if (event.key === "Tab") close(false);
+    else if (!searchable && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      setActive(typeahead.current(event.key, visible, active));
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { ...props, className: cx(searchable ? "combobox" : "select", className), children: [
+    /* @__PURE__ */ jsxs8(
+      Button,
+      {
+        ref: anchor,
+        disabled,
+        variant: "outline",
+        role: "combobox",
+        "aria-label": label,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": `${id}-list`,
+        "aria-required": required,
+        onClick: () => {
+          setActive(nextIndex(visible, -1, "Home"));
+          setOpen(!open);
+        },
+        onKeyDown: (event) => {
+          if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+            event.preventDefault();
+            setActive(nextIndex(visible, -1, event.key === "ArrowUp" ? "End" : "Home"));
+            setOpen(true);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx14("span", { children: options.filter((option) => selected.includes(option.value)).map((option) => option.label).join(", ") || placeholder }),
+          /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "\u2304" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs8("div", { ref: popup, "data-popover": "", popover: "manual", className: "bc-floating", children: [
+      searchable && /* @__PURE__ */ jsx14(
+        Input,
+        {
+          ref: search,
+          className: "bc-search",
+          value: query,
+          role: "combobox",
+          "aria-label": searchPlaceholder,
+          "aria-autocomplete": "list",
+          "aria-expanded": "true",
+          "aria-controls": `${id}-list`,
+          "aria-activedescendant": active >= 0 ? `${id}-option-${active}` : void 0,
+          placeholder: searchPlaceholder,
+          onChange: (event) => {
+            setQuery(event.target.value);
+            setActive(
+              nextIndex(
+                options.filter(
+                  (option) => option.label.toLocaleLowerCase().includes(event.target.value.toLocaleLowerCase())
+                ),
+                -1,
+                "Home"
+              )
+            );
+          },
+          onKeyDown: keyboard
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        "div",
+        {
+          ref: list,
+          id: `${id}-list`,
+          role: "listbox",
+          tabIndex: -1,
+          "aria-label": label,
+          "aria-multiselectable": multiple || void 0,
+          "aria-activedescendant": active >= 0 ? `${id}-option-${active}` : void 0,
+          onKeyDown: searchable ? void 0 : keyboard,
+          "data-empty": emptyLabel,
+          children: visible.map((option, index) => /* @__PURE__ */ jsx14(
+            "div",
+            {
+              id: `${id}-option-${index}`,
+              "data-index": index,
+              "data-value": option.value,
+              role: "option",
+              "aria-selected": selected.includes(option.value),
+              "aria-disabled": option.disabled || void 0,
+              className: index === active ? "active" : void 0,
+              onPointerMove: (event) => {
+                if ((event.movementX || event.movementY) && !option.disabled) setActive(index);
+              },
+              onPointerDown: (event) => event.preventDefault(),
+              onClick: () => choose(index),
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8(
+      "select",
+      {
+        ref: native,
+        className: "bc-form-control",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        name,
+        disabled,
+        required,
+        multiple,
+        value: current,
+        onChange: (event) => set(
+          multiple ? [...event.target.selectedOptions].map((option) => option.value) : event.target.value
+        ),
+        onInvalid: (event) => {
+          event.preventDefault();
+          anchor.current?.focus();
+          anchor.current?.setAttribute("aria-invalid", "true");
+        },
+        children: [
+          !multiple && /* @__PURE__ */ jsx14("option", { value: "", children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx14("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/Combobox.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Combobox(props) {
+  return /* @__PURE__ */ jsx15(Select, { ...props, searchable: true });
+}
+
+// src/components/DropdownMenu.tsx
+import { useEffect as useEffect10, useId as useId8, useRef as useRef11 } from "react";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function DropdownMenu({
+  items,
+  trigger,
+  onSelect,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  side,
+  align,
+  label = "Menu",
+  className,
+  ...props
+}) {
+  const [current, set] = useValue(open, defaultOpen, onOpenChange);
+  const refs = useRef11([]), id = useId8(), initialKey = useRef11("Home"), typeahead = useRef11(createTypeahead());
+  const enabled = items.map((item) => ({ ...item, disabled: item.disabled || item.separator }));
+  const { anchor, popup } = useFloating(
+    current,
+    (restore) => {
+      set(false);
+      if (restore) anchor.current?.focus();
+    },
+    { side, align }
+  );
+  useEffect10(() => {
+    if (current) refs.current[nextIndex(enabled, -1, initialKey.current)]?.focus();
+  }, [current]);
+  return /* @__PURE__ */ jsxs9("div", { ...props, className: cx("dropdown-menu", className), children: [
+    /* @__PURE__ */ jsx16(
+      Button,
+      {
+        ref: anchor,
+        variant: "outline",
+        "aria-haspopup": "menu",
+        "aria-controls": id,
+        "aria-expanded": current,
+        onClick: () => {
+          initialKey.current = "Home";
+          set(!current);
+        },
+        onKeyDown: (event) => {
+          if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+            event.preventDefault();
+            initialKey.current = event.key === "ArrowUp" ? "End" : "Home";
+            set(true);
+          }
+        },
+        children: trigger
+      }
+    ),
+    current && /* @__PURE__ */ jsx16("div", { ref: popup, "data-popover": "", popover: "manual", className: "bc-floating", children: /* @__PURE__ */ jsx16("div", { id, role: "menu", "aria-label": label, children: items.map(
+      (item, index) => item.separator ? /* @__PURE__ */ jsx16("hr", { role: "separator" }, item.value) : /* @__PURE__ */ jsxs9(
+        Button,
+        {
+          as: item.href ? "a" : "button",
+          ...item.href ? { href: item.href } : {},
+          ref: (el) => {
+            refs.current[index] = el;
+          },
+          role: "menuitem",
+          tabIndex: -1,
+          "aria-disabled": item.disabled || void 0,
+          disabled: !item.href && item.disabled,
+          variant: "ghost",
+          onClick: (event) => {
+            if (item.disabled) {
+              event.preventDefault();
+              return;
+            }
+            item.onSelect?.();
+            onSelect?.(item.value);
+            set(false);
+            anchor.current?.focus();
+          },
+          onKeyDown: (event) => {
+            if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+              event.preventDefault();
+              refs.current[nextIndex(enabled, index, event.key)]?.focus();
+            } else if (event.key === "Tab") set(false);
+            else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+              refs.current[typeahead.current(event.key, enabled, index)]?.focus();
+            }
+          },
+          children: [
+            item.label,
+            item.shortcut && /* @__PURE__ */ jsx16("kbd", { "data-shortcut": "", children: item.shortcut })
+          ]
+        },
+        item.value
+      )
+    ) }) })
+  ] });
+}
+
+// src/components/Command.tsx
+import { useId as useId9, useState as useState3 } from "react";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function Command({
+  items,
+  onSelect,
+  label = "Commands",
+  placeholder = "Search commands\u2026",
+  emptyLabel = "No results"
+}) {
+  const [query, setQuery] = useState3(""), [active, setActive] = useState3(0);
+  const id = useId9();
+  const visible = items.filter(
+    (item) => !item.separator && item.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())
+  );
+  const choose = (index) => {
+    const item = visible[index];
+    if (item && !item.disabled) {
+      item.onSelect?.();
+      onSelect?.(item.value);
+    }
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: "command", children: [
+    /* @__PURE__ */ jsx17("header", { children: /* @__PURE__ */ jsx17(
+      Input,
+      {
+        role: "combobox",
+        "aria-label": label,
+        "aria-autocomplete": "list",
+        "aria-expanded": "true",
+        "aria-controls": id,
+        "aria-activedescendant": visible[active] ? `${id}-${active}` : void 0,
+        value: query,
+        placeholder,
+        onChange: (event) => {
+          setQuery(event.target.value);
+          setActive(0);
+        },
+        onKeyDown: (event) => {
+          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            setActive(nextIndex(visible, active, event.key));
+          } else if (event.key === "Enter") {
+            event.preventDefault();
+            choose(active);
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs10("div", { id, role: "listbox", "aria-label": label, children: [
+      visible.map((item, index) => /* @__PURE__ */ jsx17(
+        "div",
+        {
+          id: `${id}-${index}`,
+          role: "option",
+          "aria-selected": index === active,
+          "aria-disabled": item.disabled || void 0,
+          className: index === active ? "active" : void 0,
+          onPointerMove: (event) => {
+            if ((event.movementX || event.movementY) && !item.disabled) setActive(index);
+          },
+          onClick: () => choose(index),
+          children: item.label
+        },
+        item.value
+      )),
+      !visible.length && /* @__PURE__ */ jsx17("p", { role: "status", children: emptyLabel })
+    ] })
+  ] });
+}
+
+// src/components/Pagination.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function Pagination({
+  page,
+  count,
+  onPageChange,
+  label = "Pagination"
+}) {
+  const total = Math.max(1, Math.floor(count));
+  const current = Math.max(1, Math.min(page, total));
+  return /* @__PURE__ */ jsxs11("nav", { className: "bc-pagination", "aria-label": label, children: [
+    /* @__PURE__ */ jsx18(
+      Button,
+      {
+        variant: "outline",
+        disabled: current === 1,
+        "aria-label": "Previous page",
+        onClick: () => onPageChange(current - 1),
+        children: "\u2039"
+      }
+    ),
+    /* @__PURE__ */ jsxs11("span", { "aria-live": "polite", children: [
+      current,
+      " / ",
+      total
+    ] }),
+    /* @__PURE__ */ jsx18(
+      Button,
+      {
+        variant: "outline",
+        disabled: current === total,
+        "aria-label": "Next page",
+        onClick: () => onPageChange(current + 1),
+        children: "\u203A"
+      }
+    )
+  ] });
+}
+
+// src/components/Sidebar.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function Sidebar({
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  children,
+  label = "Navigation",
+  className,
+  ...props
+}) {
+  const [current, set] = useValue(collapsed, defaultCollapsed, onCollapsedChange);
+  return /* @__PURE__ */ jsxs12("aside", { ...props, className: cx("bc-sidebar", className), "data-collapsed": current, children: [
+    /* @__PURE__ */ jsx19(
+      Button,
+      {
+        variant: "ghost",
+        "aria-label": current ? "Expand sidebar" : "Collapse sidebar",
+        "aria-expanded": !current,
+        onClick: () => set(!current),
+        children: "\u2630"
+      }
+    ),
+    /* @__PURE__ */ jsx19("nav", { "aria-label": label, children })
+  ] });
+}
+
+// src/components/ThemeSwitcher.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function ThemeSwitcher({
+  value,
+  defaultValue = "light",
+  onValueChange,
+  label = "Dark mode"
+}) {
+  const [current, set] = useValue(value, defaultValue, onValueChange);
+  return /* @__PURE__ */ jsx20(
+    Button,
+    {
+      variant: "outline",
+      role: "switch",
+      "aria-label": label,
+      "aria-checked": current === "dark",
+      onClick: () => set(current === "dark" ? "light" : "dark"),
+      children: current === "dark" ? "\u263E" : "\u2600"
+    }
+  );
+}
+
+// src/components/Toast.tsx
+import { useEffect as useEffect11, useRef as useRef12 } from "react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function Toast({ message, dismiss }) {
+  const timer = useRef12(void 0), remaining = useRef12(message.duration ?? 5e3), started = useRef12(0), latest = useRef12(dismiss);
+  latest.current = dismiss;
+  const pause = () => {
+    clearTimeout(timer.current);
+    if (started.current)
+      remaining.current = Math.max(0, remaining.current - (Date.now() - started.current));
+    started.current = 0;
+  };
+  const resume = () => {
+    if ((message.duration ?? 5e3) <= 0 || started.current) return;
+    started.current = Date.now();
+    timer.current = setTimeout(() => latest.current(), remaining.current);
+  };
+  useEffect11(() => {
+    resume();
+    return pause;
+  }, [message.id]);
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: "toast",
+      "data-variant": message.variant,
+      onPointerEnter: pause,
+      onPointerLeave: resume,
+      onFocus: pause,
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) resume();
+      },
+      children: /* @__PURE__ */ jsxs13("div", { className: "toast-content", children: [
+        /* @__PURE__ */ jsxs13("section", { children: [
+          /* @__PURE__ */ jsx21("h2", { children: message.title }),
+          message.description && /* @__PURE__ */ jsx21("p", { children: message.description })
+        ] }),
+        /* @__PURE__ */ jsx21("footer", { children: /* @__PURE__ */ jsx21(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": "Dismiss notification",
+            onClick: dismiss,
+            children: "\xD7"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/components/Toaster.tsx
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function Toaster({
+  messages,
+  onDismiss,
+  label = "Notifications"
+}) {
+  return /* @__PURE__ */ jsxs14("section", { className: "toaster", "aria-label": label, children: [
+    /* @__PURE__ */ jsx22("div", { className: "bc-live", role: "status", "aria-live": "polite", "aria-atomic": "true", children: messages.at(-1)?.title }),
+    messages.map((message) => /* @__PURE__ */ jsx22(Toast, { message, dismiss: () => onDismiss(message.id) }, message.id))
+  ] });
+}
+
+// src/components/Chart.tsx
+import { useId as useId10 } from "react";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+function Chart({
+  data,
+  label,
+  kind = "line"
+}) {
+  const id = useId10();
+  const finite = data.map((point) => Number.isFinite(point.value) ? point.value : 0), min = Math.min(0, ...finite), max = Math.max(1, ...finite), span = max - min;
+  const y = (value) => 180 - (value - min) / span * 160;
+  return /* @__PURE__ */ jsxs15("figure", { className: "chart", children: [
+    /* @__PURE__ */ jsxs15("svg", { className: "bc-chart", viewBox: "0 0 400 200", role: "img", "aria-labelledby": id, children: [
+      /* @__PURE__ */ jsx23("title", { id, children: label }),
+      kind === "line" ? /* @__PURE__ */ jsx23(
+        "polyline",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          points: finite.map(
+            (value, index) => `${20 + index / Math.max(1, data.length - 1) * 360},${y(value)}`
+          ).join(" ")
+        }
+      ) : finite.map((value, index) => /* @__PURE__ */ jsx23(
+        "rect",
+        {
+          x: 20 + index / Math.max(1, data.length) * 360,
+          y: Math.min(y(0), y(value)),
+          width: Math.max(1, 360 / Math.max(1, data.length) - 8),
+          height: Math.abs(y(value) - y(0)),
+          fill: "currentColor"
+        },
+        index
+      ))
+    ] }),
+    /* @__PURE__ */ jsx23("figcaption", { children: label }),
+    /* @__PURE__ */ jsxs15("table", { className: "bc-live", children: [
+      /* @__PURE__ */ jsx23("caption", { children: label }),
+      /* @__PURE__ */ jsx23("tbody", { children: data.map((point, index) => /* @__PURE__ */ jsxs15("tr", { children: [
+        /* @__PURE__ */ jsx23("th", { scope: "row", children: point.label }),
+        /* @__PURE__ */ jsx23("td", { children: point.value })
+      ] }, index)) })
+    ] })
+  ] });
+}
+export {
+  Accordion,
+  AccordionRoot,
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogRoot,
+  AlertTitle,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+  Button,
+  ButtonGroup,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Chart,
+  ChartRoot,
+  Checkbox,
+  Collapsible,
+  Combobox,
+  ComboboxRoot,
+  Command,
+  CommandRoot,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  Drawer,
+  DrawerRoot,
+  DropdownMenu,
+  DropdownMenuRoot,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+  Kbd,
+  Label,
+  NativeSelect,
+  Pagination,
+  Popover,
+  PopoverRoot,
+  Progress,
+  RadioGroup,
+  ScrollArea,
+  Select,
+  SelectRoot,
+  Separator,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarItem,
+  SidebarRoot,
+  Skeleton,
+  Slider,
+  Spinner,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsRoot,
+  Textarea,
+  ThemeSwitcher,
+  Toaster,
+  Tooltip
+};
+//# sourceMappingURL=index.js.map