jvdm-ui 1.0.5

package/dist/chunk-AHE2576G.js

@@ -0,0 +1,682 @@
+import { ChevronIcon, Button, Input, Kbd, IconButton, CloseIcon, buttonClass, Card, Label } from './chunk-WWOXGKLF.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+export * from 'jvdm-ui/client/code-block';
+import { useState, useRef, useEffect, useMemo, useId, isValidElement, cloneElement } from 'react';
+export * from 'jvdm-ui/client/confirm-dialog';
+export { Gallery } from 'jvdm-ui/client/gallery';
+export * from 'jvdm-ui/client/modal';
+export { Menu } from 'jvdm-ui/client/menu';
+
+function Accordion({
+  items,
+  exclusive = false,
+  name = "accordion",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `divide-y divide-line overflow-hidden rounded-md border border-line ${className}`,
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "details",
+        {
+          name: exclusive ? name : void 0,
+          open: item.defaultOpen,
+          className: "group bg-surface",
+          children: [
+            /* @__PURE__ */ jsxs("summary", { className: "flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-4 text-sm text-ink transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent", children: [
+              item.title,
+              /* @__PURE__ */ jsx(
+                ChevronIcon,
+                {
+                  className: "text-ink-muted transition-transform duration-(--duration-fast) ease-out group-open:-rotate-180",
+                  size: "md"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 text-sm text-ink-soft", children: item.content })
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+var TONES = {
+  info: "border-info/40 bg-info-soft text-info",
+  ok: "border-ok/40 bg-ok-soft text-ok",
+  warn: "border-warn/40 bg-warn-soft text-warn",
+  danger: "border-danger/40 bg-danger-soft text-danger"
+};
+function Banner({
+  tone = "info",
+  title,
+  children,
+  action,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: `flex flex-wrap items-center gap-4 rounded-md border px-4 py-3 ${TONES[tone]} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
+          children ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs opacity-80", children }) : null
+        ] }),
+        action
+      ]
+    }
+  );
+}
+
+// src/molecules/breadcrumb/locales.ts
+var locales = {
+  label: "Breadcrumb"
+};
+function Breadcrumb({
+  items,
+  label = locales.label,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className, children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1 text-xs", children: items.map((item, index) => {
+    const last = index === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+      index > 0 ? /* @__PURE__ */ jsx(ChevronIcon, { className: "-rotate-90 text-ink-dim", size: "sm" }) : null,
+      last || !item.href ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-current": last ? "page" : void 0,
+          className: last ? "font-medium text-ink" : "text-ink-muted",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "rounded-xs px-1 py-0.5 text-ink-muted transition-colors duration-(--duration-fast) ease-out hover:bg-raised hover:text-ink-soft focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+          children: item.label
+        }
+      )
+    ] }, item.id);
+  }) }) });
+}
+var TONES2 = {
+  info: "border-info/35 bg-info-soft text-info",
+  ok: "border-ok/35 bg-ok-soft text-ok",
+  warn: "border-warn/35 bg-warn-soft text-warn",
+  danger: "border-danger/35 bg-danger-soft text-danger"
+};
+function Callout({
+  tone = "info",
+  title,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("aside", { className: `rounded-md border px-4 py-3 ${TONES2[tone]} ${className}`, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm opacity-80", children })
+  ] });
+}
+function CardTitle({ children, hint }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-ink-muted", children: hint }) : null
+  ] });
+}
+
+// src/molecules/command-menu/locales.ts
+var locales2 = { empty: "No matching commands", open: "Open command menu" };
+function CommandMenu({
+  items,
+  onSelect,
+  label = "Search commands",
+  global = false
+}) {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(!global);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (!global) return;
+    function handleKey(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setOpen(true);
+      }
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [global]);
+  useEffect(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+  const filtered = useMemo(
+    () => items.filter(
+      (item) => `${item.label} ${item.description ?? ""}`.toLowerCase().includes(query.toLowerCase())
+    ),
+    [items, query]
+  );
+  if (global && !open)
+    return /* @__PURE__ */ jsx(Button, { onClick: () => setOpen(true), variant: "secondary", children: locales2.open });
+  const menu = /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-lg flex-col gap-3 rounded-xl border border-line bg-surface p-3 shadow-modal", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": label,
+          ref: inputRef,
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: label,
+          value: query
+        }
+      ),
+      /* @__PURE__ */ jsx(Kbd, { children: "\u2318K" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex max-h-72 flex-col gap-1 overflow-y-auto", children: filtered.length ? filtered.map((item) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "justify-start text-left",
+        onClick: () => onSelect?.(item),
+        variant: "ghost",
+        children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start", children: [
+          item.label,
+          item.description ? /* @__PURE__ */ jsx("span", { className: "text-2xs text-ink-dim", children: item.description }) : null
+        ] })
+      },
+      item.id
+    )) : /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-ink-muted", children: locales2.empty }) })
+  ] });
+  return global ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-30 flex items-start justify-center bg-app/70 p-4 pt-24 backdrop-blur-sm",
+      onClick: () => setOpen(false),
+      children: /* @__PURE__ */ jsx("div", { onClick: (event) => event.stopPropagation(), children: menu })
+    }
+  ) : menu;
+}
+
+// src/molecules/drawer/locales.ts
+var locales3 = { close: "Close drawer" };
+function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  closeLabel = locales3.close
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    if (isOpen && !dialog.open) dialog.showModal();
+    if (!isOpen && dialog.open) dialog.close();
+  }, [isOpen]);
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    dialog.addEventListener("close", onClose);
+    return () => dialog.removeEventListener("close", onClose);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref,
+      className: "fixed inset-y-0 right-0 left-auto m-0 h-full max-h-none w-full max-w-md border-y-0 border-r-0 border-line bg-surface p-0 text-ink shadow-modal backdrop:bg-app/70 backdrop:backdrop-blur-sm sm:rounded-l-xl",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-line px-5 py-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: title }),
+          /* @__PURE__ */ jsx(IconButton, { label: closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { size: "md" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-5", children })
+      ] })
+    }
+  );
+}
+function DropdownMenu({
+  trigger,
+  children,
+  align = "start",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("details", { className: `group relative ${className}`, children: [
+    /* @__PURE__ */ jsx("summary", { className: "list-none [&::-webkit-details-marker]:hidden", children: trigger }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute top-full z-20 mt-2 min-w-48 rounded-md border border-line bg-surface p-1 shadow-popover ${align === "end" ? "right-0" : "left-0"}`,
+        children
+      }
+    )
+  ] });
+}
+function Empty({ title, description }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-16 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-ink-soft", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-ink-muted", children: description }) : null
+  ] });
+}
+function Field({
+  label,
+  htmlFor,
+  error,
+  action,
+  className = "",
+  children
+}) {
+  const errorId = useId();
+  const control = isValidElement(children) ? (() => {
+    const child = children;
+    const props = child.props;
+    return cloneElement(child, {
+      "aria-describedby": error ? [props["aria-describedby"], errorId].filter(Boolean).join(" ") : props["aria-describedby"],
+      "aria-invalid": error ? true : props["aria-invalid"]
+    });
+  })() : children;
+  return /* @__PURE__ */ jsxs("div", { className: `flex min-w-0 flex-col gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor, className: "text-xs font-medium text-ink-soft", children: label }),
+      action
+    ] }),
+    control,
+    error ? /* @__PURE__ */ jsx("span", { className: "text-2xs text-danger", id: errorId, children: error }) : null
+  ] });
+}
+
+// src/molecules/filter-bar/locales.ts
+var locales4 = { clear: "Clear filters" };
+function FilterBar({
+  children,
+  resultLabel,
+  onClear,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-wrap items-center gap-3 rounded-md border border-line bg-panel p-3 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-3", children }),
+        resultLabel ? /* @__PURE__ */ jsx("span", { className: "text-xs text-ink-muted", children: resultLabel }) : null,
+        onClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "text-xs text-accent-ink underline underline-offset-4",
+            onClick: onClear,
+            type: "button",
+            children: locales4.clear
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/molecules/load-error/locales.ts
+var LOAD_ERROR = {
+  retry: "Try again"
+};
+function LoadError({
+  message,
+  onRetry,
+  retryLabel = LOAD_ERROR.retry
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-16 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-danger", children: message }),
+    onRetry ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onRetry, className: buttonClass({ variant: "secondary" }), children: retryLabel }) : null
+  ] });
+}
+function ImagePreview({
+  src,
+  alt,
+  fallback,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("details", { className: `group ${className}`, children: [
+    /* @__PURE__ */ jsx("summary", { className: "cursor-zoom-in list-none overflow-hidden rounded-md bg-raised [&::-webkit-details-marker]:hidden", children: src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        className: "aspect-[4/3] w-full object-cover transition-transform duration-(--duration-base) ease-out group-hover:scale-[1.02]",
+        src
+      }
+    ) : fallback }),
+    src ? /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-30 flex items-center justify-center bg-app/85 p-6 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        className: "max-h-[90dvh] max-w-full rounded-md object-contain shadow-modal",
+        src
+      }
+    ) }) : null
+  ] });
+}
+function TreeNodeView({ node }) {
+  return node.children?.length ? /* @__PURE__ */ jsxs("details", { className: "group", open: true, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "cursor-pointer list-none rounded-sm px-3 py-2 text-sm text-ink-soft hover:bg-raised [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ jsx("span", { className: "mr-2 text-ink-dim transition-transform duration-(--duration-fast) ease-out group-open:rotate-90", children: "\u203A" }),
+      node.label
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ml-4 border-l border-line pl-2", children: node.children.map((child) => /* @__PURE__ */ jsx(TreeNodeView, { node: child }, child.id)) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "rounded-sm px-3 py-2 text-sm text-ink-muted hover:bg-raised", children: node.label });
+}
+
+// src/molecules/tree-view/locales.ts
+var locales5 = { label: "Tree" };
+function TreeView({
+  nodes,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": locales5.label, className: `flex flex-col gap-1 ${className}`, children: nodes.map((node) => /* @__PURE__ */ jsx(TreeNodeView, { node }, node.id)) });
+}
+function MetricCard({
+  label,
+  value,
+  change,
+  trend = "neutral",
+  hint,
+  children,
+  className = ""
+}) {
+  const trendColor = trend === "up" ? "text-ok" : trend === "down" ? "text-danger" : "text-ink-muted";
+  return /* @__PURE__ */ jsxs("article", { className: `rounded-md border border-line bg-surface p-5 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-ink-muted", children: label }),
+      change ? /* @__PURE__ */ jsx("span", { className: `text-xs font-medium ${trendColor}`, children: change }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-2xl font-bold text-ink", children: value }),
+    hint ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-ink-dim", children: hint }) : null,
+    children ? /* @__PURE__ */ jsx("div", { className: "mt-4", children }) : null
+  ] });
+}
+
+// src/molecules/menu/menu-item-style.ts
+var TONES3 = {
+  neutral: "text-ink-soft hover:bg-raised hover:text-ink",
+  danger: "text-danger hover:bg-danger-soft"
+};
+var BASE = "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-xs transition-colors duration-(--duration-fast) ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+function menuItemClass({ tone = "neutral", className = "" } = {}) {
+  return `${BASE} ${TONES3[tone]} ${className}`;
+}
+function PageHeader({
+  title,
+  subtitle,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between sm:gap-4 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("h1", { className: "truncate text-xl font-bold", children: title }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-ink-muted", children: subtitle }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-3 sm:w-auto", children }) : null
+      ]
+    }
+  );
+}
+
+// src/molecules/pagination/locales.ts
+var PAGINATION = {
+  label: { "en-US": "Pagination"},
+  previous: { "en-US": "Previous"},
+  next: { "en-US": "Next"},
+  page: { "en-US": (page) => `Page ${page}`}
+};
+function Pagination({
+  page,
+  pages,
+  onPageChange,
+  previousLabel = PAGINATION.previous["en-US"],
+  nextLabel = PAGINATION.next["en-US"],
+  pageLabel = PAGINATION.page["en-US"],
+  label = PAGINATION.label["en-US"],
+  className = ""
+}) {
+  const current = Math.min(Math.max(page, 1), Math.max(pages, 1));
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: `flex flex-wrap items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "min-h-10 rounded-md border border-line-strong px-3 text-sm text-ink-soft transition-colors duration-(--duration-fast) ease-out hover:bg-raised disabled:pointer-events-none disabled:opacity-40",
+        disabled: current === 1,
+        onClick: () => onPageChange(current - 1),
+        type: "button",
+        children: previousLabel
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-h-10 px-2 text-sm text-ink-muted", "aria-current": "page", children: pageLabel(current) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "min-h-10 rounded-md border border-line-strong px-3 text-sm text-ink-soft transition-colors duration-(--duration-fast) ease-out hover:bg-raised disabled:pointer-events-none disabled:opacity-40",
+        disabled: current === pages,
+        onClick: () => onPageChange(current + 1),
+        type: "button",
+        children: nextLabel
+      }
+    )
+  ] });
+}
+
+// src/molecules/snackbar-stack/locales.ts
+var locales6 = { dismiss: "Dismiss notification" };
+var TONES4 = {
+  neutral: "border-line-strong",
+  ok: "border-ok/50",
+  warn: "border-warn/50",
+  danger: "border-danger/50"
+};
+function SnackbarStack({
+  items,
+  onDismiss,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": "polite",
+      className: `fixed right-4 bottom-4 z-20 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 ${className}`,
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex items-start gap-3 rounded-md border bg-surface p-4 text-ink shadow-popover ${TONES4[item.tone ?? "neutral"]}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: item.title }),
+              item.message ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-ink-muted", children: item.message }) : null
+            ] }),
+            onDismiss ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": locales6.dismiss,
+                className: "text-xs text-ink-muted hover:text-ink",
+                onClick: () => onDismiss(item.id),
+                type: "button",
+                children: "\xD7"
+              }
+            ) : null
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+function StatCard({
+  label,
+  value,
+  hint,
+  color = "",
+  attention = false,
+  className = ""
+}) {
+  const length = String(value).length;
+  const size = length <= 7 ? "text-2xl" : length <= 12 ? "text-lg" : "text-sm";
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      padding: "sm",
+      className: `flex flex-col gap-1 ${attention ? "attention" : ""} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        /* @__PURE__ */ jsx("span", { className: `truncate ${size} leading-tight font-bold ${color}`, children: value }),
+        hint ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-ink-muted", children: hint }) : null
+      ]
+    }
+  );
+}
+function Stepper({
+  steps,
+  current,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("ol", { className: `flex flex-col gap-4 sm:flex-row sm:items-start sm:gap-0 ${className}`, children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "relative flex flex-1 items-start gap-3 sm:flex-col sm:items-center sm:text-center",
+      children: [
+        index < steps.length - 1 ? /* @__PURE__ */ jsx("span", { className: "absolute top-5 left-5 h-full w-px bg-line sm:top-5 sm:left-1/2 sm:h-px sm:w-full" }) : null,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `relative z-1 flex size-10 shrink-0 items-center justify-center rounded-full border text-sm font-medium ${index < current ? "border-accent bg-accent text-on-accent" : index === current ? "border-accent text-accent-ink ring-4 ring-accent-soft" : "border-line-strong text-ink-dim"}`,
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "relative z-1 flex flex-col pt-2 sm:pt-3", children: [
+          /* @__PURE__ */ jsx("strong", { className: "text-sm text-ink", children: step.label }),
+          step.description ? /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-ink-muted", children: step.description }) : null
+        ] })
+      ]
+    },
+    step.id
+  )) });
+}
+
+// src/molecules/tabs/locales.ts
+var TABS = {
+  label: { "en-US": "Tabs"}
+};
+function Tabs({
+  items,
+  value,
+  onValueChange,
+  label = TABS.label["en-US"],
+  className = ""
+}) {
+  const active = items.find((item) => item.value === value) ?? items[0];
+  function onKeyDown(event) {
+    const index = items.findIndex((item) => item.value === active?.value);
+    const direction = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    const target = event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : direction ? items[(index + direction + items.length) % items.length] : void 0;
+    if (!target || target.disabled) return;
+    event.preventDefault();
+    onValueChange(target.value);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `flex min-w-0 flex-col gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": label,
+        className: "flex min-w-0 gap-1 overflow-x-auto border-b border-line",
+        role: "tablist",
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-selected": item.value === active?.value,
+            id: `tab-${item.value}`,
+            className: `min-h-10 shrink-0 border-b-2 px-3 text-sm transition-colors duration-(--duration-fast) ease-out ${item.value === active?.value ? "border-accent font-medium text-ink" : "border-transparent text-ink-muted hover:border-line-strong hover:text-ink"}`,
+            disabled: item.disabled,
+            onClick: () => onValueChange(item.value),
+            onKeyDown,
+            role: "tab",
+            tabIndex: item.value === active?.value ? 0 : -1,
+            type: "button",
+            children: item.label
+          },
+          item.value
+        ))
+      }
+    ),
+    active ? /* @__PURE__ */ jsx("div", { "aria-labelledby": `tab-${active.value}`, role: "tabpanel", children: active.content }) : null
+  ] });
+}
+var SIDES = {
+  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+  bottom: "top-full left-1/2 mt-2 -translate-x-1/2",
+  left: "right-full top-1/2 mr-2 -translate-y-1/2",
+  right: "left-full top-1/2 ml-2 -translate-y-1/2"
+};
+function Tooltip({
+  id,
+  content,
+  side = "top",
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: `group relative inline-flex ${className}`, children: [
+    /* @__PURE__ */ jsx("span", { "aria-describedby": id, className: "inline-flex", children }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        id,
+        role: "tooltip",
+        className: `pointer-events-none absolute z-50 w-max max-w-64 rounded-sm border border-line-strong bg-raised px-2 py-1 text-2xs text-ink-soft opacity-0 shadow-popover transition-opacity duration-(--duration-fast) ease-out group-focus-within:opacity-100 group-hover:opacity-100 ${SIDES[side]}`,
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/molecules/toast/locales.ts
+var locales7 = { dismiss: "Dismiss notification" };
+var TONES5 = {
+  info: "border-info/35 bg-surface",
+  ok: "border-ok/35 bg-surface",
+  warn: "border-warn/35 bg-surface",
+  danger: "border-danger/35 bg-surface"
+};
+function Toast({
+  tone = "info",
+  title,
+  children,
+  onDismiss,
+  dismissLabel = locales7.dismiss,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      className: `flex items-start gap-4 rounded-md border p-4 shadow-popover ${TONES5[tone]} ${className}`,
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-ink", children: title }),
+          children ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-ink-muted", children }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": dismissLabel,
+            className: "rounded-xs px-1 text-xs text-ink-muted transition-colors duration-(--duration-fast) ease-out hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+            onClick: onDismiss,
+            type: "button",
+            children: "\xD7"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { Accordion, Banner, Breadcrumb, Callout, CardTitle, CommandMenu, Drawer, DropdownMenu, Empty, Field, FilterBar, ImagePreview, LoadError, MetricCard, PageHeader, Pagination, SnackbarStack, StatCard, Stepper, Tabs, Toast, Tooltip, TreeView, menuItemClass };
+//# sourceMappingURL=chunk-AHE2576G.js.map
+//# sourceMappingURL=chunk-AHE2576G.js.map