@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-6SKXV236.js

@@ -0,0 +1,176 @@
+import {
+  useRichTextEditor
+} from "./chunk-774B27QA.js";
+import {
+  RichTextEditorToolbar
+} from "./chunk-SE6ERQY5.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.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: {},
+  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: 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 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-6SKXV236.js.map

package/dist/chunk-6SKXV236.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport type { Theme } from '@mui/material/styles/index.js';\nimport { useRichTextEditor } from './RichTextEditor.hooks';\nimport type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';\nimport { RichTextEditorToolbar } from './RichTextEditorToolbar';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { rem } from '../../../tokens/relative';\n\nconst DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {\n  bold: true,\n  italic: true,\n  underline: true,\n  strikethrough: false,\n  orderedList: true,\n  unorderedList: true,\n  link: true,\n  image: false,\n  codeBlock: false,\n  quote: false,\n  customItems: [] };\n\nconst RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {\n  value: '',\n  placeholder: 'Start typing...',\n  disabled: false,\n  readOnly: false,\n  toolbar: {},\n  height: 300 };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, v]) => v !== undefined),\n  ) as Partial<RichTextEditorProps>;\n\n// Simple inline formats are a tag swap; lists and the value-carrying formats\n// need their own handling. This was one nine-case switch.\nconst editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({\n  minHeight: typeof height === 'number' ? `${height}px` : height,\n  p: 2,\n  outline: 'none',\n  cursor: disabled ? 'not-allowed' : 'text',\n  '&:empty::before': {\n    content: `\"${placeholder}\"`,\n    color: theme.palette.text.disabled,\n    pointerEvents: 'none' },\n  '& p': {\n    margin: '8px 0',\n    '&:first-of-type': { marginTop: 0 },\n    '&:last-of-type': { marginBottom: 0 } },\n  '& ul, & ol': { marginLeft: theme.spacing(2) },\n  '& blockquote': {\n    borderLeft: `4px solid ${theme.palette.primary.main}`,\n    paddingLeft: theme.spacing(2),\n    margin: `${theme.spacing(1)} 0`,\n    fontStyle: 'italic',\n    backgroundColor: alpha(theme.palette.primary.main, 0.05) },\n  '& pre': {\n    backgroundColor: alpha(theme.palette.text.primary, 0.08),\n    padding: theme.spacing(1),\n    borderRadius: 1,\n    fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", monospace',\n    fontSize: rem(theme, 14),\n    overflow: 'auto' },\n  '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });\n\nconst shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({\n  border: `1px solid ${fieldEdge(theme)}`,\n  borderRadius: fieldRadiusPx(theme),\n  overflow: 'hidden',\n  transition: 'border-color 0.2s ease-in-out',\n  ...(isFocused && {\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}` }),\n  ...(disabled && {\n    backgroundColor: theme.palette.action.disabledBackground,\n    color: theme.palette.text.disabled }) });\n\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  (editorProps, ref) => {\n    const {\n      value,\n      onChange,\n      placeholder,\n      disabled,\n      readOnly,\n      toolbar,\n      height,\n      maxLength,\n      onFocus,\n      onBlur,\n      className,\n      'data-testid': testId,\n      'aria-label': ariaLabel,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;\n\n    const theme = useTheme();\n    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };\n    const editor = useRichTextEditor({\n      value,\n      onChange,\n      onFocus,\n      onBlur,\n      disabled,\n      readOnly,\n      maxLength });\n\n    return (\n      <Paper\n        ref={ref}\n        className={className}\n        data-testid={testId || 'rich-text-editor'}\n        elevation={1}\n        sx={shellSx(theme, editor.isFocused, Boolean(disabled))}\n        {...props}\n      >\n        <RichTextEditorToolbar\n          config={toolbarConfig}\n          disabled={Boolean(disabled)}\n          readOnly={Boolean(readOnly)}\n          maxLength={maxLength}\n          characterCount={editor.characterCount}\n          editorRef={editor.editorRef}\n          onFormat={editor.applyFormat}\n        />\n\n        <Box\n          ref={editor.editorRef}\n          contentEditable={!disabled && !readOnly}\n          onInput={editor.handleContentChange}\n          onFocus={editor.handleFocus}\n          onBlur={editor.handleBlur}\n          role=\"textbox\"\n          aria-label={ariaLabel || 'Rich text editor'}\n          aria-describedby={ariaDescribedBy}\n          aria-multiline=\"true\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"editor-content\"\n          suppressContentEditableWarning\n          sx={editorContentSx(theme, Boolean(disabled), placeholder, height)}\n        />\n      </Paper>\n    );\n  },\n);\n\nRichTextEditor.displayName = 'RichTextEditor';\n\nexport default RichTextEditor;"],"mappings":"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","names":[]}

