@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-S6T722WH.js

@@ -0,0 +1,181 @@
+import {
+  DeleteViewDialog
+} from "./chunk-LS42VJAI.js";
+import {
+  DataViewsGrid
+} from "./chunk-AGKQBS4C.js";
+import {
+  viewStateKey
+} from "./chunk-ZOLAYP2D.js";
+import {
+  ViewDialogs,
+  ViewMutationErrorAlert
+} from "./chunk-XPS7FWZS.js";
+import {
+  useSavedViewsController
+} from "./chunk-6IAQGSXD.js";
+
+// src/components/data-display/DataViews/DataViewsTableBase.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useUrlSyncState(server, initialState) {
+  const isServerMode = server !== void 0;
+  return useMemo(
+    () => isServerMode && initialState ? {
+      search: initialState.search,
+      pills: initialState.pills,
+      ranges: initialState.ranges,
+      sortBy: initialState.sortBy,
+      // The scope belongs in the URL-driven slice alongside them: a
+      // `?view=recusados`-style deep link and browser back/forward must
+      // move the tab strip, and they must do it WITHOUT resetting the
+      // user's hidden columns — which is the whole reason this is a
+      // merging `syncState` and not a replacing `appliedState`.
+      scope: initialState.scope
+    } : void 0,
+    [isServerMode, initialState]
+  );
+}
+function resolveInitialView(views, requestedId) {
+  const requested = requestedId ? views.find((view) => view.id === requestedId) : void 0;
+  return requested ?? views.find((view) => view.isDefault);
+}
+function buildDisplayView({
+  ctl,
+  views,
+  activeView,
+  dirty,
+  onRequestDelete
+}) {
+  return {
+    activeViewName: ctl.activeViewName,
+    dirty,
+    onReset: () => activeView ? ctl.applyView(activeView) : ctl.selectMain(),
+    // Only offer "Atualizar" when there IS a view to update — otherwise the
+    // single footer button is a plain "Salvar visão".
+    onUpdate: activeView ? () => ctl.openEdit(activeView) : void 0,
+    onSaveAs: ctl.openCreate,
+    // The views themselves, not a dropdown: the panel renders them in its own
+    // body (see `data-views-view-nav`), so there is no second popover to clip
+    // the row actions.
+    nav: {
+      views,
+      activeViewId: activeView?.id ?? null,
+      onSelectView: (id) => {
+        const next = id === null ? null : views.find((view) => view.id === id);
+        if (next) ctl.applyView(next);
+        else ctl.selectMain();
+      },
+      onEditView: ctl.openEdit,
+      onPatchView: (view, changes) => void ctl.patchView(view, changes),
+      onDeleteView: onRequestDelete
+    }
+  };
+}
+function useDirtyTracking(ctl) {
+  const [dirty, setDirty] = useState(false);
+  const [savedAt, setSavedAt] = useState(0);
+  const baseline = useRef(null);
+  const appliedKey = JSON.stringify(ctl.applied ?? null);
+  useEffect(() => {
+    baseline.current = null;
+    setDirty(false);
+  }, [appliedKey, savedAt]);
+  return {
+    dirty,
+    noteState: (state) => {
+      ctl.currentRef.current = state;
+      const key = viewStateKey(state);
+      if (baseline.current === null) {
+        baseline.current = key;
+        setDirty(false);
+        return;
+      }
+      const next = key !== baseline.current;
+      setDirty((prev) => prev === next ? prev : next);
+    },
+    markSaved: () => setSavedAt((tick) => tick + 1)
+  };
+}
+function DataViewsTableBase(props) {
+  const {
+    initialViewId = null,
+    persistence,
+    router,
+    columns,
+    fields,
+    testIdPrefix = "table",
+    views,
+    server,
+    initialState
+  } = props;
+  const initialView = resolveInitialView(views, initialViewId);
+  const columnIds = columns.map((col) => col.id);
+  const ctl = useSavedViewsController(persistence, router, columnIds, views, initialView, initialState);
+  const { dirty, noteState, markSaved } = useDirtyTracking(ctl);
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const activeView = views.find((view) => view.name === ctl.activeViewName);
+  const displayView = buildDisplayView({
+    ctl,
+    views,
+    activeView,
+    dirty,
+    onRequestDelete: setPendingDelete
+  });
+  const syncState = useUrlSyncState(server, initialState);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ViewMutationErrorAlert, { error: ctl.mutationError, onClose: ctl.clearMutationError, testIdPrefix }),
+    /* @__PURE__ */ jsx(
+      DataViewsGrid,
+      {
+        ...props,
+        testIdPrefix,
+        appliedState: ctl.applied,
+        syncState,
+        onStateChange: noteState,
+        displayView
+      }
+    ),
+    renderViewDialogs(ctl, fields, columns, views, testIdPrefix, markSaved),
+    /* @__PURE__ */ jsx(
+      DeleteViewDialog,
+      {
+        view: pendingDelete,
+        onClose: () => setPendingDelete(null),
+        onConfirm: (view) => {
+          void ctl.handleDelete(view);
+          setPendingDelete(null);
+        },
+        testIdPrefix
+      }
+    )
+  ] });
+}
+function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
+  return /* @__PURE__ */ jsx(
+    ViewDialogs,
+    {
+      saveOpen: ctl.saveOpen,
+      onCloseSave: ctl.closeSave,
+      currentState: ctl.editing ? ctl.editing.state : ctl.currentRef.current,
+      fields,
+      columns,
+      editing: ctl.editing,
+      onSave: async (payload) => {
+        await ctl.handleSave(payload);
+        onSaved();
+      },
+      manageOpen: ctl.manageOpen,
+      onCloseManage: () => ctl.setManageOpen(false),
+      views,
+      onEditFromManage: ctl.editFromManage,
+      onDelete: (view) => void ctl.handleDelete(view),
+      testIdPrefix
+    }
+  );
+}
+
+export {
+  DataViewsTableBase
+};
+//# sourceMappingURL=chunk-S6T722WH.js.map

