@tulip-systems/core 0.8.2 → 0.9.0

package/dist/src/components/common/icons.d.mts

@@ -0,0 +1,60 @@
+import { LucideIcon, LucideProps } from "lucide-react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
+
+//#region src/components/common/icons.d.ts
+type Icon = LucideIcon;
+declare const Icons: {
+  close: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  save: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  spinner: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  chevronLeft: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  chevronRight: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  chevronDown: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  chevronUp: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  trash: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  post: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  page: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  media: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  download: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  settings: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  billing: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  ellipsis: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  add: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  edit: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  warning: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  user: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  users: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  arrowUp: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  arrowDown: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  arrowRight: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  arrowLeft: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  moveLeft: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  moveRight: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  help: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  pizza: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  check: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  copy: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  copyDone: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  refresh: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  preview: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  externalLink: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  sun: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  lock: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  unLock: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  moon: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  search: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  laptop: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  active: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  draft: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  archive: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  restore: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  dashboard: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  regulations: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  home: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  mail: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  building: react.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  logo: (props: LucideProps) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { Icon, Icons };

package/dist/src/components/common/icons.mjs

@@ -0,0 +1,121 @@
+import { AlertTriangle, ArchiveIcon, ArchiveRestore, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, BuildingIcon, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ClipboardCheck, Copy, CreditCard, Download, ExternalLink, EyeIcon, File, FileText, HelpCircle, HomeIcon, Image, Laptop, LayoutDashboardIcon, Loader2, LockKeyhole, LockKeyholeOpen, Mail, Moon, MoreVertical, MoveLeft, MoveRight, PenSquare, PencilRuler, Pizza, Plus, RefreshCcw, RotateCw, SaveIcon, ScrollTextIcon, Search, Settings, SunMedium, Trash, User, UsersIcon, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/common/icons.tsx
+const Icons = {
+	close: X,
+	save: SaveIcon,
+	spinner: Loader2,
+	chevronLeft: ChevronLeft,
+	chevronRight: ChevronRight,
+	chevronDown: ChevronDown,
+	chevronUp: ChevronUp,
+	trash: Trash,
+	post: FileText,
+	page: File,
+	media: Image,
+	download: Download,
+	settings: Settings,
+	billing: CreditCard,
+	ellipsis: MoreVertical,
+	add: Plus,
+	edit: PenSquare,
+	warning: AlertTriangle,
+	user: User,
+	users: UsersIcon,
+	arrowUp: ArrowUp,
+	arrowDown: ArrowDown,
+	arrowRight: ArrowRight,
+	arrowLeft: ArrowLeft,
+	moveLeft: MoveLeft,
+	moveRight: MoveRight,
+	help: HelpCircle,
+	pizza: Pizza,
+	check: Check,
+	copy: Copy,
+	copyDone: ClipboardCheck,
+	refresh: RotateCw,
+	preview: EyeIcon,
+	externalLink: ExternalLink,
+	sun: SunMedium,
+	lock: LockKeyhole,
+	unLock: LockKeyholeOpen,
+	moon: Moon,
+	search: Search,
+	laptop: Laptop,
+	active: RefreshCcw,
+	draft: PencilRuler,
+	archive: ArchiveIcon,
+	restore: ArchiveRestore,
+	dashboard: LayoutDashboardIcon,
+	regulations: ScrollTextIcon,
+	home: HomeIcon,
+	mail: Mail,
+	building: BuildingIcon,
+	logo: (props) => /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 120.09 141.73",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: "Tulip Logo Icon" }),
+			/* @__PURE__ */ jsxs("defs", { children: [
+				/* @__PURE__ */ jsxs("linearGradient", {
+					id: "tulip-logo-icon-gradient",
+					x1: "60.5",
+					y1: "0",
+					x2: "60.5",
+					y2: "141.73",
+					gradientUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0",
+						stopColor: "#ffc754"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: "#ff1800"
+					})]
+				}),
+				/* @__PURE__ */ jsx("linearGradient", {
+					id: "tulip-logo-icon-gradient-2",
+					x1: "72.4",
+					y1: "5.81",
+					x2: "72.4",
+					y2: "141.73",
+					xlinkHref: "#tulip-logo-icon-gradient"
+				}),
+				/* @__PURE__ */ jsx("linearGradient", {
+					id: "tulip-logo-icon-gradient-3",
+					x1: "47.69",
+					y1: "5.81",
+					x2: "47.69",
+					y2: "141.73",
+					xlinkHref: "#tulip-logo-icon-gradient"
+				})
+			] }),
+			/* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("path", {
+					d: "M107.88,93.09c0-35.95-47.38-93.09-47.38-93.09,0,0-47.39,57.14-47.38,93.09,0,26.17,21.21,48.64,47.38,48.64,26.17,0,47.39-22.47,47.38-48.64Z",
+					style: {
+						fill: "url(#tulip-logo-icon-gradient)",
+						opacity: .75
+					}
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M116.68,109.5c12.3-33.78-12.69-103.68-12.69-103.68,0,0-64.07,37.49-76.37,71.27-8.95,24.59,3.3,52.97,27.89,61.92,24.59,8.95,52.21-4.91,61.16-29.5Z",
+					style: {
+						fill: "url(#tulip-logo-icon-gradient-2)",
+						opacity: .75
+					}
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M92.46,77.09C80.16,43.3,16.09,5.81,16.09,5.81c0,0-24.98,69.9-12.69,103.68,8.95,24.59,36.57,38.45,61.16,29.5,24.59-8.95,36.84-37.32,27.89-61.92Z",
+					style: {
+						fill: "url(#tulip-logo-icon-gradient-3)",
+						opacity: .75
+					}
+				})
+			] }) })
+		]
+	})
+};
+
+//#endregion
+export { Icons };

package/dist/src/components/common/status.d.mts

@@ -0,0 +1,52 @@
+import { ConfigWithIcon } from "../../lib/types/config.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/common/status.d.ts
+/**
+ * Create status config
+ */
+declare const createStatusConfig: <TStatus extends string>(config: ConfigWithIcon<TStatus>[]) => ConfigWithIcon<TStatus>[];
+/**
+ * Find the status object from the config
+ * @param {TStatus[]} values
+ * @param {string} status
+ * @returns {TStatus | undefined}
+ */
+declare function findStatus<TStatus extends {
+  value: string;
+}>(values: TStatus[], status: string): TStatus | undefined;
+/**
+ * Create status variants
+ * @param {TStatus[]} values
+ * @returns {Record<string, string>}
+ */
+declare function createStatusVariants<TStatus extends string>(values: {
+  value: TStatus;
+  className: string;
+}[]): Record<TStatus, string>;
+/**
+ * Create status component props
+ */
+type CreateStatusComponentProps<TStatus extends string> = {
+  status: TStatus | null;
+};
+/**
+ * Status component props
+ */
+type StatusComponentProps<TStatus extends string> = {
+  config: ConfigWithIcon<TStatus>[];
+  variants: (props: {
+    status: TStatus;
+  }) => string;
+  status: TStatus | null;
+};
+/**
+ * Status column
+ */
+declare function StatusField<TStatus extends string>(props: StatusComponentProps<TStatus>): react_jsx_runtime0.JSX.Element;
+/**
+ * Status badge
+ */
+declare function StatusBadge<TStatus extends string>(props: StatusComponentProps<TStatus>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CreateStatusComponentProps, StatusBadge, StatusField, createStatusConfig, createStatusVariants, findStatus };

