@jbpark/ui-kit 7.0.0 → 7.1.0

package/dist/components/atoms/index.d.mts

@@ -9,9 +9,11 @@ import Input from "./input/index.mjs";
 import Popover from "./popover.mjs";
 import Progress from "./progress.mjs";
 import Radio from "./radio/index.mjs";
+import RichTextEditor from "./rich-text-editor/rich-text-editor.mjs";
+import "./rich-text-editor/index.mjs";
 import Select from "./select.mjs";
 import Skeleton from "./skeleton/index.mjs";
 import Slider from "./slider/slider.mjs";
 import Spin from "./spin.mjs";
 import Switch from "./switch.mjs";
-export { Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, Popover, Progress, Radio, Select, Skeleton, Slider, Spin, Switch, Tag, Typography };
+export { Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, Popover, Progress, Radio, RichTextEditor, Select, Skeleton, Slider, Spin, Switch, Tag, Typography };

package/dist/components/atoms/rich-text-editor/content-classes.mjs

@@ -0,0 +1,7 @@
+import { cn } from "../../../utils.mjs";
+//#region src/components/atoms/rich-text-editor/content-classes.ts
+const RICH_TEXT_CONTENT_CLASSES = cn("[&_.tiptap]:outline-none", "[&_.tiptap>*:first-child]:mt-0", "[&_.tiptap_h1]:mt-6", "[&_.tiptap_h1]:mb-2", "[&_.tiptap_h1]:text-2xl", "[&_.tiptap_h1]:font-bold", "[&_.tiptap_h2]:mt-5", "[&_.tiptap_h2]:mb-2", "[&_.tiptap_h2]:text-xl", "[&_.tiptap_h2]:font-bold", "[&_.tiptap_h3]:mt-4", "[&_.tiptap_h3]:mb-2", "[&_.tiptap_h3]:text-lg", "[&_.tiptap_h3]:font-semibold", "[&_.tiptap_h4]:mt-3", "[&_.tiptap_h4]:mb-1", "[&_.tiptap_h4]:text-base", "[&_.tiptap_h4]:font-semibold", "[&_.tiptap_ul]:my-2", "[&_.tiptap_ul]:list-disc", "[&_.tiptap_ul]:pl-5", "[&_.tiptap_ol]:my-2", "[&_.tiptap_ol]:list-decimal", "[&_.tiptap_ol]:pl-5", "[&_.tiptap_li]:my-1", "[&_.tiptap_blockquote]:my-2", "[&_.tiptap_blockquote]:border-l-2", "[&_.tiptap_blockquote]:border-gray-300", "[&_.tiptap_blockquote]:pl-3", "[&_.tiptap_blockquote]:text-gray-600", "[&_.tiptap_blockquote]:italic", "[&_.tiptap_pre]:overflow-x-auto", "[&_.tiptap_pre]:my-2", "[&_.tiptap_pre]:rounded", "[&_.tiptap_pre]:bg-gray-900", "[&_.tiptap_pre]:p-3", "[&_.tiptap_pre]:font-mono", "[&_.tiptap_pre]:text-sm", "[&_.tiptap_pre]:text-gray-100", "[&_.tiptap_pre_code]:bg-transparent", "[&_.tiptap_pre_code]:p-0", "[&_.tiptap_pre_code]:text-inherit", "[&_.tiptap_code]:rounded", "[&_.tiptap_code]:bg-gray-100", "[&_.tiptap_code]:px-1", "[&_.tiptap_code]:py-0.5", "[&_.tiptap_code]:font-mono", "[&_.tiptap_code]:text-[0.85em]", "[&_.tiptap_hr]:my-4", "[&_.tiptap_hr]:border-gray-200", "[&_.tiptap_a]:text-blue-600", "[&_.tiptap_a]:underline", "[&_.tiptap_a]:underline-offset-2", "[&_.tiptap_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.tiptap_p.is-editor-empty:first-child::before]:float-left", "[&_.tiptap_p.is-editor-empty:first-child::before]:h-0", "[&_.tiptap_p.is-editor-empty:first-child::before]:text-gray-400", "[&_.tiptap_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]");
+//#endregion
+export { RICH_TEXT_CONTENT_CLASSES };
+
+//# sourceMappingURL=content-classes.mjs.map

