@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-J2QIICWP.js

@@ -0,0 +1,194 @@
+import {
+  cardStyles
+} from "./chunk-W2TCSYLI.js";
+import {
+  resolveCardProps
+} from "./chunk-FKUYRQSP.js";
+import {
+  CARD_CONTENT_PADDING_UNITS,
+  CARD_HEADER_CHILDREN_PADDING_UNITS,
+  CARD_LOADING,
+  CARD_MEDIA_HEIGHT
+} from "./chunk-HDBP55R3.js";
+import {
+  childTestId,
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-TYJR4GOF.js";
+
+// src/components/layout/Card/Card.tsx
+import Box from "@mui/material/Box/index.js";
+import MuiCard from "@mui/material/Card/index.js";
+import MuiCardActions from "@mui/material/CardActions/index.js";
+import MuiCardContent from "@mui/material/CardContent/index.js";
+import MuiCardHeader from "@mui/material/CardHeader/index.js";
+import MuiCardMedia from "@mui/material/CardMedia/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = (rawProps) => {
+  const {
+    children,
+    variant,
+    interactive,
+    glow,
+    pulse,
+    borderRadius,
+    loading,
+    onClick,
+    onFocus,
+    onBlur,
+    sx,
+    // These props are reserved for future implementation but need to be extracted
+    // to prevent them from being passed to the underlying MuiCard
+    expandable: _expandable,
+    expanded: _expanded,
+    onExpandToggle: _onExpandToggle,
+    entranceAnimation: _entranceAnimation,
+    animationDelay: _animationDelay,
+    skeleton: _skeleton,
+    hoverScale: _hoverScale,
+    ...restProps
+  } = resolveCardProps(rawProps);
+  const theme = useTheme();
+  const ownTestId = resolveTestId(restProps, "card");
+  const props = withoutTestIdProps(restProps);
+  const idle = !loading;
+  return /* @__PURE__ */ jsxs(
+    MuiCard,
+    {
+      "data-testid": ownTestId,
+      onClick: idle ? onClick : void 0,
+      onFocus: idle ? onFocus : void 0,
+      onBlur: idle ? onBlur : void 0,
+      sx: {
+        ...cardStyles(theme, { variant, interactive, glow, pulse, borderRadius }),
+        position: "relative",
+        opacity: loading ? CARD_LOADING.opacity : 1,
+        pointerEvents: loading ? "none" : "auto",
+        ...sx
+      },
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              zIndex: CARD_LOADING.spinnerZIndex
+            },
+            children: /* @__PURE__ */ jsx(CircularProgress, {})
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var CardHeader = ({
+  title,
+  subtitle,
+  action,
+  avatar,
+  children,
+  ...others
+}) => {
+  const ownTestId = resolveTestId(others, "card-header");
+  const props = withoutTestIdProps(others);
+  if (children) {
+    return /* @__PURE__ */ jsx(Box, { sx: { p: CARD_HEADER_CHILDREN_PADDING_UNITS }, "data-testid": ownTestId, children });
+  }
+  return /* @__PURE__ */ jsx(
+    MuiCardHeader,
+    {
+      "data-testid": ownTestId,
+      avatar,
+      action,
+      title,
+      subheader: subtitle,
+      titleTypographyProps: {
+        "data-testid": childTestId(others, "title", "card")
+      },
+      subheaderTypographyProps: {
+        "data-testid": childTestId(others, "subtitle", "card")
+      },
+      ...props
+    }
+  );
+};
+var CardContent = ({ children, dense = false, ...others }) => /* @__PURE__ */ jsx(
+  MuiCardContent,
+  {
+    "data-testid": resolveTestId(others, "card-content"),
+    sx: {
+      padding: dense ? CARD_CONTENT_PADDING_UNITS.dense : CARD_CONTENT_PADDING_UNITS.normal,
+      "&:last-child": {
+        paddingBottom: dense ? CARD_CONTENT_PADDING_UNITS.dense : CARD_CONTENT_PADDING_UNITS.normal
+      }
+    },
+    ...withoutTestIdProps(others),
+    children
+  }
+);
+var CardActions = ({
+  children,
+  disableSpacing = false,
+  alignment = "left",
+  ...others
+}) => {
+  const getJustifyContent = () => {
+    switch (alignment) {
+      case "center":
+        return "center";
+      case "right":
+        return "flex-end";
+      case "space-between":
+        return "space-between";
+      default:
+        return "flex-start";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    MuiCardActions,
+    {
+      "data-testid": resolveTestId(others, "card-actions"),
+      disableSpacing,
+      sx: {
+        justifyContent: getJustifyContent()
+      },
+      ...withoutTestIdProps(others),
+      children
+    }
+  );
+};
+var CardMedia = ({
+  component = "div",
+  image,
+  title,
+  height = CARD_MEDIA_HEIGHT,
+  children,
+  ...others
+}) => /* @__PURE__ */ jsx(
+  MuiCardMedia,
+  {
+    "data-testid": resolveTestId(others, "card-media"),
+    component,
+    height,
+    image,
+    title,
+    ...withoutTestIdProps(others),
+    children
+  }
+);
+
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  CardMedia
+};
+//# sourceMappingURL=chunk-J2QIICWP.js.map

package/dist/chunk-J6A4ZQWD.js

@@ -0,0 +1,160 @@
+import {
+  PillControl
+} from "./chunk-JP32U64U.js";
+import {
+  PanelRangeField
+} from "./chunk-5WJFCQFN.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-7LOCLC24.js";
+import {
+  StackedModal
+} from "./chunk-XLRBJEYA.js";
+import {
+  StackedModalContent
+} from "./chunk-4EJBLJZK.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-filter-panel.tsx
+import Box from "@mui/material/Box/index.js";
+import Link from "@mui/material/Link/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PillField({
+  field,
+  selected,
+  testIdPrefix,
+  onTogglePill,
+  onClearField
+}) {
+  const testId = `${testIdPrefix}-filter-${field.id}`;
+  if (field.searchEnabled || field.control === "multiselect" || field.control === "category") {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field,
+        selected,
+        onTogglePill,
+        onClearField,
+        testIdPrefix,
+        layout: "stacked"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TableFilter.CheckboxField,
+    {
+      label: field.label,
+      options: field.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+      testId
+    }
+  );
+}
+function FilterControls({
+  testIdPrefix,
+  search,
+  fields,
+  rangeFields,
+  pills,
+  ranges,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.Keyword,
+      {
+        value: search,
+        onChange: onSearchChange,
+        label: copy.search.allColumnsLabel,
+        placeholder: copy.search.keywordPlaceholder,
+        testId: `${testIdPrefix}-search-all`
+      }
+    ),
+    (fields.length > 0 || rangeFields.length > 0) && /* @__PURE__ */ jsxs(TableFilter.Section, { title: copy.filters.panelTitle, children: [
+      fields.map((field) => /* @__PURE__ */ jsx(
+        PillField,
+        {
+          field,
+          selected: pills[field.id] ?? [],
+          testIdPrefix,
+          onTogglePill,
+          onClearField
+        },
+        field.id
+      )),
+      rangeFields.map((field) => /* @__PURE__ */ jsx(
+        PanelRangeField,
+        {
+          field,
+          value: ranges[field.id] ?? {},
+          onChange: (range) => onChangeRange(field.id, range),
+          testId: `${testIdPrefix}-range-${field.id}`
+        },
+        field.id
+      ))
+    ] })
+  ] });
+}
+function GridFilterPanel(props) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    TableFilter.Panel,
+    {
+      onClearAll: props.onClearAll,
+      clearTestId: `${props.testIdPrefix}-clear-filters`,
+      ariaLabel: copy.filters.panelTitle,
+      children: /* @__PURE__ */ jsx(FilterControls, { ...props })
+    }
+  );
+}
+function FilterDialog({
+  open,
+  onClose,
+  ...props
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    StackedModal,
+    {
+      open,
+      onClose,
+      navigationTitle: copy.filters.panelTitle,
+      backLabel: copy.nav.goBack,
+      modalId: `${props.testIdPrefix}-filters`,
+      maxWidth: "xs",
+      dataTestId: `${props.testIdPrefix}-filter-dialog`,
+      children: /* @__PURE__ */ jsx(StackedModalContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            underline: "hover",
+            onClick: props.onClearAll,
+            "data-testid": `${props.testIdPrefix}-clear-filters`,
+            sx: { fontSize: sxRem(12), color: "text.secondary" },
+            children: copy.filters.clearAllFilters
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FilterControls, { ...props })
+      ] }) })
+    }
+  );
+}
+
+export {
+  GridFilterPanel,
+  FilterDialog
+};
+//# sourceMappingURL=chunk-J6A4ZQWD.js.map