package/dist/chunk-S7CAXRRP.js

@@ -0,0 +1,80 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-6HLRXICF.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DataViews/data-views-empty.tsx
+import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
+import InboxRoundedIcon from "@mui/icons-material/InboxRounded";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataViewsEmpty({
+  filtered,
+  onClearFilters,
+  emptyState,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const Icon = filtered ? FilterAltOffRoundedIcon : InboxRoundedIcon;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": `${testIdPrefix}-empty${filtered ? "-filtered" : ""}`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        py: 8,
+        px: 2
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            sx: {
+              display: "inline-flex",
+              p: 2,
+              mb: 1.5,
+              borderRadius: "50%",
+              bgcolor: "action.hover",
+              color: "text.disabled"
+            },
+            children: /* @__PURE__ */ jsx(Icon, {})
+          }
+        ),
+        filtered ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontWeight: 600 }, children: copy.grid.emptyFilteredTitle }) }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", mt: 0.5, mb: 2, color: "text.secondary", maxWidth: 380 }, children: copy.grid.emptyFilteredHint }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              color: "secondary",
+              onClick: onClearFilters,
+              dataTestId: `${testIdPrefix}-empty-clear`,
+              children: copy.grid.emptyFilteredAction
+            }
+          )
+        ] }) : (
+          // The page's own words for "nothing here yet" — it knows what the
+          // entity is and how one comes to exist; this component does not.
+          emptyState
+        )
+      ]
+    }
+  );
+}
+
+export {
+  DataViewsEmpty
+};
+//# sourceMappingURL=chunk-S7CAXRRP.js.map