package/dist/components/atoms/rich-text-editor/content-classes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-classes.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/content-classes.ts"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\n// The package ships no global Tailwind preflight (see src/globals.css), and a\n// host that runs its own preflight (most do) resets bare h1-h6/ul/ol/blockquote\n// to look like plain text. Since the toolbar can now produce all of these\n// nodes, they need their own scoped typography here or toggling them would be\n// visibly a no-op. Selectors are written out per Tailwind utility (not built\n// via string interpolation) because v4 only extracts class candidates that\n// appear as literal strings in source (see popover.tsx's arrow-class comment).\nexport const RICH_TEXT_CONTENT_CLASSES = cn(\n  '[&_.tiptap]:outline-none',\n  // Every block element (p/h1/ul/blockquote/...) carries its own UA top\n  // margin — without this, the first one stacks on top of the box's own\n  // py-2, doubling the padding visually.\n  '[&_.tiptap>*:first-child]:mt-0',\n\n  '[&_.tiptap_h1]:mt-6',\n  '[&_.tiptap_h1]:mb-2',\n  '[&_.tiptap_h1]:text-2xl',\n  '[&_.tiptap_h1]:font-bold',\n  '[&_.tiptap_h2]:mt-5',\n  '[&_.tiptap_h2]:mb-2',\n  '[&_.tiptap_h2]:text-xl',\n  '[&_.tiptap_h2]:font-bold',\n  '[&_.tiptap_h3]:mt-4',\n  '[&_.tiptap_h3]:mb-2',\n  '[&_.tiptap_h3]:text-lg',\n  '[&_.tiptap_h3]:font-semibold',\n  '[&_.tiptap_h4]:mt-3',\n  '[&_.tiptap_h4]:mb-1',\n  '[&_.tiptap_h4]:text-base',\n  '[&_.tiptap_h4]:font-semibold',\n\n  '[&_.tiptap_ul]:my-2',\n  '[&_.tiptap_ul]:list-disc',\n  '[&_.tiptap_ul]:pl-5',\n  '[&_.tiptap_ol]:my-2',\n  '[&_.tiptap_ol]:list-decimal',\n  '[&_.tiptap_ol]:pl-5',\n  '[&_.tiptap_li]:my-1',\n\n  '[&_.tiptap_blockquote]:my-2',\n  '[&_.tiptap_blockquote]:border-l-2',\n  '[&_.tiptap_blockquote]:border-gray-300',\n  '[&_.tiptap_blockquote]:pl-3',\n  '[&_.tiptap_blockquote]:text-gray-600',\n  '[&_.tiptap_blockquote]:italic',\n\n  // A long unwrapped code line would otherwise blow out the box width.\n  '[&_.tiptap_pre]:overflow-x-auto',\n  '[&_.tiptap_pre]:my-2',\n  '[&_.tiptap_pre]:rounded',\n  '[&_.tiptap_pre]:bg-gray-900',\n  '[&_.tiptap_pre]:p-3',\n  '[&_.tiptap_pre]:font-mono',\n  '[&_.tiptap_pre]:text-sm',\n  '[&_.tiptap_pre]:text-gray-100',\n  // Reset the inline `code` treatment below when it's nested inside `pre`,\n  // so a code block doesn't get a second (redundant) chip background.\n  '[&_.tiptap_pre_code]:bg-transparent',\n  '[&_.tiptap_pre_code]:p-0',\n  '[&_.tiptap_pre_code]:text-inherit',\n  '[&_.tiptap_code]:rounded',\n  '[&_.tiptap_code]:bg-gray-100',\n  '[&_.tiptap_code]:px-1',\n  '[&_.tiptap_code]:py-0.5',\n  '[&_.tiptap_code]:font-mono',\n  '[&_.tiptap_code]:text-[0.85em]',\n\n  '[&_.tiptap_hr]:my-4',\n  '[&_.tiptap_hr]:border-gray-200',\n\n  '[&_.tiptap_a]:text-blue-600',\n  '[&_.tiptap_a]:underline',\n  '[&_.tiptap_a]:underline-offset-2',\n\n  '[&_.tiptap_p.is-editor-empty:first-child::before]:pointer-events-none',\n  '[&_.tiptap_p.is-editor-empty:first-child::before]:float-left',\n  '[&_.tiptap_p.is-editor-empty:first-child::before]:h-0',\n  '[&_.tiptap_p.is-editor-empty:first-child::before]:text-gray-400',\n  '[&_.tiptap_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]',\n);\n"],"mappings":";;AASA,MAAa,4BAA4B,GACvC,4BAIA,kCAEA,uBACA,uBACA,2BACA,4BACA,uBACA,uBACA,0BACA,4BACA,uBACA,uBACA,0BACA,gCACA,uBACA,uBACA,4BACA,gCAEA,uBACA,4BACA,uBACA,uBACA,+BACA,uBACA,uBAEA,+BACA,qCACA,0CACA,+BACA,wCACA,iCAGA,mCACA,wBACA,2BACA,+BACA,uBACA,6BACA,2BACA,iCAGA,uCACA,4BACA,qCACA,4BACA,gCACA,yBACA,2BACA,8BACA,kCAEA,uBACA,kCAEA,+BACA,2BACA,oCAEA,yEACA,gEACA,yDACA,mEACA,oFACF"}

package/dist/components/atoms/rich-text-editor/index.d.mts

@@ -0,0 +1,3 @@
+import { ToolbarItem, ToolbarPreset } from "./types.mjs";
+import RichTextEditor, { Props } from "./rich-text-editor.mjs";
+export { RichTextEditor as default };

package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts

@@ -0,0 +1,24 @@
+import { ToolbarItem, ToolbarPreset } from "./types.mjs";
+//#region src/components/atoms/rich-text-editor/rich-text-editor.d.ts
+interface Props {
+  value?: string;
+  placeholder?: string;
+  className?: string;
+  classNames?: {
+    toolbar?: string;
+    content?: string;
+  };
+  /**
+   * `true` shows every built-in preset; an array shows only the listed
+   * presets, in the given order. Omitted or `false` renders no toolbar,
+   * matching the original (toolbar-less) output.
+   */
+  toolbar?: boolean | ToolbarPreset[];
+  /** Extra buttons appended after the built-in presets. */
+  toolbarItems?: ToolbarItem[];
+  onChange?: (value: string) => void;
+}
+declare const RichTextEditor: ({ value, placeholder, className, classNames, toolbar, toolbarItems, onChange }: Props) => import("react").JSX.Element;
+//#endregion
+export { Props, RichTextEditor as default };
+//# sourceMappingURL=rich-text-editor.d.mts.map

package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.d.mts","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"mappings":";;UAgBiB;EACf;EACA;EACA;EACA;IACE;IACA;;;;;;;EAOF,oBAAoB;;EAEpB,eAAe;EACf,YAAY;;cAGR,mBAAkB,OAAA,aAAA,WAAA,YAAA,SAAA,cAAA,YAQrB,0BAAK,IAAA"}

package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { cn } from "../../../utils.mjs";
+import { RICH_TEXT_CONTENT_CLASSES } from "./content-classes.mjs";
+import { DEFAULT_TOOLBAR_PRESETS } from "./toolbar-presets.mjs";
+import Toolbar from "./toolbar.mjs";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Placeholder from "@tiptap/extension-placeholder";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/components/atoms/rich-text-editor/rich-text-editor.tsx
+const RichTextEditor = ({ value = "", placeholder = "Enter text...", className, classNames, toolbar = false, toolbarItems, onChange }) => {
+	const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];
+	const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;
+	const editor = useEditor({
+		immediatelyRender: false,
+		extensions: [
+			StarterKit,
+			Placeholder.configure({ placeholder }),
+			TextStyleKit.configure({
+				fontFamily: false,
+				lineHeight: false,
+				backgroundColor: false
+			})
+		],
+		content: value,
+		onBlur: ({ editor: e }) => {
+			onChange?.(e.getHTML());
+		},
+		shouldRerenderOnTransaction: showToolbar
+	});
+	useEffect(() => {
+		if (!editor) return;
+		if (editor.getHTML() !== value) editor.commands.setContent(value, { emitUpdate: false });
+	}, [value, editor]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "rich-text-editor",
+		className: cn("rounded border border-gray-200 bg-white text-sm text-gray-800", className),
+		children: [showToolbar && editor && /* @__PURE__ */ jsx(Toolbar, {
+			editor,
+			presets,
+			items: toolbarItems,
+			className: classNames?.toolbar
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "rich-text-editor-content",
+			className: cn("min-h-20 px-3 py-2", RICH_TEXT_CONTENT_CLASSES, classNames?.content),
+			children: /* @__PURE__ */ jsx(EditorContent, { editor })
+		})]
+	});
+};
+//#endregion
+export { RichTextEditor as default };
+
+//# sourceMappingURL=rich-text-editor.mjs.map

