@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-MUFI3ZXS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/user-avatar/user-avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from 'react';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { Avatar } from '../components/data-display/Avatar';\nimport { Button } from '../components/form/Button';\nimport { Text } from '../components/typography/Text';\nimport { Card } from '../components/layout/Card';\nimport type { UserAvatarCopy } from '../copy';\n\n/**\n * Generate initials from a name\n */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) {\n    return parts[0]?.substring(0, 2).toUpperCase() ?? \"\";\n  }\n  return (\n    (parts[0]?.charAt(0) ?? \"\") + (parts[parts.length - 1]?.charAt(0) ?? \"\")\n  ).toUpperCase();\n}\n\nexport interface UserAvatarProps {\n  src?: string | null;\n  name?: string | null;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  onClick?: () => void;\n  interactive?: boolean;\n}\n\n/**\n * User avatar using UI package Avatar component\n */\nexport function UserAvatar({\n  src,\n  name,\n  size = 'md',\n  onClick,\n  interactive = false,\n}: UserAvatarProps): React.ReactElement {\n  const fallbackText = name ? getInitials(name) : \"?\";\n\n  return (\n    <Avatar\n      src={src ?? undefined}\n      alt={name ?? \"User avatar\"}\n      fallback={fallbackText}\n      size={size}\n      variant=\"circle\"\n      interactive={interactive || !!onClick}\n      onClick={onClick}\n    />\n  );\n}\n\nexport interface UserMenuProps {\n  user: {\n    name?: string | null;\n    email?: string | null;\n    image?: string | null;\n  };\n  onSignOut: () => void;\n  /**\n   * The card's one action. REQUIRED: this package ships no default copy, and\n   * the button is the only thing on this card a host does not already supply.\n   */\n  copy: UserAvatarCopy;\n}\n\n/**\n * User menu with avatar, info, and sign out button\n */\nexport function UserMenu({ user, onSignOut, copy }: UserMenuProps): React.ReactElement {\n  return (\n    <Card variant=\"elevated\" borderRadius=\"md\">\n      <Box sx={{ p: 2 }}>\n        <Stack direction=\"row\" spacing={2} alignItems=\"center\">\n          <UserAvatar\n            src={user.image}\n            name={user.name}\n            size=\"md\"\n          />\n\n          <Stack spacing={0.5} sx={{ flex: 1, minWidth: 0 }}>\n            <Text weight=\"semibold\" size=\"sm\">\n              {user.name ?? \"User\"}\n            </Text>\n            {user.email && (\n              <Text color=\"secondary\" size=\"xs\">\n                {user.email}\n              </Text>\n            )}\n          </Stack>\n\n          <Button\n            variant=\"outline\"\n            color=\"danger\"\n            size=\"sm\"\n            onClick={onSignOut}\n          >\n            {copy.signOut}\n          </Button>\n        </Stack>\n      </Box>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAGA,OAAO,SAAS;AAChB,OAAO,WAAW;AAyCd,cAwCM,YAxCN;AA/BJ,SAAS,YAAY,MAAsB;AACzC,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK;AACrC,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,YAAY,KAAK;AAAA,EACpD;AACA,WACG,MAAM,CAAC,GAAG,OAAO,CAAC,KAAK,OAAO,MAAM,MAAM,SAAS,CAAC,GAAG,OAAO,CAAC,KAAK,KACrE,YAAY;AAChB;AAaO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAChB,GAAwC;AACtC,QAAM,eAAe,OAAO,YAAY,IAAI,IAAI;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,OAAO;AAAA,MACZ,KAAK,QAAQ;AAAA,MACb,UAAU;AAAA,MACV;AAAA,MACA,SAAQ;AAAA,MACR,aAAa,eAAe,CAAC,CAAC;AAAA,MAC9B;AAAA;AAAA,EACF;AAEJ;AAmBO,SAAS,SAAS,EAAE,MAAM,WAAW,KAAK,GAAsC;AACrF,SACE,oBAAC,QAAK,SAAQ,YAAW,cAAa,MACpC,8BAAC,OAAI,IAAI,EAAE,GAAG,EAAE,GACd,+BAAC,SAAM,WAAU,OAAM,SAAS,GAAG,YAAW,UAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAM,KAAK;AAAA,QACX,MAAK;AAAA;AAAA,IACP;AAAA,IAEA,qBAAC,SAAM,SAAS,KAAK,IAAI,EAAE,MAAM,GAAG,UAAU,EAAE,GAC9C;AAAA,0BAAC,QAAK,QAAO,YAAW,MAAK,MAC1B,eAAK,QAAQ,QAChB;AAAA,MACC,KAAK,SACJ,oBAAC,QAAK,OAAM,aAAY,MAAK,MAC1B,eAAK,OACR;AAAA,OAEJ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAS;AAAA,QAER,eAAK;AAAA;AAAA,IACR;AAAA,KACF,GACF,GACF;AAEJ;","names":[]}

package/dist/chunk-MYOFULG4.js

@@ -0,0 +1,39 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Select
+} from "./chunk-Q6HJMJBH.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-VZO7VREP.js";
+
+// src/components/form/total-form/Fields/SelectField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectField({ name, options, label, placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        options,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, String(event.target.value))
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  SelectField
+};
+//# sourceMappingURL=chunk-MYOFULG4.js.map

