@blocknote/shadcn/dist/blocknote-shadcn.js

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

import { jsx as a, jsxs as g, Fragment as we } from "react/jsx-runtime";
import { assertEmpty as u, mergeCSSClasses as Ce } from "@blocknote/core";
import { elementOverflow as z, mergeRefs as E, useFocusWithin as ye, useDictionary as Se, FormattingToolbarController as Te, getFormattingToolbarItems as Me, FormattingToolbar as Ie, ComponentsContext as De, BlockNoteViewRaw as Re } from "@blocknote/react";
import * as c from "react";
import { createContext as ke, useContext as Be, forwardRef as p, useMemo as V, useRef as A, useEffect as $, useState as Fe } from "react";
import { FormProvider as Pe, useFormContext as Le, useForm as ze } from "react-hook-form";
import * as S from "@radix-ui/react-avatar";
import { clsx as Ee } from "clsx";
import { extendTailwindMerge as Ve } from "tailwind-merge";
import { cva as I } from "class-variance-authority";
import { Slot as j } from "@radix-ui/react-slot";
import * as N from "@radix-ui/react-dropdown-menu";
import { ChevronRight as q, Check as G, Circle as Ae, ChevronDown as U, ChevronUp as $e } from "lucide-react";
import * as H from "@radix-ui/react-label";
import * as D from "@radix-ui/react-popover";
import * as x from "@radix-ui/react-select";
import * as y from "@radix-ui/react-tabs";
import * as O from "@radix-ui/react-toggle";
import * as T from "@radix-ui/react-tooltip";
const je = Ve({
  prefix: "bn-"
});
function i(...n) {
  return je(Ee(n));
}
const K = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  S.Root,
  {
    ref: e,
    className: i(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      n
    ),
    ...t
  }
));
K.displayName = S.Root.displayName;
const Q = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  S.Image,
  {
    ref: e,
    className: i("aspect-square h-full w-full", n),
    ...t
  }
));
Q.displayName = S.Image.displayName;
const W = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  S.Fallback,
  {
    ref: e,
    className: i(
      "bg-muted flex h-full w-full items-center justify-center rounded-full",
      n
    ),
    ...t
  }
));
W.displayName = S.Fallback.displayName;
const qe = I(
  "bn-inline-flex bn-items-center bn-rounded-full bn-border bn-px-2.5 bn-py-0.5 bn-text-xs bn-font-semibold bn-transition-colors focus:bn-outline-none focus:bn-ring-2 focus:bn-ring-ring focus:bn-ring-offset-2",
  {
    variants: {
      variant: {
        default: "bn-border-transparent bn-bg-primary bn-text-primary-foreground hover:bn-bg-primary/80",
        secondary: "bn-border-transparent bn-bg-secondary bn-text-secondary-foreground hover:bn-bg-secondary/80",
        destructive: "bn-border-transparent bn-bg-destructive bn-text-destructive-foreground hover:bn-bg-destructive/80",
        outline: "bn-text-foreground"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Ge({ className: n, variant: t, ...e }) {
  return /* @__PURE__ */ a("div", { className: i(qe({ variant: t }), n), ...e });
}
const Ue = I(
  "bn-inline-flex bn-items-center bn-justify-center bn-whitespace-nowrap bn-rounded-md bn-text-sm bn-font-medium bn-ring-offset-background bn-transition-colors focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-pointer-events-none disabled:bn-opacity-50",
  {
    variants: {
      variant: {
        default: "bn-bg-primary bn-text-primary-foreground hover:bn-bg-primary/90",
        destructive: "bn-bg-destructive bn-text-destructive-foreground hover:bn-bg-destructive/90",
        outline: "bn-border bn-border-input bn-bg-background hover:bn-bg-accent hover:bn-text-accent-foreground",
        secondary: "bn-bg-secondary bn-text-secondary-foreground hover:bn-bg-secondary/80",
        ghost: "hover:bn-bg-accent hover:bn-text-accent-foreground",
        link: "bn-text-primary bn-underline-offset-4 hover:bn-underline"
      },
      size: {
        default: "bn-h-10 bn-px-4 bn-py-2",
        sm: "bn-h-9 bn-rounded-md bn-px-3",
        lg: "bn-h-11 bn-rounded-md bn-px-8",
        icon: "bn-h-10 bn-w-10"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
), Z = c.forwardRef(
  ({ className: n, variant: t, size: e, asChild: o = !1, ...r }, s) => /* @__PURE__ */ a(
    o ? j : "button",
    {
      className: i(Ue({ variant: t, size: e, className: n })),
      ref: s,
      type: "button",
      ...r
    }
  )
);
Z.displayName = "Button";
const _ = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  "div",
  {
    ref: e,
    className: i(
      "bn-rounded-lg bn-border bn-bg-card bn-text-card-foreground bn-shadow-sm",
      n
    ),
    ...t
  }
));
_.displayName = "Card";
const He = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  "div",
  {
    ref: e,
    className: i("bn-flex bn-flex-col bn-space-y-1.5 bn-p-6", n),
    ...t
  }
));
He.displayName = "CardHeader";
const Oe = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  "h3",
  {
    ref: e,
    className: i(
      "bn-text-2xl bn-font-semibold bn-leading-none bn-tracking-tight",
      n
    ),
    ...t
  }
));
Oe.displayName = "CardTitle";
const Ke = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  "p",
  {
    ref: e,
    className: i("bn-text-sm bn-text-muted-foreground", n),
    ...t
  }
));
Ke.displayName = "CardDescription";
const J = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a("div", { ref: e, className: i("bn-p-6 bn-pt-0", n), ...t }));
J.displayName = "CardContent";
const Qe = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  "div",
  {
    ref: e,
    className: i("bn-flex bn-items-center bn-p-6 bn-pt-0", n),
    ...t
  }
));
Qe.displayName = "CardFooter";
const We = N.Root, Ze = N.Trigger, _e = N.Sub, X = c.forwardRef(({ className: n, inset: t, children: e, ...o }, r) => /* @__PURE__ */ g(
  N.SubTrigger,
  {
    ref: r,
    className: i(
      "bn-flex bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none focus:bn-bg-accent data-[state=open]:bn-bg-accent",
      t && "bn-pl-8",
      n
    ),
    ...o,
    children: [
      e,
      /* @__PURE__ */ a(q, { className: "bn-ml-auto bn-h-4 bn-w-4" })
    ]
  }
));
X.displayName = N.SubTrigger.displayName;
const Y = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  N.SubContent,
  {
    ref: e,
    className: i(
      "bn-z-50 bn-min-w-[8rem] bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover bn-p-1 bn-text-popover-foreground bn-shadow-lg data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
      n
    ),
    ...t
  }
));
Y.displayName = N.SubContent.displayName;
const ee = c.forwardRef(({ className: n, sideOffset: t = 4, ...e }, o) => (
  // <DropdownMenuPrimitive.Portal>
  /* @__PURE__ */ a(
    N.Content,
    {
      ref: o,
      sideOffset: t,
      className: i(
        "bn-z-50 bn-min-w-[8rem] bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover bn-p-1 bn-text-popover-foreground bn-shadow-md data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
        n
      ),
      ...e
    }
  )
));
ee.displayName = N.Content.displayName;
const ne = c.forwardRef(({ className: n, inset: t, ...e }, o) => /* @__PURE__ */ a(
  N.Item,
  {
    ref: o,
    className: i(
      "bn-relative bn-flex bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
      t && "bn-pl-8",
      n
    ),
    ...e
  }
));
ne.displayName = N.Item.displayName;
const te = c.forwardRef(({ className: n, children: t, checked: e, ...o }, r) => /* @__PURE__ */ g(
  N.CheckboxItem,
  {
    ref: r,
    className: i(
      "bn-relative bn-flex bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
      n
    ),
    checked: e,
    ...o,
    children: [
      /* @__PURE__ */ a("span", { className: "bn-absolute bn-left-2 bn-flex bn-h-3.5 bn-w-3.5 bn-items-center bn-justify-center", children: /* @__PURE__ */ a(N.ItemIndicator, { children: /* @__PURE__ */ a(G, { className: "bn-h-4 bn-w-4" }) }) }),
      t
    ]
  }
));
te.displayName = N.CheckboxItem.displayName;
const Je = c.forwardRef(({ className: n, children: t, ...e }, o) => /* @__PURE__ */ g(
  N.RadioItem,
  {
    ref: o,
    className: i(
      "bn-relative bn-flex bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
      n
    ),
    ...e,
    children: [
      /* @__PURE__ */ a("span", { className: "bn-absolute bn-left-2 bn-flex bn-h-3.5 bn-w-3.5 bn-items-center bn-justify-center", children: /* @__PURE__ */ a(N.ItemIndicator, { children: /* @__PURE__ */ a(Ae, { className: "bn-h-2 bn-w-2 bn-fill-current" }) }) }),
      t
    ]
  }
));
Je.displayName = N.RadioItem.displayName;
const oe = c.forwardRef(({ className: n, inset: t, ...e }, o) => /* @__PURE__ */ a(
  N.Label,
  {
    ref: o,
    className: i(
      "bn-px-2 bn-py-1.5 bn-text-sm bn-font-semibold",
      t && "bn-pl-8",
      n
    ),
    ...e
  }
));
oe.displayName = N.Label.displayName;
const ae = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  N.Separator,
  {
    ref: e,
    className: i("bn--mx-1 bn-my-1 bn-h-px bn-bg-muted", n),
    ...t
  }
));
ae.displayName = N.Separator.displayName;
const Xe = I(
  "bn-text-sm bn-font-medium bn-leading-none peer-disabled:bn-cursor-not-allowed peer-disabled:bn-opacity-70"
), P = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  H.Root,
  {
    ref: e,
    className: i(Xe(), n),
    ...t
  }
));
P.displayName = H.Root.displayName;
const Ye = Pe, en = c.createContext(
  {}
), R = () => {
  const n = c.useContext(en), t = c.useContext(re), { getFieldState: e, formState: o } = Le(), r = e(n.name, o);
  if (!n)
    throw new Error("useFormField should be used within <FormField>");
  const { id: s } = t;
  return {
    id: s,
    name: n.name,
    formItemId: `${s}-form-item`,
    formDescriptionId: `${s}-form-item-description`,
    formMessageId: `${s}-form-item-message`,
    ...r
  };
}, re = c.createContext(
  {}
), nn = c.forwardRef(({ className: n, ...t }, e) => {
  const o = c.useId();
  return /* @__PURE__ */ a(re.Provider, { value: { id: o }, children: /* @__PURE__ */ a("div", { ref: e, className: i("bn-space-y-2", n), ...t }) });
});
nn.displayName = "FormItem";
const tn = c.forwardRef(({ className: n, ...t }, e) => {
  const { error: o, formItemId: r } = R();
  return /* @__PURE__ */ a(
    P,
    {
      ref: e,
      className: i(o && "bn-text-destructive", n),
      htmlFor: r,
      ...t
    }
  );
});
tn.displayName = "FormLabel";
const on = c.forwardRef(({ ...n }, t) => {
  const { error: e, formItemId: o, formDescriptionId: r, formMessageId: s } = R();
  return /* @__PURE__ */ a(
    j,
    {
      ref: t,
      id: o,
      "aria-describedby": e ? `${r} ${s}` : `${r}`,
      "aria-invalid": !!e,
      ...n
    }
  );
});
on.displayName = "FormControl";
const an = c.forwardRef(({ className: n, ...t }, e) => {
  const { formDescriptionId: o } = R();
  return /* @__PURE__ */ a(
    "p",
    {
      ref: e,
      id: o,
      className: i("bn-text-sm bn-text-muted-foreground", n),
      ...t
    }
  );
});
an.displayName = "FormDescription";
const rn = c.forwardRef(({ className: n, children: t, ...e }, o) => {
  const { error: r, formMessageId: s } = R(), d = r ? String(r == null ? void 0 : r.message) : t;
  return d ? /* @__PURE__ */ a(
    "p",
    {
      ref: o,
      id: s,
      className: i("bn-text-sm bn-font-medium bn-text-destructive", n),
      ...e,
      children: d
    }
  ) : null;
});
rn.displayName = "FormMessage";
const se = c.forwardRef(
  ({ className: n, type: t, ...e }, o) => /* @__PURE__ */ a(
    "input",
    {
      type: t,
      className: i(
        "bn-flex bn-h-10 bn-w-full bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background file:bn-border-0 file:bn-bg-transparent file:bn-text-sm file:bn-font-medium placeholder:bn-text-muted-foreground focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50",
        n
      ),
      ref: o,
      ...e
    }
  )
);
se.displayName = "Input";
const sn = D.Root, dn = D.Trigger, ie = c.forwardRef(({ className: n, align: t = "center", sideOffset: e = 4, ...o }, r) => (
  // <PopoverPrimitive.Portal>
  /* @__PURE__ */ a(
    D.Content,
    {
      ref: r,
      align: t,
      sideOffset: e,
      className: i(
        "bn-z-50 bn-w-72 bn-rounded-md bn-border bn-bg-popover bn-p-4 bn-text-popover-foreground bn-shadow-md bn-outline-none data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
        n
      ),
      ...o
    }
  )
));
ie.displayName = D.Content.displayName;
const ln = x.Root, bn = x.Value, de = c.forwardRef(({ className: n, children: t, ...e }, o) => /* @__PURE__ */ g(
  x.Trigger,
  {
    ref: o,
    className: i(
      "bn-flex bn-h-10 bn-w-full bn-items-center bn-justify-between bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background placeholder:bn-text-muted-foreground focus:bn-outline-none focus:bn-ring-2 focus:bn-ring-ring focus:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50 [&>span]:bn-line-clamp-1",
      n
    ),
    ...e,
    children: [
      t,
      /* @__PURE__ */ a(x.Icon, { asChild: !0, children: /* @__PURE__ */ a(U, { className: "bn-h-4 bn-w-4 bn-opacity-50" }) })
    ]
  }
));
de.displayName = x.Trigger.displayName;
const le = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  x.ScrollUpButton,
  {
    ref: e,
    className: i(
      "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
      n
    ),
    ...t,
    children: /* @__PURE__ */ a($e, { className: "bn-h-4 bn-w-4" })
  }
));
le.displayName = x.ScrollUpButton.displayName;
const be = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  x.ScrollDownButton,
  {
    ref: e,
    className: i(
      "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
      n
    ),
    ...t,
    children: /* @__PURE__ */ a(U, { className: "bn-h-4 bn-w-4" })
  }
));
be.displayName = x.ScrollDownButton.displayName;
const ce = c.forwardRef(({ className: n, children: t, position: e = "popper", ...o }, r) => (
  // <SelectPrimitive.Portal>
  /* @__PURE__ */ g(
    x.Content,
    {
      ref: r,
      className: i(
        "bn-relative bn-z-50 bn-max-h-96 bn-min-w-[8rem] bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover bn-text-popover-foreground bn-shadow-md data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
        e === "popper" && "data-[side=bottom]:bn-translate-y-1 data-[side=left]:bn--translate-x-1 data-[side=right]:bn-translate-x-1 data-[side=top]:bn--translate-y-1",
        n
      ),
      position: e,
      ...o,
      children: [
        /* @__PURE__ */ a(le, {}),
        /* @__PURE__ */ a(
          x.Viewport,
          {
            className: i(
              "bn-p-1",
              e === "popper" && "bn-h-[var(--radix-select-trigger-height)] bn-w-full bn-min-w-[var(--radix-select-trigger-width)]"
            ),
            children: t
          }
        ),
        /* @__PURE__ */ a(be, {})
      ]
    }
  )
));
ce.displayName = x.Content.displayName;
const cn = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  x.Label,
  {
    ref: e,
    className: i(
      "bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-font-semibold",
      n
    ),
    ...t
  }
));
cn.displayName = x.Label.displayName;
const me = c.forwardRef(({ className: n, children: t, ...e }, o) => /* @__PURE__ */ g(
  x.Item,
  {
    ref: o,
    className: i(
      "bn-relative bn-flex bn-w-full bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-outline-none focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
      n
    ),
    ...e,
    children: [
      /* @__PURE__ */ a("span", { className: "bn-absolute bn-left-2 bn-flex bn-h-3.5 bn-w-3.5 bn-items-center bn-justify-center", children: /* @__PURE__ */ a(x.ItemIndicator, { children: /* @__PURE__ */ a(G, { className: "bn-h-4 bn-w-4" }) }) }),
      /* @__PURE__ */ a(x.ItemText, { children: t })
    ]
  }
));
me.displayName = x.Item.displayName;
const mn = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  x.Separator,
  {
    ref: e,
    className: i("bn--mx-1 bn-my-1 bn-h-px bn-bg-muted", n),
    ...t
  }
));
mn.displayName = x.Separator.displayName;
function un({
  className: n,
  ...t
}) {
  return /* @__PURE__ */ a(
    "div",
    {
      className: i("bg-primary/10 animate-pulse rounded-md", n),
      ...t
    }
  );
}
const pn = y.Root, ue = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  y.List,
  {
    ref: e,
    className: i(
      "bn-inline-flex bn-h-10 bn-items-center bn-justify-center bn-rounded-md bn-bg-muted bn-p-1 bn-text-muted-foreground",
      n
    ),
    ...t
  }
));
ue.displayName = y.List.displayName;
const pe = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  y.Trigger,
  {
    ref: e,
    className: i(
      "bn-inline-flex bn-items-center bn-justify-center bn-whitespace-nowrap bn-rounded-sm bn-px-3 bn-py-1.5 bn-text-sm bn-font-medium bn-ring-offset-background bn-transition-all focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-pointer-events-none disabled:bn-opacity-50 data-[state=active]:bn-bg-background data-[state=active]:bn-text-foreground data-[state=active]:bn-shadow-sm",
      n
    ),
    ...t
  }
));
pe.displayName = y.Trigger.displayName;
const fe = c.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ a(
  y.Content,
  {
    ref: e,
    className: i(
      "bn-mt-2 bn-ring-offset-background focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2",
      n
    ),
    ...t
  }
));
fe.displayName = y.Content.displayName;
const fn = I(
  "bn-inline-flex bn-items-center bn-justify-center bn-rounded-md bn-text-sm bn-font-medium bn-ring-offset-background bn-transition-colors hover:bn-bg-muted hover:bn-text-muted-foreground focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-pointer-events-none disabled:bn-opacity-50 data-[state=on]:bn-bg-accent data-[state=on]:bn-text-accent-foreground",
  {
    variants: {
      variant: {
        default: "bn-bg-transparent",
        outline: "bn-border bn-border-input bn-bg-transparent hover:bn-bg-accent hover:bn-text-accent-foreground"
      },
      size: {
        default: "bn-h-10 bn-px-3",
        sm: "bn-h-9 bn-px-2.5",
        lg: "bn-h-11 bn-px-5"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
), ge = c.forwardRef(({ className: n, variant: t, size: e, ...o }, r) => /* @__PURE__ */ a(
  O.Root,
  {
    ref: r,
    className: i(fn({ variant: t, size: e, className: n })),
    ...o
  }
));
ge.displayName = O.Root.displayName;
const gn = T.Provider, hn = T.Root, vn = T.Trigger, he = c.forwardRef(({ className: n, sideOffset: t = 4, ...e }, o) => /* @__PURE__ */ a(
  T.Content,
  {
    ref: o,
    sideOffset: t,
    className: i(
      "bn-z-50 bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover bn-px-3 bn-py-1.5 bn-text-sm bn-text-popover-foreground bn-shadow-md bn-animate-in bn-fade-in-0 bn-zoom-in-95 data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=closed]:bn-zoom-out-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
      n
    ),
    ...e
  }
));
he.displayName = T.Content.displayName;
const Nn = {
  Avatar: {
    Avatar: K,
    AvatarFallback: W,
    AvatarImage: Q
  },
  Badge: {
    Badge: Ge
  },
  Button: {
    Button: Z
  },
  Card: {
    Card: _,
    CardContent: J
  },
  DropdownMenu: {
    DropdownMenu: We,
    DropdownMenuCheckboxItem: te,
    DropdownMenuContent: ee,
    DropdownMenuItem: ne,
    DropdownMenuLabel: oe,
    DropdownMenuSeparator: ae,
    DropdownMenuSub: _e,
    DropdownMenuSubContent: Y,
    DropdownMenuSubTrigger: X,
    DropdownMenuTrigger: Ze
  },
  Form: {
    Form: Ye
  },
  Input: {
    Input: se
  },
  Label: {
    Label: P
  },
  Popover: {
    Popover: sn,
    PopoverContent: ie,
    PopoverTrigger: dn
  },
  Select: {
    Select: ln,
    SelectContent: ce,
    SelectItem: me,
    SelectTrigger: de,
    SelectValue: bn
  },
  Skeleton: {
    Skeleton: un
  },
  Tabs: {
    Tabs: pn,
    TabsContent: fe,
    TabsList: ue,
    TabsTrigger: pe
  },
  Toggle: {
    Toggle: ge
  },
  Tooltip: {
    Tooltip: hn,
    TooltipContent: he,
    TooltipProvider: gn,
    TooltipTrigger: vn
  }
}, ve = ke(void 0);
function h() {
  return Be(ve);
}
const xn = (n) => {
  const { children: t, ...e } = n;
  u(e);
  const o = h(), r = ze();
  return /* @__PURE__ */ a(o.Form.Form, { ...r, children: t });
}, wn = p((n, t) => {
  const {
    className: e,
    name: o,
    label: r,
    variant: s,
    icon: d,
    // TODO: implement
    value: b,
    autoFocus: m,
    placeholder: l,
    disabled: f,
    onKeyDown: v,
    onChange: w,
    onSubmit: C,
    autoComplete: M,
    rightSection: Ne,
    // TODO: add rightSection
    ...xe
  } = n;
  u(xe);
  const L = h();
  return /* @__PURE__ */ g(
    "div",
    {
      className: i(
        e,
        "bn-flex bn-h-10 bn-w-full bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background file:bn-border-0 file:bn-bg-transparent file:bn-text-sm file:bn-font-medium placeholder:bn-text-muted-foreground focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50",
        "bn-items-center bn-gap-2 bn-text-foreground"
      ),
      children: [
        d,
        /* @__PURE__ */ g("div", { className: "bn-flex-1", children: [
          r && /* @__PURE__ */ a(L.Label.Label, { htmlFor: r, children: r }),
          /* @__PURE__ */ a(
            L.Input.Input,
            {
              className: i(e, "bn-border-none bn-p-0 bn-h-auto"),
              id: r,
              name: o,
              autoFocus: m,
              placeholder: l,
              disabled: f,
              value: b,
              onKeyDown: v,
              onChange: w,
              onSubmit: C,
              ref: t
            }
          )
        ] }),
        Ne
      ]
    }
  );
}), Cn = (n) => p(
  (t, e) => /* @__PURE__ */ a(
    n,
    {
      onPointerDown: (o) => {
        o.nativeEvent.fakeEvent || (o.ctrlKey = !0);
      },
      onPointerUp: (o) => {
        const r = new PointerEvent("pointerdown", o.nativeEvent);
        r.fakeEvent = !0, o.target.dispatchEvent(r);
      },
      ...t,
      ref: e
    }
  )
), yn = (n) => {
  const {
    children: t,
    onOpenChange: e,
    position: o,
    // Unused
    sub: r,
    ...s
  } = n;
  u(s);
  const d = h();
  return r ? /* @__PURE__ */ a(
    d.DropdownMenu.DropdownMenuSub,
    {
      onOpenChange: e,
      children: t
    }
  ) : /* @__PURE__ */ a(
    d.DropdownMenu.DropdownMenu,
    {
      modal: !1,
      onOpenChange: e,
      children: t
    }
  );
}, Sn = (n) => {
  const { children: t, sub: e, ...o } = n;
  u(o);
  const r = h(), s = V(
    () => Cn(
      r.DropdownMenu.DropdownMenuTrigger
    ),
    [r.DropdownMenu.DropdownMenuTrigger]
  );
  return e ? /* @__PURE__ */ a(r.DropdownMenu.DropdownMenuSubTrigger, { children: t }) : /* @__PURE__ */ a(s, { asChild: !0, ...o, children: t });
}, Tn = p((n, t) => {
  const { className: e, children: o, sub: r, ...s } = n;
  u(s);
  const d = h();
  return r ? /* @__PURE__ */ a(
    d.DropdownMenu.DropdownMenuSubContent,
    {
      className: e,
      ref: t,
      children: o
    }
  ) : /* @__PURE__ */ a(
    d.DropdownMenu.DropdownMenuContent,
    {
      className: e,
      ref: t,
      children: o
    }
  );
}), Mn = p((n, t) => {
  const { className: e, children: o, icon: r, checked: s, subTrigger: d, onClick: b, ...m } = n;
  u(m);
  const l = h();
  return d ? /* @__PURE__ */ g(we, { children: [
    r,
    o
  ] }) : s !== void 0 ? /* @__PURE__ */ g(
    l.DropdownMenu.DropdownMenuCheckboxItem,
    {
      className: i(e, "bn-gap-1", s ? "" : "bn-px-2"),
      ref: t,
      checked: s,
      onClick: b,
      ...m,
      children: [
        r,
        o
      ]
    }
  ) : /* @__PURE__ */ g(
    l.DropdownMenu.DropdownMenuItem,
    {
      className: e,
      ref: t,
      onClick: b,
      ...m,
      children: [
        r,
        o,
        d && /* @__PURE__ */ a(q, { className: "bn-ml-auto bn-h-4 bn-w-4" })
      ]
    }
  );
}), In = p((n, t) => {
  const { className: e, ...o } = n;
  u(o);
  const r = h();
  return /* @__PURE__ */ a(
    r.DropdownMenu.DropdownMenuSeparator,
    {
      className: e,
      ref: t
    }
  );
}), Dn = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  u(r);
  const s = h();
  return /* @__PURE__ */ a(
    s.DropdownMenu.DropdownMenuLabel,
    {
      className: e,
      ref: t,
      children: o
    }
  );
}), Rn = p((n, t) => {
  const {
    className: e,
    children: o,
    icon: r,
    onClick: s,
    onDragEnd: d,
    onDragStart: b,
    draggable: m,
    label: l,
    ...f
  } = n;
  u(f, !1);
  const v = h();
  return /* @__PURE__ */ g(
    v.Button.Button,
    {
      variant: "ghost",
      className: i(e, "bn-text-gray-400"),
      ref: t,
      "aria-label": l,
      onClick: s,
      onDragStart: b,
      onDragEnd: d,
      draggable: m,
      ...f,
      children: [
        r,
        o
      ]
    }
  );
}), kn = p((n, t) => {
  const {
    className: e,
    tabs: o,
    defaultOpenTab: r,
    openTab: s,
    setOpenTab: d,
    loading: b,
    // TODO: implement loader
    ...m
  } = n;
  u(m);
  const l = h();
  return /* @__PURE__ */ g(
    l.Tabs.Tabs,
    {
      className: i(e, "bn-bg-popover bn-p-2 bn-rounded-lg"),
      ref: t,
      value: s,
      defaultValue: r,
      onValueChange: d,
      children: [
        /* @__PURE__ */ a(l.Tabs.TabsList, { children: o.map((f) => /* @__PURE__ */ a(l.Tabs.TabsTrigger, { value: f.name, children: f.name }, f.name)) }),
        o.map((f) => /* @__PURE__ */ a(l.Tabs.TabsContent, { value: f.name, children: /* @__PURE__ */ a(l.Card.Card, { children: /* @__PURE__ */ a(l.Card.CardContent, { className: "bn-p-4", children: f.tabPanel }) }) }, f.name))
      ]
    }
  );
}), Bn = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  return u(r), /* @__PURE__ */ a(
    "div",
    {
      className: i(
        e,
        "bn-flex bn-flex-col bn-gap-2 bn-items-start bn-justify-center"
      ),
      ref: t,
      children: o
    }
  );
}), Fn = p((n, t) => {
  const { className: e, value: o, placeholder: r, onKeyDown: s, onChange: d, ...b } = n;
  u(b);
  const m = h();
  return /* @__PURE__ */ a(
    m.Input.Input,
    {
      "data-test": "embed-input",
      className: i(e, "bn-w-80"),
      ref: t,
      value: o,
      placeholder: r,
      onKeyDown: s,
      onChange: d
    }
  );
}), Pn = (n) => {
  const {
    children: t,
    opened: e,
    position: o,
    // unused
    ...r
  } = n;
  u(r);
  const s = h();
  return /* @__PURE__ */ a(s.Popover.Popover, { open: e, children: t });
}, Ln = p(
  (n, t) => {
    const { children: e, ...o } = n;
    u(o);
    const r = h();
    return /* @__PURE__ */ a(r.Popover.PopoverTrigger, { ref: t, asChild: !0, children: e });
  }
), zn = p((n, t) => {
  const { className: e, variant: o, children: r, ...s } = n;
  u(s);
  const d = h();
  return /* @__PURE__ */ a(
    d.Popover.PopoverContent,
    {
      sideOffset: 8,
      className: i(
        e,
        "bn-flex bn-flex-col bn-gap-2",
        o === "panel-popover" ? "bn-p-0 bn-border-none bn-shadow-none bn-max-w-none bn-w-fit" : ""
      ),
      ref: t,
      children: r
    }
  );
}), En = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  return u(r, !1), /* @__PURE__ */ a("div", { className: e, ref: t, ...r, children: o });
}), Vn = p((n, t) => {
  const {
    className: e,
    children: o,
    icon: r,
    onClick: s,
    onDragEnd: d,
    onDragStart: b,
    draggable: m,
    label: l,
    ...f
  } = n;
  u(f, !1);
  const v = h();
  return /* @__PURE__ */ g(
    v.Button.Button,
    {
      variant: "ghost",
      className: i(e, "bn-text-gray-400"),
      ref: t,
      "aria-label": l,
      onClick: s,
      onDragStart: b,
      onDragEnd: d,
      draggable: m,
      ...f,
      children: [
        r,
        o
      ]
    }
  );
}), An = p((n, t) => {
  const { className: e, children: o, id: r, columns: s, ...d } = n;
  return u(d), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      style: { gridTemplateColumns: `repeat(${s}, 1fr)` },
      ref: t,
      id: r,
      role: "grid",
      children: o
    }
  );
}), $n = p((n, t) => {
  const { className: e, children: o, columns: r, ...s } = n;
  return u(s), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      style: { gridColumn: `1 / ${r + 1}` },
      ref: t,
      children: o
    }
  );
}), jn = p((n, t) => {
  const { className: e, children: o, id: r, ...s } = n;
  return u(s), /* @__PURE__ */ a(
    "div",
    {
      id: r,
      role: "listbox",
      className: i(
        "bn-z-50 bn-min-w-[8rem] bn-overflow-auto bn-rounded-md bn-border bn-bg-popover bn-p-1 bn-text-popover-foreground bn-shadow-md data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
        e
      ),
      ref: t,
      children: o
    }
  );
}), qn = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  return u(r), /* @__PURE__ */ a(
    "div",
    {
      className: i(
        "bn-relative bn-flex bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
        e
      ),
      ref: t,
      children: /* @__PURE__ */ a("div", { children: o })
    }
  );
}), Gn = p((n, t) => {
  const e = h(), { className: o, item: r, isSelected: s, onClick: d, id: b, ...m } = n;
  u(m);
  const l = A(null);
  return $(() => {
    if (!l.current || !s)
      return;
    const f = z(
      l.current,
      document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")
      // TODO
    );
    f === "top" ? l.current.scrollIntoView(!0) : f === "bottom" && l.current.scrollIntoView(!1);
  }, [s]), /* @__PURE__ */ g(
    "div",
    {
      className: i(
        "bn-relative bn-flex bn-cursor-pointer bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
        n.item.size === "small" ? "bn-gap-3 bn-py-1" : "",
        o
      ),
      ref: E([t, l]),
      id: b,
      onMouseDown: (f) => f.preventDefault(),
      onClick: d,
      role: "option",
      "aria-selected": s || void 0,
      children: [
        r.icon && /* @__PURE__ */ a(
          "div",
          {
            className: i(
              "bn-p-3",
              n.item.size === "small" ? "bn-p-0" : "",
              o
            ),
            "data-position": "left",
            children: r.icon
          }
        ),
        /* @__PURE__ */ g("div", { className: "bn-flex-1", children: [
          /* @__PURE__ */ a(
            "div",
            {
              className: i(
                "bn-text-base",
                n.item.size === "small" ? "bn-text-sm" : "",
                o
              ),
              children: r.title
            }
          ),
          /* @__PURE__ */ a(
            "div",
            {
              className: i(
                "bn-text-xs",
                n.item.size === "small" ? "bn-hidden" : "",
                o
              ),
              children: r.subtext
            }
          )
        ] }),
        r.badge && /* @__PURE__ */ a("div", { "data-position": "right", className: "bn-text-xs", children: /* @__PURE__ */ a(e.Badge.Badge, { variant: "secondary", children: r.badge }) })
      ]
    }
  );
}), Un = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  return u(r), /* @__PURE__ */ a(
    "div",
    {
      className: i("bn-px-2 bn-py-1.5 bn-text-sm bn-font-semibold", e),
      ref: t,
      children: o
    }
  );
}), Hn = p((n, t) => {
  const { className: e, ...o } = n;
  return u(o), /* @__PURE__ */ a("div", { className: i(e, "bn-animate-spin"), ref: t, children: /* @__PURE__ */ a(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      height: "1em",
      viewBox: "0 -960 960 960",
      width: "1em",
      fill: "#e8eaed",
      children: /* @__PURE__ */ a("path", { d: "M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z" })
    }
  ) });
}), On = p((n, t) => {
  const { className: e, children: o, onMouseDown: r, onClick: s, ...d } = n;
  u(d, !1);
  const b = h();
  return /* @__PURE__ */ a(
    b.Button.Button,
    {
      variant: "ghost",
      className: i(
        e,
        "bn-p-0 bn-h-full bn-w-full bn-text-gray-400",
        e != null && e.includes("bn-extend-button-add-remove-columns") ? "bn-ml-1" : "bn-mt-1",
        e != null && e.includes("bn-extend-button-editing") ? "bn-bg-accent bn-text-accent-foreground" : ""
      ),
      ref: t,
      onClick: s,
      onMouseDown: r,
      ...d,
      children: o
    }
  );
}), Kn = p((n, t) => {
  const {
    className: e,
    children: o,
    draggable: r,
    onDragStart: s,
    onDragEnd: d,
    style: b,
    label: m,
    ...l
  } = n;
  u(l, !1);
  const f = h();
  return /* @__PURE__ */ a(
    f.Button.Button,
    {
      variant: "ghost",
      className: i(e, "bn-p-0 bn-h-fit bn-w-fit bn-text-gray-400"),
      ref: t,
      "aria-label": m,
      draggable: r,
      onDragStart: s,
      onDragEnd: d,
      style: b,
      ...l,
      children: o
    }
  );
}), k = p(
  (n, t) => {
    const {
      className: e,
      children: o,
      onMouseEnter: r,
      onMouseLeave: s,
      variant: d,
      ...b
    } = n;
    u(b);
    const m = h();
    return /* @__PURE__ */ a(m.Tooltip.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ a(
      "div",
      {
        className: i(
          e,
          "bn-flex bn-gap-1 bn-p-1 bn-bg-popover bn-text-popover-foreground bn-border bn-rounded-lg bn-shadow-md bn-h-fit",
          d === "action-toolbar" ? "bn-w-fit" : ""
        ),
        ref: t,
        onMouseEnter: r,
        onMouseLeave: s,
        children: o
      }
    ) });
  }
), B = p(
  (n, t) => {
    const {
      className: e,
      children: o,
      mainTooltip: r,
      secondaryTooltip: s,
      icon: d,
      isSelected: b,
      isDisabled: m,
      onClick: l,
      label: f,
      variant: v,
      ...w
    } = n;
    u(w, !1);
    const C = h(), M = b === void 0 ? /* @__PURE__ */ g(
      C.Button.Button,
      {
        className: i(
          e,
          v === "compact" ? "bn-h-6 bn-min-w-6 bn-p-0" : ""
        ),
        variant: "ghost",
        size: v === "compact" ? "sm" : "default",
        disabled: m,
        onClick: l,
        ref: t,
        "aria-label": f,
        ...w,
        children: [
          d,
          o
        ]
      }
    ) : /* @__PURE__ */ g(
      C.Toggle.Toggle,
      {
        className: i(
          e,
          "data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground",
          v === "compact" ? "bn-h-6 bn-min-w-6 bn-p-0" : ""
        ),
        size: v === "compact" ? "sm" : "default",
        "aria-label": f,
        onClick: l,
        pressed: b,
        disabled: m,
        "data-state": b ? "on" : "off",
        "data-disabled": m,
        ref: t,
        ...w,
        children: [
          d,
          o
        ]
      }
    );
    return /* @__PURE__ */ g(C.Tooltip.Tooltip, { children: [
      /* @__PURE__ */ a(C.Tooltip.TooltipTrigger, { asChild: !0, children: M }),
      /* @__PURE__ */ g(
        C.Tooltip.TooltipContent,
        {
          className: "bn-flex bn-flex-col bn-items-center bn-whitespace-pre-wrap",
          children: [
            /* @__PURE__ */ a("span", { children: r }),
            s && /* @__PURE__ */ a("span", { children: s })
          ]
        }
      )
    ] });
  }
), F = p((n, t) => {
  const { className: e, items: o, isDisabled: r, ...s } = n;
  u(s);
  const d = h(), b = (l) => /* @__PURE__ */ g("div", { className: "bn-flex bn-gap-1 bn-items-center", children: [
    l.icon,
    l.text
  ] }), m = o.filter((l) => l.isSelected)[0];
  return m ? /* @__PURE__ */ g(
    d.Select.Select,
    {
      value: m.text,
      onValueChange: (l) => {
        var f, v;
        return (v = (f = o.find((w) => w.text === l)).onClick) == null ? void 0 : v.call(f);
      },
      disabled: r,
      children: [
        /* @__PURE__ */ a(d.Select.SelectTrigger, { className: "bn-border-none", children: /* @__PURE__ */ a(d.Select.SelectValue, {}) }),
        /* @__PURE__ */ a(d.Select.SelectContent, { className: e, ref: t, children: o.map((l) => /* @__PURE__ */ a(
          d.Select.SelectItem,
          {
            disabled: l.isDisabled,
            value: l.text,
            children: /* @__PURE__ */ a(b, { ...l })
          },
          l.text
        )) })
      ]
    }
  ) : null;
}), Qn = p((n, t) => {
  const {
    className: e,
    children: o,
    selected: r,
    headerText: s,
    onFocus: d,
    onBlur: b,
    tabIndex: m,
    ...l
  } = n;
  u(l);
  const f = h();
  return /* @__PURE__ */ g(
    f.Card.Card,
    {
      className: i(
        e,
        "bn-w-[300px]",
        r ? "bn-bg-accent bn-text-accent-foreground" : ""
      ),
      onFocus: d,
      onBlur: b,
      tabIndex: m,
      ref: t,
      children: [
        s && /* @__PURE__ */ a("div", { className: "bn-px-4 bn-pt-4 bn-italic bn-text-sm", children: s }),
        o
      ]
    }
  );
}), Wn = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  return u(r), /* @__PURE__ */ a(
    "div",
    {
      className: i(
        e,
        "bn-p-4",
        e != null && e.includes("bn-thread-comments") ? "bn-flex bn-flex-col bn-gap-6 bn-border-b" : ""
      ),
      ref: t,
      children: o
    }
  );
}), Zn = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  u(r, !1);
  const s = h();
  return /* @__PURE__ */ a(
    s.Button.Button,
    {
      className: i(
        e,
        "bn-p-0 bn-w-fit bn-text-foreground bn-bg-transparent hover:bn-bg-transparent"
      ),
      ref: t,
      children: o
    }
  );
}), _n = p((n, t) => {
  const { authorInfo: e, timeString: o, edited: r, ...s } = n, d = Se();
  u(s, !1);
  const b = h();
  return e === "loading" ? /* @__PURE__ */ g(
    "div",
    {
      className: "bn-flex bn-flex-row bn-flex-nowrap bn-items-center bn-gap-4",
      children: [
        /* @__PURE__ */ a(
          b.Skeleton.Skeleton,
          {
            className: "bn-size-7 bn-rounded-full bn-bg-neutral-400 bn-animate-pulse"
          }
        ),
        /* @__PURE__ */ a(
          b.Skeleton.Skeleton,
          {
            className: "bn-h-3 bn-w-32 bn-rounded-full bn-bg-neutral-400 bn-animate-pulse"
          }
        )
      ]
    }
  ) : /* @__PURE__ */ g(
    "div",
    {
      className: "bn-flex bn-flex-row bn-flex-nowrap bn-items-center bn-gap-4",
      children: [
        /* @__PURE__ */ g(b.Avatar.Avatar, { children: [
          /* @__PURE__ */ a(
            b.Avatar.AvatarImage,
            {
              src: e.avatarUrl,
              alt: e.username,
              className: "bn-h-7 bn-rounded-full"
            }
          ),
          /* @__PURE__ */ a(b.Avatar.AvatarFallback, { children: e.username[0] })
        ] }),
        /* @__PURE__ */ g(
          "div",
          {
            className: "bn-flex bn-flex-row bn-flex-nowrap bn-items-center bn-gap-2",
            children: [
              /* @__PURE__ */ a("span", { className: "bn-text-sm bn-font-bold", children: e.username }),
              /* @__PURE__ */ g("span", { className: "bn-text-xs", children: [
                o,
                " ",
                r && `(${d.comments.edited})`
              ] })
            ]
          }
        )
      ]
    }
  );
}), Jn = p((n, t) => {
  const {
    className: e,
    showActions: o,
    authorInfo: r,
    timeString: s,
    actions: d,
    edited: b,
    children: m,
    ...l
  } = n;
  u(l);
  const [f, v] = Fe(!1), { focused: w, ref: C } = ye(), M = d && (o === !0 || o === void 0 || o === "hover" && f || w);
  return /* @__PURE__ */ g(
    "div",
    {
      ref: t,
      className: i(e, "bn-relative bn-flex bn-flex-col bn-gap-2"),
      onMouseEnter: () => v(!0),
      onMouseLeave: () => v(!1),
      children: [
        M ? /* @__PURE__ */ a(
          "div",
          {
            className: "bn-absolute bn-right-0 bn-top-0 bn-z-10",
            ref: C,
            children: d
          }
        ) : null,
        /* @__PURE__ */ a(_n, { ...n }),
        m
      ]
    }
  );
}), Xn = p((n, t) => {
  const { className: e, onFocus: o, onBlur: r, autoFocus: s, editor: d, editable: b, ...m } = n;
  return u(m), /* @__PURE__ */ a(
    it,
    {
      autoFocus: s,
      className: i(e, ""),
      editor: n.editor,
      sideMenu: !1,
      slashMenu: !1,
      tableHandles: !1,
      filePanel: !1,
      formattingToolbar: !1,
      editable: b,
      ref: t,
      onFocus: o,
      onBlur: r,
      children: /* @__PURE__ */ a(
        Te,
        {
          formattingToolbar: Yn
        }
      )
    }
  );
}), Yn = () => {
  const n = Me([]).filter(
    (t) => t.key !== "nestBlockButton" && t.key !== "unnestBlockButton"
  );
  return /* @__PURE__ */ a(Ie, { blockTypeSelectItems: [], children: n });
}, et = p((n, t) => {
  const {
    className: e,
    text: o,
    icon: r,
    isSelected: s,
    mainTooltip: d,
    secondaryTooltip: b,
    onClick: m,
    onMouseEnter: l,
    ...f
  } = n;
  u(f, !1);
  const v = h(), w = /* @__PURE__ */ g(
    v.Button.Button,
    {
      variant: s ? "secondary" : "outline",
      className: i(
        e,
        "bn-flex bn-items-center bn-gap-1 bn-rounded-full bn-h-7 bn-px-2.5"
      ),
      onClick: m,
      onMouseEnter: l,
      ref: t,
      children: [
        /* @__PURE__ */ a("span", { children: r }),
        /* @__PURE__ */ a("span", { children: o })
      ]
    }
  );
  return d ? /* @__PURE__ */ g(v.Tooltip.Tooltip, { children: [
    /* @__PURE__ */ a(v.Tooltip.TooltipTrigger, { asChild: !0, children: w }),
    /* @__PURE__ */ g(
      v.Tooltip.TooltipContent,
      {
        className: "bn-flex bn-flex-col bn-items-center bn-whitespace-pre-wrap",
        children: [
          /* @__PURE__ */ a("span", { children: d }),
          b && /* @__PURE__ */ a("span", { children: b })
        ]
      }
    )
  ] }) : w;
}), nt = p((n, t) => {
  const { className: e, children: o, ...r } = n;
  u(r);
  const s = h();
  return /* @__PURE__ */ a(s.Tooltip.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ a(
    "div",
    {
      className: i(
        e,
        "bn-flex bn-flex-row bn-flex-wrap bn-gap-1 bn-w-full"
      ),
      ref: t,
      children: o
    }
  ) });
}), tt = p((n, t) => {
  const { className: e, children: o, onClick: r, label: s, ...d } = n;
  u(d);
  const b = h();
  return /* @__PURE__ */ a(
    b.Button.Button,
    {
      type: "submit",
      className: e,
      "aria-label": s,
      ref: t,
      onClick: r,
      children: o
    }
  );
}), ot = p((n, t) => {
  const { className: e, accept: o, value: r, placeholder: s, onChange: d, ...b } = n;
  u(b);
  const m = h();
  return /* @__PURE__ */ a(
    m.Input.Input,
    {
      type: "file",
      className: e,
      ref: t,
      accept: o,
      value: r ? r.name : void 0,
      onChange: async (l) => d == null ? void 0 : d(l.target.files[0]),
      placeholder: s
    }
  );
}), at = p((n, t) => {
  const { className: e, isSelected: o, onClick: r, item: s, id: d, ...b } = n;
  u(b);
  const m = A(null);
  return $(() => {
    if (!m.current || !o)
      return;
    const l = z(
      m.current,
      document.querySelector(".bn-grid-suggestion-menu")
    );
    l === "top" ? m.current.scrollIntoView(!0) : l === "bottom" && m.current.scrollIntoView(!1);
  }, [o]), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      ref: E([t, m]),
      id: d,
      role: "option",
      onClick: r,
      "aria-selected": o || void 0,
      children: s.icon
    }
  );
}), rt = p((n, t) => {
  const {
    className: e,
    children: o,
    // unused, using "dots" instead
    columns: r,
    ...s
  } = n;
  return u(s), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      style: { gridColumn: `1 / ${r + 1}` },
      ref: t,
      children: o
    }
  );
}), st = {
  FormattingToolbar: {
    Root: k,
    Button: B,
    Select: F
  },
  FilePanel: {
    Root: kn,
    Button: tt,
    FileInput: ot,
    TabPanel: Bn,
    TextInput: Fn
  },
  LinkToolbar: {
    Root: k,
    Button: B,
    Select: F
  },
  SideMenu: {
    Root: En,
    Button: Vn
  },
  SuggestionMenu: {
    Root: jn,
    Item: Gn,
    EmptyItem: qn,
    Label: Un,
    Loader: Hn
  },
  GridSuggestionMenu: {
    Root: An,
    Item: at,
    EmptyItem: $n,
    Loader: rt
  },
  TableHandle: {
    Root: Kn,
    ExtendButton: On
  },
  Comments: {
    Comment: Jn,
    Editor: Xn,
    Card: Qn,
    CardSection: Wn,
    ExpandSectionsPrompt: Zn
  },
  Generic: {
    Badge: {
      Root: et,
      Group: nt
    },
    Toolbar: {
      Root: k,
      Button: B,
      Select: F
    },
    Form: {
      Root: xn,
      TextInput: wn
    },
    Menu: {
      Root: yn,
      Trigger: Sn,
      Dropdown: Tn,
      Divider: In,
      Label: Dn,
      Item: Mn,
      Button: Rn
    },
    Popover: {
      Root: Pn,
      Trigger: Ln,
      Content: zn
    }
  }
}, it = (n) => {
  const { className: t, shadCNComponents: e, ...o } = n, r = V(() => ({
    ...Nn,
    ...e
  }), [e]);
  return /* @__PURE__ */ a(ve.Provider, { value: r, children: /* @__PURE__ */ a(De.Provider, { value: st, children: /* @__PURE__ */ a(
    Re,
    {
      className: Ce("bn-shadcn", t || ""),
      ...o
    }
  ) }) });
};
export {
  it as BlockNoteView,
  st as components
};
//# sourceMappingURL=blocknote-shadcn.js.map