@12-apps/ui 6.10.0 → 6.11.0

package/dist/form/Textarea.js

@@ -1,401 +1,24 @@
+import {
+  getColorFromTheme,
+  textareaEmphasisStyles
+} from "../chunk-PQWPMIGH.js";
 import "../chunk-PZ5AY32C.js";
 
 // src/components/form/Textarea/Textarea.tsx
 import {
-  alpha as alpha3,
-  Box as Box2,
+  alpha,
+  Box,
   FormHelperText,
   InputLabel,
   TextareaAutosize
 } from "@mui/material";
-import { styled as styled2 } from "@mui/material";
-import { useState as useState2 } from "react";
-
-// src/components/form/Textarea/Textarea.styles.ts
-import { alpha, keyframes } from "@mui/material";
-var glowAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 5px currentColor;
-  }
-  50% {
-    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
-  }
-  100% {
-    box-shadow: 0 0 5px currentColor;
-  }
-`;
-var floatAnimation = keyframes`
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-`;
-var neutralPalette = (theme) => {
-  const grey = theme.palette.grey;
-  return {
-    main: grey?.[700] || "#616161",
-    dark: grey?.[800] || "#424242",
-    light: grey?.[500] || "#9e9e9e",
-    contrastText: "#fff"
-  };
-};
-var pick = (...candidates) => candidates.find(Boolean) ?? "";
-var withFallbacks = (theme, palette) => ({
-  main: pick(palette?.main, theme.palette.primary.main),
-  dark: pick(palette?.dark, palette?.main, theme.palette.primary.dark),
-  light: pick(palette?.light, palette?.main, theme.palette.primary.light),
-  contrastText: pick(palette?.contrastText, "#fff")
-});
-var getColorFromTheme = (theme, color) => {
-  if (color === "neutral") return neutralPalette(theme);
-  const colorMap = {
-    primary: theme.palette.primary,
-    secondary: theme.palette.secondary,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    info: theme.palette.info,
-    danger: theme.palette.error
-  };
-  return withFallbacks(theme, colorMap[color] || theme.palette.primary);
-};
-var textareaEmphasisStyles = ({
-  theme,
-  colorPalette,
-  glass,
-  gradient,
-  glow
-}) => {
-  const glassStyles = glass ? {
-    backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    "&:hover": {
-      backgroundColor: alpha(theme.palette.background.paper, 0.15),
-      backdropFilter: "blur(25px)"
-    },
-    "&:focus": {
-      backgroundColor: alpha(theme.palette.background.paper, 0.2),
-      backdropFilter: "blur(30px)"
-    }
-  } : {};
-  const gradientStyles = gradient ? {
-    background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
-               linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,
-    border: "2px solid transparent",
-    "&:focus": {
-      background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
-                 linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`
-    }
-  } : {};
-  const glowStyles = glow ? {
-    animation: `${glowAnimation} 2s ease-in-out infinite`,
-    boxShadow: `0 0 10px ${alpha(colorPalette.main, 0.3)}`
-  } : {};
-  return { ...glassStyles, ...gradientStyles, ...glowStyles };
-};
-
-// src/components/form/Textarea/TextareaRichEditor.tsx
-import Code from "@mui/icons-material/Code";
-import FormatBold from "@mui/icons-material/FormatBold";
-import FormatColorFill from "@mui/icons-material/FormatColorFill";
-import FormatColorText from "@mui/icons-material/FormatColorText";
-import FormatItalic from "@mui/icons-material/FormatItalic";
-import FormatListBulleted from "@mui/icons-material/FormatListBulleted";
-import FormatListNumbered from "@mui/icons-material/FormatListNumbered";
-import FormatQuote from "@mui/icons-material/FormatQuote";
-import FormatUnderlined from "@mui/icons-material/FormatUnderlined";
-import Link from "@mui/icons-material/Link";
-import { alpha as alpha2, Box, Divider, IconButton, Tooltip } from "@mui/material";
 import { styled } from "@mui/material";