package/dist/chunk-6SS5C74Q.js

@@ -0,0 +1,37 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Button
+} from "./chunk-KH25WUSX.js";
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/total-form/SubmitButton.tsx
+import { jsx } from "react/jsx-runtime";
+function SubmitButton({
+  children,
+  dataTestId = "total-form-submit"
+}) {
+  const { submitting } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      dataTestId,
+      loading: submitting,
+      disabled: submitting,
+      sx: { height: fieldHeight, px: 2, fontSize: sxRem(16), flexShrink: 0, whiteSpace: "nowrap" },
+      children
+    }
+  );
+}
+
+export {
+  SubmitButton
+};
+//# sourceMappingURL=chunk-6SS5C74Q.js.map

package/dist/chunk-6SS5C74Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/total-form/SubmitButton.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\nimport { Button } from '../Button';\nimport { useFormContext } from './FormContext';\n\n/** Props for {@link SubmitButton}. */\nexport interface SubmitButtonProps {\n  /** Button label. */\n  children: React.ReactNode;\n  /** Test id; defaults to `total-form-submit`. Override when a page renders more than one form. */\n  dataTestId?: string;\n}\n\n/**\n * Submit control wired to {@link useFormContext}. Wraps the existing `@12-apps/ui`\n * `Button` as a `type=\"submit\"` button (testid `total-form-submit`) and\n * reflects the form's `submitting` state via `loading`/`disabled`.\n *\n * It matches the form field height and never wraps its label, so it aligns with\n * an adjacent input on the same row (and stays full-width when the row stacks).\n */\nexport function SubmitButton({\n  children,\n  dataTestId = 'total-form-submit',\n}: SubmitButtonProps): React.ReactElement {\n  const { submitting } = useFormContext();\n\n  return (\n    <Button\n      type=\"submit\"\n      dataTestId={dataTestId}\n      loading={submitting}\n      disabled={submitting}\n      // `Button` replaces (not merges) its size styles with this `sx`, so restate\n      // the md padding/font here alongside the theme's field height — the height\n      // every input on the form stands at — and no-wrap alignment.\n      sx={{ height: fieldHeight, px: 2, fontSize: sxRem(16), flexShrink: 0, whiteSpace: 'nowrap' }}\n    >\n      {children}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCI;AAPG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,aAAa;AACf,GAA0C;AACxC,QAAM,EAAE,WAAW,IAAI,eAAe;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,MAIV,IAAI,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,MAAM,EAAE,GAAG,YAAY,GAAG,YAAY,SAAS;AAAA,MAE1F;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-6SYFPRTT.js

@@ -0,0 +1,271 @@
+import {
+  describeViewState
+} from "./chunk-5M4TYFR3.js";
+import {
+  PreviewBox
+} from "./chunk-X7PVFAYJ.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Switch
+} from "./chunk-SX3MEC3Q.js";
+import {
+  Input
+} from "./chunk-IBGX6H4J.js";
+import {
+  Dialog,
+  DialogContent
+} from "./chunk-L4UP5VYS.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  default as default3
+} from "./chunk-WEBEOBN5.js";
+import {
+  Button
+} from "./chunk-KH25WUSX.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/SaveViewModal.tsx
+import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import StarOutlineRoundedIcon from "@mui/icons-material/StarOutlineRounded";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FlagRow({
+  icon,
+  title,
+  description,
+  checked,
+  onChange,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "label",
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 1.5,
+        px: 1,
+        py: 1,
+        borderRadius: 1,
+        cursor: "pointer",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(default2, { sx: { mt: 0.25, color: "text.disabled", display: "flex" }, children: icon }),
+        /* @__PURE__ */ jsxs(default2, { sx: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", fontSize: sxRem(14) }, children: title }) }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", color: "text.secondary", lineHeight: 1.5 }, children: description }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            size: "sm",
+            checked,
+            onChange: (_event, value) => onChange(value),
+            dataTestId: testId
+          }
+        )
+      ]
+    }
+  );
+}
+function FlagsSwitches({
+  pinned,
+  shared,
+  isDefault,
+  setPinned,
+  setShared,
+  setIsDefault,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default3, { spacing: 0, children: [
+    /* @__PURE__ */ jsx(
+      FlagRow,
+      {
+        icon: /* @__PURE__ */ jsx(PushPinOutlinedIcon, { fontSize: "small" }),
+        title: copy.saveView.pinnedTitle,
+        description: copy.saveView.pinnedDescription,
+        checked: pinned,
+        onChange: setPinned,
+        testId: `${testIdPrefix}-save-pinned`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FlagRow,
+      {
+        icon: /* @__PURE__ */ jsx(GroupOutlinedIcon, { fontSize: "small" }),
+        title: copy.saveView.sharedTitle,
+        description: copy.saveView.sharedDescription,
+        checked: shared,
+        onChange: setShared,
+        testId: `${testIdPrefix}-save-shared`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FlagRow,
+      {
+        icon: /* @__PURE__ */ jsx(StarOutlineRoundedIcon, { fontSize: "small" }),
+        title: copy.saveView.setDefaultTitle,
+        description: copy.saveView.setDefaultDescription,
+        checked: isDefault,
+        onChange: setIsDefault,
+        testId: `${testIdPrefix}-save-default`
+      }
+    )
+  ] });
+}
+function seedForm(editing) {
+  if (!editing) {
+    return { name: "", description: "", pinned: false, shared: false, isDefault: false };
+  }
+  return {
+    name: editing.name,
+    description: editing.description ?? "",
+    pinned: editing.pinned,
+    shared: editing.shared,
+    isDefault: editing.isDefault
+  };
+}
+function useSaveViewForm(editing, onSave) {
+  const copy = useDataViewsCopy();
+  const initial = seedForm(editing);
+  const [name, setName] = useState(initial.name);
+  const [description, setDescription] = useState(initial.description);
+  const [pinned, setPinned] = useState(initial.pinned);
+  const [shared, setShared] = useState(initial.shared);
+  const [isDefault, setIsDefault] = useState(initial.isDefault);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const canSave = name.trim().length > 0 && !saving;
+  async function submit() {
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave({ name: name.trim(), description: description.trim(), shared, pinned, isDefault });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : copy.saveView.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  }
+  return {
+    name,
+    description,
+    pinned,
+    shared,
+    isDefault,
+    canSave,
+    error,
+    setName,
+    setDescription,
+    setPinned,
+    setShared,
+    setIsDefault,
+    submit
+  };
+}
+function FormFooter({
+  editing,
+  canSave,
+  onSubmit,
+  onClose,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default3, { direction: "row", spacing: 1.5, sx: { justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ jsx(Button, { variant: "text", color: "neutral", onClick: onClose, dataTestId: `${testIdPrefix}-save-cancel`, children: copy.saveView.cancel }),
+    /* @__PURE__ */ jsx(Button, { onClick: onSubmit, disabled: !canSave, dataTestId: `${testIdPrefix}-save-submit`, children: editing ? copy.saveView.submitEditing : copy.saveView.submitCreating })
+  ] });
+}
+function SaveViewModal({
+  open,
+  onClose,
+  currentState,
+  fields,
+  columns,
+  editing,
+  onSave,
+  testIdPrefix = "view"
+}) {
+  const copy = useDataViewsCopy();
+  const form = useSaveViewForm(editing, onSave);
+  const preview = describeViewState(currentState, fields, columns);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title: editing ? copy.saveView.titleEditing : copy.saveView.titleCreating,
+      size: "sm",
+      showCloseButton: true,
+      dataTestId: `${testIdPrefix}-save-modal`,
+      children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(default3, { spacing: 2, "data-testid": `${testIdPrefix}-save-form`, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "sm",
+            fullWidth: true,
+            label: copy.saveView.nameLabel,
+            placeholder: copy.saveView.namePlaceholder,
+            value: form.name,
+            onChange: (event) => form.setName(event.target.value),
+            "data-testid": `${testIdPrefix}-save-name`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "sm",
+            fullWidth: true,
+            label: copy.saveView.descriptionLabel,
+            placeholder: copy.saveView.descriptionPlaceholder,
+            value: form.description,
+            onChange: (event) => form.setDescription(event.target.value),
+            "data-testid": `${testIdPrefix}-save-description`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FlagsSwitches,
+          {
+            pinned: form.pinned,
+            shared: form.shared,
+            isDefault: form.isDefault,
+            setPinned: form.setPinned,
+            setShared: form.setShared,
+            setIsDefault: form.setIsDefault,
+            testIdPrefix
+          }
+        ),
+        /* @__PURE__ */ jsx(PreviewBox, { preview, testIdPrefix }),
+        form.error && /* @__PURE__ */ jsx(Text, { variant: "caption", color: "danger", as: "p", "data-testid": `${testIdPrefix}-save-error`, children: form.error }),
+        /* @__PURE__ */ jsx(
+          FormFooter,
+          {
+            editing,
+            canSave: form.canSave,
+            onSubmit: () => void form.submit(),
+            onClose,
+            testIdPrefix
+          }
+        )
+      ] }) })
+    }
+  );
+}
+
+export {
+  SaveViewModal
+};
+//# sourceMappingURL=chunk-6SYFPRTT.js.map

