@jbpark/ui-kit 7.0.0 → 8.0.0

package/dist/Button.d.mts

@@ -1,4 +1,4 @@
-import { PresetColor } from "./lib/colors.mjs";
+import { DeprecatedPresetColor, PresetColor } from "./lib/colors.mjs";
 import * as React$1 from "react";
 //#region src/components/atoms/button.d.ts
 type NativeButtonProps = React$1.ComponentProps<'button'> & {
@@ -43,8 +43,13 @@ interface Props extends Omit<NativeButtonProps, 'size' | 'variant' | 'type'> {
   /**
    * Color, independent of `variant`. Defaults to `'default'`, or to whatever
    * `type` maps to when `type` is set. `danger` overrides this.
+   *
+   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings
+   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but
+   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no
+   * successor; it is `orange` one lightness step darker).
    */
-  color?: PresetColor | 'default' | 'primary' | 'danger';
+  color?: PresetColor | DeprecatedPresetColor | 'default' | 'primary' | 'danger';
   loading?: boolean | {
     icon: React$1.ReactNode;
   };

package/dist/Button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;KAaK,oBAAoB,QAAM;EAC7B;;UAGe,cAAc,KAC7B;EAGA,OAAO,QAAM;EACb;EACA;EACA;EACA;;;;;;;;;;;;;;;;;;EAkBA;;;;;EAKA;;;;;;EAMA;EACA;;;;;EAKA,QAAQ;EACR;IAAsB,MAAM,QAAM;;;cAqF9B,WAAU,MAAA,WAAA,MAAA,SAAA,UAAA,MAAA,OAAA,OAAA,OAAA,UAAA,SAAA,QAAA,SAAA,UAAA,gBAAA,SAiBb,UAAK,QAAA,IAAA"}
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;KAaK,oBAAoB,QAAM;EAC7B;;UAGe,cAAc,KAC7B;EAGA,OAAO,QAAM;EACb;EACA;EACA;EACA;;;;;;;;;;;;;;;;;;EAkBA;;;;;EAKA;;;;;;EAMA;EACA;;;;;;;;;;EAUA,QACE,cAAc;EAChB;IAAsB,MAAM,QAAM;;;cAqF9B,WAAU,MAAA,WAAA,MAAA,SAAA,UAAA,MAAA,OAAA,OAAA,OAAA,UAAA,SAAA,QAAA,SAAA,UAAA,gBAAA,SAiBb,UAAK,QAAA,IAAA"}

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { LoaderCircle } from 'lucide-react';\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 NativeButtonProps = React.ComponentProps<'button'> & {\n  asChild?: boolean;\n};\n\nexport interface Props extends Omit<\n  NativeButtonProps,\n  'size' | 'variant' | 'type'\n> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  /**\n   * Syntactic sugar for a `(color, variant)` pair. **Will follow `variant` and\n   * `color` if provided** — `type` only fills in the axes you leave unset.\n   *\n   * | `type`    | equivalent to                          |\n   * | --------- | -------------------------------------- |\n   * | `primary` | `color=\"primary\" variant=\"solid\"`      |\n   * | `default` | `color=\"default\" variant=\"outlined\"`   |\n   * | `dashed`  | `color=\"default\" variant=\"dashed\"`     |\n   * | `text`    | `color=\"default\" variant=\"text\"`       |\n   * | `link`    | `color=\"primary\" variant=\"link\"`       |\n   *\n   * So `<Button type=\"primary\">` is the same as\n   * `<Button color=\"primary\" variant=\"solid\">`, and\n   * `<Button type=\"primary\" variant=\"filled\">` keeps the primary color but\n   * renders filled. `danger` still overrides the resolved color.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  /**\n   * Visual fill style, independent of `color`. Defaults to `'outlined'`.\n   * Takes precedence over whatever `type` would have supplied.\n   */\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  /**\n   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate\n   * from the antd-style `type` above. Defaults to `'button'` so a Button\n   * placed inside a `<form>` doesn't submit it unless explicitly opted in.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  shape?: 'default' | 'circle' | 'round';\n  /**\n   * Color, independent of `variant`. Defaults to `'default'`, or to whatever\n   * `type` maps to when `type` is set. `danger` overrides this.\n   */\n  color?: PresetColor | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\n// Chassis absorbed from core/button's cva base (#278 ③ / #294 Phase 4). The\n// shared focus/aria set lives in INTERACTIVE_CHASSIS; a Button additionally\n// disables and sizes its icons. Kept as constants so the absorb relocates this\n// treatment rather than dropping it (the #177 class of silent regression the\n// #300/#301 net guards).\nconst BUTTON_CHASSIS = cn(\n  INTERACTIVE_CHASSIS,\n  'outline-none',\n  'disabled:pointer-events-none disabled:opacity-50',\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n);\n\n// Presentation the atom builds on. The size/variant/shape classes below still\n// override the incidental leftovers exactly as they did when this wrapped\n// core/button, so the rendered output is unchanged (verified against a\n// pre-refactor render matrix).\nconst BUTTON_BASE = cn(\n  BUTTON_CHASSIS,\n  'gap-2 whitespace-nowrap font-medium transition-all',\n  'has-[>svg]:px-3',\n);\n\nconst variantClasses: Record<string, string> = {\n  // solid used to inherit its fill from core/button's default variant; carry it\n  // explicitly now that the primitive is absorbed. A colored solid overrides\n  // this with the --btn-* custom properties further down.\n  solid: cn('bg-primary text-primary-foreground', 'hover:bg-primary/90'),\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\n/**\n * antd-style syntactic sugar: each `type` expands to a `(color, variant)` pair.\n * Explicit `color`/`variant` props win over whatever the `type` maps to, so\n * `type` only fills in the axes the caller left unset.\n *\n * Mirrors antd: `<Button type=\"primary\">` ≡ `<Button color=\"primary\" variant=\"solid\">`.\n */\nconst typeToColorVariant: Record<\n  NonNullable<Props['type']>,\n  { color: NonNullable<Props['color']>; variant: NonNullable<Props['variant']> }\n> = {\n  primary: { color: 'primary', variant: 'solid' },\n  default: { color: 'default', variant: 'outlined' },\n  dashed: { color: 'default', variant: 'dashed' },\n  text: { color: 'default', variant: 'text' },\n  link: { color: 'primary', variant: 'link' },\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type,\n  variant,\n  htmlType = 'button',\n  size,\n  color,\n  shape,\n  block = false,\n  disabled,\n  loading,\n  danger,\n  asChild = false,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const { componentSize, defaultProps } = useConfig();\n  const buttonDefaults = defaultProps?.button as\n    Partial<Pick<Props, 'shape' | 'variant' | 'color'>> | undefined;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const resolvedShape = shape ?? buttonDefaults?.shape ?? 'default';\n  const iconOnly = icon && !children;\n  // `type` is syntactic sugar that expands to a (color, variant) pair; explicit\n  // `color`/`variant` win over it, so `type` only fills the axes left unset.\n  // A `Config` default sits below the call-site `type` (which is more specific)\n  // but above the library built-in. `danger` still trumps everything, matching\n  // antd. Defaults live here rather than on the parameters so `type` gets a\n  // chance to supply them first.\n  const typeDefaults = type ? typeToColorVariant[type] : undefined;\n  const resolvedVariant =\n    variant ?? typeDefaults?.variant ?? buttonDefaults?.variant ?? 'outlined';\n  const computedColor = danger\n    ? 'danger'\n    : (color ?? typeDefaults?.color ?? buttonDefaults?.color ?? 'default');\n  const colored = computedColor !== 'default';\n  const isLoading = !!loading;\n\n  const Comp = asChild ? Slot : 'button';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(\n        BUTTON_BASE,\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[resolvedSize],\n        iconOnly && ['p-0', iconClasses[resolvedSize]],\n        shapesClasses[resolvedShape],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      data-color={computedColor}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Comp>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAqEA,MAAM,iBAAiB,GACrB,qBACA,gBACA,oDACA,mFACF;AAMA,MAAM,cAAc,GAClB,gBACA,sDACA,iBACF;AAEA,MAAM,iBAAyC;CAI7C,OAAO,GAAG,sCAAsC,qBAAqB;CACrE,UAAU,GACR,yEACA,iCACA,iBACF;CACA,QAAQ,GACN,uFACA,iCACA,iBACF;CACA,QAAQ,GAAG,4BAA4B,mBAAmB;CAC1D,MAAM,GAAG,kCAAkC,iBAAiB;CAC5D,MAAM,GACJ,+BACA,sCACA,qBACF;AACF;;;;;;;;AASA,MAAM,qBAGF;CACF,SAAS;EAAE,OAAO;EAAW,SAAS;CAAQ;CAC9C,SAAS;EAAE,OAAO;EAAW,SAAS;CAAW;CACjD,QAAQ;EAAE,OAAO;EAAW,SAAS;CAAS;CAC9C,MAAM;EAAE,OAAO;EAAW,SAAS;CAAO;CAC1C,MAAM;EAAE,OAAO;EAAW,SAAS;CAAO;AAC5C;AAEA,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,UAAU,EACd,MACA,WACA,MACA,SACA,WAAW,UACX,MACA,OACA,OACA,QAAQ,OACR,UACA,SACA,QACA,UAAU,OACV,UACA,aACA,GAAG,YACQ;CACX,MAAM,EAAE,eAAe,iBAAiB,UAAU;CAClD,MAAM,iBAAiB,cAAc;CAErC,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,gBAAgB,SAAS,gBAAgB,SAAS;CACxD,MAAM,WAAW,QAAQ,CAAC;CAO1B,MAAM,eAAe,OAAO,mBAAmB,QAAQ,KAAA;CACvD,MAAM,kBACJ,WAAW,cAAc,WAAW,gBAAgB,WAAW;CACjE,MAAM,gBAAgB,SAClB,WACC,SAAS,cAAc,SAAS,gBAAgB,SAAS;CAC9D,MAAM,UAAU,kBAAkB;CAClC,MAAM,YAAY,CAAC,CAAC;CAEpB,MAAM,OAAO,UAAU,OAAO;CAE9B,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,IAG1C;CAGF,OACE,qBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,aACA,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,eACb,YAAY,CAAC,OAAO,YAAY,aAAa,GAC7C,cAAc,gBACd,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;EACF,IACA,CACE,mBACA,gEAEF,IACN,SAEF;EACA,MAAM;EACN,UAAU,YAAY;EACtB,aAAW;EACX,cAAY;EACZ,cAAa,MAAK;GAChB,cAAc,CAAC;EACjB;EACA,GAAI;EAtCN,UAAA,CAwCG,aACA,QACG;;AAEV"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { LoaderCircle } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\nimport { type DeprecatedPresetColor, type PresetColor } from '../../lib/colors';\n\ntype NativeButtonProps = React.ComponentProps<'button'> & {\n  asChild?: boolean;\n};\n\nexport interface Props extends Omit<\n  NativeButtonProps,\n  'size' | 'variant' | 'type'\n> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  /**\n   * Syntactic sugar for a `(color, variant)` pair. **Will follow `variant` and\n   * `color` if provided** — `type` only fills in the axes you leave unset.\n   *\n   * | `type`    | equivalent to                          |\n   * | --------- | -------------------------------------- |\n   * | `primary` | `color=\"primary\" variant=\"solid\"`      |\n   * | `default` | `color=\"default\" variant=\"outlined\"`   |\n   * | `dashed`  | `color=\"default\" variant=\"dashed\"`     |\n   * | `text`    | `color=\"default\" variant=\"text\"`       |\n   * | `link`    | `color=\"primary\" variant=\"link\"`       |\n   *\n   * So `<Button type=\"primary\">` is the same as\n   * `<Button color=\"primary\" variant=\"solid\">`, and\n   * `<Button type=\"primary\" variant=\"filled\">` keeps the primary color but\n   * renders filled. `danger` still overrides the resolved color.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  /**\n   * Visual fill style, independent of `color`. Defaults to `'outlined'`.\n   * Takes precedence over whatever `type` would have supplied.\n   */\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  /**\n   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate\n   * from the antd-style `type` above. Defaults to `'button'` so a Button\n   * placed inside a `<form>` doesn't submit it unless explicitly opted in.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  shape?: 'default' | 'circle' | 'round';\n  /**\n   * Color, independent of `variant`. Defaults to `'default'`, or to whatever\n   * `type` maps to when `type` is set. `danger` overrides this.\n   *\n   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings\n   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but\n   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no\n   * successor; it is `orange` one lightness step darker).\n   */\n  color?:\n    PresetColor | DeprecatedPresetColor | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\n// Chassis absorbed from core/button's cva base (#278 ③ / #294 Phase 4). The\n// shared focus/aria set lives in INTERACTIVE_CHASSIS; a Button additionally\n// disables and sizes its icons. Kept as constants so the absorb relocates this\n// treatment rather than dropping it (the #177 class of silent regression the\n// #300/#301 net guards).\nconst BUTTON_CHASSIS = cn(\n  INTERACTIVE_CHASSIS,\n  'outline-none',\n  'disabled:pointer-events-none disabled:opacity-50',\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n);\n\n// Presentation the atom builds on. The size/variant/shape classes below still\n// override the incidental leftovers exactly as they did when this wrapped\n// core/button, so the rendered output is unchanged (verified against a\n// pre-refactor render matrix).\nconst BUTTON_BASE = cn(\n  BUTTON_CHASSIS,\n  'gap-2 whitespace-nowrap font-medium transition-all',\n  'has-[>svg]:px-3',\n);\n\nconst variantClasses: Record<string, string> = {\n  // solid used to inherit its fill from core/button's default variant; carry it\n  // explicitly now that the primitive is absorbed. A colored solid overrides\n  // this with the --btn-* custom properties further down.\n  solid: cn('bg-primary text-primary-foreground', 'hover:bg-primary/90'),\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\n/**\n * antd-style syntactic sugar: each `type` expands to a `(color, variant)` pair.\n * Explicit `color`/`variant` props win over whatever the `type` maps to, so\n * `type` only fills in the axes the caller left unset.\n *\n * Mirrors antd: `<Button type=\"primary\">` ≡ `<Button color=\"primary\" variant=\"solid\">`.\n */\nconst typeToColorVariant: Record<\n  NonNullable<Props['type']>,\n  { color: NonNullable<Props['color']>; variant: NonNullable<Props['variant']> }\n> = {\n  primary: { color: 'primary', variant: 'solid' },\n  default: { color: 'default', variant: 'outlined' },\n  dashed: { color: 'default', variant: 'dashed' },\n  text: { color: 'default', variant: 'text' },\n  link: { color: 'primary', variant: 'link' },\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type,\n  variant,\n  htmlType = 'button',\n  size,\n  color,\n  shape,\n  block = false,\n  disabled,\n  loading,\n  danger,\n  asChild = false,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const { componentSize, defaultProps } = useConfig();\n  const buttonDefaults = defaultProps?.button as\n    Partial<Pick<Props, 'shape' | 'variant' | 'color'>> | undefined;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const resolvedShape = shape ?? buttonDefaults?.shape ?? 'default';\n  const iconOnly = icon && !children;\n  // `type` is syntactic sugar that expands to a (color, variant) pair; explicit\n  // `color`/`variant` win over it, so `type` only fills the axes left unset.\n  // A `Config` default sits below the call-site `type` (which is more specific)\n  // but above the library built-in. `danger` still trumps everything, matching\n  // antd. Defaults live here rather than on the parameters so `type` gets a\n  // chance to supply them first.\n  const typeDefaults = type ? typeToColorVariant[type] : undefined;\n  const resolvedVariant =\n    variant ?? typeDefaults?.variant ?? buttonDefaults?.variant ?? 'outlined';\n  const computedColor = danger\n    ? 'danger'\n    : (color ?? typeDefaults?.color ?? buttonDefaults?.color ?? 'default');\n  const colored = computedColor !== 'default';\n  const isLoading = !!loading;\n\n  const Comp = asChild ? Slot : 'button';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(\n        BUTTON_BASE,\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[resolvedSize],\n        iconOnly && ['p-0', iconClasses[resolvedSize]],\n        shapesClasses[resolvedShape],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      data-color={computedColor}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Comp>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;AA2EA,MAAM,iBAAiB,GACrB,qBACA,gBACA,oDACA,mFACF;AAMA,MAAM,cAAc,GAClB,gBACA,sDACA,iBACF;AAEA,MAAM,iBAAyC;CAI7C,OAAO,GAAG,sCAAsC,qBAAqB;CACrE,UAAU,GACR,yEACA,iCACA,iBACF;CACA,QAAQ,GACN,uFACA,iCACA,iBACF;CACA,QAAQ,GAAG,4BAA4B,mBAAmB;CAC1D,MAAM,GAAG,kCAAkC,iBAAiB;CAC5D,MAAM,GACJ,+BACA,sCACA,qBACF;AACF;;;;;;;;AASA,MAAM,qBAGF;CACF,SAAS;EAAE,OAAO;EAAW,SAAS;CAAQ;CAC9C,SAAS;EAAE,OAAO;EAAW,SAAS;CAAW;CACjD,QAAQ;EAAE,OAAO;EAAW,SAAS;CAAS;CAC9C,MAAM;EAAE,OAAO;EAAW,SAAS;CAAO;CAC1C,MAAM;EAAE,OAAO;EAAW,SAAS;CAAO;AAC5C;AAEA,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,UAAU,EACd,MACA,WACA,MACA,SACA,WAAW,UACX,MACA,OACA,OACA,QAAQ,OACR,UACA,SACA,QACA,UAAU,OACV,UACA,aACA,GAAG,YACQ;CACX,MAAM,EAAE,eAAe,iBAAiB,UAAU;CAClD,MAAM,iBAAiB,cAAc;CAErC,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,gBAAgB,SAAS,gBAAgB,SAAS;CACxD,MAAM,WAAW,QAAQ,CAAC;CAO1B,MAAM,eAAe,OAAO,mBAAmB,QAAQ,KAAA;CACvD,MAAM,kBACJ,WAAW,cAAc,WAAW,gBAAgB,WAAW;CACjE,MAAM,gBAAgB,SAClB,WACC,SAAS,cAAc,SAAS,gBAAgB,SAAS;CAC9D,MAAM,UAAU,kBAAkB;CAClC,MAAM,YAAY,CAAC,CAAC;CAEpB,MAAM,OAAO,UAAU,OAAO;CAE9B,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,IAG1C;CAGF,OACE,qBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,aACA,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,eACb,YAAY,CAAC,OAAO,YAAY,aAAa,GAC7C,cAAc,gBACd,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;EACF,IACA,CACE,mBACA,gEAEF,IACN,SAEF;EACA,MAAM;EACN,UAAU,YAAY;EACtB,aAAW;EACX,cAAY;EACZ,cAAa,MAAK;GAChB,cAAc,CAAC;EACjB;EACA,GAAI;EAtCN,UAAA,CAwCG,aACA,QACG;;AAEV"}

package/dist/CodeEditor.d.mts

@@ -0,0 +1,51 @@
+import CodeMirror, { Extension } from "@uiw/react-codemirror";
+//#region src/components/atoms/code-editor.d.ts
+interface Props extends Omit<React.ComponentProps<typeof CodeMirror>, 'value' | 'extensions' | 'onChange' | 'ref' | 'theme'> {
+  value: string;
+  /** Passed through to CodeMirror; `'100%'` fills the wrapper. */
+  height?: string;
+  /**
+   * `'light'`/`'dark'` pick the VSCode theme pair, `'auto'` (the default)
+   * follows the nearest `Config`'s `theme.dark`, and an `Extension` is any
+   * CodeMirror theme of your own.
+   *
+   * This narrows CodeMirror's own meaning for two of the strings — upstream,
+   * `'light'`/`'dark'` are *its* built-in themes — so that the two named
+   * options match what the component actually renders by default. `'none'`
+   * still means what it does upstream: no theme extension, style it yourself.
+   */
+  theme?: 'light' | 'dark' | 'auto' | 'none' | Extension;
+  /** Appended after the built-in JS/TS + line-wrapping extensions. */
+  extensions?: Extension[];
+  /**
+   * Renders a read-through unified diff against `original` instead of a plain
+   * document. `mergeControls` defaults to `false` (display-only review, no
+   * accept/reject gutters).
+   */
+  diff?: {
+    original: string;
+    mergeControls?: boolean;
+  };
+  /**
+   * Formatter run on the Cmd/Ctrl+S value before it is written back. Omitted,
+   * the shortcut still fires `onSave` — it just doesn't reformat. Kept as an
+   * injected function so this package carries no formatter dependency of its
+   * own (prettier is ~9.6 MB); pass the one your app already owns.
+   */
+  formatCode?: (code: string) => Promise<string>;
+  className?: string;
+  onChange?: (value: string) => void;
+  /** Fires on Cmd/Ctrl+S with the value that was written back. */
+  onSave?: (value: string) => void;
+  /**
+   * `null` on a clean save; a string carries the message a failed `formatCode`
+   * threw. Named `onFormatError` rather than `onError` because the base props
+   * already carry the DOM `onError` handler, and silently shadowing it would
+   * be worse than the extra word.
+   */
+  onFormatError?: (error: string | null) => void;
+}
+declare const CodeEditor: ({ value, theme, height, className, extensions: extraExtensions, diff, formatCode, onChange, onSave, onFormatError, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Props, CodeEditor as default };
+//# sourceMappingURL=CodeEditor.d.mts.map

package/dist/CodeEditor.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.mts","names":[],"sources":["../src/components/atoms/code-editor.tsx"],"mappings":";;UA2BiB,cAAc,KAC7B,MAAM,sBAAsB;EAG5B;;EAEA;;;;;;;;;;;EAWA,6CAA6C;;EAE7C,aAAa;;;;;;EAMb;IACE;IACA;;;;;;;;EAQF,cAAc,iBAAiB;EAC/B;EACA,YAAY;;EAEZ,UAAU;;;;;;;EAOV,iBAAiB;;cAGb,eAAc,OAAA,OAAA,QAAA,WAAA,YAAA,iBAAA,MAAA,YAAA,UAAA,QAAA,kBAAA,SAYjB,0BAAK,IAAA"}

package/dist/CodeEditor.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useIsDarkActive } from "./providers/config/dark-mode.mjs";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { javascript } from "@codemirror/lang-javascript";
+import { unifiedMergeView } from "@codemirror/merge";
+import { vscodeDark, vscodeLight } from "@uiw/codemirror-theme-vscode";
+import CodeMirror from "@uiw/react-codemirror";
+import { EditorView } from "codemirror";
+//#region src/components/atoms/code-editor.tsx
+const CodeEditor = ({ value, theme = "auto", height, className, extensions: extraExtensions, diff, formatCode, onChange, onSave, onFormatError, ...props }) => {
+	const editorRef = useRef(null);
+	const isDarkActive = useIsDarkActive();
+	const resolvedTheme = useMemo(() => {
+		if (theme === "auto") return isDarkActive ? vscodeDark : vscodeLight;
+		if (theme === "light") return vscodeLight;
+		if (theme === "dark") return vscodeDark;
+		return theme;
+	}, [theme, isDarkActive]);
+	const extensions = useMemo(() => {
+		const base = [javascript({
+			jsx: true,
+			typescript: true
+		}), EditorView.lineWrapping];
+		if (diff) base.push(unifiedMergeView({
+			original: diff.original,
+			mergeControls: diff.mergeControls ?? false
+		}));
+		return [...base, ...extraExtensions ?? []];
+	}, [diff, extraExtensions]);
+	const save = useCallback(async (val) => {
+		const view = editorRef.current?.view;
+		if (!view) return;
+		try {
+			const currentLength = view.state.doc.length;
+			const cursorPos = view.state.selection.main.head;
+			const next = formatCode ? await formatCode(val) : val;
+			if (currentLength !== view.state.doc.length) {
+				onFormatError?.(null);
+				return;
+			}
+			if (next !== val) view.dispatch(view.state.update({
+				changes: {
+					from: 0,
+					to: currentLength,
+					insert: next
+				},
+				selection: { anchor: Math.min(cursorPos, next.length) }
+			}));
+			onChange?.(next);
+			onSave?.(next);
+			onFormatError?.(null);
+		} catch (e) {
+			onFormatError?.(e instanceof Error ? e.message : String(e));
+		}
+	}, [
+		formatCode,
+		onChange,
+		onSave,
+		onFormatError
+	]);
+	const onKeyDown = useCallback((e) => {
+		if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+			e.preventDefault();
+			save(editorRef.current?.view?.state.doc.toString() ?? value);
+		}
+	}, [save, value]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-editor",
+		className: cn(className),
+		onKeyDown,
+		children: /* @__PURE__ */ jsx(CodeMirror, {
+			ref: editorRef,
+			theme: resolvedTheme,
+			height: height || "100%",
+			value,
+			extensions,
+			onChange,
+			...props
+		})
+	});
+};
+//#endregion
+export { CodeEditor as default };
+
+//# sourceMappingURL=CodeEditor.mjs.map

