@xjur-ui/react 1.0.6 → 2.1.0

package/dist/components/rich-editor.js

@@ -1,723 +0,0 @@
-// 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
-};