@revealui/presentation 0.2.0

package/dist/tooltip-oH4lAnkn.js

@@ -0,0 +1,2277 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { a as clsx, c as cn, B as Box } from "./Box-DDhRNK02.js";
+import React__default, { useState, useId, useCallback, forwardRef, createContext, useContext, useMemo, useRef, useEffect, useReducer } from "react";
+import { createPortal } from "react-dom";
+function Accordion({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("divide-y divide-zinc-200 dark:divide-zinc-700", className), children });
+}
+function AccordionItem({
+  title,
+  defaultOpen = false,
+  className,
+  children
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: `${id}-trigger`,
+        "aria-expanded": open,
+        "aria-controls": `${id}-content`,
+        onClick: () => setOpen((prev) => !prev),
+        className: "flex w-full items-center justify-between gap-4 py-4 text-left text-sm font-medium text-zinc-950 transition-colors hover:text-zinc-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-white dark:hover:text-zinc-300",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: title }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: clsx(
+                "size-4 shrink-0 text-zinc-400 transition-transform duration-200",
+                open && "rotate-180"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 6l4 4 4-4",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${id}-content`,
+        role: "region",
+        "aria-labelledby": `${id}-trigger`,
+        className: "pb-4 text-sm text-zinc-600 dark:text-zinc-400",
+        children
+      }
+    )
+  ] });
+}
+function useDataInteractive({
+  disabled = false
+} = {}) {
+  const [hover, setHover] = useState(false);
+  const [focus, setFocus] = useState(false);
+  const [active, setActive] = useState(false);
+  const onPointerEnter = useCallback(() => {
+    if (!disabled) setHover(true);
+  }, [disabled]);
+  const onPointerLeave = useCallback(() => {
+    setHover(false);
+    setActive(false);
+  }, []);
+  const onPointerDown = useCallback(() => {
+    if (!disabled) setActive(true);
+  }, [disabled]);
+  const onPointerUp = useCallback(() => {
+    setActive(false);
+  }, []);
+  const onFocus = useCallback(
+    (e) => {
+      if (!disabled && e.currentTarget.matches(":focus-visible")) {
+        setFocus(true);
+      }
+    },
+    [disabled]
+  );
+  const onBlur = useCallback(() => {
+    setFocus(false);
+  }, []);
+  return {
+    "data-hover": hover ? "" : void 0,
+    "data-focus": focus ? "" : void 0,
+    "data-active": active ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerDown,
+    onPointerUp,
+    onFocus,
+    onBlur
+  };
+}
+const Link = forwardRef(function Link2(props, ref) {
+  const interactiveProps = useDataInteractive();
+  return /* @__PURE__ */ jsx("a", { ...props, ...interactiveProps, ref });
+});
+const styles = {
+  base: [
+    // Base
+    "relative isolate inline-flex items-baseline justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
+    // Sizing
+    "px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/6",
+    // Focus
+    "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500",
+    // Disabled
+    "data-disabled:opacity-50",
+    // Icon
+    "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:my-1 sm:*:data-[slot=icon]:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-hover:[--btn-icon:ButtonText]"
+  ],
+  solid: [
+    // Optical border, implemented as the button background to avoid corner artifacts
+    "border-transparent bg-(--btn-border)",
+    // Dark mode: border is rendered on `after` so background is set to button background
+    "dark:bg-(--btn-bg)",
+    // Button background, implemented as foreground layer to stack on top of pseudo-border layer
+    "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(var(--radius-lg)-1px)] before:bg-(--btn-bg)",
+    // Drop shadow, applied to the inset `before` layer so it blends with the border
+    "before:shadow-sm",
+    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+    "dark:before:hidden",
+    // Dark mode: Subtle white outline is applied using a border
+    "dark:border-white/5",
+    // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
+    "after:absolute after:inset-0 after:-z-10 after:rounded-[calc(var(--radius-lg)-1px)]",
+    // Inner highlight shadow
+    "after:shadow-[inset_0_1px_--theme(--color-white/15%)]",
+    // White overlay on hover
+    "data-active:after:bg-(--btn-hover-overlay) data-hover:after:bg-(--btn-hover-overlay)",
+    // Dark mode: `after` layer expands to cover entire button
+    "dark:after:-inset-px dark:after:rounded-lg",
+    // Disabled
+    "data-disabled:before:shadow-none data-disabled:after:shadow-none"
+  ],
+  outline: [
+    // Base
+    "border-zinc-950/10 text-zinc-950 data-active:bg-zinc-950/2.5 data-hover:bg-zinc-950/2.5",
+    // Dark mode
+    "dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-active:bg-white/5 dark:data-hover:bg-white/5",
+    // Icon
+    "[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+  ],
+  plain: [
+    // Base
+    "border-transparent text-zinc-950 data-active:bg-zinc-950/5 data-hover:bg-zinc-950/5",
+    // Dark mode
+    "dark:text-white dark:data-active:bg-white/10 dark:data-hover:bg-white/10",
+    // Icon
+    "[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+  ],
+  colors: {
+    "dark/zinc": [
+      "text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+      "dark:text-white dark:[--btn-bg:var(--color-zinc-600)] dark:[--btn-hover-overlay:var(--color-white)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+    ],
+    light: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15",
+      "dark:text-white dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]",
+      "[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+    ],
+    "dark/white": [
+      "text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+      "dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:var(--color-zinc-950)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+    ],
+    dark: [
+      "text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+      "dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+    ],
+    white: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15",
+      "dark:[--btn-hover-overlay:var(--color-zinc-950)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-500)] data-hover:[--btn-icon:var(--color-zinc-500)]"
+    ],
+    zinc: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-zinc-600)] [--btn-border:var(--color-zinc-700)]/90",
+      "dark:[--btn-hover-overlay:var(--color-white)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+    ],
+    indigo: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-indigo-500)] [--btn-border:var(--color-indigo-600)]/90",
+      "[--btn-icon:var(--color-indigo-300)] data-active:[--btn-icon:var(--color-indigo-200)] data-hover:[--btn-icon:var(--color-indigo-200)]"
+    ],
+    cyan: [
+      "text-cyan-950 [--btn-bg:var(--color-cyan-300)] [--btn-border:var(--color-cyan-400)]/80 [--btn-hover-overlay:var(--color-white)]/25",
+      "[--btn-icon:var(--color-cyan-500)]"
+    ],
+    red: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-red-600)] [--btn-border:var(--color-red-700)]/90",
+      "[--btn-icon:var(--color-red-300)] data-active:[--btn-icon:var(--color-red-200)] data-hover:[--btn-icon:var(--color-red-200)]"
+    ],
+    orange: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-orange-500)] [--btn-border:var(--color-orange-600)]/90",
+      "[--btn-icon:var(--color-orange-300)] data-active:[--btn-icon:var(--color-orange-200)] data-hover:[--btn-icon:var(--color-orange-200)]"
+    ],
+    amber: [
+      "text-amber-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-amber-400)] [--btn-border:var(--color-amber-500)]/80",
+      "[--btn-icon:var(--color-amber-600)]"
+    ],
+    yellow: [
+      "text-yellow-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-yellow-300)] [--btn-border:var(--color-yellow-400)]/80",
+      "[--btn-icon:var(--color-yellow-600)] data-active:[--btn-icon:var(--color-yellow-700)] data-hover:[--btn-icon:var(--color-yellow-700)]"
+    ],
+    lime: [
+      "text-lime-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-lime-300)] [--btn-border:var(--color-lime-400)]/80",
+      "[--btn-icon:var(--color-lime-600)] data-active:[--btn-icon:var(--color-lime-700)] data-hover:[--btn-icon:var(--color-lime-700)]"
+    ],
+    green: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-green-600)] [--btn-border:var(--color-green-700)]/90",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    emerald: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-emerald-600)] [--btn-border:var(--color-emerald-700)]/90",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    teal: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-teal-600)] [--btn-border:var(--color-teal-700)]/90",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    sky: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-sky-500)] [--btn-border:var(--color-sky-600)]/80",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    blue: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-blue-600)] [--btn-border:var(--color-blue-700)]/90",
+      "[--btn-icon:var(--color-blue-400)] data-active:[--btn-icon:var(--color-blue-300)] data-hover:[--btn-icon:var(--color-blue-300)]"
+    ],
+    violet: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-violet-500)] [--btn-border:var(--color-violet-600)]/90",
+      "[--btn-icon:var(--color-violet-300)] data-active:[--btn-icon:var(--color-violet-200)] data-hover:[--btn-icon:var(--color-violet-200)]"
+    ],
+    purple: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-purple-500)] [--btn-border:var(--color-purple-600)]/90",
+      "[--btn-icon:var(--color-purple-300)] data-active:[--btn-icon:var(--color-purple-200)] data-hover:[--btn-icon:var(--color-purple-200)]"
+    ],
+    fuchsia: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-fuchsia-500)] [--btn-border:var(--color-fuchsia-600)]/90",
+      "[--btn-icon:var(--color-fuchsia-300)] data-active:[--btn-icon:var(--color-fuchsia-200)] data-hover:[--btn-icon:var(--color-fuchsia-200)]"
+    ],
+    pink: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-pink-500)] [--btn-border:var(--color-pink-600)]/90",
+      "[--btn-icon:var(--color-pink-300)] data-active:[--btn-icon:var(--color-pink-200)] data-hover:[--btn-icon:var(--color-pink-200)]"
+    ],
+    rose: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-rose-500)] [--btn-border:var(--color-rose-600)]/90",
+      "[--btn-icon:var(--color-rose-300)] data-active:[--btn-icon:var(--color-rose-200)] data-hover:[--btn-icon:var(--color-rose-200)]"
+    ]
+  }
+};
+const Button = forwardRef(function Button2({ color, outline, plain, className, children, ...props }, ref) {
+  const disabled = "disabled" in props ? props.disabled : false;
+  const interactiveProps = useDataInteractive({ disabled: disabled ?? false });
+  const classes = clsx(
+    className,
+    styles.base,
+    outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color ?? "dark/zinc"])
+  );
+  return typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, { ...props, className: classes, ref, children: /* @__PURE__ */ jsx(TouchTarget, { children }) }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...props,
+      ...interactiveProps,
+      className: clsx(classes, "cursor-default"),
+      ref,
+      children: /* @__PURE__ */ jsx(TouchTarget, { children })
+    }
+  );
+});
+function TouchTarget({ children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute top-1/2 left-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 pointer-fine:hidden",
+        "aria-hidden": "true"
+      }
+    ),
+    children
+  ] });
+}
+function Avatar({
+  src = null,
+  square = false,
+  initials,
+  alt = "",
+  className,
+  ...props
+}) {
+  const title = alt && alt.trim().length > 0 ? alt.trim() : "Avatar";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "avatar",
+      ...props,
+      className: clsx(
+        className,
+        // Basic layout
+        "inline-grid shrink-0 align-middle [--avatar-radius:20%] *:col-start-1 *:row-start-1",
+        "outline -outline-offset-1 outline-black/10 dark:outline-white/10",
+        // Border radius
+        square ? "rounded-(--avatar-radius) *:rounded-(--avatar-radius)" : "rounded-full *:rounded-full"
+      ),
+      children: [
+        initials && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-full fill-current p-[5%] text-[48px] font-medium uppercase select-none",
+            viewBox: "0 0 100 100",
+            "aria-hidden": alt && alt.trim().length > 0 ? void 0 : "true",
+            children: [
+              /* @__PURE__ */ jsx("title", { children: title }),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: "50%",
+                  y: "50%",
+                  alignmentBaseline: "middle",
+                  dominantBaseline: "middle",
+                  textAnchor: "middle",
+                  dy: ".125em",
+                  children: initials
+                }
+              )
+            ]
+          }
+        ),
+        src && /* @__PURE__ */ jsx("img", { className: "size-full", src, alt })
+      ]
+    }
+  );
+}
+forwardRef(function AvatarButton2({
+  src,
+  square = false,
+  initials,
+  alt,
+  className,
+  ...props
+}, ref) {
+  const disabled = "disabled" in props ? props.disabled : false;
+  const interactiveProps = useDataInteractive({ disabled: disabled ?? false });
+  const classes = clsx(
+    className,
+    square ? "rounded-[20%]" : "rounded-full",
+    "relative inline-grid focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500"
+  );
+  return typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, { ...props, className: classes, ref, children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Avatar, { src, square, initials, alt }) }) }) : /* @__PURE__ */ jsx("button", { type: "button", ...props, ...interactiveProps, className: classes, ref, children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Avatar, { src, square, initials, alt }) }) });
+});
+function AvatarGroup({
+  items,
+  max = 5,
+  size = "md",
+  className
+}) {
+  const sizeClasses = { xs: "size-6", sm: "size-8", md: "size-10", lg: "size-12" };
+  const overlapClass = { xs: "-ml-1.5", sm: "-ml-2", md: "-ml-3", lg: "-ml-4" };
+  const visible = items.slice(0, max);
+  const overflow = items.length - max;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", className), children: [
+    visible.map((item, i) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "ring-2 ring-white dark:ring-zinc-900",
+            sizeClasses[size],
+            i > 0 && overlapClass[size],
+            "rounded-full"
+          ),
+          children: /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: item.src,
+              initials: item.initials,
+              alt: item.alt ?? "",
+              className: "size-full"
+            }
+          )
+        },
+        i
+      );
+    }),
+    overflow > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          overlapClass[size],
+          sizeClasses[size],
+          "flex items-center justify-center rounded-full bg-zinc-200 text-xs font-medium text-zinc-600 ring-2 ring-white dark:bg-zinc-700 dark:text-zinc-300 dark:ring-zinc-900"
+        ),
+        role: "img",
+        "aria-label": `${overflow} more`,
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    )
+  ] });
+}
+function Breadcrumb({
+  items,
+  separator,
+  className
+}) {
+  const sep = separator ?? /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "none", className: "size-3.5 text-zinc-400", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 4l4 4-4 4",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: clsx("flex flex-wrap items-center gap-1.5 text-sm", className), children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items are positionally ordered with no stable ID
+      /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+        isLast || !item.href ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-current": isLast ? "page" : void 0,
+            className: clsx(
+              isLast ? "font-medium text-zinc-950 dark:text-white" : "text-zinc-500 dark:text-zinc-400"
+            ),
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: item.href,
+            className: "text-zinc-500 transition-colors hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white",
+            children: item.label
+          }
+        ),
+        !isLast && sep
+      ] }, index)
+    );
+  }) }) });
+}
+const CheckboxContext = React__default.createContext(null);
+const Checkbox$1 = React__default.forwardRef(
+  ({ checked, defaultChecked, disabled, onCheckedChange, className, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React__default.useState(
+      defaultChecked ?? false
+    );
+    const handleChange = (e) => {
+      if (disabled) return;
+      const newChecked = e.target.checked;
+      setInternalChecked(newChecked);
+      onCheckedChange?.(newChecked);
+    };
+    React__default.useEffect(() => {
+      if (checked !== void 0) {
+        setInternalChecked(checked);
+      }
+    }, [checked]);
+    return /* @__PURE__ */ jsx(CheckboxContext.Provider, { value: { state: internalChecked, disabled, onCheckedChange }, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        disabled,
+        checked: checked !== void 0 ? checked : internalChecked === "indeterminate" ? false : internalChecked,
+        ref: (el) => {
+          if (el) {
+            el.indeterminate = internalChecked === "indeterminate";
+          }
+          if (ref) {
+            if (typeof ref === "function") {
+              ref(el);
+            } else {
+              ref.current = el;
+            }
+          }
+        },
+        onChange: handleChange,
+        className: cn(
+          "peer h-4 w-4 shrink-0 rounded border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+          className
+        ),
+        "data-state": internalChecked === "indeterminate" ? "indeterminate" : internalChecked ? "checked" : "unchecked",
+        ...props
+      }
+    ) });
+  }
+);
+Checkbox$1.displayName = "Checkbox";
+const CheckboxIndicator = React__default.forwardRef(
+  ({ className, ...props }, ref) => {
+    const context = React__default.useContext(CheckboxContext);
+    if (!context) {
+      throw new Error("CheckboxIndicator must be used within a Checkbox");
+    }
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-state": context.state === "indeterminate" ? "indeterminate" : context.state ? "checked" : "unchecked",
+        ref,
+        className: cn("flex items-center justify-center text-current", className),
+        ...props,
+        children: [
+          context.state === true && "✔",
+          context.state === "indeterminate" && "−"
+        ]
+      }
+    );
+  }
+);
+CheckboxIndicator.displayName = "CheckboxIndicator";
+const variantStyles = {
+  info: {
+    wrapper: "bg-blue-50 ring-blue-200 dark:bg-blue-950/30 dark:ring-blue-800",
+    icon: "text-blue-600 dark:text-blue-400",
+    iconChar: "i"
+  },
+  warning: {
+    wrapper: "bg-amber-50 ring-amber-200 dark:bg-amber-950/30 dark:ring-amber-800",
+    icon: "text-amber-600 dark:text-amber-400",
+    iconChar: "!"
+  },
+  error: {
+    wrapper: "bg-red-50 ring-red-200 dark:bg-red-950/30 dark:ring-red-800",
+    icon: "text-red-600 dark:text-red-400",
+    iconChar: "✕"
+  },
+  success: {
+    wrapper: "bg-green-50 ring-green-200 dark:bg-green-950/30 dark:ring-green-800",
+    icon: "text-green-600 dark:text-green-400",
+    iconChar: "✓"
+  },
+  tip: {
+    wrapper: "bg-violet-50 ring-violet-200 dark:bg-violet-950/30 dark:ring-violet-800",
+    icon: "text-violet-600 dark:text-violet-400",
+    iconChar: "★"
+  }
+};
+function Callout({
+  variant = "info",
+  title,
+  icon,
+  className,
+  children
+}) {
+  const styles2 = variantStyles[variant];
+  return /* @__PURE__ */ jsx("div", { role: "note", className: clsx("rounded-xl p-4 ring-1", styles2.wrapper, className), children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: clsx("mt-0.5 shrink-0 text-sm font-bold", styles2.icon), "aria-hidden": "true", children: icon ?? styles2.iconChar }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      title && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-zinc-950 dark:text-white", children: title }),
+      /* @__PURE__ */ jsx("div", { className: clsx("text-sm text-zinc-700 dark:text-zinc-300", title && "mt-1"), children })
+    ] })
+  ] }) });
+}
+const FieldContext = createContext(null);
+function useFieldContext() {
+  return useContext(FieldContext);
+}
+function FieldProvider({ children, disabled = false }) {
+  const id = useId();
+  const value = useMemo(
+    () => ({
+      controlId: `${id}-control`,
+      labelId: `${id}-label`,
+      descriptionId: `${id}-description`,
+      errorId: `${id}-error`,
+      disabled
+    }),
+    [id, disabled]
+  );
+  return /* @__PURE__ */ jsx(FieldContext, { value, children });
+}
+function useFieldControlProps() {
+  const ctx = useFieldContext();
+  if (!ctx) return {};
+  return {
+    id: ctx.controlId,
+    "aria-labelledby": ctx.labelId,
+    "aria-describedby": ctx.descriptionId,
+    "data-disabled": ctx.disabled ? "" : void 0
+  };
+}
+function useFieldLabelProps() {
+  const ctx = useFieldContext();
+  if (!ctx) return {};
+  return {
+    id: ctx.labelId,
+    htmlFor: ctx.controlId,
+    "data-disabled": ctx.disabled ? "" : void 0
+  };
+}
+function useFieldDescriptionProps() {
+  const ctx = useFieldContext();
+  if (!ctx) return {};
+  return {
+    id: ctx.descriptionId,
+    "data-disabled": ctx.disabled ? "" : void 0
+  };
+}
+function useFieldErrorProps() {
+  const ctx = useFieldContext();
+  if (!ctx) return {};
+  return {
+    id: ctx.errorId,
+    "data-disabled": ctx.disabled ? "" : void 0
+  };
+}
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = isControlled ? controlledValue : internalValue;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback(
+    (next) => {
+      const resolvedValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) {
+        setInternalValue(resolvedValue);
+      }
+      onChangeRef.current?.(resolvedValue);
+    },
+    [isControlled, value]
+  );
+  return [value, setValue];
+}
+function useToggle({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  disabled = false
+} = {}) {
+  const [checked, setChecked] = useControllableState({
+    value: controlledChecked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  const toggle = useCallback(() => {
+    if (!disabled) {
+      setChecked((prev) => !prev);
+    }
+  }, [disabled, setChecked]);
+  const onClick = useCallback(() => {
+    toggle();
+  }, [toggle]);
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    [toggle]
+  );
+  return {
+    checked,
+    toggle,
+    toggleProps: {
+      "aria-checked": checked,
+      "data-checked": checked ? "" : void 0,
+      tabIndex: 0,
+      onClick,
+      onKeyDown
+    }
+  };
+}
+function CheckboxGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "control",
+      ...props,
+      className: clsx(
+        className,
+        // Basic groups
+        "space-y-3",
+        // With descriptions
+        "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      )
+    }
+  );
+}
+function CheckboxField({
+  className,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(FieldProvider, { disabled, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field",
+      "data-disabled": disabled ? "" : void 0,
+      ...props,
+      className: clsx(
+        className,
+        // Base layout
+        "grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]",
+        // Control layout
+        "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1",
+        // Label layout
+        "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1",
+        // Description layout
+        "*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2",
+        // With description
+        "has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      )
+    }
+  ) });
+}
+const base = [
+  // Basic layout
+  "relative isolate flex size-4.5 items-center justify-center rounded-[0.3125rem] sm:size-4",
+  // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+  "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow-sm",
+  // Background color when checked
+  "group-data-checked:before:bg-(--checkbox-checked-bg)",
+  // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+  "dark:before:hidden",
+  // Background color applied to control in dark mode
+  "dark:bg-white/5 dark:group-data-checked:bg-(--checkbox-checked-bg)",
+  // Border
+  "border border-zinc-950/15 group-data-checked:border-transparent group-data-hover:group-data-checked:border-transparent group-data-hover:border-zinc-950/30 group-data-checked:bg-(--checkbox-checked-border)",
+  "dark:border-white/15 dark:group-data-checked:border-white/5 dark:group-data-hover:group-data-checked:border-white/5 dark:group-data-hover:border-white/30",
+  // Inner highlight shadow
+  "after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_--theme(--color-white/15%)]",
+  "dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-checked:after:block",
+  // Focus ring
+  "group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500",
+  // Disabled state
+  "group-data-disabled:opacity-50",
+  "group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--checkbox-check:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent",
+  "dark:group-data-disabled:border-white/20 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:[--checkbox-check:var(--color-white)]/50 dark:group-data-checked:group-data-disabled:after:hidden",
+  // Forced colors mode
+  "forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-disabled:[--checkbox-check:Highlight]",
+  "dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-disabled:[--checkbox-check:Highlight]"
+];
+const colors = {
+  "dark/zinc": [
+    "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90",
+    "dark:[--checkbox-checked-bg:var(--color-zinc-600)]"
+  ],
+  "dark/white": [
+    "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90",
+    "dark:[--checkbox-check:var(--color-zinc-900)] dark:[--checkbox-checked-bg:var(--color-white)] dark:[--checkbox-checked-border:var(--color-zinc-950)]/15"
+  ],
+  white: "[--checkbox-check:var(--color-zinc-900)] [--checkbox-checked-bg:var(--color-white)] [--checkbox-checked-border:var(--color-zinc-950)]/15",
+  dark: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90",
+  zinc: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-600)] [--checkbox-checked-border:var(--color-zinc-700)]/90",
+  red: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-red-600)] [--checkbox-checked-border:var(--color-red-700)]/90",
+  orange: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-orange-500)] [--checkbox-checked-border:var(--color-orange-600)]/90",
+  amber: "[--checkbox-check:var(--color-amber-950)] [--checkbox-checked-bg:var(--color-amber-400)] [--checkbox-checked-border:var(--color-amber-500)]/80",
+  yellow: "[--checkbox-check:var(--color-yellow-950)] [--checkbox-checked-bg:var(--color-yellow-300)] [--checkbox-checked-border:var(--color-yellow-400)]/80",
+  lime: "[--checkbox-check:var(--color-lime-950)] [--checkbox-checked-bg:var(--color-lime-300)] [--checkbox-checked-border:var(--color-lime-400)]/80",
+  green: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-green-600)] [--checkbox-checked-border:var(--color-green-700)]/90",
+  emerald: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-emerald-600)] [--checkbox-checked-border:var(--color-emerald-700)]/90",
+  teal: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-teal-600)] [--checkbox-checked-border:var(--color-teal-700)]/90",
+  cyan: "[--checkbox-check:var(--color-cyan-950)] [--checkbox-checked-bg:var(--color-cyan-300)] [--checkbox-checked-border:var(--color-cyan-400)]/80",
+  sky: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-sky-500)] [--checkbox-checked-border:var(--color-sky-600)]/80",
+  blue: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-blue-600)] [--checkbox-checked-border:var(--color-blue-700)]/90",
+  indigo: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-indigo-500)] [--checkbox-checked-border:var(--color-indigo-600)]/90",
+  violet: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-violet-500)] [--checkbox-checked-border:var(--color-violet-600)]/90",
+  purple: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-purple-500)] [--checkbox-checked-border:var(--color-purple-600)]/90",
+  fuchsia: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-fuchsia-500)] [--checkbox-checked-border:var(--color-fuchsia-600)]/90",
+  pink: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-pink-500)] [--checkbox-checked-border:var(--color-pink-600)]/90",
+  rose: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-rose-500)] [--checkbox-checked-border:var(--color-rose-600)]/90"
+};
+function Checkbox({
+  color = "dark/zinc",
+  className,
+  checked: controlledChecked,
+  defaultChecked,
+  onChange,
+  disabled,
+  indeterminate,
+  name,
+  value,
+  ...props
+}) {
+  const { checked, toggleProps } = useToggle({
+    checked: controlledChecked,
+    defaultChecked,
+    onChange,
+    disabled
+  });
+  const interactiveProps = useDataInteractive({ disabled });
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === " ") {
+        e.preventDefault();
+        toggleProps.onKeyDown(e);
+      }
+    },
+    [toggleProps]
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "control",
+      role: "checkbox",
+      "aria-checked": indeterminate ? "mixed" : checked,
+      "data-checked": checked ? "" : void 0,
+      "data-indeterminate": indeterminate ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: disabled ? void 0 : 0,
+      onClick: disabled ? void 0 : toggleProps.onClick,
+      onKeyDown: disabled ? void 0 : handleKeyDown,
+      ...interactiveProps,
+      ...props,
+      className: clsx(className, "group inline-flex focus:outline-hidden"),
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? value ?? "on" : "" }),
+        /* @__PURE__ */ jsx("span", { className: clsx([base, colors[color]]), children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-4 stroke-(--checkbox-check) opacity-0 group-data-checked:opacity-100 sm:h-3.5 sm:w-3.5",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ jsx("title", { children: "Checkmark" }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-100 group-data-indeterminate:opacity-0",
+                  d: "M3 8L6 11L11 3.5",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-0 group-data-indeterminate:opacity-100",
+                  d: "M3 7H11",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function CodeBlock({
+  code,
+  language,
+  filename,
+  showCopy = true,
+  className
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [code]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx("overflow-hidden rounded-xl bg-zinc-950 ring-1 ring-zinc-800", className), children: [
+    (filename || language || showCopy) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-zinc-800 px-4 py-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        filename && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-400", children: filename }),
+        language && !filename && /* @__PURE__ */ jsx("span", { className: "rounded bg-zinc-800 px-1.5 py-0.5 text-xs text-zinc-400", children: language })
+      ] }),
+      showCopy && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          "aria-label": copied ? "Copied" : "Copy code",
+          className: "rounded px-2 py-1 text-xs text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500",
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed text-zinc-300", children: /* @__PURE__ */ jsx("code", { children: code }) })
+  ] });
+}
+function useEscapeKey(onEscape, enabled = true) {
+  const callbackRef = useRef(onEscape);
+  callbackRef.current = onEscape;
+  useEffect(() => {
+    if (!enabled) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        callbackRef.current();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [enabled]);
+}
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "textarea:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function useFocusTrap(containerRef, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const previouslyFocused = document.activeElement;
+    const focusableElements = getFocusableElements(container);
+    if (focusableElements.length > 0) {
+      focusableElements[0]?.focus();
+    } else {
+      container.setAttribute("tabindex", "-1");
+      container.focus();
+    }
+    function handleKeyDown(e) {
+      if (e.key !== "Tab" || !container) return;
+      const focusable = getFocusableElements(container);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last?.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first?.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      previouslyFocused?.focus();
+    };
+  }, [containerRef, enabled]);
+}
+function useScrollLock(enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [enabled]);
+}
+function useTransition(show) {
+  const nodeRef = useRef(null);
+  const [, setTick] = useState(0);
+  const rerender = useCallback(() => setTick((t) => t + 1), []);
+  const phase = useRef(
+    show ? "visible" : "hidden"
+  );
+  const prevShow = useRef(show);
+  const cleanupRef = useRef(null);
+  useEffect(() => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+    if (show && !prevShow.current) {
+      phase.current = "enter-from";
+      rerender();
+      const frame1 = requestAnimationFrame(() => {
+        const frame2 = requestAnimationFrame(() => {
+          if (phase.current !== "enter-from") return;
+          phase.current = "enter-to";
+          rerender();
+          const node = nodeRef.current;
+          if (!node) {
+            phase.current = "visible";
+            rerender();
+            return;
+          }
+          let cleaned = false;
+          const done = () => {
+            if (cleaned) return;
+            cleaned = true;
+            phase.current = "visible";
+            rerender();
+          };
+          node.addEventListener("transitionend", done, { once: true });
+          const fallback = setTimeout(done, 500);
+          cleanupRef.current = () => {
+            cleaned = true;
+            node.removeEventListener("transitionend", done);
+            clearTimeout(fallback);
+          };
+        });
+        cleanupRef.current = () => cancelAnimationFrame(frame2);
+      });
+      cleanupRef.current = () => cancelAnimationFrame(frame1);
+    } else if (!show && prevShow.current) {
+      phase.current = "leave";
+      rerender();
+      const node = nodeRef.current;
+      if (!node) {
+        phase.current = "hidden";
+        rerender();
+        prevShow.current = show;
+        return;
+      }
+      let cleaned = false;
+      const done = () => {
+        if (cleaned) return;
+        cleaned = true;
+        phase.current = "hidden";
+        rerender();
+      };
+      node.addEventListener("transitionend", done, { once: true });
+      const fallback = setTimeout(done, 500);
+      cleanupRef.current = () => {
+        cleaned = true;
+        node.removeEventListener("transitionend", done);
+        clearTimeout(fallback);
+      };
+    }
+    prevShow.current = show;
+  }, [show, rerender]);
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+    };
+  }, []);
+  const p = phase.current;
+  return {
+    mounted: p !== "hidden",
+    nodeRef,
+    transitionProps: {
+      "data-closed": p === "enter-from" || p === "leave" || p === "hidden" ? "" : void 0,
+      "data-enter": p === "enter-from" || p === "enter-to" ? "" : void 0,
+      "data-leave": p === "leave" ? "" : void 0,
+      "data-transition": p === "enter-from" || p === "enter-to" || p === "leave" ? "" : void 0
+    }
+  };
+}
+const sideClasses$1 = {
+  left: "inset-y-0 left-0 h-full w-full max-w-sm data-closed:-translate-x-full",
+  right: "inset-y-0 right-0 h-full w-full max-w-sm data-closed:translate-x-full",
+  top: "inset-x-0 top-0 w-full max-h-[50vh] data-closed:-translate-y-full",
+  bottom: "inset-x-0 bottom-0 w-full max-h-[50vh] data-closed:translate-y-full"
+};
+function Drawer({
+  open,
+  onClose,
+  side = "right",
+  className,
+  children
+}) {
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const backdrop = useTransition(open);
+  const panel = useTransition(open);
+  useScrollLock(open);
+  useFocusTrap(panelRef, open);
+  useEscapeKey(onClose, open);
+  const handleBackdropClick = useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose]
+  );
+  if (!(backdrop.mounted || panel.mounted)) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [
+      backdrop.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: backdrop.nodeRef,
+          ...backdrop.transitionProps,
+          onClick: handleBackdropClick,
+          className: "fixed inset-0 z-40 bg-zinc-950/25 transition duration-200 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in dark:bg-zinc-950/50"
+        }
+      ),
+      panel.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            panelRef.current = node;
+            panel.nodeRef.current = node;
+          },
+          ...panel.transitionProps,
+          className: clsx(
+            "fixed z-50 overflow-y-auto bg-white shadow-xl ring-1 ring-zinc-950/10 transition duration-300 ease-in-out dark:bg-zinc-900 dark:ring-white/10",
+            sideClasses$1[side],
+            className
+          ),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function DrawerHeader({
+  onClose,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-base font-semibold text-zinc-950 dark:text-white", children }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close drawer",
+            onClick: onClose,
+            className: "rounded-md p-1 text-zinc-400 hover:text-zinc-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:hover:text-zinc-200",
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M4 4l8 8M12 4l-8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+function DrawerBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: clsx("px-6 py-4", className) });
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: clsx(
+        "flex items-center justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700",
+        className
+      )
+    }
+  );
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex flex-col items-center justify-center rounded-xl border border-dashed border-zinc-300 px-6 py-16 text-center dark:border-zinc-700",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400", children: icon }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-zinc-950 dark:text-white", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-sm text-sm text-zinc-500 dark:text-zinc-400", children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "mt-6", children: action })
+      ]
+    }
+  );
+}
+function InputGroup({ children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "control",
+      className: clsx(
+        "relative isolate block",
+        "has-[[data-slot=icon]:first-child]:[&_input]:pl-10 has-[[data-slot=icon]:last-child]:[&_input]:pr-10 sm:has-[[data-slot=icon]:first-child]:[&_input]:pl-8 sm:has-[[data-slot=icon]:last-child]:[&_input]:pr-8",
+        "*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:top-2.5 sm:*:data-[slot=icon]:size-4",
+        "[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5",
+        "*:data-[slot=icon]:text-zinc-500 dark:*:data-[slot=icon]:text-zinc-400"
+      ),
+      children
+    }
+  );
+}
+const dateTypes = ["date", "datetime-local", "month", "time", "week"];
+const Input = forwardRef(function Input2({ className, disabled, invalid, ...props }, ref) {
+  const interactiveProps = useDataInteractive({ disabled });
+  const fieldProps = useFieldControlProps();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "control",
+      className: clsx([
+        className,
+        // Basic layout
+        "relative block w-full",
+        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+        "before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        "dark:before:hidden",
+        // Focus ring
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500",
+        // Disabled state
+        "has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none"
+      ]),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          disabled,
+          ...props,
+          ...interactiveProps,
+          ...fieldProps,
+          "data-invalid": invalid ? "" : void 0,
+          "data-disabled": disabled ? "" : void 0,
+          className: clsx([
+            // Date classes
+            props.type && dateTypes.includes(props.type) && [
+              "[&::-webkit-datetime-edit-fields-wrapper]:p-0",
+              "[&::-webkit-date-and-time-value]:min-h-[1.5em]",
+              "[&::-webkit-datetime-edit]:inline-flex",
+              "[&::-webkit-datetime-edit]:p-0",
+              "[&::-webkit-datetime-edit-year-field]:p-0",
+              "[&::-webkit-datetime-edit-month-field]:p-0",
+              "[&::-webkit-datetime-edit-day-field]:p-0",
+              "[&::-webkit-datetime-edit-hour-field]:p-0",
+              "[&::-webkit-datetime-edit-minute-field]:p-0",
+              "[&::-webkit-datetime-edit-second-field]:p-0",
+              "[&::-webkit-datetime-edit-millisecond-field]:p-0",
+              "[&::-webkit-datetime-edit-meridiem-field]:p-0"
+            ],
+            // Basic layout
+            "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
+            // Typography
+            "text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white",
+            // Border
+            "border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20",
+            // Background color
+            "bg-transparent dark:bg-white/5",
+            // Hide default focus styles
+            "focus:outline-hidden",
+            // Invalid state
+            "data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600",
+            // Disabled state
+            "data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15",
+            // System icons
+            "dark:scheme-dark"
+          ])
+        }
+      )
+    }
+  );
+});
+function Kbd({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ...props,
+      className: clsx(
+        "inline-flex items-center rounded border border-zinc-300 bg-zinc-100 px-1.5 py-0.5 font-mono text-xs font-medium text-zinc-700 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300",
+        className
+      ),
+      children
+    }
+  );
+}
+function KbdShortcut({
+  keys,
+  separator = "+",
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: clsx("inline-flex items-center gap-1", className), children: keys.map((key, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: keyboard shortcut keys are positionally ordered with no stable ID
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(Kbd, { children: key }),
+      i < keys.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-400", children: separator })
+    ] }, i)
+  )) });
+}
+const trackClasses = {
+  blue: "bg-blue-600 dark:bg-blue-500",
+  green: "bg-green-600 dark:bg-green-500",
+  red: "bg-red-600 dark:bg-red-500",
+  amber: "bg-amber-500 dark:bg-amber-400",
+  violet: "bg-violet-600 dark:bg-violet-500",
+  zinc: "bg-zinc-600 dark:bg-zinc-400"
+};
+function Progress({
+  value,
+  max = 100,
+  color = "blue",
+  size = "md",
+  label,
+  showValue = false,
+  className
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const heightClass = { xs: "h-1", sm: "h-1.5", md: "h-2.5", lg: "h-4" }[size];
+  return /* @__PURE__ */ jsxs("div", { className: clsx("w-full", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: label }),
+      showValue && /* @__PURE__ */ jsxs("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label,
+        className: clsx(
+          "w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700",
+          heightClass
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "h-full rounded-full transition-all duration-300 ease-in-out",
+              trackClasses[color]
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+function Rating({
+  value: controlledValue,
+  defaultValue = 0,
+  max = 5,
+  onChange,
+  readOnly = false,
+  size = "md",
+  label,
+  className
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [hovered, setHovered] = useState(0);
+  const id = useId();
+  const value = controlledValue ?? internalValue;
+  const sizeClass = { sm: "size-4", md: "size-6", lg: "size-8" }[size];
+  const handleClick = useCallback(
+    (star) => {
+      if (readOnly) return;
+      setInternalValue(star);
+      onChange?.(star);
+    },
+    [readOnly, onChange]
+  );
+  const display = hovered > 0 ? hovered : value;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label && /* @__PURE__ */ jsx("span", { id, className: "sr-only", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: readOnly ? "img" : "radiogroup",
+        "aria-label": label ?? `Rating: ${value} out of ${max}`,
+        "aria-labelledby": label ? id : void 0,
+        className: "flex items-center gap-0.5",
+        children: Array.from({ length: max }).map((_, i) => {
+          const star = i + 1;
+          const filled = star <= display;
+          return (
+            // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-checked and aria-label are valid on role="radio" per WAI-ARIA spec
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: readOnly ? void 0 : "radio",
+                "aria-checked": readOnly ? void 0 : value === star,
+                "aria-label": readOnly ? void 0 : `${star} star${star !== 1 ? "s" : ""}`,
+                disabled: readOnly,
+                onClick: () => handleClick(star),
+                onMouseEnter: () => !readOnly && setHovered(star),
+                onMouseLeave: () => !readOnly && setHovered(0),
+                className: clsx(
+                  sizeClass,
+                  "transition-colors",
+                  readOnly ? "cursor-default" : "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    "aria-hidden": "true",
+                    className: clsx(
+                      "size-full",
+                      filled ? "fill-amber-400 text-amber-400" : "fill-zinc-200 text-zinc-200 dark:fill-zinc-700 dark:text-zinc-700"
+                    ),
+                    children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+                  }
+                )
+              },
+              star
+            )
+          );
+        })
+      }
+    )
+  ] });
+}
+const Check = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Selected" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 12l4 4L18 8" })
+      ]
+    }
+  );
+};
+const ChevronUp = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Scroll up" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 15.75l-7.5-7.5-7.5 7.5" })
+      ]
+    }
+  );
+};
+const ChevronDown = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Scroll down" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 8.25l7.5 7.5 7.5-7.5" })
+      ]
+    }
+  );
+};
+const Select$1 = React__default.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { ref, className: cn(className), ...props, children })
+);
+Select$1.displayName = "Select";
+const SelectGroup = React__default.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { ref, className: cn(className), ...props, children })
+);
+SelectGroup.displayName = "SelectGroup";
+const SelectValue = React__default.forwardRef(
+  ({ placeholder, children, value, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, ...props, children: children || placeholder || value })
+);
+SelectValue.displayName = "SelectValue";
+const SelectTrigger = React__default.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn(
+        "flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-inherit ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" })
+      ]
+    }
+  )
+);
+SelectTrigger.displayName = "SelectTrigger";
+const SelectScrollUpButton = React__default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+    }
+  )
+);
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+const SelectScrollDownButton = React__default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+    }
+  )
+);
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+const SelectContent = React__default.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded border bg-card text-popover-foreground shadow-md",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx("div", { className: "p-1", children }),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  )
+);
+SelectContent.displayName = "SelectContent";
+const SelectLabel = React__default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ref, ...props })
+);
+SelectLabel.displayName = "SelectLabel";
+const SelectItem = React__default.forwardRef(
+  ({ children, className, value, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      "data-value": value,
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  )
+);
+SelectItem.displayName = "SelectItem";
+const SelectSeparator = React__default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { className: cn("-mx-1 my-1 h-px bg-muted", className), ref, ...props })
+);
+SelectSeparator.displayName = "SelectSeparator";
+const Select = forwardRef(function Select2({ className, multiple, disabled, invalid, ...props }, ref) {
+  const interactiveProps = useDataInteractive({ disabled });
+  const fieldProps = useFieldControlProps();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "control",
+      className: clsx([
+        className,
+        // Basic layout
+        "group relative block w-full",
+        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+        "before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        "dark:before:hidden",
+        // Focus ring
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset has-data-focus:after:ring-2 has-data-focus:after:ring-blue-500",
+        // Disabled state
+        "has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none"
+      ]),
+      children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            ref,
+            multiple,
+            disabled,
+            ...props,
+            ...interactiveProps,
+            ...fieldProps,
+            "data-invalid": invalid ? "" : void 0,
+            "data-disabled": disabled ? "" : void 0,
+            className: clsx([
+              // Basic layout
+              "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
+              // Horizontal padding
+              multiple ? "px-[calc(--spacing(3.5)-1px)] sm:px-[calc(--spacing(3)-1px)]" : "pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)]",
+              // Options (multi-select)
+              "[&_optgroup]:font-semibold",
+              // Typography
+              "text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white dark:*:text-white",
+              // Border
+              "border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20",
+              // Background color
+              "bg-transparent dark:bg-white/5 dark:*:bg-zinc-800",
+              // Hide default focus styles
+              "focus:outline-hidden",
+              // Invalid state
+              "data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600",
+              // Disabled state
+              "data-disabled:border-zinc-950/20 data-disabled:opacity-100 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15"
+            ])
+          }
+        ),
+        !multiple && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-5 stroke-zinc-500 group-has-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]",
+            viewBox: "0 0 16 16",
+            "aria-hidden": "true",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M5.75 10.75L8 13L10.25 10.75",
+                  strokeWidth: 1.5,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M10.25 5.25L8 3L5.75 5.25",
+                  strokeWidth: 1.5,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+});
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      ...props,
+      className: clsx("animate-pulse rounded-md bg-zinc-200 dark:bg-zinc-700", className)
+    }
+  );
+}
+function SkeletonText({ lines = 3, className }) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("space-y-2", className), children: Array.from({ length: lines }).map((_, i) => {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: clsx("h-4", i === lines - 1 && lines > 1 ? "w-4/5" : "w-full")
+      },
+      i
+    );
+  }) });
+}
+function SkeletonCard({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-xl border border-zinc-200 p-4 dark:border-zinc-700", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-10 rounded-full" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SkeletonText, { lines: 3, className: "mt-4" })
+  ] });
+}
+function Slider({
+  value: controlledValue,
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  disabled = false,
+  label,
+  showValue = false,
+  className
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = controlledValue ?? internalValue;
+  const id = useId();
+  const handleChange = useCallback(
+    (e) => {
+      const next = Number(e.target.value);
+      setInternalValue(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const percentage = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("w-full", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: value })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        disabled,
+        onChange: handleChange,
+        style: { "--slider-pct": `${percentage}%` },
+        className: clsx(
+          "h-2 w-full cursor-pointer appearance-none rounded-full outline-none",
+          "bg-zinc-200 dark:bg-zinc-700",
+          "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none",
+          "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow-sm",
+          "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-white [&::-webkit-slider-thumb]:dark:ring-zinc-900",
+          "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none",
+          "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-blue-600",
+          "focus-visible:[&::-webkit-slider-thumb]:outline-2 focus-visible:[&::-webkit-slider-thumb]:outline-offset-2 focus-visible:[&::-webkit-slider-thumb]:outline-blue-500",
+          disabled && "cursor-not-allowed opacity-50"
+        )
+      }
+    )
+  ] });
+}
+function Stat({
+  label,
+  value,
+  change,
+  trend,
+  description,
+  icon,
+  className
+}) {
+  const trendColor = {
+    up: "text-green-600 dark:text-green-400",
+    down: "text-red-600 dark:text-red-400",
+    neutral: "text-zinc-500 dark:text-zinc-400"
+  };
+  const trendArrow = { up: "↑", down: "↓", neutral: "→" };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "rounded-xl bg-white p-6 ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: label }),
+          icon && /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-zinc-100 p-2 dark:bg-zinc-800", children: icon })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white", children: value }),
+        (change || description) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+          change && trend && /* @__PURE__ */ jsxs("span", { className: clsx("text-sm font-medium", trendColor[trend]), children: [
+            trendArrow[trend],
+            " ",
+            change
+          ] }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function StatGroup({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", className), children });
+}
+function Stepper({
+  steps,
+  orientation = "horizontal",
+  className
+}) {
+  return orientation === "vertical" ? /* @__PURE__ */ jsx(StepperVertical, { steps, className }) : /* @__PURE__ */ jsx(StepperHorizontal, { steps, className });
+}
+function StepIcon({ status }) {
+  if (status === "complete") {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-blue-600", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4 text-white", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M3 8l3.5 3.5L13 4",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }) });
+  }
+  if (status === "current") {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border-2 border-blue-600 bg-white dark:bg-zinc-900", children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-blue-600" }) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border-2 border-zinc-300 bg-white dark:border-zinc-600 dark:bg-zinc-900", children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent" }) });
+}
+function StepperHorizontal({ steps, className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", children: /* @__PURE__ */ jsx("ol", { className: clsx("flex items-center", className), children: steps.map((step, index) => {
+    const isLast = index === steps.length - 1;
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: stepper steps are positionally ordered with no stable ID
+      /* @__PURE__ */ jsxs("li", { className: clsx("flex items-center", !isLast && "flex-1"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(StepIcon, { status: step.status }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(
+                "text-xs font-medium",
+                step.status === "current" ? "text-blue-600" : step.status === "complete" ? "text-zinc-950 dark:text-white" : "text-zinc-400 dark:text-zinc-500"
+              ),
+              children: step.label
+            }
+          )
+        ] }),
+        !isLast && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: clsx(
+              "mx-3 h-px flex-1",
+              step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700"
+            )
+          }
+        )
+      ] }, index)
+    );
+  }) }) });
+}
+function StepperVertical({ steps, className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", children: /* @__PURE__ */ jsx("ol", { className: clsx("space-y-0", className), children: steps.map((step, index) => {
+    const isLast = index === steps.length - 1;
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: stepper steps are positionally ordered with no stable ID
+      /* @__PURE__ */ jsxs("li", { className: "relative flex gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(StepIcon, { status: step.status }),
+          !isLast && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: clsx(
+                "w-px flex-1",
+                step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: clsx("pb-6 pt-1", isLast && "pb-0"), children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: clsx(
+                "text-sm font-medium",
+                step.status === "current" ? "text-blue-600" : step.status === "complete" ? "text-zinc-950 dark:text-white" : "text-zinc-400 dark:text-zinc-500"
+              ),
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400", children: step.description })
+        ] })
+      ] }, index)
+    );
+  }) }) });
+}
+const TabsContext = createContext(null);
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs subcomponents must be used inside <Tabs>");
+  return ctx;
+}
+function Tabs({
+  defaultTab,
+  value,
+  onChange,
+  className,
+  children
+}) {
+  const baseId = useId();
+  const [internalTab, setInternalTab] = useState(defaultTab ?? "");
+  const activeTab = value ?? internalTab;
+  const setActiveTab = useCallback(
+    (id) => {
+      setInternalTab(id);
+      onChange?.(id);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(TabsContext, { value: { activeTab, setActiveTab, baseId }, children: /* @__PURE__ */ jsx("div", { className, children }) });
+}
+function TabList({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: clsx("flex border-b border-zinc-200 dark:border-zinc-700", className),
+      children
+    }
+  );
+}
+function Tab({
+  id,
+  className,
+  children
+}) {
+  const { activeTab, setActiveTab, baseId } = useTabsContext();
+  const isActive = activeTab === id;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${baseId}-tab-${id}`,
+      "aria-controls": `${baseId}-panel-${id}`,
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
+      onClick: () => setActiveTab(id),
+      className: clsx(
+        className,
+        "relative -mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500",
+        isActive ? "border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
+      ),
+      children
+    }
+  );
+}
+function TabPanel({
+  id,
+  className,
+  children
+}) {
+  const { activeTab, baseId } = useTabsContext();
+  if (activeTab !== id) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${baseId}-panel-${id}`,
+      "aria-labelledby": `${baseId}-tab-${id}`,
+      tabIndex: 0,
+      className: clsx("focus-visible:outline-none", className),
+      children
+    }
+  );
+}
+const Textarea = forwardRef(function Textarea2({ className, resizable = true, disabled, invalid, ...props }, ref) {
+  const interactiveProps = useDataInteractive({ disabled });
+  const fieldProps = useFieldControlProps();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "control",
+      className: clsx([
+        className,
+        // Basic layout
+        "relative block w-full",
+        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+        "before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        "dark:before:hidden",
+        // Focus ring
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500",
+        // Disabled state
+        "has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none"
+      ]),
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          disabled,
+          ...props,
+          ...interactiveProps,
+          ...fieldProps,
+          "data-invalid": invalid ? "" : void 0,
+          "data-disabled": disabled ? "" : void 0,
+          className: clsx([
+            // Basic layout
+            "relative block h-full w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
+            // Typography
+            "text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white",
+            // Border
+            "border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20",
+            // Background color
+            "bg-transparent dark:bg-white/5",
+            // Hide default focus styles
+            "focus:outline-hidden",
+            // Invalid state
+            "data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600",
+            // Disabled state
+            "disabled:border-zinc-950/20 dark:disabled:border-white/15 dark:disabled:bg-white/2.5 dark:data-hover:disabled:border-white/15",
+            // Resizable
+            resizable ? "resize-y" : "resize-none"
+          ])
+        }
+      )
+    }
+  );
+});
+function Timeline({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("ol", { className: clsx("relative", className), children });
+}
+function TimelineItem({
+  icon,
+  date,
+  title,
+  description,
+  isLast = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: clsx("relative flex gap-4", !isLast && "pb-8", className), children: [
+    !isLast && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "absolute left-4 top-8 -bottom-0 w-px bg-zinc-200 dark:bg-zinc-700"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full bg-white ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-700", children: icon ?? /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-zinc-400 dark:bg-zinc-500" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-0.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-zinc-950 dark:text-white", children: title }),
+        date && /* @__PURE__ */ jsx("time", { className: "shrink-0 text-xs text-zinc-400 dark:text-zinc-500", children: date })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-600 dark:text-zinc-400", children: description })
+    ] })
+  ] });
+}
+function toastReducer(state, action) {
+  switch (action.type) {
+    case "ADD":
+      return [...state, action.toast];
+    case "REMOVE":
+      return state.filter((t) => t.id !== action.id);
+  }
+}
+const ToastContext = createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, dispatch] = useReducer(toastReducer, []);
+  const addToast = useCallback((toast) => {
+    const id = Math.random().toString(36).slice(2);
+    const duration = toast.duration ?? 5e3;
+    dispatch({ type: "ADD", toast: { ...toast, id } });
+    if (duration > 0) {
+      setTimeout(() => dispatch({ type: "REMOVE", id }), duration);
+    }
+    return id;
+  }, []);
+  const removeToast = useCallback((id) => {
+    dispatch({ type: "REMOVE", id });
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsx(ToastList, { toasts, onRemove: removeToast }), document.body)
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
+const variantClasses = {
+  default: "bg-white dark:bg-zinc-800 ring-zinc-950/10 dark:ring-white/10",
+  success: "bg-white dark:bg-zinc-800 ring-green-500/30",
+  error: "bg-white dark:bg-zinc-800 ring-red-500/30",
+  warning: "bg-white dark:bg-zinc-800 ring-amber-500/30",
+  info: "bg-white dark:bg-zinc-800 ring-blue-500/30"
+};
+const variantIconClasses = {
+  default: "hidden",
+  success: "text-green-500",
+  error: "text-red-500",
+  warning: "text-amber-500",
+  info: "text-blue-500"
+};
+const variantIcons = {
+  default: "",
+  success: "✓",
+  error: "✕",
+  warning: "!",
+  info: "i"
+};
+function ToastList({ toasts, onRemove }) {
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": "assertive",
+      className: "pointer-events-none fixed inset-0 z-50 flex flex-col items-end justify-end gap-2 p-4 sm:p-6",
+      children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, { toast, onRemove }, toast.id))
+    }
+  );
+}
+function ToastItem({ toast, onRemove }) {
+  const variant = toast.variant ?? "default";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: clsx(
+        "pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl p-4 shadow-lg ring-1",
+        variantClasses[variant]
+      ),
+      children: [
+        variant !== "default" && /* @__PURE__ */ jsx("span", { className: clsx("mt-0.5 text-sm font-bold", variantIconClasses[variant]), children: variantIcons[variant] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-zinc-950 dark:text-white", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: toast.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: () => onRemove(toast.id),
+            className: "shrink-0 rounded-md text-zinc-400 hover:text-zinc-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-zinc-500 dark:hover:text-zinc-300",
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "✕" })
+          }
+        )
+      ]
+    }
+  );
+}
+const sideClasses = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2"
+};
+function Tooltip({
+  content,
+  side = "top",
+  className,
+  children
+}) {
+  const [visible, setVisible] = useState(false);
+  const id = useId();
+  const timeoutRef = useRef(null);
+  const show = useCallback(() => {
+    timeoutRef.current = setTimeout(() => setVisible(true), 200);
+  }, []);
+  const hide = useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setVisible(false);
+  }, []);
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", onMouseEnter: show, onMouseLeave: hide, children: [
+    children,
+    visible && /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "tooltip",
+        id,
+        className: clsx(
+          className,
+          sideClasses[side],
+          "pointer-events-none absolute z-50 w-max max-w-xs rounded-lg bg-zinc-950 px-2.5 py-1.5 text-xs text-white shadow-lg dark:bg-zinc-700"
+        ),
+        children: content
+      }
+    )
+  ] });
+}
+export {
+  useScrollLock as $,
+  Accordion as A,
+  Breadcrumb as B,
+  Callout as C,
+  Drawer as D,
+  EmptyState as E,
+  SkeletonText as F,
+  Slider as G,
+  Stat as H,
+  Input as I,
+  StatGroup as J,
+  Kbd as K,
+  Stepper as L,
+  TabList as M,
+  TabPanel as N,
+  Tabs as O,
+  Progress as P,
+  Textarea as Q,
+  Rating as R,
+  Select as S,
+  Tab as T,
+  Timeline as U,
+  TimelineItem as V,
+  ToastProvider as W,
+  Tooltip as X,
+  TouchTarget as Y,
+  useToast as Z,
+  useTransition as _,
+  AccordionItem as a,
+  useFocusTrap as a0,
+  useEscapeKey as a1,
+  useDataInteractive as a2,
+  Link as a3,
+  useControllableState as a4,
+  useFieldDescriptionProps as a5,
+  useFieldErrorProps as a6,
+  FieldProvider as a7,
+  useFieldLabelProps as a8,
+  useToggle as a9,
+  Avatar as aa,
+  AvatarGroup as b,
+  Button as c,
+  Checkbox as d,
+  Checkbox$1 as e,
+  CheckboxField as f,
+  CheckboxGroup as g,
+  CheckboxIndicator as h,
+  CodeBlock as i,
+  DrawerBody as j,
+  DrawerFooter as k,
+  DrawerHeader as l,
+  InputGroup as m,
+  KbdShortcut as n,
+  Select$1 as o,
+  SelectContent as p,
+  SelectGroup as q,
+  SelectItem as r,
+  SelectLabel as s,
+  SelectScrollDownButton as t,
+  SelectScrollUpButton as u,
+  SelectSeparator as v,
+  SelectTrigger as w,
+  SelectValue as x,
+  Skeleton as y,
+  SkeletonCard as z
+};
+//# sourceMappingURL=tooltip-oH4lAnkn.js.map