@jbpark/ui-kit 6.2.0 → 7.1.0

package/dist/Tag.d.mts

@@ -6,18 +6,19 @@ type NativeSpanProps = React$1.ComponentProps<'span'> & {
 };
 interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {
   /**
-   * Fill style, aligned with `Button`'s vocabulary. `'default'` is a
-   * **deprecated alias** for `'filled'` — it still renders identically, but
-   * prefer `'filled'` going forward (#320).
-   *
-   * @remarks `'default'` will be removed in a future major.
+   * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0
+   * `'default'` spelling was removed — use `'filled'`, which renders
+   * identically.
    */
-  variant?: 'filled' | 'outlined' | 'default';
+  variant?: 'filled' | 'outlined';
   /**
-   * Colour, sharing `Button`'s preset palette. The named states
-   * (`primary`/`success`/`warning`/`danger`) keep their semantic look; the
-   * shared presets (`blue`, `red`, `gold`, …) are backed by the same
-   * `data-color` system as `Button` (#320).
+   * Colour. Every value — the semantic states (`primary`/`success`/`warning`/
+   * `danger`) as well as the palette shared with `Button` (`blue`, `red`,
+   * `gold`, …) — resolves through the same `data-color` + `--tag-*` system
+   * (#320), so any of them can be re-themed the same way.
+   *
+   * `success`/`warning` have no `Button` counterpart on purpose: a Tag marks
+   * state, which is why antd's Tag also carries them while its Button does not.
    */
   color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;
 }

package/dist/Tag.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;KAYK,kBAAkB,QAAM;EAC3B;;UAGe,cAAc,KAAK;;;;;;;;EAQlC;;;;;;;EAOA,mEAC6D;;cAgDzD,QAAO,WAAA,SAAA,OAAA,SAAA,aAAA,SAOV,UAAK,QAAA,IAAA"}
+{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;KAYK,kBAAkB,QAAM;EAC3B;;UAGe,cAAc,KAAK;;;;;;EAMlC;;;;;;;;;;EAUA,mEAC6D;;cA+BzD,QAAO,WAAA,SAAA,OAAA,SAAA,aAAA,SAOV,UAAK,QAAA,IAAA"}

package/dist/Tag.mjs

@@ -2,39 +2,23 @@
 import { cn } from "./utils.mjs";
 import { useConfig } from "./providers/config/context.mjs";
 import { INTERACTIVE_CHASSIS } from "./lib/chassis.mjs";
-import { isPresetColor } from "./lib/colors.mjs";
 import "react";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/tag.tsx
 const TAG_BASE = cn(INTERACTIVE_CHASSIS, "border w-fit whitespace-nowrap overflow-hidden", "text-xs font-medium gap-1 transition-[color,box-shadow]", "[&>svg]:size-3 [&>svg]:pointer-events-none", "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground");
-const fillColorClasses = {
-	default: "border-transparent bg-muted text-muted-foreground",
-	primary: "border-transparent bg-primary/10 text-primary",
-	success: "border-transparent bg-green-500/10 text-green-600 dark:text-green-400",
-	warning: "border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-	danger: "border-transparent bg-destructive/10 text-destructive"
-};
-const outlinedColorClasses = {
-	default: "border-border text-foreground",
-	primary: "border-primary text-primary",
-	success: "border-green-500 text-green-600 dark:text-green-400",
-	warning: "border-yellow-500 text-yellow-600 dark:text-yellow-400",
-	danger: "border-destructive text-destructive"
-};
-const presetFillClasses = cn("border-transparent", "bg-[color-mix(in_oklch,var(--tag-bg),transparent_90%)]", "text-(--tag-bg)");
-const presetOutlinedClasses = cn("border-(--tag-bg) text-(--tag-bg)");
+const fillClasses = cn("border-transparent bg-(--tag-tint) text-(--tag-fg)");
+const outlinedClasses = cn("border-(--tag-bg) text-(--tag-fg)");
 const Tag = ({ className, variant, color, asChild = false, children, ...props }) => {
 	const { defaultProps } = useConfig();
 	const tagDefaults = defaultProps?.tag;
 	const resolvedVariant = variant ?? tagDefaults?.variant ?? "filled";
 	const resolvedColor = color ?? tagDefaults?.color ?? "default";
-	const isOutlined = resolvedVariant === "outlined";
-	const preset = isPresetColor(resolvedColor);
 	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
 		"data-slot": "badge",
-		"data-color": preset ? resolvedColor : void 0,
-		className: cn(TAG_BASE, "rounded-full px-2.5 py-1", "text-xs font-medium", preset ? isOutlined ? presetOutlinedClasses : presetFillClasses : isOutlined ? outlinedColorClasses[resolvedColor] : fillColorClasses[resolvedColor], className),
+		"data-color": resolvedColor,
+		"data-variant": resolvedVariant,
+		className: cn(TAG_BASE, "rounded-full px-2.5 py-1", "text-xs font-medium", resolvedVariant === "outlined" ? outlinedClasses : fillClasses, className),
 		...props,
 		children
 	});