package/dist/chunk-MYOFULG4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/total-form/Fields/SelectField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { Select } from '../../Select';\nimport type { SelectOption } from '../../Select';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link SelectField}. */\nexport interface SelectFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** Selectable options. */\n  options: SelectOption[];\n  /** Optional visible label rendered above the select. */\n  label?: string;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n}\n\n/**\n * Select field bound to {@link useFormContext}. Composes the existing\n * `@12-apps/ui` `Form*` primitives and the `Select` control, reading its\n * value/error from context and writing the chosen value back through it.\n *\n * Renders its error via `total-form-field-<name>-message` and the select via\n * `total-form-field-<name>`.\n */\nexport function SelectField({ name, options, label, placeholder }: SelectFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n  const testId = `total-form-field-${name}`;\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Select\n        options={options}\n        placeholder={placeholder}\n        value={values[name] ?? ''}\n        error={Boolean(error)}\n        data-testid={testId}\n        onChange={(event) => setFieldValue(name, String(event.target.value))}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCI,SAEI,KAFJ;AANG,SAAS,YAAY,EAAE,MAAM,SAAS,OAAO,YAAY,GAAyC;AACvG,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,SAAS,oBAAoB,IAAI;AAEvC,SACE,qBAAC,eAAY,WAAS,MACnB;AAAA,aACC,oBAAC,aAAU,SAAS,MAAM,OAAO,QAAQ,KAAK,GAC3C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,OAAO,QAAQ,KAAK;AAAA,QACpB,eAAa;AAAA,QACb,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,IACrE;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/chunk-N34YHFZW.js

@@ -0,0 +1,203 @@
+import {
+  AppHeaderBrand
+} from "./chunk-H37GIAAM.js";
+import {
+  accentFor
+} from "./chunk-I6PZVHIT.js";
+
+// src/components/navigation/AppHeader/AppHeader.identity.tsx
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Skeleton from "@mui/material/Skeleton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TITLE_PX = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };
+var ONE_LINE = {
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var AppHeaderStatus = ({
+  tone,
+  items,
+  separator = "\xB7",
+  className,
+  dataTestId = "app-header-status"
+}) => {
+  const theme = useTheme();
+  const visible = items.filter((item) => item !== null && item !== void 0 && item !== "");
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: { display: "flex", alignItems: "center", gap: 0.75, ...ONE_LINE },
+      children: [
+        tone && /* @__PURE__ */ jsx(
+          Box,
+          {
+            "aria-hidden": true,
+            "data-testid": `${dataTestId}-dot`,
+            sx: {
+              width: 8,
+              height: 8,
+              flex: "0 0 auto",
+              borderRadius: "50%",
+              backgroundColor: accentFor(theme, tone).main
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: visible.map((item, index) => (
+          // Index keys: the segments are positional presentation, and nothing
+          // here reorders or is keyed on identity elsewhere.
+          /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: separator }),
+              " "
+            ] }),
+            item
+          ] }, index)
+        )) })
+      ]
+    }
+  );
+};
+AppHeaderStatus.displayName = "AppHeaderStatus";
+var IdentityText = ({ title, subtitle, status, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "span",
+        "data-testid": `${dataTestId}-title`,
+        sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
+        children: title
+      }
+    ),
+    interactive && /* @__PURE__ */ jsx(
+      KeyboardArrowDown,
+      {
+        "aria-hidden": true,
+        "data-testid": `${dataTestId}-chevron`,
+        sx: {
+          flex: "0 0 auto",
+          fontSize: 20,
+          opacity: 0.7,
+          transition: "transform 150ms ease",
+          transform: disclosed ? "rotate(180deg)" : "none"
+        }
+      }
+    )
+  ] }),
+  subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
+  status
+] });
+var IdentitySkeleton = ({
+  size,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    "data-testid": `${dataTestId}-loading`,
+    sx: { display: "flex", alignItems: "center", gap: 1.25, minWidth: 0 },
+    children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 40, height: 40, sx: { flex: "0 0 auto" } }),
+      /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 140, height: TITLE_PX[size] * 1.4 }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 180, height: 16 })
+      ] })
+    ]
+  }
+);
+var rowSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1.25,
+  width: "100%",
+  minWidth: 0,
+  textAlign: "left"
+};
+var AppHeaderIdentity = ({
+  title,
+  subtitle,
+  status,
+  mark,
+  logoUrl,
+  seedColor,
+  onDisclose,
+  disclosed = false,
+  discloseLabel,
+  loading = false,
+  size = "md",
+  className,
+  dataTestId = "app-header-identity"
+}) => {
+  if (loading) return /* @__PURE__ */ jsx(IdentitySkeleton, { size, dataTestId });
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    mark ?? /* @__PURE__ */ jsx(
+      AppHeaderBrand,
+      {
+        name: title,
+        logoUrl,
+        seedColor,
+        size,
+        dataTestId: `${dataTestId}-brand`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IdentityText,
+      {
+        title,
+        subtitle,
+        status,
+        size,
+        interactive: Boolean(onDisclose),
+        disclosed,
+        dataTestId
+      }
+    )
+  ] });
+  if (!onDisclose) {
+    return /* @__PURE__ */ jsx(Box, { className, "data-testid": dataTestId, sx: rowSx, children: body });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      className,
+      "data-testid": dataTestId,
+      onClick: onDisclose,
+      "aria-haspopup": "dialog",
+      "aria-expanded": disclosed,
+      "aria-label": discloseLabel ?? `Detalhes de ${title}`,
+      sx: {
+        ...rowSx,
+        appearance: "none",
+        p: 0.5,
+        ml: -0.5,
+        border: "none",
+        borderRadius: 1.5,
+        background: "none",
+        color: "inherit",
+        font: "inherit",
+        cursor: "pointer",
+        "&:hover": { backgroundColor: "action.hover" },
+        "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
+      },
+      children: body
+    }
+  );
+};
+AppHeaderIdentity.displayName = "AppHeaderIdentity";
+
+export {
+  AppHeaderStatus,
+  AppHeaderIdentity
+};
+//# sourceMappingURL=chunk-N34YHFZW.js.map