package/dist/chunk-S7CAXRRP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-empty.tsx"],"sourcesContent":["\"use client\";\n\nimport FilterAltOffRoundedIcon from \"@mui/icons-material/FilterAltOffRounded\";\nimport InboxRoundedIcon from \"@mui/icons-material/InboxRounded\";\n\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/**\n * TWO EMPTY STATES, NOT ONE.\n *\n * \"Nenhum pagamento registrado\" under an active filter is a lie, and it is the\n * expensive kind: the operator reads it as \"this store has no payments\" and\n * goes looking for the bug somewhere else. The page's own empty copy answers\n * \"there is nothing here yet\"; it cannot answer \"nothing matches what you\n * typed\", because it does not know what was typed.\n *\n * So the grid renders the FILTERED variant itself — it is the only party that\n * knows a filter is applied — and defers to the host's `emptyState` only when\n * the list is genuinely empty. The filtered one carries the way out, which is\n * the whole point: the fix is one click, and it is right there.\n */\nexport function DataViewsEmpty({\n  filtered,\n  onClearFilters,\n  emptyState,\n  testIdPrefix,\n}: {\n  /** Is anything narrowing the list right now (search, pills or ranges)? */\n  filtered: boolean;\n  onClearFilters: () => void;\n  /** The page's own copy for a genuinely empty list. */\n  emptyState?: React.ReactNode;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const Icon = filtered ? FilterAltOffRoundedIcon : InboxRoundedIcon;\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-empty${filtered ? \"-filtered\" : \"\"}`}\n      sx={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        textAlign: \"center\",\n        py: 8,\n        px: 2,\n      }}\n    >\n      <Box\n        sx={{\n          display: \"inline-flex\",\n          p: 2,\n          mb: 1.5,\n          borderRadius: \"50%\",\n          bgcolor: \"action.hover\",\n          color: \"text.disabled\",\n        }}\n      >\n        <Icon />\n      </Box>\n      {filtered ? (\n        <>\n          <Text variant=\"body\" as=\"p\">\n            <Box component=\"span\" sx={{ fontWeight: 600 }}>\n              {copy.grid.emptyFilteredTitle}\n            </Box>\n          </Text>\n          <Text variant=\"caption\" as=\"p\">\n            <Box component=\"span\" sx={{ display: \"block\", mt: 0.5, mb: 2, color: \"text.secondary\", maxWidth: 380 }}>\n              {copy.grid.emptyFilteredHint}\n            </Box>\n          </Text>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            color=\"secondary\"\n            onClick={onClearFilters}\n            dataTestId={`${testIdPrefix}-empty-clear`}\n          >\n            {copy.grid.emptyFilteredAction}\n          </Button>\n        </>\n      ) : (\n        // The page's own words for \"nothing here yet\" — it knows what the\n        // entity is and how one comes to exist; this component does not.\n        emptyState\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAEA,OAAO,6BAA6B;AACpC,OAAO,sBAAsB;AA2DrB,SAGA,UAHA,KAGA,YAHA;AArCD,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOsB;AACpB,QAAM,OAAO,iBAAiB;AAC9B,QAAM,OAAO,WAAW,0BAA0B;AAClD,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,eAAa,GAAG,YAAY,SAAS,WAAW,cAAc,EAAE;AAAA,MAChE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,GAAG;AAAA,cACH,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,SAAS;AAAA,cACT,OAAO;AAAA,YACT;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA,QACC,WACC,iCACE;AAAA,8BAAC,QAAK,SAAQ,QAAO,IAAG,KACtB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,YAAY,IAAI,GACzC,eAAK,KAAK,oBACb,GACF;AAAA,UACA,oBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,SAAS,SAAS,IAAI,KAAK,IAAI,GAAG,OAAO,kBAAkB,UAAU,IAAI,GAClG,eAAK,KAAK,mBACb,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAM;AAAA,cACN,SAAS;AAAA,cACT,YAAY,GAAG,YAAY;AAAA,cAE1B,eAAK,KAAK;AAAA;AAAA,UACb;AAAA,WACF;AAAA;AAAA;AAAA,UAIA;AAAA;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["default"]}

package/dist/chunk-SBS7H6WY.js