package/dist/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\nimport { type PresetColor, isPresetColor } from '../../lib/colors';\n\ntype NativeSpanProps = React.ComponentProps<'span'> & {\n  asChild?: boolean;\n};\n\nexport interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {\n  /**\n   * Fill style, aligned with `Button`'s vocabulary. `'default'` is a\n   * **deprecated alias** for `'filled'` — it still renders identically, but\n   * prefer `'filled'` going forward (#320).\n   *\n   * @remarks `'default'` will be removed in a future major.\n   */\n  variant?: 'filled' | 'outlined' | 'default';\n  /**\n   * Colour, sharing `Button`'s preset palette. The named states\n   * (`primary`/`success`/`warning`/`danger`) keep their semantic look; the\n   * shared presets (`blue`, `red`, `gold`, …) are backed by the same\n   * `data-color` system as `Button` (#320).\n   */\n  color?:\n    'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;\n}\n\n// Base absorbed from core/badge's cva base + its `outline` variant, which Tag\n// always rendered as (#278 ③ / #294 Phase 4). The shared focus/aria/centering\n// set lives in INTERACTIVE_CHASSIS; a Tag adds badge geometry and its svg\n// sizing but — unlike Button — no `disabled:*` (a Tag is not disableable). The\n// rounded/padding leftovers are overridden by the atom classes below exactly as\n// before, so the rendered output is unchanged (verified against a pre-refactor\n// render matrix).\nconst TAG_BASE = cn(\n  INTERACTIVE_CHASSIS,\n  'border w-fit whitespace-nowrap overflow-hidden',\n  'text-xs font-medium gap-1 transition-[color,box-shadow]',\n  '[&>svg]:size-3 [&>svg]:pointer-events-none',\n  'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n);\n\nconst fillColorClasses: Record<string, string> = {\n  default: 'border-transparent bg-muted text-muted-foreground',\n  primary: 'border-transparent bg-primary/10 text-primary',\n  success:\n    'border-transparent bg-green-500/10 text-green-600 dark:text-green-400',\n  warning:\n    'border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-transparent bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n  default: 'border-border text-foreground',\n  primary: 'border-primary text-primary',\n  success: 'border-green-500 text-green-600 dark:text-green-400',\n  warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-destructive text-destructive',\n};\n\n// Preset colours resolve their hue from the shared `--tag-bg` custom property\n// (globals.css, keyed on `data-color`) rather than a per-colour Tailwind class,\n// so `Tag` and `Button` stay in lock-step. Fill uses a 10% tint behind the\n// full-strength hue; outlined borders and texts it directly.\nconst presetFillClasses = cn(\n  'border-transparent',\n  'bg-[color-mix(in_oklch,var(--tag-bg),transparent_90%)]',\n  'text-(--tag-bg)',\n);\n\nconst presetOutlinedClasses = cn('border-(--tag-bg) text-(--tag-bg)');\n\nconst Tag = ({\n  className,\n  variant,\n  color,\n  asChild = false,\n  children,\n  ...props\n}: Props) => {\n  const { defaultProps } = useConfig();\n  const tagDefaults = defaultProps?.tag as\n    Partial<Pick<Props, 'variant' | 'color'>> | undefined;\n  // An explicit prop wins over a `Config` default, which wins over the built-in\n  // — the same resolution order `Button` uses.\n  const resolvedVariant = variant ?? tagDefaults?.variant ?? 'filled';\n  const resolvedColor = color ?? tagDefaults?.color ?? 'default';\n  // `'default'` is the pre-#320 spelling of `'filled'`; fold it in so the alias\n  // renders identically.\n  const isOutlined = resolvedVariant === 'outlined';\n  const preset = isPresetColor(resolvedColor);\n  const Comp = asChild ? Slot : 'span';\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      // Only preset colours drive the `--tag-*` system; the named states keep\n      // their bespoke classes, so existing usage renders byte-identical.\n      data-color={preset ? resolvedColor : undefined}\n      className={cn(\n        TAG_BASE,\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        preset\n          ? isOutlined\n            ? presetOutlinedClasses\n            : presetFillClasses\n          : isOutlined\n            ? outlinedColorClasses[resolvedColor]\n            : fillColorClasses[resolvedColor],\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;AA0CA,MAAM,WAAW,GACf,qBACA,kDACA,2DACA,8CACA,wEACF;AAEA,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SACE;CACF,SACE;CACF,QAAQ;AACV;AAEA,MAAM,uBAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;AAMA,MAAM,oBAAoB,GACxB,sBACA,0DACA,iBACF;AAEA,MAAM,wBAAwB,GAAG,mCAAmC;AAEpE,MAAM,OAAO,EACX,WACA,SACA,OACA,UAAU,OACV,UACA,GAAG,YACQ;CACX,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,cAAc,cAAc;CAIlC,MAAM,kBAAkB,WAAW,aAAa,WAAW;CAC3D,MAAM,gBAAgB,SAAS,aAAa,SAAS;CAGrD,MAAM,aAAa,oBAAoB;CACvC,MAAM,SAAS,cAAc,aAAa;CAG1C,OACE,oBAHW,UAAU,OAAO,QAG5B;EACE,aAAU;EAGV,cAAY,SAAS,gBAAgB,KAAA;EACrC,WAAW,GACT,UACA,4BACA,uBACA,SACI,aACE,wBACA,oBACF,aACE,qBAAqB,iBACrB,iBAAiB,gBACvB,SAEF;EACA,GAAI;EAEH;CACG,CAAA;AAEV"}
+{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\nimport { type PresetColor } from '../../lib/colors';\n\ntype NativeSpanProps = React.ComponentProps<'span'> & {\n  asChild?: boolean;\n};\n\nexport interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {\n  /**\n   * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0\n   * `'default'` spelling was removed — use `'filled'`, which renders\n   * identically.\n   */\n  variant?: 'filled' | 'outlined';\n  /**\n   * Colour. Every value — the semantic states (`primary`/`success`/`warning`/\n   * `danger`) as well as the palette shared with `Button` (`blue`, `red`,\n   * `gold`, …) — resolves through the same `data-color` + `--tag-*` system\n   * (#320), so any of them can be re-themed the same way.\n   *\n   * `success`/`warning` have no `Button` counterpart on purpose: a Tag marks\n   * state, which is why antd's Tag also carries them while its Button does not.\n   */\n  color?:\n    'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;\n}\n\n// Base absorbed from core/badge's cva base + its `outline` variant, which Tag\n// always rendered as (#278 ③ / #294 Phase 4). The shared focus/aria/centering\n// set lives in INTERACTIVE_CHASSIS; a Tag adds badge geometry and its svg\n// sizing but — unlike Button — no `disabled:*` (a Tag is not disableable). The\n// rounded/padding leftovers are overridden by the atom classes below exactly as\n// before, so the rendered output is unchanged (verified against a pre-refactor\n// render matrix).\nconst TAG_BASE = cn(\n  INTERACTIVE_CHASSIS,\n  'border w-fit whitespace-nowrap overflow-hidden',\n  'text-xs font-medium gap-1 transition-[color,box-shadow]',\n  '[&>svg]:size-3 [&>svg]:pointer-events-none',\n  'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n);\n\n// Every colour — semantic states and shared presets alike — resolves from the\n// `--tag-*` custom properties that `globals.css` sets per `data-color` (#320).\n// Before 7.0 only the presets took this path while the states carried bespoke\n// Tailwind classes, which meant `[data-color]` hooks and `--tag-*` overrides\n// worked on some colours but silently not on others.\n//\n//   --tag-bg    the hue; the border in `outlined`\n//   --tag-fg    text colour (defaults to --tag-bg)\n//   --tag-tint  the fill behind `filled` (defaults to a 10% --tag-bg wash)\nconst fillClasses = cn('border-transparent bg-(--tag-tint) text-(--tag-fg)');\n\nconst outlinedClasses = cn('border-(--tag-bg) text-(--tag-fg)');\n\nconst Tag = ({\n  className,\n  variant,\n  color,\n  asChild = false,\n  children,\n  ...props\n}: Props) => {\n  const { defaultProps } = useConfig();\n  const tagDefaults = defaultProps?.tag as\n    Partial<Pick<Props, 'variant' | 'color'>> | undefined;\n  // An explicit prop wins over a `Config` default, which wins over the built-in\n  // — the same resolution order `Button` uses.\n  const resolvedVariant = variant ?? tagDefaults?.variant ?? 'filled';\n  const resolvedColor = color ?? tagDefaults?.color ?? 'default';\n  const isOutlined = resolvedVariant === 'outlined';\n  const Comp = asChild ? Slot : 'span';\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      // Emitted for every colour, not just the presets, so consumers can hook\n      // `[data-color]` / `[data-variant]` uniformly. `data-variant` is what\n      // lets `globals.css` give `default` a different text colour when\n      // outlined without reintroducing a second class path here.\n      data-color={resolvedColor}\n      data-variant={resolvedVariant}\n      className={cn(\n        TAG_BASE,\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        isOutlined ? outlinedClasses : fillClasses,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AA2CA,MAAM,WAAW,GACf,qBACA,kDACA,2DACA,8CACA,wEACF;AAWA,MAAM,cAAc,GAAG,oDAAoD;AAE3E,MAAM,kBAAkB,GAAG,mCAAmC;AAE9D,MAAM,OAAO,EACX,WACA,SACA,OACA,UAAU,OACV,UACA,GAAG,YACQ;CACX,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,cAAc,cAAc;CAIlC,MAAM,kBAAkB,WAAW,aAAa,WAAW;CAC3D,MAAM,gBAAgB,SAAS,aAAa,SAAS;CAIrD,OACE,oBAHW,UAAU,OAAO,QAG5B;EACE,aAAU;EAKV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,UACA,4BACA,uBAfa,oBAAoB,aAgBpB,kBAAkB,aAC/B,SAEF;EACA,GAAI;EAEH;CACG,CAAA;AAEV"}

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

@@ -6,12 +6,16 @@
     --font-mono: var(--font-geist-mono);
     --color-red-400: oklch(70.4% .191 22.216);
     --color-yellow-400: oklch(85.2% .199 91.936);
-    --color-yellow-500: oklch(79.5% .184 86.047);
-    --color-yellow-600: oklch(68.1% .162 75.834);
     --color-green-400: oklch(79.2% .209 151.711);
-    --color-green-500: oklch(72.3% .219 149.579);
-    --color-green-600: oklch(62.7% .194 149.214);
     --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;
@@ -149,6 +153,41 @@
   [data-slot="button"][data-color="gold"] {
     --btn-bg: #f59e0b;
   }
+  [data-slot="badge"][data-color] {
+    --tag-fg: var(--tag-bg);
+    --tag-tint: var(--tag-bg);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tag-tint: color-mix(in oklab, var(--tag-bg), transparent 90%);
+    }
+  }
+  [data-slot="badge"][data-color="default"] {
+    --tag-bg: var(--border);
+    --tag-tint: var(--muted);
+    --tag-fg: var(--muted-foreground);
+  }
+  [data-slot="badge"][data-color="default"][data-variant="outlined"] {
+    --tag-fg: var(--foreground);
+  }
+  [data-slot="badge"][data-color="primary"] {
+    --tag-bg: var(--primary);
+  }
+  [data-slot="badge"][data-color="danger"] {
+    --tag-bg: var(--destructive);
+  }
+  [data-slot="badge"][data-color="success"] {
+    --tag-bg: oklch(72.3% .219 149.579);
+    --tag-fg: oklch(62.7% .194 149.214);
+  }
+  [data-slot="badge"][data-color="warning"] {
+    --tag-bg: oklch(79.5% .184 86.047);
+    --tag-fg: oklch(68.1% .162 75.834);
+  }
+  :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="success"] {
+    --tag-fg: oklch(79.2% .209 151.711);
+  }
+  :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="warning"] {
+    --tag-fg: oklch(85.2% .199 91.936);
+  }
   [data-slot="badge"][data-color="blue"] {
     --tag-bg: #3b82f6;
   }