package/dist/chunk-N34YHFZW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"sourcesContent":["'use client';\n\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { accentFor, type SizeValue } from '../../../tokens/scales';\n\nimport { AppHeaderBrand } from './AppHeader.brand';\nimport type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.types';\n\n/** Title type scale, per house size step. */\nconst TITLE_PX: Record<SizeValue, number> = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };\n\n/** One line, ellipsised — a long store name must not push the actions off-screen. */\nconst ONE_LINE = {\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The dotted state line: \"● Aberto agora · Retirada no balcão\".\n *\n * Segments are joined here rather than by the caller because the separator is a\n * presentational choice — a caller that pre-joins its own string can never be\n * restyled, and each segment loses the chance to carry its own markup.\n */\nexport const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({\n  tone,\n  items,\n  separator = '·',\n  className,\n  dataTestId = 'app-header-status',\n}) => {\n  const theme = useTheme();\n  const visible = items.filter((item) => item !== null && item !== undefined && item !== '');\n  if (visible.length === 0) return null;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ...ONE_LINE }}\n    >\n      {tone && (\n        <Box\n          aria-hidden\n          data-testid={`${dataTestId}-dot`}\n          sx={{\n            width: 8,\n            height: 8,\n            flex: '0 0 auto',\n            borderRadius: '50%',\n            backgroundColor: accentFor(theme, tone).main,\n          }}\n        />\n      )}\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {visible.map((item, index) => (\n          // Index keys: the segments are positional presentation, and nothing\n          // here reorders or is keyed on identity elsewhere.\n          <React.Fragment key={index}>\n            {index > 0 && (\n              <>\n                {/* Real spaces, not margin. A screen reader reads `textContent`,\n                    and a CSS-only gap runs \"Aberto agora\" straight into\n                    \"Retirada no balcão\" as one word. The glyph itself is\n                    hidden — it is punctuation, not something to announce. */}\n                {' '}\n                <Box component=\"span\" aria-hidden>\n                  {separator}\n                </Box>{' '}\n              </>\n            )}\n            {item}\n          </React.Fragment>\n        ))}\n      </Typography>\n    </Box>\n  );\n};\n\nAppHeaderStatus.displayName = 'AppHeaderStatus';\n\n/** Title + chevron + the quieter lines under them. */\nconst IdentityText: React.FC<\n  Pick<AppHeaderIdentityProps, 'title' | 'subtitle' | 'status' | 'size'> & {\n    interactive: boolean;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({ title, subtitle, status, size = 'md', interactive, disclosed, dataTestId }) => (\n  <Box sx={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0 }}>\n      <Typography\n        component=\"span\"\n        data-testid={`${dataTestId}-title`}\n        sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}\n      >\n        {title}\n      </Typography>\n      {interactive && (\n        <KeyboardArrowDown\n          aria-hidden\n          data-testid={`${dataTestId}-chevron`}\n          sx={{\n            flex: '0 0 auto',\n            fontSize: 20,\n            opacity: 0.7,\n            transition: 'transform 150ms ease',\n            transform: disclosed ? 'rotate(180deg)' : 'none',\n          }}\n        />\n      )}\n    </Box>\n    {subtitle && (\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {subtitle}\n      </Typography>\n    )}\n    {status}\n  </Box>\n);\n\n/** The placeholder held while the identity is still resolving. */\nconst IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({\n  size,\n  dataTestId,\n}) => (\n  <Box\n    data-testid={`${dataTestId}-loading`}\n    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}\n  >\n    <Skeleton variant=\"rounded\" width={40} height={40} sx={{ flex: '0 0 auto' }} />\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Skeleton variant=\"text\" width={140} height={TITLE_PX[size] * 1.4} />\n      <Skeleton variant=\"text\" width={180} height={16} />\n    </Box>\n  </Box>\n);\n\n/**\n * Row styling shared by the static and the button rendering.\n *\n * `width: '100%'` is load-bearing, not cosmetic. A `<button>` sizes to\n * max-content and — unlike the `div` the non-interactive path renders — does\n * not stretch to fill its block container, so without it the DISCLOSING\n * identity measured its widest possible line at every viewport: the row's\n * right edge stayed pinned at 564px while the bar narrowed, `ONE_LINE` never\n * had a constraint to ellipsise against, and the title and state line ran\n * straight under the actions — 327px of overlap at 320px wide. Filling the\n * wrapper is what lets `minWidth: 0` bite and the ellipsis engage.\n */\nconst rowSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1.25,\n  width: '100%',\n  minWidth: 0,\n  textAlign: 'left',\n} as const;\n\n/**\n * Mark + title + state line, and — when it can be opened — the whole block as\n * one button.\n *\n * The button wraps EVERYTHING rather than sitting next to the title, because on\n * a phone the chevron alone is a 20px target next to a 40px one that does\n * nothing. A shopper aiming at the store's name expects the store's details.\n */\nexport const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({\n  title,\n  subtitle,\n  status,\n  mark,\n  logoUrl,\n  seedColor,\n  onDisclose,\n  disclosed = false,\n  discloseLabel,\n  loading = false,\n  size = 'md',\n  className,\n  dataTestId = 'app-header-identity',\n}) => {\n  if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;\n\n  const body = (\n    <>\n      {mark ?? (\n        <AppHeaderBrand\n          name={title}\n          logoUrl={logoUrl}\n          seedColor={seedColor}\n          size={size}\n          dataTestId={`${dataTestId}-brand`}\n        />\n      )}\n      <IdentityText\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        size={size}\n        interactive={Boolean(onDisclose)}\n        disclosed={disclosed}\n        dataTestId={dataTestId}\n      />\n    </>\n  );\n\n  if (!onDisclose) {\n    return (\n      <Box className={className} data-testid={dataTestId} sx={rowSx}>\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      className={className}\n      data-testid={dataTestId}\n      onClick={onDisclose}\n      aria-haspopup=\"dialog\"\n      aria-expanded={disclosed}\n      aria-label={discloseLabel ?? `Detalhes de ${title}`}\n      sx={{\n        ...rowSx,\n        appearance: 'none',\n        p: 0.5,\n        ml: -0.5,\n        border: 'none',\n        borderRadius: 1.5,\n        background: 'none',\n        color: 'inherit',\n        font: 'inherit',\n        cursor: 'pointer',\n        '&:hover': { backgroundColor: 'action.hover' },\n        '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },\n      }}\n    >\n      {body}\n    </Box>\n  );\n};\n\nAppHeaderIdentity.displayName = 'AppHeaderIdentity';\n"],"mappings":"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","names":[]}

