@blocknote/shadcn
Version:
A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
1,706 lines (1,705 loc) • 51.5 kB
JavaScript
import { jsx as o, jsxs as v, Fragment as U } from "react/jsx-runtime";
import { assertEmpty as m, mergeCSSClasses as H } from "@blocknote/core";
import { elementOverflow as _, mergeRefs as R, useFocusWithin as K, useDictionary as Q, useBlockNoteContext as W, FormattingToolbarController as Z, getFormattingToolbarItems as J, FormattingToolbar as X, ComponentsContext as Y, BlockNoteViewRaw as ee } from "@blocknote/react";
import * as F from "react";
import { createContext as te, useContext as ne, forwardRef as p, useMemo as L, useRef as E, useEffect as V, useState as oe } from "react";
import { FormProvider as ae, useForm as re } from "react-hook-form";
import * as D from "@radix-ui/react-avatar";
import { clsx as se } from "clsx";
import { twMerge as ie } from "tailwind-merge";
import { Slot as A } from "@radix-ui/react-slot";
import { cva as I } from "class-variance-authority";
import * as w from "@radix-ui/react-dropdown-menu";
import { ChevronRightIcon as de, CheckIcon as j, ChevronDownIcon as q, ChevronUpIcon as le, ChevronRight as ce } from "lucide-react";
import * as ue from "@radix-ui/react-label";
import * as B from "@radix-ui/react-popover";
import * as x from "@radix-ui/react-select";
import * as S from "@radix-ui/react-tabs";
import * as me from "@radix-ui/react-toggle";
import * as N from "@radix-ui/react-tooltip";
function d(...e) {
return ie(se(e));
}
function pe({
className: e,
...t
}) {
return /* @__PURE__ */ o(
D.Root,
{
"data-slot": "avatar",
className: d(
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
e
),
...t
}
);
}
function ge({
className: e,
...t
}) {
return /* @__PURE__ */ o(
D.Image,
{
"data-slot": "avatar-image",
className: d("aspect-square size-full", e),
...t
}
);
}
function ve({
className: e,
...t
}) {
return /* @__PURE__ */ o(
D.Fallback,
{
"data-slot": "avatar-fallback",
className: d(
"bg-muted flex size-full items-center justify-center rounded-full",
e
),
...t
}
);
}
const fe = I(
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
}
},
defaultVariants: {
variant: "default"
}
}
);
function be({
className: e,
variant: t,
asChild: n = !1,
...a
}) {
return /* @__PURE__ */ o(
n ? A : "span",
{
"data-slot": "badge",
className: d(fe({ variant: t }), e),
...a
}
);
}
const he = I(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
function xe({
className: e,
variant: t,
size: n,
asChild: a = !1,
...r
}) {
return /* @__PURE__ */ o(
a ? A : "button",
{
"data-slot": "button",
className: d(he({ variant: t, size: n, className: e })),
...r
}
);
}
function we({ className: e, ...t }) {
return /* @__PURE__ */ o(
"div",
{
"data-slot": "card",
className: d(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
e
),
...t
}
);
}
function Ce({ className: e, ...t }) {
return /* @__PURE__ */ o(
"div",
{
"data-slot": "card-content",
className: d("px-6", e),
...t
}
);
}
function Ne({
...e
}) {
return /* @__PURE__ */ o(w.Root, { "data-slot": "dropdown-menu", ...e });
}
function Te({
...e
}) {
return /* @__PURE__ */ o(
w.Trigger,
{
"data-slot": "dropdown-menu-trigger",
...e
}
);
}
function Se({
className: e,
sideOffset: t = 4,
...n
}) {
return /* @__PURE__ */ o(
w.Content,
{
"data-slot": "dropdown-menu-content",
sideOffset: t,
className: d(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
e
),
...n
}
);
}
function ye({
className: e,
inset: t,
variant: n = "default",
...a
}) {
return /* @__PURE__ */ o(
w.Item,
{
"data-slot": "dropdown-menu-item",
"data-inset": t,
"data-variant": n,
className: d(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
e
),
...a
}
);
}
function ke({
className: e,
children: t,
checked: n,
...a
}) {
return /* @__PURE__ */ v(
w.CheckboxItem,
{
"data-slot": "dropdown-menu-checkbox-item",
className: d(
"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
e
),
checked: n,
...a,
children: [
/* @__PURE__ */ o("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ o(w.ItemIndicator, { children: /* @__PURE__ */ o(j, { className: "size-4" }) }) }),
t
]
}
);
}
function Me({
className: e,
inset: t,
...n
}) {
return /* @__PURE__ */ o(
w.Label,
{
"data-slot": "dropdown-menu-label",
"data-inset": t,
className: d(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
e
),
...n
}
);
}
function ze({
className: e,
...t
}) {
return /* @__PURE__ */ o(
w.Separator,
{
"data-slot": "dropdown-menu-separator",
className: d("bg-border -mx-1 my-1 h-px", e),
...t
}
);
}
function De({
...e
}) {
return /* @__PURE__ */ o(w.Sub, { "data-slot": "dropdown-menu-sub", ...e });
}
function Ie({
className: e,
inset: t,
children: n,
...a
}) {
return /* @__PURE__ */ v(
w.SubTrigger,
{
"data-slot": "dropdown-menu-sub-trigger",
"data-inset": t,
className: d(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8",
e
),
...a,
children: [
n,
/* @__PURE__ */ o(de, { className: "ml-auto size-4" })
]
}
);
}
function Be({
className: e,
...t
}) {
return /* @__PURE__ */ o(
w.SubContent,
{
"data-slot": "dropdown-menu-sub-content",
className: d(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
e
),
...t
}
);
}
function Pe({
className: e,
...t
}) {
return /* @__PURE__ */ o(
ue.Root,
{
"data-slot": "label",
className: d(
"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
e
),
...t
}
);
}
const _e = ae;
F.createContext(
{}
);
F.createContext(
{}
);
function Re({ className: e, type: t, ...n }) {
return /* @__PURE__ */ o(
"input",
{
type: t,
"data-slot": "input",
className: d(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
e
),
...n
}
);
}
function Fe({
...e
}) {
return /* @__PURE__ */ o(B.Root, { "data-slot": "popover", ...e });
}
function Le({
...e
}) {
return /* @__PURE__ */ o(B.Trigger, { "data-slot": "popover-trigger", ...e });
}
function Ee({
className: e,
align: t = "center",
sideOffset: n = 4,
...a
}) {
return /* @__PURE__ */ o(
B.Content,
{
"data-slot": "popover-content",
align: t,
sideOffset: n,
className: d(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md",
e
),
...a
}
);
}
function Ve({
...e
}) {
return /* @__PURE__ */ o(x.Root, { "data-slot": "select", ...e });
}
function Ae({
...e
}) {
return /* @__PURE__ */ o(x.Value, { "data-slot": "select-value", ...e });
}
function je({
className: e,
size: t = "default",
children: n,
...a
}) {
return /* @__PURE__ */ v(
x.Trigger,
{
"data-slot": "select-trigger",
"data-size": t,
className: d(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=text-])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
e
),
...a,
children: [
n,
/* @__PURE__ */ o(x.Icon, { asChild: !0, children: /* @__PURE__ */ o(q, { className: "size-4 opacity-50" }) })
]
}
);
}
function qe({
className: e,
children: t,
position: n = "popper",
...a
}) {
return /* @__PURE__ */ v(
x.Content,
{
"data-slot": "select-content",
className: d(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md",
n === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
e
),
position: n,
...a,
children: [
/* @__PURE__ */ o(Ge, {}),
/* @__PURE__ */ o(
x.Viewport,
{
className: d(
"p-1",
n === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
),
children: t
}
),
/* @__PURE__ */ o(Oe, {})
]
}
);
}
function $e({
className: e,
children: t,
...n
}) {
return /* @__PURE__ */ v(
x.Item,
{
"data-slot": "select-item",
className: d(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
e
),
...n,
children: [
/* @__PURE__ */ o("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ o(x.ItemIndicator, { children: /* @__PURE__ */ o(j, { className: "size-4" }) }) }),
/* @__PURE__ */ o(x.ItemText, { children: t })
]
}
);
}
function Ge({
className: e,
...t
}) {
return /* @__PURE__ */ o(
x.ScrollUpButton,
{
"data-slot": "select-scroll-up-button",
className: d(
"flex cursor-default items-center justify-center py-1",
e
),
...t,
children: /* @__PURE__ */ o(le, { className: "size-4" })
}
);
}
function Oe({
className: e,
...t
}) {
return /* @__PURE__ */ o(
x.ScrollDownButton,
{
"data-slot": "select-scroll-down-button",
className: d(
"flex cursor-default items-center justify-center py-1",
e
),
...t,
children: /* @__PURE__ */ o(q, { className: "size-4" })
}
);
}
function Ue({ className: e, ...t }) {
return /* @__PURE__ */ o(
"div",
{
"data-slot": "skeleton",
className: d("bg-accent animate-pulse rounded-md", e),
...t
}
);
}
function He({
className: e,
...t
}) {
return /* @__PURE__ */ o(
S.Root,
{
"data-slot": "tabs",
className: d("flex flex-col gap-2", e),
...t
}
);
}
function Ke({
className: e,
...t
}) {
return /* @__PURE__ */ o(
S.List,
{
"data-slot": "tabs-list",
className: d(
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
e
),
...t
}
);
}
function Qe({
className: e,
...t
}) {
return /* @__PURE__ */ o(
S.Trigger,
{
"data-slot": "tabs-trigger",
className: d(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
e
),
...t
}
);
}
function We({
className: e,
...t
}) {
return /* @__PURE__ */ o(
S.Content,
{
"data-slot": "tabs-content",
className: d("flex-1 outline-none", e),
...t
}
);
}
const Ze = I(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
{
variants: {
variant: {
default: "bg-transparent",
outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
},
size: {
default: "h-9 px-2 min-w-9",
sm: "h-8 px-1.5 min-w-8",
lg: "h-10 px-2.5 min-w-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
function Je({
className: e,
variant: t,
size: n,
...a
}) {
return /* @__PURE__ */ o(
me.Root,
{
"data-slot": "toggle",
className: d(Ze({ variant: t, size: n, className: e })),
...a
}
);
}
function $({
delayDuration: e = 0,
...t
}) {
return /* @__PURE__ */ o(
N.Provider,
{
"data-slot": "tooltip-provider",
delayDuration: e,
...t
}
);
}
function Xe({
...e
}) {
return /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(N.Root, { "data-slot": "tooltip", ...e }) });
}
function Ye({
...e
}) {
return /* @__PURE__ */ o(N.Trigger, { "data-slot": "tooltip-trigger", ...e });
}
function et({
className: e,
sideOffset: t = 0,
children: n,
...a
}) {
return /* @__PURE__ */ v(
N.Content,
{
"data-slot": "tooltip-content",
sideOffset: t,
className: d(
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
e
),
...a,
children: [
n,
/* @__PURE__ */ o(N.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
]
}
);
}
const tt = {
Avatar: {
Avatar: pe,
AvatarFallback: ve,
AvatarImage: ge
},
Badge: {
Badge: be
},
Button: {
Button: xe
},
Card: {
Card: we,
CardContent: Ce
},
DropdownMenu: {
DropdownMenu: Ne,
DropdownMenuCheckboxItem: ke,
DropdownMenuContent: Se,
DropdownMenuItem: ye,
DropdownMenuLabel: Me,
DropdownMenuSeparator: ze,
DropdownMenuSub: De,
DropdownMenuSubContent: Be,
DropdownMenuSubTrigger: Ie,
DropdownMenuTrigger: Te
},
Form: {
Form: _e
},
Input: {
Input: Re
},
Label: {
Label: Pe
},
Popover: {
Popover: Fe,
PopoverContent: Ee,
PopoverTrigger: Le
},
Select: {
Select: Ve,
SelectContent: qe,
SelectItem: $e,
SelectTrigger: je,
SelectValue: Ae
},
Skeleton: {
Skeleton: Ue
},
Tabs: {
Tabs: He,
TabsContent: We,
TabsList: Ke,
TabsTrigger: Qe
},
Toggle: {
Toggle: Je
},
Tooltip: {
Tooltip: Xe,
TooltipContent: et,
TooltipProvider: $,
TooltipTrigger: Ye
}
}, G = te(void 0);
function f() {
return ne(G);
}
const nt = (e) => {
const { children: t, ...n } = e;
m(n);
const a = f(), r = re();
return /* @__PURE__ */ o(a.Form.Form, { ...r, children: t });
}, ot = p((e, t) => {
const {
className: n,
name: a,
label: r,
variant: s,
icon: i,
// TODO: implement
value: c,
autoFocus: u,
placeholder: l,
disabled: g,
onKeyDown: b,
onChange: h,
onSubmit: C,
autoComplete: T,
rightSection: y,
// TODO: add rightSection
...O
} = e;
m(O);
const P = f();
return /* @__PURE__ */ v(
"div",
{
className: d(
n,
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"text-foreground items-center gap-2"
),
children: [
i,
/* @__PURE__ */ v("div", { className: "flex-1", children: [
r && /* @__PURE__ */ o(P.Label.Label, { htmlFor: r, children: r }),
/* @__PURE__ */ o(
P.Input.Input,
{
className: d(n, "h-auto border-none p-0"),
id: r,
name: a,
autoFocus: u,
placeholder: l,
disabled: g,
value: c,
onKeyDown: b,
onChange: h,
onSubmit: C,
ref: t
}
)
] }),
y
]
}
);
}), at = (e) => p(
(t, n) => /* @__PURE__ */ o(
e,
{
onPointerDown: (a) => {
a.nativeEvent.fakeEvent || (a.ctrlKey = !0);
},
onPointerUp: (a) => {
const r = new PointerEvent("pointerdown", a.nativeEvent);
r.fakeEvent = !0, a.target.dispatchEvent(r);
},
...t,
ref: n
}
)
), rt = (e) => {
const {
children: t,
onOpenChange: n,
position: a,
// Unused
sub: r,
...s
} = e;
m(s);
const i = f();
return r ? /* @__PURE__ */ o(
i.DropdownMenu.DropdownMenuSub,
{
onOpenChange: n,
children: t
}
) : /* @__PURE__ */ o(
i.DropdownMenu.DropdownMenu,
{
modal: !1,
onOpenChange: n,
children: t
}
);
}, st = (e) => {
const { children: t, sub: n, ...a } = e;
m(a);
const r = f(), s = L(
() => at(
r.DropdownMenu.DropdownMenuTrigger
),
[r.DropdownMenu.DropdownMenuTrigger]
);
return n ? /* @__PURE__ */ o(r.DropdownMenu.DropdownMenuSubTrigger, { children: t }) : /* @__PURE__ */ o(s, { asChild: !0, ...a, children: t });
}, it = p((e, t) => {
const { className: n, children: a, sub: r, ...s } = e;
m(s);
const i = f();
return r ? /* @__PURE__ */ o(
i.DropdownMenu.DropdownMenuSubContent,
{
className: n,
ref: t,
children: a
}
) : /* @__PURE__ */ o(
i.DropdownMenu.DropdownMenuContent,
{
className: n,
ref: t,
children: a
}
);
}), dt = p((e, t) => {
const { className: n, children: a, icon: r, checked: s, subTrigger: i, onClick: c, ...u } = e;
m(u);
const l = f();
return i ? /* @__PURE__ */ v(U, { children: [
r,
a
] }) : s !== void 0 ? /* @__PURE__ */ v(
l.DropdownMenu.DropdownMenuCheckboxItem,
{
className: d(n, "gap-1", s ? "" : "px-2"),
ref: t,
checked: s,
onClick: c,
...u,
children: [
r,
a
]
}
) : /* @__PURE__ */ v(
l.DropdownMenu.DropdownMenuItem,
{
className: n,
ref: t,
onClick: c,
...u,
children: [
r,
a,
i && /* @__PURE__ */ o(ce, { className: "ml-auto h-4 w-4" })
]
}
);
}), lt = p((e, t) => {
const { className: n, ...a } = e;
m(a);
const r = f();
return /* @__PURE__ */ o(
r.DropdownMenu.DropdownMenuSeparator,
{
className: n,
ref: t
}
);
}), ct = p((e, t) => {
const { className: n, children: a, ...r } = e;
m(r);
const s = f();
return /* @__PURE__ */ o(
s.DropdownMenu.DropdownMenuLabel,
{
className: n,
ref: t,
children: a
}
);
}), ut = p((e, t) => {
const {
className: n,
children: a,
icon: r,
onClick: s,
onDragEnd: i,
onDragStart: c,
draggable: u,
label: l,
...g
} = e;
m(g, !1);
const b = f();
return /* @__PURE__ */ v(
b.Button.Button,
{
variant: "ghost",
className: d(n, "text-gray-400"),
ref: t,
"aria-label": l,
onClick: s,
onDragStart: c,
onDragEnd: i,
draggable: u,
...g,
children: [
r,
a
]
}
);
}), mt = p((e, t) => {
const {
className: n,
tabs: a,
defaultOpenTab: r,
openTab: s,
setOpenTab: i,
loading: c,
// TODO: implement loader
...u
} = e;
m(u);
const l = f();
return /* @__PURE__ */ v(
l.Tabs.Tabs,
{
className: d(n, "bg-popover max-w-screen rounded-lg p-2"),
ref: t,
value: s,
defaultValue: r,
onValueChange: i,
children: [
/* @__PURE__ */ o(l.Tabs.TabsList, { children: a.map((g) => /* @__PURE__ */ o(l.Tabs.TabsTrigger, { value: g.name, children: g.name }, g.name)) }),
a.map((g) => /* @__PURE__ */ o(l.Tabs.TabsContent, { value: g.name, children: /* @__PURE__ */ o(l.Card.Card, { children: /* @__PURE__ */ o(l.Card.CardContent, { className: "p-4", children: g.tabPanel }) }) }, g.name))
]
}
);
}), pt = p((e, t) => {
const { className: n, children: a, ...r } = e;
return m(r), /* @__PURE__ */ o(
"div",
{
className: d(
n,
"flex flex-col items-start justify-center gap-2"
),
ref: t,
children: a
}
);
}), gt = p((e, t) => {
const { className: n, value: a, placeholder: r, onKeyDown: s, onChange: i, ...c } = e;
m(c);
const u = f();
return /* @__PURE__ */ o(
u.Input.Input,
{
"data-test": "embed-input",
className: d(n, "w-80 max-w-full"),
ref: t,
value: a,
placeholder: r,
onKeyDown: s,
onChange: i
}
);
}), vt = (e) => {
const {
children: t,
open: n,
onOpenChange: a,
position: r,
// unused
...s
} = e;
m(s);
const i = f();
return /* @__PURE__ */ o(i.Popover.Popover, { open: n, onOpenChange: a, children: t });
}, ft = p(
(e, t) => {
const { children: n, ...a } = e;
m(a);
const r = f();
return /* @__PURE__ */ o(r.Popover.PopoverTrigger, { ref: t, asChild: !0, children: n });
}
), bt = p((e, t) => {
const { className: n, variant: a, children: r, ...s } = e;
m(s);
const i = f();
return /* @__PURE__ */ o(
i.Popover.PopoverContent,
{
sideOffset: 8,
className: d(
n,
"z-[10000] flex flex-col gap-2",
a === "panel-popover" ? "w-fit max-w-none border-none p-0 shadow-none" : ""
),
ref: t,
children: r
}
);
}), ht = p((e, t) => {
const { className: n, children: a, ...r } = e;
return m(r, !1), /* @__PURE__ */ o("div", { className: n, ref: t, ...r, children: a });
}), xt = p((e, t) => {
const {
className: n,
children: a,
icon: r,
onClick: s,
onDragEnd: i,
onDragStart: c,
draggable: u,
label: l,
...g
} = e;
m(g, !1);
const b = f();
return /* @__PURE__ */ v(
b.Button.Button,
{
variant: "ghost",
className: d(n, "text-gray-400"),
ref: t,
"aria-label": l,
onClick: s,
onDragStart: c,
onDragEnd: i,
draggable: u,
...g,
children: [
r,
a
]
}
);
}), wt = p((e, t) => {
const { className: n, children: a, id: r, columns: s, ...i } = e;
return m(i), /* @__PURE__ */ o(
"div",
{
className: d(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
"grid",
n
),
style: { gridTemplateColumns: `repeat(${s}, 1fr)` },
ref: t,
id: r,
role: "grid",
children: a
}
);
}), Ct = p((e, t) => {
const { className: n, children: a, columns: r, ...s } = e;
return m(s), /* @__PURE__ */ o(
"div",
{
className: n,
style: { gridColumn: `1 / ${r + 1}` },
ref: t,
children: a
}
);
}), Nt = p((e, t) => {
const { className: n, children: a, id: r, ...s } = e;
return m(s), /* @__PURE__ */ o(
"div",
{
id: r,
role: "listbox",
className: d(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
n
),
ref: t,
children: a
}
);
}), Tt = p((e, t) => {
const { className: n, children: a, ...r } = e;
return m(r), /* @__PURE__ */ o(
"div",
{
className: d(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
"aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
n
),
ref: t,
children: /* @__PURE__ */ o("div", { children: a })
}
);
}), St = p((e, t) => {
const n = f(), { className: a, item: r, isSelected: s, onClick: i, id: c, ...u } = e;
m(u);
const l = E(null);
return V(() => {
if (!l.current || !s)
return;
const g = _(
l.current,
l.current.closest(".bn-suggestion-menu, #ai-suggestion-menu")
);
g === "top" ? l.current.scrollIntoView(!0) : g === "bottom" && l.current.scrollIntoView(!1);
}, [s]), /* @__PURE__ */ v(
"div",
{
className: d(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
"aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
e.item.size === "small" ? "gap-3 py-1" : "",
a
),
"data-highlighted": !0,
ref: R([t, l]),
id: c,
onMouseDown: (g) => g.preventDefault(),
onClick: i,
role: "option",
"aria-selected": s || void 0,
children: [
r.icon && /* @__PURE__ */ o(
"div",
{
className: d(
"p-3",
e.item.size === "small" ? "p-0" : "",
a
),
"data-position": "left",
children: r.icon
}
),
/* @__PURE__ */ v("div", { className: "flex-1", children: [
/* @__PURE__ */ o(
"div",
{
className: d(
"text-base",
e.item.size === "small" ? "text-sm" : "",
a
),
children: r.title
}
),
/* @__PURE__ */ o(
"div",
{
className: d(
"text-xs",
e.item.size === "small" ? "hidden" : "",
a
),
children: r.subtext
}
)
] }),
r.badge && /* @__PURE__ */ o("div", { "data-position": "right", className: "text-xs", children: /* @__PURE__ */ o(n.Badge.Badge, { variant: "secondary", children: r.badge }) })
]
}
);
}), yt = p((e, t) => {
const { className: n, children: a, ...r } = e;
return m(r), /* @__PURE__ */ o(
"div",
{
className: d(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
n
),
ref: t,
children: a
}
);
}), kt = p((e, t) => {
const { className: n, ...a } = e;
return m(a), /* @__PURE__ */ o("div", { className: d(n, "animate-spin"), ref: t, children: /* @__PURE__ */ o(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
height: "1em",
viewBox: "0 -960 960 960",
width: "1em",
fill: "#e8eaed",
children: /* @__PURE__ */ o("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" })
}
) });
}), Mt = p((e, t) => {
const { className: n, children: a, onMouseDown: r, onClick: s, ...i } = e;
m(i, !1);
const c = f();
return /* @__PURE__ */ o(
c.Button.Button,
{
variant: "ghost",
className: d(
n,
"h-full w-full p-0 text-gray-400",
n != null && n.includes("extend-button-add-remove-columns") ? "ml-1" : "mt-1",
n != null && n.includes("extend-button-editing") ? "bg-accent text-accent-foreground" : ""
),
ref: t,
onClick: s,
onMouseDown: r,
...i,
children: a
}
);
}), zt = p((e, t) => {
const {
className: n,
children: a,
draggable: r,
onDragStart: s,
onDragEnd: i,
style: c,
label: u,
...l
} = e;
m(l, !1);
const g = f();
return /* @__PURE__ */ o(
g.Button.Button,
{
variant: "ghost",
className: d(n, "h-fit w-fit p-0 text-gray-400"),
ref: t,
"aria-label": u,
draggable: r,
onDragStart: s,
onDragEnd: i,
style: c,
...l,
children: a
}
);
}), k = p(
(e, t) => {
const {
className: n,
children: a,
onMouseEnter: r,
onMouseLeave: s,
variant: i,
...c
} = e;
m(c);
const u = f();
return /* @__PURE__ */ o(u.Tooltip.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ o(
"div",
{
className: d(
n,
"bg-popover text-popover-foreground flex h-fit gap-1 rounded-lg border p-1 shadow-md",
i === "action-toolbar" ? "w-fit" : ""
),
ref: t,
onMouseEnter: r,
onMouseLeave: s,
children: a
}
) });
}
), M = p(
(e, t) => {
const {
className: n,
children: a,
mainTooltip: r,
secondaryTooltip: s,
icon: i,
isSelected: c,
isDisabled: u,
onClick: l,
label: g,
variant: b,
...h
} = e;
m(h, !1);
const C = f(), T = c === void 0 ? /* @__PURE__ */ v(
C.Button.Button,
{
className: d(
n,
b === "compact" ? "h-6 min-w-6 p-0" : ""
),
variant: "ghost",
size: b === "compact" ? "sm" : "default",
disabled: u,
onClick: l,
ref: t,
"aria-label": g,
...h,
children: [
i,
a
]
}
) : /* @__PURE__ */ v(
C.Toggle.Toggle,
{
className: d(
n,
"data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground",
b === "compact" ? "h-6 min-w-6 p-0" : ""
),
size: b === "compact" ? "sm" : "default",
"aria-label": g,
onClick: l,
pressed: c,
disabled: u,
"data-state": c ? "on" : "off",
"data-disabled": u,
ref: t,
...h,
children: [
i,
a
]
}
);
return /* @__PURE__ */ v(C.Tooltip.Tooltip, { children: [
/* @__PURE__ */ o(C.Tooltip.TooltipTrigger, { asChild: !0, children: T }),
/* @__PURE__ */ v(
C.Tooltip.TooltipContent,
{
className: "flex flex-col items-center whitespace-pre-wrap",
children: [
/* @__PURE__ */ o("span", { children: r }),
s && /* @__PURE__ */ o("span", { children: s })
]
}
)
] });
}
), z = p((e, t) => {
const { className: n, items: a, isDisabled: r, ...s } = e;
m(s);
const i = f(), c = (l) => /* @__PURE__ */ v("div", { className: "flex items-center gap-1", children: [
l.icon,
l.text
] }), u = a.filter((l) => l.isSelected)[0];
return u ? /* @__PURE__ */ v(
i.Select.Select,
{
value: u.text,
onValueChange: (l) => {
var g, b;
return (b = (g = a.find((h) => h.text === l)).onClick) == null ? void 0 : b.call(g);
},
disabled: r,
children: [
/* @__PURE__ */ o(i.Select.SelectTrigger, { className: "border-none", children: /* @__PURE__ */ o(i.Select.SelectValue, {}) }),
/* @__PURE__ */ o(i.Select.SelectContent, { className: n, ref: t, children: a.map((l) => /* @__PURE__ */ o(
i.Select.SelectItem,
{
disabled: l.isDisabled,
value: l.text,
children: /* @__PURE__ */ o(c, { ...l })
},
l.text
)) })
]
}
) : null;
}), Dt = p((e, t) => {
const {
className: n,
children: a,
selected: r,
headerText: s,
onFocus: i,
onBlur: c,
tabIndex: u,
...l
} = e;
m(l);
const g = f();
return /* @__PURE__ */ v(
g.Card.Card,
{
className: d(
n,
"w-[300px]",
r ? "bg-accent text-accent-foreground" : ""
),
onFocus: i,
onBlur: c,
tabIndex: u,
ref: t,
children: [
s && /* @__PURE__ */ o("div", { className: "px-4 pt-4 text-sm italic", children: s }),
a
]
}
);
}), It = p((e, t) => {
const { className: n, children: a, ...r } = e;
return m(r), /* @__PURE__ */ o(
"div",
{
className: d(
n,
"p-4",
n != null && n.includes("thread-comments") ? "flex flex-col gap-6 border-b" : ""
),
ref: t,
children: a
}
);
}), Bt = p((e, t) => {
const { className: n, children: a, ...r } = e;
m(r, !1);
const s = f();
return /* @__PURE__ */ o(
s.Button.Button,
{
className: d(
n,
"text-foreground w-fit bg-transparent p-0 hover:bg-transparent"
),
ref: t,
children: a
}
);
}), Pt = p((e, t) => {
const { authorInfo: n, timeString: a, edited: r, ...s } = e, i = Q();
m(s, !1);
const c = f();
return n === "loading" ? /* @__PURE__ */ v("div", { className: "flex flex-row flex-nowrap items-center gap-4", children: [
/* @__PURE__ */ o(
c.Skeleton.Skeleton,
{
className: "size-7 animate-pulse rounded-full bg-neutral-400"
}
),
/* @__PURE__ */ o(
c.Skeleton.Skeleton,
{
className: "h-3 w-32 animate-pulse rounded-full bg-neutral-400"
}
)
] }) : /* @__PURE__ */ v("div", { className: "flex flex-row flex-nowrap items-center gap-4", children: [
/* @__PURE__ */ v(c.Avatar.Avatar, { children: [
/* @__PURE__ */ o(
c.Avatar.AvatarImage,
{
src: n.avatarUrl,
alt: n.username,
className: "h-7 rounded-full"
}
),
/* @__PURE__ */ o(c.Avatar.AvatarFallback, { children: n.username[0] })
] }),
/* @__PURE__ */ v("div", { className: "flex flex-row flex-nowrap items-center gap-2", children: [
/* @__PURE__ */ o("span", { className: "text-sm font-bold", children: n.username }),
/* @__PURE__ */ v("span", { className: "text-xs", children: [
a,
" ",
r && `(${i.comments.edited})`
] })
] })
] });
}), _t = p((e, t) => {
const {
className: n,
showActions: a,
authorInfo: r,
timeString: s,
actions: i,
edited: c,
emojiPickerOpen: u,
// Unused
children: l,
...g
} = e;
m(g);
const [b, h] = oe(!1), { focused: C, ref: T } = K(), y = i && (a === !0 || a === void 0 || a === "hover" && b || C);
return /* @__PURE__ */ v(
"div",
{
ref: t,
className: d(n, "relative flex flex-col gap-2"),
onMouseEnter: () => h(!0),
onMouseLeave: () => h(!1),
children: [
y ? /* @__PURE__ */ o("div", { className: "absolute right-0 top-0 z-10", ref: T, children: i }) : null,
/* @__PURE__ */ o(Pt, { ...e }),
l
]
}
);
}), Rt = p((e, t) => {
const { className: n, onFocus: a, onBlur: r, autoFocus: s, editor: i, editable: c, ...u } = e;
m(u);
const l = W();
return /* @__PURE__ */ o(
Gt,
{
autoFocus: s,
className: d(n, ""),
theme: l == null ? void 0 : l.colorSchemePreference,
editor: e.editor,
sideMenu: !1,
slashMenu: !1,
tableHandles: !1,
filePanel: !1,
formattingToolbar: !1,
editable: c,
ref: t,
onFocus: a,
onBlur: r,
children: /* @__PURE__ */ o(
Z,
{
formattingToolbar: Ft
}
)
}
);
}), Ft = () => {
const e = J([]).filter(
(t) => t.key !== "nestBlockButton" && t.key !== "unnestBlockButton"
);
return /* @__PURE__ */ o(X, { blockTypeSelectItems: [], children: e });
}, Lt = p((e, t) => {
const {
className: n,
text: a,
icon: r,
isSelected: s,
mainTooltip: i,
secondaryTooltip: c,
onClick: u,
onMouseEnter: l,
...g
} = e;
m(g, !1);
const b = f(), h = /* @__PURE__ */ v(
b.Button.Button,
{
variant: s ? "secondary" : "outline",
className: d(
n,
"flex h-7 items-center gap-1 rounded-full px-2.5"
),
onClick: u,
onMouseEnter: l,
ref: t,
children: [
/* @__PURE__ */ o("span", { children: r }),
/* @__PURE__ */ o("span", { children: a })
]
}
);
return i ? /* @__PURE__ */ v(b.Tooltip.Tooltip, { children: [
/* @__PURE__ */ o(b.Tooltip.TooltipTrigger, { asChild: !0, children: h }),
/* @__PURE__ */ v(
b.Tooltip.TooltipContent,
{
className: "flex flex-col items-center whitespace-pre-wrap",
children: [
/* @__PURE__ */ o("span", { children: i }),
c && /* @__PURE__ */ o("span", { children: c })
]
}
)
] }) : h;
}), Et = p((e, t) => {
const { className: n, children: a, ...r } = e;
m(r);
const s = f();
return /* @__PURE__ */ o(s.Tooltip.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ o(
"div",
{
className: d(n, "flex w-full flex-row flex-wrap gap-1"),
ref: t,
children: a
}
) });
}), Vt = p((e, t) => {
const { className: n, children: a, onClick: r, label: s, ...i } = e;
m(i);
const c = f();
return /* @__PURE__ */ o(
c.Button.Button,
{
type: "submit",
className: n,
"aria-label": s,
ref: t,
onClick: r,
children: a
}
);
}), At = p((e, t) => {
const { className: n, accept: a, value: r, placeholder: s, onChange: i, ...c } = e;
m(c);
const u = f();
return /* @__PURE__ */ o(
u.Input.Input,
{
type: "file",
className: n,
ref: t,
accept: a,
value: r ? r.name : void 0,
onChange: async (l) => i == null ? void 0 : i(l.target.files[0]),
placeholder: s
}
);
}), jt = p((e, t) => {
const { className: n, isSelected: a, onClick: r, item: s, id: i, ...c } = e;
m(c);
const u = E(null);
return V(() => {
if (!u.current || !a)
return;
const l = _(
u.current,
u.current.closest(".bn-grid-suggestion-menu")
);
l === "top" ? u.current.scrollIntoView(!0) : l === "bottom" && u.current.scrollIntoView(!1);
}, [a]), /* @__PURE__ */ o(
"div",
{
className: d(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
"aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
"text-lg!",
n
),
ref: R([t, u]),
id: i,
role: "option",
onClick: r,
"aria-selected": a || void 0,
children: s.icon
}
);
}), qt = p((e, t) => {
const {
className: n,
children: a,
// unused, using "dots" instead
columns: r,
...s
} = e;
return m(s), /* @__PURE__ */ o(
"div",
{
className: n,
style: { gridColumn: `1 / ${r + 1}` },
ref: t,
children: a
}
);
}), $t = {
FormattingToolbar: {
Root: k,
Button: M,
Select: z
},
FilePanel: {
Root: mt,
Button: Vt,
FileInput: At,