@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-XZTOIEKI.js

@@ -0,0 +1,79 @@
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+
+// src/components/form/InputOTP/InputOTP.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey[700],
+  dark: theme.palette.grey[800],
+  light: theme.palette.grey[500],
+  contrastText: "#fff"
+});
+var namedPalette = (theme, color) => {
+  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 colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || "#fff"
+  };
+};
+var SIZES = {
+  xs: { side: "32px", fontSize: "0.75rem" },
+  sm: { side: "40px", fontSize: "0.875rem" },
+  md: { side: "48px", fontSize: "1rem" },
+  lg: { side: "56px", fontSize: "1.125rem" },
+  xl: { side: "64px", fontSize: "1.25rem" }
+};
+var otpSlotSx = (theme, flags) => {
+  const { customColor = "primary", customSize = "md", glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  const { side, fontSize } = SIZES[customSize] ?? SIZES.md;
+  return {
+    width: side,
+    height: side,
+    "& .MuiOutlinedInput-root": {
+      width: side,
+      height: side,
+      fontSize,
+      fontWeight: 600,
+      textAlign: "center",
+      borderRadius: theme.spacing(1),
+      ...glass && {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        "& fieldset": { border: `1px solid ${fieldEdge(theme)}` }
+      },
+      ...gradient && {
+        "&.Mui-focused fieldset": {
+          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,
+          borderWidth: "2px"
+        }
+      },
+      "& input": { textAlign: "center", padding: 0, fontWeight: "inherit" },
+      "&:hover fieldset": { borderColor: palette.main },
+      "&.Mui-focused fieldset": { borderColor: palette.main, borderWidth: "2px" }
+    }
+  };
+};
+
+export {
+  otpSlotSx
+};
+//# sourceMappingURL=chunk-XZTOIEKI.js.map

package/dist/chunk-Y46RBFBV.js

@@ -0,0 +1,182 @@
+import {
+  DiscloseSlot,
+  DragSlot,
+  SelectSlot
+} from "./chunk-GBRKP5GZ.js";
+import {
+  actionProps,
+  metaShape,
+  rowStyles,
+  useRowShell
+} from "./chunk-TVO5STZB.js";
+import {
+  ListCardActions,
+  ListCardCaption,
+  ListCardMeta,
+  ListCardTail
+} from "./chunk-BRSF5NRT.js";
+import {
+  useDisclosure
+} from "./chunk-2JCRNWHE.js";
+import {
+  DropIndicator
+} from "./chunk-JCJGJX7V.js";
+import {
+  cellRailsTemplate
+} from "./chunk-CZPU5TW3.js";
+import {
+  ListCardCells,
+  cellTracks,
+  useCellConfig
+} from "./chunk-6VP2L3DJ.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Card
+} from "./chunk-D2IASECY.js";
+
+// src/components/data-display/DataViews/base-list-card.tsx
+import Collapse from "@mui/material/Collapse/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useResolvedCells(props, inGroup) {
+  const groupCells = useCellConfig();
+  const cells = groupCells ?? props.cells ?? null;
+  const configured = cells != null && cells.length > 0 && props.row != null;
+  const cellTemplate = configured && !inGroup ? cellRailsTemplate(cellTracks(cells)) : null;
+  return { cells, configured, cellTemplate };
+}
+function RowContent({
+  card,
+  cells,
+  configured,
+  slot,
+  actionable,
+  meta
+}) {
+  if (configured && cells != null) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ListCardCells, { cells, row: card.row }),
+      /* @__PURE__ */ jsx(
+        ListCardActions,
+        {
+          actions: actionable ? card.actions : void 0,
+          alwaysVisible: card.actionsAlwaysVisible,
+          menu: card.menu,
+          testId: slot
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ListCardCaption,
+      {
+        title: card.title,
+        subtitle: card.subtitle,
+        href: card.href,
+        target: card.target,
+        testId: slot("title")
+      }
+    ),
+    /* @__PURE__ */ jsx(ListCardMeta, { meta: card.meta, metaSlot: card.metaSlot, trailingRule: card.value != null }),
+    /* @__PURE__ */ jsx(
+      ListCardTail,
+      {
+        value: card.value,
+        separated: meta.present,
+        actions: actionable ? card.actions : void 0,
+        actionsAlwaysVisible: card.actionsAlwaysVisible,
+        menu: card.menu,
+        testId: slot
+      }
+    )
+  ] });
+}
+function ExpandableBody({
+  disclosure,
+  padY,
+  pad,
+  children
+}) {
+  if (!disclosure.expandable) return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(default2, { sx: { gridColumn: "1 / -1", minWidth: 0 }, children: /* @__PURE__ */ jsx(Collapse, { in: disclosure.expanded, timeout: 150, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      id: disclosure.regionId,
+      role: "region",
+      sx: {
+        minWidth: 0,
+        // `padY`, not a fraction of the horizontal padding. The card's own
+        // `py` wraps the summary AND the body, so once the body is in flow
+        // the summary has no bottom padding of its own — at `comfortable`
+        // the row visibly lost the height it had while closed.
+        mt: padY,
+        pt: padY,
+        // A RULE BETWEEN SUMMARY AND BODY, bled through the row's horizontal
+        // padding so it spans the card edge to edge. Inset, it reads as a
+        // border around the content rather than a division of the card.
+        borderTop: 1,
+        borderColor: "divider",
+        mx: -pad,
+        px: pad
+      },
+      children
+    }
+  ) }) });
+}
+function BaseListCard(props) {
+  const { selected = false, onClick } = props;
+  const shell = useRowShell(props);
+  const { actionable, selectable, slot, drag, reserve, pad, padY, acts } = shell;
+  const meta = metaShape(props);
+  const disclosure = useDisclosure(props);
+  const { cells, configured, cellTemplate } = useResolvedCells(props, shell.group != null);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      className: props.className,
+      dataTestId: props.testId,
+      "aria-label": props["aria-label"],
+      "aria-disabled": actionable ? void 0 : true,
+      onContextMenu: props.onContextMenu,
+      ...acts ? actionProps(onClick) : {},
+      ...drag.itemProps,
+      sx: rowStyles(props, shell, cellTemplate),
+      children: [
+        drag.dropEdge != null && /* @__PURE__ */ jsx(DropIndicator, { edge: drag.dropEdge }),
+        /* @__PURE__ */ jsx(
+          DiscloseSlot,
+          {
+            expandable: disclosure.expandable,
+            expanded: disclosure.expanded,
+            reserve,
+            onToggle: disclosure.toggle,
+            controls: disclosure.regionId,
+            testId: slot("disclose")
+          }
+        ),
+        /* @__PURE__ */ jsx(DragSlot, { drag, reserve, testId: slot("drag") }),
+        /* @__PURE__ */ jsx(
+          SelectSlot,
+          {
+            selectable,
+            selected,
+            reserve,
+            onToggleSelect: props.onToggleSelect,
+            testId: slot("checkbox")
+          }
+        ),
+        /* @__PURE__ */ jsx(default2, { "data-slot": "leading", sx: { display: "flex", alignItems: "center" }, children: props.leading }),
+        /* @__PURE__ */ jsx(RowContent, { card: props, cells, configured, slot, actionable, meta }),
+        /* @__PURE__ */ jsx(ExpandableBody, { disclosure, padY, pad, children: props.children })
+      ]
+    }
+  );
+}
+
+export {
+  BaseListCard
+};
+//# sourceMappingURL=chunk-Y46RBFBV.js.map