package/dist/chunk-N52O2OKZ.js

@@ -0,0 +1,80 @@
+// src/components/utility/AspectRatio/AspectRatio.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx } from "react/jsx-runtime";
+var AspectRatio = ({
+  children,
+  variant = "16:9",
+  ratio,
+  maxWidth,
+  maxHeight,
+  dataTestId,
+  sx,
+  ...props
+}) => {
+  const getAspectRatio = () => {
+    if (variant === "custom" && ratio) {
+      return ratio;
+    }
+    switch (variant) {
+      case "16:9":
+        return 16 / 9;
+      case "4:3":
+        return 4 / 3;
+      case "1:1":
+        return 1;
+      case "3:2":
+        return 3 / 2;
+      case "21:9":
+        return 21 / 9;
+      default:
+        return 16 / 9;
+    }
+  };
+  const aspectRatio = getAspectRatio();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId,
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth,
+        maxHeight,
+        ...sx
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            width: "100%",
+            paddingTop: `${1 / aspectRatio * 100}%`,
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden"
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+export {
+  AspectRatio
+};
+//# sourceMappingURL=chunk-N52O2OKZ.js.map

package/dist/chunk-N52O2OKZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport type { AspectRatioProps } from './AspectRatio.types';\n\nexport const AspectRatio: React.FC<AspectRatioProps> = ({\n  children,\n  variant = '16:9',\n  ratio,\n  maxWidth,\n  maxHeight,\n  dataTestId,\n  sx,\n  ...props\n}) => {\n  const getAspectRatio = () => {\n    if (variant === 'custom' && ratio) {\n      return ratio;\n    }\n\n    switch (variant) {\n      case '16:9':\n        return 16 / 9;\n      case '4:3':\n        return 4 / 3;\n      case '1:1':\n        return 1;\n      case '3:2':\n        return 3 / 2;\n      case '21:9':\n        return 21 / 9;\n      default:\n        return 16 / 9;\n    }\n  };\n\n  const aspectRatio = getAspectRatio();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      sx={{\n        position: 'relative',\n        width: '100%',\n        maxWidth,\n        maxHeight,\n        ...sx,\n      }}\n      {...props}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          paddingTop: `${(1 / aspectRatio) * 100}%`,\n          position: 'relative',\n        }}\n      >\n        <Box\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            overflow: 'hidden',\n          }}\n        >\n          {children}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":";AAAA,OAAO,SAAS;AAyDR;AApDD,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,MAAM;AAC3B,QAAI,YAAY,YAAY,OAAO;AACjC,aAAO;AAAA,IACT;AAEA,YAAQ,SAAS;AAAA,MACf,KAAK;AACH,eAAO,KAAK;AAAA,MACd,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO,KAAK;AAAA,MACd;AACE,eAAO,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,cAAc,eAAe;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,OAAO;AAAA,YACP,YAAY,GAAI,IAAI,cAAe,GAAG;AAAA,YACtC,UAAU;AAAA,UACZ;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,gBACF,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,UAAU;AAAA,cACZ;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-N5ZWC6CB.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-N5ZWC6CB.js.map

package/dist/chunk-N5ZWC6CB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-N7GE6BGM.js

@@ -0,0 +1,25 @@
+// src/components/feedback/Modal/Modal.transitions.tsx
+import Fade from "@mui/material/Fade/index.js";
+import Slide from "@mui/material/Slide/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var slideFrom = (direction, displayName) => {
+  const Transition = React.forwardRef(
+    ({ children, ...rest }, ref) => children ? /* @__PURE__ */ jsx(Slide, { direction, ref, ...rest, children }) : null
+  );
+  Transition.displayName = displayName;
+  return Transition;
+};
+var SlideDown = slideFrom("down", "SlideDown");
+var SlideUp = slideFrom("up", "SlideUp");
+var TRANSITIONS = {
+  top: SlideDown,
+  bottom: SlideUp
+};
+var transitionFor = (variant) => TRANSITIONS[variant] ?? Fade;
+
+export {
+  TRANSITIONS,
+  transitionFor
+};
+//# sourceMappingURL=chunk-N7GE6BGM.js.map