package/dist/src/components/common/status.mjs

@@ -0,0 +1,55 @@
+import { cn } from "../../lib/utils/cn.mjs";
+import { Badge } from "../ui/badge.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/common/status.tsx
+/**
+* Create status config
+*/
+const createStatusConfig = (config) => config;
+/**
+* Find the status object from the config
+* @param {TStatus[]} values
+* @param {string} status
+* @returns {TStatus | undefined}
+*/
+function findStatus(values, status) {
+	return values.find((s) => s.value === status);
+}
+/**
+* Create status variants
+* @param {TStatus[]} values
+* @returns {Record<string, string>}
+*/
+function createStatusVariants(values) {
+	return values.reduce((acc, { value, className }) => {
+		acc[value] = className;
+		return acc;
+	}, {});
+}
+/**
+* Status column
+*/
+function StatusField(props) {
+	const status = findStatus(props.config, props.status ?? "");
+	if (!status) return /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", props.variants({ status: status.value })),
+		children: [/* @__PURE__ */ jsx(status.icon, { className: cn("size-4", props.variants({ status: status.value })) }), /* @__PURE__ */ jsx("span", { children: status.label })]
+	});
+}
+/**
+* Status badge
+*/
+function StatusBadge(props) {
+	const status = findStatus(props.config, props.status ?? "");
+	if (!status) return /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		className: cn("flex items-center gap-2", props.variants({ status: status.value })),
+		children: [/* @__PURE__ */ jsx(status.icon, { className: cn("size-3", props.variants({ status: status.value })) }), /* @__PURE__ */ jsx("span", { children: status.label })]
+	});
+}
+
+//#endregion
+export { StatusBadge, StatusField, createStatusConfig, createStatusVariants, findStatus };

