@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-343OLRFT.js

@@ -0,0 +1,271 @@
+import {
+  describeViewState
+} from "./chunk-5M4TYFR3.js";
+import {
+  PreviewBox
+} from "./chunk-JGRE56GQ.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-343OLRFT.js.map

package/dist/chunk-343OLRFT.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-37VFEWEN.js

@@ -0,0 +1,111 @@
+import {
+  LEAD_FONT_SIZE,
+  LEAD_LETTER_SPACING_EM,
+  LEAD_LINE_HEIGHT,
+  MUTED_OPACITY,
+  PARAGRAPH_FONT_WEIGHT,
+  PARAGRAPH_MARGIN_BOTTOM_EM,
+  PARAGRAPH_SIZES,
+  SMALL_FONT_SIZE,
+  SMALL_LINE_HEIGHT
+} from "./chunk-QKLGH3RZ.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-TYJR4GOF.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/typography/Paragraph/Paragraph.tsx
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return theme.palette.text.primary;
+  }
+  const colorMap = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    danger: theme.palette.error.main
+  };
+  return colorMap[color] || theme.palette.text.primary;
+};
+var sizeMap = PARAGRAPH_SIZES;
+var sizeStyles = (theme, customSize) => {
+  const step = sizeMap[customSize];
+  return step ? { fontSize: rem(theme, step.fontSize), lineHeight: step.lineHeight } : {};
+};
+var sizeOverride = (theme, customSize, atDefault) => {
+  const drawnAt = customSize === "md" ? atDefault : sizeMap[customSize]?.fontSize;
+  return drawnAt === void 0 ? void 0 : rem(theme, drawnAt);
+};
+var StyledParagraph = styled(Typography, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize"].includes(prop)
+})(({ theme, customVariant = "default", customColor = "neutral", customSize = "md" }) => {
+  const textColor = getColorFromTheme(theme, customColor);
+  const baseStyles = {
+    fontFamily: theme.typography.body1.fontFamily,
+    margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,
+    transition: "all 0.2s ease",
+    ...sizeStyles(theme, customSize)
+  };
+  const variantStyles = {
+    default: {
+      ...baseStyles,
+      color: textColor,
+      fontWeight: PARAGRAPH_FONT_WEIGHT
+    },
+    lead: {
+      ...baseStyles,
+      color: textColor,
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      fontSize: sizeOverride(theme, customSize, LEAD_FONT_SIZE),
+      lineHeight: LEAD_LINE_HEIGHT,
+      letterSpacing: `${LEAD_LETTER_SPACING_EM}em`
+    },
+    muted: {
+      ...baseStyles,
+      color: theme.palette.text.secondary,
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      opacity: MUTED_OPACITY
+    },
+    small: {
+      ...baseStyles,
+      color: theme.palette.text.secondary,
+      fontSize: sizeOverride(theme, customSize, SMALL_FONT_SIZE),
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      lineHeight: SMALL_LINE_HEIGHT
+    }
+  };
+  return variantStyles[customVariant] || variantStyles.default;
+});
+var Paragraph = React.forwardRef(
+  ({ variant = "default", color = "neutral", size = "md", children, ...others }, ref) => {
+    const testId = resolveTestId(others);
+    const props = withoutTestIdProps(others);
+    return /* @__PURE__ */ jsx(
+      StyledParagraph,
+      {
+        ref,
+        "data-testid": testId,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Paragraph.displayName = "Paragraph";
+
+export {
+  Paragraph
+};
+//# sourceMappingURL=chunk-37VFEWEN.js.map

package/dist/chunk-37VFEWEN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  LEAD_FONT_SIZE,\n  LEAD_LETTER_SPACING_EM,\n  LEAD_LINE_HEIGHT,\n  MUTED_OPACITY,\n  PARAGRAPH_FONT_WEIGHT,\n  PARAGRAPH_MARGIN_BOTTOM_EM,\n  PARAGRAPH_SIZES,\n  SMALL_FONT_SIZE,\n  SMALL_LINE_HEIGHT,\n} from './Paragraph.metrics';\nimport type { ParagraphProps } from './Paragraph.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { rem } from '../../../tokens/relative';\nimport type { UiTypeStep } from '../../../tokens/theme';\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  const colorMap: Record<string, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color] || theme.palette.text.primary;\n};\n\n// Derived from the shared metrics, not restated: the native `Paragraph` reads\n// the same table, so the two renderers cannot disagree on a size.\n// The table keeps the design px; the size is converted where it is read.\nconst sizeMap: Readonly<Record<string, UiTypeStep | undefined>> = PARAGRAPH_SIZES;\n\nconst sizeStyles = (theme: Theme, customSize: string): CSSObject => {\n  const step = sizeMap[customSize];\n  return step ? { fontSize: rem(theme, step.fontSize), lineHeight: step.lineHeight } : {};\n};\n\n// `lead` and `small` shrink or grow relative to the scale, but only at the\n// default size — an explicit size wins.\nconst sizeOverride = (theme: Theme, customSize: string, atDefault: number): string | undefined => {\n  const drawnAt = customSize === 'md' ? atDefault : sizeMap[customSize]?.fontSize;\n  return drawnAt === undefined ? undefined : rem(theme, drawnAt);\n};\n\nconst StyledParagraph = styled(Typography, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n}>(({ theme, customVariant = 'default', customColor = 'neutral', customSize = 'md' }) => {\n  const textColor = getColorFromTheme(theme, customColor);\n\n  const baseStyles: CSSObject = {\n    fontFamily: theme.typography.body1.fontFamily,\n    margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,\n    transition: 'all 0.2s ease',\n    ...sizeStyles(theme, customSize),\n  };\n\n  // Variant-specific styles\n  const variantStyles: Record<string, CSSObject> = {\n    default: {\n      ...baseStyles,\n      color: textColor,\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n    },\n    lead: {\n      ...baseStyles,\n      color: textColor,\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n      fontSize: sizeOverride(theme, customSize, LEAD_FONT_SIZE),\n      lineHeight: LEAD_LINE_HEIGHT,\n      letterSpacing: `${LEAD_LETTER_SPACING_EM}em`,\n    },\n    muted: {\n      ...baseStyles,\n      color: theme.palette.text.secondary,\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n      opacity: MUTED_OPACITY,\n    },\n    small: {\n      ...baseStyles,\n      color: theme.palette.text.secondary,\n      fontSize: sizeOverride(theme, customSize, SMALL_FONT_SIZE),\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n      lineHeight: SMALL_LINE_HEIGHT,\n    },\n  };\n\n  return variantStyles[customVariant] || variantStyles.default;\n});\n\nexport const Paragraph = React.forwardRef<globalThis.HTMLParagraphElement, ParagraphProps>(\n  ({ variant = 'default', color = 'neutral', size = 'md', children, ...others }, ref) => {\n    // `testID` and `dataTestId` are the shared contract's spellings; the DOM\n    // wants `data-testid`, and must not see the other two as attributes.\n    const testId = resolveTestId(others);\n    const props = withoutTestIdProps(others);\n    return (\n      <StyledParagraph\n        ref={ref}\n        data-testid={testId}\n        customVariant={variant}\n        customColor={color}\n        customSize={size}\n        {...props}\n      >\n        {children}\n      </StyledParagraph>\n    );\n  },\n);\n\nParagraph.displayName = 'Paragraph';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,OAAO,WAAW;AA6GZ;AA3FN,IAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,MAAI,UAAU,WAAW;AACvB,WAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AAEA,QAAM,WAAmC;AAAA,IACvC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,UAAU;AAAA,IACnC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,MAAM,MAAM,QAAQ,KAAK;AAAA,IACzB,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAC9B;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ,KAAK;AAC/C;AAKA,IAAM,UAA4D;AAElE,IAAM,aAAa,CAAC,OAAc,eAAkC;AAClE,QAAM,OAAO,QAAQ,UAAU;AAC/B,SAAO,OAAO,EAAE,UAAU,IAAI,OAAO,KAAK,QAAQ,GAAG,YAAY,KAAK,WAAW,IAAI,CAAC;AACxF;AAIA,IAAM,eAAe,CAAC,OAAc,YAAoB,cAA0C;AAChG,QAAM,UAAU,eAAe,OAAO,YAAY,QAAQ,UAAU,GAAG;AACvE,SAAO,YAAY,SAAY,SAAY,IAAI,OAAO,OAAO;AAC/D;AAEA,IAAM,kBAAkB,OAAO,YAAY;AAAA,EACzC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,YAAY,EAAE,SAAS,IAAc;AAC3E,CAAC,EAIE,CAAC,EAAE,OAAO,gBAAgB,WAAW,cAAc,WAAW,aAAa,KAAK,MAAM;AACvF,QAAM,YAAY,kBAAkB,OAAO,WAAW;AAEtD,QAAM,aAAwB;AAAA,IAC5B,YAAY,MAAM,WAAW,MAAM;AAAA,IACnC,QAAQ,OAAO,0BAA0B;AAAA,IACzC,YAAY;AAAA,IACZ,GAAG,WAAW,OAAO,UAAU;AAAA,EACjC;AAGA,QAAM,gBAA2C;AAAA,IAC/C,SAAS;AAAA,MACP,GAAG;AAAA,MACH,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAU,aAAa,OAAO,YAAY,cAAc;AAAA,MACxD,YAAY;AAAA,MACZ,eAAe,GAAG,sBAAsB;AAAA,IAC1C;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,UAAU,aAAa,OAAO,YAAY,eAAe;AAAA,MACzD,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,cAAc,aAAa,KAAK,cAAc;AACvD,CAAC;AAEM,IAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ;AAGrF,UAAM,SAAS,cAAc,MAAM;AACnC,UAAM,QAAQ,mBAAmB,MAAM;AACvC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACX,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/dist/chunk-3A22SBIU.js

@@ -0,0 +1,82 @@
+import {
+  baseStyles,
+  effectStyles,
+  getColorFromTheme,
+  variantStyles
+} from "./chunk-YH37X6JT.js";
+
+// src/components/form/Toggle/Toggle.tsx
+import ToggleButton from "@mui/material/ToggleButton/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledToggle = styled(ToggleButton, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient
+}) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    ...baseStyles(theme, colorPalette, customSize),
+    ...variantStyles(theme, customVariant, colorPalette),
+    ...effectStyles(theme, colorPalette, { glass, gradient, glow })
+  };
+});
+var Toggle = forwardRef(
+  ({
+    variant = "default",
+    color = "primary",
+    size = "md",
+    icon,
+    glow = false,
+    glass = false,
+    gradient = false,
+    dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const testIds = {
+      container: dataTestId,
+      icon: dataTestId ? `${dataTestId}-icon` : void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledToggle,
+      {
+        ref,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        "data-testid": testIds.container,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { marginRight: children ? "8px" : "0" },
+              "data-testid": testIds.icon,
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+export {
+  Toggle
+};
+//# sourceMappingURL=chunk-3A22SBIU.js.map

package/dist/chunk-3AQD2EA6.js

@@ -0,0 +1,114 @@
+import {
+  HorizontalView,
+  StackedView,
+  WaterfallView,
+  phaseColors
+} from "./chunk-WFAJTO2B.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/TimingDiagram/TimingDiagram.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DiagramContainer = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(3),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  borderRadius: theme.shape.borderRadius * 2
+}));
+var Legend = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  paddingTop: theme.spacing(2),
+  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+}));
+var LegendItem = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  "& .color": {
+    width: rem(theme, 12),
+    height: rem(theme, 12),
+    borderRadius: rem(theme, 2)
+  },
+  "& .label": {
+    fontSize: rem(theme, 12.8),
+    color: theme.palette.text.secondary
+  }
+}));
+var calculatePercentages = (data) => {
+  const total = data.total || 1;
+  return {
+    dns: (data.dns || 0) / total * 100,
+    connect: (data.connect || 0) / total * 100,
+    ssl: (data.ssl || 0) / total * 100,
+    request: (data.request || 0) / total * 100,
+    response: (data.response || 0) / total * 100
+  };
+};
+var phasesOf = (data) => [
+  { key: "dns", label: "DNS Lookup", value: data.dns },
+  { key: "connect", label: "Connection", value: data.connect },
+  { key: "ssl", label: "SSL/TLS", value: data.ssl },
+  { key: "request", label: "Request", value: data.request },
+  { key: "response", label: "Response", value: data.response }
+].filter((phase) => phase.value !== void 0 && phase.value > 0);
+var VIEWS = {
+  waterfall: WaterfallView,
+  stacked: StackedView,
+  horizontal: HorizontalView
+};
+var TimingDiagram = ({
+  copy,
+  data,
+  showLabels = true,
+  height,
+  animated = true,
+  showTooltips = true,
+  variant = "waterfall"
+}) => {
+  const percentages = useMemo(() => calculatePercentages(data), [data]);
+  const phases = phasesOf(data);
+  const View = VIEWS[variant];
+  return /* @__PURE__ */ jsxs(DiagramContainer, { elevation: 2, role: "region", "aria-label": copy.regionLabel, tabIndex: 0, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: "bold", gutterBottom: true, children: copy.heading }),
+    View && /* @__PURE__ */ jsx(
+      View,
+      {
+        phases,
+        percentages,
+        data,
+        animated,
+        showLabels,
+        showTooltips,
+        plotHeightPx: height ?? 40
+      }
+    ),
+    showLabels && /* @__PURE__ */ jsx(Legend, { children: phases.map((phase) => /* @__PURE__ */ jsxs(LegendItem, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "color",
+          sx: (theme) => ({ backgroundColor: phaseColors(theme)[phase.key] })
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label })
+    ] }, phase.key)) })
+  ] });
+};
+var TimingDiagram_default = TimingDiagram;
+
+export {
+  TimingDiagram,
+  TimingDiagram_default
+};
+//# sourceMappingURL=chunk-3AQD2EA6.js.map