-import { useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var RichToolbar = styled(Box)(({ theme, glass }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(0.5),
-  padding: theme.spacing(1),
-  borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  background: glass ? alpha2(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
-  ...glass && {
-    backdropFilter: "blur(15px)"
-  },
-  "& .MuiDivider-root": {
-    height: 24,
-    margin: `0 ${theme.spacing(1)}`
-  }
-}));
-var ToolbarButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== "active"
-})(({ theme, active }) => ({
-  padding: theme.spacing(0.75),
-  borderRadius: theme.spacing(0.5),
-  color: active ? theme.palette.primary.main : theme.palette.text.secondary,
-  backgroundColor: active ? alpha2(theme.palette.primary.main, 0.1) : "transparent",
-  transition: "all 0.2s ease",
-  position: "relative",
-  overflow: "hidden",
-  "&::before": {
-    content: '""',
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    width: 0,
-    height: 0,
-    borderRadius: "50%",
-    backgroundColor: alpha2(theme.palette.primary.main, 0.3),
-    transform: "translate(-50%, -50%)",
-    transition: "width 0.3s, height 0.3s"
-  },
-  "&:hover": {
-    color: theme.palette.primary.main,
-    backgroundColor: alpha2(theme.palette.primary.main, 0.15),
-    transform: "translateY(-1px)",
-    animation: `${floatAnimation} 1.5s ease-in-out infinite`,
-    "&::before": {
-      width: "100%",
-      height: "100%"
-    }
-  },
-  "&:active": {
-    transform: "scale(0.95)"
-  }
+import { lazy, Suspense, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextareaRichEditor = lazy(async () => ({
+  default: (await import("../TextareaRichEditor-ZFB44VWZ.js")).TextareaRichEditor
 }));
-var CharacterCount = styled(Box)(({ theme, limit, count }) => {
-  const isWarning = limit && count > limit * 0.8;
-  const isError = limit && count > limit;
-  return {
-    position: "absolute",
-    bottom: theme.spacing(1),
-    right: theme.spacing(1),
-    fontSize: "0.75rem",
-    color: isError ? theme.palette.error.main : isWarning ? theme.palette.warning.main : theme.palette.text.secondary,
-    padding: "2px 6px",
-    borderRadius: theme.spacing(0.5),
-    backgroundColor: alpha2(theme.palette.background.paper, 0.8),
-    backdropFilter: "blur(10px)",
-    transition: "all 0.3s ease"
-  };
-});
-var ContentEditableDiv = styled("div")(({ theme, error, focused, glass, customColor = "primary" }) => {
-  if (!theme) return {};
-  const colorPalette = getColorFromTheme(theme, customColor);
-  const errorColor = theme.palette.error;
-  return {
-    minHeight: "120px",
-    padding: theme.spacing(1.5),
-    borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
-    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : theme.palette.divider}`,
-    borderTop: "none",
-    backgroundColor: glass ? alpha2(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: "1rem",
-    lineHeight: 1.5,
-    outline: "none",
-    transition: "all 0.3s ease",
-    cursor: "text",
-    ...glass && {
-      backdropFilter: "blur(20px)"
-    },
-    "&:hover": {
-      backgroundColor: glass ? alpha2(theme.palette.background.paper, 0.15) : alpha2(theme.palette.background.paper, 0.9)
-    },
-    "&:focus": {
-      borderColor: error ? errorColor.main : colorPalette.main,
-      boxShadow: `0 0 0 3px ${alpha2(error ? errorColor.main : colorPalette.main, 0.1)}`
-    },
-    "& > *": {
-      margin: "0.5em 0"
-    },
-    '&[contenteditable="true"]:empty::before': {
-      content: "attr(data-placeholder)",
-      color: theme.palette.text.secondary,
-      opacity: 0.6
-    }
-  };
-});
-var formatText = (command, value) => {
-  document.execCommand(command, false, value);
-};
-var useRichEditorState = ({
-  value,
-  onChange
-}) => {
-  const [focused, setFocused] = useState(false);
-  const [characterCount, setCharacterCount] = useState(0);
-  const [activeFormats, setActiveFormats] = useState({
-    bold: false,
-    italic: false,
-    underline: false,
-    list: false,
-    orderedList: false,
-    quote: false,
-    code: false
-  });
-  const contentRef = useRef(null);
-  useEffect(() => {
-    if (contentRef.current && value !== void 0) {
-      if (contentRef.current.innerHTML !== value) {
-        contentRef.current.innerHTML = value;
-      }
-      setCharacterCount(contentRef.current.innerText.length);
-    }
-  }, [value]);
-  const handleInput = () => {
-    if (contentRef.current) {
-      const html = contentRef.current.innerHTML;
-      onChange?.(html);
-      setCharacterCount(contentRef.current.innerText.length);
-      updateActiveFormats();
-    }
-  };
-  const updateActiveFormats = () => {
-    setActiveFormats({
-      bold: document.queryCommandState("bold"),
-      italic: document.queryCommandState("italic"),
-      underline: document.queryCommandState("underline"),
-      list: document.queryCommandState("insertUnorderedList"),
-      orderedList: document.queryCommandState("insertOrderedList"),
-      quote: false,
-      code: false
-    });
-  };
-  const handleFormat = (command, value2) => {
-    formatText(command, value2);
-    updateActiveFormats();
-    contentRef.current?.focus();
-  };
-  return {
-    focused,
-    setFocused,
-    characterCount,
-    activeFormats,
-    contentRef,
-    handleInput,
-    handleFormat,
-    updateActiveFormats
-  };
-};
-var InlineFormatButtons = ({ copy, activeFormats, onCommand }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.bold, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      active: activeFormats.bold,
-      onClick: () => onCommand("bold"),
-      children: /* @__PURE__ */ jsx(FormatBold, { fontSize: "small" })
-    }
-  ) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.italic, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      active: activeFormats.italic,
-      onClick: () => onCommand("italic"),
-      children: /* @__PURE__ */ jsx(FormatItalic, { fontSize: "small" })
-    }
-  ) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.underline, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      active: activeFormats.underline,
-      onClick: () => onCommand("underline"),
-      children: /* @__PURE__ */ jsx(FormatUnderlined, { fontSize: "small" })
-    }
-  ) })
-] });
-var BlockFormatButtons = ({ copy, activeFormats, onCommand }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.bulletList, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      active: activeFormats.list,
-      onClick: () => onCommand("insertUnorderedList"),
-      children: /* @__PURE__ */ jsx(FormatListBulleted, { fontSize: "small" })
-    }
-  ) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.numberedList, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      active: activeFormats.orderedList,
-      onClick: () => onCommand("insertOrderedList"),
-      children: /* @__PURE__ */ jsx(FormatListNumbered, { fontSize: "small" })
-    }
-  ) }),
-  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.quote, arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", onClick: () => onCommand("formatBlock", "blockquote"), children: /* @__PURE__ */ jsx(FormatQuote, { fontSize: "small" }) }) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.code, arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", onClick: () => onCommand("formatBlock", "pre"), children: /* @__PURE__ */ jsx(Code, { fontSize: "small" }) }) }),
-  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.insertLink, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      onClick: () => {
-        const url = window.prompt(copy.linkPrompt);
-        if (url) onCommand("createLink", url);
-      },
-      children: /* @__PURE__ */ jsx(Link, { fontSize: "small" })
-    }
-  ) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.textColor, arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", children: /* @__PURE__ */ jsx(FormatColorText, { fontSize: "small" }) }) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.backgroundColor, arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", children: /* @__PURE__ */ jsx(FormatColorFill, { fontSize: "small" }) }) })
-] });
-var EditorToolbar = ({ copy, glass, activeFormats, onCommand }) => /* @__PURE__ */ jsxs(RichToolbar, { glass, children: [
-  /* @__PURE__ */ jsx(InlineFormatButtons, { copy, activeFormats, onCommand }),
-  /* @__PURE__ */ jsx(BlockFormatButtons, { copy, activeFormats, onCommand })
-] });
-var TextareaRichEditor = ({ copy, value, onChange, placeholder, error, glass, color, characterLimit }) => {
-  const {
-    focused,
-    setFocused,
-    characterCount,
-    activeFormats,
-    contentRef,
-    handleInput,
-    handleFormat,
-    updateActiveFormats
-  } = useRichEditorState({ value, onChange });
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(EditorToolbar, { copy, glass, activeFormats, onCommand: handleFormat }),
-    /* @__PURE__ */ jsx(
-      ContentEditableDiv,
-      {
-        ref: contentRef,
-        contentEditable: true,
-        "data-placeholder": placeholder,
-        error,
-        focused,
-        glass,
-        customColor: color,
-        onFocus: () => setFocused(true),
-        onBlur: () => setFocused(false),
-        onInput: handleInput,
-        onKeyUp: updateActiveFormats,
-        onMouseUp: updateActiveFormats,
-        role: "textbox",
-        "aria-multiline": "true",
-        "aria-label": placeholder || "Rich text editor"
-      }
-    ),
-    characterLimit && /* @__PURE__ */ jsxs(CharacterCount, { limit: characterLimit, count: characterCount, children: [
-      characterCount,
-      characterLimit ? `/${characterLimit}` : ""
-    ] })
-  ] });
-};
-
-// src/components/form/Textarea/Textarea.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var StyledTextarea = styled2(TextareaAutosize, {
+var StyledTextarea = styled(TextareaAutosize, {
   shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient", "error"].includes(
     prop
   )
@@ -436,12 +59,12 @@ var StyledTextarea = styled2(TextareaAutosize, {
     },
     "&:hover": {
       borderColor: error ? errorColor.dark : colorPalette.main,
-      backgroundColor: alpha3(theme.palette.background.paper, 0.8)
+      backgroundColor: alpha(theme.palette.background.paper, 0.8)
     },
     "&:focus": {
       borderColor: error ? errorColor.main : colorPalette.main,
       backgroundColor: theme.palette.background.paper,
-      boxShadow: `0 0 0 3px ${alpha3(error ? errorColor.main : colorPalette.main, 0.1)}`
+      boxShadow: `0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}`
     }
   };
   return {
@@ -449,18 +72,18 @@ var StyledTextarea = styled2(TextareaAutosize, {
     ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow })
   };
 });
-var StyledLabel = styled2(InputLabel, {
+var StyledLabel = styled(InputLabel, {
   shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
 })(({ theme, glass, error }) => ({
   marginBottom: theme.spacing(1),
   fontWeight: 500,
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...glass && {
-    backgroundColor: alpha3(theme.palette.background.paper, 0.1),
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
     backdropFilter: "blur(10px)",
     padding: "4px 8px",
     borderRadius: "4px",
-    border: `1px solid ${alpha3(theme.palette.divider, 0.2)}`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: "inline-block"
   }
 }));
@@ -480,20 +103,20 @@ var TEXTAREA_DEFAULTS = {
 var definedProps = (props) => Object.fromEntries(
   Object.entries(props).filter(([, value]) => value !== void 0)
 );
-var TextareaShell = ({ testId, label, glassLabel, error, helperText, children }) => /* @__PURE__ */ jsxs2(
-  Box2,
+var TextareaShell = ({ testId, label, glassLabel, error, helperText, children }) => /* @__PURE__ */ jsxs(
+  Box,
   {
     sx: { position: "relative", width: "100%" },
     "data-testid": testId ? `${testId}-wrapper` : void 0,
     children: [
-      label && /* @__PURE__ */ jsx2(StyledLabel, { glass: glassLabel, error, children: label }),
+      label && /* @__PURE__ */ jsx(StyledLabel, { glass: glassLabel, error, children: label }),
       children,
-      helperText && /* @__PURE__ */ jsx2(FormHelperText, { error, sx: { mt: 1 }, children: helperText })
+      helperText && /* @__PURE__ */ jsx(FormHelperText, { error, sx: { mt: 1 }, children: helperText })
     ]
   }
 );
-var TextareaIcon = ({ icon, iconPosition }) => /* @__PURE__ */ jsx2(
-  Box2,
+var TextareaIcon = ({ icon, iconPosition }) => /* @__PURE__ */ jsx(
+  Box,
   {
     sx: {
       position: "absolute",
@@ -506,6 +129,12 @@ var TextareaIcon = ({ icon, iconPosition }) => /* @__PURE__ */ jsx2(
     children: icon
   }
 );
+function RichVariant({
+  shell,
+  editor
+}) {
+  return /* @__PURE__ */ jsx(TextareaShell, { ...shell, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TextareaRichEditor, { ...editor }) }) });
+}
 var Textarea = (textareaProps) => {
   const {
     variant,
@@ -528,7 +157,7 @@ var Textarea = (textareaProps) => {
     ...props
   } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };
   const { richEditorCopy } = textareaProps;
-  const [richTextValue, setRichTextValue] = useState2("");
+  const [richTextValue, setRichTextValue] = useState("");
   const hasIcon = Boolean(icon);
   const testId = dataTestId || dataTestIdCamelCase;
   const textareaStyle = {
@@ -541,23 +170,26 @@ var Textarea = (textareaProps) => {
     }
   };
   if (variant === "rich" && richEditorCopy) {
-    return /* @__PURE__ */ jsx2(TextareaShell, { testId, label, glassLabel, error, helperText, children: /* @__PURE__ */ jsx2(
-      TextareaRichEditor,
+    return /* @__PURE__ */ jsx(
+      RichVariant,
       {
-        copy: richEditorCopy,
-        value: richTextValue,
-        onChange: setRichTextValue,
-        placeholder: props.placeholder,
-        error,
-        glass,
-        color,
-        characterLimit: props.maxLength
+        shell: { testId, label, glassLabel, error, helperText },
+        editor: {
+          copy: richEditorCopy,
+          value: richTextValue,
+          onChange: setRichTextValue,
+          placeholder: props.placeholder,
+          error,
+          glass,
+          color,
+          characterLimit: props.maxLength
+        }
       }
-    ) });
+    );
   }
-  return /* @__PURE__ */ jsx2(TextareaShell, { testId, label, glassLabel, error, helperText, children: /* @__PURE__ */ jsxs2(Box2, { sx: { position: "relative" }, children: [
-    hasIcon && /* @__PURE__ */ jsx2(TextareaIcon, { icon, iconPosition }),
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(TextareaShell, { testId, label, glassLabel, error, helperText, children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    hasIcon && /* @__PURE__ */ jsx(TextareaIcon, { icon, iconPosition }),
+    /* @__PURE__ */ jsx(
       StyledTextarea,
       {
         customVariant: variant,