package/dist/chunk-YCCKY5VW.js

@@ -0,0 +1,173 @@
+import {
+  highlightSegments
+} from "./chunk-LR6MSKTT.js";
+import {
+  CheckGlyph,
+  DisclosureGlyph
+} from "./chunk-DMNZD3Q7.js";
+import {
+  METRICS,
+  checkboxBarSx,
+  checkboxSx,
+  chevronButtonSx,
+  markSx,
+  radioSx,
+  rowMetaSx,
+  rowNameSx,
+  rowSx,
+  sectionHeadSx
+} from "./chunk-TFO6GBW7.js";
+
+// src/components/form/CategorySelect/CategoryRows.tsx
+import Box from "@mui/material/Box/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function HighlightedName({
+  text,
+  query
+}) {
+  const segments = highlightSegments(text, query);
+  return /* @__PURE__ */ jsx(Fragment, { children: segments.map(
+    (segment, index) => segment.match ? /* @__PURE__ */ jsx(Box, { component: "mark", sx: markSx, children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx("span", { children: segment.text }, `${segment.text}-${index}`)
+  ) });
+}
+function CategoryCheckbox({ state }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => checkboxSx(theme, state), "aria-hidden": "true", children: [
+    state === "on" && /* @__PURE__ */ jsx(CheckGlyph, {}),
+    state === "partial" && /* @__PURE__ */ jsx(Box, { sx: checkboxBarSx })
+  ] });
+}
+function CategoryRadio({ on }) {
+  return /* @__PURE__ */ jsx(Box, { sx: (theme) => radioSx(theme, on), "aria-hidden": "true" });
+}
+function rowMeta(selectedCount, showCounts, count) {
+  if (selectedCount > 0) return { text: String(selectedCount), selected: true };
+  if (showCounts && count !== void 0) return { text: String(count), selected: false };
+  return null;
+}
+function HeadRowDisclosure({
+  option,
+  expanded,
+  expandable,
+  onToggleExpanded,
+  dataTestId,
+  copy
+}) {
+  if (!expandable) {
+    return /* @__PURE__ */ jsx(Box, { sx: { width: METRICS.chevronButton, flex: "0 0 auto" } });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      tabIndex: -1,
+      "aria-label": expanded ? copy.collapseCategory(option.name) : copy.expandCategory(option.name),
+      "data-testid": `${dataTestId}-expand-${option.id}`,
+      sx: (theme) => chevronButtonSx(theme, expanded),
+      onClick: (event) => {
+        event.stopPropagation();
+        onToggleExpanded();
+      },
+      children: /* @__PURE__ */ jsx(DisclosureGlyph, {})
+    }
+  );
+}
+function HeadRowControl({
+  checkState,
+  single
+}) {
+  if (!checkState) return /* @__PURE__ */ jsx(Box, { sx: { width: METRICS.boxSize, flex: "0 0 auto" } });
+  if (single) return /* @__PURE__ */ jsx(CategoryRadio, { on: checkState === "on" });
+  return /* @__PURE__ */ jsx(CategoryCheckbox, { state: checkState });
+}
+function CategoryHeadRow({
+  option,
+  query,
+  expanded,
+  active,
+  sheet,
+  checkState,
+  single,
+  expandable,
+  selectedCount,
+  showCounts,
+  onToggleExpanded,
+  onActivate,
+  dataTestId,
+  copy
+}) {
+  const meta = rowMeta(selectedCount, showCounts, option.count);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "div",
+      role: checkState ? "option" : "button",
+      "aria-selected": checkState ? checkState === "on" : void 0,
+      "aria-expanded": expandable ? expanded : void 0,
+      "data-testid": `${dataTestId}-category-${option.id}`,
+      sx: (theme) => rowSx(theme, active, sheet),
+      onClick: onActivate,
+      children: [
+        /* @__PURE__ */ jsx(
+          HeadRowDisclosure,
+          {
+            option,
+            expanded,
+            expandable,
+            onToggleExpanded,
+            dataTestId,
+            copy
+          }
+        ),
+        /* @__PURE__ */ jsx(HeadRowControl, { checkState, single }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowNameSx(theme, true), children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) }),
+        meta && /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowMetaSx(theme, meta.selected), children: meta.text })
+      ]
+    }
+  );
+}
+function SubcategoryRow({
+  option,
+  query,
+  selected,
+  active,
+  sheet,
+  single,
+  showCounts,
+  onActivate,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "div",
+      role: "option",
+      "aria-selected": selected,
+      "data-testid": `${dataTestId}-option-${option.id}`,
+      sx: (theme) => ({ ...rowSx(theme, active, sheet), paddingLeft: "14px" }),
+      onClick: onActivate,
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { width: METRICS.chevronButton, flex: "0 0 auto" } }),
+        single ? /* @__PURE__ */ jsx(CategoryRadio, { on: selected }) : /* @__PURE__ */ jsx(CategoryCheckbox, { state: selected ? "on" : "off" }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowNameSx(theme, false), children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) }),
+        showCounts && option.count !== void 0 && /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowMetaSx(theme, false), children: option.count })
+      ]
+    }
+  );
+}
+function CategorySectionHeading({
+  option,
+  query
+}) {
+  return /* @__PURE__ */ jsx(Box, { sx: sectionHeadSx, children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) });
+}
+
+export {
+  HighlightedName,
+  CategoryCheckbox,
+  CategoryRadio,
+  CategoryHeadRow,
+  SubcategoryRow,
+  CategorySectionHeading
+};
+//# sourceMappingURL=chunk-YCCKY5VW.js.map

