@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-6A4PTK5Q.js

@@ -0,0 +1,175 @@
+import {
+  fieldHeight
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/ContentToolbar/MultiSelectTriggers.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function buildTriggerLabel(selected, options, allLabel) {
+  const size = selected.size;
+  if (size === 0 || size === options.length) return allLabel;
+  const labelMap = new Map(options.map((option) => [option.value, option.label]));
+  const firstValue = selected.values().next().value;
+  const firstLabel = labelMap.get(firstValue) ?? allLabel;
+  if (size === 1) return firstLabel;
+  return `${firstLabel} (+${size - 1})`;
+}
+function InlineTrigger({ label, triggerLabel, open, onOpen, testId }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: sxRem(14) }, children: [
+    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { color: "text.secondary", fontSize: sxRem(14) }, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: onOpen,
+        sx: { minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          triggerLabel,
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: sxRem(14) } })
+        ]
+      }
+    )
+  ] });
+}
+function StackedTrigger({ label, triggerLabel, open, onOpen, testId }) {
+  const baseId = useId();
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsx(Typography, { id: `${baseId}-label`, component: "label", sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        color: "inherit",
+        fullWidth: true,
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-labelledby": `${baseId}-label ${baseId}-value`,
+        onClick: onOpen,
+        endIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: sxRem(18), color: "text.secondary" } }),
+        sx: {
+          justifyContent: "space-between",
+          height: fieldHeight,
+          borderRadius: fieldRadiusPx,
+          px: 1.5,
+          color: "text.primary",
+          textTransform: "none",
+          fontWeight: 400,
+          fontSize: sxRem(14),
+          borderColor: fieldEdge,
+          bgcolor: "background.paper",
+          "&:hover": { borderColor: "text.primary", bgcolor: "background.paper" }
+        },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            id: `${baseId}-value`,
+            sx: { flex: 1, minWidth: 0, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+            children: triggerLabel
+          }
+        )
+      }
+    )
+  ] });
+}
+function PillTrigger({
+  label,
+  open,
+  onOpen,
+  testId,
+  selectedCount,
+  onClear,
+  clearLabel
+}) {
+  const active = selectedCount > 0;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outlined",
+      color: "inherit",
+      size: "small",
+      "data-testid": testId,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      onClick: onOpen,
+      startIcon: active && onClear ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          role: "button",
+          tabIndex: 0,
+          "aria-label": clearLabel,
+          "data-testid": testId ? `${testId}-clear` : void 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            onClear();
+          },
+          onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            event.stopPropagation();
+            onClear();
+          },
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "50%",
+            cursor: "pointer",
+            color: "primary.main",
+            "&:hover": { bgcolor: "primary.main", color: "primary.contrastText" }
+          },
+          children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: sxRem(14) } })
+        }
+      ) : void 0,
+      endIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: sxRem(16) } }),
+      sx: {
+        borderRadius: fieldRadiusPx,
+        height: fieldHeight,
+        px: 1.5,
+        color: "text.primary",
+        fontWeight: 600,
+        fontSize: sxRem(13),
+        textTransform: "none",
+        borderColor: (theme) => active ? theme.palette.primary.main : fieldEdge(theme),
+        bgcolor: active ? "action.selected" : "background.paper",
+        "&:hover": { borderColor: active ? "primary.main" : "text.primary", bgcolor: active ? "action.selected" : "action.hover" }
+      },
+      children: [
+        label,
+        active ? ` (${selectedCount})` : ""
+      ]
+    }
+  );
+}
+
+export {
+  buildTriggerLabel,
+  InlineTrigger,
+  StackedTrigger,
+  PillTrigger
+};
+//# sourceMappingURL=chunk-6A4PTK5Q.js.map

package/dist/chunk-6DGNMASB.js