package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TextStyleKit } from '@tiptap/extension-text-style';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { RICH_TEXT_CONTENT_CLASSES } from './content-classes';\nimport Toolbar from './toolbar';\nimport { DEFAULT_TOOLBAR_PRESETS } from './toolbar-presets';\nimport type { ToolbarItem, ToolbarPreset } from './types';\n\nexport interface Props {\n  value?: string;\n  placeholder?: string;\n  className?: string;\n  classNames?: {\n    toolbar?: string;\n    content?: string;\n  };\n  /**\n   * `true` shows every built-in preset; an array shows only the listed\n   * presets, in the given order. Omitted or `false` renders no toolbar,\n   * matching the original (toolbar-less) output.\n   */\n  toolbar?: boolean | ToolbarPreset[];\n  /** Extra buttons appended after the built-in presets. */\n  toolbarItems?: ToolbarItem[];\n  onChange?: (value: string) => void;\n}\n\nconst RichTextEditor = ({\n  value = '',\n  placeholder = 'Enter text...',\n  className,\n  classNames,\n  toolbar = false,\n  toolbarItems,\n  onChange,\n}: Props) => {\n  const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];\n  const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;\n\n  const editor = useEditor({\n    // SSR renders every exported component without effects running, so the\n    // editor must not touch the DOM during that first pass — deferring\n    // creation to mount keeps `renderToStaticMarkup` from throwing.\n    immediatelyRender: false,\n    extensions: [\n      StarterKit,\n      Placeholder.configure({ placeholder }),\n      TextStyleKit.configure({\n        fontFamily: false,\n        lineHeight: false,\n        backgroundColor: false,\n      }),\n    ],\n    content: value,\n    onBlur: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n    },\n    // @tiptap/react v3 only re-renders on selection/transaction changes when\n    // explicitly opted in — the toolbar's isActive()/getAttributes() reads\n    // need that to reflect the caret position live.\n    shouldRerenderOnTransaction: showToolbar,\n  });\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    const current = editor.getHTML();\n\n    if (current !== value) {\n      editor.commands.setContent(value, { emitUpdate: false });\n    }\n  }, [value, editor]);\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      className={cn(\n        'rounded border border-gray-200 bg-white text-sm text-gray-800',\n        className,\n        //\n      )}\n    >\n      {showToolbar && editor && (\n        <Toolbar\n          editor={editor}\n          presets={presets}\n          items={toolbarItems}\n          className={classNames?.toolbar}\n        />\n      )}\n      <div\n        data-slot=\"rich-text-editor-content\"\n        className={cn(\n          'min-h-20 px-3 py-2',\n          RICH_TEXT_CONTENT_CLASSES,\n          classNames?.content,\n          //\n        )}\n      >\n        <EditorContent editor={editor} />\n      </div>\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,kBAAkB,EACtB,QAAQ,IACR,cAAc,iBACd,WACA,YACA,UAAU,OACV,cACA,eACW;CACX,MAAM,UAAU,YAAY,OAAO,0BAA0B,WAAW,CAAC;CACzE,MAAM,cAAc,QAAQ,SAAS,MAAM,cAAc,UAAU,KAAK;CAExE,MAAM,SAAS,UAAU;EAIvB,mBAAmB;EACnB,YAAY;GACV;GACA,YAAY,UAAU,EAAE,YAAY,CAAC;GACrC,aAAa,UAAU;IACrB,YAAY;IACZ,YAAY;IACZ,iBAAiB;GACnB,CAAC;EACH;EACA,SAAS;EACT,SAAS,EAAE,QAAQ,QAAQ;GACzB,WAAW,EAAE,QAAQ,CAAC;EACxB;EAIA,6BAA6B;CAC/B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,QACH;EAKF,IAFgB,OAAO,QAEb,MAAM,OACd,OAAO,SAAS,WAAW,OAAO,EAAE,YAAY,MAAM,CAAC;CAE3D,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iEACA,SAEF;EANF,UAAA,CAQG,eAAe,UACd,oBAAC,SAAD;GACU;GACC;GACT,OAAO;GACP,WAAW,YAAY;EACxB,CAAA,GAEH,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,sBACA,2BACA,YAAY,OAEd;GAEA,UAAA,oBAAC,eAAD,EAAuB,OAAS,CAAA;EAC7B,CAAA,CACF;;AAET"}

package/dist/components/atoms/rich-text-editor/toolbar-button.mjs

@@ -0,0 +1,16 @@
+import { cn } from "../../../utils.mjs";
+import Button from "../../../Button.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/atoms/rich-text-editor/toolbar-button.tsx
+const ToolbarButton = ({ active, className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	type: "text",
+	size: "small",
+	shape: "default",
+	"aria-pressed": active,
+	className: cn(active && "bg-accent", className)
+});
+//#endregion
+export { ToolbarButton as default };
+
+//# sourceMappingURL=toolbar-button.mjs.map

package/dist/components/atoms/rich-text-editor/toolbar-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-button.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/toolbar-button.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Button, { type Props as ButtonProps } from '../button';\n\nexport interface ToolbarButtonProps extends Omit<\n  ButtonProps,\n  'type' | 'shape' | 'size'\n> {\n  active?: boolean;\n}\n\nconst ToolbarButton = ({ active, className, ...props }: ToolbarButtonProps) => (\n  <Button\n    // Spread first: when this button sits inside a `Popover` trigger\n    // (`asChild`), Radix injects its own native `type=\"button\"` onto us for\n    // form-submit safety — that's a different `type` than Button's own\n    // antd-style color/variant switch, and if it landed after these three,\n    // it would silently override `type=\"text\"` and fall through to the\n    // `outlined` variant's border.\n    {...props}\n    type=\"text\"\n    size=\"small\"\n    shape=\"default\"\n    aria-pressed={active}\n    className={cn(active && 'bg-accent', className)}\n  />\n);\n\nexport default ToolbarButton;\n"],"mappings":";;;;AAWA,MAAM,iBAAiB,EAAE,QAAQ,WAAW,GAAG,YAC7C,oBAAC,QAAD;CAOE,GAAI;CACJ,MAAK;CACL,MAAK;CACL,OAAM;CACN,gBAAc;CACd,WAAW,GAAG,UAAU,aAAa,SAAS;AAC/C,CAAA"}

package/dist/components/atoms/rich-text-editor/toolbar-presets.mjs

@@ -0,0 +1,209 @@
+"use client";
+import Button from "../../../Button.mjs";
+import Popover from "../popover.mjs";
+import ColorPicker from "../color-picker.mjs";
+import Input from "../input/index.mjs";
+import ToolbarButton from "./toolbar-button.mjs";
+import Select from "../select.mjs";
+import { useState } from "react";
+import { Bold, Code, Code2, Italic, Link, List, ListOrdered, Minus, Quote, Redo2, Strikethrough, Underline, Undo2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/rich-text-editor/toolbar-presets.tsx
+const FONT_SIZE_OPTIONS = [
+	{
+		label: "12",
+		value: "12px"
+	},
+	{
+		label: "14",
+		value: "14px"
+	},
+	{
+		label: "16",
+		value: "16px"
+	},
+	{
+		label: "18",
+		value: "18px"
+	},
+	{
+		label: "24",
+		value: "24px"
+	},
+	{
+		label: "32",
+		value: "32px"
+	}
+];
+const HEADING_LEVELS = [
+	1,
+	2,
+	3,
+	4
+];
+const HEADING_OPTIONS = [{
+	label: "Paragraph",
+	value: "paragraph"
+}, ...HEADING_LEVELS.map((level) => ({
+	label: `Heading ${level}`,
+	value: String(level)
+}))];
+const LinkControl = ({ editor }) => {
+	const [open, setOpen] = useState(false);
+	const [href, setHref] = useState("");
+	const apply = () => {
+		const next = href.trim();
+		if (next) editor.chain().focus().extendMarkRange("link").setLink({ href: next }).run();
+		else editor.chain().focus().unsetLink().run();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsx(Popover, {
+		placement: "bottom",
+		open,
+		onOpenChange: (next) => {
+			if (next) setHref(editor.getAttributes("link").href ?? "");
+			setOpen(next);
+		},
+		content: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Input, {
+				value: href,
+				placeholder: "https://",
+				className: "w-48",
+				onChange: (e) => setHref(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						apply();
+					}
+				}
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "small",
+				onClick: apply,
+				children: "Apply"
+			})]
+		}),
+		children: /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: /* @__PURE__ */ jsx(Link, {}),
+			"aria-label": "Link",
+			active: editor.isActive("link")
+		})
+	});
+};
+const TOOLBAR_PRESET_RENDERERS = {
+	undo: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Undo2, {}),
+		"aria-label": "Undo",
+		disabled: !editor.can().undo(),
+		onClick: () => editor.chain().focus().undo().run()
+	}, "undo"),
+	redo: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Redo2, {}),
+		"aria-label": "Redo",
+		disabled: !editor.can().redo(),
+		onClick: () => editor.chain().focus().redo().run()
+	}, "redo"),
+	heading: (editor) => {
+		const activeLevel = HEADING_LEVELS.find((level) => editor.isActive("heading", { level }));
+		return /* @__PURE__ */ jsx(Select, {
+			className: "h-6 w-28",
+			placeholder: "Style",
+			options: HEADING_OPTIONS,
+			value: activeLevel ? String(activeLevel) : "paragraph",
+			onChange: (value) => value === "paragraph" ? editor.chain().setParagraph().run() : editor.chain().setHeading({ level: Number(value) }).run()
+		}, "heading");
+	},
+	bold: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Bold, {}),
+		"aria-label": "Bold",
+		active: editor.isActive("bold"),
+		onClick: () => editor.chain().focus().toggleBold().run()
+	}, "bold"),
+	italic: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Italic, {}),
+		"aria-label": "Italic",
+		active: editor.isActive("italic"),
+		onClick: () => editor.chain().focus().toggleItalic().run()
+	}, "italic"),
+	underline: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Underline, {}),
+		"aria-label": "Underline",
+		active: editor.isActive("underline"),
+		onClick: () => editor.chain().focus().toggleUnderline().run()
+	}, "underline"),
+	strike: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Strikethrough, {}),
+		"aria-label": "Strikethrough",
+		active: editor.isActive("strike"),
+		onClick: () => editor.chain().focus().toggleStrike().run()
+	}, "strike"),
+	code: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Code, {}),
+		"aria-label": "Inline code",
+		active: editor.isActive("code"),
+		onClick: () => editor.chain().focus().toggleCode().run()
+	}, "code"),
+	bulletList: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(List, {}),
+		"aria-label": "Bullet list",
+		active: editor.isActive("bulletList"),
+		onClick: () => editor.chain().focus().toggleBulletList().run()
+	}, "bulletList"),
+	orderedList: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(ListOrdered, {}),
+		"aria-label": "Ordered list",
+		active: editor.isActive("orderedList"),
+		onClick: () => editor.chain().focus().toggleOrderedList().run()
+	}, "orderedList"),
+	blockquote: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Quote, {}),
+		"aria-label": "Blockquote",
+		active: editor.isActive("blockquote"),
+		onClick: () => editor.chain().focus().toggleBlockquote().run()
+	}, "blockquote"),
+	codeBlock: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Code2, {}),
+		"aria-label": "Code block",
+		active: editor.isActive("codeBlock"),
+		onClick: () => editor.chain().focus().toggleCodeBlock().run()
+	}, "codeBlock"),
+	horizontalRule: (editor) => /* @__PURE__ */ jsx(ToolbarButton, {
+		icon: /* @__PURE__ */ jsx(Minus, {}),
+		"aria-label": "Horizontal rule",
+		onClick: () => editor.chain().focus().setHorizontalRule().run()
+	}, "horizontalRule"),
+	link: (editor) => /* @__PURE__ */ jsx(LinkControl, { editor }, "link"),
+	fontSize: (editor) => /* @__PURE__ */ jsx(Select, {
+		className: "h-6 w-20",
+		placeholder: "Size",
+		options: FONT_SIZE_OPTIONS,
+		value: editor.getAttributes("textStyle").fontSize ?? void 0,
+		onChange: (value) => editor.chain().setFontSize(value).run()
+	}, "fontSize"),
+	color: (editor) => /* @__PURE__ */ jsx(ColorPicker, {
+		value: editor.getAttributes("textStyle").color || "#000000",
+		onChange: (value) => editor.chain().setColor(value).run()
+	}, "color")
+};
+const DEFAULT_TOOLBAR_PRESETS = [
+	"undo",
+	"redo",
+	"heading",
+	"bold",
+	"italic",
+	"underline",
+	"strike",
+	"code",
+	"bulletList",
+	"orderedList",
+	"blockquote",
+	"codeBlock",
+	"horizontalRule",
+	"link",
+	"fontSize",
+	"color"
+];
+//#endregion
+export { DEFAULT_TOOLBAR_PRESETS, TOOLBAR_PRESET_RENDERERS };
+
+//# sourceMappingURL=toolbar-presets.mjs.map

