@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-TZASFX6G.js

@@ -0,0 +1,159 @@
+import {
+  useLightboxCopy
+} from "./chunk-TEQYTEM2.js";
+import {
+  OVERLAY_Z_INDEX,
+  navButtonSx,
+  overlayButtonSx
+} from "./chunk-3KA6MYIR.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/LightboxControls.tsx
+import PrevIcon from "@mui/icons-material/ChevronLeft";
+import NextIcon from "@mui/icons-material/ChevronRight";
+import CloseIcon from "@mui/icons-material/Close";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import ResetZoomIcon from "@mui/icons-material/RestartAlt";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import Box from "@mui/material/Box/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LightboxCloseButton = ({
+  testId,
+  onClose
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onClose,
+      sx: { ...overlayButtonSx, position: "absolute", top: sxRem(16), right: sxRem(16), zIndex: OVERLAY_Z_INDEX },
+      "aria-label": copy.close,
+      "data-testid": testId("close"),
+      children: /* @__PURE__ */ jsx(CloseIcon, {})
+    }
+  );
+};
+var arrowSx = (side) => ({
+  ...navButtonSx,
+  position: "absolute",
+  [side]: sxRem(16),
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: OVERLAY_Z_INDEX
+});
+var LightboxNavButtons = ({
+  testId,
+  atStart,
+  atEnd,
+  onPrev,
+  onNext
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onPrev,
+        disabled: atStart,
+        sx: arrowSx("left"),
+        "aria-label": copy.previous,
+        "data-testid": testId("prev"),
+        children: /* @__PURE__ */ jsx(PrevIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onNext,
+        disabled: atEnd,
+        sx: arrowSx("right"),
+        "aria-label": copy.next,
+        "data-testid": testId("next"),
+        children: /* @__PURE__ */ jsx(NextIcon, {})
+      }
+    )
+  ] });
+};
+var LightboxZoomControls = ({
+  testId,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: sxRem(16),
+        left: sxRem(16),
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        zIndex: OVERLAY_Z_INDEX
+      },
+      "data-testid": testId("zoom-controls"),
+      children: [
+        /* @__PURE__ */ jsx(IconButton, { onClick: onZoomIn, sx: overlayButtonSx, "aria-label": copy.zoomIn, "data-testid": testId("zoom-in"), children: /* @__PURE__ */ jsx(ZoomInIcon, {}) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onZoomOut,
+            sx: overlayButtonSx,
+            "aria-label": copy.zoomOut,
+            "data-testid": testId("zoom-out"),
+            children: /* @__PURE__ */ jsx(ZoomOutIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onResetZoom,
+            sx: overlayButtonSx,
+            "aria-label": copy.resetZoom,
+            "data-testid": testId("zoom-reset"),
+            children: /* @__PURE__ */ jsx(ResetZoomIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var LightboxAutoplayButton = ({
+  testId,
+  isAutoPlaying,
+  onToggle
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onToggle,
+      sx: {
+        ...overlayButtonSx,
+        position: "absolute",
+        top: sxRem(16),
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: OVERLAY_Z_INDEX
+      },
+      "aria-label": isAutoPlaying ? copy.pause : copy.play,
+      "data-testid": testId("autoplay"),
+      children: isAutoPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+    }
+  );
+};
+
+export {
+  LightboxCloseButton,
+  LightboxNavButtons,
+  LightboxZoomControls,
+  LightboxAutoplayButton
+};
+//# sourceMappingURL=chunk-TZASFX6G.js.map

package/dist/chunk-TZASFX6G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxControls.tsx"],"sourcesContent":["import PrevIcon from '@mui/icons-material/ChevronLeft';\nimport NextIcon from '@mui/icons-material/ChevronRight';\nimport CloseIcon from '@mui/icons-material/Close';\nimport PauseIcon from '@mui/icons-material/Pause';\nimport PlayIcon from '@mui/icons-material/PlayArrow';\nimport ResetZoomIcon from '@mui/icons-material/RestartAlt';\nimport ZoomInIcon from '@mui/icons-material/ZoomIn';\nimport ZoomOutIcon from '@mui/icons-material/ZoomOut';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { navButtonSx, OVERLAY_Z_INDEX, overlayButtonSx } from './Lightbox.constants';\nimport { useLightboxCopy } from './lightbox-copy-context';\nimport { sxRem } from '../../../tokens/relative';\n\ntype TestId = (suffix: string) => string;\n\nexport const LightboxCloseButton: FC<{ testId: TestId; onClose: () => void }> = ({\n  testId,\n  onClose,\n}) => {\n  const copy = useLightboxCopy();\n  return (\n  <IconButton\n    onClick={onClose}\n    sx={{ ...overlayButtonSx, position: 'absolute', top: sxRem(16), right: sxRem(16), zIndex: OVERLAY_Z_INDEX }}\n    aria-label={copy.close}\n    data-testid={testId('close')}\n  >\n    <CloseIcon />\n  </IconButton>\n  );\n};\n\nconst arrowSx = (side: 'left' | 'right') =>\n  ({\n    ...navButtonSx,\n    position: 'absolute',\n    [side]: sxRem(16),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    zIndex: OVERLAY_Z_INDEX,\n  }) as const;\n\nexport interface LightboxNavButtonsProps {\n  testId: TestId;\n  atStart: boolean;\n  atEnd: boolean;\n  onPrev: () => void;\n  onNext: () => void;\n}\n\nexport const LightboxNavButtons: FC<LightboxNavButtonsProps> = ({\n  testId,\n  atStart,\n  atEnd,\n  onPrev,\n  onNext,\n}) => {\n  const copy = useLightboxCopy();\n  return (\n  <>\n    <IconButton\n      onClick={onPrev}\n      disabled={atStart}\n      sx={arrowSx('left')}\n      aria-label={copy.previous}\n      data-testid={testId('prev')}\n    >\n      <PrevIcon />\n    </IconButton>\n\n    <IconButton\n      onClick={onNext}\n      disabled={atEnd}\n      sx={arrowSx('right')}\n      aria-label={copy.next}\n      data-testid={testId('next')}\n    >\n      <NextIcon />\n    </IconButton>\n  </>\n  );\n};\n\nexport interface LightboxZoomControlsProps {\n  testId: TestId;\n  onZoomIn: () => void;\n  onZoomOut: () => void;\n  onResetZoom: () => void;\n}\n\nexport const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({\n  testId,\n  onZoomIn,\n  onZoomOut,\n  onResetZoom,\n}) => {\n  const copy = useLightboxCopy();\n  return (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: sxRem(16),\n      left: sxRem(16),\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 1,\n      zIndex: OVERLAY_Z_INDEX,\n    }}\n    data-testid={testId('zoom-controls')}\n  >\n    <IconButton onClick={onZoomIn} sx={overlayButtonSx} aria-label={copy.zoomIn} data-testid={testId('zoom-in')}>\n      <ZoomInIcon />\n    </IconButton>\n    <IconButton\n      onClick={onZoomOut}\n      sx={overlayButtonSx}\n      aria-label={copy.zoomOut}\n      data-testid={testId('zoom-out')}\n    >\n      <ZoomOutIcon />\n    </IconButton>\n    <IconButton\n      onClick={onResetZoom}\n      sx={overlayButtonSx}\n      aria-label={copy.resetZoom}\n      data-testid={testId('zoom-reset')}\n    >\n      <ResetZoomIcon />\n    </IconButton>\n  </Box>\n  );\n};\n\nexport interface LightboxAutoplayButtonProps {\n  testId: TestId;\n  isAutoPlaying: boolean;\n  onToggle: () => void;\n}\n\nexport const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({\n  testId,\n  isAutoPlaying,\n  onToggle,\n}) => {\n  const copy = useLightboxCopy();\n  return (\n  <IconButton\n    onClick={onToggle}\n    sx={{\n      ...overlayButtonSx,\n      position: 'absolute',\n      top: sxRem(16),\n      left: '50%',\n      transform: 'translateX(-50%)',\n      zIndex: OVERLAY_Z_INDEX,\n    }}\n    aria-label={isAutoPlaying ? copy.pause : copy.play}\n    data-testid={testId('autoplay')}\n  >\n    {isAutoPlaying ? <PauseIcon /> : <PlayIcon />}\n  </IconButton>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-U4H6MGVE.js

@@ -0,0 +1,186 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/UploadButton/UploadButton.parts.tsx
+import AttachFileOutlined from "@mui/icons-material/AttachFileOutlined";
+import CloudUploadOutlined from "@mui/icons-material/CloudUploadOutlined";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import LinearProgress from "@mui/material/LinearProgress/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DRAG_OVER_TINT = 10 / 255;
+var HOVER_TINT = 5 / 255;
+var GHOST_HOVER_TINT = 8 / 255;
+function UploadDropzone({
+  copy,
+  label,
+  icon,
+  disabled,
+  className,
+  dataTestId,
+  describedBy,
+  onOpen,
+  isDragOver,
+  drag
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "div",
+      ...drag,
+      onClick: onOpen,
+      sx: {
+        border: `2px dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,
+        borderRadius: 2,
+        padding: 3,
+        textAlign: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        backgroundColor: isDragOver ? alpha(theme.palette.primary.main, DRAG_OVER_TINT) : "transparent",
+        transition: "all 0.2s ease-in-out",
+        ...!disabled && {
+          "&:hover": {
+            borderColor: theme.palette.primary.main,
+            backgroundColor: alpha(theme.palette.primary.main, HOVER_TINT)
+          }
+        },
+        opacity: disabled ? 0.6 : 1
+      },
+      className,
+      "data-testid": dataTestId,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        onOpen();
+      },
+      "aria-describedby": describedBy,
+      "aria-label": copy.dropzoneRole(label),
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: icon || /* @__PURE__ */ jsx(CloudUploadOutlined, { sx: { fontSize: sxRem(48), color: "text.secondary" } }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 1 }, children: label }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: copy.dropzoneHint })
+      ]
+    }
+  );
+}
+var MUI_VARIANT = { outline: "outlined", ghost: "text" };
+function UploadTrigger({
+  copy,
+  label,
+  icon,
+  disabled,
+  className,
+  dataTestId,
+  describedBy,
+  onOpen,
+  variant,
+  isUploading
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: MUI_VARIANT[variant] ?? "contained",
+      disabled: disabled || isUploading,
+      onClick: onOpen,
+      startIcon: icon || /* @__PURE__ */ jsx(AttachFileOutlined, {}),
+      className,
+      "data-testid": dataTestId,
+      "aria-describedby": describedBy,
+      sx: {
+        ...variant === "ghost" && {
+          "&:hover": { backgroundColor: alpha(theme.palette.primary.main, GHOST_HOVER_TINT) }
+        }
+      },
+      children: isUploading ? copy.uploading : label
+    }
+  );
+}
+function UploadAnnouncer({
+  copy,
+  announceDragOver,
+  isUploading,
+  progress,
+  error
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: "sr-only",
+      style: {
+        position: "absolute",
+        left: "-10000px",
+        width: "1px",
+        height: "1px",
+        overflow: "hidden"
+      },
+      children: [
+        announceDragOver && copy.dropReady,
+        isUploading && copy.uploadInProgress(Math.round(progress)),
+        error && copy.errorAnnouncement(error)
+      ]
+    }
+  );
+}
+function UploadFeedback({
+  copy,
+  isUploading,
+  progress,
+  helperText,
+  helperId,
+  error,
+  errorId,
+  announceDragOver
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isUploading && progress > 0 && /* @__PURE__ */ jsxs(Box, { sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: progress, sx: { borderRadius: 1 } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { mt: 0.5, display: "block" }, children: copy.percentUploaded(Math.round(progress)) })
+    ] }),
+    helperText && !error && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: helperId,
+        variant: "caption",
+        color: "text.secondary",
+        sx: { display: "block", mt: 0.5 },
+        children: helperText
+      }
+    ),
+    error && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: errorId,
+        variant: "caption",
+        color: "error",
+        sx: { display: "block", mt: 0.5 },
+        role: "alert",
+        children: error
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      UploadAnnouncer,
+      {
+        copy,
+        announceDragOver,
+        isUploading,
+        progress,
+        error
+      }
+    )
+  ] });
+}
+
+export {
+  UploadDropzone,
+  UploadTrigger,
+  UploadFeedback
+};
+//# sourceMappingURL=chunk-U4H6MGVE.js.map

package/dist/chunk-U4H6MGVE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/UploadButton/UploadButton.parts.tsx"],"sourcesContent":["import AttachFileOutlined from '@mui/icons-material/AttachFileOutlined';\nimport CloudUploadOutlined from '@mui/icons-material/CloudUploadOutlined';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport type { DragHandlers } from './UploadButton.hooks';\n\n/*\n * The tints the dropzone and the ghost button have always drawn — 0x0A, 0x05\n * and 0x08 out of 0xFF — as `alpha()` opacities. They were hex-alpha suffixes\n * glued onto `palette.primary.main`, which only works while the palette colour\n * is a six-digit hex: an `rgb(…)` primary produced an invalid colour and no\n * tint at all.\n */\nconst DRAG_OVER_TINT = 0x0a / 0xff;\nconst HOVER_TINT = 0x05 / 0xff;\nconst GHOST_HOVER_TINT = 0x08 / 0xff;\nimport type { UploadButtonCopy } from '../../../copy';\nimport type { UploadButtonProps } from './UploadButton.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/** Shared shape for the two trigger variants. */\nexport interface TriggerProps {\n  copy: UploadButtonCopy;\n  label: string;\n  icon?: React.ReactNode;\n  disabled: boolean;\n  className?: string;\n  dataTestId?: string;\n  describedBy?: string;\n  onOpen: () => void;\n}\n\n/** The drag-and-drop surface. */\nexport function UploadDropzone({\n  copy,\n  label,\n  icon,\n  disabled,\n  className,\n  dataTestId,\n  describedBy,\n  onOpen,\n  isDragOver,\n  drag,\n}: TriggerProps & { isDragOver: boolean; drag: DragHandlers }): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <Box\n      component=\"div\"\n      {...drag}\n      onClick={onOpen}\n      sx={{\n        border: `2px dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,\n        borderRadius: 2,\n        padding: 3,\n        textAlign: 'center',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        backgroundColor: isDragOver ? alpha(theme.palette.primary.main, DRAG_OVER_TINT) : 'transparent',\n        transition: 'all 0.2s ease-in-out',\n        ...(!disabled && {\n          '&:hover': {\n            borderColor: theme.palette.primary.main,\n            backgroundColor: alpha(theme.palette.primary.main, HOVER_TINT),\n          },\n        }),\n        opacity: disabled ? 0.6 : 1,\n      }}\n      className={className}\n      data-testid={dataTestId}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={(event) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        onOpen();\n      }}\n      aria-describedby={describedBy}\n      aria-label={copy.dropzoneRole(label)}\n    >\n      <Box sx={{ mb: 2 }}>\n        {icon || <CloudUploadOutlined sx={{ fontSize: sxRem(48), color: 'text.secondary' }} />}\n      </Box>\n      <Typography variant=\"body1\" sx={{ mb: 1 }}>\n        {label}\n      </Typography>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {copy.dropzoneHint}\n      </Typography>\n    </Box>\n  );\n}\n\n/** MUI variant for each non-dropzone appearance. */\nconst MUI_VARIANT = { outline: 'outlined', ghost: 'text' } as const;\n\n/** The plain-button trigger. */\nexport function UploadTrigger({\n  copy,\n  label,\n  icon,\n  disabled,\n  className,\n  dataTestId,\n  describedBy,\n  onOpen,\n  variant,\n  isUploading,\n}: TriggerProps & {\n  variant: NonNullable<UploadButtonProps['variant']>;\n  isUploading: boolean;\n}): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <Button\n      variant={MUI_VARIANT[variant as keyof typeof MUI_VARIANT] ?? 'contained'}\n      disabled={disabled || isUploading}\n      onClick={onOpen}\n      startIcon={icon || <AttachFileOutlined />}\n      className={className}\n      data-testid={dataTestId}\n      aria-describedby={describedBy}\n      sx={{\n        ...(variant === 'ghost' && {\n          '&:hover': { backgroundColor: alpha(theme.palette.primary.main, GHOST_HOVER_TINT) },\n        }),\n      }}\n    >\n      {isUploading ? copy.uploading : label}\n    </Button>\n  );\n}\n\n/** The screen-reader live region — drag, progress and error announcements. */\nfunction UploadAnnouncer({\n  copy,\n  announceDragOver,\n  isUploading,\n  progress,\n  error,\n}: {\n  copy: UploadButtonCopy;\n  announceDragOver: boolean;\n  isUploading: boolean;\n  progress: number;\n  error: string | null;\n}): React.ReactElement {\n  return (\n    <div\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      className=\"sr-only\"\n      style={{\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      }}\n    >\n      {announceDragOver && copy.dropReady}\n      {isUploading && copy.uploadInProgress(Math.round(progress))}\n      {error && copy.errorAnnouncement(error)}\n    </div>\n  );\n}\n\n/** Progress bar, helper text, error text and the live region. */\nexport function UploadFeedback({\n  copy,\n  isUploading,\n  progress,\n  helperText,\n  helperId,\n  error,\n  errorId,\n  announceDragOver,\n}: {\n  copy: UploadButtonCopy;\n  isUploading: boolean;\n  progress: number;\n  helperText?: string;\n  helperId?: string;\n  error: string | null;\n  errorId?: string;\n  announceDragOver: boolean;\n}): React.ReactElement {\n  return (\n    <>\n      {isUploading && progress > 0 && (\n        <Box sx={{ mt: 1 }}>\n          <LinearProgress variant=\"determinate\" value={progress} sx={{ borderRadius: 1 }} />\n          <Typography variant=\"caption\" sx={{ mt: 0.5, display: 'block' }}>\n            {copy.percentUploaded(Math.round(progress))}\n          </Typography>\n        </Box>\n      )}\n\n      {helperText && !error && (\n        <Typography\n          id={helperId}\n          variant=\"caption\"\n          color=\"text.secondary\"\n          sx={{ display: 'block', mt: 0.5 }}\n        >\n          {helperText}\n        </Typography>\n      )}\n\n      {error && (\n        <Typography\n          id={errorId}\n          variant=\"caption\"\n          color=\"error\"\n          sx={{ display: 'block', mt: 0.5 }}\n          role=\"alert\"\n        >\n          {error}\n        </Typography>\n      )}\n\n      <UploadAnnouncer\n        copy={copy}\n        announceDragOver={announceDragOver}\n        isUploading={isUploading}\n        progress={progress}\n        error={error}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAAA,OAAO,wBAAwB;AAC/B,OAAO,yBAAyB;AAChC,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,oBAAoB;AAC3B,OAAO,gBAAgB;AACvB,SAAS,OAAO,gBAAgB;AA8C5B,SA4IA,UA3Ga,KAjCb;AAlCJ,IAAM,iBAAiB,KAAO;AAC9B,IAAM,aAAa,IAAO;AAC1B,IAAM,mBAAmB,IAAO;AAkBzB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmF;AACjF,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,QACF,QAAQ,cAAc,aAAa,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO;AAAA,QACrF,cAAc;AAAA,QACd,SAAS;AAAA,QACT,WAAW;AAAA,QACX,QAAQ,WAAW,gBAAgB;AAAA,QACnC,iBAAiB,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,cAAc,IAAI;AAAA,QAClF,YAAY;AAAA,QACZ,GAAI,CAAC,YAAY;AAAA,UACf,WAAW;AAAA,YACT,aAAa,MAAM,QAAQ,QAAQ;AAAA,YACnC,iBAAiB,MAAM,MAAM,QAAQ,QAAQ,MAAM,UAAU;AAAA,UAC/D;AAAA,QACF;AAAA,QACA,SAAS,WAAW,MAAM;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,MAAK;AAAA,MACL,UAAU,WAAW,KAAK;AAAA,MAC1B,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK;AAChD,cAAM,eAAe;AACrB,eAAO;AAAA,MACT;AAAA,MACA,oBAAkB;AAAA,MAClB,cAAY,KAAK,aAAa,KAAK;AAAA,MAEnC;AAAA,4BAAC,OAAI,IAAI,EAAE,IAAI,EAAE,GACd,kBAAQ,oBAAC,uBAAoB,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB,GAAG,GACtF;AAAA,QACA,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAE,GACrC,iBACH;AAAA,QACA,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,eAAK,cACR;AAAA;AAAA;AAAA,EACF;AAEJ;AAGA,IAAM,cAAc,EAAE,SAAS,YAAY,OAAO,OAAO;AAGlD,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGuB;AACrB,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,YAAY,OAAmC,KAAK;AAAA,MAC7D,UAAU,YAAY;AAAA,MACtB,SAAS;AAAA,MACT,WAAW,QAAQ,oBAAC,sBAAmB;AAAA,MACvC;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB;AAAA,MAClB,IAAI;AAAA,QACF,GAAI,YAAY,WAAW;AAAA,UACzB,WAAW,EAAE,iBAAiB,MAAM,MAAM,QAAQ,QAAQ,MAAM,gBAAgB,EAAE;AAAA,QACpF;AAAA,MACF;AAAA,MAEC,wBAAc,KAAK,YAAY;AAAA;AAAA,EAClC;AAEJ;AAGA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MAEC;AAAA,4BAAoB,KAAK;AAAA,QACzB,eAAe,KAAK,iBAAiB,KAAK,MAAM,QAAQ,CAAC;AAAA,QACzD,SAAS,KAAK,kBAAkB,KAAK;AAAA;AAAA;AAAA,EACxC;AAEJ;AAGO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASuB;AACrB,SACE,iCACG;AAAA,mBAAe,WAAW,KACzB,qBAAC,OAAI,IAAI,EAAE,IAAI,EAAE,GACf;AAAA,0BAAC,kBAAe,SAAQ,eAAc,OAAO,UAAU,IAAI,EAAE,cAAc,EAAE,GAAG;AAAA,MAChF,oBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,IAAI,KAAK,SAAS,QAAQ,GAC3D,eAAK,gBAAgB,KAAK,MAAM,QAAQ,CAAC,GAC5C;AAAA,OACF;AAAA,IAGD,cAAc,CAAC,SACd;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,IAAI,EAAE,SAAS,SAAS,IAAI,IAAI;AAAA,QAE/B;AAAA;AAAA,IACH;AAAA,IAGD,SACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,IAAI,EAAE,SAAS,SAAS,IAAI,IAAI;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-U4QUDFPJ.js

@@ -0,0 +1,46 @@
+import {
+  ConfirmActionDialog
+} from "./chunk-BJZOBG24.js";
+import {
+  useConfirmAction
+} from "./chunk-EMYESBIT.js";
+
+// src/components/data-display/CardKit/use-row-confirm.tsx
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function useRowConfirm({
+  write,
+  describe,
+  dataTestId,
+  errorText,
+  copy
+}) {
+  const [target, setTarget] = useState(null);
+  const state = useConfirmAction(async () => {
+    if (!target) return;
+    await write(target);
+    setTarget(null);
+  }, errorText);
+  const request = (rows) => {
+    if (rows.length === 0) return;
+    setTarget(rows);
+    state.request();
+  };
+  return {
+    request,
+    dialog: target ? /* @__PURE__ */ jsx(
+      ConfirmActionDialog,
+      {
+        state,
+        copy,
+        ...describe(target),
+        dataTestId
+      }
+    ) : null
+  };
+}
+
+export {
+  useRowConfirm
+};
+//# sourceMappingURL=chunk-U4QUDFPJ.js.map

package/dist/chunk-UL7L6MFT.js

@@ -0,0 +1,192 @@
+import {
+  STACK_BREAK
+} from "./chunk-RZ2C5CAW.js";
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-BYH5GPLT.js";
+import {
+  useDragItem
+} from "./chunk-K4EKTMTC.js";
+import {
+  RAIL_COUNT,
+  RAIL_GAP,
+  railsTemplateFor,
+  useListRails
+} from "./chunk-JFEEV3XI.js";
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-4LQZH4PU.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-UL7L6MFT.js.map

package/dist/chunk-UL7L6MFT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-geometry.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTheme, type Theme } from \"@mui/material/styles/index.js\";\n\nimport {\n  CARD_RADIUS,\n  cardSurfaceStyles,\n  isActionable,\n  isSelectable,\n  slotTestIds,\n} from \"./card-surface\";\nimport { useDragItem } from \"./data-views-drag\";\nimport { DENSITY_ROW_PADDING } from \"./data-views-layout-context\";\nimport { RAIL_COUNT, RAIL_GAP, railsTemplateFor, useListRails } from \"./list-card-rails\";\nimport { STACK_BREAK } from \"./base-list-card-slots\";\nimport type { BaseListCardProps } from \"./base-list-card\";\nimport { rem } from \"../../../tokens/relative\";\n\n/**\n * THE ROW'S GEOMETRY AND SURFACE, split from the component at the size gate.\n *\n * Everything here answers \"what shape is this row, and where do its slots land\"\n * — the rails, the density padding, the two-line collapse, the drag and\n * selection plumbing. None of it renders anything, which is why the two halves\n * can live apart without either becoming harder to follow.\n */\n/**\n * Whether a click was really a click, or the tail of a text selection.\n *\n * Without this, selecting an order id to copy it navigates away instead — the\n * single most annoying thing a clickable row does.\n */\nfunction isTextSelection(): boolean {\n  return (globalThis.getSelection?.()?.toString().length ?? 0) > 0;\n}\n\n/** Keyboard equivalence for a card that acts but does not navigate. */\nfunction clickKeys(onClick: () => void) {\n  return (event: React.KeyboardEvent): void => {\n    if (event.key !== \"Enter\" && event.key !== \" \") return;\n    event.preventDefault();\n    onClick();\n  };\n}\n\n/**\n * Geometry: the rails, the density padding, the two-line collapse.\n *\n * SCALE IS `zoom`, NOT A SET OF MULTIPLIED FONT SIZES.\n *\n * It used to be the latter, on exactly three values — title, value, row padding\n * — so the slider left the subtitle, the meta labels, the rules, the checkbox,\n * the grip, the chip and the menu at their fixed sizes, and the row came apart\n * as you dragged it. Multiplying the rest is not a fix: the checkbox and the\n * chip are MUI internals sized in their own px, and no prop we pass reaches\n * them.\n *\n * `zoom` scales the used value of every length in the subtree — ours and theirs\n * — and unlike `transform: scale` it REFLOWS, so the row still occupies the\n * space it draws and the rails still resolve. Verified against the group: at\n * 1.4 all four rows keep identical rail edges, because subgrid tracks and the\n * zoom that reads them are the same for every row.\n */\n/** What {@link rowSx} needs to know about the row it lays out. */\ninterface RowSxOptions {\n  inGroup: boolean;\n  railCount: number;\n  cellTemplate: string | null;\n  gutters: { disclose: boolean; drag: boolean; select: boolean };\n  metaColumns: number;\n  pad: number;\n  padY: number;\n  scale: number;\n  divider: boolean;\n  interactive: boolean;\n  draggable: boolean;\n}\n\n/**\n * DIVIDER COMPOSES WITH THE VARIANT — it changes the row's SHAPE, not its\n * surface.\n *\n * It used to set `border: 0` and hard-code its own rule colour, which discarded\n * whatever the variant had drawn: `outline`, `text` and `ghost` all collapsed\n * to one identical flush row, and the variant control silently stopped meaning\n * anything the moment `divider` was on.\n *\n * Now only the GEOMETRY changes here — the box's sides go, one edge stays — and\n * no `borderColor` is written, so the colour set by `cardSurfaceStyles` survives.\n * A variant that draws no border of its own gets the neutral rule from\n * {@link rowStyles}.\n */\nexport const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown> => {\n  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;\n  return {\n    position: \"relative\",\n    borderRadius: CARD_RADIUS,\n    display: \"grid\",\n    zoom: scale,\n    // SUBGRID AND `container-type` CANNOT COEXIST on one element: containment\n    // makes the box size independently of its parent, so the browser drops the\n    // subgrid and every slot stacks into one column. (Observed exactly that —\n    // computed `grid-template-columns: 1222px` on a card asking for subgrid.)\n    //\n    // So inside a group the GROUP is the query container and the row is the\n    // subgrid; standalone, the row is both the container and its own grid.\n    ...(inGroup\n      ? { gridColumn: `span ${railCount}`, gridTemplateColumns: \"subgrid\" }\n      : {\n          containerType: \"inline-size\",\n          gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns),\n        }),\n    alignItems: \"center\",\n    // Wide enough that the meta cluster, the value and the status read as three\n    // columns rather than one run of text — the complaint that started all this\n    // was `MÉTODO PIX R$ 13,90` scanning as a single phrase.\n    columnGap: RAIL_GAP,\n    width: \"100%\",\n    px: pad,\n    py: padY,\n    cursor: draggable ? \"grab\" : interactive ? \"pointer\" : undefined,\n    ...(draggable ? { touchAction: \"none\", \"&:active\": { cursor: \"grabbing\" } } : {}),\n    ...(interactive ? { \"&:hover\": { backgroundColor: \"action.hover\" } } : {}),\n    // A real focus ring, which a clickable <div> never had.\n    \"&:focus-visible\": {\n      outline: `${rem(theme, 2)} solid`,\n      outlineStyle: \"solid\",\n      outlineColor: \"primary.main\",\n      outlineOffset: rem(theme, 2),\n    },\n    // TWO-LINE, below the point where the shared rails stop helping.\n    //\n    // The standard mobile transaction row: what the record IS and what it COST\n    // on the first line, the supporting detail on the second. Better than\n    // truncating four columns into ellipses, and the reason each slot carries a\n    // `data-slot` — the placement is explicit rather than whatever order the\n    // children happen to be in.\n    //\n    //   [ select ][ leading ][ title …………… ][   menu ]\n    //                        [ (cells) …………… ][  value ]\n    //\n    // The MENU stays in the top-right corner at every width. It is the row's\n    // one fixed landmark — an overflow that moves to the second line on a phone\n    // is an overflow nobody finds twice.\n    [`@container (max-width: ${rem(theme, STACK_BREAK)})`]: {\n      gridTemplateColumns: \"auto auto minmax(0, 1fr) max-content\",\n      ...(inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {}),\n      rowGap: 0.75,\n      columnGap: 1,\n      '& > [data-slot=\"drag\"]': { display: \"none\" },\n      '& > [data-slot=\"select\"]': { gridArea: \"1 / 1\" },\n      '& > [data-slot=\"leading\"]': { gridArea: \"1 / 2\" },\n      '& > [data-slot=\"caption\"]': { gridArea: \"1 / 3\" },\n      '& > [data-slot=\"actions\"]': { gridArea: \"1 / 4\", justifyContent: \"flex-end\" },\n      '& > [data-slot=\"meta\"]': { display: \"none\" },\n      // Second line, starting under the title rather than under the checkbox.\n      '& > [data-slot=\"value\"]': { gridArea: \"2 / 4\", textAlign: \"right\" },\n    },\n    ...(divider\n      ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: \"solid\" }\n      : {}),\n  };\n};\n\n/**\n * A selectable full-width row: a marker, a title over a subtitle, labelled\n * middle columns, a value, a status, actions and a menu.\n *\n * A SHELL, like {@link BaseCard}. Domain rows live in the app and compose it.\n */\n/**\n * The id this row drags under, or nothing.\n *\n * `undefined` is the inert answer: `useDragItem` treats a missing id as \"no\n * drag\", which is how the card's own veto (`draggable={false}`) and an\n * unactionable record both switch dragging off without the card knowing\n * anything about the container above it.\n */\nfunction dragIdFor(\n  props: BaseListCardProps,\n  actionable: boolean,\n): string | number | undefined {\n  return props.draggable === false || !actionable ? undefined : props.dragId;\n}\n\n/**\n * What the meta cluster amounts to — asked once, used three times: to size the\n * rail, to close the cluster with a rule, and to decide whether the value has\n * anything to be divided FROM.\n */\nexport function metaShape(props: BaseListCardProps): { columns: number; present: boolean } {\n  const columns = props.meta?.length ?? 0;\n  return { columns, present: columns > 0 || props.metaSlot != null };\n}\n\n/**\n * Everything the row derives before it can render — extracted so the component\n * stays inside the size budget.\n */\nexport function useRowShell(props: BaseListCardProps) {\n  const actionable = isActionable(props.state);\n  const group = useListRails();\n  const scale = props.scale ?? 1;\n  return {\n    group,\n    actionable,\n    scale,\n    theme: useTheme(),\n    selectable: isSelectable(props),\n    slot: slotTestIds(props.testId),\n    drag: useDragItem(dragIdFor(props, actionable)),\n    // Standalone holds no gutter open: there is no list beside it to line up\n    // with, so a reserved-but-empty rail is pure inset.\n    reserve: group?.reserveGutters ?? false,\n    // 1, not 1.5. The row's contents still have to line up with the toolbar\n    // above them, but 12px of card padding stacked on the checkbox's own 9px\n    // and an empty drag gutter's 24px read as a row indented for no reason.\n    //\n    // Not multiplied by `scale` — the row's `zoom` already scales it, and doing\n    // both would square the factor on padding alone.\n    pad: 1,\n    padY: DENSITY_ROW_PADDING[group?.density ?? props.density ?? \"cozy\"],\n    // A card that navigates does so with a real anchor, so it takes no click\n    // handler of its own — the stretched link IS the target.\n    acts: props.onClick != null && props.href == null && actionable,\n  };\n}\n\n/** The click/keyboard props a row that acts (but does not navigate) needs. */\nexport function actionProps(onClick: (() => void) | undefined) {\n  return {\n    role: \"button\",\n    tabIndex: 0,\n    onClick: () => {\n      if (isTextSelection()) return;\n      onClick?.();\n    },\n    onKeyDown: clickKeys(() => onClick?.()),\n  };\n}\n\n/** The surface and the geometry, merged — the row's whole `sx` in one place. */\n\n/**\n * The row's painted surface, plus the divider's colour fallback.\n *\n * A variant with no border of its own (`text`, `ghost`) would draw its rule in\n * the inherited colour — the TEXT colour, i.e. a black bar across the row. The\n * neutral divider token is supplied only in that case; a variant that has a\n * border keeps it, which is the whole point of composing the two.\n */\nfunction rowSurface(\n  props: BaseListCardProps,\n  shell: ReturnType<typeof useRowShell>,\n): Record<string, unknown> {\n  const { theme, selectable, drag } = shell;\n  const surface = cardSurfaceStyles(\n    { ...props, selectable, shape: \"row\", state: drag.dragging ? \"disabled\" : props.state },\n    theme,\n  );\n  if (props.divider !== true || surface.borderColor != null) return surface;\n  return { ...surface, borderBottomColor: theme.palette.divider };\n}\n\nexport function rowStyles(\n  props: BaseListCardProps,\n  shell: ReturnType<typeof useRowShell>,\n  cellTemplate: string | null,\n): Record<string, unknown> {\n  const { theme, group, selectable, drag, reserve, pad, padY, scale, acts } = shell;\n  return {\n    ...rowSurface(props, shell),\n    ...rowSx(theme, {\n      inGroup: group !== null,\n      railCount: group?.railCount ?? RAIL_COUNT,\n      cellTemplate,\n      gutters: {\n        disclose: reserve || props.children != null,\n        drag: reserve || drag.draggable,\n        select: reserve || selectable,\n      },\n      metaColumns: metaShape(props).columns,\n      pad,\n      padY,\n      scale,\n      divider: props.divider ?? false,\n      interactive: acts || props.href != null,\n      draggable: drag.draggable && drag.handleProps === undefined,\n    }),\n  };\n}\n"],"mappings":"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","names":[]}