@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-DDNUPFPE.js

@@ -0,0 +1,47 @@
+import {
+  fieldControlStyles,
+  fieldTextFieldStyles
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/AddressAutocomplete/AddressTextField.tsx
+import TextField from "@mui/material/TextField/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var GlassTextField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
+  "& .MuiOutlinedInput-root": {
+    borderRadius: fieldRadius(theme),
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+    border: `1px solid ${fieldEdge(theme)}`,
+    transition: theme.transitions.create(["border-color", "box-shadow", "background"]),
+    "&:hover": {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,
+      borderColor: theme.palette.primary.main
+    },
+    "&.Mui-focused": {
+      background: theme.palette.background.paper,
+      boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.25)}`
+    },
+    "& fieldset": {
+      border: "none"
+    }
+  }
+}));
+var FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));
+var AddressTextField = ({ addressVariant, ...props }) => addressVariant === "glass" ? /* @__PURE__ */ jsx(GlassTextField, { variant: "outlined", ...props }) : /* @__PURE__ */ jsx(FieldTextField, { variant: addressVariant, ...props });
+
+export {
+  AddressTextField
+};
+//# sourceMappingURL=chunk-DDNUPFPE.js.map

package/dist/chunk-DE745AV7.js

@@ -0,0 +1,89 @@
+import {
+  CHIP_SIZES,
+  CHIP_TRANSITION_EASING,
+  CHIP_TRANSITION_MS,
+  HOVER_LIFT_PX,
+  HOVER_SHADOW
+} from "./chunk-KU6VHNRV.js";
+import {
+  chipKeyAction
+} from "./chunk-BF4FYOAR.js";
+import {
+  shadowInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chip/Chip.styles.tsx
+import Avatar from "@mui/material/Avatar/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var makeKeyDownHandler = (args) => (event) => {
+  const action = chipKeyAction(event.key, args);
+  if (action === null) return;
+  event.preventDefault();
+  if (action === "delete") {
+    args.onDelete?.();
+    return;
+  }
+  args.onClick?.();
+};
+var avatarFor = (avatar, avatarSrc) => {
+  if (avatar && React.isValidElement(avatar)) {
+    return avatar;
+  }
+  if (avatarSrc) {
+    const { avatarSize } = CHIP_SIZES.medium;
+    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: sxRem(avatarSize), height: sxRem(avatarSize) } });
+  }
+  return void 0;
+};
+var hoverShadow = (theme) => `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(
+  theme,
+  theme.palette.mode === "dark" ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight
+)}`;
+var chipStyles = ({
+  variant,
+  selected,
+  clickable,
+  disabled
+}) => {
+  const lifts = clickable && !disabled;
+  return {
+    // Enhanced styling for outlined variant
+    ...variant === "outlined" && {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      backgroundColor: "transparent"
+    },
+    ...selected && variant === "outlined" && {
+      backgroundColor: (theme) => theme.palette.action.selected
+    },
+    "&:hover": {
+      ...lifts && {
+        transform: (theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,
+        boxShadow: (theme) => hoverShadow(theme)
+      }
+    },
+    "&:active": {
+      ...lifts && {
+        transform: "translateY(0px)"
+      }
+    },
+    transition: `all ${CHIP_TRANSITION_MS / 1e3}s ${CHIP_TRANSITION_EASING}`
+  };
+};
+var iconWithTestId = (icon, testId) => icon && React.isValidElement(icon) ? React.cloneElement(icon, {
+  "data-testid": testId
+}) : void 0;
+
+export {
+  makeKeyDownHandler,
+  avatarFor,
+  chipStyles,
+  iconWithTestId
+};
+//# sourceMappingURL=chunk-DE745AV7.js.map

package/dist/chunk-DFMLD537.js

@@ -0,0 +1,96 @@
+import {
+  CaretGlyph
+} from "./chunk-DMNZD3Q7.js";
+import {
+  triggerChevronSx,
+  triggerClearSx,
+  triggerCountSx,
+  triggerSx
+} from "./chunk-RCQYCDV6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/CategorySelect/CategoryTrigger.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CategoryTrigger({
+  placeholder,
+  selectionLabel,
+  count,
+  open,
+  disabled,
+  fullWidth,
+  onOpen,
+  onClear,
+  triggerRef,
+  dataTestId,
+  copy
+}) {
+  const theme = useTheme();
+  const hasSelection = Boolean(selectionLabel) || (count ?? 0) > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      ref: triggerRef,
+      disabled,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "data-testid": `${dataTestId}-trigger`,
+      onClick: onOpen,
+      sx: (theme2) => ({
+        ...triggerSx(theme2, hasSelection, open),
+        width: fullWidth ? "100%" : "auto"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: {
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: sxRem(190),
+              flex: fullWidth ? 1 : "0 1 auto",
+              textAlign: "left"
+            },
+            children: selectionLabel ?? placeholder
+          }
+        ),
+        count !== void 0 && count > 0 && /* @__PURE__ */ jsx(Box, { component: "span", sx: triggerCountSx, "data-testid": `${dataTestId}-count`, children: count }),
+        hasSelection && onClear && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": copy.clearSelection,
+            "data-testid": `${dataTestId}-clear-trigger`,
+            sx: triggerClearSx,
+            onClick: (event) => {
+              event.stopPropagation();
+              onClear();
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            children: "\xD7"
+          }
+        ),
+        /* @__PURE__ */ jsx(CaretGlyph, { style: triggerChevronSx(theme, open) })
+      ]
+    }
+  );
+}
+
+export {
+  CategoryTrigger
+};
+//# sourceMappingURL=chunk-DFMLD537.js.map

package/dist/chunk-DKKINJHC.js

@@ -0,0 +1,81 @@
+import {
+  defaultDimensions,
+  muiAnimationFor,
+  muiVariantFor,
+  skeletonLength,
+  skeletonSx
+} from "./chunk-OJSJ4BKM.js";
+import {
+  resolveSkeletonProps,
+  skeletonInstanceTestId
+} from "./chunk-7WDPC46N.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-TYJR4GOF.js";
+
+// src/components/layout/Skeleton/Skeleton.tsx
+import Box from "@mui/material/Box/index.js";
+import MuiSkeleton from "@mui/material/Skeleton/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var Skeleton = React.memo((rawProps) => {
+  const {
+    variant,
+    animation,
+    width,
+    height,
+    count,
+    spacing,
+    borderRadius,
+    className,
+    intensity,
+    glassmorphism,
+    shimmer,
+    style,
+    ...others
+  } = resolveSkeletonProps(rawProps);
+  const dataTestId = resolveTestId(others);
+  const props = withoutTestIdProps(others);
+  const theme = useTheme();
+  const defaults = defaultDimensions(variant);
+  const finalWidth = width ?? defaults.width;
+  const finalHeight = height ?? defaults.height;
+  if (count === 0) {
+    return null;
+  }
+  const singleSkeleton = /* @__PURE__ */ jsx(
+    MuiSkeleton,
+    {
+      variant: muiVariantFor(variant),
+      animation: muiAnimationFor(variant, animation),
+      width: finalWidth === 0 ? 0 : skeletonLength(theme, finalWidth),
+      height: finalHeight === 0 ? 0 : skeletonLength(theme, finalHeight),
+      sx: skeletonSx(theme, {
+        intensity,
+        borderRadius,
+        glassmorphism,
+        shimmer,
+        style
+      }),
+      className,
+      "data-testid": dataTestId,
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+  if (count === 1) {
+    return singleSkeleton;
+  }
+  return /* @__PURE__ */ jsx(Stack, { spacing, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(Box, { children: React.cloneElement(singleSkeleton, {
+    "data-testid": skeletonInstanceTestId(dataTestId, index)
+  }) }, `skeleton-${index}`)) });
+});
+Skeleton.displayName = "Skeleton";
+
+export {
+  Skeleton
+};
+//# sourceMappingURL=chunk-DKKINJHC.js.map

package/dist/chunk-DOPD5J2Q.js

@@ -0,0 +1,181 @@
+import {
+  makeTestId,
+  resolveCodeEditorProps
+} from "./chunk-X3OWMTLO.js";
+import {
+  EditorToolbar
+} from "./chunk-3TVUW7QE.js";
+import {
+  useCodeEditor
+} from "./chunk-AHBNB54V.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.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, useTheme } 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(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+  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: rem(theme, 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: rem(theme, 14),
+  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 = ({
+  theme,
+  minimap,
+  fontPx,
+  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 },
+  // Monaco takes a px number: the design px, at the document's real type scale.
+  fontSize: remPx(theme, fontPx),
+  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: remPx(theme, 16), bottom: remPx(theme, 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 muiTheme = useTheme();
+  const editorOptions = buildEditorOptions({
+    theme: muiTheme,
+    minimap,
+    fontPx: 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 ?? rem(muiTheme, 400),
+          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-DOPD5J2Q.js.map

package/dist/chunk-DQKMOGYZ.js

@@ -0,0 +1,177 @@
+import {
+  RichTextEditorToolbar
+} from "./chunk-WVZBYTIK.js";
+import {
+  useRichTextEditor
+} from "./chunk-EUACQR6N.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/RichTextEditor/RichTextEditor.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TOOLBAR = {
+  bold: true,
+  italic: true,
+  underline: true,
+  strikethrough: false,
+  orderedList: true,
+  unorderedList: true,
+  link: true,
+  image: false,
+  codeBlock: false,
+  quote: false,
+  customItems: []
+};
+var RICH_TEXT_DEFAULTS = {
+  value: "",
+  placeholder: "Start typing...",
+  disabled: false,
+  readOnly: false,
+  toolbar: {}
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, v]) => v !== void 0)
+);
+var editorContentSx = (theme, disabled, placeholder, height) => ({
+  // A number is design px, converted here where it is read (300 when the
+  // caller gives none); a string is any CSS length, used as-is.
+  minHeight: typeof height === "string" ? height : rem(theme, height ?? 300),
+  p: 2,
+  outline: "none",
+  cursor: disabled ? "not-allowed" : "text",
+  "&:empty::before": {
+    content: `"${placeholder}"`,
+    color: theme.palette.text.disabled,
+    pointerEvents: "none"
+  },
+  "& p": {
+    margin: `${rem(theme, 8)} 0`,
+    "&:first-of-type": { marginTop: 0 },
+    "&:last-of-type": { marginBottom: 0 }
+  },
+  "& ul, & ol": { marginLeft: theme.spacing(2) },
+  "& blockquote": {
+    borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,
+    paddingLeft: theme.spacing(2),
+    margin: `${theme.spacing(1)} 0`,
+    fontStyle: "italic",
+    backgroundColor: alpha(theme.palette.primary.main, 0.05)
+  },
+  "& pre": {
+    backgroundColor: alpha(theme.palette.text.primary, 0.08),
+    padding: theme.spacing(1),
+    borderRadius: 1,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+    fontSize: rem(theme, 14),
+    overflow: "auto"
+  },
+  "& a": { color: theme.palette.primary.main, textDecoration: "underline" }
+});
+var shellSx = (theme, isFocused, disabled) => ({
+  border: `1px solid ${fieldEdge(theme)}`,
+  borderRadius: fieldRadiusPx(theme),
+  overflow: "hidden",
+  transition: "border-color 0.2s ease-in-out",
+  ...isFocused && {
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.2)}`
+  },
+  ...disabled && {
+    backgroundColor: theme.palette.action.disabledBackground,
+    color: theme.palette.text.disabled
+  }
+});
+var RichTextEditor = forwardRef(
+  (editorProps, ref) => {
+    const {
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      readOnly,
+      toolbar,
+      height,
+      maxLength,
+      onFocus,
+      onBlur,
+      className,
+      "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) };
+    const theme = useTheme();
+    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
+    const editor = useRichTextEditor({
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      disabled,
+      readOnly,
+      maxLength
+    });
+    return /* @__PURE__ */ jsxs(
+      Paper,
+      {
+        ref,
+        className,
+        "data-testid": testId || "rich-text-editor",
+        elevation: 1,
+        sx: shellSx(theme, editor.isFocused, Boolean(disabled)),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            RichTextEditorToolbar,
+            {
+              config: toolbarConfig,
+              disabled: Boolean(disabled),
+              readOnly: Boolean(readOnly),
+              maxLength,
+              characterCount: editor.characterCount,
+              editorRef: editor.editorRef,
+              onFormat: editor.applyFormat
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: editor.editorRef,
+              contentEditable: !disabled && !readOnly,
+              onInput: editor.handleContentChange,
+              onFocus: editor.handleFocus,
+              onBlur: editor.handleBlur,
+              role: "textbox",
+              "aria-label": ariaLabel || "Rich text editor",
+              "aria-describedby": ariaDescribedBy,
+              "aria-multiline": "true",
+              tabIndex: disabled ? -1 : 0,
+              "data-testid": "editor-content",
+              suppressContentEditableWarning: true,
+              sx: editorContentSx(theme, Boolean(disabled), placeholder, height)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RichTextEditor.displayName = "RichTextEditor";
+var RichTextEditor_default = RichTextEditor;
+
+export {
+  RichTextEditor,
+  RichTextEditor_default
+};
+//# sourceMappingURL=chunk-DQKMOGYZ.js.map