package/dist/chunk-N7GE6BGM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Modal/Modal.transitions.tsx"],"sourcesContent":["import Fade from '@mui/material/Fade/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport React from 'react';\n\nexport interface TransitionProps {\n  children?: React.ReactElement;\n  in?: boolean;\n  timeout?: number;\n}\n\n/**\n * A slide from one edge, as its own component type.\n *\n * These are built once at module scope rather than per render: a component\n * created inside a render is a new type on every pass, so React unmounts the\n * modal's whole subtree and remounts it — which also restarts the transition it\n * was in the middle of.\n */\nconst slideFrom = (direction: 'up' | 'down', displayName: string) => {\n  const Transition = React.forwardRef<HTMLElement, TransitionProps>(({ children, ...rest }, ref) =>\n    children ? (\n      <Slide direction={direction} ref={ref} {...rest}>\n        {children}\n      </Slide>\n    ) : null,\n  );\n  Transition.displayName = displayName;\n  return Transition;\n};\n\nconst SlideDown = slideFrom('down', 'SlideDown');\nconst SlideUp = slideFrom('up', 'SlideUp');\n\n/** A top modal drops in, a bottom one rises; the rest fade. */\nexport const TRANSITIONS: Record<string, React.ElementType> = {\n  top: SlideDown,\n  bottom: SlideUp,\n};\n\nexport const transitionFor = (variant: string): React.ElementType =>\n  TRANSITIONS[variant] ?? Fade;\n"],"mappings":";AAAA,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,OAAO,WAAW;AAmBZ;AAHN,IAAM,YAAY,CAAC,WAA0B,gBAAwB;AACnE,QAAM,aAAa,MAAM;AAAA,IAAyC,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,QACxF,WACE,oBAAC,SAAM,WAAsB,KAAW,GAAG,MACxC,UACH,IACE;AAAA,EACN;AACA,aAAW,cAAc;AACzB,SAAO;AACT;AAEA,IAAM,YAAY,UAAU,QAAQ,WAAW;AAC/C,IAAM,UAAU,UAAU,MAAM,SAAS;AAGlC,IAAM,cAAiD;AAAA,EAC5D,KAAK;AAAA,EACL,QAAQ;AACV;AAEO,IAAM,gBAAgB,CAAC,YAC5B,YAAY,OAAO,KAAK;","names":[]}

package/dist/chunk-N7SBWD2V.js

@@ -0,0 +1,182 @@
+import {
+  DiscloseSlot,
+  DragSlot,
+  SelectSlot
+} from "./chunk-UNF65XZW.js";
+import {
+  actionProps,
+  metaShape,
+  rowStyles,
+  useRowShell
+} from "./chunk-6UGRH32J.js";
+import {
+  ListCardActions,
+  ListCardCaption,
+  ListCardMeta,
+  ListCardTail
+} from "./chunk-Q5GXVDXL.js";
+import {
+  useDisclosure
+} from "./chunk-2JCRNWHE.js";
+import {
+  DropIndicator
+} from "./chunk-JCJGJX7V.js";
+import {
+  cellRailsTemplate
+} from "./chunk-T4JGNZAR.js";
+import {
+  ListCardCells,
+  cellTracks,
+  useCellConfig
+} from "./chunk-6VP2L3DJ.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Card
+} from "./chunk-D2IASECY.js";
+
+// src/components/data-display/DataViews/base-list-card.tsx
+import Collapse from "@mui/material/Collapse/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useResolvedCells(props, inGroup) {
+  const groupCells = useCellConfig();
+  const cells = groupCells ?? props.cells ?? null;
+  const configured = cells != null && cells.length > 0 && props.row != null;
+  const cellTemplate = configured && !inGroup ? cellRailsTemplate(cellTracks(cells)) : null;
+  return { cells, configured, cellTemplate };
+}
+function RowContent({
+  card,
+  cells,
+  configured,
+  slot,
+  actionable,
+  meta
+}) {
+  if (configured && cells != null) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ListCardCells, { cells, row: card.row }),
+      /* @__PURE__ */ jsx(
+        ListCardActions,
+        {
+          actions: actionable ? card.actions : void 0,
+          alwaysVisible: card.actionsAlwaysVisible,
+          menu: card.menu,
+          testId: slot
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ListCardCaption,
+      {
+        title: card.title,
+        subtitle: card.subtitle,
+        href: card.href,
+        target: card.target,
+        testId: slot("title")
+      }
+    ),
+    /* @__PURE__ */ jsx(ListCardMeta, { meta: card.meta, metaSlot: card.metaSlot, trailingRule: card.value != null }),
+    /* @__PURE__ */ jsx(
+      ListCardTail,
+      {
+        value: card.value,
+        separated: meta.present,
+        actions: actionable ? card.actions : void 0,
+        actionsAlwaysVisible: card.actionsAlwaysVisible,
+        menu: card.menu,
+        testId: slot
+      }
+    )
+  ] });
+}
+function ExpandableBody({
+  disclosure,
+  padY,
+  pad,
+  children
+}) {
+  if (!disclosure.expandable) return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(default2, { sx: { gridColumn: "1 / -1", minWidth: 0 }, children: /* @__PURE__ */ jsx(Collapse, { in: disclosure.expanded, timeout: 150, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      id: disclosure.regionId,
+      role: "region",
+      sx: {
+        minWidth: 0,
+        // `padY`, not a fraction of the horizontal padding. The card's own
+        // `py` wraps the summary AND the body, so once the body is in flow
+        // the summary has no bottom padding of its own — at `comfortable`
+        // the row visibly lost the height it had while closed.
+        mt: padY,
+        pt: padY,
+        // A RULE BETWEEN SUMMARY AND BODY, bled through the row's horizontal
+        // padding so it spans the card edge to edge. Inset, it reads as a
+        // border around the content rather than a division of the card.
+        borderTop: 1,
+        borderColor: "divider",
+        mx: -pad,
+        px: pad
+      },
+      children
+    }
+  ) }) });
+}
+function BaseListCard(props) {
+  const { selected = false, onClick } = props;
+  const shell = useRowShell(props);
+  const { actionable, selectable, slot, drag, reserve, pad, padY, acts } = shell;
+  const meta = metaShape(props);
+  const disclosure = useDisclosure(props);
+  const { cells, configured, cellTemplate } = useResolvedCells(props, shell.group != null);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      className: props.className,
+      dataTestId: props.testId,
+      "aria-label": props["aria-label"],
+      "aria-disabled": actionable ? void 0 : true,
+      onContextMenu: props.onContextMenu,
+      ...acts ? actionProps(onClick) : {},
+      ...drag.itemProps,
+      sx: rowStyles(props, shell, cellTemplate),
+      children: [
+        drag.dropEdge != null && /* @__PURE__ */ jsx(DropIndicator, { edge: drag.dropEdge }),
+        /* @__PURE__ */ jsx(
+          DiscloseSlot,
+          {
+            expandable: disclosure.expandable,
+            expanded: disclosure.expanded,
+            reserve,
+            onToggle: disclosure.toggle,
+            controls: disclosure.regionId,
+            testId: slot("disclose")
+          }
+        ),
+        /* @__PURE__ */ jsx(DragSlot, { drag, reserve, testId: slot("drag") }),
+        /* @__PURE__ */ jsx(
+          SelectSlot,
+          {
+            selectable,
+            selected,
+            reserve,
+            onToggleSelect: props.onToggleSelect,
+            testId: slot("checkbox")
+          }
+        ),
+        /* @__PURE__ */ jsx(default2, { "data-slot": "leading", sx: { display: "flex", alignItems: "center" }, children: props.leading }),
+        /* @__PURE__ */ jsx(RowContent, { card: props, cells, configured, slot, actionable, meta }),
+        /* @__PURE__ */ jsx(ExpandableBody, { disclosure, padY, pad, children: props.children })
+      ]
+    }
+  );
+}
+
+export {
+  BaseListCard
+};
+//# sourceMappingURL=chunk-N7SBWD2V.js.map