@@ -0,0 +1,181 @@
+// src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+var pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+  }
+`;
+var BAR_VARIANTS = {
+  glass: (theme, elevation) => ({
+    background: theme.palette.mode === "dark" ? "rgba(17, 24, 39, 0.7)" : "rgba(255, 255, 255, 0.7)",
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+    border: `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"}`,
+    boxShadow: theme.palette.mode === "dark" ? `0 ${elevation * 4}px ${elevation * 8}px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)` : `0 ${elevation * 4}px ${elevation * 8}px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)`
+  }),
+  elevated: (theme, elevation) => ({
+    background: theme.palette.background.paper,
+    boxShadow: theme.shadows[elevation] || theme.shadows[1],
+    borderRadius: theme.spacing(1.5)
+  }),
+  outlined: (theme, _elevation) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.spacing(1)
+  })
+};
+var separatorStyles = (theme, size, color, _visualStyle) => ({
+  "& .MuiBreadcrumbs-separator": {
+    marginLeft: theme.spacing(size === "sm" ? 0.5 : size === "lg" ? 1.5 : 1),
+    marginRight: theme.spacing(size === "sm" ? 0.5 : size === "lg" ? 1.5 : 1),
+    opacity: 0.6,
+    transition: "all 0.2s ease",
+    ...color === "primary" && {
+      color: theme.palette.primary.main
+    },
+    ...color === "secondary" && {
+      color: theme.palette.secondary.main
+    }
+  }
+});
+var barVariantStyles = (theme, visualStyle, elevation) => visualStyle ? BAR_VARIANTS[visualStyle]?.(theme, elevation) ?? {} : {};
+var breadcrumbsBarStyles = ({
+  theme,
+  size,
+  color,
+  visualStyle,
+  elevation = 0
+}) => ({
+  padding: theme.spacing(size === "sm" ? 0.75 : size === "lg" ? 1.5 : 1, 2),
+  borderRadius: theme.spacing(visualStyle === "glass" ? 2 : 1),
+  ...barVariantStyles(theme, visualStyle, elevation),
+  animation: `${slideIn} 0.3s ease-out`,
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  position: "relative",
+  // Glass morphism effect
+  // Elevated variant
+  // Outlined variant
+  "& .MuiBreadcrumbs-ol": {
+    alignItems: "center",
+    flexWrap: "nowrap",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap",
+      gap: theme.spacing(0.5)
+    }
+  },
+  ...separatorStyles(theme, size, color, visualStyle),
+  "&:hover": {
+    ...visualStyle === "glass" && {
+      background: theme.palette.mode === "dark" ? "rgba(17, 24, 39, 0.85)" : "rgba(255, 255, 255, 0.85)",
+      boxShadow: theme.palette.mode === "dark" ? `0 ${elevation * 6}px ${elevation * 12}px rgba(0, 0, 0, 0.4)` : `0 ${elevation * 6}px ${elevation * 12}px rgba(0, 0, 0, 0.12)`
+    }
+  }
+});
+var linkGlassIdleStyles = (theme) => ({
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    opacity: 0,
+    transition: "opacity 0.3s ease",
+    borderRadius: "inherit"
+  }
+});
+var linkActiveStyles = (theme, visualStyle) => ({
+  pointerEvents: "none",
+  cursor: "default",
+  color: theme.palette.primary.main,
+  fontWeight: 600,
+  ...visualStyle === "glass" && {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    animation: `${pulse} 2s infinite`
+  }
+});
+var linkHoverStyles = (theme, visualStyle) => ({
+  '&:hover, &[data-hover="true"]': {
+    color: theme.palette.primary.main,
+    backgroundColor: alpha(theme.palette.primary.main, visualStyle === "glass" ? 0.1 : 0.08),
+    transform: "translateY(-1px)",
+    "&::before": {
+      opacity: 1
+    },
+    "& .breadcrumb-icon": {
+      transform: "scale(1.1)"
+    }
+  }
+});
+var breadcrumbLinkStyles = ({
+  theme,
+  size,
+  active,
+  visualStyle
+}) => ({
+  ...visualStyle === "glass" && !active ? linkGlassIdleStyles(theme) : {},
+  ...active ? linkActiveStyles(theme, visualStyle) : {},
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textDecoration: "none",
+  fontSize: size === "sm" ? "0.875rem" : size === "lg" ? "1.125rem" : "1rem",
+  fontWeight: active ? 600 : 400,
+  color: active ? theme.palette.text.primary : theme.palette.text.secondary,
+  padding: theme.spacing(0.5, 0.75),
+  borderRadius: theme.spacing(0.75),
+  position: "relative",
+  overflow: "hidden",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  // Add subtle background for glass variant
+  ...linkHoverStyles(theme, visualStyle),
+  "&:active": {
+    transform: "translateY(0)",
+    backgroundColor: alpha(theme.palette.primary.main, 0.12)
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: 2,
+    backgroundColor: alpha(theme.palette.primary.main, 0.04)
+  },
+  "& .breadcrumb-icon": {
+    transition: "transform 0.2s ease"
+  },
+  // Mobile responsiveness
+  [theme.breakpoints.down("sm")]: {
+    fontSize: size === "lg" ? "1rem" : size === "sm" ? "0.75rem" : "0.875rem",
+    padding: theme.spacing(0.375, 0.5)
+  }
+});
+var sizeIconMap = {
+  xs: "small",
+  sm: "small",
+  md: "small",
+  lg: "medium",
+  xl: "medium"
+};
+
+export {
+  slideIn,
+  pulse,
+  breadcrumbsBarStyles,
+  breadcrumbLinkStyles,
+  sizeIconMap
+};
+//# sourceMappingURL=chunk-SBS7H6WY.js.map

