@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-GBB6XQ56.js

@@ -1,99 +0,0 @@
-import {
-  ButtonRadios,
-  CardRadios,
-  DefaultRadios,
-  GroupLabel,
-  SegmentRadios,
-  testId
-} from "./chunk-SM3NRN7L.js";
-import {
-  withDefaults
-} from "./chunk-HPK33ACY.js";
-
-// src/components/form/RadioGroup/RadioGroup.tsx
-import Box from "@mui/material/Box/index.js";
-import FormHelperText from "@mui/material/FormHelperText/index.js";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULTS = {
-  variant: "default",
-  color: "primary",
-  size: "md",
-  error: false,
-  glassLabel: false,
-  glow: false,
-  glass: false,
-  gradient: false,
-  direction: "column",
-  showDescriptions: true
-};
-var VARIANTS = {
-  cards: CardRadios,
-  buttons: ButtonRadios,
-  segments: SegmentRadios,
-  default: DefaultRadios
-};
-var RadioGroup = forwardRef((props, ref) => {
-  const {
-    variant,
-    color,
-    size,
-    options,
-    label,
-    error,
-    helperText,
-    glassLabel,
-    glow,
-    glass,
-    gradient,
-    direction,
-    showDescriptions,
-    value,
-    onChange,
-    dataTestId,
-    ...rest
-  } = withDefaults(props, DEFAULTS);
-  const handleSelect = (option) => {
-    if (option.disabled || !onChange) return;
-    const event = { target: { value: option.value } };
-    onChange(event, option.value);
-  };
-  const Variant = VARIANTS[variant] ?? DefaultRadios;
-  return /* @__PURE__ */ jsxs(Box, { "data-testid": dataTestId, children: [
-    label && /* @__PURE__ */ jsx(GroupLabel, { glass: glassLabel, error, dataTestId, children: label }),
-    /* @__PURE__ */ jsx(
-      Variant,
-      {
-        options,
-        value,
-        color,
-        size,
-        direction,
-        showDescriptions,
-        glass,
-        gradient,
-        glow,
-        dataTestId,
-        onSelect: handleSelect,
-        groupRef: ref,
-        onChange,
-        rest
-      }
-    ),
-    helperText && /* @__PURE__ */ jsx(
-      FormHelperText,
-      {
-        error,
-        sx: { mt: 1 },
-        "data-testid": testId(dataTestId, "helper-text"),
-        children: helperText
-      }
-    )
-  ] });
-});
-RadioGroup.displayName = "RadioGroup";
-
-export {
-  RadioGroup
-};
-//# sourceMappingURL=chunk-GBB6XQ56.js.map

package/dist/chunk-GBFGZJB5.js

