@xjur-ui/react 1.0.3 → 1.0.6

package/dist/components/rich-editor.js

@@ -0,0 +1,723 @@
+// src/components/rich-editor.tsx
+import { cx as cx7 } from "@xjur-ui/util";
+import { useCallback, useMemo, useState as useState2 } from "react";
+import {
+  EditorContent,
+  EditorContext,
+  useCurrentEditor as useRichTextEditor,
+  useEditorState as useRichTextEditorState,
+  useEditor
+} from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Heading } from "@tiptap/extension-heading";
+import { Placeholder } from "@tiptap/extensions";
+
+// src/hooks/use-os.ts
+import { useState, useEffect } from "react";
+function useOS() {
+  const [os, setOs] = useState("unknown");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const userAgent = window.navigator.userAgent;
+    if (/iPad|iPhone|iPod/.test(userAgent)) {
+      setOs("ios");
+    } else if (/Mac/.test(userAgent)) {
+      setOs("macos");
+    } else if (/Win/.test(userAgent)) {
+      setOs("windows");
+    } else if (/Android/.test(userAgent)) {
+      setOs("android");
+    } else if (/Linux/.test(userAgent)) {
+      setOs("linux");
+    } else {
+      setOs("unknown");
+    }
+  }, []);
+  return {
+    os,
+    shortcut: ["macos", "ios"].includes(os) ? "\u2318" : "Ctrl"
+  };
+}
+
+// src/components/icon.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Icon({ className, filled = false, name, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: cx(
+        "material-symbols-outlined",
+        "text-size-body-lg",
+        className
+      ),
+      style: {
+        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
+        ...props.style
+      },
+      children: name
+    }
+  );
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva, cx as cx2 } from "@xjur-ui/util";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  [
+    "outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"
+  ],
+  {
+    variants: {
+      size: {
+        md: "py-small_1x-alt px-medium text-size-body-md",
+        sm: "py-small-1x px-small text-size-label-sm",
+        icon_md: "p-small text-size-body-md h-large-4x w-large-4x",
+        icon_sm: "p-small-1x text-size-label-sm h-large-2x w-large-2x"
+      },
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        destructive: "",
+        outlined: "bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"
+      },
+      appearance: {
+        solid: "",
+        ghost: "bg-transparent"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        appearance: "solid",
+        class: "bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"
+      },
+      {
+        variant: "primary",
+        appearance: "ghost",
+        class: "text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"
+      },
+      {
+        variant: "secondary",
+        appearance: "solid",
+        class: "bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"
+      },
+      {
+        variant: "secondary",
+        appearance: "ghost",
+        class: "hover:bg-layer-1-hover active:bg-layer-1-pressed"
+      },
+      {
+        variant: "tertiary",
+        appearance: "solid",
+        class: "bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"
+      },
+      {
+        variant: "tertiary",
+        appearance: "ghost",
+        class: "hover:bg-layer-2-hover active:bg-layer-2-pressed"
+      },
+      {
+        variant: "destructive",
+        appearance: "solid",
+        class: "bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"
+      },
+      {
+        variant: "destructive",
+        appearance: "ghost",
+        class: "text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "primary",
+      appearance: "solid"
+    }
+  }
+);
+function Button({
+  asChild,
+  className,
+  variant = "primary",
+  size = "md",
+  appearance = "solid",
+  ...props
+}) {
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Component,
+    {
+      className: cx2(buttonVariants({ variant, appearance, size }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/dropdown-menu.tsx
+import "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cx as cx5 } from "@xjur-ui/util";
+
+// src/components/list.tsx
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { cx as cx3, cva as cva3 } from "@xjur-ui/util";
+
+// src/components/typography.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva2 } from "@xjur-ui/util";
+import { memo } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var typographyVariants = cva2("", {
+  variants: {
+    variant: {
+      body: "",
+      label: "",
+      title: "",
+      headline: ""
+    },
+    size: {
+      "sm-2x": "",
+      "sm-1x": "",
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    weight: {
+      thin: "font-thin",
+      extraLight: "font-extralight",
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extraBold: "font-extrabold",
+      black: "font-black"
+    }
+  },
+  compoundVariants: [
+    { variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
+    { variant: "body", size: "sm", class: "text-size-body-sm" },
+    { variant: "body", size: "md", class: "text-size-body-md" },
+    { variant: "body", size: "lg", class: "text-size-body-lg" },
+    { variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
+    { variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
+    { variant: "label", size: "sm", class: "text-size-label-sm" },
+    { variant: "label", size: "md", class: "text-size-label-md" },
+    { variant: "label", size: "lg", class: "text-size-label-lg" },
+    { variant: "title", size: "sm", class: "text-size-title-sm" },
+    { variant: "title", size: "md", class: "text-size-title-md" },
+    { variant: "title", size: "lg", class: "text-size-title-lg" },
+    { variant: "headline", size: "sm", class: "text-size-headline-sm" },
+    { variant: "headline", size: "md", class: "text-size-headline-md" },
+    { variant: "headline", size: "lg", class: "text-size-headline-lg" }
+  ],
+  defaultVariants: {
+    variant: "body",
+    size: "md",
+    weight: "normal"
+  }
+});
+var Typography = memo(
+  ({
+    variant,
+    size,
+    weight,
+    asChild,
+    className,
+    ...props
+  }) => {
+    const Component = asChild ? Slot2 : "span";
+    return /* @__PURE__ */ jsx3(
+      Component,
+      {
+        className: typographyVariants({ variant, size, weight, className }),
+        ...props
+      }
+    );
+  }
+);
+Typography.displayName = "Typography";
+
+// src/components/list.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ListRoot({
+  className,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? Slot3 : "div";
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      ...props,
+      className: cx3(
+        className,
+        "rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-10 max-h-[400px] list-none overflow-y-auto border"
+      )
+    }
+  );
+}
+function ListContent({
+  className,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? Slot3 : "ul";
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      ...props,
+      className: cx3("gap-small-1x p-small flex flex-col", className)
+    }
+  );
+}
+var variants = cva3(
+  [
+    "py-medium px-small flex items-center gap-small rounded-small-1x",
+    "bg-layer-2-idle text-neutral-dark",
+    "hover:bg-layer-2-hover transition-colors duration-100 ease-out",
+    "active:bg-layer-2-pressed"
+  ],
+  {
+    variants: {
+      size: {
+        md: "h-large-4x",
+        lg: "h-large-7x"
+      },
+      isActive: {
+        true: "bg-primary-alt-active text-primary-label-active hover:bg-primary-alt-hover active:bg-primary-alt-pressed"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      isActive: false
+    }
+  }
+);
+function ListItem({
+  className,
+  size,
+  isActive,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? Slot3 : "li";
+  return /* @__PURE__ */ jsx4(Comp, { ...props, className: cx3(variants({ size, isActive }), className) });
+}
+
+// src/components/divider.tsx
+import "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cx as cx4 } from "@xjur-ui/util";
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// src/components/dropdown-menu.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function DropdownMenuRoot({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  align = "start",
+  side = "bottom",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+    DropdownMenuPrimitive.Content,
+    {
+      align,
+      className: cx5(
+        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)]",
+        className
+      ),
+      "data-slot": "dropdown-menu-content",
+      side,
+      sideOffset,
+      ...props,
+      children: /* @__PURE__ */ jsx6(ListRoot, { children })
+    }
+  ) });
+}
+function DropdownMenuList({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(ListContent, { ...props });
+}
+function DropdownMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(ListItem, { className: cx5(className, "cursor-pointer"), ...props });
+}
+function DropdownMenuItemText({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(Typography, { ...props });
+}
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cx as cx6 } from "@xjur-ui/util";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsx7(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 1,
+  variant = "simple",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
+    TooltipPrimitive.Content,
+    {
+      className: cx6(
+        "text-size-body-sm text-balance",
+        "data-[variant=simple]:bg-alt-2 data-[variant=simple]:text-neutral-label data-[variant=simple]:rounded-small-1x data-[variant=simple]:px-small data-[variant=simple]:py-small-1x",
+        "data-[variant=rich]:bg-layer-2-idle data-[variant=rich]:text-neutral-dark data-[variant=rich]:rounded-small data-[variant=rich]:border-border-layer-2 data-[variant=rich]:p-large data-[variant=rich]:border",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin)",
+        className
+      ),
+      "data-slot": "tooltip-content",
+      "data-variant": variant,
+      sideOffset,
+      ...props,
+      children
+    }
+  ) });
+}
+
+// src/components/rich-editor.tsx
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var headingClasses = {
+  1: "text-size-body-md",
+  2: "text-size-title-lg",
+  3: "text-size-headline-lg"
+};
+function RichEditorRoot({
+  className,
+  editorOptions,
+  ...props
+}) {
+  const editor = useEditor({
+    ...editorOptions,
+    extensions: [
+      StarterKit.configure({
+        bulletList: {
+          HTMLAttributes: {
+            class: "list-disc list-outside pl-large-1x"
+          }
+        },
+        orderedList: {
+          HTMLAttributes: {
+            class: "list-decimal list-outside pl-large-1x"
+          }
+        },
+        heading: false
+      }),
+      Placeholder.configure({
+        placeholder: ({ node, editor: editor2 }) => node.type.name === "paragraph" && editor2.isEmpty ? "Digite aqui\u2026" : "",
+        showOnlyWhenEditable: true,
+        includeChildren: false,
+        emptyNodeClass: "before:content-[attr(data-placeholder)] before:absolute before:top-0 before:left-0 before:text-neutral-placeholder first:before:float-left first:before:content-[attr(data-placeholder)] first:before:pointer-events-none"
+      }),
+      Heading.configure({
+        levels: [1, 2, 3]
+      }).extend({
+        renderHTML({ node, HTMLAttributes }) {
+          const level = node.attrs.level ?? 1;
+          return [
+            "h",
+            {
+              ...HTMLAttributes,
+              class: headingClasses[level]
+            },
+            0
+          ];
+        }
+      }),
+      ...editorOptions?.extensions ?? []
+    ]
+  });
+  const value = useMemo(() => ({ editor }), [editor]);
+  return /* @__PURE__ */ jsx8(EditorContext.Provider, { value, children: /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: cx7("gap-small flex w-full flex-col", className),
+      "data-slot": "text-area-root",
+      ...props
+    }
+  ) });
+}
+function RichEditorContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: cx7(
+        "bg-layer-2-hover py-small_1x-alt px-small rounded-small-1x min-h-[116px] w-full border border-transparent",
+        "hover:border-border-layer-2 transition-colors duration-200",
+        "[&_ul_ul]:list-[circle]",
+        "[&_ul_ul_ul]:list-[square]",
+        "[&_ol_ol]:list-[lower-alpha]",
+        "[&_ol_ol_ol]:list-[lower-roman]",
+        "gap-small flex flex-col overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      "data-slot": "text-area-content",
+      ...props
+    }
+  );
+}
+function RichEditorCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "p",
+    {
+      ...props,
+      className: cx7(
+        "text-size-body-sm text-neutral-dark font-normal",
+        className
+      ),
+      "data-slot": "text-area-caption"
+    }
+  );
+}
+function RichEditorAreaText({
+  className,
+  ...props
+}) {
+  const { editor } = useRichTextEditor();
+  return /* @__PURE__ */ jsx8(
+    EditorContent,
+    {
+      className: cx7(
+        "text-size-body-md text-neutral-dark max-h-[116px] *:h-full *:w-full *:outline-0",
+        className
+      ),
+      editor,
+      ...props
+    }
+  );
+}
+function RichEditorToolbar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: cx7(
+        "h-large-4x gap-small-1x h-large-6px scrollbar-hide flex flex-nowrap items-center overflow-x-auto overflow-y-hidden",
+        className
+      ),
+      "data-slot": "text-area-toolbar",
+      ...props
+    }
+  );
+}
+function ToolbarButton({
+  appearance = "ghost",
+  variant = "secondary",
+  onMouseDown,
+  onPointerDown,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    Button,
+    {
+      appearance,
+      size: "icon_md",
+      tabIndex: -1,
+      type: "button",
+      variant,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onMouseDown?.(e);
+      },
+      onPointerDown: (e) => {
+        e.preventDefault();
+        onPointerDown?.(e);
+      },
+      ...props
+    }
+  );
+}
+function ToggleButton({
+  name,
+  ...props
+}) {
+  const { editor } = useRichTextEditor();
+  const { shortcut } = useOS();
+  const isActive = useRichTextEditorState({
+    editor,
+    selector: (ctx) => ctx.editor?.isActive(name) ?? false
+  });
+  const icon = useMemo(() => {
+    const iconsMap = /* @__PURE__ */ new Map([
+      ["bold", "format_bold"],
+      ["italic", "format_italic"],
+      ["underline", "format_underlined"],
+      ["strike", "format_strikethrough"],
+      ["bulletList", "format_list_bulleted"],
+      ["orderedList", "format_list_numbered"],
+      ["undo", "undo"],
+      ["redo", "redo"]
+    ]);
+    return iconsMap.get(name);
+  }, [name]);
+  const description = useMemo(() => {
+    const descriptionsMap = /* @__PURE__ */ new Map([
+      ["bold", `Negrito (${shortcut} + B)`],
+      ["italic", `It\xE1lico (${shortcut} + I)`],
+      ["underline", `Sublinhado (${shortcut} + U)`],
+      ["strike", `Tachado (${shortcut} + S)`],
+      ["bulletList", `Lista (${shortcut} + Shift + 7)`],
+      ["orderedList", `Lista numerada (${shortcut} + Shift + 8)`],
+      ["undo", `Desfazer (${shortcut} + Z)`],
+      ["redo", `Refazer (${shortcut} + Y)`]
+    ]);
+    return descriptionsMap.get(name);
+  }, [name, shortcut]);
+  const handleToggle = useCallback(() => {
+    if (!editor) throw new Error("Editor not found");
+    const commandsMap = /* @__PURE__ */ new Map([
+      ["bold", () => editor.chain().focus().toggleBold().run()],
+      ["italic", () => editor.chain().focus().toggleItalic().run()],
+      ["underline", () => editor.chain().focus().toggleUnderline().run()],
+      ["strike", () => editor.chain().focus().toggleStrike().run()],
+      ["bulletList", () => editor.chain().focus().toggleBulletList().run()],
+      ["orderedList", () => editor.chain().focus().toggleOrderedList().run()],
+      ["undo", () => editor.chain().focus().undo().run()],
+      ["redo", () => editor.chain().focus().redo().run()]
+    ]);
+    commandsMap.get(name)?.();
+  }, [editor, name]);
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(
+      ToolbarButton,
+      {
+        onClick: handleToggle,
+        ...isActive && { appearance: "solid" },
+        ...props,
+        children: icon && /* @__PURE__ */ jsx8(Icon, { className: "text-icon-neutral-3", name: icon })
+      }
+    ) }),
+    /* @__PURE__ */ jsx8(TooltipContent, { children: description && /* @__PURE__ */ jsx8(Typography, { size: "sm", children: description }) })
+  ] });
+}
+function HeadingButton({
+  appearance = "ghost",
+  variant = "secondary",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const { editor } = useRichTextEditor();
+  const isActive = useRichTextEditorState({
+    editor,
+    selector: (ctx) => ctx.editor?.isActive("heading") ?? false
+  });
+  const isLevelActive = useCallback(
+    (level) => {
+      if (!editor) throw new Error("Editor not found");
+      return editor.isActive("heading", { level });
+    },
+    [editor]
+  );
+  const toggleHeading = useCallback(
+    (level) => {
+      if (!editor) throw new Error("Editor not found");
+      setIsOpen(false);
+      setTimeout(() => {
+        editor.chain().focus().toggleHeading({ level }).run();
+      }, 0);
+    },
+    [editor]
+  );
+  const levels = [
+    { level: 1, label: "Normal", className: headingClasses[1] },
+    { level: 2, label: "Grande", className: headingClasses[2] },
+    { level: 3, label: "Enorme", className: headingClasses[3] }
+  ];
+  return /* @__PURE__ */ jsxs(DropdownMenuRoot, { open: isOpen, onOpenChange: (open) => setIsOpen(open), children: [
+    /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(
+      Button,
+      {
+        appearance: isActive ? "solid" : appearance,
+        size: "icon_md",
+        tabIndex: -1,
+        type: "button",
+        variant,
+        ...props,
+        children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(Icon, { className: "text-icon-neutral-3", name: "format_size" }) }),
+          /* @__PURE__ */ jsx8(TooltipContent, { children: /* @__PURE__ */ jsx8(Typography, { size: "sm", children: "Tamanho" }) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx8(DropdownMenuContent, { children: /* @__PURE__ */ jsx8(DropdownMenuList, { children: levels.map((level) => /* @__PURE__ */ jsx8(
+      DropdownMenuItem,
+      {
+        isActive: isLevelActive(level.level),
+        onPointerDown: () => toggleHeading(level.level),
+        children: /* @__PURE__ */ jsx8(DropdownMenuItemText, { className: level.className, children: level.label })
+      },
+      level.level
+    )) }) })
+  ] });
+}
+export {
+  HeadingButton,
+  RichEditorAreaText,
+  RichEditorCaption,
+  RichEditorContent,
+  RichEditorRoot,
+  RichEditorToolbar,
+  ToggleButton,
+  ToolbarButton,
+  useRichTextEditor,
+  useRichTextEditorState
+};