package/dist/chunk-3AQD2EA6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { TimingData, TimingDiagramProps } from './TimingDiagram.types';\nimport type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';\nimport {\n  HorizontalView,\n  phaseColors,\n  StackedView,\n  WaterfallView,\n} from './TimingDiagram.views';\nimport { rem } from '../../../tokens/relative';\n\n// Styled components\nconst DiagramContainer = styled(Paper)(({ theme }) => ({\n  padding: theme.spacing(3),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 10)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n}));\n\nconst Legend = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(2),\n  marginTop: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst LegendItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  '& .color': {\n    width: rem(theme, 12),\n    height: rem(theme, 12),\n    borderRadius: rem(theme, 2),\n  },\n  '& .label': {\n    fontSize: rem(theme, 12.8),\n    color: theme.palette.text.secondary,\n  },\n}));\n\n// Helper functions\nconst calculatePercentages = (data: TimingData): Record<string, number> => {\n  const total = data.total || 1;\n  return {\n    dns: ((data.dns || 0) / total) * 100,\n    connect: ((data.connect || 0) / total) * 100,\n    ssl: ((data.ssl || 0) / total) * 100,\n    request: ((data.request || 0) / total) * 100,\n    response: ((data.response || 0) / total) * 100,\n  };\n};\n\n// A phase with no recorded time never happened — an HTTP request has no SSL\n// handshake, for instance — so it gets no bar and no legend entry.\nconst phasesOf = (data: TimingData): Phase[] =>\n  [\n    { key: 'dns', label: 'DNS Lookup', value: data.dns },\n    { key: 'connect', label: 'Connection', value: data.connect },\n    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },\n    { key: 'request', label: 'Request', value: data.request },\n    { key: 'response', label: 'Response', value: data.response },\n  ].filter((phase) => phase.value !== undefined && phase.value > 0);\n\nconst VIEWS: Record<string, FC<TimingViewProps>> = {\n  waterfall: WaterfallView,\n  stacked: StackedView,\n  horizontal: HorizontalView,\n};\n\n// Main component\nexport const TimingDiagram: FC<TimingDiagramProps> = ({\n  copy,\n  data,\n  showLabels = true,\n  height,\n  animated = true,\n  showTooltips = true,\n  variant = 'waterfall',\n}) => {\n  const percentages = useMemo(() => calculatePercentages(data), [data]);\n  const phases = phasesOf(data);\n  const View = VIEWS[variant];\n\n  return (\n    <DiagramContainer elevation={2} role=\"region\" aria-label={copy.regionLabel} tabIndex={0}>\n      <Typography variant=\"h6\" fontWeight=\"bold\" gutterBottom>\n        {copy.heading}\n      </Typography>\n\n      {View && (\n        <View\n          phases={phases}\n          percentages={percentages}\n          data={data}\n          animated={animated}\n          showLabels={showLabels}\n          showTooltips={showTooltips}\n          // The waterfall's plot height, 40 design px unless the caller says otherwise.\n          plotHeightPx={height ?? 40}\n        />\n      )}\n\n      {showLabels && (\n        <Legend>\n          {phases.map((phase) => (\n            <LegendItem key={phase.key}>\n              <Box\n                className=\"color\"\n                sx={(theme) => ({ backgroundColor: phaseColors(theme)[phase.key as PhaseKey] })}\n              />\n              <Typography className=\"label\">{phase.label}</Typography>\n            </LegendItem>\n          ))}\n        </Legend>\n      )}\n    </DiagramContainer>\n  );\n};\n\n// Export default\nexport default TimingDiagram;\n"],"mappings":"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","names":[]}