@@ -598,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;
   }
@@ -622,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);
   }
@@ -1096,11 +1144,8 @@
   .border-current {
     border-color: currentcolor;
   }
-  .border-destructive {
-    border-color: var(--destructive);
-  }
-  .border-green-500 {
-    border-color: var(--color-green-500);
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
   }
   .border-input {
     border-color: var(--input);
@@ -1111,17 +1156,11 @@
   .border-transparent {
     border-color: transparent;
   }
-  .border-yellow-500 {
-    border-color: var(--color-yellow-500);
-  }
   .bg-\(--btn-bg\) {
     background-color: var(--btn-bg);
   }
-  .bg-\[color-mix\(in_oklch\,var\(--tag-bg\)\,transparent_90\%\)\] {
-    background-color: var(--tag-bg);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklch,var(--tag-bg),transparent 90%);
-    }
+  .bg-\(--tag-tint\) {
+    background-color: var(--tag-tint);
   }
   .bg-accent {
     background-color: var(--accent);
@@ -1156,18 +1195,6 @@
   .bg-destructive {
     background-color: var(--destructive);
   }
-  .bg-destructive\/10 {
-    background-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
-    }
-  }
-  .bg-green-500\/10 {
-    background-color: color-mix(in srgb, oklch(72.3% .219 149.579) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
-    }
-  }
   .bg-inherit {
     background-color: inherit;
   }