@@ -0,0 +1,193 @@
+import {
+  useMenubarMenus
+} from "./chunk-42VH7N5L.js";
+import {
+  MenubarToolbar
+} from "./chunk-X3EB67O2.js";
+import {
+  barStyles
+} from "./chunk-UCRGKQUW.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Menubar/Menubar.tsx
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import AppBar from "@mui/material/AppBar/index.js";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "neutral",
+  orientation: "horizontal",
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  sticky: false,
+  transparent: false,
+  blur: false,
+  elevation: 4,
+  fullWidth: true
+};
+var Menubar = (props) => {
+  const {
+    ariaLabel,
+    items,
+    variant,
+    size,
+    color,
+    orientation,
+    glow,
+    pulse,
+    glass,
+    gradient,
+    loading,
+    disabled,
+    className,
+    style,
+    logo,
+    endContent,
+    sticky,
+    transparent,
+    blur,
+    elevation,
+    fullWidth,
+    onClick,
+    onFocus,
+    onBlur,
+    "data-testid": dataTestId
+  } = withDefaults(props, DEFAULTS);
+  const theme = useTheme();
+  const { activeMenu, menuRefs, handleMenuOpen, handleMenuClose, handleItemClick } = useMenubarMenus(onClick);
+  const isVertical = orientation === "vertical";
+  const barSx = barStyles(theme, {
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    glass,
+    gradient,
+    blur,
+    transparent,
+    elevation
+  });
+  const content = /* @__PURE__ */ jsx(
+    MenubarToolbar,
+    {
+      ariaLabel,
+      barSx,
+      items,
+      size,
+      orientation,
+      disabled,
+      loading,
+      logo,
+      endContent,
+      fullWidth,
+      activeMenu,
+      menuRefs,
+      onOpen: handleMenuOpen,
+      onActivate: handleItemClick,
+      onClose: handleMenuClose,
+      onFocus,
+      onBlur
+    }
+  );
+  if (isVertical) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className,
+        sx: {
+          ...style,
+          position: sticky ? "sticky" : "relative",
+          top: sticky ? 0 : "auto",
+          zIndex: theme.zIndex.appBar
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    AppBar,
+    {
+      position: sticky ? "sticky" : "static",
+      className,
+      "data-testid": dataTestId,
+      sx: { ...barSx, ...style },
+      elevation: 0,
+      component: "header",
+      children: content
+    }
+  );
+};
+var MenubarGroup = ({
+  label,
+  items,
+  icon,
+  disabled,
+  open,
+  onOpenChange,
+  onClick,
+  className,
+  style
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const isOpen = open !== void 0 ? open : Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    onOpenChange?.(true);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    onOpenChange?.(false);
+  };
+  const handleItemClick = (item) => {
+    if (item.action) {
+      item.action();
+    }
+    onClick?.(item);
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleClick,
+        disabled,
+        startIcon: icon,
+        endIcon: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}),
+        className,
+        sx: style,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open: isOpen, onClose: handleClose, children: items.map(
+      (item) => item.divider ? /* @__PURE__ */ jsx(Divider, {}, item.id) : /* @__PURE__ */ jsxs(MenuItem, { onClick: () => handleItemClick(item), disabled: item.disabled, children: [
+        item.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: item.icon }),
+        /* @__PURE__ */ jsx(ListItemText, { children: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { ml: 2 }, children: item.shortcut })
+      ] }, item.id)
+    ) })
+  ] });
+};
+
+export {
+  Menubar,
+  MenubarGroup
+};
+//# sourceMappingURL=chunk-6DGNMASB.js.map

package/dist/chunk-6E4L53DF.js