package/dist/components/atoms/rich-text-editor/toolbar-presets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-presets.mjs","names":["LinkIcon"],"sources":["../../../../src/components/atoms/rich-text-editor/toolbar-presets.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport {\n  Bold,\n  Code,\n  Code2,\n  Italic,\n  Link as LinkIcon,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n  Redo2,\n  Strikethrough,\n  Underline,\n  Undo2,\n} from 'lucide-react';\n\nimport Button from '../button';\nimport ColorPicker from '../color-picker';\nimport Input from '../input';\nimport Popover from '../popover';\nimport Select from '../select';\nimport ToolbarButton from './toolbar-button';\nimport type { ToolbarPreset } from './types';\n\nconst FONT_SIZE_OPTIONS = [\n  { label: '12', value: '12px' },\n  { label: '14', value: '14px' },\n  { label: '16', value: '16px' },\n  { label: '18', value: '18px' },\n  { label: '24', value: '24px' },\n  { label: '32', value: '32px' },\n];\n\nconst HEADING_LEVELS = [1, 2, 3, 4] as const;\n\nconst HEADING_OPTIONS = [\n  { label: 'Paragraph', value: 'paragraph' },\n  ...HEADING_LEVELS.map(level => ({\n    label: `Heading ${level}`,\n    value: String(level),\n  })),\n];\n\n// Owns its own open/href state, so it has to be a real component (not a\n// plain render function like the other presets) for the hooks below to be\n// valid.\nconst LinkControl = ({ editor }: { editor: Editor }) => {\n  const [open, setOpen] = useState(false);\n  const [href, setHref] = useState('');\n\n  const apply = () => {\n    const next = href.trim();\n\n    if (next) {\n      editor\n        .chain()\n        .focus()\n        .extendMarkRange('link')\n        .setLink({ href: next })\n        .run();\n    } else {\n      editor.chain().focus().unsetLink().run();\n    }\n    setOpen(false);\n  };\n\n  return (\n    <Popover\n      placement=\"bottom\"\n      open={open}\n      onOpenChange={next => {\n        if (next) {\n          setHref(editor.getAttributes('link').href ?? '');\n        }\n        setOpen(next);\n      }}\n      content={\n        <div className=\"flex items-center gap-2\">\n          <Input\n            value={href}\n            placeholder=\"https://\"\n            className=\"w-48\"\n            onChange={e => setHref(e.target.value)}\n            onKeyDown={e => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                apply();\n              }\n            }}\n          />\n          <Button size=\"small\" onClick={apply}>\n            Apply\n          </Button>\n        </div>\n      }\n    >\n      <ToolbarButton\n        icon={<LinkIcon />}\n        aria-label=\"Link\"\n        active={editor.isActive('link')}\n      />\n    </Popover>\n  );\n};\n\nexport const TOOLBAR_PRESET_RENDERERS: Record<\n  ToolbarPreset,\n  (editor: Editor) => ReactNode\n> = {\n  undo: editor => (\n    <ToolbarButton\n      key=\"undo\"\n      icon={<Undo2 />}\n      aria-label=\"Undo\"\n      disabled={!editor.can().undo()}\n      onClick={() => editor.chain().focus().undo().run()}\n    />\n  ),\n  redo: editor => (\n    <ToolbarButton\n      key=\"redo\"\n      icon={<Redo2 />}\n      aria-label=\"Redo\"\n      disabled={!editor.can().redo()}\n      onClick={() => editor.chain().focus().redo().run()}\n    />\n  ),\n  heading: editor => {\n    const activeLevel = HEADING_LEVELS.find(level =>\n      editor.isActive('heading', { level }),\n    );\n\n    return (\n      <Select\n        key=\"heading\"\n        className=\"h-6 w-28\"\n        placeholder=\"Style\"\n        options={HEADING_OPTIONS}\n        value={activeLevel ? String(activeLevel) : 'paragraph'}\n        // No `.focus()` here — the Select is still open when this fires,\n        // and refocusing the editor mid-selection dismisses it early (same\n        // class of bug as the color picker below).\n        onChange={value =>\n          value === 'paragraph'\n            ? editor.chain().setParagraph().run()\n            : editor\n                .chain()\n                .setHeading({ level: Number(value) as 1 | 2 | 3 | 4 })\n                .run()\n        }\n      />\n    );\n  },\n  bold: editor => (\n    <ToolbarButton\n      key=\"bold\"\n      icon={<Bold />}\n      aria-label=\"Bold\"\n      active={editor.isActive('bold')}\n      onClick={() => editor.chain().focus().toggleBold().run()}\n    />\n  ),\n  italic: editor => (\n    <ToolbarButton\n      key=\"italic\"\n      icon={<Italic />}\n      aria-label=\"Italic\"\n      active={editor.isActive('italic')}\n      onClick={() => editor.chain().focus().toggleItalic().run()}\n    />\n  ),\n  underline: editor => (\n    <ToolbarButton\n      key=\"underline\"\n      icon={<Underline />}\n      aria-label=\"Underline\"\n      active={editor.isActive('underline')}\n      onClick={() => editor.chain().focus().toggleUnderline().run()}\n    />\n  ),\n  strike: editor => (\n    <ToolbarButton\n      key=\"strike\"\n      icon={<Strikethrough />}\n      aria-label=\"Strikethrough\"\n      active={editor.isActive('strike')}\n      onClick={() => editor.chain().focus().toggleStrike().run()}\n    />\n  ),\n  code: editor => (\n    <ToolbarButton\n      key=\"code\"\n      icon={<Code />}\n      aria-label=\"Inline code\"\n      active={editor.isActive('code')}\n      onClick={() => editor.chain().focus().toggleCode().run()}\n    />\n  ),\n  bulletList: editor => (\n    <ToolbarButton\n      key=\"bulletList\"\n      icon={<List />}\n      aria-label=\"Bullet list\"\n      active={editor.isActive('bulletList')}\n      onClick={() => editor.chain().focus().toggleBulletList().run()}\n    />\n  ),\n  orderedList: editor => (\n    <ToolbarButton\n      key=\"orderedList\"\n      icon={<ListOrdered />}\n      aria-label=\"Ordered list\"\n      active={editor.isActive('orderedList')}\n      onClick={() => editor.chain().focus().toggleOrderedList().run()}\n    />\n  ),\n  blockquote: editor => (\n    <ToolbarButton\n      key=\"blockquote\"\n      icon={<Quote />}\n      aria-label=\"Blockquote\"\n      active={editor.isActive('blockquote')}\n      onClick={() => editor.chain().focus().toggleBlockquote().run()}\n    />\n  ),\n  codeBlock: editor => (\n    <ToolbarButton\n      key=\"codeBlock\"\n      icon={<Code2 />}\n      aria-label=\"Code block\"\n      active={editor.isActive('codeBlock')}\n      onClick={() => editor.chain().focus().toggleCodeBlock().run()}\n    />\n  ),\n  horizontalRule: editor => (\n    <ToolbarButton\n      key=\"horizontalRule\"\n      icon={<Minus />}\n      aria-label=\"Horizontal rule\"\n      onClick={() => editor.chain().focus().setHorizontalRule().run()}\n    />\n  ),\n  link: editor => <LinkControl key=\"link\" editor={editor} />,\n  fontSize: editor => (\n    <Select\n      key=\"fontSize\"\n      className=\"h-6 w-20\"\n      placeholder=\"Size\"\n      options={FONT_SIZE_OPTIONS}\n      value={editor.getAttributes('textStyle').fontSize ?? undefined}\n      // No `.focus()` — see the `heading` preset above.\n      onChange={value => editor.chain().setFontSize(value).run()}\n    />\n  ),\n  color: editor => (\n    <ColorPicker\n      key=\"color\"\n      value={editor.getAttributes('textStyle').color || '#000000'}\n      // No `.focus()`: react-colorful fires `onChange` continuously while\n      // dragging, and refocusing the editor on every tick moves DOM focus\n      // out from under the still-open popover, which Radix reads as an\n      // outside interaction and dismisses immediately (ui-kit reported\n      // symptom: \"picker closes as soon as you try to change the color\").\n      // The mark still applies to the stored selection without it.\n      onChange={value => editor.chain().setColor(value).run()}\n    />\n  ),\n};\n\nexport const DEFAULT_TOOLBAR_PRESETS: ToolbarPreset[] = [\n  'undo',\n  'redo',\n  'heading',\n  'bold',\n  'italic',\n  'underline',\n  'strike',\n  'code',\n  'bulletList',\n  'orderedList',\n  'blockquote',\n  'codeBlock',\n  'horizontalRule',\n  'link',\n  'fontSize',\n  'color',\n];\n"],"mappings":"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"}

