@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-2CK7SHQQ.js

@@ -0,0 +1,305 @@
+import {
+  commandPaperStyles,
+  commandSizeStyles
+} from "./chunk-DJ2KYLHE.js";
+import {
+  CommandEmpty,
+  CommandLoading
+} from "./chunk-CMK4DJDR.js";
+import {
+  resolveCommandProps,
+  useCommandPalette
+} from "./chunk-6DN4ZULV.js";
+
+// src/components/form/Command/Command.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Dialog from "@mui/material/Dialog/index.js";
+import DialogContent from "@mui/material/DialogContent/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Grow from "@mui/material/Grow/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import List from "@mui/material/List/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+var Command = (rawProps) => {
+  const props = resolveCommandProps(rawProps);
+  const { open, onOpenChange, variant, dataTestId } = props;
+  const theme = useTheme();
+  const testId = makeTestId(dataTestId);
+  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } = useCommandPalette(props);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: () => onOpenChange?.(false),
+      maxWidth: false,
+      PaperProps: {
+        sx: {
+          ...commandPaperStyles(theme, props),
+          ...commandSizeStyles(props.size),
+          overflow: "hidden",
+          ...props.style
+        },
+        className: props.className,
+        "data-testid": dataTestId
+      },
+      TransitionComponent: variant === "glass" ? Fade : Grow,
+      onClick: props.onClick,
+      children: /* @__PURE__ */ jsxs(Box, { sx: { p: 0 }, children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            placeholder: props.placeholder,
+            value: internalValue,
+            onChange: handleValueChange,
+            onFocus: props.onFocus,
+            onBlur: props.onBlur,
+            disabled: props.disabled,
+            autoFocus: props.autoFocus,
+            onKeyDown: handleKeyDown,
+            dataTestId: testId("input")
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(DialogContent, { sx: { p: 0, maxHeight: props.maxHeight, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx(
+            CommandBody,
+            {
+              loading: props.loading,
+              items: filteredItems,
+              value: internalValue,
+              emptyMessage: props.emptyMessage,
+              onSelect: handleSelect,
+              selectedId: highlightedId,
+              showCategories: props.showCategories,
+              showShortcuts: props.showShortcuts,
+              showDescriptions: props.showDescriptions,
+              testId
+            }
+          ),
+          props.children
+        ] })
+      ] })
+    }
+  );
+};
+var CommandBody = ({ loading, emptyMessage, testId, ...list }) => {
+  if (loading) {
+    return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: testId("loading") });
+  }
+  if (!list.items?.length) {
+    return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: testId("empty") });
+  }
+  return /* @__PURE__ */ jsx(CommandList, { ...list, dataTestId: testId("list") });
+};
+var CommandInput = ({
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled,
+  autoFocus,
+  onKeyDown,
+  className,
+  style,
+  dataTestId
+}) => /* @__PURE__ */ jsx(
+  TextField,
+  {
+    fullWidth: true,
+    value,
+    onChange: (e) => onChange?.(e.target.value),
+    onFocus,
+    onBlur,
+    onKeyDown,
+    placeholder,
+    disabled,
+    autoFocus,
+    variant: "standard",
+    className,
+    inputProps: {
+      "data-testid": dataTestId
+    },
+    sx: {
+      p: 2,
+      "& .MuiInput-underline:before": { border: "none" },
+      "& .MuiInput-underline:after": { border: "none" },
+      ...style
+    },
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+      endAdornment: value && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onChange?.(""), children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }) })
+    }
+  }
+);
+var CommandList = ({
+  items = [],
+  onSelect,
+  selectedId,
+  emptyMessage,
+  showCategories,
+  showShortcuts,
+  showDescriptions,
+  loading,
+  className,
+  style,
+  dataTestId
+}) => {
+  const groupedItems = useMemo(() => {
+    if (!showCategories) return { "": items };
+    const groups = {};
+    items.forEach((item) => {
+      const category = item.category || "";
+      if (!groups[category]) groups[category] = [];
+      groups[category].push(item);
+    });
+    return groups;
+  }, [items, showCategories]);
+  if (loading) return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: dataTestId ? `${dataTestId}-loading` : void 0 });
+  if (items.length === 0) return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: dataTestId ? `${dataTestId}-empty` : void 0 });
+  return /* @__PURE__ */ jsx(List, { className, sx: style, "data-testid": dataTestId, children: Object.entries(groupedItems).map(([category, categoryItems]) => /* @__PURE__ */ jsx(
+    CommandGroup,
+    {
+      heading: category,
+      items: categoryItems,
+      onSelect,
+      selectedId,
+      showShortcuts,
+      showDescriptions
+    },
+    category
+  )) });
+};
+var CommandGroup = ({
+  heading,
+  items = [],
+  onSelect,
+  selectedId,
+  showShortcuts,
+  showDescriptions,
+  className,
+  style,
+  dataTestId
+}) => {
+  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : void 0);
+  return /* @__PURE__ */ jsxs(Box, { className, sx: style, "data-testid": groupTestId, children: [
+    heading && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          px: 2,
+          py: 1,
+          display: "block",
+          color: "text.secondary",
+          fontWeight: 600,
+          textTransform: "uppercase"
+        },
+        children: heading
+      }
+    ),
+    items.map((item) => /* @__PURE__ */ jsx(
+      CommandItemComponent,
+      {
+        ...item,
+        selected: selectedId === item.id,
+        onSelect: () => onSelect?.(item),
+        showShortcut: showShortcuts,
+        showDescription: showDescriptions,
+        dataTestId: `command-item-${item.id}`
+      },
+      item.id
+    ))
+  ] });
+};
+var CommandItemComponent = ({
+  label,
+  description,
+  icon,
+  shortcut,
+  disabled,
+  selected,
+  onSelect,
+  showShortcut,
+  showDescription,
+  className,
+  style,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      onClick: onSelect,
+      disabled,
+      selected,
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        py: 1.5,
+        px: 2,
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.08)
+        },
+        "&.Mui-selected": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.12),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.primary.main, 0.16)
+          }
+        },
+        ...style
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 40 }, children: icon }),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: label,
+            secondary: showDescription && description,
+            primaryTypographyProps: {
+              fontSize: "0.875rem",
+              fontWeight: selected ? 600 : 400
+            },
+            secondaryTypographyProps: {
+              fontSize: "0.75rem"
+            }
+          }
+        ),
+        showShortcut && shortcut && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: shortcut,
+            size: "small",
+            variant: "outlined",
+            sx: {
+              height: 20,
+              fontSize: "0.7rem",
+              ml: 1
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup
+};
+//# sourceMappingURL=chunk-2CK7SHQQ.js.map