@@ -0,0 +1,108 @@
+import {
+  fieldHeight
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/ContentToolbar/ColumnsMenu.tsx
+import ColumnsIcon from "@mui/icons-material/ViewColumnRounded";
+import Box from "@mui/material/Box/index.js";
+import Checkbox from "@mui/material/Checkbox/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import ListSubheader from "@mui/material/ListSubheader/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ColumnRow({
+  option,
+  onToggle,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenuItem,
+    {
+      "data-testid": testId,
+      onClick: () => onToggle(option.id, !option.visible),
+      disabled: option.locked,
+      sx: { gap: 1 },
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: option.visible,
+            size: "small",
+            disableRipple: true,
+            sx: { p: 0, pointerEvents: "none" },
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: option.label })
+      ]
+    }
+  );
+}
+function ColumnsMenu({
+  columns,
+  onToggle,
+  title = "Columns",
+  ariaLabel = "Toggle columns",
+  "data-testid": testId
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const close = () => setAnchorEl(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "data-testid": testId,
+        "aria-label": ariaLabel,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: {
+          width: fieldHeight,
+          height: fieldHeight,
+          borderRadius: fieldRadiusPx,
+          color: "text.secondary",
+          bgcolor: open ? "action.selected" : "transparent"
+        },
+        children: /* @__PURE__ */ jsx(ColumnsIcon, { sx: { fontSize: sxRem(16) } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: sxRem(200) } } },
+        children: [
+          /* @__PURE__ */ jsx(ListSubheader, { sx: { px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: "text.primary", lineHeight: 1.5 }, children: title }),
+          columns.map((option) => /* @__PURE__ */ jsx(
+            ColumnRow,
+            {
+              option,
+              onToggle,
+              testId: testId ? `${testId}-${option.id}` : void 0
+            },
+            option.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  ColumnsMenu
+};
+//# sourceMappingURL=chunk-6E4L53DF.js.map

package/dist/chunk-6E4XNOAC.js

@@ -0,0 +1,87 @@
+import {
+  SettingSwitchBlock,
+  useSettingSwitchIds
+} from "./chunk-5PN5MY2X.js";
+import {
+  SettingGroupContext
+} from "./chunk-XJQNSMGA.js";
+import {
+  useAsyncSwitch
+} from "./chunk-SALQ65SM.js";
+import {
+  partTestId
+} from "./chunk-CLC4VIOF.js";
+import {
+  dependentsStyles,
+  hintStyles,
+  surfaceStyles,
+  withCallerSx
+} from "./chunk-IQWPVPV5.js";
+import {
+  Icon
+} from "./chunk-JC244QQF.js";
+
+// src/components/layout/SettingCard/SettingGroup.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { forwardRef, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SettingGroup = forwardRef(function SettingGroup2(props, ref) {
+  const {
+    checked,
+    onChange,
+    copy,
+    formatError,
+    inactiveHint,
+    children,
+    disabled = false,
+    dataTestId,
+    className,
+    sx
+  } = props;
+  const theme = useTheme();
+  const ids = useSettingSwitchIds();
+  const hintId = `${useId()}-hint`;
+  const state = useAsyncSwitch({ checked, onChange, formatError, fallback: copy.saveFailed });
+  const active = checked && state.shown && !disabled;
+  const context = useMemo(() => ({ inactive: !active }), [active]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "section",
+      ref,
+      "aria-labelledby": ids.titleId,
+      "aria-busy": state.saving || void 0,
+      "data-active": active,
+      "data-testid": dataTestId,
+      className,
+      sx: withCallerSx((t) => surfaceStyles(t, false), sx),
+      children: [
+        /* @__PURE__ */ jsx(SettingSwitchBlock, { ...props, disabled, ids, state }),
+        !active && /* @__PURE__ */ jsxs(Box, { component: "p", id: hintId, sx: hintStyles(theme), "data-testid": partTestId(dataTestId, "hint"), children: [
+          /* @__PURE__ */ jsx(Icon, { name: "InfoOutlined", size: "xs" }),
+          /* @__PURE__ */ jsx("span", { children: inactiveHint })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "group",
+            "aria-labelledby": ids.titleId,
+            "aria-describedby": active ? void 0 : hintId,
+            "aria-disabled": active ? void 0 : true,
+            inert: !active,
+            sx: dependentsStyles(theme, active),
+            "data-testid": partTestId(dataTestId, "dependents"),
+            children: /* @__PURE__ */ jsx(SettingGroupContext.Provider, { value: context, children })
+          }
+        )
+      ]
+    }
+  );
+});
+SettingGroup.displayName = "SettingGroup";
+
+export {
+  SettingGroup
+};
+//# sourceMappingURL=chunk-6E4XNOAC.js.map

package/dist/chunk-6K2A4PY5.js

@@ -0,0 +1,97 @@
+import {
+  iconSx,
+  sizeConfigs
+} from "./chunk-FJKHDKCV.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.tsx
+import Box from "@mui/material/Box/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var AnimationContainer = styled(Box)(({ theme, ...flags }) => ({
+  ...iconSx(theme, flags)
+}));
+var DEFAULTS = {
+  variant: "none",
+  size: "md",
+  duration: 2,
+  delay: 0,
+  loop: true,
+  glow: false,
+  glass: false,
+  metallic: false,
+  gradient: false,
+  shadow: "none",
+  ripple: false,
+  neon: false,
+  holographic: false
+};
+var AnimatedIcon = (props) => {
+  const {
+    children,
+    variant,
+    size,
+    color,
+    duration,
+    delay,
+    loop,
+    glow,
+    glass,
+    glowColor,
+    metallic,
+    gradient,
+    shadow,
+    ripple,
+    neon,
+    holographic,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    onClick,
+    tabIndex,
+    onFocus,
+    onBlur,
+    dataTestId
+  } = withDefaults(props, DEFAULTS);
+  const config = sizeConfigs[size] ?? sizeConfigs.md;
+  return /* @__PURE__ */ jsx(
+    AnimationContainer,
+    {
+      $size: config.ring,
+      $fontSize: config.glyph,
+      $animationVariant: variant,
+      $duration: duration,
+      $delay: delay,
+      $loop: loop,
+      $glow: glow,
+      $glass: glass,
+      $glowColor: glowColor,
+      $customColor: color,
+      $metallic: metallic,
+      $gradient: gradient,
+      $shadow: shadow,
+      $ripple: ripple,
+      $neon: neon,
+      $holographic: holographic,
+      className,
+      style,
+      role: "img",
+      "aria-label": ariaLabel || `Animated ${variant} icon`,
+      onClick,
+      tabIndex,
+      onFocus,
+      onBlur,
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
+var AnimatedIcon_default = AnimatedIcon;
+
+export {
+  AnimatedIcon,
+  AnimatedIcon_default
+};
+//# sourceMappingURL=chunk-6K2A4PY5.js.map

package/dist/chunk-6L4NWF2W.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Input
+} from "./chunk-73I53SCM.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-D6KL74KI.js";
+
+// src/components/form/total-form/Fields/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextField({ name, label, type = "text", placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, event.target.value)
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  TextField
+};
+//# sourceMappingURL=chunk-6L4NWF2W.js.map