package/dist/components/atoms/rich-text-editor/toolbar.mjs

@@ -0,0 +1,21 @@
+import { cn } from "../../../utils.mjs";
+import ToolbarButton from "./toolbar-button.mjs";
+import { TOOLBAR_PRESET_RENDERERS } from "./toolbar-presets.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/rich-text-editor/toolbar.tsx
+const Toolbar = ({ editor, presets, items, className }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "rich-text-editor-toolbar",
+		className: cn("flex flex-wrap items-center gap-1 border-b border-gray-200 px-2 py-1", className),
+		children: [presets.map((preset) => TOOLBAR_PRESET_RENDERERS[preset](editor)), items?.map((item) => /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: item.icon,
+			"aria-label": item.label,
+			active: item.isActive?.(editor),
+			onClick: () => item.onClick(editor)
+		}, item.key))]
+	});
+};
+//#endregion
+export { Toolbar as default };
+
+//# sourceMappingURL=toolbar.mjs.map

package/dist/components/atoms/rich-text-editor/toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/toolbar.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core';\n\nimport { cn } from '@repo/ui/utils';\n\nimport ToolbarButton from './toolbar-button';\nimport { TOOLBAR_PRESET_RENDERERS } from './toolbar-presets';\nimport type { ToolbarItem, ToolbarPreset } from './types';\n\nexport interface ToolbarProps {\n  editor: Editor;\n  presets: ToolbarPreset[];\n  items?: ToolbarItem[];\n  className?: string;\n}\n\nconst Toolbar = ({ editor, presets, items, className }: ToolbarProps) => {\n  return (\n    <div\n      data-slot=\"rich-text-editor-toolbar\"\n      className={cn(\n        'flex flex-wrap items-center gap-1 border-b border-gray-200 px-2 py-1',\n        className,\n        //\n      )}\n    >\n      {presets.map(preset => TOOLBAR_PRESET_RENDERERS[preset](editor))}\n      {items?.map(item => (\n        <ToolbarButton\n          key={item.key}\n          icon={item.icon}\n          aria-label={item.label}\n          active={item.isActive?.(editor)}\n          onClick={() => item.onClick(editor)}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default Toolbar;\n"],"mappings":";;;;;AAeA,MAAM,WAAW,EAAE,QAAQ,SAAS,OAAO,gBAA8B;CACvE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wEACA,SAEF;EANF,UAAA,CAQG,QAAQ,KAAI,WAAU,yBAAyB,OAAO,CAAC,MAAM,CAAC,GAC9D,OAAO,KAAI,SACV,oBAAC,eAAD;GAEE,MAAM,KAAK;GACX,cAAY,KAAK;GACjB,QAAQ,KAAK,WAAW,MAAM;GAC9B,eAAe,KAAK,QAAQ,MAAM;EACnC,GALM,KAAK,GAKX,CACF,CACE;;AAET"}