package/dist/CodeEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.mjs","names":[],"sources":["../src/components/atoms/code-editor.tsx"],"sourcesContent":["'use client';\n\n// Subpath-only component (`@jbpark/ui-kit/CodeEditor`). Deliberately NOT\n// re-exported from `atoms/index.ts` — CodeMirror is an *optional* peer\n// dependency, and an ESM re-export from the root barrel is eager, so\n// `import { Button } from '@jbpark/ui-kit'` would fail to resolve for every\n// consumer that never asked for an editor. Keeping it behind its own subpath\n// is what makes the peer set genuinely opt-in (#346).\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport { javascript } from '@codemirror/lang-javascript';\nimport { unifiedMergeView } from '@codemirror/merge';\nimport { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';\nimport CodeMirror, {\n  type Extension,\n  type ReactCodeMirrorRef,\n} from '@uiw/react-codemirror';\nimport { EditorView } from 'codemirror';\n\nimport { cn } from '@repo/ui/utils';\n\n// Relative rather than `@repo/ui/providers`, because this hook is deliberately\n// absent from that barrel — it is a published subpath, and the hook is internal.\n// Both specifiers resolve to the same files, so there is still one Config\n// context.\nimport { useIsDarkActive } from '../../providers/config';\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof CodeMirror>,\n  'value' | 'extensions' | 'onChange' | 'ref' | 'theme'\n> {\n  value: string;\n  /** Passed through to CodeMirror; `'100%'` fills the wrapper. */\n  height?: string;\n  /**\n   * `'light'`/`'dark'` pick the VSCode theme pair, `'auto'` (the default)\n   * follows the nearest `Config`'s `theme.dark`, and an `Extension` is any\n   * CodeMirror theme of your own.\n   *\n   * This narrows CodeMirror's own meaning for two of the strings — upstream,\n   * `'light'`/`'dark'` are *its* built-in themes — so that the two named\n   * options match what the component actually renders by default. `'none'`\n   * still means what it does upstream: no theme extension, style it yourself.\n   */\n  theme?: 'light' | 'dark' | 'auto' | 'none' | Extension;\n  /** Appended after the built-in JS/TS + line-wrapping extensions. */\n  extensions?: Extension[];\n  /**\n   * Renders a read-through unified diff against `original` instead of a plain\n   * document. `mergeControls` defaults to `false` (display-only review, no\n   * accept/reject gutters).\n   */\n  diff?: {\n    original: string;\n    mergeControls?: boolean;\n  };\n  /**\n   * Formatter run on the Cmd/Ctrl+S value before it is written back. Omitted,\n   * the shortcut still fires `onSave` — it just doesn't reformat. Kept as an\n   * injected function so this package carries no formatter dependency of its\n   * own (prettier is ~9.6 MB); pass the one your app already owns.\n   */\n  formatCode?: (code: string) => Promise<string>;\n  className?: string;\n  onChange?: (value: string) => void;\n  /** Fires on Cmd/Ctrl+S with the value that was written back. */\n  onSave?: (value: string) => void;\n  /**\n   * `null` on a clean save; a string carries the message a failed `formatCode`\n   * threw. Named `onFormatError` rather than `onError` because the base props\n   * already carry the DOM `onError` handler, and silently shadowing it would\n   * be worse than the extra word.\n   */\n  onFormatError?: (error: string | null) => void;\n}\n\nconst CodeEditor = ({\n  value,\n  theme = 'auto',\n  height,\n  className,\n  extensions: extraExtensions,\n  diff,\n  formatCode,\n  onChange,\n  onSave,\n  onFormatError,\n  ...props\n}: Props) => {\n  const editorRef = useRef<ReactCodeMirrorRef>(null);\n  const isDarkActive = useIsDarkActive();\n\n  const resolvedTheme = useMemo(() => {\n    if (theme === 'auto') {\n      return isDarkActive ? vscodeDark : vscodeLight;\n    }\n    if (theme === 'light') {\n      return vscodeLight;\n    }\n    if (theme === 'dark') {\n      return vscodeDark;\n    }\n\n    // `'none'` and a caller-supplied Extension both mean what they mean\n    // upstream, so hand them straight to CodeMirror.\n    return theme;\n  }, [theme, isDarkActive]);\n\n  const extensions = useMemo(() => {\n    const base: Extension[] = [\n      javascript({ jsx: true, typescript: true }),\n      EditorView.lineWrapping,\n    ];\n\n    if (diff) {\n      base.push(\n        unifiedMergeView({\n          original: diff.original,\n          mergeControls: diff.mergeControls ?? false,\n        }),\n      );\n    }\n\n    return [...base, ...(extraExtensions ?? [])];\n  }, [diff, extraExtensions]);\n\n  const save = useCallback(\n    async (val: string) => {\n      const view = editorRef.current?.view;\n      if (!view) {\n        return;\n      }\n\n      try {\n        const currentLength = view.state.doc.length;\n        const cursorPos = view.state.selection.main.head;\n        const next = formatCode ? await formatCode(val) : val;\n\n        // Formatting is async, so the document may have moved on while it ran\n        // — writing back then would clobber keystrokes typed in the meantime.\n        if (currentLength !== view.state.doc.length) {\n          onFormatError?.(null);\n          return;\n        }\n\n        // Skip the transaction when the text is unchanged (the common case\n        // without a `formatCode`): replacing the doc with itself would push a\n        // pointless undo entry. The callbacks still fire, so a save handler\n        // sees every Cmd+S.\n        if (next !== val) {\n          view.dispatch(\n            view.state.update({\n              changes: { from: 0, to: currentLength, insert: next },\n              selection: { anchor: Math.min(cursorPos, next.length) },\n            }),\n          );\n        }\n\n        onChange?.(next);\n        onSave?.(next);\n        onFormatError?.(null);\n      } catch (e) {\n        onFormatError?.(e instanceof Error ? e.message : String(e));\n      }\n    },\n    [formatCode, onChange, onSave, onFormatError],\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 's') {\n        e.preventDefault();\n        save(editorRef.current?.view?.state.doc.toString() ?? value);\n      }\n    },\n    [save, value],\n  );\n\n  return (\n    <div\n      data-slot=\"code-editor\"\n      className={cn(\n        className,\n        // ...\n      )}\n      onKeyDown={onKeyDown}\n    >\n      <CodeMirror\n        ref={editorRef}\n        theme={resolvedTheme}\n        height={height || '100%'}\n        value={value}\n        extensions={extensions}\n        onChange={onChange}\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AA4EA,MAAM,cAAc,EAClB,OACA,QAAQ,QACR,QACA,WACA,YAAY,iBACZ,MACA,YACA,UACA,QACA,eACA,GAAG,YACQ;CACX,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,eAAe,gBAAgB;CAErC,MAAM,gBAAgB,cAAc;EAClC,IAAI,UAAU,QACZ,OAAO,eAAe,aAAa;EAErC,IAAI,UAAU,SACZ,OAAO;EAET,IAAI,UAAU,QACZ,OAAO;EAKT,OAAO;CACT,GAAG,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,aAAa,cAAc;EAC/B,MAAM,OAAoB,CACxB,WAAW;GAAE,KAAK;GAAM,YAAY;EAAK,CAAC,GAC1C,WAAW,YACb;EAEA,IAAI,MACF,KAAK,KACH,iBAAiB;GACf,UAAU,KAAK;GACf,eAAe,KAAK,iBAAiB;EACvC,CAAC,CACH;EAGF,OAAO,CAAC,GAAG,MAAM,GAAI,mBAAmB,CAAC,CAAE;CAC7C,GAAG,CAAC,MAAM,eAAe,CAAC;CAE1B,MAAM,OAAO,YACX,OAAO,QAAgB;EACrB,MAAM,OAAO,UAAU,SAAS;EAChC,IAAI,CAAC,MACH;EAGF,IAAI;GACF,MAAM,gBAAgB,KAAK,MAAM,IAAI;GACrC,MAAM,YAAY,KAAK,MAAM,UAAU,KAAK;GAC5C,MAAM,OAAO,aAAa,MAAM,WAAW,GAAG,IAAI;GAIlD,IAAI,kBAAkB,KAAK,MAAM,IAAI,QAAQ;IAC3C,gBAAgB,IAAI;IACpB;GACF;GAMA,IAAI,SAAS,KACX,KAAK,SACH,KAAK,MAAM,OAAO;IAChB,SAAS;KAAE,MAAM;KAAG,IAAI;KAAe,QAAQ;IAAK;IACpD,WAAW,EAAE,QAAQ,KAAK,IAAI,WAAW,KAAK,MAAM,EAAE;GACxD,CAAC,CACH;GAGF,WAAW,IAAI;GACf,SAAS,IAAI;GACb,gBAAgB,IAAI;EACtB,SAAS,GAAG;GACV,gBAAgB,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC,CAAC;EAC5D;CACF,GACA;EAAC;EAAY;EAAU;EAAQ;CAAa,CAC9C;CAEA,MAAM,YAAY,aACf,MAA2C;EAC1C,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,KAAK;GAC7C,EAAE,eAAe;GACjB,KAAK,UAAU,SAAS,MAAM,MAAM,IAAI,SAAS,KAAK,KAAK;EAC7D;CACF,GACA,CAAC,MAAM,KAAK,CACd;CAEA,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,SAEF;EACW;EAEX,UAAA,oBAAC,YAAD;GACE,KAAK;GACL,OAAO;GACP,QAAQ,UAAU;GACX;GACK;GACF;GACV,GAAI;EACL,CAAA;CACE,CAAA;AAET"}

