@giddaa-housing/ui 0.1.0

package/dist/rich-text-editor.js

@@ -0,0 +1,1000 @@
+// src/components/ui/rich-text-editor.tsx
+import { Color } from "@tiptap/extension-color";
+import { Image } from "@tiptap/extension-image";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline,
+  Bold,
+  ChevronDown,
+  Code2,
+  ImageIcon,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  Quote,
+  Redo2,
+  Underline,
+  Undo2
+} from "lucide-react";
+import * as React from "react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { Loader } from "lucide-react";
+
+// src/components/ui/size-context.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function SizeProvider({
+  children,
+  size
+}) {
+  if (!size) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
+}
+function useComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext(SizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
+        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
+        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
+        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
+        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
+        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
+        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
+        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
+        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
+        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
+        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
+      },
+      size: {
+        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
+        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
+        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
+        icon: "size-10",
+        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
+        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
+        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "primary",
+  size,
+  isLoading = false,
+  children,
+  disabled = false,
+  ...props
+}) {
+  const inheritedSize = useComponentSize();
+  const resolvedSize = size ?? inheritedSize;
+  const _disabled = disabled || isLoading;
+  return /* @__PURE__ */ jsxs(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
+      disabled: _disabled,
+      ...props,
+      children: [
+        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
+        " ",
+        children
+      ]
+    }
+  );
+}
+
+// src/components/ui/dropdown-menu.tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cva as cva2 } from "class-variance-authority";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DropdownMenu({
+  children,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(SizeProvider, { size, children: /* @__PURE__ */ jsx3(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props, children }) });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx3(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+var dropdownMenuContentVariants = cva2(
+  "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+  {
+    variants: {
+      size: {
+        sm: "rounded-lg p-1",
+        md: "rounded-xl p-1.5",
+        lg: "rounded-[18px] p-2"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dropdownMenuItemVariants = cva2(
+  "group/dropdown-menu-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none transition-colors select-none focus:bg-surface focus:text-fg-primary data-highlighted:bg-surface data-highlighted:text-fg-primary data-[variant=destructive]:text-fg-danger data-[variant=destructive]:focus:bg-surface-danger-subtle data-[variant=destructive]:focus:text-fg-danger data-[variant=destructive]:data-highlighted:bg-surface-danger-subtle data-[variant=destructive]:data-highlighted:text-fg-danger data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder data-disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:[&_svg]:text-fg-danger",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+        md: "gap-2 rounded-md px-4 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+        lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dropdownMenuLabelVariants = cva2(
+  "font-medium text-fg-secondary data-inset:pl-8",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-1 text-gdt-xs",
+        md: "px-3 py-1 text-gdt-xs",
+        lg: "px-4 py-1.5 text-gdt-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 6,
+  className,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsx3(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+    MenuPrimitive.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx3(
+        MenuPrimitive.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          "data-size": resolvedSize,
+          className: cn(
+            dropdownMenuContentVariants({ size: resolvedSize }),
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuRadioGroup({ ...props }) {
+  return /* @__PURE__ */ jsx3(
+    MenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsxs2(
+    MenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      "data-inset": inset,
+      "data-size": resolvedSize,
+      className: cn(
+        dropdownMenuItemVariants({ size: resolvedSize }),
+        "pr-10 data-inset:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: "pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand",
+            "data-slot": "dropdown-menu-radio-item-indicator",
+            children: /* @__PURE__ */ jsx3(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx3(CheckIcon, {}) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/ui/input.tsx
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cva as cva3 } from "class-variance-authority";
+
+// src/components/ui/input-size-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+var InputSizeContext = createContext2(
+  void 0
+);
+function useInputComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext2(InputSizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/input.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var inputVariants = cva3(
+  "flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
+        md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
+        lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
+        xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Input({ className, size, type, ...props }) {
+  const resolvedSize = useInputComponentSize(size);
+  return /* @__PURE__ */ jsx5(
+    InputPrimitive,
+    {
+      type,
+      "data-slot": "input",
+      "data-size": resolvedSize,
+      className: cn(inputVariants({ size: resolvedSize }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/popover.tsx
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx6(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx6(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 6,
+  showArrow = true,
+  size = "md",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+    PopoverPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs3(
+        PopoverPrimitive.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            "z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx6(SizeProvider, { size, children }),
+            showArrow ? /* @__PURE__ */ jsx6(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+// src/components/ui/rich-text-editor.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIZES = {
+  sm: {
+    width: "max-w-[420px]",
+    content: "min-h-[140px]",
+    contentPad: "px-4 py-3",
+    text: "text-gdt-xs",
+    icon: "[&_svg:not([class*='size-'])]:size-3.5",
+    button: "h-7 min-w-7 px-1",
+    toolbarPad: "px-2 py-1.5",
+    toolbarGap: "gap-0.5",
+    divider: "h-4"
+  },
+  md: {
+    width: "max-w-[520px]",
+    content: "min-h-[172px]",
+    contentPad: "px-5 py-4",
+    text: "text-gdt-sm",
+    icon: "[&_svg:not([class*='size-'])]:size-4",
+    button: "h-8 min-w-8 px-1.5",
+    toolbarPad: "px-2.5 py-2",
+    toolbarGap: "gap-0.5",
+    divider: "h-5"
+  },
+  lg: {
+    width: "max-w-[600px]",
+    content: "min-h-[206px]",
+    contentPad: "px-6 py-5",
+    text: "text-gdt-md",
+    icon: "[&_svg:not([class*='size-'])]:size-[18px]",
+    button: "h-9 min-w-9 px-2",
+    toolbarPad: "px-3 py-2.5",
+    toolbarGap: "gap-1",
+    divider: "h-6"
+  }
+};
+var TEXT_COLORS = [
+  { label: "Default", value: "" },
+  { label: "Forest", value: "#2f5a2c" },
+  { label: "Brass", value: "#b8861a" },
+  { label: "Clay", value: "#b2542b" },
+  { label: "Moss", value: "#4e4d29" },
+  { label: "Stone", value: "#5c5648" },
+  { label: "Ink", value: "#1f1c18" }
+];
+var BLOCK_OPTIONS = [
+  { value: "paragraph", label: "Normal" },
+  { value: "h1", label: "Heading 1" },
+  { value: "h2", label: "Heading 2" },
+  { value: "h3", label: "Heading 3" }
+];
+function toolbarControlClass(tokens, active) {
+  return cn(
+    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium text-fg-secondary outline-none transition-colors select-none",
+    "hover:bg-action-tertiary-hover hover:text-fg-primary",
+    "focus-visible:ring-2 focus-visible:ring-line-focus",
+    "disabled:pointer-events-none disabled:opacity-40 data-disabled:pointer-events-none data-disabled:opacity-40",
+    tokens.button,
+    tokens.icon,
+    tokens.text,
+    active && "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover hover:text-fg-on-brand"
+  );
+}
+function ToolbarButton({
+  tokens,
+  label,
+  active,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "aria-pressed": active,
+      disabled,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick,
+      className: toolbarControlClass(tokens, active),
+      children
+    }
+  );
+}
+function ToolbarDivider({ tokens }) {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn("mx-1 w-px shrink-0 self-center bg-line", tokens.divider)
+    }
+  );
+}
+function BlockControl({
+  tokens,
+  value,
+  disabled,
+  onChange
+}) {
+  const current = BLOCK_OPTIONS.find((option) => option.value === value);
+  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs4(
+      DropdownMenuTrigger,
+      {
+        disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        className: cn(
+          toolbarControlClass(tokens),
+          "w-auto justify-between gap-1 px-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx7("span", { className: "whitespace-nowrap", children: current?.label ?? "Normal" }),
+          /* @__PURE__ */ jsx7(ChevronDown, { className: "size-3.5 opacity-70" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7(DropdownMenuContent, { className: "min-w-40", children: /* @__PURE__ */ jsx7(
+      DropdownMenuRadioGroup,
+      {
+        value,
+        onValueChange: (next) => onChange(next),
+        children: BLOCK_OPTIONS.map((option) => /* @__PURE__ */ jsx7(DropdownMenuRadioItem, { value: option.value, children: option.label }, option.value))
+      }
+    ) })
+  ] });
+}
+function ColorControl({
+  tokens,
+  value,
+  disabled,
+  onChange
+}) {
+  const [open, setOpen] = React.useState(false);
+  const active = value !== "";
+  return /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx7(
+      PopoverTrigger,
+      {
+        disabled,
+        "aria-label": "Text colour",
+        title: "Text colour",
+        onMouseDown: (event) => event.preventDefault(),
+        className: toolbarControlClass(tokens, false),
+        children: /* @__PURE__ */ jsxs4("span", { className: "relative inline-flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx7(Baseline, { className: active ? "text-fg-brand" : void 0 }),
+          /* @__PURE__ */ jsx7(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "mt-px h-0.5 w-3 rounded-full",
+              style: { backgroundColor: active ? value : "currentColor" }
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      PopoverContent,
+      {
+        showArrow: false,
+        align: "start",
+        sideOffset: 8,
+        className: "w-auto py-3",
+        children: /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-4 gap-2 px-4", children: TEXT_COLORS.map((color) => {
+          const isSelected = color.value === value;
+          return /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              title: color.label,
+              "aria-label": color.label,
+              "aria-pressed": isSelected,
+              onClick: () => {
+                onChange(color.value);
+                setOpen(false);
+              },
+              className: cn(
+                "flex size-7 items-center justify-center rounded-full border transition-[box-shadow,border-color] outline-none",
+                "hover:border-line-strong focus-visible:ring-2 focus-visible:ring-line-focus",
+                isSelected ? "border-line-focus ring-2 ring-line-focus/40" : "border-line"
+              ),
+              children: /* @__PURE__ */ jsx7(
+                "span",
+                {
+                  className: cn(
+                    "flex size-5 items-center justify-center rounded-full text-gdt-xs font-bold",
+                    color.value === "" && "text-fg-secondary"
+                  ),
+                  style: color.value ? { backgroundColor: color.value, color: "#fff" } : void 0,
+                  children: "A"
+                }
+              )
+            },
+            color.label
+          );
+        }) })
+      }
+    )
+  ] });
+}
+function LinkControl({
+  tokens,
+  active,
+  currentHref,
+  disabled,
+  onApply,
+  onRemove
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [href, setHref] = React.useState("");
+  function handleOpenChange(next) {
+    if (next) setHref(currentHref);
+    setOpen(next);
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    const trimmed = href.trim();
+    if (trimmed) onApply(trimmed);
+    else onRemove();
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx7(
+      PopoverTrigger,
+      {
+        disabled,
+        "aria-label": "Insert link",
+        title: "Insert link",
+        "aria-pressed": active,
+        onMouseDown: (event) => event.preventDefault(),
+        className: toolbarControlClass(tokens, active),
+        children: /* @__PURE__ */ jsx7(Link2, {})
+      }
+    ),
+    /* @__PURE__ */ jsx7(PopoverContent, { showArrow: false, align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs4("form", { className: "flex flex-col gap-3 px-4", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx7(
+        Input,
+        {
+          autoFocus: true,
+          size: "sm",
+          type: "url",
+          placeholder: "https://example.com",
+          value: href,
+          onChange: (event) => setHref(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx7(
+          Button,
+          {
+            type: "button",
+            variant: "tertiary-outline",
+            size: "sm",
+            disabled: !active,
+            onClick: () => {
+              onRemove();
+              setOpen(false);
+            },
+            children: "Remove"
+          }
+        ),
+        /* @__PURE__ */ jsx7(Button, { type: "submit", size: "sm", children: "Apply" })
+      ] })
+    ] }) })
+  ] });
+}
+var ALIGN_OPTIONS = [
+  { value: "left", label: "Left", Icon: AlignLeft },
+  { value: "center", label: "Center", Icon: AlignCenter },
+  { value: "right", label: "Right", Icon: AlignRight },
+  { value: "justify", label: "Justify", Icon: AlignJustify }
+];
+function AlignControl({
+  tokens,
+  value,
+  disabled,
+  onChange
+}) {
+  const current = ALIGN_OPTIONS.find((option) => option.value === value);
+  const Icon = current?.Icon ?? AlignLeft;
+  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx7(
+      DropdownMenuTrigger,
+      {
+        disabled,
+        "aria-label": "Text alignment",
+        title: "Text alignment",
+        onMouseDown: (event) => event.preventDefault(),
+        className: toolbarControlClass(tokens, value !== "left"),
+        children: /* @__PURE__ */ jsx7(Icon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx7(DropdownMenuContent, { className: "min-w-36", children: /* @__PURE__ */ jsx7(
+      DropdownMenuRadioGroup,
+      {
+        value,
+        onValueChange: (next) => onChange(next),
+        children: ALIGN_OPTIONS.map(
+          ({ value: optionValue, label, Icon: OptionIcon }) => /* @__PURE__ */ jsxs4(DropdownMenuRadioItem, { value: optionValue, children: [
+            /* @__PURE__ */ jsx7(OptionIcon, {}),
+            label
+          ] }, optionValue)
+        )
+      }
+    ) })
+  ] });
+}
+var EMPTY_STATE = {
+  block: "paragraph",
+  align: "left",
+  color: "",
+  linkHref: "",
+  isBold: false,
+  isItalic: false,
+  isUnderline: false,
+  isBulletList: false,
+  isOrderedList: false,
+  isBlockquote: false,
+  isCodeBlock: false,
+  isLink: false,
+  canUndo: false,
+  canRedo: false
+};
+function RichTextEditor({
+  value,
+  defaultValue,
+  onChange,
+  size,
+  placeholder = "Start writing, or paste your content here. Format text and add lists, links, and images using the toolbar above.",
+  disabled = false,
+  className,
+  "aria-label": ariaLabel = "Rich text editor"
+}) {
+  const resolvedSize = useComponentSize(size);
+  const tokens = SIZES[resolvedSize];
+  const [focused, setFocused] = React.useState(false);
+  const editor = useEditor({
+    immediatelyRender: false,
+    editable: !disabled,
+    content: value ?? defaultValue ?? "",
+    extensions: [
+      StarterKit.configure({
+        link: {
+          openOnClick: false,
+          HTMLAttributes: { rel: "noopener noreferrer nofollow" }
+        }
+      }),
+      TextStyle,
+      Color,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      Image.configure({ inline: false, allowBase64: true }),
+      Placeholder.configure({ placeholder })
+    ],
+    editorProps: {
+      attributes: {
+        "aria-label": ariaLabel,
+        role: "textbox",
+        "aria-multiline": "true",
+        class: cn("tiptap focus:outline-none", tokens.text)
+      }
+    },
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    onUpdate: ({ editor: instance }) => onChange?.(instance.getHTML())
+  });
+  React.useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+  React.useEffect(() => {
+    if (!editor || value === void 0) return;
+    if (value !== editor.getHTML()) {
+      editor.commands.setContent(value, { emitUpdate: false });
+    }
+  }, [editor, value]);
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: instance }) => {
+      if (!instance) return EMPTY_STATE;
+      const block = instance.isActive("heading", { level: 1 }) ? "h1" : instance.isActive("heading", { level: 2 }) ? "h2" : instance.isActive("heading", { level: 3 }) ? "h3" : "paragraph";
+      const align = instance.isActive({ textAlign: "center" }) ? "center" : instance.isActive({ textAlign: "right" }) ? "right" : instance.isActive({ textAlign: "justify" }) ? "justify" : "left";
+      return {
+        block,
+        align,
+        color: instance.getAttributes("textStyle").color ?? "",
+        linkHref: instance.getAttributes("link").href ?? "",
+        isBold: instance.isActive("bold"),
+        isItalic: instance.isActive("italic"),
+        isUnderline: instance.isActive("underline"),
+        isBulletList: instance.isActive("bulletList"),
+        isOrderedList: instance.isActive("orderedList"),
+        isBlockquote: instance.isActive("blockquote"),
+        isCodeBlock: instance.isActive("codeBlock"),
+        isLink: instance.isActive("link"),
+        canUndo: instance.can().undo(),
+        canRedo: instance.can().redo()
+      };
+    }
+  });
+  const s = state ?? EMPTY_STATE;
+  function setBlock(next) {
+    if (!editor) return;
+    const chain = editor.chain().focus();
+    if (next === "paragraph") chain.setParagraph().run();
+    else chain.toggleHeading({ level: Number(next[1]) }).run();
+  }
+  function setAlign(next) {
+    editor?.chain().focus().setTextAlign(next).run();
+  }
+  function setColor(next) {
+    if (!editor) return;
+    if (next) editor.chain().focus().setColor(next).run();
+    else editor.chain().focus().unsetColor().run();
+  }
+  function applyLink(href) {
+    editor?.chain().focus().extendMarkRange("link").setLink({ href }).run();
+  }
+  function removeLink() {
+    editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+  }
+  function insertImage() {
+    const url = window.prompt("Image URL");
+    if (url) editor?.chain().focus().setImage({ src: url }).run();
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-slot": "rich-text-editor",
+      "data-disabled": disabled || void 0,
+      "data-focused": focused || void 0,
+      className: cn(
+        "group/editor flex w-full flex-col overflow-hidden rounded-2xl border bg-surface text-fg-primary shadow-1 transition-[border-color,box-shadow]",
+        disabled ? "border-line-subtle opacity-60" : focused ? "border-line-focus ring-2 ring-line-focus/35" : "border-line hover:border-line-strong",
+        tokens.width,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            role: "toolbar",
+            "aria-label": "Formatting",
+            "aria-orientation": "horizontal",
+            className: cn(
+              "flex flex-wrap items-center bg-surface-raised",
+              tokens.toolbarPad,
+              tokens.toolbarGap
+            ),
+            children: [
+              /* @__PURE__ */ jsx7(
+                BlockControl,
+                {
+                  tokens,
+                  value: s.block,
+                  disabled,
+                  onChange: setBlock
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Bold",
+                  active: s.isBold,
+                  disabled,
+                  onClick: () => editor?.chain().focus().toggleBold().run(),
+                  children: /* @__PURE__ */ jsx7(Bold, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Italic",
+                  active: s.isItalic,
+                  disabled,
+                  onClick: () => editor?.chain().focus().toggleItalic().run(),
+                  children: /* @__PURE__ */ jsx7(Italic, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Underline",
+                  active: s.isUnderline,
+                  disabled,
+                  onClick: () => editor?.chain().focus().toggleUnderline().run(),
+                  children: /* @__PURE__ */ jsx7(Underline, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ColorControl,
+                {
+                  tokens,
+                  value: s.color,
+                  disabled,
+                  onChange: setColor
+                }
+              ),
+              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Numbered list",
+                  active: s.isOrderedList,
+                  disabled,
+                  onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+                  children: /* @__PURE__ */ jsx7(ListOrdered, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Bullet list",
+                  active: s.isBulletList,
+                  disabled,
+                  onClick: () => editor?.chain().focus().toggleBulletList().run(),
+                  children: /* @__PURE__ */ jsx7(List, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                AlignControl,
+                {
+                  tokens,
+                  value: s.align,
+                  disabled,
+                  onChange: setAlign
+                }
+              ),
+              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
+              /* @__PURE__ */ jsx7(
+                LinkControl,
+                {
+                  tokens,
+                  active: s.isLink,
+                  currentHref: s.linkHref,
+                  disabled,
+                  onApply: applyLink,
+                  onRemove: removeLink
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Quote",
+                  active: s.isBlockquote,
+                  disabled,
+                  onClick: () => editor?.chain().focus().toggleBlockquote().run(),
+                  children: /* @__PURE__ */ jsx7(Quote, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Code block",
+                  active: s.isCodeBlock,
+                  disabled,
+                  onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
+                  children: /* @__PURE__ */ jsx7(Code2, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Insert image",
+                  disabled,
+                  onClick: insertImage,
+                  children: /* @__PURE__ */ jsx7(ImageIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Undo",
+                  disabled: disabled || !s.canUndo,
+                  onClick: () => editor?.chain().focus().undo().run(),
+                  children: /* @__PURE__ */ jsx7(Undo2, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ToolbarButton,
+                {
+                  tokens,
+                  label: "Redo",
+                  disabled: disabled || !s.canRedo,
+                  onClick: () => editor?.chain().focus().redo().run(),
+                  children: /* @__PURE__ */ jsx7(Redo2, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7("div", { className: "h-px w-full shrink-0 bg-line-subtle" }),
+        /* @__PURE__ */ jsx7(
+          EditorContent,
+          {
+            editor,
+            className: cn(
+              "gdt-rich-text min-w-0 flex-1 overflow-y-auto",
+              tokens.content,
+              tokens.contentPad
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  RichTextEditor
+};
+//# sourceMappingURL=rich-text-editor.js.map