package/dist/chunk-N7SBWD2V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Collapse from \"@mui/material/Collapse/index.js\";\nimport { type ReactNode } from \"react\";\n\nimport { Card } from \"../../layout/Card\";\nimport type { DescriptionItemProps } from \"../DescriptionItem\";\nimport { Box } from \"../../../mui/Box\";\n\nimport { type CardSurfaceProps } from \"./card-surface\";\nimport { DropIndicator } from \"./data-views-drag\";\nimport { useDisclosure } from \"./base-list-card-disclosure\";\nimport { actionProps, metaShape, rowStyles, useRowShell } from \"./base-list-card-geometry\";\nimport { DiscloseSlot, DragSlot, SelectSlot } from \"./base-list-card-gutters\";\nimport { type DataViewsDensity } from \"./data-views-layout-context\";\nimport { cellRailsTemplate } from \"./list-card-rails\";\nimport { ListCardCells, cellTracks, useCellConfig, type ListCardCellConfig } from \"./list-card-cells\";\nimport {\n  ListCardActions,\n  ListCardCaption,\n  ListCardMeta,\n  ListCardTail,\n} from \"./base-list-card-slots\";\n\n/**\n * THE \"LISTA\" LAYOUT'S CARD — {@link BaseCard}'s horizontal sibling.\n *\n * `ListBody` always described the shape it wanted (\"a marker, a title, a\n * subtitle and a value on the right\") and never provided it, so every host\n * hand-rolled a `<Box>` flex row: a tint for selection with no checkbox, fixed\n * `minWidth` columns that ignored density and never collapsed, no hover, no\n * focus ring, and a `borderBottom` fighting the gap between rows.\n *\n * THE LIST OWNS THE COLUMNS. Inside a {@link ListCardGroup} this card is\n * `grid-template-columns: subgrid` across the group's rails, so the value sits\n * on its own edge and cannot be shunted about by the width of the status chip\n * beside it. Standalone it falls back to the same template on its own. See\n * `list-card-rails`.\n *\n * IT ANSWERS ITS OWN WIDTH, not the viewport — a container query, because the\n * same row renders full-bleed on a phone, in a 300px board column, and beside a\n * filter panel that opens and closes. Below `STACK_BREAK` it leaves the shared\n * rails entirely and goes two-line, which is the standard mobile transaction\n * row and beats truncating everything: title + value, then subtitle + status.\n */\n\nexport interface BaseListCardProps extends CardSurfaceProps {\n  /** A marker: avatar, thumbnail or status glyph. Earn the pixels — a generic\n   *  icon repeated down fifty rows is noise. */\n  leading?: ReactNode;\n  /** First-class title. Rendered as the link when `href` is set. */\n  title?: ReactNode;\n  /** Secondary line under the title. */\n  subtitle?: ReactNode;\n  /**\n   * Middle columns as labelled pairs — {@link DescriptionItem}s, not free-form\n   * nodes, so a screen reader reads \"Data, 05/08/2026\" rather than four\n   * unrelated strings. Stacked (label above value) by default.\n   *\n   * The FIRST rung of the collapse ladder: the only slot whose absence does not\n   * stop the row being identified or acted on.\n   */\n  meta?: DescriptionItemProps[];\n  /** Escape hatch for a middle section these pairs cannot express. */\n  metaSlot?: ReactNode;\n  /** The number this row is about. Its own rail, tabular figures, never truncated. */\n  value?: ReactNode;\n  /**\n   * Inline actions — the one or two things done often enough to deserve a\n   * button. Revealed on hover and `:focus-within` by default, so fifty rows of\n   * buttons are not the resting state of the page.\n   */\n  actions?: ReactNode;\n  /** Always show the inline actions, rather than on hover/focus. */\n  actionsAlwaysVisible?: boolean;\n  /** The 3-dots overflow menu, pinned to the end. Also opens on right-click. */\n  menu?: ReactNode;\n  /** What opens the overflow menu on right-click / long-press. */\n  onContextMenu?: (event: React.MouseEvent) => void;\n  /**\n   * THE EXPANDABLE BODY — and the whole reason this is a card and not a table\n   * row.\n   *\n   * A summary row of labelled columns is a table row with a border round it: it\n   * restates what the table already says and gives nobody a reason to switch to\n   * it. What a card can do that a table cell cannot is OPEN — carry the record's\n   * own detail underneath its summary, in whatever shape that record wants.\n   *\n   * So this container makes no claim about what goes in here. It spans every\n   * rail and imposes nothing: an order puts its line items and a totals ledger\n   * here, a cart adds its recovery actions, a role lists its permissions. The\n   * design of that area belongs entirely to the consumer, and none of it is the\n   * envelope's business.\n   *\n   * ABSENT ⇒ NO CHEVRON. A row given nothing to reveal renders no disclosure\n   * control at all, rather than one that opens onto an empty box, so a column of\n   * chevrons is a truthful index of which rows have more behind them.\n   */\n  children?: ReactNode;\n  /** Open on first render, for an uncontrolled card. Ignored when `expanded` is set. */\n  defaultExpanded?: boolean;\n  /**\n   * Open state, when the LIST wants to own it.\n   *\n   * Left unset the card keeps its own, and rows open independently — several at\n   * once, which is what comparing two records requires. Pass this (with\n   * `onExpandedChange`) to impose something else, an accordion being the usual\n   * reason.\n   */\n  expanded?: boolean;\n  /** Fired with the state the card is asking to move to. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Toggle this row's selection. Receives the raw event so a list can range-select. */\n  onToggleSelect?: (event?: React.MouseEvent) => void;\n  /** How much air the row gets. Vertical only — a full-width row cannot narrow. */\n  density?: DataViewsDensity;\n  /**\n   * Fine-grained size multiplier on top of `density` (1 = base).\n   *\n   * Applied as `zoom`, so it scales EVERYTHING the row draws — type, gutters,\n   * gaps, padding, the checkbox, the grip, the chip and the menu — not just the\n   * handful of font sizes it once multiplied.\n   */\n  scale?: number;\n  /** Flush style: a bottom rule instead of an outline. Row-only. */\n  divider?: boolean;\n  /** This row's id for drag purposes. Inert outside a `DragContainerProvider`. */\n  dragId?: string | number;\n  /**\n   * The record this row is about, read by the list's cell config.\n   *\n   * Required only when cells are configured — the config's `primary`/`secondary`\n   * are functions of the row, so without one there is nothing to render them\n   * from and the card falls back to its named slots.\n   */\n  row?: Record<string, unknown>;\n  /**\n   * A cell config for a STANDALONE card.\n   *\n   * Inside a `ListCardGroup` the list's config wins and this is ignored: one\n   * declaration of the list's shape is the whole point, and a row permitted to\n   * override it could put its columns somewhere no other row has them.\n   */\n  cells?: readonly ListCardCellConfig<never>[];\n}\n\n\n\n\n/**\n * Which cell config applies, and whether this row resolves its own tracks.\n *\n * The list's config wins over the card's: one declaration of the list's shape is\n * the point, so a row inside a group cannot introduce a column of its own. And\n * the template is standalone-only — inside a group the GROUP owns it and the row\n * is subgrid over it, because a row resolving its own tracks is exactly what\n * stops a list from lining up.\n */\nfunction useResolvedCells(\n  props: BaseListCardProps,\n  inGroup: boolean,\n): {\n  cells: readonly ListCardCellConfig<never>[] | null;\n  configured: boolean;\n  cellTemplate: string | null;\n} {\n  const groupCells = useCellConfig();\n  const cells = groupCells ?? props.cells ?? null;\n  const configured = cells != null && cells.length > 0 && props.row != null;\n  const cellTemplate = configured && !inGroup ? cellRailsTemplate(cellTracks(cells)) : null;\n  return { cells, configured, cellTemplate };\n}\n\n\n/**\n * The row's middle: either the list's configured cells, or the named slots.\n *\n * Split out because the branch is the only conditional shape the card has, and\n * inlined it pushed `BaseListCard` past both the line and the complexity gate.\n */\nfunction RowContent({\n  card,\n  cells,\n  configured,\n  slot,\n  actionable,\n  meta,\n}: {\n  card: BaseListCardProps;\n  cells: readonly ListCardCellConfig<never>[] | null;\n  configured: boolean;\n  slot: (name: string) => string | undefined;\n  actionable: boolean;\n  meta: { columns: number; present: boolean };\n}): React.JSX.Element {\n  if (configured && cells != null) {\n    return (\n      <>\n        {/* The list's columns, rendered from this row. */}\n        <ListCardCells cells={cells} row={card.row as never} />\n        {/* THE MENU IS NOT PART OF THE CONFIG and never optional: it is where a\n          * row's actions live, and a list that folded it into a cell would have\n          * nowhere left to put them. So it brackets the cells on its own rail,\n          * exactly as the gutters do at the other end. */}\n        <ListCardActions\n          actions={actionable ? card.actions : undefined}\n          alwaysVisible={card.actionsAlwaysVisible}\n          menu={card.menu}\n          testId={slot}\n        />\n      </>\n    );\n  }\n  return (\n    <>\n      <ListCardCaption\n        title={card.title}\n        subtitle={card.subtitle}\n        href={card.href}\n        target={card.target}\n        testId={slot(\"title\")}\n      />\n      <ListCardMeta meta={card.meta} metaSlot={card.metaSlot} trailingRule={card.value != null} />\n      <ListCardTail\n        value={card.value}\n        separated={meta.present}\n        actions={actionable ? card.actions : undefined}\n        actionsAlwaysVisible={card.actionsAlwaysVisible}\n        menu={card.menu}\n        testId={slot}\n      />\n    </>\n  );\n}\n\n/**\n * The revealed body, and the rule that separates it from the summary.\n *\n * `gridColumn: 1 / -1` so it spans every rail: the summary's columns are the\n * LIST's, and nothing about them should constrain a detail area whose design\n * belongs to the consumer.\n *\n * Collapse rather than an unmount, so the body animates open and keeps its own\n * state between peeks — a consumer putting a form or a scrolled table in here\n * would otherwise have it reset on every toggle. `unmountOnExit` is deliberately\n * NOT set: fifty closed rows pay for fifty hidden subtrees, which is the trade\n * taken because the alternative re-runs every consumer's effects per toggle.\n */\nfunction ExpandableBody({\n  disclosure,\n  padY,\n  pad,\n  children,\n}: {\n  disclosure: { expandable: boolean; expanded: boolean; regionId: string };\n  padY: number;\n  pad: number;\n  children: ReactNode;\n}): React.JSX.Element {\n  if (!disclosure.expandable) return <></>;\n  return (\n    <Box sx={{ gridColumn: \"1 / -1\", minWidth: 0 }}>\n      <Collapse in={disclosure.expanded} timeout={150}>\n        <Box\n          id={disclosure.regionId}\n          role=\"region\"\n          sx={{\n            minWidth: 0,\n            // `padY`, not a fraction of the horizontal padding. The card's own\n            // `py` wraps the summary AND the body, so once the body is in flow\n            // the summary has no bottom padding of its own — at `comfortable`\n            // the row visibly lost the height it had while closed.\n            mt: padY,\n            pt: padY,\n            // A RULE BETWEEN SUMMARY AND BODY, bled through the row's horizontal\n            // padding so it spans the card edge to edge. Inset, it reads as a\n            // border around the content rather than a division of the card.\n            borderTop: 1,\n            borderColor: \"divider\",\n            mx: -pad,\n            px: pad,\n          }}\n        >\n          {children}\n        </Box>\n      </Collapse>\n    </Box>\n  );\n}\n\nexport function BaseListCard(props: BaseListCardProps): React.JSX.Element {\n  const { selected = false, onClick } = props;\n  const shell = useRowShell(props);\n  const { actionable, selectable, slot, drag, reserve, pad, padY, acts } = shell;\n  const meta = metaShape(props);\n  const disclosure = useDisclosure(props);\n  const { cells, configured, cellTemplate } = useResolvedCells(props, shell.group != null);\n\n  return (\n    <Card\n      variant=\"outlined\"\n      className={props.className}\n      dataTestId={props.testId}\n      aria-label={props[\"aria-label\"]}\n      aria-disabled={actionable ? undefined : true}\n      onContextMenu={props.onContextMenu}\n      {...(acts ? actionProps(onClick) : {})}\n      {...drag.itemProps}\n      // A PLAIN OBJECT: `Card` merges by spreading, so a function sx vanishes.\n      sx={rowStyles(props, shell, cellTemplate)}\n    >\n      {drag.dropEdge != null && <DropIndicator edge={drag.dropEdge} />}\n      <DiscloseSlot\n        expandable={disclosure.expandable}\n        expanded={disclosure.expanded}\n        reserve={reserve}\n        onToggle={disclosure.toggle}\n        controls={disclosure.regionId}\n        testId={slot(\"disclose\")}\n      />\n      <DragSlot drag={drag} reserve={reserve} testId={slot(\"drag\")} />\n      <SelectSlot\n        selectable={selectable}\n        selected={selected}\n        reserve={reserve}\n        onToggleSelect={props.onToggleSelect}\n        testId={slot(\"checkbox\")}\n      />\n      <Box data-slot=\"leading\" sx={{ display: \"flex\", alignItems: \"center\" }}>\n        {props.leading}\n      </Box>\n      <RowContent card={props} cells={cells} configured={configured} slot={slot} actionable={actionable} meta={meta} />\n      <ExpandableBody disclosure={disclosure} padY={padY} pad={pad}>\n        {props.children}\n      </ExpandableBody>\n    </Card>\n  );\n}\n\nexport { META_BREAK, STACK_BREAK } from \"./base-list-card-slots\";\n"],"mappings":"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","names":["default"]}