reactjs-tiptap-editor/lib/select-CmV5uTXr.js

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

import { jsxs as h, jsx as e } from "react/jsx-runtime";
import * as o from "react";
import * as t from "@radix-ui/react-select";
import { ChevronDown as x, ChevronUp as m, Check as p } from "lucide-react";
import { c as a } from "./index-RcSPeQHn.js";
const v = t.Root, R = t.Value, f = o.forwardRef(({ className: i, children: c, ...r }, s) => /* @__PURE__ */ h(
  t.Trigger,
  {
    ref: s,
    className: a(
      "richtext-flex richtext-h-10 richtext-w-full richtext-items-center richtext-justify-between richtext-rounded-md richtext-border richtext-border-input richtext-bg-background richtext-px-3 richtext-py-2 richtext-text-sm richtext-ring-offset-background placeholder:richtext-text-muted-foreground focus:richtext-outline-none focus:richtext-ring-2 focus:richtext-ring-ring focus:richtext-ring-offset-1 disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50 [&>span]:richtext-line-clamp-1 richtext-text-foreground",
      i
    ),
    ...r,
    children: [
      c,
      /* @__PURE__ */ e(t.Icon, { asChild: !0, children: /* @__PURE__ */ e(x, { className: "richtext-size-4 richtext-opacity-50" }) })
    ]
  }
));
f.displayName = t.Trigger.displayName;
const l = o.forwardRef(({ className: i, ...c }, r) => /* @__PURE__ */ e(
  t.ScrollUpButton,
  {
    ref: r,
    className: a(
      "richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1",
      i
    ),
    ...c,
    children: /* @__PURE__ */ e(m, { className: "richtext-size-4" })
  }
));
l.displayName = t.ScrollUpButton.displayName;
const d = o.forwardRef(({ className: i, ...c }, r) => /* @__PURE__ */ e(
  t.ScrollDownButton,
  {
    ref: r,
    className: a(
      "richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1",
      i
    ),
    ...c,
    children: /* @__PURE__ */ e(x, { className: "richtext-size-4" })
  }
));
d.displayName = t.ScrollDownButton.displayName;
const u = o.forwardRef(({ className: i, children: c, position: r = "popper", ...s }, n) => /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ h(
  t.Content,
  {
    "data-richtext-portal": !0,
    position: r,
    ref: n,
    className: a(
      "richtext-relative richtext-z-50 richtext-max-h-60 richtext-overflow-y-auto richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md richtext-border !richtext-border-border richtext-bg-popover richtext-text-popover-foreground richtext-shadow-md data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2",
      r === "popper" && "data-[side=bottom]:richtext-translate-y-1 data-[side=left]:richtext--translate-x-1 data-[side=right]:richtext-translate-x-1 data-[side=top]:richtext--translate-y-1",
      i
    ),
    ...s,
    children: [
      /* @__PURE__ */ e(l, {}),
      /* @__PURE__ */ e(
        t.Viewport,
        {
          className: a(
            "richtext-p-1",
            r === "popper" && "richtext-h-[var(--radix-select-trigger-height)] richtext-w-full richtext-min-w-[var(--radix-select-trigger-width)]"
          ),
          children: c
        }
      ),
      /* @__PURE__ */ e(d, {})
    ]
  }
) }));
u.displayName = t.Content.displayName;
const y = o.forwardRef(({ className: i, ...c }, r) => /* @__PURE__ */ e(
  t.Label,
  {
    className: a("richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-font-semibold", i),
    ref: r,
    ...c
  }
));
y.displayName = t.Label.displayName;
const g = o.forwardRef(({ className: i, children: c, ...r }, s) => /* @__PURE__ */ h(
  t.Item,
  {
    ref: s,
    className: a(
      "richtext-relative richtext-flex richtext-w-full richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-outline-none focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50",
      i
    ),
    ...r,
    children: [
      /* @__PURE__ */ e("span", { className: "richtext-absolute richtext-left-2 richtext-flex richtext-size-3.5 richtext-items-center richtext-justify-center", children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(p, { className: "richtext-size-4" }) }) }),
      /* @__PURE__ */ e(t.ItemText, { children: c })
    ]
  }
));
g.displayName = t.Item.displayName;
const N = o.forwardRef(({ className: i, ...c }, r) => /* @__PURE__ */ e(
  t.Separator,
  {
    className: a("richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted", i),
    ref: r,
    ...c
  }
));
N.displayName = t.Separator.displayName;
export {
  v as S,
  f as a,
  R as b,
  u as c,
  g as d
};