package/dist/Tag.d.mts

@@ -1,4 +1,4 @@
-import { PresetColor } from "./lib/colors.mjs";
+import { DeprecatedPresetColor, PresetColor } from "./lib/colors.mjs";
 import * as React$1 from "react";
 //#region src/components/atoms/tag.d.ts
 type NativeSpanProps = React$1.ComponentProps<'span'> & {
@@ -14,13 +14,18 @@ interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {
   /**
    * 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
+   * `amber`, …) — 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.
+   *
+   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings
+   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but
+   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no
+   * successor; it is `orange` one lightness step darker).
    */
-  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor | DeprecatedPresetColor;
 }
 declare const Tag: ({ className, variant, color, asChild, children, ...props }: Props) => React$1.JSX.Element;
 //#endregion

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;;;;;;EAMlC;;;;;;;;;;EAUA,mEAC6D;;cA+BzD,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;;;;;;;;;;;;;;;EAeA,mEAMI,cACA;;cA+BA,QAAO,WAAA,SAAA,OAAA,SAAA,aAAA,SAOV,UAAK,QAAA,IAAA"}

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 } 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"}
+{"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 DeprecatedPresetColor, 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   * `amber`, …) — 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   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings\n   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but\n   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no\n   * successor; it is `orange` one lightness step darker).\n   */\n  color?:\n    | 'default'\n    | 'primary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | PresetColor\n    | DeprecatedPresetColor;\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":";;;;;;;;AAsDA,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"}