package/dist/chunk-6SYFPRTT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/SaveViewModal.tsx"],"sourcesContent":["\"use client\";\n\nimport GroupOutlinedIcon from \"@mui/icons-material/GroupOutlined\";\nimport PushPinOutlinedIcon from \"@mui/icons-material/PushPinOutlined\";\nimport StarOutlineRoundedIcon from \"@mui/icons-material/StarOutlineRounded\";\nimport { useState } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Dialog, DialogContent } from \"../../feedback/Dialog\";\nimport { Button } from \"../../form/Button\";\nimport { Input } from \"../../form/Input\";\nimport { Switch } from \"../../form/Switch\";\nimport { Box } from \"../../../mui/Box\";\nimport { Stack } from \"../../../mui/Stack\";\nimport { Text } from \"../../typography/Text\";\n\nimport { describeViewState } from \"./data-views-preview\";\nimport { PreviewBox } from \"./save-view-preview\";\nimport type {\n  DataViewColumn,\n  DataViewState,\n  FilterFieldConfig,\n  SavedViewSummary,\n} from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/** The values the modal collects (the current view state is captured by the parent). */\nexport interface SaveViewPayload {\n  name: string;\n  description: string;\n  shared: boolean;\n  pinned: boolean;\n  isDefault: boolean;\n}\n\ninterface SaveViewModalProps<T extends Record<string, unknown>> {\n  open: boolean;\n  onClose: () => void;\n  /** The state being saved (drives the preview). */\n  currentState: DataViewState;\n  fields: FilterFieldConfig<T>[];\n  columns: DataViewColumn<T>[];\n  /** When set, the modal edits this view (seeds the form + becomes \"Salvar alterações\"). */\n  editing?: SavedViewSummary | null;\n  onSave: (payload: SaveViewPayload) => Promise<void> | void;\n  testIdPrefix?: string;\n}\n\ninterface FlagsSwitchesProps {\n  pinned: boolean;\n  shared: boolean;\n  isDefault: boolean;\n  setPinned: (value: boolean) => void;\n  setShared: (value: boolean) => void;\n  setIsDefault: (value: boolean) => void;\n  testIdPrefix: string;\n}\n\n/**\n * One flag: what it is, and what it DOES. A bare \"Fixar na barra lateral\"\n * beside a switch asks the operator to guess where it appears and to whom —\n * the sentence is the difference between a labelled toggle and an explained one.\n */\nfunction FlagRow({\n  icon,\n  title,\n  description,\n  checked,\n  onChange,\n  testId,\n}: {\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n  checked: boolean;\n  onChange: (value: boolean) => void;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"label\"\n      sx={{\n        display: \"flex\",\n        alignItems: \"flex-start\",\n        gap: 1.5,\n        px: 1,\n        py: 1,\n        borderRadius: 1,\n        cursor: \"pointer\",\n        \"&:hover\": { bgcolor: \"action.hover\" },\n      }}\n    >\n      <Box sx={{ mt: 0.25, color: \"text.disabled\", display: \"flex\" }}>{icon}</Box>\n      <Box sx={{ minWidth: 0, flex: 1 }}>\n        <Text variant=\"body\" as=\"span\">\n          <Box component=\"span\" sx={{ display: \"block\", fontSize: sxRem(14) }}>\n            {title}\n          </Box>\n        </Text>\n        <Text variant=\"caption\" as=\"span\">\n          <Box component=\"span\" sx={{ display: \"block\", color: \"text.secondary\", lineHeight: 1.5 }}>\n            {description}\n          </Box>\n        </Text>\n      </Box>\n      <Switch\n        size=\"sm\"\n        checked={checked}\n        onChange={(_event, value) => onChange(value)}\n        dataTestId={testId}\n      />\n    </Box>\n  );\n}\n\nfunction FlagsSwitches({\n  pinned,\n  shared,\n  isDefault,\n  setPinned,\n  setShared,\n  setIsDefault,\n  testIdPrefix,\n}: FlagsSwitchesProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Stack spacing={0}>\n      <FlagRow\n        icon={<PushPinOutlinedIcon fontSize=\"small\" />}\n        title={copy.saveView.pinnedTitle}\n        description={copy.saveView.pinnedDescription}\n        checked={pinned}\n        onChange={setPinned}\n        testId={`${testIdPrefix}-save-pinned`}\n      />\n      <FlagRow\n        icon={<GroupOutlinedIcon fontSize=\"small\" />}\n        title={copy.saveView.sharedTitle}\n        description={copy.saveView.sharedDescription}\n        checked={shared}\n        onChange={setShared}\n        testId={`${testIdPrefix}-save-shared`}\n      />\n      <FlagRow\n        icon={<StarOutlineRoundedIcon fontSize=\"small\" />}\n        title={copy.saveView.setDefaultTitle}\n        description={copy.saveView.setDefaultDescription}\n        checked={isDefault}\n        onChange={setIsDefault}\n        testId={`${testIdPrefix}-save-default`}\n      />\n    </Stack>\n  );\n}\n\ninterface SaveViewFormState {\n  name: string;\n  description: string;\n  pinned: boolean;\n  shared: boolean;\n  isDefault: boolean;\n  canSave: boolean;\n  error: string | null;\n  setName: (value: string) => void;\n  setDescription: (value: string) => void;\n  setPinned: (value: boolean) => void;\n  setShared: (value: boolean) => void;\n  setIsDefault: (value: boolean) => void;\n  submit: () => Promise<void>;\n}\n\n/** The initial form values, seeded from an edited view (or blank for create). */\nfunction seedForm(editing: SavedViewSummary | null | undefined): SaveViewPayload {\n  if (!editing) {\n    return { name: \"\", description: \"\", pinned: false, shared: false, isDefault: false };\n  }\n  return {\n    name: editing.name,\n    description: editing.description ?? \"\",\n    pinned: editing.pinned,\n    shared: editing.shared,\n    isDefault: editing.isDefault,\n  };\n}\n\n/** Local form state + submit for {@link SaveViewModal}, seeded from an edited view. */\nfunction useSaveViewForm(\n  editing: SavedViewSummary | null | undefined,\n  onSave: (payload: SaveViewPayload) => Promise<void> | void,\n): SaveViewFormState {\n  const copy = useDataViewsCopy();\n  const initial = seedForm(editing);\n  const [name, setName] = useState(initial.name);\n  const [description, setDescription] = useState(initial.description);\n  const [pinned, setPinned] = useState(initial.pinned);\n  const [shared, setShared] = useState(initial.shared);\n  const [isDefault, setIsDefault] = useState(initial.isDefault);\n  const [saving, setSaving] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const canSave = name.trim().length > 0 && !saving;\n\n  async function submit(): Promise<void> {\n    setSaving(true);\n    setError(null);\n    // A rejected save (e.g. duplicate name) is caught here so the modal stays\n    // open and shows the reason; the finally always re-enables the button.\n    try {\n      await onSave({ name: name.trim(), description: description.trim(), shared, pinned, isDefault });\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : copy.saveView.saveFailed);\n    } finally {\n      setSaving(false);\n    }\n  }\n\n  return {\n    name,\n    description,\n    pinned,\n    shared,\n    isDefault,\n    canSave,\n    error,\n    setName,\n    setDescription,\n    setPinned,\n    setShared,\n    setIsDefault,\n    submit,\n  };\n}\n\n/**\n * The \"Salvar visão\" modal (FUT-89): captures a name + description and the pin /\n * share / default flags, and previews the filters, visible columns, and sort the\n * view will store. Used for both create and edit.\n */\n/**\n * The dialog's two buttons.\n *\n * Cancel first, primary last: the confirming action sits where the eye lands\n * at the end of the dialog, not before the way out.\n */\nfunction FormFooter({\n  editing,\n  canSave,\n  onSubmit,\n  onClose,\n  testIdPrefix,\n}: {\n  editing: SaveViewModalProps<never>[\"editing\"];\n  canSave: boolean;\n  onSubmit: () => void;\n  onClose: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Stack direction=\"row\" spacing={1.5} sx={{ justifyContent: \"flex-end\" }}>\n      <Button variant=\"text\" color=\"neutral\" onClick={onClose} dataTestId={`${testIdPrefix}-save-cancel`}>\n        {copy.saveView.cancel}\n      </Button>\n      <Button onClick={onSubmit} disabled={!canSave} dataTestId={`${testIdPrefix}-save-submit`}>\n        {editing ? copy.saveView.submitEditing : copy.saveView.submitCreating}\n      </Button>\n    </Stack>\n  );\n}\n\nexport function SaveViewModal<T extends Record<string, unknown>>({\n  open,\n  onClose,\n  currentState,\n  fields,\n  columns,\n  editing,\n  onSave,\n  testIdPrefix = \"view\",\n}: SaveViewModalProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const form = useSaveViewForm(editing, onSave);\n  const preview = describeViewState(currentState, fields, columns);\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={editing ? copy.saveView.titleEditing : copy.saveView.titleCreating}\n      size=\"sm\"\n      showCloseButton\n      dataTestId={`${testIdPrefix}-save-modal`}\n    >\n      <DialogContent>\n        <Stack spacing={2} data-testid={`${testIdPrefix}-save-form`}>\n          <Input\n            size=\"sm\"\n            fullWidth\n            label={copy.saveView.nameLabel}\n            placeholder={copy.saveView.namePlaceholder}\n            value={form.name}\n            onChange={(event) => form.setName(event.target.value)}\n            data-testid={`${testIdPrefix}-save-name`}\n          />\n          <Input\n            size=\"sm\"\n            fullWidth\n            label={copy.saveView.descriptionLabel}\n            placeholder={copy.saveView.descriptionPlaceholder}\n            value={form.description}\n            onChange={(event) => form.setDescription(event.target.value)}\n            data-testid={`${testIdPrefix}-save-description`}\n          />\n\n          <FlagsSwitches\n            pinned={form.pinned}\n            shared={form.shared}\n            isDefault={form.isDefault}\n            setPinned={form.setPinned}\n            setShared={form.setShared}\n            setIsDefault={form.setIsDefault}\n            testIdPrefix={testIdPrefix}\n          />\n\n          <PreviewBox preview={preview} testIdPrefix={testIdPrefix} />\n\n          {form.error && (\n            <Text variant=\"caption\" color=\"danger\" as=\"p\" data-testid={`${testIdPrefix}-save-error`}>\n              {form.error}\n            </Text>\n          )}\n\n          <FormFooter\n            editing={editing}\n            canSave={form.canSave}\n            onSubmit={() => void form.submit()}\n            onClose={onClose}\n            testIdPrefix={testIdPrefix}\n          />\n        </Stack>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-6ZZGK5DT.js

