@haklex/rich-editor-ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,743 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ChevronDown, Check, X } from "lucide-react";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { createContext, useMemo, use, useState, useEffect, useSyncExternalStore, useCallback, createElement, useRef } from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+import { Menu } from "@base-ui/react/menu";
+import { Tooltip } from "@base-ui/react/tooltip";
+const PortalThemeContext = createContext({
+  className: ""
+});
+function PortalThemeProvider({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    PortalThemeContext.Provider,
+    {
+      value: useMemo(() => ({ className }), [className]),
+      children
+    }
+  );
+}
+function usePortalTheme() {
+  return use(PortalThemeContext);
+}
+function PortalThemeWrapper({ children }) {
+  const { className } = usePortalTheme();
+  if (!className) return children;
+  return /* @__PURE__ */ jsx("div", { style: { display: "contents" }, className, children });
+}
+function getStrictContext(name) {
+  const Context = createContext(void 0);
+  const Provider = ({
+    value,
+    children
+  }) => /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  const useSafeContext = () => {
+    const ctx = use(Context);
+    if (ctx === void 0) {
+      throw new Error(`useContext must be used within ${name}`);
+    }
+    return ctx;
+  };
+  return [Provider, useSafeContext];
+}
+var popup$3 = "f2q44l2";
+var arrow = "f2q44l3";
+var title$1 = "f2q44l4";
+var description$1 = "f2q44l5";
+const [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
+function Popover(props) {
+  const [isOpen, setIsOpen] = useState(props?.defaultOpen ?? false);
+  useEffect(() => {
+    if (props.open !== void 0) setIsOpen(props.open);
+  }, [props.open]);
+  const handleOpenChange = (open, details) => {
+    setIsOpen(open);
+    props.onOpenChange?.(open, details);
+  };
+  return /* @__PURE__ */ jsx(PopoverProvider, { value: { isOpen }, children: /* @__PURE__ */ jsx(Popover$1.Root, { ...props, onOpenChange: handleOpenChange }) });
+}
+function PopoverTrigger(props) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props });
+}
+function PopoverPortal({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
+}
+function PopoverPositioner(props) {
+  return /* @__PURE__ */ jsx(Popover$1.Positioner, { ...props });
+}
+function PopoverPopup({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Popup,
+    {
+      className: `${popup$3}${className ? ` ${className}` : ""}`,
+      ...props,
+      children
+    }
+  );
+}
+function PopoverPanel({
+  align = "center",
+  side,
+  sideOffset = 4,
+  className,
+  children,
+  ...popupProps
+}) {
+  return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, { align, side, sideOffset, children: /* @__PURE__ */ jsx(PopoverPopup, { className, ...popupProps, children }) }) });
+}
+function PopoverArrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Arrow,
+    {
+      className: `${arrow}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function PopoverClose(props) {
+  return /* @__PURE__ */ jsx(Popover$1.Close, { ...props });
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Title,
+    {
+      className: `${title$1}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function PopoverDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Description,
+    {
+      className: `${description$1}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+var trigger = "_17r50hf1";
+var triggerLabel = "_17r50hf2";
+var triggerLetter = "_17r50hf3";
+var triggerBar = "_17r50hf4";
+var triggerChevron = "_17r50hf5";
+var panel = "_17r50hf6";
+var grid = "_17r50hf7";
+var swatch = "_17r50hf8";
+var swatchDot = "_17r50hf9";
+var swatchCheck = "_17r50hfa";
+const TEXT_COLORS = [
+  { name: "Default", value: "inherit" },
+  { name: "Gray", value: "#6b7280" },
+  { name: "Red", value: "#ef4444" },
+  { name: "Orange", value: "#f97316" },
+  { name: "Amber", value: "#f59e0b" },
+  { name: "Green", value: "#22c55e" },
+  { name: "Teal", value: "#14b8a6" },
+  { name: "Blue", value: "#3b82f6" },
+  { name: "Indigo", value: "#6366f1" },
+  { name: "Pink", value: "#ec4899" }
+];
+function ColorPicker({
+  currentColor,
+  onSelect,
+  className
+}) {
+  const displayColor = currentColor === "inherit" || !currentColor ? "currentColor" : currentColor;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        className: `${trigger}${className ? ` ${className}` : ""}`,
+        render: /* @__PURE__ */ jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault() }),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: triggerLabel, children: [
+            /* @__PURE__ */ jsx("span", { className: triggerLetter, style: { color: displayColor }, children: "A" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: triggerBar,
+                style: { backgroundColor: displayColor }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverPanel, { side: "bottom", sideOffset: 6, className: panel, children: /* @__PURE__ */ jsx("div", { className: grid, children: TEXT_COLORS.map((color) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: swatch,
+        "aria-label": color.name,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          onSelect(color.value);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: swatchDot,
+              style: {
+                backgroundColor: color.value === "inherit" ? "currentColor" : color.value
+              }
+            }
+          ),
+          currentColor === color.value && /* @__PURE__ */ jsx(Check, { className: swatchCheck })
+        ]
+      },
+      color.value
+    )) }) })
+  ] });
+}
+var backdrop = "vwlngv4";
+var popup$2 = "vwlngv5";
+var closeButton = "vwlngv6";
+var header = "vwlngv7";
+var footer = "vwlngv8";
+var title = "vwlngv9";
+var description = "vwlngva";
+function Dialog(props) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
+}
+function DialogTrigger(props) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props });
+}
+function DialogPortal({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
+}
+function DialogBackdrop({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Backdrop,
+    {
+      className: `${backdrop}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function DialogPopup({
+  showCloseButton = true,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogBackdrop, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Popup,
+      {
+        className: `${popup$2}${className ? ` ${className}` : ""}`,
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { className: closeButton, children: /* @__PURE__ */ jsx(X, {}) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogClose(props) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { ...props });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${header}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${footer}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      className: `${title}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      className: `${description}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+let stack = [];
+let idCounter = 0;
+const listeners = /* @__PURE__ */ new Set();
+function emit() {
+  for (const fn of listeners) fn();
+}
+function subscribe(fn) {
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+}
+function getSnapshot() {
+  return stack;
+}
+function presentDialog(props) {
+  const id = `dialog-${++idCounter}`;
+  stack = [...stack, { ...props, id, open: true }];
+  emit();
+  return () => dismissDialog(id);
+}
+function removeDialog(id) {
+  stack = stack.filter((item2) => item2.id !== id);
+  emit();
+}
+function dismissDialog(id) {
+  stack = stack.map(
+    (item2) => item2.id === id ? { ...item2, open: false } : item2
+  );
+  emit();
+}
+function dismissTopDialog() {
+  for (let i = stack.length - 1; i >= 0; i--) {
+    if (stack[i].open) {
+      dismissDialog(stack[i].id);
+      return;
+    }
+  }
+}
+function dismissAllDialogs() {
+  stack = stack.map((item2) => ({ ...item2, open: false }));
+  emit();
+}
+const CloseIcon = () => /* @__PURE__ */ jsx(X, {});
+const PortalWrapper = ({
+  className,
+  children
+}) => {
+  if (!className) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+const DialogStackEntry = ({ item: item2, index }) => {
+  const {
+    id,
+    open,
+    title: title$12,
+    description: description$12,
+    content,
+    className,
+    portalClassName,
+    showCloseButton = true,
+    clickOutsideToDismiss = true
+  } = item2;
+  const dismiss = useCallback(() => dismissDialog(id), [id]);
+  useEffect(() => {
+    if (!open) {
+      const timer = setTimeout(() => {
+        removeDialog(id);
+      }, 150);
+      return () => clearTimeout(timer);
+    }
+  }, [open, id]);
+  const zIndex = 50 + index;
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Root,
+    {
+      open,
+      disablePointerDismissal: !clickOutsideToDismiss,
+      onOpenChange: (open2) => {
+        if (!open2) dismiss();
+      },
+      children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeProvider, { className: portalClassName ?? "", children: /* @__PURE__ */ jsxs(PortalWrapper, { className: portalClassName, children: [
+        /* @__PURE__ */ jsx(
+          Dialog$1.Backdrop,
+          {
+            className: backdrop,
+            style: { zIndex }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Dialog$1.Popup,
+          {
+            className: `${popup$2}${className ? ` ${className}` : ""}`,
+            style: { zIndex: zIndex + 1 },
+            children: [
+              (title$12 || description$12) && /* @__PURE__ */ jsxs("div", { className: header, children: [
+                title$12 && /* @__PURE__ */ jsx(Dialog$1.Title, { className: title, children: title$12 }),
+                description$12 && /* @__PURE__ */ jsx(Dialog$1.Description, { className: description, children: description$12 })
+              ] }),
+              createElement(content, { dismiss }),
+              showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { className: closeButton, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+            ]
+          }
+        )
+      ] }) }) })
+    }
+  );
+};
+const DialogStackProvider = ({ children }) => {
+  const stack2 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    stack2.map((item2, index) => /* @__PURE__ */ jsx(DialogStackEntry, { item: item2, index }, item2.id))
+  ] });
+};
+var popup$1 = "oih0op0";
+var item$1 = "oih0op1";
+var separator = "oih0op2";
+var label = "oih0op3";
+var checkboxIndicator = "oih0op4";
+var radioIndicator = "oih0op5";
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ jsx(Menu.Trigger, { ...props });
+}
+function DropdownMenuPortal({ children }) {
+  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  children,
+  ...popupProps
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        Menu.Popup,
+        {
+          className: `${popup$1}${className ? ` ${className}` : ""}`,
+          ...popupProps,
+          children
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup(props) {
+  return /* @__PURE__ */ jsx(Menu.Group, { ...props });
+}
+function DropdownMenuLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.GroupLabel,
+    {
+      className: `${label}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      className: `${item$1}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Separator,
+    {
+      className: `${separator}${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioGroup(props) {
+  return /* @__PURE__ */ jsx(Menu.RadioGroup, { ...props });
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu.RadioItem,
+    {
+      className: `${item$1}${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { className: radioIndicator, children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu.CheckboxItem,
+    {
+      className: `${item$1}${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { className: checkboxIndicator, children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        children
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(Check, { size: 16 });
+}
+var container = "_6d8tz20";
+var containerFullWidth = "_6d8tz21";
+var sizeVariants = { sm: "_6d8tz22", md: "_6d8tz23" };
+var indicator = "_6d8tz24";
+var indicatorHidden = "_6d8tz25";
+var item = "_6d8tz26";
+var itemActive = "_6d8tz27";
+var itemDisabled = "_6d8tz28";
+var itemFullWidth = "_6d8tz29";
+var itemPaddingVariants = { sm: "_6d8tz2a", md: "_6d8tz2b" };
+function SegmentedControl({
+  items,
+  value,
+  onChange,
+  size = "sm",
+  fullWidth = false,
+  className
+}) {
+  const containerRef = useRef(null);
+  const itemElementsRef = useRef(/* @__PURE__ */ new Map());
+  const [indicator$1, setIndicator] = useState({ left: 0, width: 0 });
+  const [isReady, setIsReady] = useState(false);
+  const updateIndicator = useCallback(() => {
+    const container2 = containerRef.current;
+    const activeEl = itemElementsRef.current.get(value);
+    if (!container2 || !activeEl) return;
+    const containerRect = container2.getBoundingClientRect();
+    const activeRect = activeEl.getBoundingClientRect();
+    setIndicator({
+      left: activeRect.left - containerRect.left,
+      width: activeRect.width
+    });
+    setIsReady(true);
+  }, [value]);
+  useEffect(() => {
+    updateIndicator();
+  }, [updateIndicator]);
+  useEffect(() => {
+    const container2 = containerRef.current;
+    if (!container2) return;
+    const observer = new ResizeObserver(() => {
+      updateIndicator();
+    });
+    observer.observe(container2);
+    return () => observer.disconnect();
+  }, [updateIndicator]);
+  const handleKeyDown = (e) => {
+    const enabledItems = items.filter((item2) => !item2.disabled);
+    const currentIndex = enabledItems.findIndex((item2) => item2.value === value);
+    let nextIndex = currentIndex;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        e.preventDefault();
+        nextIndex = (currentIndex + 1) % enabledItems.length;
+        break;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        e.preventDefault();
+        nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        nextIndex = 0;
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        nextIndex = enabledItems.length - 1;
+        break;
+      }
+    }
+    if (nextIndex !== currentIndex) {
+      const nextItem = enabledItems[nextIndex];
+      onChange(nextItem.value);
+      itemElementsRef.current.get(nextItem.value)?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      onKeyDown: handleKeyDown,
+      className: `${container} ${sizeVariants[size]} ${fullWidth ? containerFullWidth : ""} ${className || ""}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${indicator} ${!isReady ? indicatorHidden : ""}`.trim(),
+            style: {
+              left: indicator$1.left,
+              width: indicator$1.width
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        items.map((item$12) => {
+          const isActive = item$12.value === value;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                if (el) itemElementsRef.current.set(item$12.value, el);
+                else itemElementsRef.current.delete(item$12.value);
+              },
+              role: "tab",
+              type: "button",
+              "aria-selected": isActive,
+              "data-active": isActive || void 0,
+              tabIndex: isActive ? 0 : -1,
+              disabled: item$12.disabled,
+              onClick: () => onChange(item$12.value),
+              className: `${item} ${itemPaddingVariants[size]} ${isActive ? itemActive : ""} ${item$12.disabled ? itemDisabled : ""} ${fullWidth ? itemFullWidth : ""}`.trim(),
+              children: item$12.label
+            },
+            item$12.value
+          );
+        })
+      ]
+    }
+  );
+}
+var popup = "_1cspf2m2";
+function TooltipProvider(props) {
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
+}
+function TooltipRoot(props) {
+  return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+}
+function TooltipTrigger(props) {
+  return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
+}
+function TooltipPortal({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
+}
+function TooltipPositioner(props) {
+  return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
+}
+function TooltipPopup({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip.Popup,
+    {
+      className: `${popup}${className ? ` ${className}` : ""}`,
+      ...props,
+      children
+    }
+  );
+}
+function TooltipContent({
+  side = "top",
+  sideOffset = 6,
+  align = "center",
+  className,
+  children,
+  ...popupProps
+}) {
+  return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { side, sideOffset, align, children: /* @__PURE__ */ jsx(TooltipPopup, { className, ...popupProps, children }) }) });
+}
+export {
+  ColorPicker,
+  Dialog,
+  DialogBackdrop,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPopup,
+  DialogPortal,
+  DialogStackProvider,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Popover,
+  PopoverArrow,
+  PopoverClose,
+  PopoverDescription,
+  PopoverPanel,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTitle,
+  PopoverTrigger,
+  PortalThemeProvider,
+  PortalThemeWrapper,
+  SegmentedControl,
+  TooltipContent,
+  TooltipPopup,
+  TooltipPortal,
+  TooltipPositioner,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  dismissAllDialogs,
+  dismissDialog,
+  dismissTopDialog,
+  presentDialog,
+  usePopover,
+  usePortalTheme
+};