package/dist/chunk-SBS7H6WY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nexport const slideIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nexport const pulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);\n  }\n  70% {\n    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);\n  }\n`;\n\nconst BAR_VARIANTS: Record<string, (theme: Theme, elevation: number) => CSSObject> = {\n  glass: (theme, elevation) => ({\n      background:\n        theme.palette.mode === 'dark' ? 'rgba(17, 24, 39, 0.7)' : 'rgba(255, 255, 255, 0.7)',\n      backdropFilter: 'blur(10px)',\n      WebkitBackdropFilter: 'blur(10px)',\n      border: `1px solid ${\n        theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'\n      }`,\n      boxShadow:\n        theme.palette.mode === 'dark'\n          ? `0 ${elevation * 4}px ${elevation * 8}px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)`\n          : `0 ${elevation * 4}px ${elevation * 8}px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)` }),\n  elevated: (theme, elevation) => ({\n      background: theme.palette.background.paper,\n      boxShadow: theme.shadows[elevation] || theme.shadows[1],\n      borderRadius: theme.spacing(1.5) }),\n  outlined: (theme, _elevation) => ({\n      border: `1px solid ${theme.palette.divider}`,\n      borderRadius: theme.spacing(1) }) };\n\n// Spacing and colour for the separator glyphs between crumbs.\nconst separatorStyles = (\n  theme: Theme,\n  size: string | undefined,\n  color: string | undefined,\n  _visualStyle: string | undefined,\n): CSSObject => ({\n  '& .MuiBreadcrumbs-separator': {\n      marginLeft: theme.spacing(size === 'sm' ? 0.5 : size === 'lg' ? 1.5 : 1),\n      marginRight: theme.spacing(size === 'sm' ? 0.5 : size === 'lg' ? 1.5 : 1),\n      opacity: 0.6,\n      transition: 'all 0.2s ease',\n      ...(color === 'primary' && {\n        color: theme.palette.primary.main }),\n      ...(color === 'secondary' && {\n        color: theme.palette.secondary.main }) } });\n\n// Only one visual style applies at a time, so a lookup replaces three mutually\n// exclusive spreads.\nconst barVariantStyles = (theme: Theme, visualStyle: string | undefined, elevation: number): CSSObject =>\n  visualStyle ? (BAR_VARIANTS[visualStyle]?.(theme, elevation) ?? {}) : {};\n\n// The bar's own styling, lifted out so the styled() callback is a single spread\n// rather than seventy lines of conditionals.\nexport const breadcrumbsBarStyles = ({\n  theme,\n  size,\n  color,\n  visualStyle,\n  elevation = 0 }: {\n  theme: Theme;\n  size?: string;\n  color?: string;\n  visualStyle?: string;\n  elevation?: number;\n}): CSSObject => ({\n    padding: theme.spacing(size === 'sm' ? 0.75 : size === 'lg' ? 1.5 : 1, 2),\n    borderRadius: theme.spacing(visualStyle === 'glass' ? 2 : 1),\n  ...barVariantStyles(theme, visualStyle, elevation),\n    animation: `${slideIn} 0.3s ease-out`,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n\n    // Glass morphism effect\n\n\n    // Elevated variant\n\n\n    // Outlined variant\n\n\n    '& .MuiBreadcrumbs-ol': {\n      alignItems: 'center',\n      flexWrap: 'nowrap',\n      [theme.breakpoints.down('sm')]: {\n        flexWrap: 'wrap',\n        gap: theme.spacing(0.5) } },\n\n    ...separatorStyles(theme, size, color, visualStyle),\n\n\n    '&:hover': {\n      ...(visualStyle === 'glass' && {\n        background:\n          theme.palette.mode === 'dark' ? 'rgba(17, 24, 39, 0.85)' : 'rgba(255, 255, 255, 0.85)',\n        boxShadow:\n          theme.palette.mode === 'dark'\n            ? `0 ${elevation * 6}px ${elevation * 12}px rgba(0, 0, 0, 0.4)`\n            : `0 ${elevation * 6}px ${elevation * 12}px rgba(0, 0, 0, 0.12)` }) } });\n\n// The idle glass treatment and the active-crumb treatment are mutually\n// exclusive; keeping them as named pieces takes both branches out of the main\n// style function.\nconst linkGlassIdleStyles = (theme: Theme): CSSObject => ({\n        '&::before': {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,\n          opacity: 0,\n          transition: 'opacity 0.3s ease',\n          borderRadius: 'inherit' } });\n\nconst linkActiveStyles = (theme: Theme, visualStyle?: string): CSSObject => ({\n      pointerEvents: 'none',\n      cursor: 'default',\n      color: theme.palette.primary.main,\n      fontWeight: 600,\n\n      ...(visualStyle === 'glass' && {\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,\n        animation: `${pulse} 2s infinite` }) });\n\n// Hover treatment. The tint is a touch stronger on the glass variant so it still\n// reads against the translucent bar.\nconst linkHoverStyles = (theme: Theme, visualStyle?: string): CSSObject => ({\n  '&:hover, &[data-hover=\"true\"]': {\n      color: theme.palette.primary.main,\n      backgroundColor: alpha(theme.palette.primary.main, visualStyle === 'glass' ? 0.1 : 0.08),\n      transform: 'translateY(-1px)',\n\n      '&::before': {\n        opacity: 1 },\n\n      '& .breadcrumb-icon': {\n        transform: 'scale(1.1)' } } });\n\nexport const breadcrumbLinkStyles = ({\n  theme,\n  size,\n  active,\n  visualStyle }: {\n  theme: Theme;\n  size?: string;\n  active?: boolean;\n  visualStyle?: string;\n}): CSSObject => ({\n  ...(visualStyle === 'glass' && !active ? linkGlassIdleStyles(theme) : {}),\n  ...(active ? linkActiveStyles(theme, visualStyle) : {}),\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    textDecoration: 'none',\n    fontSize: size === 'sm' ? '0.875rem' : size === 'lg' ? '1.125rem' : '1rem',\n    fontWeight: active ? 600 : 400,\n    color: active ? theme.palette.text.primary : theme.palette.text.secondary,\n    padding: theme.spacing(0.5, 0.75),\n    borderRadius: theme.spacing(0.75),\n    position: 'relative',\n    overflow: 'hidden',\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n\n    // Add subtle background for glass variant\n\n\n  ...linkHoverStyles(theme, visualStyle),\n\n\n    '&:active': {\n      transform: 'translateY(0)',\n      backgroundColor: alpha(theme.palette.primary.main, 0.12) },\n\n    '&:focus-visible': {\n      outline: `2px solid ${theme.palette.primary.main}`,\n      outlineOffset: 2,\n      backgroundColor: alpha(theme.palette.primary.main, 0.04) },\n\n\n\n    '& .breadcrumb-icon': {\n      transition: 'transform 0.2s ease' },\n\n    // Mobile responsiveness\n    [theme.breakpoints.down('sm')]: {\n      fontSize: size === 'lg' ? '1rem' : size === 'sm' ? '0.75rem' : '0.875rem',\n      padding: theme.spacing(0.375, 0.5) } });\n\nexport const sizeIconMap = {\n  xs: 'small',\n  sm: 'small',\n  md: 'small',\n  lg: 'medium',\n  xl: 'medium',\n} as const;\n"],"mappings":"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","names":[]}

package/dist/chunk-SE6ERQY5.js

@@ -0,0 +1,156 @@
+// src/components/form/RichTextEditor/RichTextEditorToolbar.tsx
+import Code from "@mui/icons-material/Code";
+import FormatBold from "@mui/icons-material/FormatBold";
+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 FormatStrikethrough from "@mui/icons-material/FormatStrikethrough";
+import FormatUnderlined from "@mui/icons-material/FormatUnderlined";
+import Image from "@mui/icons-material/Image";
+import Link from "@mui/icons-material/Link";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Toolbar from "@mui/material/Toolbar/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GROUPS = [
+  [
+    { key: "bold", icon: /* @__PURE__ */ jsx(FormatBold, {}), tooltip: "Bold", command: "bold" },
+    { key: "italic", icon: /* @__PURE__ */ jsx(FormatItalic, {}), tooltip: "Italic", command: "italic" },
+    { key: "underline", icon: /* @__PURE__ */ jsx(FormatUnderlined, {}), tooltip: "Underline", command: "underline" },
+    {
+      key: "strikethrough",
+      icon: /* @__PURE__ */ jsx(FormatStrikethrough, {}),
+      tooltip: "Strikethrough",
+      command: "strikethrough"
+    }
+  ],
+  [
+    {
+      key: "orderedList",
+      icon: /* @__PURE__ */ jsx(FormatListNumbered, {}),
+      tooltip: "Numbered List",
+      command: "insertOrderedList"
+    },
+    {
+      key: "unorderedList",
+      icon: /* @__PURE__ */ jsx(FormatListBulleted, {}),
+      tooltip: "Bulleted List",
+      command: "insertUnorderedList"
+    }
+  ],
+  [
+    { key: "link", icon: /* @__PURE__ */ jsx(Link, {}), tooltip: "Insert Link", command: "createLink" },
+    { key: "image", icon: /* @__PURE__ */ jsx(Image, {}), tooltip: "Insert Image", command: "insertImage" },
+    {
+      key: "codeBlock",
+      icon: /* @__PURE__ */ jsx(Code, {}),
+      tooltip: "Code Block",
+      command: "formatBlock",
+      commandValue: "pre"
+    },
+    {
+      key: "quote",
+      icon: /* @__PURE__ */ jsx(FormatQuote, {}),
+      tooltip: "Quote",
+      command: "formatBlock",
+      commandValue: "blockquote"
+    }
+  ]
+];
+var PROMPTS = {
+  createLink: { message: "Enter URL:", initial: "https://" },
+  insertImage: { message: "Enter image URL:" }
+};
+var Separator = () => /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } });
+var ToolbarGroups = ({ config, disabled, readOnly, onRun }) => {
+  const groupIsActive = (group) => group.some((item) => config[item.key]);
+  return /* @__PURE__ */ jsx(Fragment, { children: GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    groupIsActive(group) && GROUPS.slice(0, groupIndex).some(groupIsActive) && /* @__PURE__ */ jsx(Separator, {}),
+    group.filter((item) => config[item.key]).map((item) => /* @__PURE__ */ jsx(Tooltip, { title: item.tooltip, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: () => onRun(item.command, item.commandValue),
+        disabled: disabled || readOnly,
+        "aria-label": item.tooltip,
+        "data-testid": `toolbar-${item.key}`,
+        children: item.icon
+      }
+    ) }, item.key))
+  ] }, group[0]?.key ?? groupIndex)) });
+};
+var RichTextEditorToolbar = ({
+  config,
+  disabled,
+  readOnly,
+  maxLength,
+  characterCount,
+  editorRef,
+  onFormat
+}) => {
+  const run = (command, commandValue) => {
+    const prompt = PROMPTS[command];
+    if (!prompt) {
+      onFormat(command, commandValue);
+      return;
+    }
+    const answer = window.prompt(prompt.message, prompt.initial);
+    if (answer) onFormat(command, answer);
+  };
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      variant: "dense",
+      "data-testid": "editor-toolbar",
+      sx: {
+        minHeight: 48,
+        px: 1,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8)
+      },
+      children: [
+        /* @__PURE__ */ jsx(ToolbarGroups, { config, disabled, readOnly, onRun: run }),
+        config.customItems && config.customItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          config.customItems.map((item) => /* @__PURE__ */ jsx(Tooltip, { title: item.label, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => item.action(editorRef.current),
+              disabled: item.disabled || disabled || readOnly,
+              "aria-label": item.label,
+              "data-testid": `toolbar-custom-${item.id}`,
+              children: item.icon
+            }
+          ) }, item.id))
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+        maxLength && /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "caption",
+            color: characterCount > maxLength * 0.8 ? "error" : "text.secondary",
+            sx: { mr: 1 },
+            "data-testid": "editor-counter",
+            children: [
+              characterCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  RichTextEditorToolbar
+};
+//# sourceMappingURL=chunk-SE6ERQY5.js.map

