@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-RNIU447I.js

@@ -0,0 +1,175 @@
+import {
+  SIZE_VALUES
+} from "./chunk-7ZPUN7TV.js";
+import {
+  DEFAULT_FIELD_HEIGHT,
+  fieldHeightPx
+} from "./chunk-PZBK3F52.js";
+import {
+  alpha,
+  decomposeColor,
+  recomposeColor
+} from "./chunk-6JAIFIPW.js";
+import {
+  ABSOLUTE_INK
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/form/Input/Input.metrics.ts
+var muiVariantFor = (variant) => {
+  switch (variant) {
+    case "underline":
+      return "standard";
+    case "glass":
+    case "gradient":
+      return "outlined";
+    default:
+      return variant;
+  }
+};
+var INPUT_MUI_SIZE = {
+  xs: "small",
+  sm: "small",
+  md: "small",
+  lg: "medium",
+  xl: "medium"
+};
+var INPUT_SIZE_OVERRIDES = {
+  xs: { vertical: 6, horizontal: 10 },
+  lg: { vertical: 16, horizontal: 14 },
+  xl: { vertical: 20, horizontal: 16 }
+};
+var MUI_INPUT_PADDING = {
+  outlined: {
+    small: { top: 8.5, right: 14, bottom: 8.5, left: 14 },
+    medium: { top: 16.5, right: 14, bottom: 16.5, left: 14 }
+  },
+  filled: {
+    small: { top: 21, right: 12, bottom: 4, left: 12 },
+    medium: { top: 25, right: 12, bottom: 8, left: 12 }
+  },
+  standard: {
+    small: { top: 1, right: 0, bottom: 5, left: 0 },
+    medium: { top: 4, right: 0, bottom: 5, left: 0 }
+  }
+};
+var AT_FIELD_HEIGHT = {
+  outlined: true,
+  glass: true,
+  gradient: true,
+  filled: false,
+  underline: false
+};
+function inputPadding(variant, size, fieldHeight = DEFAULT_FIELD_HEIGHT) {
+  const override = INPUT_SIZE_OVERRIDES[size];
+  if (AT_FIELD_HEIGHT[variant]) {
+    const vertical = (fieldHeightPx(fieldHeight, size) - INPUT_LINE_HEIGHT) / 2;
+    const horizontal = override?.horizontal ?? MUI_INPUT_PADDING.outlined.small.left;
+    return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+  }
+  if (override) {
+    return {
+      top: override.vertical,
+      right: override.horizontal,
+      bottom: override.vertical,
+      left: override.horizontal
+    };
+  }
+  return MUI_INPUT_PADDING[muiVariantFor(variant)][INPUT_MUI_SIZE[size]];
+}
+var INPUT_FONT_SIZE = 16;
+var INPUT_LINE_HEIGHT = 23;
+var PLACEHOLDER_OPACITY = { light: 0.42, dark: 0.5 };
+function placeholderInk(theme) {
+  const opacity = theme.mode === "dark" ? PLACEHOLDER_OPACITY.dark : PLACEHOLDER_OPACITY.light;
+  const { type, values } = decomposeColor(theme.palette.text.primary);
+  const [first = 0, second = 0, third = 0, own = 1] = values;
+  return recomposeColor({
+    type: type.startsWith("hsl") ? "hsla" : "rgba",
+    values: [first, second, third, own * opacity]
+  });
+}
+var INPUT_BORDER = { rest: 1, focused: 2 };
+var UNDERLINE_COLOR = {
+  light: alpha(ABSOLUTE_INK.black, 0.42),
+  dark: alpha(ABSOLUTE_INK.white, 0.7)
+};
+var INPUT_LABEL = { scale: 0.75, gap: 4 };
+var HELPER_TEXT = {
+  fontSize: 12,
+  lineHeight: 1.66,
+  marginTop: 3,
+  marginTopSmall: 4,
+  marginHorizontal: 14
+};
+var ADORNMENT_GAP = 8;
+var INPUT_LOADING = { opacity: 0.7, spinnerSize: 20 };
+var INPUT_GLOW = {
+  rest: { blur: 15, alpha: 0.3 },
+  focused: { blur: 20, alpha: 0.5 }
+};
+var INPUT_PULSE = {
+  opacity: 0.3,
+  ms: 2e3,
+  spread: 10
+};
+var FLOATING_LABEL = {
+  rest: { x: 14, y: 16 },
+  shrink: { x: 14, y: -9 },
+  scale: 0.75,
+  paddingX: 4
+};
+var INPUT_GLASS = {
+  background: { rest: 0.1, hover: 0.15, focused: 0.2 },
+  blur: 20,
+  hoverBorderAlpha: 0.3,
+  focusRing: { width: 2, alpha: 0.1 }
+};
+var INPUT_GRADIENT = {
+  angleDeg: 135,
+  fill: { rest: 0.1, hover: 0.15, focused: 0.2 },
+  borderWidth: 2
+};
+var FILLED_WASH = { rest: 0.04, hover: 0.08, focused: 0.12 };
+var sizeProps = (size) => {
+  const override = INPUT_SIZE_OVERRIDES[size];
+  return {
+    size: INPUT_MUI_SIZE[size],
+    ...override ? {
+      sx: {
+        "& .MuiInputBase-input": {
+          paddingLeft: `${override.horizontal}px`,
+          paddingRight: `${override.horizontal}px`
+        }
+      }
+    } : {}
+  };
+};
+var SIZE_MAP = Object.fromEntries(
+  SIZE_VALUES.map((size) => [size, sizeProps(size)])
+);
+
+export {
+  muiVariantFor,
+  INPUT_MUI_SIZE,
+  INPUT_SIZE_OVERRIDES,
+  MUI_INPUT_PADDING,
+  inputPadding,
+  INPUT_FONT_SIZE,
+  INPUT_LINE_HEIGHT,
+  PLACEHOLDER_OPACITY,
+  placeholderInk,
+  INPUT_BORDER,
+  UNDERLINE_COLOR,
+  INPUT_LABEL,
+  HELPER_TEXT,
+  ADORNMENT_GAP,
+  INPUT_LOADING,
+  INPUT_GLOW,
+  INPUT_PULSE,
+  FLOATING_LABEL,
+  INPUT_GLASS,
+  INPUT_GRADIENT,
+  FILLED_WASH,
+  SIZE_MAP
+};
+//# sourceMappingURL=chunk-RNIU447I.js.map

package/dist/chunk-RNIU447I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Input/Input.metrics.ts"],"sourcesContent":["import type { InputVariant } from './Input.base';\nimport { alpha, decomposeColor, recomposeColor } from '../../../tokens/color';\nimport { DEFAULT_FIELD_HEIGHT, fieldHeightPx } from '../../../tokens/field-height.core';\nimport { ABSOLUTE_INK } from '../../../tokens/ink.core';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { SIZE_VALUES, type SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Input` RENDERERS DRAW WITH.\n *\n * `Input.styles.ts` (web, emotion over MUI's `TextField`) and\n * `Input.native.tsx` (React Native) read this one table. The web turns the px\n * into the padding shorthands and rem it has always emitted; native uses the\n * numbers as they are.\n *\n * Two kinds of number live here, and the difference matters:\n *\n *  - the ones `Input.styles.ts` writes itself — the size overrides, the glow,\n *    the pulse, the glass and gradient alphas, the filled wash;\n *  - the ones MUI supplies UNDER those overrides — `OutlinedInput`'s\n *    `16.5px 14px`, `InputBase`'s 23px line box, `FormHelperText`'s 3px lift.\n *    The web never writes them, but it draws them, so a native field that\n *    wants the same box has to know them. They are MUI 6.5's own values,\n *    copied with their source named; a host that re-themes MUI's components\n *    moves the web only, which the parity ledger records.\n */\n\nexport interface InputInset {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\n/** MUI gives a text field two heights; the house scale has five. */\nexport type MuiInputSize = 'small' | 'medium';\nexport type MuiInputVariant = 'outlined' | 'filled' | 'standard';\n\n/** Our five variants map onto MUI's three; `glass` and `gradient` restyle an outline. */\nexport const muiVariantFor = (variant: InputVariant): MuiInputVariant => {\n  switch (variant) {\n    case 'underline':\n      return 'standard';\n    case 'glass':\n    case 'gradient':\n      return 'outlined';\n    default:\n      return variant;\n  }\n};\n\n/**\n * Which of MUI's two densities each step asks for — its label offsets and\n * helper-text lift. The HEIGHT is not MUI's: every outlined step is drawn at\n * the theme's field height (`tokens/field-height`), which puts `md` at MUI's\n * small 40px, so `md` takes the small density with it.\n */\nexport const INPUT_MUI_SIZE: Record<SizeValue, MuiInputSize> = {\n  xs: 'small',\n  sm: 'small',\n  md: 'small',\n  lg: 'medium',\n  xl: 'medium',\n};\n\n/**\n * The horizontal inset of the steps that have their own, and — for `filled` and\n * `underline`, which are not drawn at the field height — their vertical one.\n * An outlined-family field takes its vertical inset from the field height\n * instead ({@link inputPadding}).\n */\nexport const INPUT_SIZE_OVERRIDES: Partial<Record<SizeValue, { vertical: number; horizontal: number }>> = {\n  xs: { vertical: 6, horizontal: 10 },\n  lg: { vertical: 16, horizontal: 14 },\n  xl: { vertical: 20, horizontal: 16 },\n};\n\n/**\n * MUI's own input padding per variant and height (`OutlinedInput`,\n * `FilledInput`, `InputBase`). The filled insets are lopsided because the\n * floating label sits inside the box on the web.\n */\nexport const MUI_INPUT_PADDING: Record<MuiInputVariant, Record<MuiInputSize, InputInset>> = {\n  outlined: {\n    small: { top: 8.5, right: 14, bottom: 8.5, left: 14 },\n    medium: { top: 16.5, right: 14, bottom: 16.5, left: 14 },\n  },\n  filled: {\n    small: { top: 21, right: 12, bottom: 4, left: 12 },\n    medium: { top: 25, right: 12, bottom: 8, left: 12 },\n  },\n  standard: {\n    small: { top: 1, right: 0, bottom: 5, left: 0 },\n    medium: { top: 4, right: 0, bottom: 5, left: 0 },\n  },\n};\n\n/** The variants drawn at the theme's field height: the outline and the two that restyle it. */\nconst AT_FIELD_HEIGHT: Record<InputVariant, boolean> = {\n  outlined: true,\n  glass: true,\n  gradient: true,\n  filled: false,\n  underline: false,\n};\n\n/**\n * The inset the value is drawn at.\n *\n * An outlined-family field is the theme's field height tall, so its vertical\n * inset is whatever centres the 23px line in that height; its horizontal inset\n * is the size override's, or MUI's 14px. `filled` and `underline` keep their\n * own heights — their label sits inside the box — so they keep MUI's insets.\n */\nexport function inputPadding(\n  variant: InputVariant,\n  size: SizeValue,\n  fieldHeight: number = DEFAULT_FIELD_HEIGHT,\n): InputInset {\n  const override = INPUT_SIZE_OVERRIDES[size];\n  if (AT_FIELD_HEIGHT[variant]) {\n    const vertical = (fieldHeightPx(fieldHeight, size) - INPUT_LINE_HEIGHT) / 2;\n    const horizontal = override?.horizontal ?? MUI_INPUT_PADDING.outlined.small.left;\n    return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };\n  }\n  if (override) {\n    return {\n      top: override.vertical,\n      right: override.horizontal,\n      bottom: override.vertical,\n      left: override.horizontal,\n    };\n  }\n  return MUI_INPUT_PADDING[muiVariantFor(variant)][INPUT_MUI_SIZE[size]];\n}\n\n/** `theme.typography.body1` and `InputBase`'s `lineHeight: '1.4375em'`, in px. */\nexport const INPUT_FONT_SIZE = 16;\nexport const INPUT_LINE_HEIGHT = 23;\n\n/** MUI's `::placeholder` opacity, which multiplies the ink's own alpha. */\nexport const PLACEHOLDER_OPACITY = { light: 0.42, dark: 0.5 } as const;\n\n/**\n * The placeholder's colour: the field's ink faded by MUI's opacity.\n *\n * `alpha()` REPLACES an alpha channel, and `text.primary` already carries one\n * (`rgba(0, 0, 0, 0.87)`), so `alpha(ink, 0.42)` would be a different grey from\n * the one the browser composites. React Native has no per-placeholder opacity —\n * only `placeholderTextColor` — so the multiplication happens here.\n */\nexport function placeholderInk(theme: UiTheme): string {\n  const opacity = theme.mode === 'dark' ? PLACEHOLDER_OPACITY.dark : PLACEHOLDER_OPACITY.light;\n  const { type, values } = decomposeColor(theme.palette.text.primary);\n  const [first = 0, second = 0, third = 0, own = 1] = values;\n  return recomposeColor({\n    type: type.startsWith('hsl') ? 'hsla' : 'rgba',\n    values: [first, second, third, own * opacity],\n  });\n}\n\n/** The outline: 1px at rest, 2px focused, as MUI's `notchedOutline` draws it. */\nexport const INPUT_BORDER = { rest: 1, focused: 2 } as const;\n\n/** `FilledInput`'s and `Input`'s resting underline, MUI's own two greys. */\nexport const UNDERLINE_COLOR = {\n  light: alpha(ABSOLUTE_INK.black, 0.42),\n  dark: alpha(ABSOLUTE_INK.white, 0.7),\n} as const;\n\n/**\n * The label. It floats into the border on the web and sits above the field on\n * native, but it is the SAME label: 16px body type at MUI's shrunk scale, and\n * left-aligned with the value it names ({@link inputPadding}'s `left`).\n *\n * The 4px gap is MUI's own: a standard field puts 16px between the control's\n * top and the input, and the shrunk label's 12px line box takes the first 12.\n */\nexport const INPUT_LABEL = { scale: 0.75, gap: 4 } as const;\n\n/** `FormHelperText`: `theme.typography.caption` lifted 3px, inset 14px when contained. */\nexport const HELPER_TEXT = {\n  fontSize: 12,\n  lineHeight: 1.66,\n  marginTop: 3,\n  marginTopSmall: 4,\n  marginHorizontal: 14,\n} as const;\n\n/** `InputAdornment`: 8px between the glyph and the value, on whichever side it is. */\nexport const ADORNMENT_GAP = 8;\n\n/** `loading`: the field fades and MUI's 20px `CircularProgress` takes the end slot. */\nexport const INPUT_LOADING = { opacity: 0.7, spinnerSize: 20 } as const;\n\n/** `glow`: a halo of the primary hue, wider and stronger while focused. */\nexport const INPUT_GLOW = {\n  rest: { blur: 15, alpha: 0.3 },\n  focused: { blur: 20, alpha: 0.5 },\n} as const;\n\n/**\n * `pulse`: a bar behind the field, fading outward every two seconds. Its height\n * and corner are the field's own — the theme's field height and radius.\n */\nexport const INPUT_PULSE = {\n  opacity: 0.3,\n  ms: 2000,\n  spread: 10,\n} as const;\n\n/** `floating`: where the label rests and where it shrinks to, on the web. */\nexport const FLOATING_LABEL = {\n  rest: { x: 14, y: 16 },\n  shrink: { x: 14, y: -9 },\n  scale: 0.75,\n  paddingX: 4,\n} as const;\n\n/** `glass`: a wash of paper under a blur, brighter as the field is engaged. */\nexport const INPUT_GLASS = {\n  background: { rest: 0.1, hover: 0.15, focused: 0.2 },\n  blur: 20,\n  hoverBorderAlpha: 0.3,\n  focusRing: { width: 2, alpha: 0.1 },\n} as const;\n\n/** `gradient`: a 135° fill between the two brand hues, inside a 2px masked ring. */\nexport const INPUT_GRADIENT = {\n  angleDeg: 135,\n  fill: { rest: 0.1, hover: 0.15, focused: 0.2 },\n  borderWidth: 2,\n} as const;\n\n/** `filled`: MUI's own grey replaced by a wash of `action.hover`. */\nexport const FILLED_WASH = { rest: 0.04, hover: 0.08, focused: 0.12 } as const;\n\n/**\n * The props the web spreads onto the `TextField` for a size: MUI's density, and\n * the horizontal inset of the steps that have their own. The HEIGHT is not\n * here — `Input.tsx` draws every outlined step at the theme's field height.\n */\nexport interface InputSizeProps {\n  size: MuiInputSize;\n  sx?: { '& .MuiInputBase-input': { paddingLeft: string; paddingRight: string } };\n}\n\nconst sizeProps = (size: SizeValue): InputSizeProps => {\n  const override = INPUT_SIZE_OVERRIDES[size];\n  return {\n    size: INPUT_MUI_SIZE[size],\n    ...(override\n      ? {\n          sx: {\n            '& .MuiInputBase-input': {\n              paddingLeft: `${override.horizontal}px`,\n              paddingRight: `${override.horizontal}px`,\n            },\n          },\n        }\n      : {}),\n  };\n};\n\nexport const SIZE_MAP: Record<SizeValue, InputSizeProps> = Object.fromEntries(\n  SIZE_VALUES.map((size) => [size, sizeProps(size)]),\n) as Record<SizeValue, InputSizeProps>;\n"],"mappings":"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","names":[]}

package/dist/chunk-RORP6DWR.js

@@ -0,0 +1,228 @@
+import {
+  RAIL_GAP_PX
+} from "./chunk-JFEEV3XI.js";
+import {
+  DescriptionItem
+} from "./chunk-VAGHW3K2.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/base-list-card-slots.tsx
+import { Fragment } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var META_BREAK = 520;
+var STACK_BREAK = 360;
+var TABULAR = { fontVariantNumeric: "tabular-nums" };
+var CLAMP = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function ListCardCaption({
+  title,
+  subtitle,
+  href,
+  target,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(default2, { "data-slot": "caption", sx: { minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(Text, { variant: "heading", size: "sm", weight: "bold", as: "p", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        ...href ? { component: "a", href, target } : { component: "span" },
+        "data-testid": testId,
+        sx: {
+          display: "block",
+          lineHeight: 1.2,
+          fontSize: sxRem(14.4),
+          color: "inherit",
+          textDecoration: "none",
+          ...CLAMP,
+          ...href ? {
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              // Under the checkbox, drag grip, actions and menu, which
+              // all raise themselves to 1.
+              zIndex: 0
+            },
+            "&:hover": { textDecoration: "underline" }
+          } : {}
+        },
+        children: title
+      }
+    ) }),
+    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", ...CLAMP }, children: subtitle }) })
+  ] });
+}
+function MetaRule() {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      "aria-hidden": true,
+      sx: {
+        flex: "0 0 auto",
+        color: "text.disabled",
+        opacity: 0.5,
+        userSelect: "none",
+        fontSize: sxRem(14),
+        // A cancelled row strikes the whole meta cluster, and a struck `|` is a
+        // dagger. The rule is punctuation, not data — nothing to void.
+        textDecoration: "none"
+      },
+      children: "|"
+    }
+  );
+}
+function ListCardMeta({
+  meta,
+  metaSlot,
+  trailingRule
+}) {
+  const items = meta ?? [];
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-slot": "meta",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-evenly",
+        // A FLOOR, not the spacing itself: `space-evenly` supplies the rest, and
+        // this is only what keeps a rail with no room to spare from running the
+        // date straight into the rule.
+        gap: 1,
+        whiteSpace: "nowrap",
+        ...TABULAR,
+        // Rung 1 of the ladder.
+        [`@container (max-width: ${META_BREAK}px)`]: { display: "none" }
+      },
+      children: [
+        items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(MetaRule, {}),
+          /* @__PURE__ */ jsx(
+            default2,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: 0,
+                // Sized to the pair, so the gaps either side of it are free space
+                // that `space-evenly` can equalise.
+                flex: "0 0 auto"
+              },
+              children: /* @__PURE__ */ jsx(DescriptionItem, { orientation: "vertical", align: "center", ...item })
+            }
+          )
+        ] }, `${item.label}-${index}`)),
+        metaSlot,
+        trailingRule && items.length > 0 && /* @__PURE__ */ jsx(MetaRule, {})
+      ]
+    }
+  );
+}
+var VALUE_FLUSH = {
+  marginLeft: `-${RAIL_GAP_PX}px`,
+  [`@container (max-width: ${META_BREAK}px)`]: { marginLeft: 0 }
+};
+function ListCardValue({ value }) {
+  return /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "medium", as: "span", children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      sx: { fontSize: sxRem(14), whiteSpace: "nowrap", ...TABULAR },
+      children: value
+    }
+  ) });
+}
+function ListCardActions({
+  actions,
+  alwaysVisible,
+  menu,
+  testId
+}) {
+  if (actions == null && menu == null) return null;
+  return (
+    // z-index 1: above the stretched link, so these stay clickable.
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        "data-slot": "actions",
+        sx: { display: "flex", alignItems: "center", gap: 0.5, position: "relative", zIndex: 1 },
+        children: [
+          actions && /* @__PURE__ */ jsx(
+            default2,
+            {
+              "data-testid": testId("actions"),
+              onClick: (event) => event.stopPropagation(),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                ...alwaysVisible ? {} : {
+                  visibility: "hidden",
+                  ".MuiPaper-root:hover &, .MuiPaper-root:focus-within &": {
+                    visibility: "visible"
+                  }
+                }
+              },
+              children: actions
+            }
+          ),
+          menu && /* @__PURE__ */ jsx(default2, { "data-testid": testId("menu"), onClick: (event) => event.stopPropagation(), children: menu })
+        ]
+      }
+    )
+  );
+}
+function ListCardTail({
+  value,
+  separated,
+  actions,
+  actionsAlwaysVisible,
+  menu,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-slot": "value",
+        sx: {
+          textAlign: "right",
+          ...separated && value != null ? VALUE_FLUSH : {}
+        },
+        "data-testid": testId("value"),
+        children: value != null && /* @__PURE__ */ jsx(ListCardValue, { value })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ListCardActions,
+      {
+        actions,
+        alwaysVisible: actionsAlwaysVisible,
+        menu,
+        testId
+      }
+    )
+  ] });
+}
+
+export {
+  META_BREAK,
+  STACK_BREAK,
+  ListCardCaption,
+  ListCardMeta,
+  ListCardActions,
+  ListCardTail
+};
+//# sourceMappingURL=chunk-RORP6DWR.js.map

package/dist/chunk-RORP6DWR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-slots.tsx"],"sourcesContent":["\"use client\";\n\nimport { Fragment, type ReactNode } from \"react\";\n\nimport { DescriptionItem, type DescriptionItemProps } from \"../DescriptionItem\";\nimport { RAIL_GAP_PX } from \"./list-card-rails\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/**\n * WHAT SITS IN EACH RAIL.\n *\n * Split from `base-list-card` at the size gate: that module is the shell, the\n * rails and the states; this is the content of each column.\n */\n\n/** Below this the row drops its middle columns. */\nexport const META_BREAK = 520;\n/** …and below this it leaves the shared rails and goes two-line. */\nexport const STACK_BREAK = 360;\n\n/** Money and dates line up only if their digits are the same width. */\nconst TABULAR = { fontVariantNumeric: \"tabular-nums\" } as const;\n\nconst CLAMP = {\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n} as const;\n\n/**\n * Title over subtitle — and, when the row navigates, the anchor that covers it.\n *\n * The link is a real `<a>` stretched by `::after` over the whole card rather\n * than a click handler on a `<div>`. That buys cmd-click, middle-click, \"copy\n * link address\", the status bar preview and correct tab order, and it stops the\n * buttons elsewhere in the row from being interactive elements nested inside a\n * clickable one.\n */\nexport function ListCardCaption({\n  title,\n  subtitle,\n  href,\n  target,\n  testId,\n}: {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  href?: string;\n  target?: string;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box data-slot=\"caption\" sx={{ minWidth: 0 }}>\n      {title != null && (\n        <Text variant=\"heading\" size=\"sm\" weight=\"bold\" as=\"p\">\n          <Box\n            {...(href ? { component: \"a\", href, target } : { component: \"span\" })}\n            data-testid={testId}\n            sx={{\n              display: \"block\",\n              lineHeight: 1.2,\n              fontSize: sxRem(14.4),\n              color: \"inherit\",\n              textDecoration: \"none\",\n              ...CLAMP,\n              ...(href\n                ? {\n                    \"&::after\": {\n                      content: '\"\"',\n                      position: \"absolute\",\n                      inset: 0,\n                      // Under the checkbox, drag grip, actions and menu, which\n                      // all raise themselves to 1.\n                      zIndex: 0,\n                    },\n                    \"&:hover\": { textDecoration: \"underline\" },\n                  }\n                : {}),\n            }}\n          >\n            {title}\n          </Box>\n        </Text>\n      )}\n      {subtitle != null && (\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          <Box component=\"span\" sx={{ display: \"block\", ...CLAMP }}>\n            {subtitle}\n          </Box>\n        </Text>\n      )}\n    </Box>\n  );\n}\n\n/** One rule between two columns. Shared, so every gap gets the same mark. */\nfunction MetaRule(): React.JSX.Element {\n  return (\n    <Box\n      aria-hidden\n      sx={{\n        flex: \"0 0 auto\",\n        color: \"text.disabled\",\n        opacity: 0.5,\n        userSelect: \"none\",\n        fontSize: sxRem(14),\n        // A cancelled row strikes the whole meta cluster, and a struck `|` is a\n        // dagger. The rule is punctuation, not data — nothing to void.\n        textDecoration: \"none\",\n      }}\n    >\n      |\n    </Box>\n  );\n}\n\n/**\n * The middle columns: stacked label-over-value pairs, separated by a rule.\n *\n * Stacked rather than side by side because `DATA 05/08/2026` inline spends the\n * horizontal room the value rail needs, and the separator is what stops two\n * adjacent pairs reading as one four-word phrase.\n *\n * EVEN GAPS, NOT EVEN BOXES. The rail takes a share of the row's spare width\n * per pair (see `metaRail`), and the obvious way to spend it — give every pair\n * an equal-width box and centre its content — puts the separator on the BOX\n * boundary, which is only the visual midpoint when both pairs are the same\n * width. They never are: `05/08/2026, 13:45` reaches almost to the edge of its\n * box while `PIX` stops well short of its own, so the rule ends up crowded\n * against the date and adrift from the method.\n *\n * So the pairs are sized to their content and the SPARE space is what gets\n * divided evenly. `space-evenly` gives every gap — including the two either\n * side of each separator — the same width, which puts each rule exactly halfway\n * between the two labels it separates, whatever they happen to say.\n */\nexport function ListCardMeta({\n  meta,\n  metaSlot,\n  trailingRule,\n}: {\n  meta?: DescriptionItemProps[];\n  metaSlot?: ReactNode;\n  /** Close the run with a rule, dividing the last pair from the value. */\n  trailingRule?: boolean;\n}): React.JSX.Element {\n  const items = meta ?? [];\n  return (\n    <Box\n      data-slot=\"meta\"\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-evenly\",\n        // A FLOOR, not the spacing itself: `space-evenly` supplies the rest, and\n        // this is only what keeps a rail with no room to spare from running the\n        // date straight into the rule.\n        gap: 1,\n        whiteSpace: \"nowrap\",\n        ...TABULAR,\n        // Rung 1 of the ladder.\n        [`@container (max-width: ${META_BREAK}px)`]: { display: \"none\" },\n      }}\n    >\n      {items.map((item, index) => (\n        <Fragment key={`${item.label}-${index}`}>\n          {/* ITS OWN ITEM, not the first child of the pair that follows it.\n              Nested inside, the rule travelled with that pair's centred content\n              and came to rest nearer one label than the other — a separator\n              visibly closer to MÉTODO than to DATA reads as belonging to it. */}\n          {index > 0 && <MetaRule />}\n          {/* Centred: a stacked pair sitting in its own column reads as one\n              unit only when the label is over the value rather than flush left\n              of a value shorter than it — `MÉTODO` above `PIX` was visibly\n              unhinged from it. Overridable per item. */}\n          <Box\n            sx={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              minWidth: 0,\n              // Sized to the pair, so the gaps either side of it are free space\n              // that `space-evenly` can equalise.\n              flex: \"0 0 auto\",\n            }}\n          >\n            <DescriptionItem orientation=\"vertical\" align=\"center\" {...item} />\n          </Box>\n        </Fragment>\n      ))}\n      {metaSlot}\n      {trailingRule && items.length > 0 && <MetaRule />}\n    </Box>\n  );\n}\n\n/**\n * The value sits flush against the meta rail, with no gap of its own.\n *\n * Its divider is now the LAST ITEM OF THE META CLUSTER, placed by the same\n * `space-evenly` that places the rules between the pairs — so it is equidistant\n * from `PIX` and from `R$ 13,90` for free, which a rule centred in the rail gap\n * could never be: the cluster's content stops well short of the rail's right\n * edge, leaving that rule 150px from the method and 12px from the money.\n *\n * Cancelling this one gap is what makes the two distances equal. Below\n * `META_BREAK` the cluster (and its rule) are gone, so the gap comes back —\n * otherwise the value would sit straight against the title.\n */\nconst VALUE_FLUSH = {\n  marginLeft: `-${RAIL_GAP_PX}px`,\n  [`@container (max-width: ${META_BREAK}px)`]: { marginLeft: 0 },\n} as const;\n\n/** The value, on its own rail, never truncated and never shunted by the chip. */\nfunction ListCardValue({ value }: { value: ReactNode }): React.JSX.Element {\n  return (\n    <Text variant=\"body\" size=\"sm\" weight=\"medium\" as=\"span\">\n      <Box\n        component=\"span\"\n        sx={{ fontSize: sxRem(14), whiteSpace: \"nowrap\", ...TABULAR }}\n      >\n        {value}\n      </Box>\n    </Text>\n  );\n}\n\n/**\n * The actions and the menu, at the end of the row.\n *\n * Actions are revealed on hover and `:focus-within` — always-visible buttons on\n * every row of fifty is a lot of chrome for something used on one of them.\n * `:focus-within` is what keeps them reachable by keyboard, and `visibility`\n * rather than `display` keeps their space reserved so nothing shifts.\n */\nexport function ListCardActions({\n  actions,\n  alwaysVisible,\n  menu,\n  testId,\n}: {\n  actions?: ReactNode;\n  alwaysVisible?: boolean;\n  menu?: ReactNode;\n  testId: (slot: string) => string | undefined;\n}): React.JSX.Element | null {\n  if (actions == null && menu == null) return null;\n  return (\n    // z-index 1: above the stretched link, so these stay clickable.\n    <Box\n      data-slot=\"actions\"\n      sx={{ display: \"flex\", alignItems: \"center\", gap: 0.5, position: \"relative\", zIndex: 1 }}\n    >\n      {actions && (\n        <Box\n          data-testid={testId(\"actions\")}\n          onClick={(event) => event.stopPropagation()}\n          sx={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 0.5,\n            ...(alwaysVisible\n              ? {}\n              : {\n                  visibility: \"hidden\",\n                  \".MuiPaper-root:hover &, .MuiPaper-root:focus-within &\": {\n                    visibility: \"visible\",\n                  },\n                }),\n          }}\n        >\n          {actions}\n        </Box>\n      )}\n      {menu && (\n        <Box data-testid={testId(\"menu\")} onClick={(event) => event.stopPropagation()}>\n          {menu}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/** Value and actions — separate rails, not one flex run. */\nexport function ListCardTail({\n  value,\n  separated,\n  actions,\n  actionsAlwaysVisible,\n  menu,\n  testId,\n}: {\n  value?: ReactNode;\n  /** Whether a meta cluster precedes the value and wants dividing from it. */\n  separated?: boolean;\n  actions?: ReactNode;\n  actionsAlwaysVisible?: boolean;\n  menu?: ReactNode;\n  testId: (slot: string) => string | undefined;\n}): React.JSX.Element {\n  return (\n    <>\n      <Box\n        data-slot=\"value\"\n        sx={{\n          textAlign: \"right\",\n          ...(separated && value != null ? VALUE_FLUSH : {}),\n        }}\n        data-testid={testId(\"value\")}\n      >\n        {value != null && <ListCardValue value={value} />}\n      </Box>\n      <ListCardActions\n        actions={actions}\n        alwaysVisible={actionsAlwaysVisible}\n        menu={menu}\n        testId={testId}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":["Fragment","default"]}

package/dist/chunk-ROT57BP4.js

@@ -0,0 +1,187 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-columns-tab.tsx
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
+import Checkbox from "@mui/material/Checkbox/index.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function moved(order, id, delta) {
+  const from = order.indexOf(id);
+  const to = from + delta;
+  if (from < 0 || to < 0 || to >= order.length) return order;
+  const next = [...order];
+  [next[from], next[to]] = [next[to], next[from]];
+  return next;
+}
+function ColumnsTab({
+  columns,
+  order,
+  visibleColumns,
+  onToggle,
+  onReorder,
+  onShowAll,
+  onReset,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const [dragId, setDragId] = useState(null);
+  const byId = new Map(columns.map((column) => [column.id, column]));
+  const ordered = order.map((id) => byId.get(id)).filter((column) => Boolean(column));
+  const visibleHideableCount = visibleColumns.filter((id) => byId.has(id)).length;
+  const dropOn = (id) => {
+    if (!dragId || dragId === id) return;
+    const without = order.filter((key) => key !== dragId);
+    without.splice(without.indexOf(id), 0, dragId);
+    onReorder(without);
+    setDragId(null);
+  };
+  return /* @__PURE__ */ jsxs(default2, { children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", px: 1.5, py: 1 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "text.secondary" }, "data-testid": `${testIdPrefix}-columns-count`, children: copy.columns.visibleCount(visibleHideableCount, columns.length) }) }),
+      /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(LinkButton, { label: copy.columns.showAll, onClick: onShowAll, testId: `${testIdPrefix}-columns-show-all` }),
+        /* @__PURE__ */ jsx(LinkButton, { label: copy.columns.reset, onClick: onReset, testId: `${testIdPrefix}-columns-reset`, muted: true })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 1.5, pb: 0.5, display: "block", color: "text.disabled" }, children: copy.columns.dragHint }) }),
+    /* @__PURE__ */ jsx(default2, { sx: { px: 0.75, pb: 0.75 }, children: ordered.map((column) => /* @__PURE__ */ jsx(
+      ColumnRow,
+      {
+        column,
+        visible: visibleColumns.includes(column.id),
+        dragging: dragId === column.id,
+        onToggle,
+        onDragStart: () => setDragId(column.id),
+        onDragEnd: () => setDragId(null),
+        onDrop: () => dropOn(column.id),
+        onMove: (delta) => onReorder(moved(order, column.id, delta)),
+        testIdPrefix
+      },
+      column.id
+    )) })
+  ] });
+}
+function LinkButton({
+  label,
+  onClick,
+  testId,
+  muted
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick,
+      "data-testid": testId,
+      sx: {
+        border: 0,
+        background: "none",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: sxRem(12),
+        p: 0,
+        color: muted ? "text.secondary" : "primary.main",
+        "&:hover": { textDecoration: "underline" }
+      },
+      children: label
+    }
+  );
+}
+function ColumnRow({
+  column,
+  visible,
+  dragging,
+  onToggle,
+  onDragStart,
+  onDragEnd,
+  onDrop,
+  onMove,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      draggable: true,
+      onDragStart,
+      onDragEnd,
+      onDragOver: (event) => event.preventDefault(),
+      onDrop,
+      "data-testid": `${testIdPrefix}-column-row-${column.id}`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: 0.75,
+        py: 0.25,
+        borderRadius: 1,
+        opacity: dragging ? 0.4 : 1,
+        "&:hover": { bgcolor: "action.hover" },
+        "&:hover .dv-col-move": { opacity: 1 }
+      },
+      children: [
+        /* @__PURE__ */ jsx(default2, { component: "span", "aria-hidden": true, sx: { display: "flex", color: "action.disabled", cursor: "grab" }, children: /* @__PURE__ */ jsx(DragIndicatorRoundedIcon, { fontSize: "small" }) }),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "small",
+            checked: visible,
+            onChange: (event) => onToggle(column.id, event.target.checked),
+            inputProps: { "aria-label": column.label },
+            "data-testid": `${testIdPrefix}-column-toggle-${column.id}`
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { flex: 1, color: visible ? "text.primary" : "text.disabled" }, children: column.label }) }),
+        /* @__PURE__ */ jsxs(default2, { className: "dv-col-move", sx: { ml: "auto", display: "flex", opacity: 0, transition: "opacity .15s" }, children: [
+          /* @__PURE__ */ jsx(MoveButton, { label: copy.columns.moveUp(column.label), onClick: () => onMove(-1), up: true }),
+          /* @__PURE__ */ jsx(MoveButton, { label: copy.columns.moveDown(column.label), onClick: () => onMove(1) })
+        ] })
+      ]
+    }
+  );
+}
+function MoveButton({
+  label,
+  onClick,
+  up
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      "aria-label": label,
+      onClick,
+      sx: {
+        display: "flex",
+        border: 0,
+        p: 0.25,
+        background: "none",
+        borderRadius: 0.5,
+        cursor: "pointer",
+        color: "text.secondary",
+        "&:hover": { bgcolor: "action.selected" }
+      },
+      children: up ? /* @__PURE__ */ jsx(ArrowUpwardRoundedIcon, { sx: { fontSize: sxRem(14) } }) : /* @__PURE__ */ jsx(ArrowDownwardRoundedIcon, { sx: { fontSize: sxRem(14) } })
+    }
+  );
+}
+
+export {
+  ColumnsTab
+};
+//# sourceMappingURL=chunk-ROT57BP4.js.map