package/dist/chunk-YDI6IJ6F.js

@@ -0,0 +1,170 @@
+import {
+  RichTextEditorToolbar
+} from "./chunk-SE6ERQY5.js";
+import {
+  useRichTextEditor
+} from "./chunk-774B27QA.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.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: {},
+  height: 300
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, v]) => v !== void 0)
+);
+var editorContentSx = (theme, disabled, placeholder, height) => ({
+  minHeight: typeof height === "number" ? `${height}px` : height,
+  p: 2,
+  outline: "none",
+  cursor: disabled ? "not-allowed" : "text",
+  "&:empty::before": {
+    content: `"${placeholder}"`,
+    color: theme.palette.text.disabled,
+    pointerEvents: "none"
+  },
+  "& p": {
+    margin: "8px 0",
+    "&:first-of-type": { marginTop: 0 },
+    "&:last-of-type": { marginBottom: 0 }
+  },
+  "& ul, & ol": { marginLeft: theme.spacing(2) },
+  "& blockquote": {
+    borderLeft: `4px 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: "0.875rem",
+    overflow: "auto"
+  },
+  "& a": { color: theme.palette.primary.main, textDecoration: "underline" }
+});
+var shellSx = (theme, isFocused, disabled) => ({
+  border: `1px solid ${fieldEdge(theme)}`,
+  borderRadius: 1,
+  overflow: "hidden",
+  transition: "border-color 0.2s ease-in-out",
+  ...isFocused && {
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 2px ${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-YDI6IJ6F.js.map