package/dist/components/atoms/rich-text-editor/types.d.mts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { Editor } from "@tiptap/core";
+//#region src/components/atoms/rich-text-editor/types.d.ts
+type ToolbarPreset = 'undo' | 'redo' | 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'horizontalRule' | 'link' | 'fontSize' | 'color';
+interface ToolbarItem {
+  key: string;
+  icon: ReactNode;
+  label?: string;
+  isActive?: (editor: Editor) => boolean;
+  onClick: (editor: Editor) => void;
+}
+//#endregion
+export { ToolbarItem, ToolbarPreset };
+//# sourceMappingURL=types.d.mts.map

package/dist/components/atoms/rich-text-editor/types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/types.ts"],"mappings":";;;KAIY;UAkBK;EACf;EACA,MAAM;EACN;EACA,YAAY,QAAQ;EACpB,UAAU,QAAQ"}

package/dist/index.d.mts

@@ -20,6 +20,7 @@ import Input from "./components/atoms/input/index.mjs";
 import Popover from "./components/atoms/popover.mjs";
 import Progress from "./components/atoms/progress.mjs";
 import Radio from "./components/atoms/radio/index.mjs";
+import RichTextEditor from "./components/atoms/rich-text-editor/rich-text-editor.mjs";
 import Select from "./components/atoms/select.mjs";
 import Skeleton from "./components/atoms/skeleton/index.mjs";
 import Slider from "./components/atoms/slider/slider.mjs";
