@blocknote/shadcn
Version:
A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
1,247 lines • 51.6 kB
JavaScript
import { assertEmpty as e, mergeCSSClasses as t } from "@blocknote/core";
import { BlockNoteViewRaw as n, ComponentsContext as r, FormattingToolbar as i, FormattingToolbarController as a, elementOverflow as o, getFormattingToolbarItems as s, mergeRefs as c, useBlockNoteContext as l, useBlockNoteEditor as u, useDictionary as d, useFocusWithin as f } from "@blocknote/react";
import { createContext as p, forwardRef as m, useContext as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
import { Avatar as C } from "@base-ui/react/avatar";
import { clsx as ee } from "clsx";
import { twMerge as te } from "tailwind-merge";
import { mergeProps as ne } from "@base-ui/react/merge-props";
import { useRender as re } from "@base-ui/react/use-render";
import { cva as w } from "class-variance-authority";
import { Button as ie } from "@base-ui/react/button";
import { Menu as T } from "@base-ui/react/menu";
import { CheckIcon as E, ChevronDownIcon as D, ChevronRight as ae, ChevronRightIcon as oe, ChevronUpIcon as se } from "lucide-react";
import { Input as ce } from "@base-ui/react/input";
import { Popover as O } from "@base-ui/react/popover";
import { Select as k } from "@base-ui/react/select";
import { Tabs as A } from "@base-ui/react/tabs";
import { Toggle as le } from "@base-ui/react/toggle";
import { Tooltip as j } from "@base-ui/react/tooltip";
//#region src/form/Form.tsx
var ue = (t) => {
let { children: n, ...r } = t;
return e(r), /* @__PURE__ */ x(b, { children: n });
};
//#endregion
//#region src/lib/utils.ts
function M(...e) {
return te(ee(e));
}
//#endregion
//#region src/components/ui/avatar.tsx
function de({ className: e, size: t = "default", ...n }) {
return /* @__PURE__ */ x(C.Root, {
"data-slot": "avatar",
"data-size": t,
className: M("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", e),
...n
});
}
function N({ className: e, ...t }) {
return /* @__PURE__ */ x(C.Image, {
"data-slot": "avatar-image",
className: M("aspect-square size-full rounded-full object-cover", e),
...t
});
}
function P({ className: e, ...t }) {
return /* @__PURE__ */ x(C.Fallback, {
"data-slot": "avatar-fallback",
className: M("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", e),
...t
});
}
//#endregion
//#region src/components/ui/badge.tsx
var F = w("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
variants: { variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
link: "text-primary underline-offset-4 hover:underline"
} },
defaultVariants: { variant: "default" }
});
function I({ className: e, variant: t = "default", render: n, ...r }) {
return re({
defaultTagName: "span",
props: ne({ className: M(F({ variant: t }), e) }, r),
render: n,
state: {
slot: "badge",
variant: t
}
});
}
//#endregion
//#region src/components/ui/button.tsx
var L = w("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80",
outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
icon: "size-9",
"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
"icon-lg": "size-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
});
function R({ className: e, variant: t = "default", size: n = "default", ...r }) {
return /* @__PURE__ */ x(ie, {
"data-slot": "button",
className: M(L({
variant: t,
size: n,
className: e
})),
...r
});
}
//#endregion
//#region src/components/ui/card.tsx
function z({ className: e, size: t = "default", ...n }) {
return /* @__PURE__ */ x("div", {
"data-slot": "card",
"data-size": t,
className: M("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", e),
...n
});
}
function B({ className: e, ...t }) {
return /* @__PURE__ */ x("div", {
"data-slot": "card-content",
className: M("px-(--card-spacing)", e),
...t
});
}
//#endregion
//#region src/components/ui/dropdown-menu.tsx
function V({ ...e }) {
return /* @__PURE__ */ x(T.Root, {
"data-slot": "dropdown-menu",
...e
});
}
function H({ ...e }) {
return /* @__PURE__ */ x(T.Trigger, {
"data-slot": "dropdown-menu-trigger",
...e
});
}
function U({ align: e = "start", alignOffset: t = 0, side: n = "bottom", sideOffset: r = 4, className: i, container: a, ...o }) {
return /* @__PURE__ */ x(T.Portal, {
container: a,
children: /* @__PURE__ */ x(T.Positioner, {
className: "isolate z-50 outline-none",
align: e,
alignOffset: t,
side: n,
sideOffset: r,
children: /* @__PURE__ */ x(T.Popup, {
"data-slot": "dropdown-menu-content",
className: M("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", i),
...o
})
})
});
}
function fe({ ...e }) {
return /* @__PURE__ */ x(T.Group, {
"data-slot": "dropdown-menu-group",
...e
});
}
function pe({ className: e, inset: t, ...n }) {
return /* @__PURE__ */ x(T.GroupLabel, {
"data-slot": "dropdown-menu-label",
"data-inset": t,
className: M("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", e),
...n
});
}
function me({ className: e, inset: t, variant: n = "default", ...r }) {
return /* @__PURE__ */ x(T.Item, {
"data-slot": "dropdown-menu-item",
"data-inset": t,
"data-variant": n,
className: M("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", e),
...r
});
}
function he({ ...e }) {
return /* @__PURE__ */ x(T.SubmenuRoot, {
"data-slot": "dropdown-menu-sub",
...e
});
}
function ge({ className: e, inset: t, children: n, ...r }) {
return /* @__PURE__ */ S(T.SubmenuTrigger, {
"data-slot": "dropdown-menu-sub-trigger",
"data-inset": t,
className: M("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", e),
...r,
children: [n, /* @__PURE__ */ x(oe, { className: "ml-auto" })]
});
}
function _e({ align: e = "start", alignOffset: t = -3, side: n = "right", sideOffset: r = 0, className: i, ...a }) {
return /* @__PURE__ */ x(U, {
"data-slot": "dropdown-menu-sub-content",
className: M("w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", i),
align: e,
alignOffset: t,
side: n,
sideOffset: r,
...a
});
}
function ve({ className: e, children: t, checked: n, inset: r, ...i }) {
return /* @__PURE__ */ S(T.CheckboxItem, {
"data-slot": "dropdown-menu-checkbox-item",
"data-inset": r,
className: M("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", e),
checked: n,
...i,
children: [/* @__PURE__ */ x("span", {
className: "pointer-events-none absolute right-2 flex items-center justify-center",
"data-slot": "dropdown-menu-checkbox-item-indicator",
children: /* @__PURE__ */ x(T.CheckboxItemIndicator, { children: /* @__PURE__ */ x(E, {}) })
}), t]
});
}
function ye({ className: e, ...t }) {
return /* @__PURE__ */ x(T.Separator, {
"data-slot": "dropdown-menu-separator",
className: M("-mx-1 my-1 h-px bg-border", e),
...t
});
}
//#endregion
//#region src/components/ui/input.tsx
function be({ className: e, type: t, ...n }) {
return /* @__PURE__ */ x(ce, {
type: t,
"data-slot": "input",
className: M("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", e),
...n
});
}
//#endregion
//#region src/components/ui/label.tsx
function xe({ className: e, ...t }) {
return /* @__PURE__ */ x("label", {
"data-slot": "label",
className: M("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", e),
...t
});
}
//#endregion
//#region src/components/ui/popover.tsx
function Se({ ...e }) {
return /* @__PURE__ */ x(O.Root, {
"data-slot": "popover",
...e
});
}
function Ce({ ...e }) {
return /* @__PURE__ */ x(O.Trigger, {
"data-slot": "popover-trigger",
...e
});
}
function we({ className: e, align: t = "center", alignOffset: n = 0, side: r = "bottom", sideOffset: i = 4, container: a, ...o }) {
return /* @__PURE__ */ x(O.Portal, {
container: a,
children: /* @__PURE__ */ x(O.Positioner, {
align: t,
alignOffset: n,
side: r,
sideOffset: i,
className: "isolate z-50",
children: /* @__PURE__ */ x(O.Popup, {
"data-slot": "popover-content",
className: M("z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", e),
...o
})
})
});
}
//#endregion
//#region src/components/ui/select.tsx
var Te = k.Root;
function Ee({ className: e, ...t }) {
return /* @__PURE__ */ x(k.Value, {
"data-slot": "select-value",
className: M("flex flex-1 text-left", e),
...t
});
}
function De({ className: e, size: t = "default", children: n, ...r }) {
return /* @__PURE__ */ S(k.Trigger, {
"data-slot": "select-trigger",
"data-size": t,
className: M("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground 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-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", e),
...r,
children: [n, /* @__PURE__ */ x(k.Icon, { render: /* @__PURE__ */ x(D, { className: "text-muted-foreground pointer-events-none size-4" }) })]
});
}
function Oe({ className: e, children: t, side: n = "bottom", sideOffset: r = 4, align: i = "center", alignOffset: a = 0, alignItemWithTrigger: o = !0, container: s, ...c }) {
return /* @__PURE__ */ x(k.Portal, {
container: s,
children: /* @__PURE__ */ x(k.Positioner, {
side: n,
sideOffset: r,
align: i,
alignOffset: a,
alignItemWithTrigger: o,
className: "isolate z-50",
children: /* @__PURE__ */ S(k.Popup, {
"data-slot": "select-content",
"data-align-trigger": o,
className: M("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", e),
...c,
children: [
/* @__PURE__ */ x(Ae, {}),
/* @__PURE__ */ x(k.List, { children: t }),
/* @__PURE__ */ x(je, {})
]
})
})
});
}
function ke({ className: e, children: t, ...n }) {
return /* @__PURE__ */ S(k.Item, {
"data-slot": "select-item",
className: M("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", e),
...n,
children: [/* @__PURE__ */ x(k.ItemText, {
className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
children: t
}), /* @__PURE__ */ x(k.ItemIndicator, {
render: /* @__PURE__ */ x("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
children: /* @__PURE__ */ x(E, { className: "pointer-events-none" })
})]
});
}
function Ae({ className: e, ...t }) {
return /* @__PURE__ */ x(k.ScrollUpArrow, {
"data-slot": "select-scroll-up-button",
className: M("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", e),
...t,
children: /* @__PURE__ */ x(se, {})
});
}
function je({ className: e, ...t }) {
return /* @__PURE__ */ x(k.ScrollDownArrow, {
"data-slot": "select-scroll-down-button",
className: M("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", e),
...t,
children: /* @__PURE__ */ x(D, {})
});
}
//#endregion
//#region src/components/ui/skeleton.tsx
function Me({ className: e, ...t }) {
return /* @__PURE__ */ x("div", {
"data-slot": "skeleton",
className: M("animate-pulse rounded-md bg-muted", e),
...t
});
}
//#endregion
//#region src/components/ui/tabs.tsx
function Ne({ className: e, orientation: t = "horizontal", ...n }) {
return /* @__PURE__ */ x(A.Root, {
"data-slot": "tabs",
"data-orientation": t,
className: M("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", e),
...n
});
}
var Pe = w("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
variants: { variant: {
default: "bg-muted",
line: "gap-1 bg-transparent"
} },
defaultVariants: { variant: "default" }
});
function Fe({ className: e, variant: t = "default", ...n }) {
return /* @__PURE__ */ x(A.List, {
"data-slot": "tabs-list",
"data-variant": t,
className: M(Pe({ variant: t }), e),
...n
});
}
function Ie({ className: e, ...t }) {
return /* @__PURE__ */ x(A.Tab, {
"data-slot": "tabs-trigger",
className: M("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", e),
...t
});
}
function Le({ className: e, ...t }) {
return /* @__PURE__ */ x(A.Panel, {
"data-slot": "tabs-content",
className: M("flex-1 text-sm outline-none", e),
...t
});
}
//#endregion
//#region src/components/ui/toggle.tsx
var Re = w("group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
variants: {
variant: {
default: "bg-transparent",
outline: "border border-input bg-transparent shadow-xs hover:bg-muted"
},
size: {
default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
});
function ze({ className: e, variant: t = "default", size: n = "default", ...r }) {
return /* @__PURE__ */ x(le, {
"data-slot": "toggle",
className: M(Re({
variant: t,
size: n,
className: e
})),
...r
});
}
//#endregion
//#region src/components/ui/tooltip.tsx
function Be({ delay: e = 0, ...t }) {
return /* @__PURE__ */ x(j.Provider, {
"data-slot": "tooltip-provider",
delay: e,
...t
});
}
function Ve({ ...e }) {
return /* @__PURE__ */ x(j.Root, {
"data-slot": "tooltip",
...e
});
}
function He({ ...e }) {
return /* @__PURE__ */ x(j.Trigger, {
"data-slot": "tooltip-trigger",
...e
});
}
function Ue({ className: e, side: t = "top", sideOffset: n = 4, align: r = "center", alignOffset: i = 0, children: a, container: o, ...s }) {
return /* @__PURE__ */ x(j.Portal, {
container: o,
children: /* @__PURE__ */ x(j.Positioner, {
align: r,
alignOffset: i,
side: t,
sideOffset: n,
className: "isolate z-50",
children: /* @__PURE__ */ S(j.Popup, {
"data-slot": "tooltip-content",
className: M("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", e),
...s,
children: [a, /* @__PURE__ */ x(j.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
})
})
});
}
//#endregion
//#region src/ShadCNComponentsContext.tsx
var W = {
Avatar: {
Avatar: de,
AvatarFallback: P,
AvatarImage: N
},
Badge: { Badge: I },
Button: { Button: R },
Card: {
Card: z,
CardContent: B
},
DropdownMenu: {
DropdownMenu: V,
DropdownMenuCheckboxItem: ve,
DropdownMenuContent: U,
DropdownMenuGroup: fe,
DropdownMenuItem: me,
DropdownMenuLabel: pe,
DropdownMenuSeparator: ye,
DropdownMenuSub: he,
DropdownMenuSubContent: _e,
DropdownMenuSubTrigger: ge,
DropdownMenuTrigger: H
},
Input: { Input: be },
Label: { Label: xe },
Popover: {
Popover: Se,
PopoverContent: we,
PopoverTrigger: Ce
},
Select: {
Select: Te,
SelectContent: Oe,
SelectItem: ke,
SelectTrigger: De,
SelectValue: Ee
},
Skeleton: { Skeleton: Me },
Tabs: {
Tabs: Ne,
TabsContent: Le,
TabsList: Fe,
TabsTrigger: Ie
},
Toggle: { Toggle: ze },
Tooltip: {
Tooltip: Ve,
TooltipContent: Ue,
TooltipProvider: Be,
TooltipTrigger: He
}
}, G = p(void 0);
function K() {
return h(G);
}
//#endregion
//#region src/form/TextInput.tsx
var We = m((t, n) => {
let { className: r, name: i, label: a, variant: o, icon: s, value: c, autoFocus: l, placeholder: u, disabled: d, onKeyDown: f, onChange: p, onSubmit: m, autoComplete: h, "aria-activedescendant": g, rightSection: _, ...v } = t;
e(v);
let y = K();
return /* @__PURE__ */ S("div", {
className: M(r, "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: [
s,
/* @__PURE__ */ S("div", {
className: "flex-1",
children: [a && /* @__PURE__ */ x(y.Label.Label, {
htmlFor: a,
children: a
}), /* @__PURE__ */ x(y.Input.Input, {
className: M(r, "h-auto border-none p-0"),
id: a,
name: i,
autoFocus: l,
placeholder: u,
disabled: d,
value: c,
onKeyDown: f,
onChange: p,
onSubmit: m,
ref: n,
"aria-activedescendant": g
})]
}),
_
]
});
}), Ge = (t) => {
let { children: n, onOpenChange: r, position: i, sub: a, ...o } = t;
e(o);
let s = K();
return a ? /* @__PURE__ */ x(s.DropdownMenu.DropdownMenuSub, {
onOpenChange: r,
children: n
}) : /* @__PURE__ */ x(s.DropdownMenu.DropdownMenu, {
modal: !1,
onOpenChange: r,
children: n
});
}, Ke = (t) => {
let { children: n, sub: r, ...i } = t;
e(i);
let a = K();
return r ? /* @__PURE__ */ x(a.DropdownMenu.DropdownMenuSubTrigger, { children: n }) : /* @__PURE__ */ x(a.DropdownMenu.DropdownMenuTrigger, { render: n });
}, qe = m((t, n) => {
let { className: r, children: i, sub: a, ...o } = t;
e(o);
let s = K(), c = u().portalElement;
return x(a ? s.DropdownMenu.DropdownMenuSubContent : s.DropdownMenu.DropdownMenuContent, {
className: r,
container: c,
ref: n,
children: i
});
}), Je = m((t, n) => {
let { className: r, children: i, icon: a, checked: o, subTrigger: s, onClick: c, ...l } = t;
e(l);
let u = K();
return s ? /* @__PURE__ */ S(b, { children: [a, i] }) : o === void 0 ? /* @__PURE__ */ S(u.DropdownMenu.DropdownMenuItem, {
className: r,
ref: n,
onClick: c,
...l,
children: [
a,
i,
s && /* @__PURE__ */ x(ae, { className: "ml-auto h-4 w-4" })
]
}) : /* @__PURE__ */ S(u.DropdownMenu.DropdownMenuCheckboxItem, {
className: M(r, "gap-1", o ? "" : "px-2"),
ref: n,
checked: o,
onClick: c,
...l,
children: [a, i]
});
}), Ye = m((t, n) => {
let { className: r, ...i } = t;
e(i);
let a = K();
return /* @__PURE__ */ x(a.DropdownMenu.DropdownMenuSeparator, {
className: r,
ref: n
});
}), Xe = m((t, n) => {
let { className: r, children: i, ...a } = t;
e(a);
let o = K();
return /* @__PURE__ */ x(o.DropdownMenu.DropdownMenuGroup, { children: /* @__PURE__ */ x(o.DropdownMenu.DropdownMenuLabel, {
className: r,
ref: n,
children: i
}) });
}), Ze = m((t, n) => {
let { className: r, children: i, icon: a, onClick: o, onDragEnd: s, onDragStart: c, draggable: l, label: u, ...d } = t;
e(d, !1);
let f = K();
return /* @__PURE__ */ S(f.Button.Button, {
variant: "ghost",
className: M(r, "text-gray-400"),
ref: n,
"aria-label": u,
onClick: o,
onDragStart: c,
onDragEnd: s,
draggable: l,
...d,
children: [a, i]
});
}), Qe = m((t, n) => {
let { className: r, tabs: i, defaultOpenTab: a, openTab: o, setOpenTab: s, loading: c, ...l } = t;
e(l);
let u = K();
return /* @__PURE__ */ S(u.Tabs.Tabs, {
className: M(r, "bg-popover max-w-screen rounded-lg p-2"),
ref: n,
value: o,
defaultValue: a,
onValueChange: s,
children: [/* @__PURE__ */ x(u.Tabs.TabsList, { children: i.map((e) => /* @__PURE__ */ x(u.Tabs.TabsTrigger, {
value: e.name,
children: e.name
}, e.name)) }), i.map((e) => /* @__PURE__ */ x(u.Tabs.TabsContent, {
value: e.name,
children: /* @__PURE__ */ x(u.Card.Card, { children: /* @__PURE__ */ x(u.Card.CardContent, {
className: "p-4",
children: e.tabPanel
}) })
}, e.name))]
});
}), $e = m((t, n) => {
let { className: r, children: i, ...a } = t;
return e(a), /* @__PURE__ */ x("div", {
className: M(r, "flex flex-col items-start justify-center gap-2"),
ref: n,
children: i
});
}), et = m((t, n) => {
let { className: r, value: i, placeholder: a, onKeyDown: o, onChange: s, ...c } = t;
e(c);
let l = K();
return /* @__PURE__ */ x(l.Input.Input, {
"data-test": "embed-input",
className: M(r, "w-80 max-w-full"),
ref: n,
value: i,
placeholder: a,
onKeyDown: o,
onChange: s
});
}), q = p(void 0), tt = (t) => {
let { children: n, open: r, onOpenChange: i, position: a, portalRoot: o, ...s } = t;
e(s);
let c = K();
return /* @__PURE__ */ x(c.Popover.Popover, {
open: r,
onOpenChange: i,
children: /* @__PURE__ */ x(q.Provider, {
value: o,
children: n
})
});
}, nt = m((t, n) => {
let { children: r, ...i } = t;
e(i);
let a = K();
return /* @__PURE__ */ x(a.Popover.PopoverTrigger, {
ref: n,
render: r
});
}), rt = m((t, n) => {
let { className: r, variant: i, children: a, ...o } = t;
e(o);
let s = K(), c = h(q), l = u();
return /* @__PURE__ */ x(s.Popover.PopoverContent, {
sideOffset: 8,
container: c ?? l.portalElement,
className: M(r, "flex flex-col gap-2", i === "panel-popover" ? "w-fit max-w-none border-none p-0 shadow-none" : ""),
ref: n,
children: a
});
}), it = m((t, n) => {
let { className: r, children: i, ...a } = t;
return e(a, !1), /* @__PURE__ */ x("div", {
className: r,
ref: n,
...a,
children: i
});
}), at = m((t, n) => {
let { className: r, children: i, icon: a, onClick: o, onDragEnd: s, onDragStart: c, draggable: l, label: u, ...d } = t;
e(d, !1);
let f = K();
return /* @__PURE__ */ S(f.Button.Button, {
variant: "ghost",
className: M(r, "text-gray-400"),
ref: n,
"aria-label": u,
onClick: o,
onDragStart: c,
onDragEnd: s,
draggable: l,
...d,
children: [a, i]
});
}), ot = m((t, n) => {
let { className: r, children: i, id: a, columns: o, ...s } = t;
return e(s), /* @__PURE__ */ x("div", {
className: M("bg-popover text-popover-foreground z-50 min-w-32 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 ring-foreground/10", "grid", r),
style: { gridTemplateColumns: `repeat(${o}, 1fr)` },
ref: n,
id: a,
role: "grid",
children: i
});
}), st = m((t, n) => {
let { className: r, children: i, columns: a, ...o } = t;
return e(o), /* @__PURE__ */ x("div", {
className: r,
style: { gridColumn: `1 / ${a + 1}` },
ref: n,
children: i
});
}), ct = m((t, n) => {
let { className: r, children: i, id: a, ...o } = t;
return e(o), /* @__PURE__ */ x("div", {
id: a,
role: "listbox",
className: M("bg-popover text-popover-foreground z-50 min-w-32 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 ring-foreground/10", r),
ref: n,
children: i
});
}), lt = m((t, n) => {
let { className: r, children: i, ...a } = t;
return e(a), /* @__PURE__ */ x("div", {
className: M("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", r),
ref: n,
children: /* @__PURE__ */ x("div", { children: i })
});
}), ut = m((t, n) => {
let r = K(), { className: i, item: a, isSelected: s, onClick: l, id: u, ...d } = t;
e(d);
let f = v(null);
return g(() => {
!f.current || !s || o(f.current, f.current.closest(".bn-suggestion-menu, #ai-suggestion-menu")) !== "none" && f.current.scrollIntoView({ block: "nearest" });
}, [s]), /* @__PURE__ */ S("div", {
className: M("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", t.item.size === "small" ? "gap-3 py-1" : "", i),
"data-highlighted": !0,
ref: c([n, f]),
id: u,
onMouseDown: (e) => e.preventDefault(),
onClick: l,
role: "option",
"aria-selected": s || void 0,
children: [
a.icon && /* @__PURE__ */ x("div", {
className: M("p-3", t.item.size === "small" ? "p-0" : "", i),
"data-position": "left",
children: a.icon
}),
/* @__PURE__ */ S("div", {
className: "flex-1",
children: [/* @__PURE__ */ x("div", {
className: M("text-base", t.item.size === "small" ? "text-sm" : "", i),
children: a.title
}), /* @__PURE__ */ x("div", {
className: M("text-xs", t.item.size === "small" ? "hidden" : "", i),
children: a.subtext
})]
}),
a.badge && /* @__PURE__ */ x("div", {
"data-position": "right",
className: "text-xs",
children: /* @__PURE__ */ x(r.Badge.Badge, {
variant: "secondary",
children: a.badge
})
})
]
});
}), dt = m((t, n) => {
let { className: r, children: i, ...a } = t;
return e(a), /* @__PURE__ */ x("div", {
className: M("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", r),
ref: n,
children: i
});
}), ft = m((t, n) => {
let { className: r, ...i } = t;
return e(i), /* @__PURE__ */ x("div", {
className: M(r, "animate-spin"),
ref: n,
children: /* @__PURE__ */ x("svg", {
xmlns: "http://www.w3.org/2000/svg",
height: "1em",
viewBox: "0 -960 960 960",
width: "1em",
fill: "#e8eaed",
children: /* @__PURE__ */ x("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" })
})
});
}), pt = m((t, n) => {
let { className: r, markClassName: i, backgroundColor: a, children: o, ...s } = t;
return e(s), /* @__PURE__ */ x("span", {
className: M(r, i),
style: i ? void 0 : { backgroundColor: a },
ref: n,
children: o
});
}), mt = m((t, n) => {
let { className: r, children: i, onMouseDown: a, onClick: o, ...s } = t;
e(s, !1);
let c = K();
return /* @__PURE__ */ x(c.Button.Button, {
variant: "ghost",
className: M(r, "h-full w-full p-0 text-gray-400", r?.includes("extend-button-add-remove-columns") ? "ml-1" : "mt-1", r?.includes("extend-button-editing") ? "bg-accent text-accent-foreground" : ""),
ref: n,
onClick: o,
onMouseDown: a,
...s,
children: i
});
}), ht = m((t, n) => {
let { className: r, children: i, draggable: a, onDragStart: o, onDragEnd: s, style: c, label: l, ...u } = t;
e(u, !1);
let d = K();
return /* @__PURE__ */ x(d.Button.Button, {
variant: "ghost",
className: M(r, "h-fit w-fit p-0 text-gray-400"),
ref: n,
"aria-label": l,
draggable: a,
onDragStart: o,
onDragEnd: s,
style: c,
...u,
children: i
});
}), J = m((t, n) => {
let { className: r, children: i, onMouseEnter: a, onMouseLeave: o, variant: s, ...c } = t;
e(c);
let l = K();
return /* @__PURE__ */ x(l.Tooltip.TooltipProvider, {
delay: 0,
children: /* @__PURE__ */ x("div", {
className: M(r, "bg-popover text-popover-foreground flex h-fit gap-1 rounded-lg border p-1 shadow-md", s === "action-toolbar" ? "w-fit" : ""),
ref: n,
onMouseEnter: a,
onMouseLeave: o,
children: i
})
});
}), Y = m((t, n) => {
let { className: r, children: i, mainTooltip: a, secondaryTooltip: o, icon: s, isSelected: c, isDisabled: l, onClick: d, label: f, variant: p, ...m } = t;
e(m, !1);
let h = K(), g = u(), _ = c === void 0 ? /* @__PURE__ */ S(h.Button.Button, {
className: M(r, p === "compact" ? "h-6 min-w-6 p-0" : ""),
variant: "ghost",
size: p === "compact" ? "sm" : "default",
disabled: l,
onClick: d,
ref: n,
"aria-label": f,
...m,
children: [s, i]
}) : /* @__PURE__ */ S(h.Toggle.Toggle, {
className: M(r, "aria-expanded:bg-accent aria-expanded:text-accent-foreground", p === "compact" ? "h-6 min-w-6 p-0" : ""),
size: p === "compact" ? "sm" : "default",
"aria-label": f,
onClick: d,
pressed: c,
disabled: l,
ref: n,
...m,
children: [s, i]
});
return /* @__PURE__ */ S(h.Tooltip.Tooltip, { children: [/* @__PURE__ */ x(h.Tooltip.TooltipTrigger, { render: _ }), /* @__PURE__ */ S(h.Tooltip.TooltipContent, {
container: g.portalElement,
className: "flex flex-col items-center whitespace-pre-wrap",
children: [/* @__PURE__ */ x("span", { children: a }), o && /* @__PURE__ */ x("span", { children: o })]
})] });
}), X = m((t, n) => {
let { className: r, items: i, isDisabled: a, ...o } = t;
e(o);
let s = K(), c = u(), l = (e) => /* @__PURE__ */ S("div", {
className: "flex items-center gap-1",
children: [e.icon, e.text]
}), d = i.filter((e) => e.isSelected)[0];
return d ? /* @__PURE__ */ S(s.Select.Select, {
value: d.text,
onValueChange: (e) => i.find((t) => t.text === e).onClick?.(),
disabled: a,
children: [/* @__PURE__ */ x(s.Select.SelectTrigger, {
className: "border-none",
children: /* @__PURE__ */ x(s.Select.SelectValue, {})
}), /* @__PURE__ */ x(s.Select.SelectContent, {
className: r,
container: c.portalElement,
alignItemWithTrigger: !1,
ref: n,
children: i.map((e) => /* @__PURE__ */ x(s.Select.SelectItem, {
disabled: e.isDisabled,
value: e.text,
children: /* @__PURE__ */ x(l, { ...e })
}, e.text))
})]
}) : null;
}), gt = m((t, n) => {
let { className: r, children: i, selected: a, headerText: o, onFocus: s, onBlur: c, tabIndex: l, ...u } = t;
e(u);
let d = K();
return /* @__PURE__ */ S(d.Card.Card, {
className: M(r, "w-[300px]", a ? "bg-accent text-accent-foreground" : ""),
onFocus: s,
onBlur: c,
tabIndex: l,
ref: n,
children: [o && /* @__PURE__ */ x("div", {
className: "px-4 pt-4 text-sm italic",
children: o
}), i]
});
}), _t = m((t, n) => {
let { className: r, children: i, ...a } = t;
return e(a), /* @__PURE__ */ x("div", {
className: M(r, "p-4", r?.includes("thread-comments") ? "flex flex-col gap-6 border-b" : ""),
ref: n,
children: i
});
}), vt = m((t, n) => {
let { className: r, children: i, ...a } = t;
e(a, !1);
let o = K();
return /* @__PURE__ */ x(o.Button.Button, {
className: M(r, "text-foreground w-fit bg-transparent p-0 hover:bg-transparent"),
ref: n,
children: i
});
}), yt = m((t, n) => {
let { authorInfo: r, timeString: i, edited: a, ...o } = t, s = d();
e(o, !1);
let c = K();
return r === "loading" ? /* @__PURE__ */ S("div", {
className: "flex flex-row flex-nowrap items-center gap-4",
children: [/* @__PURE__ */ x(c.Skeleton.Skeleton, { className: "size-7 animate-pulse rounded-full bg-neutral-400" }), /* @__PURE__ */ x(c.Skeleton.Skeleton, { className: "h-3 w-32 animate-pulse rounded-full bg-neutral-400" })]
}) : /* @__PURE__ */ S("div", {
className: "flex flex-row flex-nowrap items-center gap-4",
children: [/* @__PURE__ */ S(c.Avatar.Avatar, { children: [/* @__PURE__ */ x(c.Avatar.AvatarImage, {
src: r.avatarUrl,
alt: r.username,
className: "h-7 rounded-full"
}), /* @__PURE__ */ x(c.Avatar.AvatarFallback, { children: r.username[0] })] }), /* @__PURE__ */ S("div", {
className: "flex flex-row flex-nowrap items-center gap-2",
children: [/* @__PURE__ */ x("span", {
className: "text-sm font-bold",
children: r.username
}), /* @__PURE__ */ S("span", {
className: "text-xs",
children: [
i,
" ",
a && `(${s.comments.edited})`
]
})]
})]
});
}), bt = m((t, n) => {
let { className: r, showActions: i, authorInfo: a, timeString: o, actions: s, edited: c, emojiPickerOpen: l, children: u, ...d } = t;
e(d);
let [p, m] = y(!1), { focused: h, ref: g } = f(), _ = s && (i === !0 || i === void 0 || i === "hover" && p || h || l);
return /* @__PURE__ */ S("div", {
ref: n,
className: M(r, "relative flex flex-col gap-2"),
onMouseEnter: () => m(!0),
onMouseLeave: () => m(!1),
children: [
_ ? /* @__PURE__ */ x("div", {
className: "absolute top-0 right-0 z-10",
ref: g,
children: s
}) : null,
/* @__PURE__ */ x(yt, { ...t }),
u
]
});
}), xt = m((t, n) => {
let { className: r, onFocus: i, onBlur: o, autoFocus: s, editor: c, editable: u, ...d } = t;
e(d);
let f = l();
return /* @__PURE__ */ x($, {
autoFocus: s,
className: M(r, ""),
theme: f?.colorSchemePreference,
editor: t.editor,
sideMenu: !1,
slashMenu: !1,
tableHandles: !1,
filePanel: !1,
formattingToolbar: !1,
editable: u,
ref: n,
onFocus: i,
onBlur: o,
children: /* @__PURE__ */ x(a, { formattingToolbar: St })
});
}), St = () => {
let e = s([]).filter((e) => e.key !== "nestBlockButton" && e.key !== "unnestBlockButton");
return /* @__PURE__ */ x(i, {
blockTypeSelectItems: [],
children: e
});
}, Ct = m((t, n) => {
let { className: r, text: i, icon: a, isSelected: o, mainTooltip: s, secondaryTooltip: c, onClick: l, onMouseEnter: d, ...f } = t;
e(f, !1);
let p = K(), m = u(), h = /* @__PURE__ */ S(p.Button.Button, {
variant: o ? "secondary" : "outline",
className: M(r, "flex h-7 items-center gap-1 rounded-full px-2.5"),
onClick: l,
onMouseEnter: d,
ref: n,
children: [/* @__PURE__ */ x("span", { children: a }), /* @__PURE__ */ x("span", { children: i })]
});
return s ? /* @__PURE__ */ S(p.Tooltip.Tooltip, { children: [/* @__PURE__ */ x(p.Tooltip.TooltipTrigger, { render: h }), /* @__PURE__ */ S(p.Tooltip.TooltipContent, {
container: m.portalElement,
className: "flex flex-col items-center whitespace-pre-wrap",
children: [/* @__PURE__ */ x("span", { children: s }), c && /* @__PURE__ */ x("span", { children: c })]
})] }) : h;
}), wt = m((t, n) => {
let { className: r, children: i, ...a } = t;
e(a);
let o = K();
return /* @__PURE__ */ x(o.Tooltip.TooltipProvider, {
delay: 0,
children: /* @__PURE__ */ x("div", {
className: M(r, "flex w-full flex-row flex-wrap gap-1"),
ref: n,
children: i
})
});
}), Tt = m((t, n) => {
let { className: r, children: i, ...a } = t;
return e(a, !1), /* @__PURE__ */ x("div", {
className: M(r),
ref: n,
children: i
});
}), Et = m((t, n) => {
let { className: r, selected: i, comparing: a, onClick: o, actions: s, children: c, ...l } = t;
e(l, !1);
let u = K();
return /* @__PURE__ */ S(u.Card.Card, {
className: M(r, i ? "selected" : "", a ? "comparing" : "", "gap-0 rounded-lg py-0 shadow-none"),
onClick: o,
ref: n,
children: [c, s && /* @__PURE__ */ x("div", {
className: "bn-snapshot-menu",
onClick: (e) => e.stopPropagation(),
children: s
})]
});
}), Dt = m((t, n) => {
let { className: r, children: i, onClick: a, label: o, ...s } = t;
e(s);
let c = K();
return /* @__PURE__ */ x(c.Button.Button, {
type: "submit",
className: r,
"aria-label": o,
ref: n,
onClick: a,
children: i
});
}), Z = m((t, n) => {
let { className: r, accept: i, value: a, placeholder: o, onChange: s, ...c } = t;
e(c);
let l = K();
return /* @__PURE__ */ x(l.Input.Input, {
type: "file",
className: r,
ref: n,
accept: i,
value: a ? a.name : void 0,
onChange: async (e) => s?.(e.target.files[0]),
placeholder: o
});
}), Ot = m((t, n) => {
let { className: r, isSelected: i, onClick: a, item: s, id: l, ...u } = t;
e(u);
let d = v(null);
return g(() => {
!d.current || !i || o(d.current, d.current.closest(".bn-grid-suggestion-menu")) !== "none" && d.current.scrollIntoView({ block: "nearest" });
}, [i]), /* @__PURE__ */ x("div", {
className: M("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 p-2 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-base!", r),
ref: c([n, d]),
id: l,
role: "option",
onClick: a,
"aria-selected": i || void 0,
children: s.icon
});
}), kt = m((t, n) => {
let { className: r, children: i, columns: a, ...o } = t;
return e(o), /* @__PURE__ */ x("div", {
className: r,
style: { gridColumn: `1 / ${a + 1}` },
ref: n,
children: i
});
}), Q = {
FormattingToolbar: {
Root: J,
Button: Y,
Select: X
},
FilePanel: {
Root: Qe,
Button: Dt,
FileInput: Z,
TabPanel: $e,
TextInput: et
},
LinkToolbar: {
Root: J,
Button: Y,
Select: X
},
SideMenu: {
Root: it,
Button: at
},
SuggestionMenu: {
Root: ct,
Item: ut,
EmptyItem: lt,
Label: dt,
Loader: ft
},
GridSuggestionMenu: {
Root: ot,
Item: Ot,
EmptyItem: st,
Loader: kt
},
TableHandle: {
Root: ht,
ExtendButton: mt
},
Comments: {
Comment: bt,
Editor: xt,
Card: gt,
CardSection: _t,
ExpandSectionsPrompt: vt
},
Versioning: {
Sidebar: Tt,
Snapshot: Et
},
AttributionTooltip: { Root: pt },
Generic: {
Badge: {
Root: Ct,
Group: wt
},
Toolbar: {
Root: J,
Button: Y,
Select: X
},
Form: {
Root: ue,
TextInput: We
},
Menu: {
Root: Ge,
Trigger: Ke,
Dropdown: qe,
Divider: Ye,
Label: Xe,
Item: Je,
Button: Ze
},
Popover: {
Root: tt,
Trigger: nt,
Content: rt
}
}
}, $ = (e) => {
let { className: i, shadCNComponents: a, ...o } = e, s = _(() => ({
...W,
...a
}), [a]);
return /* @__PURE__ */ x(G.Provider, {
value: s,
children: /* @__PURE__ */ x(r.Provider, {
value: Q,
children: /* @__PURE__ */ x(n, {
className: t("bn-shadcn", i || ""),
...o
})
})
});
};
//#endregion
export { $ as BlockNoteView, G as ShadCNComponentsContext, W as ShadCNDefaultComponents, Q as components, K as useShadCNComponentsContext };
//# sourceMappingURL=blocknote-shadcn.js.map