package/dist/src/components/editor/components/content.client.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/editor/components/content.client.d.ts
+declare function EditorContent(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { EditorContent };

package/dist/src/components/editor/components/content.client.mjs

@@ -0,0 +1,16 @@
+"use client";
+
+import { TooltipProvider } from "../../ui/tooltip.client.mjs";
+import { EditorContext } from "./editor.client.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { EditorContent } from "@tiptap/react";
+
+//#region src/components/editor/components/content.client.tsx
+function EditorContent$1() {
+	const { editor } = useContext(EditorContext);
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
+}
+
+//#endregion
+export { EditorContent$1 as EditorContent };

package/dist/src/components/editor/components/editor.client.d.mts

@@ -0,0 +1,48 @@
+import { EditorExtensionsConfig, EditorExtensionsConfigResult } from "../lib/extensions.mjs";
+import { EditorJSONContent } from "../lib/types.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as react from "react";
+import { PropsWithChildren } from "react";
+import { Content, Editor, EditorOptions } from "@tiptap/react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/editor/components/editor.client.d.ts
+/**
+ * Editor context
+ */
+type EditorContextValue = {
+  editor: Editor;
+  extensions: EditorExtensionsConfigResult;
+};
+declare const EditorContext: react.Context<EditorContextValue>;
+/**
+ * Editor variants
+ */
+declare const editorVariants: (props?: ({
+  variant?: "default" | "table" | "preview" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+/**
+ * Editor context provider
+ */
+type EditorProps = VariantProps<typeof editorVariants> & Pick<EditorOptions["editorProps"], "attributes"> & PropsWithChildren<{
+  value?: Content;
+  extensions?: Partial<EditorExtensionsConfig>;
+  onUpdate?: (value: EditorJSONContent) => void;
+  onBlur?: (value: EditorJSONContent) => void;
+  disabled?: boolean;
+  className?: string;
+}>;
+declare function Editor$1({
+  value,
+  extensions,
+  onUpdate,
+  onBlur,
+  disabled,
+  variant,
+  className,
+  children,
+  attributes
+}: EditorProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Editor$1 as Editor, EditorContext, EditorProps, editorVariants };

package/dist/src/components/editor/components/editor.client.mjs

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { editorExtensionsConfigToExtensions, flattenEditorExtensionsConfig } from "../lib/extensions.mjs";
+import { editorImageVariants, editorProseVariants } from "../lib/variants.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext } from "react";
+import { useEditor } from "@tiptap/react";
+
+//#region src/components/editor/components/editor.client.tsx
+const EditorContext = createContext({});
+/**
+* Editor variants
+*/
+const editorVariants = cva("", {
+	variants: { variant: {
+		default: "border-input rounded-lg border [&_.editor-content]:p-3 [&_.editor-content[contenteditable='false']]:pointer-events-none [&_.editor-content[contenteditable='false']]:cursor-not-allowed [&_.editor-content[contenteditable='false']]:opacity-50",
+		table: "[&_.editor-content[contenteditable='false']]:pointer-events-none [&_.editor-content[contenteditable='false']]:cursor-not-allowed [&_.editor-content[contenteditable='false']]:opacity-50",
+		preview: "bg-transparent [&_.editor-content]:p-0 [&_.editor-content]:min-h-0"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Editor$1({ value, extensions, onUpdate, onBlur, disabled, variant, className, children, attributes }) {
+	const editor = useEditor({
+		extensions: editorExtensionsConfigToExtensions(extensions),
+		content: value,
+		onUpdate: ({ editor }) => onUpdate?.(editor.getJSON()),
+		onBlur: ({ editor }) => onBlur?.(editor.getJSON()),
+		editable: !disabled,
+		injectCSS: false,
+		immediatelyRender: false,
+		editorProps: {
+			transformPastedHTML: (html) => html.replace(/<img.*?>/g, ""),
+			attributes: {
+				...attributes,
+				class: cn("editor-content text-sm max-w-full focus:outline-none", editorProseVariants(), editorImageVariants(), className)
+			}
+		}
+	});
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(EditorContext.Provider, {
+		value: {
+			editor,
+			extensions: flattenEditorExtensionsConfig(extensions)
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: editorVariants({ variant }),
+			children
+		})
+	});
+}
+
+//#endregion
+export { Editor$1 as Editor, EditorContext, editorVariants };

package/dist/src/components/editor/components/menu-nodes.client.mjs

@@ -0,0 +1,92 @@
+import { Button } from "../../ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.client.mjs";
+import { EditorContext } from "./editor.client.mjs";
+import { ChevronDown, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, Heading5Icon, ListIcon, ListOrderedIcon, TextIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+
+//#region src/components/editor/components/menu-nodes.client.tsx
+const blocks = [
+	{
+		label: "Paragraaf",
+		icon: TextIcon,
+		selected: (editor) => editor.isActive("paragraph"),
+		handler: (editor) => editor.commands.setParagraph(),
+		hidden: (extensions) => !extensions.paragraph
+	},
+	{
+		label: "Titel 1",
+		icon: Heading1Icon,
+		selected: (editor) => editor.isActive("heading", { level: 1 }),
+		handler: (editor) => editor.commands.setHeading({ level: 1 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 2",
+		icon: Heading2Icon,
+		selected: (editor) => editor.isActive("heading", { level: 2 }),
+		handler: (editor) => editor.commands.setHeading({ level: 2 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 3",
+		icon: Heading3Icon,
+		selected: (editor) => editor.isActive("heading", { level: 3 }),
+		handler: (editor) => editor.commands.setHeading({ level: 3 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 4",
+		icon: Heading4Icon,
+		selected: (editor) => editor.isActive("heading", { level: 4 }),
+		handler: (editor) => editor.commands.setHeading({ level: 4 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 5",
+		icon: Heading5Icon,
+		selected: (editor) => editor.isActive("heading", { level: 5 }),
+		handler: (editor) => editor.commands.setHeading({ level: 5 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Numbered List",
+		icon: ListOrderedIcon,
+		selected: (editor) => editor.isActive("orderedList"),
+		handler: (editor) => editor.commands.toggleOrderedList(),
+		hidden: (extensions) => !extensions.orderedList
+	},
+	{
+		label: "Bulleted List",
+		icon: ListIcon,
+		selected: (editor) => editor.isActive("bulletList"),
+		handler: (editor) => editor.commands.toggleBulletList(),
+		hidden: (extensions) => !extensions.bulletList
+	}
+];
+function EditorMenuNodes() {
+	const { editor, extensions } = useContext(EditorContext);
+	const selectedBlock = blocks.find((block) => block.selected(editor));
+	const Icon = selectedBlock?.icon;
+	const filteredBlocks = blocks.filter((block) => !block.hidden(extensions));
+	if (filteredBlocks.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			className: "flex items-center gap-8 p-2",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }), selectedBlock?.label ?? "Select a block"]
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, { children: filteredBlocks.map(({ label, icon: Icon, handler }) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		onClick: () => handler(editor),
+		className: "flex items-center gap-2",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }), label]
+	}, label)) })] });
+}
+
+//#endregion
+export { EditorMenuNodes };

package/dist/src/components/editor/components/menu.client.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+import { BubbleMenu } from "@tiptap/react/menus";
+
+//#region src/components/editor/components/menu.client.d.ts
+declare function EditorMenuFixed(props: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function EditorMenuBubble(props: ComponentProps<typeof BubbleMenu>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { EditorMenuBubble, EditorMenuFixed };