@@ -52,4 +53,4 @@ import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./
 import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
 import Config, { Props as Props$3 } from "./providers/config/config.mjs";
 import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
-export { Button, Card, type Props as CardProps, Checkbox, Col, type Props$1 as ColProps, Collapse, type Props$2 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$3 as ConfigProps, ConfigSnapshotProvider, Container, type Props$4 as ContainerProps, type Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$6 as DrawerProps, Dropdown, type Props$7 as DropdownProps, Empty, type Props$8 as EmptyProps, FloatButton, type Props$9 as FooterProps, type Props$10 as HeaderProps, Input, Layout, type Props$11 as LayoutProps, List, type Props$12 as ListProps, type Locale, Marquees, type Props$13 as MarqueesProps, Menu, type Props$14 as MenuProps, Modal, type Props$15 as ModalProps, PageHeader, type Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, type Props$17 as ResultProps, Reveals, type Props$18 as RevealsProps, Row, type Props$19 as RowProps, Select, type Props$20 as SiderProps, Skeleton, Slider, Space, type Props$21 as SpaceProps, Spin, Splitter, type Props$22 as SplitterProps, Swiper, type Props$23 as SwiperProps, Switch, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Typography, Upload, type UploadFile, type Props$24 as UploadProps, getRootConfigValue, useConfig };
+export { Button, Card, type Props as CardProps, Checkbox, Col, type Props$1 as ColProps, Collapse, type Props$2 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$3 as ConfigProps, ConfigSnapshotProvider, Container, type Props$4 as ContainerProps, type Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$6 as DrawerProps, Dropdown, type Props$7 as DropdownProps, Empty, type Props$8 as EmptyProps, FloatButton, type Props$9 as FooterProps, type Props$10 as HeaderProps, Input, Layout, type Props$11 as LayoutProps, List, type Props$12 as ListProps, type Locale, Marquees, type Props$13 as MarqueesProps, Menu, type Props$14 as MenuProps, Modal, type Props$15 as ModalProps, PageHeader, type Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, type Props$17 as ResultProps, Reveals, type Props$18 as RevealsProps, RichTextEditor, Row, type Props$19 as RowProps, Select, type Props$20 as SiderProps, Skeleton, Slider, Space, type Props$21 as SpaceProps, Spin, Splitter, type Props$22 as SplitterProps, Swiper, type Props$23 as SwiperProps, Switch, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Typography, Upload, type UploadFile, type Props$24 as UploadProps, getRootConfigValue, useConfig };

package/dist/index.mjs

@@ -13,6 +13,7 @@ import Input from "./components/atoms/input/index.mjs";
 import Progress from "./components/atoms/progress.mjs";
 import Radio from "./components/atoms/radio/index.mjs";
 import Select from "./components/atoms/select.mjs";
+import RichTextEditor from "./components/atoms/rich-text-editor/rich-text-editor.mjs";
 import Skeleton from "./components/atoms/skeleton/index.mjs";
 import slider_default from "./components/atoms/slider/index.mjs";
 import Spin from "./components/atoms/spin.mjs";
@@ -39,4 +40,4 @@ import Result from "./components/templates/result.mjs";
 import PageHeader from "./components/templates/page-header.mjs";
 import Row from "./components/templates/grid/row.mjs";
 import Col from "./components/templates/grid/col.mjs";
-export { Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, ConfigSnapshotProvider, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Popover, Progress, Radio, Result, Reveals, Row, Select, Skeleton, slider_default as Slider, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, getRootConfigValue, useConfig };
+export { Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, ConfigSnapshotProvider, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Popover, Progress, Radio, Result, Reveals, RichTextEditor, Row, Select, Skeleton, slider_default as Slider, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, getRootConfigValue, useConfig };

package/dist/style.css

@@ -8,6 +8,14 @@
     --color-yellow-400: oklch(85.2% .199 91.936);
     --color-green-400: oklch(79.2% .209 151.711);
     --color-blue-400: oklch(70.7% .165 254.624);