package/dist/chunk-SE6ERQY5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RichTextEditor/RichTextEditorToolbar.tsx"],"sourcesContent":["import Code from '@mui/icons-material/Code';\nimport FormatBold from '@mui/icons-material/FormatBold';\nimport FormatItalic from '@mui/icons-material/FormatItalic';\nimport FormatListBulleted from '@mui/icons-material/FormatListBulleted';\nimport FormatListNumbered from '@mui/icons-material/FormatListNumbered';\nimport FormatQuote from '@mui/icons-material/FormatQuote';\nimport FormatStrikethrough from '@mui/icons-material/FormatStrikethrough';\nimport FormatUnderlined from '@mui/icons-material/FormatUnderlined';\nimport Image from '@mui/icons-material/Image';\nimport Link from '@mui/icons-material/Link';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Toolbar from '@mui/material/Toolbar/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\nimport type { FC, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { ToolbarConfig } from './RichTextEditor.types';\n\ntype ResolvedToolbar = Required<Omit<ToolbarConfig, 'customItems'>> &\n  Pick<ToolbarConfig, 'customItems'>;\n\n// The button groups, in render order. A separator is drawn between two groups\n// only when both actually have something switched on.\nconst GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tooltip: string; command: string; commandValue?: string }>> = [\n  [\n    { key: 'bold', icon: <FormatBold />, tooltip: 'Bold', command: 'bold' },\n    { key: 'italic', icon: <FormatItalic />, tooltip: 'Italic', command: 'italic' },\n    { key: 'underline', icon: <FormatUnderlined />, tooltip: 'Underline', command: 'underline' },\n    {\n      key: 'strikethrough',\n      icon: <FormatStrikethrough />,\n      tooltip: 'Strikethrough',\n      command: 'strikethrough',\n    },\n  ],\n  [\n    {\n      key: 'orderedList',\n      icon: <FormatListNumbered />,\n      tooltip: 'Numbered List',\n      command: 'insertOrderedList',\n    },\n    {\n      key: 'unorderedList',\n      icon: <FormatListBulleted />,\n      tooltip: 'Bulleted List',\n      command: 'insertUnorderedList',\n    },\n  ],\n  [\n    { key: 'link', icon: <Link />, tooltip: 'Insert Link', command: 'createLink' },\n    { key: 'image', icon: <Image />, tooltip: 'Insert Image', command: 'insertImage' },\n    {\n      key: 'codeBlock',\n      icon: <Code />,\n      tooltip: 'Code Block',\n      command: 'formatBlock',\n      commandValue: 'pre',\n    },\n    {\n      key: 'quote',\n      icon: <FormatQuote />,\n      tooltip: 'Quote',\n      command: 'formatBlock',\n      commandValue: 'blockquote',\n    },\n  ],\n];\n\n// Link and image need a target before they can run.\nconst PROMPTS: Record<string, { message: string; initial?: string }> = {\n  createLink: { message: 'Enter URL:', initial: 'https://' },\n  insertImage: { message: 'Enter image URL:' },\n};\n\nconst Separator: FC = () => <Divider orientation=\"vertical\" flexItem sx={{ mx: 0.5 }} />;\n\nexport interface RichTextEditorToolbarProps {\n  config: ResolvedToolbar;\n  disabled: boolean;\n  readOnly: boolean;\n  maxLength?: number;\n  characterCount: number;\n  editorRef: React.RefObject<HTMLDivElement | null>;\n  onFormat: (command: string, value?: string) => void;\n}\n\nconst ToolbarGroups: FC<{\n  config: ResolvedToolbar;\n  disabled: boolean;\n  readOnly: boolean;\n  onRun: (command: string, commandValue?: string) => void;\n}> = ({ config, disabled, readOnly, onRun }) => {\n  const groupIsActive = (group: (typeof GROUPS)[number]) => group.some((item) => config[item.key]);\n\n  return (\n    <>\n      {GROUPS.map((group, groupIndex) => (\n        <React.Fragment key={group[0]?.key ?? groupIndex}>\n          {groupIsActive(group) && GROUPS.slice(0, groupIndex).some(groupIsActive) && <Separator />}\n          {group\n            .filter((item) => config[item.key])\n            .map((item) => (\n              <Tooltip key={item.key} title={item.tooltip}>\n                <IconButton\n                  size=\"small\"\n                  onClick={() => onRun(item.command, item.commandValue)}\n                  disabled={disabled || readOnly}\n                  aria-label={item.tooltip}\n                  data-testid={`toolbar-${item.key}`}\n                >\n                  {item.icon}\n                </IconButton>\n              </Tooltip>\n            ))}\n        </React.Fragment>\n      ))}\n    </>\n  );\n};\n\nexport const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({\n  config,\n  disabled,\n  readOnly,\n  maxLength,\n  characterCount,\n  editorRef,\n  onFormat,\n}) => {\n  const run = (command: string, commandValue?: string) => {\n    const prompt = PROMPTS[command];\n    if (!prompt) {\n      onFormat(command, commandValue);\n      return;\n    }\n\n    const answer = window.prompt(prompt.message, prompt.initial);\n    if (answer) onFormat(command, answer);\n  };\n\n  return (\n    <Toolbar\n      variant=\"dense\"\n      data-testid=\"editor-toolbar\"\n      sx={{\n        minHeight: 48,\n        px: 1,\n        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),\n      }}\n    >\n      <ToolbarGroups config={config} disabled={disabled} readOnly={readOnly} onRun={run} />\n\n      {config.customItems && config.customItems.length > 0 && (\n        <>\n          <Separator />\n          {config.customItems.map((item) => (\n            <Tooltip key={item.id} title={item.label}>\n              <IconButton\n                size=\"small\"\n                onClick={() => item.action(editorRef.current)}\n                disabled={item.disabled || disabled || readOnly}\n                aria-label={item.label}\n                data-testid={`toolbar-custom-${item.id}`}\n              >\n                {item.icon}\n              </IconButton>\n            </Tooltip>\n          ))}\n        </>\n      )}\n\n      <Box sx={{ flexGrow: 1 }} />\n\n      {maxLength && (\n        <Typography\n          variant=\"caption\"\n          // Turns red in the last fifth of the allowance.\n          color={characterCount > maxLength * 0.8 ? 'error' : 'text.secondary'}\n          sx={{ mr: 1 }}\n          data-testid=\"editor-counter\"\n        >\n          {characterCount}/{maxLength}\n        </Typography>\n      )}\n    </Toolbar>\n  );\n};\n"],"mappings":"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","names":[]}