@@ -1183,12 +1210,6 @@
   .bg-primary {
     background-color: var(--primary);
   }
-  .bg-primary\/10 {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-    }
-  }
   .bg-primary\/20 {
     background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1201,11 +1222,8 @@
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-yellow-500\/10 {
-    background-color: color-mix(in srgb, oklch(79.5% .184 86.047) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
-    }
+  .bg-white {
+    background-color: var(--color-white);
   }
   .fill-primary {
     fill: var(--primary);
@@ -1415,8 +1433,8 @@
   .text-\(--btn-fg\) {
     color: var(--btn-fg);
   }
-  .text-\(--tag-bg\) {
-    color: var(--tag-bg);
+  .text-\(--tag-fg\) {
+    color: var(--tag-fg);
   }
   .text-accent-foreground {
     color: var(--accent-foreground);
@@ -1436,12 +1454,12 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
   .text-green-400 {
     color: var(--color-green-400);
   }
-  .text-green-600 {
-    color: var(--color-green-600);
-  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1466,12 +1484,12 @@
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
-  .text-yellow-600 {
-    color: var(--color-yellow-600);
-  }
   .lowercase {
     text-transform: lowercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1545,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,);
   }
@@ -2604,12 +2626,6 @@
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
     }
   }
-  .dark\:text-green-400:is(.dark *, [data-theme="dark"] *) {
-    color: var(--color-green-400);
-  }
-  .dark\:text-yellow-400:is(.dark *, [data-theme="dark"] *) {
-    color: var(--color-yellow-400);
-  }
   @media (hover: hover) {
     .dark\:hover\:bg-accent\/50:is(.dark *, [data-theme="dark"] *):hover {
       background-color: var(--accent);
@@ -2661,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": "6.2.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",

package/dist/lib/colors.mjs

@@ -1,28 +0,0 @@
-//#region src/lib/colors.ts
-/**
-* The shared preset colour palette. `Button` and `Tag` both express these via
-* the `--btn-*` / `--tag-*` custom-property systems in `globals.css` (keyed off
-* `data-color`), so the same word means the same hue on either component
-* (#320). Keep this list in sync with the `[data-color='…']` rules there.
-*/
-const PRESET_COLORS = [
-	"blue",
-	"purple",
-	"cyan",
-	"green",
-	"magenta",
-	"pink",
-	"red",
-	"orange",
-	"yellow",
-	"volcano",
-	"geekblue",
-	"lime",
-	"gold"
-];
-/** Runtime membership test — true when `color` is one of the shared presets. */
-const isPresetColor = (color) => PRESET_COLORS.includes(color);
-//#endregion
-export { PRESET_COLORS, isPresetColor };
-
-//# sourceMappingURL=colors.mjs.map

package/dist/lib/colors.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.mjs","names":[],"sources":["../../src/lib/colors.ts"],"sourcesContent":["/**\n * The shared preset colour palette. `Button` and `Tag` both express these via\n * the `--btn-*` / `--tag-*` custom-property systems in `globals.css` (keyed off\n * `data-color`), so the same word means the same hue on either component\n * (#320). Keep this list in sync with the `[data-color='…']` rules there.\n */\nexport const PRESET_COLORS = [\n  'blue',\n  'purple',\n  'cyan',\n  'green',\n  'magenta',\n  'pink',\n  'red',\n  'orange',\n  'yellow',\n  'volcano',\n  'geekblue',\n  'lime',\n  'gold',\n] as const;\n\nexport type PresetColor = (typeof PRESET_COLORS)[number];\n\n/** Runtime membership test — true when `color` is one of the shared presets. */\nexport const isPresetColor = (color: string): color is PresetColor =>\n  (PRESET_COLORS as readonly string[]).includes(color);\n"],"mappings":";;;;;;;AAMA,MAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAKA,MAAa,iBAAiB,UAC3B,cAAoC,SAAS,KAAK"}