+    --color-blue-600: oklch(54.6% .245 262.881);
+    --color-gray-100: oklch(96.7% .003 264.542);
+    --color-gray-200: oklch(92.8% .006 264.531);
+    --color-gray-300: oklch(87.2% .01 258.338);
+    --color-gray-400: oklch(70.7% .022 261.325);
+    --color-gray-600: oklch(44.6% .03 256.802);
+    --color-gray-800: oklch(27.8% .033 256.848);
+    --color-gray-900: oklch(21% .034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
@@ -629,6 +637,9 @@
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -653,9 +664,15 @@
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-25 {
     width: calc(var(--spacing) * 25);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
@@ -1127,6 +1144,9 @@
   .border-current {
     border-color: currentcolor;
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
   .border-input {
     border-color: var(--input);
   }
@@ -1202,6 +1222,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .fill-primary {
     fill: var(--primary);
   }
@@ -1431,6 +1454,9 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
   .text-green-400 {
     color: var(--color-green-400);
   }
@@ -1461,6 +1487,9 @@
   .lowercase {
     text-transform: lowercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1534,6 +1563,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -2644,6 +2677,192 @@
       background-color: color-mix(in oklab, var(--input) 80%, transparent);
     }
   }
+  .\[\&_\.tiptap\]\:outline-none .tiptap {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .\[\&_\.tiptap_a\]\:text-blue-600 .tiptap a {
+    color: var(--color-blue-600);
+  }
+  .\[\&_\.tiptap_a\]\:underline .tiptap a {
+    text-decoration-line: underline;
+  }
+  .\[\&_\.tiptap_a\]\:underline-offset-2 .tiptap a {
+    text-underline-offset: 2px;
+  }
+  .\[\&_\.tiptap_blockquote\]\:my-2 .tiptap blockquote {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_blockquote\]\:border-l-2 .tiptap blockquote {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
+  .\[\&_\.tiptap_blockquote\]\:border-gray-300 .tiptap blockquote {
+    border-color: var(--color-gray-300);
+  }
+  .\[\&_\.tiptap_blockquote\]\:pl-3 .tiptap blockquote {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .\[\&_\.tiptap_blockquote\]\:text-gray-600 .tiptap blockquote {
+    color: var(--color-gray-600);
+  }
+  .\[\&_\.tiptap_blockquote\]\:italic .tiptap blockquote {
+    font-style: italic;
+  }
+  .\[\&_\.tiptap_code\]\:rounded .tiptap code {
+    border-radius: .25rem;
+  }
+  .\[\&_\.tiptap_code\]\:bg-gray-100 .tiptap code {
+    background-color: var(--color-gray-100);
+  }
+  .\[\&_\.tiptap_code\]\:px-1 .tiptap code {
+    padding-inline: var(--spacing);
+  }
+  .\[\&_\.tiptap_code\]\:py-0\.5 .tiptap code {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .\[\&_\.tiptap_code\]\:font-mono .tiptap code {
+    font-family: var(--font-geist-mono);
+  }
+  .\[\&_\.tiptap_code\]\:text-\[0\.85em\] .tiptap code {
+    font-size: 0.85em;
+  }
+  .\[\&_\.tiptap_h1\]\:mt-6 .tiptap h1 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .\[\&_\.tiptap_h1\]\:mb-2 .tiptap h1 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_h1\]\:text-2xl .tiptap h1 {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .\[\&_\.tiptap_h1\]\:font-bold .tiptap h1 {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .\[\&_\.tiptap_h2\]\:mt-5 .tiptap h2 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .\[\&_\.tiptap_h2\]\:mb-2 .tiptap h2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_h2\]\:text-xl .tiptap h2 {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .\[\&_\.tiptap_h2\]\:font-bold .tiptap h2 {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .\[\&_\.tiptap_h3\]\:mt-4 .tiptap h3 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .\[\&_\.tiptap_h3\]\:mb-2 .tiptap h3 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_h3\]\:text-lg .tiptap h3 {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .\[\&_\.tiptap_h3\]\:font-semibold .tiptap h3 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_\.tiptap_h4\]\:mt-3 .tiptap h4 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .\[\&_\.tiptap_h4\]\:mb-1 .tiptap h4 {
+    margin-bottom: var(--spacing);
+  }
+  .\[\&_\.tiptap_h4\]\:text-base .tiptap h4 {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .\[\&_\.tiptap_h4\]\:font-semibold .tiptap h4 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_\.tiptap_hr\]\:my-4 .tiptap hr {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .\[\&_\.tiptap_hr\]\:border-gray-200 .tiptap hr {
+    border-color: var(--color-gray-200);
+  }
+  .\[\&_\.tiptap_li\]\:my-1 .tiptap li {
+    margin-block: var(--spacing);
+  }
+  .\[\&_\.tiptap_ol\]\:my-2 .tiptap ol {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_ol\]\:list-decimal .tiptap ol {
+    list-style-type: decimal;
+  }
+  .\[\&_\.tiptap_ol\]\:pl-5 .tiptap ol {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:pointer-events-none .tiptap p.is-editor-empty:first-child::before {
+    pointer-events: none;
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:float-left .tiptap p.is-editor-empty:first-child::before {
+    float: left;
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:h-0 .tiptap p.is-editor-empty:first-child::before {
+    height: 0px;
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:text-gray-400 .tiptap p.is-editor-empty:first-child::before {
+    color: var(--color-gray-400);
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:content-\[attr\(data-placeholder\)\] .tiptap p.is-editor-empty:first-child::before {
+    --tw-content: attr(data-placeholder);
+    content: var(--tw-content);
+  }
+  .\[\&_\.tiptap_pre\]\:my-2 .tiptap pre {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_pre\]\:overflow-x-auto .tiptap pre {
+    overflow-x: auto;
+  }
+  .\[\&_\.tiptap_pre\]\:rounded .tiptap pre {
+    border-radius: .25rem;
+  }
+  .\[\&_\.tiptap_pre\]\:bg-gray-900 .tiptap pre {
+    background-color: var(--color-gray-900);
+  }
+  .\[\&_\.tiptap_pre\]\:p-3 .tiptap pre {
+    padding: calc(var(--spacing) * 3);
+  }
+  .\[\&_\.tiptap_pre\]\:font-mono .tiptap pre {
+    font-family: var(--font-geist-mono);
+  }
+  .\[\&_\.tiptap_pre\]\:text-sm .tiptap pre {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .\[\&_\.tiptap_pre\]\:text-gray-100 .tiptap pre {
+    color: var(--color-gray-100);
+  }
+  .\[\&_\.tiptap_pre_code\]\:bg-transparent .tiptap pre code {
+    background-color: transparent;
+  }
+  .\[\&_\.tiptap_pre_code\]\:p-0 .tiptap pre code {
+    padding: 0px;
+  }
+  .\[\&_\.tiptap_pre_code\]\:text-inherit .tiptap pre code {
+    color: inherit;
+  }
+  .\[\&_\.tiptap_ul\]\:my-2 .tiptap ul {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_ul\]\:list-disc .tiptap ul {
+    list-style-type: disc;
+  }
+  .\[\&_\.tiptap_ul\]\:pl-5 .tiptap ul {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .\[\&_\.tiptap\>\*\:first-child\]\:mt-0 .tiptap > :first-child {
+    margin-top: 0px;
+  }
   .\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -143,6 +143,11 @@
     "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-switch": "^1.3.7",
+    "@tiptap/core": "^3.30.1",
+    "@tiptap/extension-placeholder": "^3.30.1",
+    "@tiptap/extension-text-style": "^3.30.1",
+    "@tiptap/react": "^3.30.1",
+    "@tiptap/starter-kit": "^3.30.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",