@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-4OW4O4A2.js

@@ -0,0 +1,246 @@
+import {
+  barEmphasisStyles,
+  barVariantStyles,
+  circularEmphasisStyles,
+  getColorFromTheme,
+  getSizeStyles,
+  pulseAnimation
+} from "./chunk-RIF6L54B.js";
+import {
+  progressLabelText,
+  resolveProgressProps
+} from "./chunk-5JEOLUWJ.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Progress/Progress.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import LinearProgress from "@mui/material/LinearProgress/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledLinearProgress = styled(LinearProgress, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "customColor", "glow", "pulse"].includes(prop)
+})(({ theme, customVariant, customSize, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    height: rem(theme, sizeStyles.heightPx),
+    borderRadius: rem(theme, sizeStyles.heightPx / 2),
+    backgroundColor: alpha(colorPalette.main, 0.1),
+    "& .MuiLinearProgress-bar": {
+      borderRadius: "inherit",
+      transition: "all 0.3s ease",
+      ...barVariantStyles(theme, customVariant, colorPalette),
+      ...barEmphasisStyles(theme, colorPalette, glow, pulse)
+    }
+  };
+});
+var StyledCircularProgress = styled(CircularProgress, {
+  shouldForwardProp: (prop) => !["customColor", "glow", "pulse"].includes(prop)
+})(({ theme, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    color: colorPalette.main,
+    ...circularEmphasisStyles(theme, colorPalette, glow, pulse)
+  };
+});
+var SegmentedProgress = ({ value = 0, segments, color, size, glow, pulse, dataTestId }) => {
+  const theme = useTheme();
+  const colorPalette = getColorFromTheme(theme, color);
+  const sizeStyles = getSizeStyles(size);
+  const filledSegments = Math.floor(value / 100 * segments);
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, width: "100%" }, "data-testid": `${dataTestId}-segments-container`, children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": `${dataTestId}-segment-${index}`,
+      sx: {
+        flex: 1,
+        height: rem(theme, sizeStyles.heightPx),
+        // In `sx` a numeric radius is a multiple of `shape.borderRadius` — relative already.
+        borderRadius: sizeStyles.heightPx / 2,
+        backgroundColor: index < filledSegments ? colorPalette.main : alpha(colorPalette.main, 0.1),
+        transition: "all 0.3s ease",
+        ...glow && index < filledSegments && {
+          boxShadow: `${rems(theme, 0, 0, 6, 1)} ${alpha(colorPalette.main, 0.4)}`
+        },
+        ...pulse && index < filledSegments && {
+          animation: `${pulseAnimation} 2s infinite`
+        }
+      }
+    },
+    index
+  )) });
+};
+var ProgressLabel = ({
+  size,
+  label,
+  testId
+}) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: "caption",
+    sx: {
+      display: "block",
+      textAlign: "center",
+      mt: 1,
+      fontSize: getSizeStyles(size).fontSize,
+      fontWeight: 600
+    },
+    "data-testid": testId,
+    children: label
+  }
+);
+var CircularView = React.forwardRef(
+  ({
+    size,
+    color,
+    glow,
+    pulse,
+    showLabel,
+    displayValue,
+    displayLabel,
+    value,
+    dataTestId,
+    thickness,
+    circularSize,
+    ...props
+  }, ref) => {
+    const theme = useTheme();
+    const sizeStyles = getSizeStyles(size);
+    return /* @__PURE__ */ jsxs(Box, { ref, sx: { position: "relative", display: "inline-flex" }, "data-testid": dataTestId, children: [
+      /* @__PURE__ */ jsx(
+        StyledCircularProgress,
+        {
+          variant: value !== void 0 ? "determinate" : "indeterminate",
+          value: displayValue,
+          size: rem(theme, circularSize || sizeStyles.circularSizePx),
+          thickness,
+          customColor: color,
+          glow,
+          pulse,
+          "data-testid": `${dataTestId}-circular`,
+          ...props
+        }
+      ),
+      showLabel && value !== void 0 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            position: "absolute",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "div",
+              color: "text.secondary",
+              sx: { fontSize: sizeStyles.fontSize, fontWeight: 600 },
+              "data-testid": `${dataTestId}-label`,
+              children: displayLabel
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+CircularView.displayName = "ProgressCircularView";
+var SegmentedView = React.forwardRef(
+  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, dataTestId, segments, value: _value, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, ...props, children: [
+    /* @__PURE__ */ jsx(
+      SegmentedProgress,
+      {
+        value: displayValue,
+        segments,
+        color,
+        size,
+        glow,
+        pulse,
+        dataTestId
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
+  ] })
+);
+SegmentedView.displayName = "ProgressSegmentedView";
+var LinearView = React.forwardRef(
+  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, value, dataTestId, variant, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx(
+      StyledLinearProgress,
+      {
+        variant: value !== void 0 ? "determinate" : "indeterminate",
+        value: displayValue,
+        customVariant: variant,
+        customSize: size,
+        customColor: color,
+        glow,
+        pulse,
+        "data-testid": `${dataTestId}-linear`,
+        ...props
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
+  ] })
+);
+LinearView.displayName = "ProgressLinearView";
+var Progress = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      size,
+      color,
+      glow,
+      pulse,
+      showLabel,
+      label,
+      segments,
+      thickness,
+      circularSize,
+      value,
+      dataTestId,
+      testID,
+      ...props
+    } = resolveProgressProps(rawProps);
+    const displayValue = value || 0;
+    const shared = {
+      size,
+      color,
+      glow,
+      pulse,
+      showLabel,
+      displayValue,
+      displayLabel: progressLabelText(label, showLabel, displayValue),
+      value,
+      // `testID` is React Native's spelling of the same id and names the
+      // component too; `data-testid` is left in `props`, on its way to the
+      // element the caller means to address, where it has always landed.
+      dataTestId: testID ?? dataTestId,
+      ...props
+    };
+    if (variant === "circular") {
+      return /* @__PURE__ */ jsx(CircularView, { ref, ...shared, thickness, circularSize });
+    }
+    if (variant === "segmented") {
+      return /* @__PURE__ */ jsx(SegmentedView, { ref, ...shared, segments });
+    }
+    return /* @__PURE__ */ jsx(LinearView, { ref, ...shared, variant });
+  }
+);
+Progress.displayName = "Progress";
+
+export {
+  Progress
+};
+//# sourceMappingURL=chunk-4OW4O4A2.js.map

package/dist/chunk-4OW4O4A2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Progress/Progress.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { progressLabelText, resolveProgressProps } from './Progress.helpers';\nimport {\n  barEmphasisStyles,\n  barVariantStyles,\n  circularEmphasisStyles,\n  getColorFromTheme,\n  getSizeStyles,\n  pulseAnimation,\n} from './Progress.styles';\nimport type { ProgressProps, ProgressSize, ProgressVariant } from './Progress.types';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst StyledLinearProgress = styled(LinearProgress, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'customColor', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: ProgressVariant;\n  customSize?: ProgressSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, customColor = 'primary', glow, pulse }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    height: rem(theme, sizeStyles.heightPx),\n    borderRadius: rem(theme, sizeStyles.heightPx / 2),\n    backgroundColor: alpha(colorPalette.main, 0.1),\n\n    '& .MuiLinearProgress-bar': {\n      borderRadius: 'inherit',\n      transition: 'all 0.3s ease',\n      ...barVariantStyles(theme, customVariant, colorPalette),\n      ...barEmphasisStyles(theme, colorPalette, glow, pulse),\n    },\n  };\n});\n\nconst StyledCircularProgress = styled(CircularProgress, {\n  shouldForwardProp: (prop) => !['customColor', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customColor = 'primary', glow, pulse }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  return {\n    color: colorPalette.main,\n    ...circularEmphasisStyles(theme, colorPalette, glow, pulse),\n  };\n});\n\nconst SegmentedProgress: React.FC<{\n  value?: number;\n  segments: number;\n  color: string;\n  size: ProgressSize;\n  glow: boolean;\n  pulse: boolean;\n  dataTestId?: string;\n}> = ({ value = 0, segments, color, size, glow, pulse, dataTestId }) => {\n  const theme = useTheme();\n  const colorPalette = getColorFromTheme(theme, color);\n  const sizeStyles = getSizeStyles(size);\n  const filledSegments = Math.floor((value / 100) * segments);\n\n  return (\n    <Box sx={{ display: 'flex', gap: 0.5, width: '100%' }} data-testid={`${dataTestId}-segments-container`}>\n      {Array.from({ length: segments }, (_, index) => (\n        <Box\n          key={index}\n          data-testid={`${dataTestId}-segment-${index}`}\n          sx={{\n            flex: 1,\n            height: rem(theme, sizeStyles.heightPx),\n            // In `sx` a numeric radius is a multiple of `shape.borderRadius` — relative already.\n            borderRadius: sizeStyles.heightPx / 2,\n            backgroundColor:\n              index < filledSegments ? colorPalette.main : alpha(colorPalette.main, 0.1),\n            transition: 'all 0.3s ease',\n            ...(glow &&\n              index < filledSegments && {\n                boxShadow: `${rems(theme, 0, 0, 6, 1)} ${alpha(colorPalette.main, 0.4)}`,\n              }),\n            ...(pulse &&\n              index < filledSegments && {\n                animation: `${pulseAnimation} 2s infinite`,\n              }),\n          }}\n        />\n      ))}\n    </Box>\n  );\n};\n\ninterface ViewProps {\n  size: ProgressSize;\n  color: string;\n  glow: boolean;\n  pulse: boolean;\n  showLabel: boolean;\n  displayValue: number;\n  displayLabel: string;\n  /** Absent means indeterminate — the bar animates rather than reporting progress. */\n  value?: number;\n  dataTestId: string;\n}\n\nconst ProgressLabel: React.FC<{ size: ProgressSize; label: string; testId: string }> = ({\n  size,\n  label,\n  testId,\n}) => (\n  <Typography\n    variant=\"caption\"\n    sx={{\n      display: 'block',\n      textAlign: 'center',\n      mt: 1,\n      fontSize: getSizeStyles(size).fontSize,\n      fontWeight: 600,\n    }}\n    data-testid={testId}\n  >\n    {label}\n  </Typography>\n);\n\nconst CircularView = React.forwardRef<\n  HTMLDivElement,\n  ViewProps & { thickness: number; circularSize?: number }\n>(\n  (\n    {\n      size,\n      color,\n      glow,\n      pulse,\n      showLabel,\n      displayValue,\n      displayLabel,\n      value,\n      dataTestId,\n      thickness,\n      circularSize,\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const sizeStyles = getSizeStyles(size);\n\n    return (\n      <Box ref={ref} sx={{ position: 'relative', display: 'inline-flex' }} data-testid={dataTestId}>\n        <StyledCircularProgress\n          variant={value !== undefined ? 'determinate' : 'indeterminate'}\n          value={displayValue}\n          size={rem(theme, circularSize || sizeStyles.circularSizePx)}\n          thickness={thickness}\n          customColor={color}\n          glow={glow}\n          pulse={pulse}\n          data-testid={`${dataTestId}-circular`}\n          {...props}\n        />\n        {showLabel && value !== undefined && (\n          <Box\n            sx={{\n              top: 0,\n              left: 0,\n              bottom: 0,\n              right: 0,\n              position: 'absolute',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n            }}\n          >\n            <Typography\n              variant=\"caption\"\n              component=\"div\"\n              color=\"text.secondary\"\n              sx={{ fontSize: sizeStyles.fontSize, fontWeight: 600 }}\n              data-testid={`${dataTestId}-label`}\n            >\n              {displayLabel}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nCircularView.displayName = 'ProgressCircularView';\n\nconst SegmentedView = React.forwardRef<HTMLDivElement, ViewProps & { segments: number }>(\n  (\n    { size, color, glow, pulse, showLabel, displayValue, displayLabel, dataTestId, segments, value: _value, ...props },\n    ref,\n  ) => (\n    <Box ref={ref} sx={{ width: '100%' }} data-testid={dataTestId} {...props}>\n      <SegmentedProgress\n        value={displayValue}\n        segments={segments}\n        color={color}\n        size={size}\n        glow={glow}\n        pulse={pulse}\n        dataTestId={dataTestId}\n      />\n      {showLabel && (\n        <ProgressLabel size={size} label={displayLabel} testId={`${dataTestId}-label`} />\n      )}\n    </Box>\n  ),\n);\n\nSegmentedView.displayName = 'ProgressSegmentedView';\n\nconst LinearView = React.forwardRef<HTMLDivElement, ViewProps & { variant: ProgressVariant }>(\n  (\n    { size, color, glow, pulse, showLabel, displayValue, displayLabel, value, dataTestId, variant, ...props },\n    ref,\n  ) => (\n    <Box ref={ref} sx={{ width: '100%' }} data-testid={dataTestId}>\n      <StyledLinearProgress\n        variant={value !== undefined ? 'determinate' : 'indeterminate'}\n        value={displayValue}\n        customVariant={variant}\n        customSize={size}\n        customColor={color}\n        glow={glow}\n        pulse={pulse}\n        data-testid={`${dataTestId}-linear`}\n        {...props}\n      />\n      {showLabel && (\n        <ProgressLabel size={size} label={displayLabel} testId={`${dataTestId}-label`} />\n      )}\n    </Box>\n  ),\n);\n\nLinearView.displayName = 'ProgressLinearView';\n\nexport const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      size,\n      color,\n      glow,\n      pulse,\n      showLabel,\n      label,\n      segments,\n      thickness,\n      circularSize,\n      value,\n      dataTestId,\n      testID,\n      ...props\n    } = resolveProgressProps(rawProps);\n    const displayValue = value || 0;\n    const shared = {\n      size,\n      color,\n      glow,\n      pulse,\n      showLabel,\n      displayValue,\n      displayLabel: progressLabelText(label, showLabel, displayValue),\n      value,\n      // `testID` is React Native's spelling of the same id and names the\n      // component too; `data-testid` is left in `props`, on its way to the\n      // element the caller means to address, where it has always landed.\n      dataTestId: testID ?? dataTestId,\n      ...props,\n    };\n\n    if (variant === 'circular') {\n      return (\n        <CircularView ref={ref} {...shared} thickness={thickness} circularSize={circularSize} />\n      );\n    }\n\n    if (variant === 'segmented') {\n      return <SegmentedView ref={ref} {...shared} segments={segments} />;\n    }\n\n    return <LinearView ref={ref} {...shared} variant={variant} />;\n  },\n);\n\nProgress.displayName = 'Progress';\n"],"mappings":"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","names":[]}

package/dist/chunk-4WCDMCIS.js

@@ -0,0 +1,43 @@
+import {
+  ConfirmActionDialog
+} from "./chunk-BJZOBG24.js";
+import {
+  useConfirmAction
+} from "./chunk-EMYESBIT.js";
+
+// src/components/feedback/ConfirmAction/with-confirmation.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function resolveOptions(defaults, instance) {
+  if (instance === false) return null;
+  const merged = { ...defaults, ...instance };
+  if (!merged.title || !merged.confirmText) return null;
+  return { ...merged, title: merged.title, confirmText: merged.confirmText };
+}
+function useGuardedHandler(onClick) {
+  return React.useCallback(() => {
+    const result = onClick?.();
+    return result instanceof Promise ? result : void 0;
+  }, [onClick]);
+}
+function withConfirmation(Wrapped, defaults) {
+  function WithConfirmation(props) {
+    const { confirm, onClick } = props;
+    const options = resolveOptions(defaults, confirm);
+    const state = useConfirmAction(useGuardedHandler(onClick), defaults.errorText);
+    const { confirm: _confirm, ...rest } = props;
+    const forwarded = rest;
+    if (!options) return /* @__PURE__ */ jsx(Wrapped, { ...forwarded });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Wrapped, { ...forwarded, onClick: state.request }),
+      /* @__PURE__ */ jsx(ConfirmActionDialog, { state, ...options, copy: defaults.copy })
+    ] });
+  }
+  WithConfirmation.displayName = `withConfirmation(${Wrapped.displayName ?? Wrapped.name ?? "Component"})`;
+  return WithConfirmation;
+}
+
+export {
+  withConfirmation
+};
+//# sourceMappingURL=chunk-4WCDMCIS.js.map

package/dist/chunk-4WQ3YXQL.js

@@ -0,0 +1,72 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Dialog,
+  DialogContent
+} from "./chunk-L4UP5VYS.js";
+import {
+  default as default2
+} from "./chunk-WEBEOBN5.js";
+import {
+  Button
+} from "./chunk-KH25WUSX.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+
+// src/components/data-display/DataViews/DeleteViewDialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DeleteViewDialog({
+  view,
+  onClose,
+  onConfirm,
+  /** What this table holds, for the "your records are safe" line. */
+  entityLabel = "Os registros",
+  testIdPrefix = "view"
+}) {
+  const copy = useDataViewsCopy();
+  if (!view) return null;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: true,
+      onClose,
+      title: copy.deleteView.title,
+      size: "sm",
+      showCloseButton: true,
+      dataTestId: `${testIdPrefix}-delete-modal`,
+      children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(default2, { spacing: 1.5, children: [
+        /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", "data-testid": `${testIdPrefix}-delete-target`, children: copy.deleteView.target(view.name) }),
+        view.shared && /* @__PURE__ */ jsx(Text, { variant: "body", color: "warning", as: "p", "data-testid": `${testIdPrefix}-delete-shared`, children: copy.deleteView.sharedWarning }),
+        /* @__PURE__ */ jsx(Text, { variant: "body", color: "secondary", as: "p", children: copy.deleteView.rowsUnaffected(entityLabel) }),
+        /* @__PURE__ */ jsxs(default2, { direction: "row", spacing: 1.5, sx: { justifyContent: "flex-end", pt: 0.5 }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              color: "neutral",
+              onClick: onClose,
+              dataTestId: `${testIdPrefix}-delete-cancel`,
+              children: copy.deleteView.cancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: "danger",
+              onClick: () => onConfirm(view),
+              dataTestId: `${testIdPrefix}-delete-confirm`,
+              children: copy.deleteView.confirm
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
+
+export {
+  DeleteViewDialog
+};
+//# sourceMappingURL=chunk-4WQ3YXQL.js.map

package/dist/chunk-57FZM6GH.js

@@ -0,0 +1,78 @@
+import {
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-number-input.tsx
+import Box from "@mui/material/Box/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ALLOWED = /[^\d.,]/g;
+function parsePtBrNumber(text) {
+  const cleaned = text.replace(ALLOWED, "");
+  if (cleaned === "") return void 0;
+  const hasComma = cleaned.includes(",");
+  const dots = cleaned.split(".").length - 1;
+  const lastDot = cleaned.lastIndexOf(".");
+  const dotIsDecimal = !hasComma && dots === 1 && cleaned.length - lastDot - 1 > 0 && cleaned.length - lastDot - 1 <= 2;
+  const normalized = dotIsDecimal ? cleaned : cleaned.replace(/\./g, "").replace(",", ".");
+  const amount = Number(normalized);
+  return Number.isFinite(amount) ? amount : void 0;
+}
+function formatPtBrNumber(amount) {
+  if (amount == null || amount === "") return "";
+  return String(amount).replace(".", ",");
+}
+function boundAsNumber(amount) {
+  if (amount == null || amount === "") return void 0;
+  const parsed = typeof amount === "number" ? amount : Number(amount);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+function NumberBoundInput({
+  label,
+  value,
+  unit,
+  onChange,
+  testId
+}) {
+  const applied = boundAsNumber(value);
+  const [text, setText] = useState(() => formatPtBrNumber(value));
+  useEffect(() => {
+    setText((current) => parsePtBrNumber(current) === applied ? current : formatPtBrNumber(applied));
+  }, [applied]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      type: "text",
+      label,
+      value: text,
+      onChange: (event) => {
+        const next = event.target.value.replace(ALLOWED, "");
+        setText(next);
+        const amount = parsePtBrNumber(next);
+        if (next === "") return onChange(void 0);
+        if (amount !== void 0) onChange(amount);
+      },
+      onBlur: () => setText(
+        (current) => parsePtBrNumber(current) === applied ? current : formatPtBrNumber(applied)
+      ),
+      InputLabelProps: { shrink: true },
+      inputProps: { "data-testid": testId, inputMode: "decimal", autoComplete: "off" },
+      InputProps: unit ? {
+        startAdornment: /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5, color: "text.secondary" }, children: unit })
+      } : void 0,
+      sx: [{ width: sxRem(140) }, fieldTextFieldStyles]
+    }
+  );
+}
+
+export {
+  parsePtBrNumber,
+  formatPtBrNumber,
+  NumberBoundInput
+};
+//# sourceMappingURL=chunk-57FZM6GH.js.map

package/dist/chunk-57FZM6GH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-number-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A numeric bound typed the way Brazilians write numbers, replacing\n * `<input type=\"number\">`.\n *\n * The native control parses in the BROWSER's locale, and it does not fail\n * loudly when the text does not match — it drops what it cannot read and keeps\n * the rest. Typing `50,00` into it, measured in Chromium:\n *\n *     digitado \"50,00\"  ->  campo \"5000\"   ->  filtro R$ 5.000\n *     digitado \"17,50\"  ->  campo \"1750\"   ->  filtro R$ 1.750\n *     digitado \"50.00\"  ->  campo \"500\"    ->  filtro R$ 500\n *\n * The comma is deleted and the digits close ranks, so the merchant asks for\n * fifty reais and gets a filter a HUNDRED times larger. The list empties, the\n * chip reads `Valor: ≥ R$ 5000`, and nothing on screen connects that to the\n * `50,00` they typed. It reads as \"the value filter is broken\", which is how it\n * was reported.\n *\n * So the field parses pt-BR itself: `,` is the decimal separator and `.` groups\n * thousands, which is what `R$ 1.234,56` means to the person reading it. A\n * plain `50` still works, and so does `50.00` — a dot with exactly two digits\n * after it is far more likely to be a decimal typed on a numeric keypad than a\n * thousands group, and reading it as `5000` is the very failure this replaces.\n *\n * WHICH KEYPAD, and where the request has to be made. `inputMode` goes on the\n * `<input>`, via `inputProps` — set on the `TextField` it rides the spread onto\n * the root `FormControl` div, an element nothing types into, so the attribute\n * has no effect and a phone goes on offering letters for a field that accepts\n * none of them. It is `decimal` rather than `numeric` because the numeric pad\n * has no comma on iOS, and the comma is the separator this field exists to\n * accept — `numeric` here would reopen the bug above from the other side, with\n * `17,50` untypeable rather than misread. Autofill is off alongside it: its\n * saved-value strip covers the keypad to offer names and addresses, none of\n * which survive `ALLOWED` anyway.\n */\nimport Box from '@mui/material/Box/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useEffect, useState } from 'react';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n/** Everything this field lets through: digits and the two separators. */\nconst ALLOWED = /[^\\d.,]/g;\n\n/**\n * pt-BR text → number, or `undefined` when it is not one (yet).\n *\n * `.` is a thousands group and `,` is the decimal point, EXCEPT when a lone dot\n * is followed by one or two digits and no comma is present — `50.00` and `1.5`\n * are decimals somebody typed, while `1.234` is a thousand.\n */\nexport function parsePtBrNumber(text: string): number | undefined {\n  const cleaned = text.replace(ALLOWED, '');\n  if (cleaned === '') return undefined;\n  const hasComma = cleaned.includes(',');\n  const dots = cleaned.split('.').length - 1;\n  const lastDot = cleaned.lastIndexOf('.');\n  const dotIsDecimal =\n    !hasComma && dots === 1 && cleaned.length - lastDot - 1 > 0 && cleaned.length - lastDot - 1 <= 2;\n  const normalized = dotIsDecimal\n    ? cleaned\n    : cleaned.replace(/\\./g, '').replace(',', '.');\n  const amount = Number(normalized);\n  return Number.isFinite(amount) ? amount : undefined;\n}\n\n/**\n * A stored bound → the text the merchant reads, with a comma for the decimal\n * point.\n *\n * It takes a STRING too, and that is not defensive typing: a range restored\n * from the URL arrives as one (`?totalCents_gte=5000`). Narrowing to `number`\n * and dropping the rest emptied the field on every reload — and then the next\n * keystroke wrote a bound built from nothing.\n */\nexport function formatPtBrNumber(amount: number | string | undefined): string {\n  if (amount == null || amount === '') return '';\n  return String(amount).replace('.', ',');\n}\n\n/** The same, as a number — `undefined` when the bound is unset or unusable. */\nfunction boundAsNumber(amount: number | string | undefined): number | undefined {\n  if (amount == null || amount === '') return undefined;\n  const parsed = typeof amount === 'number' ? amount : Number(amount);\n  return Number.isFinite(parsed) ? parsed : undefined;\n}\n\n/**\n * One end of a numeric range. The BOUND stays a plain `number` — nothing\n * downstream learns that the typing surface changed.\n */\nexport function NumberBoundInput({\n  label,\n  value,\n  unit,\n  onChange,\n  testId,\n}: {\n  label: string;\n  /** The applied bound. A range restored from the URL hands this over as a string. */\n  value: number | string | undefined;\n  /** Rendered as a start adornment (\"R$\"), not parsed out of the text. */\n  unit?: string;\n  onChange: (bound: number | undefined) => void;\n  testId: string;\n}): React.JSX.Element {\n  const applied = boundAsNumber(value);\n  const [text, setText] = useState(() => formatPtBrNumber(value));\n\n  // Re-sync only when the applied bound moved somewhere the text does not\n  // already mean — a \"Limpar\", a saved view. Comparing through the PARSE rather\n  // than the string keeps `50,` and `50,00` from being rewritten mid-edit.\n  useEffect(() => {\n    setText((current) => (parsePtBrNumber(current) === applied ? current : formatPtBrNumber(applied)));\n  }, [applied]);\n\n  return (\n    <TextField\n      size=\"small\"\n      type=\"text\"\n      label={label}\n      value={text}\n      onChange={(event) => {\n        // Reject the characters rather than silently dropping them AFTER\n        // parsing — a letter should not move the number.\n        const next = event.target.value.replace(ALLOWED, '');\n        setText(next);\n        const amount = parsePtBrNumber(next);\n        // A bare separator (`50,`) parses to nothing yet; leave the applied\n        // bound alone rather than clearing it half-way through a decimal.\n        if (next === '') return onChange(undefined);\n        if (amount !== undefined) onChange(amount);\n      }}\n      // Blur TIDIES, it does not rewrite. Text that already means the applied\n      // bound is left exactly as typed — `20`, `17,50` and `1.234,56` all stay\n      // — and only something that does not (`50,,`) snaps back.\n      //\n      // Padding the field to the chip's precision was tried and is worse than\n      // the mismatch it closed: settling `20` to `20,00` means the next edit\n      // starts from text the merchant did not write, so appending a digit to\n      // make it 200 produces `20,000`, which parses back to 20. The filter then\n      // ignores the keystroke, which is exactly the \"não funciona\" this whole\n      // control exists to end. An input must hold what was typed into it; the\n      // CHIP is where the applied window gets written in full.\n      onBlur={() =>\n        setText((current) =>\n          parsePtBrNumber(current) === applied ? current : formatPtBrNumber(applied),\n        )\n      }\n      InputLabelProps={{ shrink: true }}\n      // `inputMode` belongs on the `<input>`, never on the TextField — see the\n      // keypad note at the top of this file for what goes wrong up there.\n      inputProps={{ 'data-testid': testId, inputMode: 'decimal', autoComplete: 'off' }}\n      InputProps={\n        unit\n          ? {\n              startAdornment: (\n                <Box component=\"span\" sx={{ mr: 0.5, color: 'text.secondary' }}>\n                  {unit}\n                </Box>\n              ),\n            }\n          : undefined\n      }\n      sx={[{ width: sxRem(140) }, fieldTextFieldStyles]}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAqCA,OAAO,SAAS;AAChB,OAAO,eAAe;AACtB,SAAgB,WAAW,gBAAgB;AAwH3B;AAnHhB,IAAM,UAAU;AAST,SAAS,gBAAgB,MAAkC;AAChE,QAAM,UAAU,KAAK,QAAQ,SAAS,EAAE;AACxC,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,WAAW,QAAQ,SAAS,GAAG;AACrC,QAAM,OAAO,QAAQ,MAAM,GAAG,EAAE,SAAS;AACzC,QAAM,UAAU,QAAQ,YAAY,GAAG;AACvC,QAAM,eACJ,CAAC,YAAY,SAAS,KAAK,QAAQ,SAAS,UAAU,IAAI,KAAK,QAAQ,SAAS,UAAU,KAAK;AACjG,QAAM,aAAa,eACf,UACA,QAAQ,QAAQ,OAAO,EAAE,EAAE,QAAQ,KAAK,GAAG;AAC/C,QAAM,SAAS,OAAO,UAAU;AAChC,SAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC5C;AAWO,SAAS,iBAAiB,QAA6C;AAC5E,MAAI,UAAU,QAAQ,WAAW,GAAI,QAAO;AAC5C,SAAO,OAAO,MAAM,EAAE,QAAQ,KAAK,GAAG;AACxC;AAGA,SAAS,cAAc,QAAyD;AAC9E,MAAI,UAAU,QAAQ,WAAW,GAAI,QAAO;AAC5C,QAAM,SAAS,OAAO,WAAW,WAAW,SAAS,OAAO,MAAM;AAClE,SAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC5C;AAMO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,QAAM,UAAU,cAAc,KAAK;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,iBAAiB,KAAK,CAAC;AAK9D,YAAU,MAAM;AACd,YAAQ,CAAC,YAAa,gBAAgB,OAAO,MAAM,UAAU,UAAU,iBAAiB,OAAO,CAAE;AAAA,EACnG,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,UAAU,CAAC,UAAU;AAGnB,cAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,SAAS,EAAE;AACnD,gBAAQ,IAAI;AACZ,cAAM,SAAS,gBAAgB,IAAI;AAGnC,YAAI,SAAS,GAAI,QAAO,SAAS,MAAS;AAC1C,YAAI,WAAW,OAAW,UAAS,MAAM;AAAA,MAC3C;AAAA,MAYA,QAAQ,MACN;AAAA,QAAQ,CAAC,YACP,gBAAgB,OAAO,MAAM,UAAU,UAAU,iBAAiB,OAAO;AAAA,MAC3E;AAAA,MAEF,iBAAiB,EAAE,QAAQ,KAAK;AAAA,MAGhC,YAAY,EAAE,eAAe,QAAQ,WAAW,WAAW,cAAc,MAAM;AAAA,MAC/E,YACE,OACI;AAAA,QACE,gBACE,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,IAAI,KAAK,OAAO,iBAAiB,GAC1D,gBACH;AAAA,MAEJ,IACA;AAAA,MAEN,IAAI,CAAC,EAAE,OAAO,MAAM,GAAG,EAAE,GAAG,oBAAoB;AAAA;AAAA,EAClD;AAEJ;","names":[]}