package/dist/chunk-2KLT22S3.js

@@ -0,0 +1,173 @@
+import {
+  makeTestId,
+  resolveCodeEditorProps
+} from "./chunk-CSSCGM27.js";
+import {
+  EditorToolbar
+} from "./chunk-4V7DBU4H.js";
+import {
+  useCodeEditor
+} from "./chunk-QG73YT6D.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+
+// src/components/form/CodeEditor/CodeEditor.tsx
+import Editor from "@monaco-editor/react";
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EditorContainer = styled(Paper)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${fieldEdge(theme)}`,
+  borderRadius: fieldRadius(theme),
+  overflow: "hidden"
+}));
+var EditorWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "fullscreen"
+})(({ theme, fullscreen }) => ({
+  position: "relative",
+  flex: 1,
+  minHeight: 200,
+  ...fullscreen && {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: theme.zIndex.modal,
+    background: theme.palette.background.paper
+  }
+}));
+var PlaceholderOverlay = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(2),
+  left: theme.spacing(8),
+  color: theme.palette.text.disabled,
+  fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace',
+  fontSize: "0.875rem",
+  pointerEvents: "none",
+  userSelect: "none"
+}));
+var EditorLoading = ({ label }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary"
+    },
+    children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: label })
+  }
+);
+var buildEditorOptions = ({
+  minimap,
+  fontSize,
+  isWrapped,
+  lineNumbers,
+  readOnly
+}) => ({
+  readOnly,
+  // Explicitly convert minimap to boolean to ensure Monaco receives a definitive value
+  // This prevents undefined from being interpreted differently in various environments
+  minimap: { enabled: minimap === true },
+  fontSize,
+  wordWrap: isWrapped ? "on" : "off",
+  lineNumbers: lineNumbers ? "on" : "off",
+  scrollBeyondLastLine: false,
+  automaticLayout: true,
+  tabSize: 2,
+  insertSpaces: true,
+  folding: true,
+  foldingStrategy: "indentation",
+  showFoldingControls: "mouseover",
+  smoothScrolling: true,
+  cursorBlinking: "smooth",
+  cursorSmoothCaretAnimation: "on",
+  renderWhitespace: "selection",
+  renderLineHighlight: "all",
+  selectOnLineNumbers: true,
+  roundedSelection: true,
+  padding: { top: 16, bottom: 16 },
+  fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace',
+  fontLigatures: true
+});
+var CodeEditor = (componentProps) => {
+  const {
+    language,
+    height,
+    theme: themeProp,
+    value,
+    onChange,
+    readOnly,
+    lineNumbers,
+    minimap,
+    fontSize,
+    wordWrap,
+    showToolbar,
+    autoFormat,
+    placeholder,
+    onSave,
+    dataTestId,
+    copy
+  } = resolveCodeEditorProps(componentProps);
+  const testId = makeTestId(dataTestId);
+  const editor = useCodeEditor({ themeProp, wordWrap, autoFormat, readOnly, onSave });
+  const editorOptions = buildEditorOptions({
+    minimap,
+    fontSize,
+    isWrapped: editor.isWrapped,
+    lineNumbers,
+    readOnly
+  });
+  return /* @__PURE__ */ jsxs(EditorContainer, { elevation: 2, "data-testid": dataTestId || "code-editor", children: [
+    showToolbar && /* @__PURE__ */ jsx(
+      EditorToolbar,
+      {
+        copy,
+        language,
+        readOnly,
+        isWrapped: editor.isWrapped,
+        isCopied: editor.isCopied,
+        isFullscreen: editor.isFullscreen,
+        dataTestId,
+        onFormat: editor.handleFormat,
+        onCopy: editor.handleCopy,
+        onWrapToggle: editor.handleWrapToggle,
+        onFullscreenToggle: editor.handleFullscreenToggle
+      }
+    ),
+    /* @__PURE__ */ jsxs(EditorWrapper, { fullscreen: editor.isFullscreen, "data-testid": testId("editor-wrapper"), children: [
+      placeholder && !value && /* @__PURE__ */ jsx(PlaceholderOverlay, { "data-testid": testId("placeholder"), children: placeholder }),
+      /* @__PURE__ */ jsx(
+        Editor,
+        {
+          height: editor.isFullscreen ? "100vh" : height,
+          language,
+          value,
+          onChange: (newValue) => onChange?.(newValue || ""),
+          theme: editor.editorTheme,
+          options: editorOptions,
+          onMount: editor.handleEditorDidMount,
+          loading: /* @__PURE__ */ jsx(EditorLoading, { label: copy.loading })
+        }
+      )
+    ] })
+  ] });
+};
+
+export {
+  CodeEditor
+};
+//# sourceMappingURL=chunk-2KLT22S3.js.map

package/dist/chunk-2LG5TEFV.js

@@ -0,0 +1,201 @@
+import {
+  modeInk,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/typography/Code/Code.tsx
+import Check from "@mui/icons-material/Check";
+import ContentCopy from "@mui/icons-material/ContentCopy";
+import Box from "@mui/material/Box/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React, { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledCodeContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "copyable"].includes(prop)
+})(({ theme, customVariant = "inline", customSize = "md", copyable }) => {
+  const sizeMap = {
+    xs: { fontSize: "0.75rem", padding: "2px 4px" },
+    sm: { fontSize: "0.8125rem", padding: "3px 6px" },
+    md: { fontSize: "0.875rem", padding: "4px 8px" },
+    lg: { fontSize: "1rem", padding: "6px 12px" }
+  };
+  const blockSizeMap = {
+    xs: { fontSize: "0.75rem", padding: "8px 12px" },
+    sm: { fontSize: "0.8125rem", padding: "12px 16px" },
+    md: { fontSize: "0.875rem", padding: "16px 20px" },
+    lg: { fontSize: "1rem", padding: "20px 24px" }
+  };
+  const baseStyles = {
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
+    lineHeight: 1.5,
+    borderRadius: theme.shape.borderRadius,
+    transition: "all 0.2s ease",
+    position: "relative"
+  };
+  const variantStyles = {
+    inline: {
+      ...baseStyles,
+      display: "inline",
+      backgroundColor: alpha(theme.palette.primary.main, 0.08),
+      color: theme.palette.primary.main,
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.12)}`,
+      ...sizeMap[customSize]
+    },
+    block: {
+      ...baseStyles,
+      display: "block",
+      backgroundColor: theme.palette.mode === "dark" ? alpha(neutralTones(theme).inverseSurface, 0.95) : alpha(neutralTones(theme).surface, 0.95),
+      color: theme.palette.mode === "dark" ? modeInk(theme) : theme.palette.text.primary,
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      overflow: "auto",
+      whiteSpace: "pre",
+      ...blockSizeMap[customSize],
+      ...copyable && {
+        paddingTop: blockSizeMap[customSize].padding.split(" ")[0],
+        paddingRight: "60px"
+      }
+    },
+    highlight: {
+      ...baseStyles,
+      display: "block",
+      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.secondary.main, 0.1)} 100%)`,
+      color: theme.palette.text.primary,
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      overflow: "auto",
+      whiteSpace: "pre",
+      ...blockSizeMap[customSize],
+      ...copyable && {
+        paddingTop: blockSizeMap[customSize].padding.split(" ")[0],
+        paddingRight: "60px"
+      }
+    }
+  };
+  return variantStyles[customVariant] || variantStyles.inline;
+});
+var StyledCode = styled("code")({
+  margin: 0,
+  padding: 0,
+  backgroundColor: "transparent",
+  border: "none",
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  lineHeight: "inherit",
+  color: "inherit"
+});
+var CopyButton = styled(IconButton)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(1),
+  right: theme.spacing(1),
+  width: 32,
+  height: 32,
+  backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.paper, 0.8) : theme.palette.background.paper,
+  backdropFilter: theme.palette.mode === "dark" ? "blur(8px)" : "none",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: theme.palette.mode === "light" ? theme.shadows[1] : "none",
+  "&:hover": {
+    backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.paper, 0.9) : neutralTones(theme).surface,
+    transform: "scale(1.05)"
+  },
+  "& .MuiSvgIcon-root": {
+    fontSize: 16
+  }
+}));
+var LanguageLabel = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(1),
+  left: theme.spacing(2),
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  color: alpha(theme.palette.text.primary, 0.6),
+  backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.paper, 0.8) : theme.palette.background.paper,
+  padding: "2px 8px",
+  borderRadius: theme.shape.borderRadius / 2,
+  backdropFilter: theme.palette.mode === "dark" ? "blur(8px)" : "none",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: theme.palette.mode === "light" ? theme.shadows[1] : "none"
+}));
+var renderNumberedLines = (source) => source.split("\n").map((line, index) => {
+  const stableKey = `line-${index + 1}-${line.slice(0, 10).replace(/\s+/g, "")}-${line.length}`;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          display: "inline-block",
+          minWidth: "3em",
+          opacity: 0.5,
+          userSelect: "none",
+          marginRight: "1em",
+          textAlign: "right"
+        },
+        children: index + 1
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: line })
+  ] }, stableKey);
+});
+var resolveCodeFlags = (variant, copyable, language) => {
+  const isBlock = variant === "block" || variant === "highlight";
+  return {
+    isBlock,
+    showCopy: copyable && isBlock,
+    showLanguage: Boolean(language) && isBlock
+  };
+};
+var CodeCopyButton = ({ source }) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    if (typeof source !== "string") return;
+    try {
+      await navigator.clipboard.writeText(source);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(Tooltip, { title: copied ? "Copied!" : "Copy code", children: /* @__PURE__ */ jsx(CopyButton, { onClick: handleCopy, size: "small", color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(ContentCopy, {}) }) });
+};
+var Code = React.forwardRef(
+  ({
+    variant = "inline",
+    language,
+    copyable = false,
+    lineNumbers = false,
+    size = "md",
+    children,
+    ...props
+  }, ref) => {
+    const { isBlock, showCopy, showLanguage } = resolveCodeFlags(variant, copyable, language);
+    const processedChildren = React.useMemo(() => {
+      if (!lineNumbers || !isBlock || typeof children !== "string") {
+        return children;
+      }
+      return renderNumberedLines(children);
+    }, [children, lineNumbers, isBlock]);
+    return /* @__PURE__ */ jsxs(
+      StyledCodeContainer,
+      {
+        ref,
+        component: variant === "inline" ? "span" : "div",
+        customVariant: variant,
+        customSize: size,
+        copyable: showCopy,
+        ...props,
+        children: [
+          showLanguage && /* @__PURE__ */ jsx(LanguageLabel, { children: language }),
+          /* @__PURE__ */ jsx(StyledCode, { children: processedChildren }),
+          showCopy && /* @__PURE__ */ jsx(CodeCopyButton, { source: children })
+        ]
+      }
+    );
+  }
+);
+Code.displayName = "Code";
+
+export {
+  Code
+};
+//# sourceMappingURL=chunk-2LG5TEFV.js.map