@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 v, Fragment as me } from "react/jsx-runtime";
import { assertEmpty as c, mergeCSSClasses as ue } from "@blocknote/core";
import { elementOverflow as F, mergeRefs as B, ComponentsContext as pe, BlockNoteViewRaw as fe } from "@blocknote/react";
import * as l from "react";
import { createContext as ge, useContext as he, forwardRef as p, useMemo as k, useRef as L, useEffect as z } from "react";
import { FormProvider as ve, useFormContext as Ne, useForm as xe } from "react-hook-form";
import { cva as T } from "class-variance-authority";
import { clsx as we } from "clsx";
import { extendTailwindMerge as Ce } from "tailwind-merge";
import { Slot as V } from "@radix-ui/react-slot";
import * as h from "@radix-ui/react-dropdown-menu";
import { ChevronRight as E, Check as j, Circle as ye, ChevronDown as $, ChevronUp as Se } from "lucide-react";
import * as G from "@radix-ui/react-label";
import * as M from "@radix-ui/react-popover";
import * as N from "@radix-ui/react-select";
import * as C from "@radix-ui/react-tabs";
import * as U from "@radix-ui/react-toggle";
import * as S from "@radix-ui/react-tooltip";
const Te = Ce({
  prefix: "bn-"
});
function d(...t) {
  return Te(we(t));
}
const Me = T(
  "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 Ie({ className: t, variant: n, ...e }) {
  return /* @__PURE__ */ a("div", { className: d(Me({ variant: n }), t), ...e });
}
const De = T(
  "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"
    }
  }
), O = l.forwardRef(
  ({ className: t, variant: n, size: e, asChild: o = !1, ...r }, s) => /* @__PURE__ */ a(
    o ? V : "button",
    {
      className: d(De({ variant: n, size: e, className: t })),
      ref: s,
      ...r
    }
  )
);
O.displayName = "Button";
const H = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  "div",
  {
    ref: e,
    className: d(
      "bn-rounded-lg bn-border bn-bg-card bn-text-card-foreground bn-shadow-sm",
      t
    ),
    ...n
  }
));
H.displayName = "Card";
const Re = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  "div",
  {
    ref: e,
    className: d("bn-flex bn-flex-col bn-space-y-1.5 bn-p-6", t),
    ...n
  }
));
Re.displayName = "CardHeader";
const Pe = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  "h3",
  {
    ref: e,
    className: d(
      "bn-text-2xl bn-font-semibold bn-leading-none bn-tracking-tight",
      t
    ),
    ...n
  }
));
Pe.displayName = "CardTitle";
const Fe = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  "p",
  {
    ref: e,
    className: d("bn-text-sm bn-text-muted-foreground", t),
    ...n
  }
));
Fe.displayName = "CardDescription";
const K = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a("div", { ref: e, className: d("bn-p-6 bn-pt-0", t), ...n }));
K.displayName = "CardContent";
const Be = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  "div",
  {
    ref: e,
    className: d("bn-flex bn-items-center bn-p-6 bn-pt-0", t),
    ...n
  }
));
Be.displayName = "CardFooter";
const ke = h.Root, Le = h.Trigger, ze = h.Sub, q = l.forwardRef(({ className: t, inset: n, children: e, ...o }, r) => /* @__PURE__ */ v(
  h.SubTrigger,
  {
    ref: r,
    className: d(
      "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",
      n && "bn-pl-8",
      t
    ),
    ...o,
    children: [
      e,
      /* @__PURE__ */ a(E, { className: "bn-ml-auto bn-h-4 bn-w-4" })
    ]
  }
));
q.displayName = h.SubTrigger.displayName;
const W = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  h.SubContent,
  {
    ref: e,
    className: d(
      "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",
      t
    ),
    ...n
  }
));
W.displayName = h.SubContent.displayName;
const A = l.forwardRef(({ className: t, sideOffset: n = 4, ...e }, o) => (
  // <DropdownMenuPrimitive.Portal>
  /* @__PURE__ */ a(
    h.Content,
    {
      ref: o,
      sideOffset: n,
      className: d(
        "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",
        t
      ),
      ...e
    }
  )
));
A.displayName = h.Content.displayName;
const J = l.forwardRef(({ className: t, inset: n, ...e }, o) => /* @__PURE__ */ a(
  h.Item,
  {
    ref: o,
    className: d(
      "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",
      n && "bn-pl-8",
      t
    ),
    ...e
  }
));
J.displayName = h.Item.displayName;
const Q = l.forwardRef(({ className: t, children: n, checked: e, ...o }, r) => /* @__PURE__ */ v(
  h.CheckboxItem,
  {
    ref: r,
    className: d(
      "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",
      t
    ),
    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(h.ItemIndicator, { children: /* @__PURE__ */ a(j, { className: "bn-h-4 bn-w-4" }) }) }),
      n
    ]
  }
));
Q.displayName = h.CheckboxItem.displayName;
const Ve = l.forwardRef(({ className: t, children: n, ...e }, o) => /* @__PURE__ */ v(
  h.RadioItem,
  {
    ref: o,
    className: d(
      "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",
      t
    ),
    ...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(h.ItemIndicator, { children: /* @__PURE__ */ a(ye, { className: "bn-h-2 bn-w-2 bn-fill-current" }) }) }),
      n
    ]
  }
));
Ve.displayName = h.RadioItem.displayName;
const X = l.forwardRef(({ className: t, inset: n, ...e }, o) => /* @__PURE__ */ a(
  h.Label,
  {
    ref: o,
    className: d(
      "bn-px-2 bn-py-1.5 bn-text-sm bn-font-semibold",
      n && "bn-pl-8",
      t
    ),
    ...e
  }
));
X.displayName = h.Label.displayName;
const Y = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  h.Separator,
  {
    ref: e,
    className: d("bn--mx-1 bn-my-1 bn-h-px bn-bg-muted", t),
    ...n
  }
));
Y.displayName = h.Separator.displayName;
const Ee = T(
  "bn-text-sm bn-font-medium bn-leading-none peer-disabled:bn-cursor-not-allowed peer-disabled:bn-opacity-70"
), D = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  G.Root,
  {
    ref: e,
    className: d(Ee(), t),
    ...n
  }
));
D.displayName = G.Root.displayName;
const je = ve, $e = l.createContext(
  {}
), I = () => {
  const t = l.useContext($e), n = l.useContext(Z), { getFieldState: e, formState: o } = Ne(), r = e(t.name, o);
  if (!t)
    throw new Error("useFormField should be used within <FormField>");
  const { id: s } = n;
  return {
    id: s,
    name: t.name,
    formItemId: `${s}-form-item`,
    formDescriptionId: `${s}-form-item-description`,
    formMessageId: `${s}-form-item-message`,
    ...r
  };
}, Z = l.createContext(
  {}
), Ge = l.forwardRef(({ className: t, ...n }, e) => {
  const o = l.useId();
  return /* @__PURE__ */ a(Z.Provider, { value: { id: o }, children: /* @__PURE__ */ a("div", { ref: e, className: d("bn-space-y-2", t), ...n }) });
});
Ge.displayName = "FormItem";
const Ue = l.forwardRef(({ className: t, ...n }, e) => {
  const { error: o, formItemId: r } = I();
  return /* @__PURE__ */ a(
    D,
    {
      ref: e,
      className: d(o && "bn-text-destructive", t),
      htmlFor: r,
      ...n
    }
  );
});
Ue.displayName = "FormLabel";
const Oe = l.forwardRef(({ ...t }, n) => {
  const { error: e, formItemId: o, formDescriptionId: r, formMessageId: s } = I();
  return /* @__PURE__ */ a(
    V,
    {
      ref: n,
      id: o,
      "aria-describedby": e ? `${r} ${s}` : `${r}`,
      "aria-invalid": !!e,
      ...t
    }
  );
});
Oe.displayName = "FormControl";
const He = l.forwardRef(({ className: t, ...n }, e) => {
  const { formDescriptionId: o } = I();
  return /* @__PURE__ */ a(
    "p",
    {
      ref: e,
      id: o,
      className: d("bn-text-sm bn-text-muted-foreground", t),
      ...n
    }
  );
});
He.displayName = "FormDescription";
const Ke = l.forwardRef(({ className: t, children: n, ...e }, o) => {
  const { error: r, formMessageId: s } = I(), i = r ? String(r == null ? void 0 : r.message) : n;
  return i ? /* @__PURE__ */ a(
    "p",
    {
      ref: o,
      id: s,
      className: d("bn-text-sm bn-font-medium bn-text-destructive", t),
      ...e,
      children: i
    }
  ) : null;
});
Ke.displayName = "FormMessage";
const _ = l.forwardRef(
  ({ className: t, type: n, ...e }, o) => /* @__PURE__ */ a(
    "input",
    {
      type: n,
      className: d(
        "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",
        t
      ),
      ref: o,
      ...e
    }
  )
);
_.displayName = "Input";
const qe = M.Root, We = M.Trigger, ee = l.forwardRef(({ className: t, align: n = "center", sideOffset: e = 4, ...o }, r) => (
  // <PopoverPrimitive.Portal>
  /* @__PURE__ */ a(
    M.Content,
    {
      ref: r,
      align: n,
      sideOffset: e,
      className: d(
        "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",
        t
      ),
      ...o
    }
  )
));
ee.displayName = M.Content.displayName;
const Ae = N.Root, Je = N.Value, ne = l.forwardRef(({ className: t, children: n, ...e }, o) => /* @__PURE__ */ v(
  N.Trigger,
  {
    ref: o,
    className: d(
      "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",
      t
    ),
    ...e,
    children: [
      n,
      /* @__PURE__ */ a(N.Icon, { asChild: !0, children: /* @__PURE__ */ a($, { className: "bn-h-4 bn-w-4 bn-opacity-50" }) })
    ]
  }
));
ne.displayName = N.Trigger.displayName;
const te = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  N.ScrollUpButton,
  {
    ref: e,
    className: d(
      "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
      t
    ),
    ...n,
    children: /* @__PURE__ */ a(Se, { className: "bn-h-4 bn-w-4" })
  }
));
te.displayName = N.ScrollUpButton.displayName;
const oe = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  N.ScrollDownButton,
  {
    ref: e,
    className: d(
      "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
      t
    ),
    ...n,
    children: /* @__PURE__ */ a($, { className: "bn-h-4 bn-w-4" })
  }
));
oe.displayName = N.ScrollDownButton.displayName;
const re = l.forwardRef(({ className: t, children: n, position: e = "popper", ...o }, r) => (
  // <SelectPrimitive.Portal>
  /* @__PURE__ */ v(
    N.Content,
    {
      ref: r,
      className: d(
        "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",
        t
      ),
      position: e,
      ...o,
      children: [
        /* @__PURE__ */ a(te, {}),
        /* @__PURE__ */ a(
          N.Viewport,
          {
            className: d(
              "bn-p-1",
              e === "popper" && "bn-h-[var(--radix-select-trigger-height)] bn-w-full bn-min-w-[var(--radix-select-trigger-width)]"
            ),
            children: n
          }
        ),
        /* @__PURE__ */ a(oe, {})
      ]
    }
  )
));
re.displayName = N.Content.displayName;
const Qe = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  N.Label,
  {
    ref: e,
    className: d(
      "bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-font-semibold",
      t
    ),
    ...n
  }
));
Qe.displayName = N.Label.displayName;
const ae = l.forwardRef(({ className: t, children: n, ...e }, o) => /* @__PURE__ */ v(
  N.Item,
  {
    ref: o,
    className: d(
      "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",
      t
    ),
    ...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(j, { className: "bn-h-4 bn-w-4" }) }) }),
      /* @__PURE__ */ a(N.ItemText, { children: n })
    ]
  }
));
ae.displayName = N.Item.displayName;
const Xe = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  N.Separator,
  {
    ref: e,
    className: d("bn--mx-1 bn-my-1 bn-h-px bn-bg-muted", t),
    ...n
  }
));
Xe.displayName = N.Separator.displayName;
const Ye = C.Root, se = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  C.List,
  {
    ref: e,
    className: d(
      "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",
      t
    ),
    ...n
  }
));
se.displayName = C.List.displayName;
const ie = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  C.Trigger,
  {
    ref: e,
    className: d(
      "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",
      t
    ),
    ...n
  }
));
ie.displayName = C.Trigger.displayName;
const de = l.forwardRef(({ className: t, ...n }, e) => /* @__PURE__ */ a(
  C.Content,
  {
    ref: e,
    className: d(
      "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",
      t
    ),
    ...n
  }
));
de.displayName = C.Content.displayName;
const Ze = T(
  "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"
    }
  }
), be = l.forwardRef(({ className: t, variant: n, size: e, ...o }, r) => /* @__PURE__ */ a(
  U.Root,
  {
    ref: r,
    className: d(Ze({ variant: n, size: e, className: t })),
    ...o
  }
));
be.displayName = U.Root.displayName;
const _e = S.Provider, en = S.Root, nn = S.Trigger, le = l.forwardRef(({ className: t, sideOffset: n = 4, ...e }, o) => /* @__PURE__ */ a(
  S.Content,
  {
    ref: o,
    sideOffset: n,
    className: d(
      "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",
      t
    ),
    ...e
  }
));
le.displayName = S.Content.displayName;
const tn = {
  Badge: {
    Badge: Ie
  },
  Button: {
    Button: O
  },
  Card: {
    Card: H,
    CardContent: K
  },
  DropdownMenu: {
    DropdownMenu: ke,
    DropdownMenuCheckboxItem: Q,
    DropdownMenuContent: A,
    DropdownMenuItem: J,
    DropdownMenuLabel: X,
    DropdownMenuSeparator: Y,
    DropdownMenuSub: ze,
    DropdownMenuSubContent: W,
    DropdownMenuSubTrigger: q,
    DropdownMenuTrigger: Le
  },
  Form: {
    Form: je
  },
  Input: {
    Input: _
  },
  Label: {
    Label: D
  },
  Popover: {
    Popover: qe,
    PopoverContent: ee,
    PopoverTrigger: We
  },
  Select: {
    Select: Ae,
    SelectContent: re,
    SelectItem: ae,
    SelectTrigger: ne,
    SelectValue: Je
  },
  Tabs: {
    Tabs: Ye,
    TabsContent: de,
    TabsList: se,
    TabsTrigger: ie
  },
  Toggle: {
    Toggle: be
  },
  Tooltip: {
    Tooltip: en,
    TooltipContent: le,
    TooltipProvider: _e,
    TooltipTrigger: nn
  }
}, ce = ge(void 0);
function g() {
  return he(ce);
}
const on = (t) => {
  const { children: n, ...e } = t;
  c(e);
  const o = g(), r = xe();
  return /* @__PURE__ */ a(o.Form.Form, { ...r, children: n });
}, rn = p((t, n) => {
  const {
    className: e,
    name: o,
    label: r,
    icon: s,
    // TODO: implement
    value: i,
    autoFocus: u,
    placeholder: m,
    onKeyDown: b,
    onChange: f,
    onSubmit: x,
    ...w
  } = t;
  c(w);
  const y = g();
  return r ? /* @__PURE__ */ v("div", { children: [
    /* @__PURE__ */ a(y.Label.Label, { htmlFor: r, children: r }),
    /* @__PURE__ */ a(
      y.Input.Input,
      {
        className: e,
        id: r,
        name: o,
        autoFocus: u,
        placeholder: m,
        value: i,
        onKeyDown: b,
        onChange: f,
        onSubmit: x
      }
    )
  ] }) : /* @__PURE__ */ a(
    y.Input.Input,
    {
      "aria-label": o,
      name: o,
      autoFocus: u,
      placeholder: m,
      value: i,
      onKeyDown: b,
      onChange: f,
      onSubmit: x,
      ref: n
    }
  );
}), an = (t) => p(
  (n, e) => /* @__PURE__ */ a(
    t,
    {
      onPointerDown: (o) => {
        o.nativeEvent.fakeEvent || (o.ctrlKey = !0);
      },
      onPointerUp: (o) => {
        const r = new PointerEvent("pointerdown", o.nativeEvent);
        r.fakeEvent = !0, o.target.dispatchEvent(r);
      },
      ...n,
      ref: e
    }
  )
), sn = (t) => {
  const {
    children: n,
    onOpenChange: e,
    position: o,
    // Unused
    sub: r,
    ...s
  } = t;
  c(s);
  const i = g();
  return r ? /* @__PURE__ */ a(
    i.DropdownMenu.DropdownMenuSub,
    {
      onOpenChange: e,
      children: n
    }
  ) : /* @__PURE__ */ a(i.DropdownMenu.DropdownMenu, { onOpenChange: e, children: n });
}, dn = (t) => {
  const { children: n, sub: e, ...o } = t;
  c(o);
  const r = g(), s = k(
    () => an(
      r.DropdownMenu.DropdownMenuTrigger
    ),
    [r.DropdownMenu.DropdownMenuTrigger]
  );
  return e ? /* @__PURE__ */ a(r.DropdownMenu.DropdownMenuSubTrigger, { children: n }) : /* @__PURE__ */ a(s, { asChild: !0, ...o, children: n });
}, bn = p((t, n) => {
  const { className: e, children: o, sub: r, ...s } = t;
  c(s);
  const i = g();
  return r ? /* @__PURE__ */ a(
    i.DropdownMenu.DropdownMenuSubContent,
    {
      className: e,
      ref: n,
      children: o
    }
  ) : /* @__PURE__ */ a(
    i.DropdownMenu.DropdownMenuContent,
    {
      className: e,
      ref: n,
      children: o
    }
  );
}), ln = p((t, n) => {
  const { className: e, children: o, icon: r, checked: s, subTrigger: i, onClick: u, ...m } = t;
  c(m);
  const b = g();
  return i ? /* @__PURE__ */ v(me, { children: [
    r,
    o
  ] }) : s !== void 0 ? /* @__PURE__ */ v(
    b.DropdownMenu.DropdownMenuCheckboxItem,
    {
      className: d(e, "bn-gap-1"),
      ref: n,
      checked: s,
      onClick: u,
      ...m,
      children: [
        r,
        o
      ]
    }
  ) : /* @__PURE__ */ v(
    b.DropdownMenu.DropdownMenuItem,
    {
      className: e,
      ref: n,
      onClick: u,
      ...m,
      children: [
        r,
        o,
        i && /* @__PURE__ */ a(E, { className: "bn-ml-auto bn-h-4 bn-w-4" })
      ]
    }
  );
}), cn = p((t, n) => {
  const { className: e, ...o } = t;
  c(o);
  const r = g();
  return /* @__PURE__ */ a(
    r.DropdownMenu.DropdownMenuSeparator,
    {
      className: e,
      ref: n
    }
  );
}), mn = p((t, n) => {
  const { className: e, children: o, ...r } = t;
  c(r);
  const s = g();
  return /* @__PURE__ */ a(
    s.DropdownMenu.DropdownMenuLabel,
    {
      className: e,
      ref: n,
      children: o
    }
  );
}), un = p((t, n) => {
  const {
    className: e,
    tabs: o,
    defaultOpenTab: r,
    openTab: s,
    setOpenTab: i,
    loading: u,
    // TODO: implement loader
    ...m
  } = t;
  c(m);
  const b = g();
  return /* @__PURE__ */ v(
    b.Tabs.Tabs,
    {
      className: d(e, "bn-bg-popover bn-p-2 bn-rounded-lg"),
      ref: n,
      value: s,
      defaultValue: r,
      onValueChange: i,
      children: [
        /* @__PURE__ */ a(b.Tabs.TabsList, { children: o.map((f) => /* @__PURE__ */ a(b.Tabs.TabsTrigger, { value: f.name, children: f.name }, f.name)) }),
        o.map((f) => /* @__PURE__ */ a(b.Tabs.TabsContent, { value: f.name, children: /* @__PURE__ */ a(b.Card.Card, { children: /* @__PURE__ */ a(b.Card.CardContent, { className: "bn-p-4", children: f.tabPanel }) }) }, f.name))
      ]
    }
  );
}), pn = p((t, n) => {
  const { className: e, children: o, ...r } = t;
  return c(r), /* @__PURE__ */ a(
    "div",
    {
      className: d(
        e,
        "bn-flex bn-flex-col bn-gap-2 bn-items-start bn-justify-center"
      ),
      ref: n,
      children: o
    }
  );
}), fn = p((t, n) => {
  const { className: e, value: o, placeholder: r, onKeyDown: s, onChange: i, ...u } = t;
  c(u);
  const m = g();
  return /* @__PURE__ */ a(
    m.Input.Input,
    {
      "data-test": "embed-input",
      className: d(e, "bn-w-80"),
      ref: n,
      value: o,
      placeholder: r,
      onKeyDown: s,
      onChange: i
    }
  );
}), gn = (t) => {
  const {
    children: n,
    opened: e,
    position: o,
    // unused
    ...r
  } = t;
  c(r);
  const s = g();
  return /* @__PURE__ */ a(s.Popover.Popover, { open: e, children: n });
}, hn = p(
  (t, n) => {
    const { children: e, ...o } = t;
    c(o);
    const r = g();
    return /* @__PURE__ */ a(r.Popover.PopoverTrigger, { ref: n, asChild: !0, children: e });
  }
), vn = p((t, n) => {
  const { className: e, variant: o, children: r, ...s } = t;
  c(s);
  const i = g();
  return /* @__PURE__ */ a(
    i.Popover.PopoverContent,
    {
      sideOffset: 8,
      className: d(
        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: n,
      children: r
    }
  );
}), Nn = p((t, n) => {
  const { className: e, children: o, ...r } = t;
  return c(r, !1), /* @__PURE__ */ a("div", { className: e, ref: n, ...r, children: o });
}), xn = p((t, n) => {
  const {
    className: e,
    children: o,
    icon: r,
    onClick: s,
    onDragEnd: i,
    onDragStart: u,
    draggable: m,
    label: b,
    ...f
  } = t;
  c(f, !1);
  const x = g();
  return /* @__PURE__ */ v(
    x.Button.Button,
    {
      variant: "ghost",
      className: d(e, "bn-text-gray-400"),
      ref: n,
      "aria-label": b,
      onClick: s,
      onDragStart: u,
      onDragEnd: i,
      draggable: m,
      ...f,
      children: [
        r,
        o
      ]
    }
  );
}), wn = p((t, n) => {
  const { className: e, children: o, id: r, columns: s, ...i } = t;
  return c(i), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      style: { gridTemplateColumns: `repeat(${s}, 1fr)` },
      ref: n,
      id: r,
      role: "grid",
      children: o
    }
  );
}), Cn = p((t, n) => {
  const { className: e, children: o, columns: r, ...s } = t;
  return c(s), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      style: { gridColumn: `1 / ${r + 1}` },
      ref: n,
      children: o
    }
  );
}), yn = p((t, n) => {
  const { className: e, children: o, id: r, ...s } = t;
  return c(s), /* @__PURE__ */ a(
    "div",
    {
      id: r,
      role: "listbox",
      className: d(
        "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: n,
      children: o
    }
  );
}), Sn = p((t, n) => {
  const { className: e, children: o, ...r } = t;
  return c(r), /* @__PURE__ */ a(
    "div",
    {
      className: d(
        "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: n,
      children: /* @__PURE__ */ a("div", { children: o })
    }
  );
}), Tn = p((t, n) => {
  const e = g(), { className: o, item: r, isSelected: s, onClick: i, id: u, ...m } = t;
  c(m);
  const b = L(null);
  return z(() => {
    if (!b.current || !s)
      return;
    const f = F(
      b.current,
      document.querySelector(".bn-suggestion-menu")
    );
    f === "top" ? b.current.scrollIntoView(!0) : f === "bottom" && b.current.scrollIntoView(!1);
  }, [s]), /* @__PURE__ */ v(
    "div",
    {
      className: d(
        "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",
        o
      ),
      ref: B([n, b]),
      id: u,
      onClick: i,
      role: "option",
      "aria-selected": s || void 0,
      children: [
        r.icon && /* @__PURE__ */ a("div", { className: "bn-p-3", "data-position": "left", children: r.icon }),
        /* @__PURE__ */ v("div", { className: "bn-flex-1", children: [
          /* @__PURE__ */ a("div", { className: "bn-text-base", children: r.title }),
          /* @__PURE__ */ a("div", { className: "bn-text-xs", 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 }) })
      ]
    }
  );
}), Mn = p((t, n) => {
  const { className: e, children: o, ...r } = t;
  return c(r), /* @__PURE__ */ a(
    "div",
    {
      className: d("bn-px-2 bn-py-1.5 bn-text-sm bn-font-semibold", e),
      ref: n,
      children: o
    }
  );
}), In = p((t, n) => {
  const { className: e, children: o, ...r } = t;
  return c(r), /* @__PURE__ */ a("div", { className: e, ref: n, children: o });
}), Dn = p((t, n) => {
  const { className: e, children: o, onMouseDown: r, onClick: s, ...i } = t;
  c(i, !1);
  const u = g();
  return /* @__PURE__ */ a(
    u.Button.Button,
    {
      variant: "ghost",
      className: d(
        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: n,
      onClick: s,
      onMouseDown: r,
      ...i,
      children: o
    }
  );
}), Rn = p((t, n) => {
  const {
    className: e,
    children: o,
    draggable: r,
    onDragStart: s,
    onDragEnd: i,
    style: u,
    label: m,
    ...b
  } = t;
  c(b, !1);
  const f = g();
  return /* @__PURE__ */ a(
    f.Button.Button,
    {
      variant: "ghost",
      className: d(e, "bn-p-0 bn-h-fit bn-w-fit bn-text-gray-400"),
      ref: n,
      "aria-label": m,
      draggable: r,
      onDragStart: s,
      onDragEnd: i,
      style: u,
      ...b,
      children: o
    }
  );
}), R = p(
  (t, n) => {
    const { className: e, children: o, onMouseEnter: r, onMouseLeave: s, ...i } = t;
    c(i);
    const u = g();
    return /* @__PURE__ */ a(u.Tooltip.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ a(
      "div",
      {
        className: d(
          e,
          "bn-flex bn-gap-1 bn-p-1 bn-bg-popover bn-text-popover-foreground bn-border bn-rounded-lg bn-shadow-md"
        ),
        ref: n,
        onMouseEnter: r,
        onMouseLeave: s,
        children: o
      }
    ) });
  }
), P = p(
  (t, n) => {
    const {
      className: e,
      children: o,
      mainTooltip: r,
      secondaryTooltip: s,
      icon: i,
      isSelected: u,
      isDisabled: m,
      onClick: b,
      label: f,
      ...x
    } = t;
    c(x, !1);
    const w = g(), y = u === void 0 ? /* @__PURE__ */ v(
      w.Button.Button,
      {
        className: e,
        variant: "ghost",
        disabled: m,
        onClick: b,
        ref: n,
        "aria-label": f,
        ...x,
        children: [
          i,
          o
        ]
      }
    ) : /* @__PURE__ */ v(
      w.Toggle.Toggle,
      {
        className: d(
          e,
          "data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground"
        ),
        "aria-label": f,
        onClick: b,
        pressed: u,
        disabled: m,
        "data-state": u ? "on" : "off",
        "data-disabled": m,
        ref: n,
        ...x,
        children: [
          i,
          o
        ]
      }
    );
    return /* @__PURE__ */ v(w.Tooltip.Tooltip, { children: [
      /* @__PURE__ */ a(w.Tooltip.TooltipTrigger, { asChild: !0, children: y }),
      /* @__PURE__ */ v(
        w.Tooltip.TooltipContent,
        {
          className: "bn-flex bn-flex-col bn-items-center",
          children: [
            /* @__PURE__ */ a("span", { children: r }),
            s && /* @__PURE__ */ a("span", { children: s })
          ]
        }
      )
    ] });
  }
), Pn = p((t, n) => {
  const { className: e, items: o, isDisabled: r, ...s } = t;
  c(s);
  const i = g(), u = (b) => /* @__PURE__ */ v("div", { className: "bn-flex bn-gap-1 bn-items-center", children: [
    b.icon,
    b.text
  ] }), m = o.filter((b) => b.isSelected)[0];
  return m ? /* @__PURE__ */ v(
    i.Select.Select,
    {
      value: m.text,
      onValueChange: (b) => {
        var f, x;
        return (x = (f = o.find((w) => w.text === b)).onClick) == null ? void 0 : x.call(f);
      },
      disabled: r,
      children: [
        /* @__PURE__ */ a(i.Select.SelectTrigger, { className: "bn-border-none", children: /* @__PURE__ */ a(i.Select.SelectValue, {}) }),
        /* @__PURE__ */ a(i.Select.SelectContent, { className: e, ref: n, children: o.map((b) => /* @__PURE__ */ a(
          i.Select.SelectItem,
          {
            disabled: b.isDisabled,
            value: b.text,
            children: /* @__PURE__ */ a(u, { ...b })
          },
          b.text
        )) })
      ]
    }
  ) : null;
}), Fn = p((t, n) => {
  const { className: e, children: o, onClick: r, label: s, ...i } = t;
  c(i);
  const u = g();
  return /* @__PURE__ */ a(
    u.Button.Button,
    {
      type: "submit",
      className: e,
      "aria-label": s,
      ref: n,
      onClick: r,
      children: o
    }
  );
}), Bn = p((t, n) => {
  const { className: e, accept: o, value: r, placeholder: s, onChange: i, ...u } = t;
  c(u);
  const m = g();
  return /* @__PURE__ */ a(
    m.Input.Input,
    {
      type: "file",
      className: e,
      ref: n,
      accept: o,
      value: r ? r.name : void 0,
      onChange: async (b) => i == null ? void 0 : i(b.target.files[0]),
      placeholder: s
    }
  );
}), kn = p((t, n) => {
  const { className: e, isSelected: o, onClick: r, item: s, id: i, ...u } = t;
  c(u);
  const m = L(null);
  return z(() => {
    if (!m.current || !o)
      return;
    const b = F(
      m.current,
      document.querySelector(".bn-grid-suggestion-menu")
    );
    b === "top" ? m.current.scrollIntoView(!0) : b === "bottom" && m.current.scrollIntoView(!1);
  }, [o]), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      ref: B([n, m]),
      id: i,
      role: "option",
      onClick: r,
      "aria-selected": o || void 0,
      children: s.icon
    }
  );
}), Ln = p((t, n) => {
  const {
    className: e,
    children: o,
    // unused, using "dots" instead
    columns: r,
    ...s
  } = t;
  return c(s), /* @__PURE__ */ a(
    "div",
    {
      className: e,
      style: { gridColumn: `1 / ${r + 1}` },
      ref: n,
      children: o
    }
  );
}), zn = {
  FormattingToolbar: {
    Root: R,
    Button: P,
    Select: Pn
  },
  FilePanel: {
    Root: un,
    Button: Fn,
    FileInput: Bn,
    TabPanel: pn,
    TextInput: fn
  },
  LinkToolbar: {
    Root: R,
    Button: P
  },
  SideMenu: {
    Root: Nn,
    Button: xn
  },
  SuggestionMenu: {
    Root: yn,
    Item: Tn,
    EmptyItem: Sn,
    Label: Mn,
    Loader: In
  },
  GridSuggestionMenu: {
    Root: wn,
    Item: kn,
    EmptyItem: Cn,
    Loader: Ln
  },
  TableHandle: {
    Root: Rn,
    ExtendButton: Dn
  },
  Generic: {
    Form: {
      Root: on,
      TextInput: rn
    },
    Menu: {
      Root: sn,
      Trigger: dn,
      Dropdown: bn,
      Divider: cn,
      Label: mn,
      Item: ln
    },
    Popover: {
      Root: gn,
      Trigger: hn,
      Content: vn
    }
  }
}, Wn = (t) => {
  const { className: n, shadCNComponents: e, ...o } = t, r = k(() => ({
    ...tn,
    ...e
  }), [e]);
  return /* @__PURE__ */ a(ce.Provider, { value: r, children: /* @__PURE__ */ a(pe.Provider, { value: zn, children: /* @__PURE__ */ a(
    fe,
    {
      className: ue("bn-shadcn", n || ""),
      ...o
    }
  ) }) });
};
export {
  Wn as BlockNoteView,
  zn as components
};
//# sourceMappingURL=blocknote-shadcn.js.map