@@ -0,0 +1,78 @@
+import {
+  ABSOLUTE_INK,
+  NEUTRAL_RAMP
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/data-display/Avatar/Avatar.metrics.ts
+var AVATAR_SIZES = {
+  xs: { box: 24, fontSize: 12 },
+  sm: { box: 32, fontSize: 14 },
+  md: { box: 40, fontSize: 16 },
+  lg: { box: 48, fontSize: 18 },
+  xl: { box: 64, fontSize: 24 },
+  xxl: { box: 80, fontSize: 32 }
+};
+var ROUNDED_RADIUS_UNITS = 1;
+var BORDER_WIDTH = 2;
+var BORDER_HALO_ALPHA = 0.2;
+var GLOW = { blur: 20, spread: 5, alpha: 0.4, brightness: 1.05 };
+var PULSE = { durationMs: 2e3, alpha: 0.3, spread: 10 };
+var SHIMMER = { durationMs: 1500, fromAlpha: 0.6, toAlpha: 0.8 };
+var LOADING_OVERLAY = { paperAlpha: 0.7, blur: 2 };
+var SPINNER = {
+  /** A share of the avatar's box. */
+  scale: 0.4,
+  ringWidth: 2,
+  trackAlpha: 0.3,
+  durationMs: 800
+};
+var STATUS_DOT = { scale: 0.2, min: 8, borderWidth: 2, anchor: 0.14 };
+var GLYPH_SIZE = 24;
+var FADE_MS = 300;
+var SCALE_IN_MS = 300;
+var AVATAR_TRANSITION_MS = 300;
+var AVATAR_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+var HOVER = { scale: 1.1, lift: 2, shadowY: 8, shadowBlur: 20, shadowAlpha: 0.3, brightness: 1.1 };
+var ACTIVE_SCALE = 1.05;
+var FOCUS_RING = { width: 3, offset: 2, alpha: 0.5 };
+var GROUP_OVERLAP = 8;
+var GROUP_MAX = 4;
+var GROUP_HOVER = { scale: 1.1, lift: 4 };
+function statusColor(theme, status) {
+  if (status === "online") return theme.palette.success.main;
+  if (status === "away") return theme.palette.warning.main;
+  if (status === "busy") return theme.palette.danger.main;
+  return NEUTRAL_RAMP[500];
+}
+function avatarAccent(theme, color) {
+  if (color === "neutral") return { main: NEUTRAL_RAMP[700], contrastText: ABSOLUTE_INK.white };
+  const accent = theme.palette[color];
+  return { main: accent.main, contrastText: accent.contrastText || ABSOLUTE_INK.white };
+}
+
+export {
+  AVATAR_SIZES,
+  ROUNDED_RADIUS_UNITS,
+  BORDER_WIDTH,
+  BORDER_HALO_ALPHA,
+  GLOW,
+  PULSE,
+  SHIMMER,
+  LOADING_OVERLAY,
+  SPINNER,
+  STATUS_DOT,
+  GLYPH_SIZE,
+  FADE_MS,
+  SCALE_IN_MS,
+  AVATAR_TRANSITION_MS,
+  AVATAR_TRANSITION_EASING,
+  HOVER,
+  ACTIVE_SCALE,
+  FOCUS_RING,
+  GROUP_OVERLAP,
+  GROUP_MAX,
+  GROUP_HOVER,
+  statusColor,
+  avatarAccent
+};
+//# sourceMappingURL=chunk-6ZZGK5DT.js.map

package/dist/chunk-6ZZGK5DT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.metrics.ts"],"sourcesContent":["import type { AvatarSize, AvatarStatus } from './Avatar.base';\nimport { ABSOLUTE_INK, NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Avatar` RENDERERS DRAW WITH.\n *\n * `Avatar.view.tsx` (web, emotion over MUI's `Avatar` and `Badge`) and\n * `Avatar.native.tsx` (React Native) read this one table: the six boxes and\n * their type, the status dot, the glow, the shimmer and the spinner. The web\n * turns the px into rem; native uses the numbers.\n */\nexport interface AvatarSizeMetrics {\n  /** The square the portrait fills, in px. */\n  box: number;\n  /** The initials' type size, in px. */\n  fontSize: number;\n}\n\nexport const AVATAR_SIZES: Record<AvatarSize, AvatarSizeMetrics> = {\n  xs: { box: 24, fontSize: 12 },\n  sm: { box: 32, fontSize: 14 },\n  md: { box: 40, fontSize: 16 },\n  lg: { box: 48, fontSize: 18 },\n  xl: { box: 64, fontSize: 24 },\n  xxl: { box: 80, fontSize: 32 },\n};\n\n/** `rounded` takes one spacing unit; `circle` and `status` are round. */\nexport const ROUNDED_RADIUS_UNITS = 1;\n\n/** The paper ring an avatar takes inside a group, and the hairline outside it. */\nexport const BORDER_WIDTH = 2;\nexport const BORDER_HALO_ALPHA = 0.2;\n\n/** `glow`: a 20px halo at five pixels of spread, and a brightness lift. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.4, brightness: 1.05 } as const;\n\n/** `pulse`: the `::after` ring, from nothing to 10px while it fades out. */\nexport const PULSE = { durationMs: 2000, alpha: 0.3, spread: 10 } as const;\n\n/** The shimmer that runs across a loading avatar. */\nexport const SHIMMER = { durationMs: 1500, fromAlpha: 0.6, toAlpha: 0.8 } as const;\n\n/** The overlay over a loading avatar, and the ring spinning in it. */\nexport const LOADING_OVERLAY = { paperAlpha: 0.7, blur: 2 } as const;\nexport const SPINNER = {\n  /** A share of the avatar's box. */\n  scale: 0.4,\n  ringWidth: 2,\n  trackAlpha: 0.3,\n  durationMs: 800,\n} as const;\n\n/**\n * The status dot: a fifth of the box, never below 8px, inside a paper ring.\n * `anchor` is MUI's `overlap=\"circular\"` inset — the dot's CENTRE sits 14% of\n * the box in from the bottom-right corner.\n */\nexport const STATUS_DOT = { scale: 0.2, min: 8, borderWidth: 2, anchor: 0.14 } as const;\n\n/**\n * The default and broken-image glyphs are ordinary `SvgIcon`s here, not MUI's\n * own `.MuiAvatar-fallback` (which is 75% of the box): this component passes\n * them as CHILDREN, so they render at the icon default whatever the box is.\n */\nexport const GLYPH_SIZE = 24;\n\n/** MUI's `Fade` timeout on mount, and the scale-in behind it. */\nexport const FADE_MS = 300;\nexport const SCALE_IN_MS = 300;\n\n/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`. */\nexport const AVATAR_TRANSITION_MS = 300;\nexport const AVATAR_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** The interactive lift, which is a `:hover` on the web. */\nexport const HOVER = { scale: 1.1, lift: 2, shadowY: 8, shadowBlur: 20, shadowAlpha: 0.3, brightness: 1.1 } as const;\nexport const ACTIVE_SCALE = 1.05;\n\n/** The focus ring `:focus-visible` draws. */\nexport const FOCUS_RING = { width: 3, offset: 2, alpha: 0.5 } as const;\n\n/** An avatar group's default overlap, in px, and its hover lift. */\nexport const GROUP_OVERLAP = 8;\nexport const GROUP_MAX = 4;\nexport const GROUP_HOVER = { scale: 1.1, lift: 4 } as const;\n\n/** The dot's colour per status. `offline` is the ramp, the rest are semantic. */\nexport function statusColor(theme: UiTheme, status: AvatarStatus): string {\n  if (status === 'online') return theme.palette.success.main;\n  if (status === 'away') return theme.palette.warning.main;\n  if (status === 'busy') return theme.palette.danger.main;\n  return NEUTRAL_RAMP[500];\n}\n\nexport interface AvatarAccent {\n  main: string;\n  contrastText: string;\n}\n\n/**\n * The accent behind the initials. `danger`, NOT `error` — the web map was keyed\n * on MUI's word while the prop took the house one, so `danger` matched nothing\n * and fell through to primary: a red avatar rendering blue, silently.\n */\nexport function avatarAccent(theme: UiTheme, color: ColorValue): AvatarAccent {\n  if (color === 'neutral') return { main: NEUTRAL_RAMP[700], contrastText: ABSOLUTE_INK.white };\n  const accent = theme.palette[color];\n  return { main: accent.main, contrastText: accent.contrastText || ABSOLUTE_INK.white };\n}\n"],"mappings":";;;;;;AAoBO,IAAM,eAAsD;AAAA,EACjE,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,KAAK,EAAE,KAAK,IAAI,UAAU,GAAG;AAC/B;AAGO,IAAM,uBAAuB;AAG7B,IAAM,eAAe;AACrB,IAAM,oBAAoB;AAG1B,IAAM,OAAO,EAAE,MAAM,IAAI,QAAQ,GAAG,OAAO,KAAK,YAAY,KAAK;AAGjE,IAAM,QAAQ,EAAE,YAAY,KAAM,OAAO,KAAK,QAAQ,GAAG;AAGzD,IAAM,UAAU,EAAE,YAAY,MAAM,WAAW,KAAK,SAAS,IAAI;AAGjE,IAAM,kBAAkB,EAAE,YAAY,KAAK,MAAM,EAAE;AACnD,IAAM,UAAU;AAAA;AAAA,EAErB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AACd;AAOO,IAAM,aAAa,EAAE,OAAO,KAAK,KAAK,GAAG,aAAa,GAAG,QAAQ,KAAK;AAOtE,IAAM,aAAa;AAGnB,IAAM,UAAU;AAChB,IAAM,cAAc;AAGpB,IAAM,uBAAuB;AAC7B,IAAM,2BAA2B;AAGjC,IAAM,QAAQ,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,GAAG,YAAY,IAAI,aAAa,KAAK,YAAY,IAAI;AACnG,IAAM,eAAe;AAGrB,IAAM,aAAa,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,IAAI;AAGrD,IAAM,gBAAgB;AACtB,IAAM,YAAY;AAClB,IAAM,cAAc,EAAE,OAAO,KAAK,MAAM,EAAE;AAG1C,SAAS,YAAY,OAAgB,QAA8B;AACxE,MAAI,WAAW,SAAU,QAAO,MAAM,QAAQ,QAAQ;AACtD,MAAI,WAAW,OAAQ,QAAO,MAAM,QAAQ,QAAQ;AACpD,MAAI,WAAW,OAAQ,QAAO,MAAM,QAAQ,OAAO;AACnD,SAAO,aAAa,GAAG;AACzB;AAYO,SAAS,aAAa,OAAgB,OAAiC;AAC5E,MAAI,UAAU,UAAW,QAAO,EAAE,MAAM,aAAa,GAAG,GAAG,cAAc,aAAa,MAAM;AAC5F,QAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,SAAO,EAAE,MAAM,OAAO,MAAM,cAAc,OAAO,gBAAgB,aAAa,MAAM;AACtF;","names":[]}