package/dist/chunk-JE6FNSQV.js

@@ -0,0 +1,131 @@
+import {
+  buttonEmphasisStyles,
+  buttonSize,
+  buttonVariantStyles,
+  getColorFromTheme,
+  iconAlignmentStyles
+} from "./chunk-T2UP4XJF.js";
+import {
+  BUTTON_ICON_GLYPH_SIZE
+} from "./chunk-G2FUZALJ.js";
+import {
+  resolveButtonProps
+} from "./chunk-TAMIZE4Q.js";
+import {
+  childTestId,
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-TYJR4GOF.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Button/Button.tsx
+import MuiButton from "@mui/material/Button/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledButton = styled(MuiButton, {
+  shouldForwardProp: (prop) => ["glow", "pulse", "loading", "customVariant", "customColor", "ripple"].indexOf(
+    prop
+  ) === -1
+})(({ theme, customVariant, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    textTransform: "none",
+    fontWeight: 500,
+    borderRadius: fieldRadius(theme),
+    transition: "all 0.3s ease",
+    position: "relative",
+    overflow: "hidden",
+    ...iconAlignmentStyles(theme),
+    ...buttonVariantStyles(theme, customVariant, colorPalette, customColor),
+    ...buttonEmphasisStyles(theme, colorPalette, glow, pulse)
+  };
+});
+var muiVariantFor = (variant) => {
+  if (variant === "outline") return "outlined";
+  return variant === "text" ? "text" : "contained";
+};
+var muiSizeFor = (size) => {
+  if (size === "xs" || size === "sm") return "small";
+  return size === "md" ? "medium" : "large";
+};
+var muiColorFor = (color) => {
+  if (color === "danger") return "error";
+  return color === "neutral" ? "inherit" : color;
+};
+var iconGlyphStyle = (theme) => ({ fontSize: rem(theme, BUTTON_ICON_GLYPH_SIZE) });
+function isIconOnly({
+  loading,
+  icon,
+  children
+}) {
+  return !loading && icon != null && children == null;
+}
+var ButtonRoot = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      color,
+      size,
+      loading,
+      icon,
+      iconPosition,
+      glow,
+      pulse,
+      ripple,
+      active,
+      children,
+      disabled,
+      onClick,
+      onFocus,
+      onBlur,
+      ...others
+    } = resolveButtonProps(rawProps);
+    const ownTestId = resolveTestId(others, "button");
+    const testId = (suffix) => childTestId(others, suffix, "button");
+    const props = withoutTestIdProps(others);
+    const theme = useTheme();
+    const iconWithTestId = !loading && icon ? /* @__PURE__ */ jsx("span", { "data-testid": testId("icon"), style: iconGlyphStyle(theme), children: icon }) : void 0;
+    const iconOnly = isIconOnly({ loading, icon, children });
+    const mergedClassName = [active ? "active" : "", props.className].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        ref,
+        variant: muiVariantFor(variant),
+        color: muiColorFor(color),
+        size: muiSizeFor(size),
+        customVariant: variant,
+        customColor: color,
+        glow,
+        pulse,
+        ripple,
+        disabled: disabled || loading,
+        disableRipple: !ripple,
+        startIcon: iconPosition === "left" ? iconWithTestId : void 0,
+        endIcon: iconPosition === "right" ? iconWithTestId : void 0,
+        onClick,
+        onFocus,
+        onBlur,
+        sx: buttonSize(size, iconOnly),
+        "data-testid": ownTestId,
+        ...props,
+        className: mergedClassName,
+        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 16), color: "inherit", "data-testid": testId("loading") }) : children
+      }
+    );
+  }
+);
+ButtonRoot.displayName = "Button";
+var Button = ButtonRoot;
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-JE6FNSQV.js.map

package/dist/chunk-JF643Q7W.js

@@ -0,0 +1,192 @@
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-EUGF43BX.js";
+import {
+  STACK_BREAK
+} from "./chunk-EKKDZK4E.js";
+import {
+  useDragItem
+} from "./chunk-K4EKTMTC.js";
+import {
+  RAIL_COUNT,
+  RAIL_GAP,
+  railsTemplateFor,
+  useListRails
+} from "./chunk-FQUIEXEY.js";
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-MUIBNHJW.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.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();
+  };
+}
+var rowSx = (theme, 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: `${rem(theme, 2)} solid`,
+      outlineStyle: "solid",
+      outlineColor: "primary.main",
+      outlineOffset: rem(theme, 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: ${rem(theme, STACK_BREAK)})`]: {
+      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 { theme, group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
+  return {
+    ...rowSurface(props, shell),
+    ...rowSx(theme, {
+      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-JF643Q7W.js.map