@@ -1,184 +0,0 @@
-import {
-  STACK_BREAK
-} from "./chunk-DQHC5P64.js";
-import {
-  CARD_RADIUS,
-  cardSurfaceStyles,
-  isActionable,
-  isSelectable,
-  slotTestIds
-} from "./chunk-MQUU2XZB.js";
-import {
-  useDragItem
-} from "./chunk-JCJGJX7V.js";
-import {
-  RAIL_COUNT,
-  RAIL_GAP,
-  railsTemplateFor,
-  useListRails
-} from "./chunk-LYSSO6WC.js";
-import {
-  DENSITY_ROW_PADDING
-} from "./chunk-ZPIMPOHV.js";
-
-// src/components/data-display/DataViews/base-list-card-geometry.tsx
-import { useTheme } from "@mui/material/styles/index.js";
-function isTextSelection() {
-  return (globalThis.getSelection?.()?.toString().length ?? 0) > 0;
-}
-function clickKeys(onClick) {
-  return (event) => {
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    onClick();
-  };
-}
-function rowSx(opts) {
-  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;
-  return {
-    position: "relative",
-    borderRadius: CARD_RADIUS,
-    display: "grid",
-    zoom: scale,
-    // SUBGRID AND `container-type` CANNOT COEXIST on one element: containment
-    // makes the box size independently of its parent, so the browser drops the
-    // subgrid and every slot stacks into one column. (Observed exactly that —
-    // computed `grid-template-columns: 1222px` on a card asking for subgrid.)
-    //
-    // So inside a group the GROUP is the query container and the row is the
-    // subgrid; standalone, the row is both the container and its own grid.
-    ...inGroup ? { gridColumn: `span ${railCount}`, gridTemplateColumns: "subgrid" } : {
-      containerType: "inline-size",
-      gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns)
-    },
-    alignItems: "center",
-    // Wide enough that the meta cluster, the value and the status read as three
-    // columns rather than one run of text — the complaint that started all this
-    // was `MÉTODO PIX R$ 13,90` scanning as a single phrase.
-    columnGap: RAIL_GAP,
-    width: "100%",
-    px: pad,
-    py: padY,
-    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
-    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {},
-    ...interactive ? { "&:hover": { backgroundColor: "action.hover" } } : {},
-    // A real focus ring, which a clickable <div> never had.
-    "&:focus-visible": { outline: 2, outlineStyle: "solid", outlineColor: "primary.main", outlineOffset: 2 },
-    // TWO-LINE, below the point where the shared rails stop helping.
-    //
-    // The standard mobile transaction row: what the record IS and what it COST
-    // on the first line, the supporting detail on the second. Better than
-    // truncating four columns into ellipses, and the reason each slot carries a
-    // `data-slot` — the placement is explicit rather than whatever order the
-    // children happen to be in.
-    //
-    //   [ select ][ leading ][ title …………… ][   menu ]
-    //                        [ (cells) …………… ][  value ]
-    //
-    // The MENU stays in the top-right corner at every width. It is the row's
-    // one fixed landmark — an overflow that moves to the second line on a phone
-    // is an overflow nobody finds twice.
-    [`@container (max-width: ${STACK_BREAK}px)`]: {
-      gridTemplateColumns: "auto auto minmax(0, 1fr) max-content",
-      ...inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {},
-      rowGap: 0.75,
-      columnGap: 1,
-      '& > [data-slot="drag"]': { display: "none" },
-      '& > [data-slot="select"]': { gridArea: "1 / 1" },
-      '& > [data-slot="leading"]': { gridArea: "1 / 2" },
-      '& > [data-slot="caption"]': { gridArea: "1 / 3" },
-      '& > [data-slot="actions"]': { gridArea: "1 / 4", justifyContent: "flex-end" },
-      '& > [data-slot="meta"]': { display: "none" },
-      // Second line, starting under the title rather than under the checkbox.
-      '& > [data-slot="value"]': { gridArea: "2 / 4", textAlign: "right" }
-    },
-    ...divider ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: "solid" } : {}
-  };
-}
-function dragIdFor(props, actionable) {
-  return props.draggable === false || !actionable ? void 0 : props.dragId;
-}
-function metaShape(props) {
-  const columns = props.meta?.length ?? 0;
-  return { columns, present: columns > 0 || props.metaSlot != null };
-}
-function useRowShell(props) {
-  const actionable = isActionable(props.state);
-  const group = useListRails();
-  const scale = props.scale ?? 1;
-  return {
-    group,
-    actionable,
-    scale,
-    theme: useTheme(),
-    selectable: isSelectable(props),
-    slot: slotTestIds(props.testId),
-    drag: useDragItem(dragIdFor(props, actionable)),
-    // Standalone holds no gutter open: there is no list beside it to line up
-    // with, so a reserved-but-empty rail is pure inset.
-    reserve: group?.reserveGutters ?? false,
-    // 1, not 1.5. The row's contents still have to line up with the toolbar
-    // above them, but 12px of card padding stacked on the checkbox's own 9px
-    // and an empty drag gutter's 24px read as a row indented for no reason.
-    //
-    // Not multiplied by `scale` — the row's `zoom` already scales it, and doing
-    // both would square the factor on padding alone.
-    pad: 1,
-    padY: DENSITY_ROW_PADDING[group?.density ?? props.density ?? "cozy"],
-    // A card that navigates does so with a real anchor, so it takes no click
-    // handler of its own — the stretched link IS the target.
-    acts: props.onClick != null && props.href == null && actionable
-  };
-}
-function actionProps(onClick) {
-  return {
-    role: "button",
-    tabIndex: 0,
-    onClick: () => {
-      if (isTextSelection()) return;
-      onClick?.();
-    },
-    onKeyDown: clickKeys(() => onClick?.())
-  };
-}
-function rowSurface(props, shell) {
-  const { theme, selectable, drag } = shell;
-  const surface = cardSurfaceStyles(
-    { ...props, selectable, shape: "row", state: drag.dragging ? "disabled" : props.state },
-    theme
-  );
-  if (props.divider !== true || surface.borderColor != null) return surface;
-  return { ...surface, borderBottomColor: theme.palette.divider };
-}
-function rowStyles(props, shell, cellTemplate) {
-  const { group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
-  return {
-    ...rowSurface(props, shell),
-    ...rowSx({
-      inGroup: group !== null,
-      railCount: group?.railCount ?? RAIL_COUNT,
-      cellTemplate,
-      gutters: {
-        disclose: reserve || props.children != null,
-        drag: reserve || drag.draggable,
-        select: reserve || selectable
-      },
-      metaColumns: metaShape(props).columns,
-      pad,
-      padY,
-      scale,
-      divider: props.divider ?? false,
-      interactive: acts || props.href != null,
-      draggable: drag.draggable && drag.handleProps === void 0
-    })
-  };
-}
-
-export {
-  rowSx,
-  metaShape,
-  useRowShell,
-  actionProps,
-  rowStyles
-};
-//# sourceMappingURL=chunk-GBFGZJB5.js.map

package/dist/chunk-GCJLMX63.js

@@ -1,41 +0,0 @@
-import {
-  useFormContext
-} from "./chunk-4XK6JQ4D.js";
-import {
-  CategorySelect
-} from "./chunk-OAXAF4VY.js";
-
-// src/components/form/total-form/Fields/CategoryField.tsx
-import { jsx } from "react/jsx-runtime";
-function CategoryField({
-  name,
-  options,
-  label,
-  placeholder,
-  allowParentSelection = true,
-  copy
-}) {
-  const { values, errors, setFieldValue } = useFormContext();
-  const error = errors[name];
-  return /* @__PURE__ */ jsx(
-    CategorySelect,
-    {
-      copy,
-      mode: "single",
-      fullWidth: true,
-      label,
-      placeholder,
-      options,
-      allowParentSelection,
-      value: values[name] ? values[name] : null,
-      error,
-      onChange: (next) => setFieldValue(name, next ?? ""),
-      dataTestId: `total-form-field-${name}`
-    }
-  );
-}
-
-export {
-  CategoryField
-};
-//# sourceMappingURL=chunk-GCJLMX63.js.map

package/dist/chunk-GGE7Y53F.js

@@ -1,147 +0,0 @@
-import {
-  SearchGlyph
-} from "./chunk-DMNZD3Q7.js";
-import {
-  chipSx,
-  chipWrapSx,
-  panelHeadSx,
-  pinnedLabelSx,
-  pinnedSx
-} from "./chunk-FCOEJCUP.js";
-
-// src/components/form/CategorySelect/CategoryPanelHead.tsx
-import Box from "@mui/material/Box/index.js";
-import InputBase from "@mui/material/InputBase/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var searchFieldSx = {
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  "& input": {
-    width: "100%",
-    height: 36,
-    padding: "0 30px 0 32px",
-    fontSize: 13,
-    border: "1px solid",
-    borderColor: "divider",
-    borderRadius: "9px",
-    background: "background.paper",
-    color: "text.primary",
-    "&:focus": {
-      outline: "none",
-      borderColor: "primary.main",
-      boxShadow: (theme) => `0 0 0 3px ${theme.palette.primary.main}26`
-    }
-  }
-};
-var clearButtonSx = {
-  position: "absolute",
-  right: 7,
-  width: 20,
-  height: 20,
-  border: 0,
-  background: "action.selected",
-  color: "text.secondary",
-  borderRadius: "50%",
-  display: "grid",
-  placeItems: "center",
-  cursor: "pointer",
-  fontSize: 12,
-  padding: 0,
-  lineHeight: 1
-};
-function CategoryPanelHead({
-  query,
-  placeholder,
-  sheet,
-  quickActions,
-  onQueryChange,
-  searchInputRef,
-  dataTestId,
-  copy
-}) {
-  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => panelHeadSx(theme, sheet), children: [
-    /* @__PURE__ */ jsxs(Box, { sx: searchFieldSx, children: [
-      /* @__PURE__ */ jsx(
-        SearchGlyph,
-        {
-          style: {
-            position: "absolute",
-            left: 10,
-            width: 15,
-            height: 15,
-            opacity: 0.55,
-            pointerEvents: "none"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        InputBase,
-        {
-          inputRef: searchInputRef,
-          value: query,
-          placeholder,
-          autoComplete: "off",
-          inputProps: { "aria-label": placeholder, "data-testid": `${dataTestId}-search` },
-          onChange: (event) => onQueryChange(event.target.value),
-          sx: { width: "100%" }
-        }
-      ),
-      query.length > 0 && /* @__PURE__ */ jsx(
-        Box,
-        {
-          component: "button",
-          type: "button",
-          "aria-label": copy.search.clear,
-          "data-testid": `${dataTestId}-search-clear`,
-          sx: clearButtonSx,
-          onClick: () => onQueryChange(""),
-          children: "\xD7"
-        }
-      )
-    ] }),
-    quickActions && /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: "10px",
-          marginTop: "8px",
-          fontSize: 12
-        },
-        children: quickActions
-      }
-    )
-  ] });
-}
-function CategoryPinnedTray({
-  chips,
-  onRemove,
-  dataTestId,
-  copy
-}) {
-  if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsxs(Box, { sx: pinnedSx, "data-testid": `${dataTestId}-pinned`, children: [
-    /* @__PURE__ */ jsx(Box, { sx: pinnedLabelSx, children: copy.search.pinnedLabel(chips.length) }),
-    /* @__PURE__ */ jsx(Box, { sx: chipWrapSx, children: chips.map((chip) => /* @__PURE__ */ jsxs(Box, { component: "span", sx: chipSx, children: [
-      chip.label,
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": copy.search.removeChip(chip.label),
-          "data-testid": `${dataTestId}-unpin-${chip.id}`,
-          onClick: () => onRemove(chip.id),
-          children: "\xD7"
-        }
-      )
-    ] }, chip.id)) })
-  ] });
-}
-
-export {
-  CategoryPanelHead,
-  CategoryPinnedTray
-};
-//# sourceMappingURL=chunk-GGE7Y53F.js.map

package/dist/chunk-GOWBYHYW.js

@@ -1,152 +0,0 @@
-import {
-  chartValueFormatter
-} from "./chunk-QVWNK4JO.js";
-import {
-  getChartSpecRenderer,
-  getRegisteredChartSpecTypes
-} from "./chunk-WKUA6P3W.js";
-
-// src/components/data-display/Chart/chart-spec.ts
-var CHART_SEMANTIC_COLORS = [
-  "primary",
-  "secondary",
-  "success",
-  "warning",
-  "danger",
-  "info"
-];
-var NUMBER_FORMATS = ["brl", "percent", "compact", "integer", "decimal"];
-var ChartSpecError = class extends Error {
-  constructor(message) {
-    super(message);
-    this.name = "ChartSpecError";
-  }
-};
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function assertColor(value, where) {
-  if (value === void 0) return;
-  if (!CHART_SEMANTIC_COLORS.includes(value)) {
-    throw new ChartSpecError(
-      `${where} must be a semantic color token (${CHART_SEMANTIC_COLORS.join(", ")}), got ${JSON.stringify(value)}. Raw color values are not allowed.`
-    );
-  }
-}
-function parseAxis(value) {
-  if (!isRecord(value) || typeof value.key !== "string" || value.key.length === 0) {
-    throw new ChartSpecError('"xAxis" must be an object with a non-empty string "key" naming the row property for the category axis.');
-  }
-  if (value.label !== void 0 && typeof value.label !== "string") {
-    throw new ChartSpecError('"xAxis.label" must be a string when provided.');
-  }
-  return { key: value.key, label: value.label };
-}
-function parseSeries(value) {
-  if (!Array.isArray(value) || value.length === 0) {
-    throw new ChartSpecError('"series" must be a non-empty array of { key, label?, color? } objects.');
-  }
-  return value.map((entry, index) => {
-    if (!isRecord(entry) || typeof entry.key !== "string" || entry.key.length === 0) {
-      throw new ChartSpecError(`"series[${index}]" must be an object with a non-empty string "key" naming the row property holding its values.`);
-    }
-    assertColor(entry.color, `"series[${index}].color"`);
-    if (entry.label !== void 0 && typeof entry.label !== "string") {
-      throw new ChartSpecError(`"series[${index}].label" must be a string when provided.`);
-    }
-    return { key: entry.key, label: entry.label, color: entry.color };
-  });
-}
-function assertFieldType(spec, field, expected) {
-  const value = spec[field];
-  if (value !== void 0 && typeof value !== expected) {
-    throw new ChartSpecError(`"${field}" must be a ${expected} when provided.`);
-  }
-}
-function parseColorScheme(value) {
-  if (value === void 0) return void 0;
-  if (!Array.isArray(value) || value.length === 0) {
-    throw new ChartSpecError('"colorScheme" must be a non-empty array of semantic color tokens when provided.');
-  }
-  value.forEach((token, index) => assertColor(token, `"colorScheme[${index}]"`));
-  return value;
-}
-function parseOptionalFields(spec) {
-  for (const field of ["title", "subtitle"]) assertFieldType(spec, field, "string");
-  for (const field of ["stacked", "legend", "tooltip", "curved"]) {
-    assertFieldType(spec, field, "boolean");
-  }
-  assertFieldType(spec, "height", "number");
-  if (spec.numberFormat !== void 0 && !NUMBER_FORMATS.includes(spec.numberFormat)) {
-    throw new ChartSpecError(
-      `"numberFormat" must be one of ${NUMBER_FORMATS.join(", ")}, got ${JSON.stringify(spec.numberFormat)}.`
-    );
-  }
-  return {
-    title: spec.title,
-    subtitle: spec.subtitle,
-    stacked: spec.stacked,
-    legend: spec.legend,
-    tooltip: spec.tooltip,
-    curved: spec.curved,
-    height: spec.height,
-    numberFormat: spec.numberFormat,
-    colorScheme: parseColorScheme(spec.colorScheme)
-  };
-}
-function parseChartSpec(input) {
-  if (!isRecord(input)) {
-    throw new ChartSpecError("A chart spec must be a JSON object.");
-  }
-  const type = input.type;
-  if (typeof type !== "string" || !getChartSpecRenderer(type)) {
-    throw new ChartSpecError(
-      `"type" must be one of the registered chart types (${getRegisteredChartSpecTypes().join(", ")}), got ${JSON.stringify(type)}.`
-    );
-  }
-  const yAxis = input.yAxis;
-  if (yAxis !== void 0 && (!isRecord(yAxis) || yAxis.label !== void 0 && typeof yAxis.label !== "string")) {
-    throw new ChartSpecError('"yAxis" must be an object with an optional string "label" when provided.');
-  }
-  const centerLabel = input.centerLabel;
-  return {
-    ...parseOptionalFields(input),
-    type,
-    xAxis: parseAxis(input.xAxis),
-    yAxis,
-    series: parseSeries(input.series),
-    centerLabel
-  };
-}
-function specToChartProps(spec, data, ctx) {
-  const renderer = getChartSpecRenderer(spec.type);
-  if (!renderer) {
-    throw new ChartSpecError(
-      `Unknown chart type "${spec.type}". Registered types: ${getRegisteredChartSpecTypes().join(", ")}.`
-    );
-  }
-  return {
-    data,
-    title: spec.title,
-    subtitle: spec.subtitle,
-    xAxisKey: spec.xAxis.key,
-    xAxisLabel: spec.xAxis.label,
-    yAxisLabel: spec.yAxis?.label,
-    showLegend: spec.legend ?? true,
-    showTooltip: spec.tooltip ?? true,
-    height: spec.height,
-    valueFormatter: chartValueFormatter(spec.numberFormat),
-    // An integer metric is a COUNT: half a row does not exist, so the axis must
-    // not offer half-steps it would then round into duplicates (FUT-755).
-    allowDecimalTicks: spec.numberFormat !== "integer",
-    ...renderer(spec, ctx)
-  };
-}
-
-export {
-  CHART_SEMANTIC_COLORS,
-  ChartSpecError,
-  parseChartSpec,
-  specToChartProps
-};
-//# sourceMappingURL=chunk-GOWBYHYW.js.map

package/dist/chunk-GSFNH4C5.js

@@ -1,84 +0,0 @@
-import {
-  DefaultEndMessage,
-  DefaultError,
-  DefaultLoader,
-  containerStyles
-} from "./chunk-ATSHKSSD.js";
-import {
-  useLoadMore,
-  useSentinel
-} from "./chunk-QF6LTUCE.js";
-
-// src/components/utility/InfiniteScroll/InfiniteScroll.tsx
-import Box from "@mui/material/Box/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var InfiniteScroll = ({
-  children,
-  variant = "default",
-  hasMore,
-  loading,
-  threshold = 150,
-  loadMore,
-  loader,
-  loadingText,
-  endText,
-  endMessage,
-  error,
-  errorComponent,
-  onError,
-  className,
-  style,
-  width,
-  scrollableTarget,
-  testMode = false,
-  testTriggerRef
-}) => {
-  const { sentinelRef, isIntersecting } = useSentinel({ testMode, threshold, scrollableTarget });
-  useLoadMore({
-    hasMore,
-    loading,
-    error,
-    loadMore,
-    onError,
-    isIntersecting,
-    testMode,
-    testTriggerRef
-  });
-  const renderSentinel = () => {
-    if (!hasMore) return endMessage || /* @__PURE__ */ jsx(DefaultEndMessage, { endText });
-    if (error) return errorComponent || /* @__PURE__ */ jsx(DefaultError, { error });
-    if (loading) return loader || /* @__PURE__ */ jsx(DefaultLoader, { loadingText });
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: sentinelRef,
-        "data-testid": "infinite-scroll-sentinel",
-        style: {
-          height: variant === "horizontal" ? "100%" : "1px",
-          width: variant === "horizontal" ? "1px" : "100%"
-        }
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className,
-      sx: {
-        ...containerStyles(variant, width),
-        ...style
-      },
-      children: [
-        variant === "reverse" && renderSentinel(),
-        variant === "horizontal" ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "row" }, children }) : children,
-        variant !== "reverse" && renderSentinel(),
-        variant === "horizontal" && renderSentinel()
-      ]
-    }
-  );
-};
-
-export {
-  InfiniteScroll
-};
-//# sourceMappingURL=chunk-GSFNH4C5.js.map