@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-HKROKM3Z.js

@@ -0,0 +1,247 @@
+import {
+  buttonRadioSx,
+  formLabelSx,
+  radioCardSx,
+  segmentButtonSx,
+  segmentContainerSx
+} from "./chunk-SQAU5QUY.js";
+
+// src/components/form/RadioGroup/RadioGroup.variants.tsx
+import Box from "@mui/material/Box/index.js";
+import ButtonBase from "@mui/material/ButtonBase/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import FormLabel from "@mui/material/FormLabel/index.js";
+import Radio from "@mui/material/Radio/index.js";
+import MuiRadioGroup from "@mui/material/RadioGroup/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledFormLabel = styled(FormLabel, {
+  shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
+})(({ theme, glass, error }) => ({
+  ...formLabelSx(theme, glass, error)
+}));
+var StyledRadioCard = styled(Card, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "glow", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...radioCardSx(theme, flags) }));
+var StyledButtonRadio = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...buttonRadioSx(theme, flags) }));
+var StyledSegmentContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["glass", "customColor"].includes(prop)
+})(({ theme, glass, customColor }) => ({
+  ...segmentContainerSx(theme, glass, customColor)
+}));
+var StyledSegmentButton = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "customSize", "animated"].includes(prop)
+})(({ theme, ...flags }) => ({ ...segmentButtonSx(theme, flags) }));
+var testId = (base, suffix) => base ? `${base}-${suffix}` : void 0;
+var muiRadioColor = (color) => color === "danger" ? "error" : color;
+var OptionLabel = ({
+  option,
+  testIdValue
+}) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, "data-testid": testIdValue, children: [
+  option.icon,
+  option.label
+] });
+var DefaultRadios = ({
+  options,
+  value,
+  color,
+  direction,
+  showDescriptions,
+  dataTestId,
+  groupRef,
+  onChange,
+  rest
+}) => /* @__PURE__ */ jsx(
+  MuiRadioGroup,
+  {
+    ref: groupRef,
+    value,
+    onChange,
+    ...rest,
+    sx: { flexDirection: direction, gap: 1 },
+    "data-testid": testId(dataTestId, "group"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        value: option.value,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `option-${index}`),
+        control: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            color: muiRadioColor(color),
+            "data-testid": testId(dataTestId, `radio-${index}`)
+          }
+        ),
+        label: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: { display: "flex", alignItems: "center", gap: 1 },
+            "data-testid": testId(dataTestId, `label-${index}`),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { children: option.label }),
+                option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description })
+              ] })
+            ]
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var CardBody = ({
+  option,
+  index,
+  isSelected,
+  color,
+  showDescriptions,
+  dataTestId
+}) => /* @__PURE__ */ jsx(CardContent, { sx: { p: 2, "&:last-child": { pb: 2 } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 2 }, children: [
+  option.icon && /* @__PURE__ */ jsx(Box, { sx: { mt: 0.5, color: isSelected ? `${color}.main` : "text.secondary" }, children: option.icon }),
+  /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "subtitle1",
+        fontWeight: 600,
+        color: isSelected ? `${color}.main` : "text.primary",
+        "data-testid": testId(dataTestId, `label-${index}`),
+        children: option.label
+      }
+    ),
+    option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: option.description })
+  ] })
+] }) });
+var CardRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  showDescriptions,
+  glass,
+  gradient,
+  glow,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 2 },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledRadioCard,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        glow,
+        customSize: size,
+        animated: true,
+        "data-testid": testId(dataTestId, `card-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(
+          CardBody,
+          {
+            option,
+            index,
+            isSelected: value === option.value,
+            color,
+            showDescriptions,
+            dataTestId
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var ButtonRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  glass,
+  gradient,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 1, flexWrap: "wrap" },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledButtonRadio,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `button-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var SegmentRadios = ({
+  options,
+  value,
+  color,
+  size,
+  glass,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  StyledSegmentContainer,
+  {
+    glass,
+    customColor: color,
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledSegmentButton,
+      {
+        selected: value === option.value,
+        customColor: color,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `segment-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var GroupLabel = ({ glass, error, dataTestId, children }) => /* @__PURE__ */ jsx(StyledFormLabel, { glass, error, "data-testid": testId(dataTestId, "label"), children });
+
+export {
+  testId,
+  OptionLabel,
+  DefaultRadios,
+  CardBody,
+  CardRadios,
+  ButtonRadios,
+  SegmentRadios,
+  GroupLabel
+};
+//# sourceMappingURL=chunk-HKROKM3Z.js.map

package/dist/chunk-HKROKM3Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RadioGroup/RadioGroup.variants.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport ButtonBase from '@mui/material/ButtonBase/index.js';\nimport Card from '@mui/material/Card/index.js';\nimport CardContent from '@mui/material/CardContent/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormLabel from '@mui/material/FormLabel/index.js';\nimport Radio from '@mui/material/Radio/index.js';\nimport MuiRadioGroup from '@mui/material/RadioGroup/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  buttonRadioSx,\n  formLabelSx,\n  radioCardSx,\n  segmentButtonSx,\n  segmentContainerSx,\n} from './RadioGroup.styles';\nimport type { SurfaceFlags } from './RadioGroup.styles';\nimport type { RadioOption, RadioGroupProps } from './RadioGroup.types';\n\nconst StyledFormLabel = styled(FormLabel, {\n  shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string),\n})<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n  ...formLabelSx(theme, glass, error),\n}));\n\nconst StyledRadioCard = styled(Card, {\n  shouldForwardProp: (prop) =>\n    !['selected', 'customColor', 'glass', 'gradient', 'glow', 'customSize', 'animated'].includes(\n      prop as string,\n    ),\n})<SurfaceFlags>(({ theme, ...flags }) => ({ ...radioCardSx(theme, flags) }));\n\nconst StyledButtonRadio = styled(ButtonBase, {\n  shouldForwardProp: (prop) =>\n    !['selected', 'customColor', 'glass', 'gradient', 'customSize', 'animated'].includes(\n      prop as string,\n    ),\n})<SurfaceFlags>(({ theme, ...flags }) => ({ ...buttonRadioSx(theme, flags) }));\n\nconst StyledSegmentContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['glass', 'customColor'].includes(prop as string),\n})<{ glass?: boolean; customColor?: string }>(({ theme, glass, customColor }) => ({\n  ...segmentContainerSx(theme, glass, customColor),\n}));\n\nconst StyledSegmentButton = styled(ButtonBase, {\n  shouldForwardProp: (prop) =>\n    !['selected', 'customColor', 'customSize', 'animated'].includes(prop as string),\n})<SurfaceFlags>(({ theme, ...flags }) => ({ ...segmentButtonSx(theme, flags) }));\n\n\nexport interface VariantProps {\n  options: RadioOption[];\n  value?: unknown;\n  color: NonNullable<RadioGroupProps['color']>;\n  size: NonNullable<RadioGroupProps['size']>;\n  direction: NonNullable<RadioGroupProps['direction']>;\n  showDescriptions: boolean;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  dataTestId?: string;\n  onSelect: (option: RadioOption) => void;\n  /** Only the default variant hands its ref and extra props to MUI's group. */\n  groupRef?: React.Ref<HTMLDivElement>;\n  onChange?: RadioGroupProps['onChange'];\n  rest?: Record<string, unknown>;\n}\n\n/** `${dataTestId}-${suffix}`, or nothing when the caller supplied no id. */\nexport const testId = (base: string | undefined, suffix: string) =>\n  base ? `${base}-${suffix}` : undefined;\n\n/**\n * MUI's Radio has no `danger`; this component's palette calls the error colour\n * that, so the name is translated at the boundary.\n */\nconst muiRadioColor = (color: string) =>\n  color === 'danger'\n    ? 'error'\n    : (color as 'primary' | 'secondary' | 'success' | 'warning' | 'error');\n\n/** An option's icon beside its label, the run every variant but `cards` uses. */\nconst OptionLabel: React.FC<{ option: RadioOption; testIdValue?: string }> = ({\n  option,\n  testIdValue,\n}) => (\n  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }} data-testid={testIdValue}>\n    {option.icon}\n    {option.label}\n  </Box>\n);\n\nexport const DefaultRadios: React.FC<VariantProps> = ({\n  options,\n  value,\n  color,\n  direction,\n  showDescriptions,\n  dataTestId,\n  groupRef,\n  onChange,\n  rest,\n}) => (\n  <MuiRadioGroup\n    ref={groupRef}\n    value={value}\n    onChange={onChange}\n    {...rest}\n    sx={{ flexDirection: direction, gap: 1 }}\n    data-testid={testId(dataTestId, 'group')}\n  >\n    {options.map((option, index) => (\n      <FormControlLabel\n        key={option.value}\n        value={option.value}\n        disabled={option.disabled}\n        data-testid={testId(dataTestId, `option-${index}`)}\n        control={\n          <Radio\n            color={muiRadioColor(color)}\n            data-testid={testId(dataTestId, `radio-${index}`)}\n          />\n        }\n        label={\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}\n            data-testid={testId(dataTestId, `label-${index}`)}\n          >\n            {option.icon}\n            <Box>\n              <Typography>{option.label}</Typography>\n              {option.description && showDescriptions && (\n                <Typography variant=\"caption\" color=\"text.secondary\">\n                  {option.description}\n                </Typography>\n              )}\n            </Box>\n          </Box>\n        }\n      />\n    ))}\n  </MuiRadioGroup>\n);\n\nexport interface CardBodyProps {\n  option: RadioOption;\n  index: number;\n  isSelected: boolean;\n  color: string;\n  showDescriptions: boolean;\n  dataTestId?: string;\n}\n\n/** A card's contents: the icon, the label, and the optional description under it. */\nexport const CardBody: React.FC<CardBodyProps> = ({\n  option,\n  index,\n  isSelected,\n  color,\n  showDescriptions,\n  dataTestId,\n}) => (\n  <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>\n    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>\n      {option.icon && (\n        <Box sx={{ mt: 0.5, color: isSelected ? `${color}.main` : 'text.secondary' }}>\n          {option.icon}\n        </Box>\n      )}\n      <Box sx={{ flex: 1 }}>\n        <Typography\n          variant=\"subtitle1\"\n          fontWeight={600}\n          color={isSelected ? `${color}.main` : 'text.primary'}\n          data-testid={testId(dataTestId, `label-${index}`)}\n        >\n          {option.label}\n        </Typography>\n        {option.description && showDescriptions && (\n          <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n            {option.description}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  </CardContent>\n);\n\nexport { OptionLabel };\n\nexport const CardRadios: React.FC<VariantProps> = ({\n  options, value, color, size, direction, showDescriptions, glass, gradient, glow, dataTestId, onSelect,\n}) => (\n  <Box\n    sx={{ display: 'flex', flexDirection: direction, gap: 2 }}\n    data-testid={testId(dataTestId, 'container')}\n  >\n    {options.map((option, index) => (\n      <StyledRadioCard\n        key={option.value}\n        selected={value === option.value}\n        customColor={color}\n        glass={glass}\n        gradient={gradient}\n        glow={glow}\n        customSize={size}\n        animated\n        data-testid={testId(dataTestId, `card-${index}`)}\n        onClick={() => onSelect(option)}\n      >\n        <CardBody\n          option={option}\n          index={index}\n          isSelected={value === option.value}\n          color={color}\n          showDescriptions={showDescriptions}\n          dataTestId={dataTestId}\n        />\n      </StyledRadioCard>\n    ))}\n  </Box>\n);\n\nexport const ButtonRadios: React.FC<VariantProps> = ({\n  options, value, color, size, direction, glass, gradient, dataTestId, onSelect,\n}) => (\n  <Box\n    sx={{ display: 'flex', flexDirection: direction, gap: 1, flexWrap: 'wrap' }}\n    data-testid={testId(dataTestId, 'container')}\n  >\n    {options.map((option, index) => (\n      <StyledButtonRadio\n        key={option.value}\n        selected={value === option.value}\n        customColor={color}\n        glass={glass}\n        gradient={gradient}\n        customSize={size}\n        animated\n        disabled={option.disabled}\n        data-testid={testId(dataTestId, `button-${index}`)}\n        onClick={() => onSelect(option)}\n      >\n        <OptionLabel option={option} testIdValue={testId(dataTestId, `label-${index}`)} />\n      </StyledButtonRadio>\n    ))}\n  </Box>\n);\n\nexport const SegmentRadios: React.FC<VariantProps> = ({\n  options, value, color, size, glass, dataTestId, onSelect,\n}) => (\n  <StyledSegmentContainer\n    glass={glass}\n    customColor={color}\n    data-testid={testId(dataTestId, 'container')}\n  >\n    {options.map((option, index) => (\n      <StyledSegmentButton\n        key={option.value}\n        selected={value === option.value}\n        customColor={color}\n        customSize={size}\n        animated\n        disabled={option.disabled}\n        data-testid={testId(dataTestId, `segment-${index}`)}\n        onClick={() => onSelect(option)}\n      >\n        <OptionLabel option={option} testIdValue={testId(dataTestId, `label-${index}`)} />\n      </StyledSegmentButton>\n    ))}\n  </StyledSegmentContainer>\n);\n\n/** The group's own label, which can carry the glass treatment independently. */\nexport const GroupLabel: React.FC<{\n  glass?: boolean;\n  error?: boolean;\n  dataTestId?: string;\n  children: React.ReactNode;\n}> = ({ glass, error, dataTestId, children }) => (\n  <StyledFormLabel glass={glass} error={error} data-testid={testId(dataTestId, 'label')}>\n    {children}\n  </StyledFormLabel>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-HQJ75HHI.js

@@ -0,0 +1,51 @@
+import {
+  headingSx
+} from "./chunk-QCIWROKG.js";
+
+// src/components/typography/Heading/Heading.tsx
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var styledHeading = () => styled("h1", {
+  shouldForwardProp: (prop) => !["customSize", "customColor", "customWeight", "gradient"].includes(prop)
+})(({ theme, ...flags }) => ({ ...headingSx(theme, flags) }));
+var STYLED_BY_TAG = {
+  h1: styledHeading().withComponent("h1"),
+  h2: styledHeading().withComponent("h2"),
+  h3: styledHeading().withComponent("h3"),
+  h4: styledHeading().withComponent("h4"),
+  h5: styledHeading().withComponent("h5"),
+  h6: styledHeading().withComponent("h6")
+};
+var TAG_FOR_LEVEL = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+};
+var Heading = React.forwardRef(
+  ({ level = "h2", size, color = "neutral", weight = "bold", gradient = false, children, ...props }, ref) => {
+    const Styled = STYLED_BY_TAG[TAG_FOR_LEVEL[level] ?? "h2"];
+    return /* @__PURE__ */ jsx(
+      Styled,
+      {
+        ref,
+        customSize: size ?? level,
+        customColor: color,
+        customWeight: weight,
+        gradient,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+export {
+  Heading
+};
+//# sourceMappingURL=chunk-HQJ75HHI.js.map

package/dist/chunk-HQJ75HHI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { headingSx } from './Heading.styles';\nimport type { HeadingFlags } from './Heading.styles';\nimport type { HeadingProps } from './Heading.types';\n\nconst styledHeading = () =>\n  styled('h1', {\n    shouldForwardProp: (prop) =>\n      !['customSize', 'customColor', 'customWeight', 'gradient'].includes(prop as string),\n  })<HeadingFlags>(({ theme, ...flags }) => ({ ...headingSx(theme, flags) }));\n\n/**\n * One styled component per tag. They share a style function but must be\n * separate components, since `withComponent` fixes the element at definition\n * time — a single component switching tags per render would remount the text.\n */\nconst STYLED_BY_TAG = {\n  h1: styledHeading().withComponent('h1'),\n  h2: styledHeading().withComponent('h2'),\n  h3: styledHeading().withComponent('h3'),\n  h4: styledHeading().withComponent('h4'),\n  h5: styledHeading().withComponent('h5'),\n  h6: styledHeading().withComponent('h6'),\n} as const;\n\n/**\n * Which tag each level renders. `display` is a size, not a rank, so it uses the\n * h1 element — the document still gets one level-one heading rather than an\n * unnamed tag outside the outline.\n */\nconst TAG_FOR_LEVEL: Record<string, keyof typeof STYLED_BY_TAG> = {\n  display: 'h1',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  h6: 'h6',\n};\n\n/**\n * The rank and the size were ALREADY independent in here — `TAG_FOR_LEVEL[level]`\n * and `customLevel={level}` are two separate derivations from one prop. The\n * component just never let a caller set them apart, so anyone who needed an\n * `h1` at a smaller size had to reach around the component and restyle it.\n * `size` is that seam, exposed: it defaults to `level`, so nothing that exists\n * renders differently.\n */\nexport const Heading = React.forwardRef<globalThis.HTMLHeadingElement, HeadingProps>(\n  (\n    { level = 'h2', size, color = 'neutral', weight = 'bold', gradient = false, children, ...props },\n    ref,\n  ) => {\n    const Styled = STYLED_BY_TAG[TAG_FOR_LEVEL[level] ?? 'h2'];\n\n    return (\n      <Styled\n        ref={ref}\n        customSize={size ?? level}\n        customColor={color}\n        customWeight={weight}\n        gradient={gradient}\n        {...props}\n      >\n        {children}\n      </Styled>\n    );\n  },\n);\n\nHeading.displayName = 'Heading';\n"],"mappings":";;;;;AAAA,SAAS,cAAc;AACvB,OAAO,WAAW;AAyDZ;AAnDN,IAAM,gBAAgB,MACpB,OAAO,MAAM;AAAA,EACX,mBAAmB,CAAC,SAClB,CAAC,CAAC,cAAc,eAAe,gBAAgB,UAAU,EAAE,SAAS,IAAc;AACtF,CAAC,EAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,OAAO,EAAE,GAAG,UAAU,OAAO,KAAK,EAAE,EAAE;AAO5E,IAAM,gBAAgB;AAAA,EACpB,IAAI,cAAc,EAAE,cAAc,IAAI;AAAA,EACtC,IAAI,cAAc,EAAE,cAAc,IAAI;AAAA,EACtC,IAAI,cAAc,EAAE,cAAc,IAAI;AAAA,EACtC,IAAI,cAAc,EAAE,cAAc,IAAI;AAAA,EACtC,IAAI,cAAc,EAAE,cAAc,IAAI;AAAA,EACtC,IAAI,cAAc,EAAE,cAAc,IAAI;AACxC;AAOA,IAAM,gBAA4D;AAAA,EAChE,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUO,IAAM,UAAU,MAAM;AAAA,EAC3B,CACE,EAAE,QAAQ,MAAM,MAAM,QAAQ,WAAW,SAAS,QAAQ,WAAW,OAAO,UAAU,GAAG,MAAM,GAC/F,QACG;AACH,UAAM,SAAS,cAAc,cAAc,KAAK,KAAK,IAAI;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAY,QAAQ;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}

package/dist/chunk-HVIB6WMD.js

@@ -0,0 +1,187 @@
+import {
+  DATA_VIEWS_LAYOUTS
+} from "./chunk-C6ATAHBX.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Slider
+} from "./chunk-FA3TYWX2.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-layout-context.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataViewsLayoutContext = createContext(null);
+var DEFAULT_ZOOM = 35;
+var BASE_CARD_WIDTH = 180;
+var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
+var LAYOUT_STORAGE_KEY = "dataviews:layout";
+var DENSITY_STORAGE_KEY = "dataviews:density";
+var DENSITIES = ["compact", "cozy", "comfortable"];
+var DENSITY_ROW_PADDING = {
+  compact: 0.25,
+  cozy: 0.75,
+  comfortable: 1.5
+};
+var DENSITY_CARD_SCALE = {
+  compact: 0.84,
+  cozy: 1.15,
+  comfortable: 1.4
+};
+function cardTargetWidthFor(zoom, density) {
+  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
+}
+var DENSITY_BOARD_SCALE = {
+  compact: 0.95,
+  cozy: 1,
+  comfortable: 1.25
+};
+function cardScaleForZoom(zoom) {
+  const clamped = Math.max(0, Math.min(100, zoom));
+  return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
+}
+function cardMinWidthForZoom(zoom) {
+  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));
+}
+function isLayout(value) {
+  return DATA_VIEWS_LAYOUTS.includes(value);
+}
+function isDensity(value) {
+  return DENSITIES.includes(value);
+}
+function readStoredDensity() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
+    return isDensity(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function pinLayout(layout, available) {
+  if (layout === "cards") return available.canUseCards ? "cards" : "table";
+  if (layout === "list") return available.canUseList ? "list" : "table";
+  if (layout === "board") return available.canUseBoard ? "board" : "table";
+  return "table";
+}
+function readStoredLayout() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
+    return isLayout(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, value) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function DataViewsLayoutProvider({
+  canUseCards = false,
+  canUseList = false,
+  canUseBoard = false,
+  defaultLayout = "table",
+  viewLayout,
+  ignoreStoredLayout = false,
+  children
+}) {
+  const availability = { canUseCards, canUseList, canUseBoard };
+  const [layout, setLayoutState] = useState(
+    () => pinLayout(
+      viewLayout ?? (ignoreStoredLayout ? void 0 : readStoredLayout()) ?? defaultLayout,
+      availability
+    )
+  );
+  const [density, setDensityState] = useState(
+    () => (ignoreStoredLayout ? void 0 : readStoredDensity()) ?? "cozy"
+  );
+  const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+  useEffect(() => {
+    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
+  }, [viewLayout]);
+  const effective = pinLayout(layout, availability);
+  const value = useMemo(
+    () => ({
+      layout: effective,
+      setLayout: (next) => {
+        const pinned = pinLayout(next, availability);
+        setLayoutState(pinned);
+        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
+      },
+      density,
+      setDensity: (next) => {
+        setDensityState(next);
+        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
+      },
+      canUseCards,
+      canUseList,
+      canUseBoard,
+      zoom,
+      setZoom
+    }),
+    [effective, density, canUseCards, canUseList, canUseBoard, zoom]
+  );
+  return /* @__PURE__ */ jsx(DataViewsLayoutContext.Provider, { value, children });
+}
+function useDataViewsLayout() {
+  const ctx = useContext(DataViewsLayoutContext);
+  if (!ctx) {
+    throw new Error("useDataViewsLayout must be used within a DataViewsLayoutProvider");
+  }
+  return ctx;
+}
+function DataViewsZoomSlider({ testIdPrefix }) {
+  const { layout, zoom, setZoom } = useDataViewsLayout();
+  const copy = useDataViewsCopy();
+  if (layout !== "cards" && layout !== "board") return null;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: { xs: "none", sm: "flex" },
+        alignItems: "center",
+        gap: 1,
+        color: "text.secondary"
+      },
+      children: [
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 14 } }),
+        /* @__PURE__ */ jsx(default2, { sx: { width: 88, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          Slider,
+          {
+            size: "sm",
+            showValue: false,
+            value: zoom,
+            min: 0,
+            max: 100,
+            step: 5,
+            onChange: (_event, next) => setZoom(Array.isArray(next) ? next[0] ?? 0 : next),
+            "aria-label": copy.display.cardZoom,
+            "data-testid": `${testIdPrefix}-card-zoom`
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 20 } })
+      ]
+    }
+  );
+}
+
+export {
+  DENSITY_ROW_PADDING,
+  DENSITY_CARD_SCALE,
+  cardTargetWidthFor,
+  DENSITY_BOARD_SCALE,
+  cardScaleForZoom,
+  cardMinWidthForZoom,
+  DataViewsLayoutProvider,
+  useDataViewsLayout,
+  DataViewsZoomSlider
+};
+//# sourceMappingURL=chunk-HVIB6WMD.js.map

package/dist/chunk-HVIB6WMD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-layout-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from \"react\";\n\nimport GridViewOutlinedIcon from \"@mui/icons-material/GridViewOutlined\";\n\nimport { Slider } from \"../../form/Slider\";\nimport { Box } from \"../../../mui/Box\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from \"./data-views-types\";\n\n/**\n * The DataViews layout (view type): the dense \"Tabela\" grid, the \"Grade\" of\n * cards, the \"Lista\" of full-width rows, or the \"Quadro\" board of state columns.\n * Shared across the toolbar (the toggle) and the body (the selector) via context\n * so a single source of truth drives what renders — each layout only appears\n * when the table opts into it (`renderCard` for the grade, `renderListRow` for\n * the lista, `board` + `renderCard` for the quadro).\n */\nexport type { DataViewsLayout };\n\ninterface DataViewsLayoutValue {\n  layout: DataViewsLayout;\n  setLayout: (layout: DataViewsLayout) => void;\n  /** How much air each record gets — see {@link DataViewsDensity}. */\n  density: DataViewsDensity;\n  setDensity: (density: DataViewsDensity) => void;\n  /** Whether the cards layout is available (a `renderCard` was supplied). */\n  canUseCards: boolean;\n  /** Whether the list layout is available (a `renderListRow` was supplied). */\n  canUseList: boolean;\n  /** Whether the board layout is available (a `board` config AND a `renderCard`). */\n  canUseBoard: boolean;\n  /** Card-size zoom (0–100); drives the card grid's min column width. */\n  zoom: number;\n  setZoom: (zoom: number) => void;\n}\n\nconst DataViewsLayoutContext = createContext<DataViewsLayoutValue | null>(null);\n\n/** Default card zoom (0–100). */\nconst DEFAULT_ZOOM = 35;\n/** The card's width in px at scale 1 — the zoom slider multiplies this. */\nconst BASE_CARD_WIDTH = 180;\n/** The size multiplier the zoom slider spans (0.75× to 2×). */\nconst CARD_SCALE_RANGE = { min: 0.75, max: 2 } as const;\n\n/**\n * Where the user's layout preference is remembered. ONE key for every DataViews\n * table in the app, on purpose: picking \"Grade\" on Produtos is a statement about\n * how this operator likes to read lists, not about that one screen. Every other\n * screen that CAN render cards then opens in cards, and one that cannot falls\n * back without forgetting the preference.\n */\nconst LAYOUT_STORAGE_KEY = \"dataviews:layout\";\n\n/**\n * The density preference, remembered app-wide for the same reason as the layout:\n * an operator who wants tight rows wants them on every list, not on one.\n */\nconst DENSITY_STORAGE_KEY = \"dataviews:density\";\n\n/**\n * How much room each record gets. It means different things per layout, and\n * that is the point — one control, phrased in the terms of what is on screen:\n *\n * - table / list → row height (\"Baixa / Média / Alta\")\n * - cards        → how many fit per row (\"Muitos / Médio / Poucos\")\n *\n * The board is unaffected: its cards are already sized by the zoom slider.\n */\nexport type DataViewsDensity = \"compact\" | \"cozy\" | \"comfortable\";\n\n/** Every density this build knows — the guard's single source. */\nconst DENSITIES: readonly DataViewsDensity[] = [\"compact\", \"cozy\", \"comfortable\"];\n\n/** Vertical padding (theme spacing units) per density, for a table or list row. */\nexport const DENSITY_ROW_PADDING: Record<DataViewsDensity, number> = {\n  compact: 0.25,\n  cozy: 0.75,\n  comfortable: 1.5,\n};\n\n/**\n * The card WIDTH each density aims for, as a multiple of the base card width.\n *\n * Density used to cap the column COUNT, with a track floor of\n * `max(baseWidth, 100% / count)`. That base is a constant, so wherever it won\n * the arithmetic every density produced an identical track — \"Muitos\" and\n * \"Medio\" both drew 3 cards of 279px at md — and where the percentage won\n * instead, on a wide screen, the count was pinned and each card grew to a share\n * of the viewport: ~430px of card holding one chip and two lines of text.\n *\n * One width per density fixes both, because the number `auto-fill` divides by\n * now differs per density at every size. The spread is chosen so the three land\n * on DIFFERENT column counts across the range rather than by eye — 4/3/2 at md,\n * 6/4/3 at lg, 7/5/4 at xl, 13/9/8 at 2560.\n */\nexport const DENSITY_CARD_SCALE: Record<DataViewsDensity, number> = {\n  compact: 0.84,\n  cozy: 1.15,\n  comfortable: 1.4,\n};\n\n/** The width a card aims for: the base width, scaled by zoom, then by density. */\nexport function cardTargetWidthFor(zoom: number, density: DataViewsDensity): number {\n  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);\n}\n\n/**\n * The BOARD's column-width multiplier per density.\n *\n * Density means \"how much air a record gets\", and on a board that is the column\n * width — narrow columns fit more etapas on screen, wide ones give each card\n * room to be read. Without this the board was the one layout the Exibição tab\n * offered nothing for: the format tile switched to Quadro and the whole density\n * section vanished, which reads as a control that broke rather than one that\n * does not apply.\n *\n * The spread is deliberately narrower than the card grid's. A board column has\n * a hard floor (`MIN_COLUMN_WIDTH` — a card below it stops being readable), so\n * a multiplier that undershoots it buys nothing and makes \"Estreita\" a tile\n * that does nothing on a phone.\n */\nexport const DENSITY_BOARD_SCALE: Record<DataViewsDensity, number> = {\n  compact: 0.95,\n  cozy: 1,\n  comfortable: 1.25,\n};\n\n/**\n * Map the 0–100 zoom to the card SIZE multiplier. This is the single knob: the\n * card's width is {@link BASE_CARD_WIDTH} × scale and its padding + typography\n * scale by the same factor, so the whole card grows together (scale 2 → twice\n * the size, proportion preserved by the aspect ratio). Passed to a card via\n * `DataViewCardSelection.scale`.\n */\nexport function cardScaleForZoom(zoom: number): number {\n  const clamped = Math.max(0, Math.min(100, zoom));\n  return CARD_SCALE_RANGE.min + (clamped / 100) * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);\n}\n\n/** The card grid's min column width in px = base width × the zoom size multiplier. */\nexport function cardMinWidthForZoom(zoom: number): number {\n  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));\n}\n\n/** Which layouts this table can actually render. */\ninterface LayoutAvailability {\n  canUseCards: boolean;\n  canUseList: boolean;\n  canUseBoard: boolean;\n}\n\n/** Is this a layout string this build knows? Guards whatever is in storage. */\nfunction isLayout(value: unknown): value is DataViewsLayout {\n  return DATA_VIEWS_LAYOUTS.includes(value as DataViewsLayout);\n}\n\n/** Is this a density this build knows? Guards whatever is in storage. */\nfunction isDensity(value: unknown): value is DataViewsDensity {\n  return DENSITIES.includes(value as DataViewsDensity);\n}\n\n/** The remembered density, or undefined (no window, no value, junk). */\nfunction readStoredDensity(): DataViewsDensity | undefined {\n  try {\n    if (typeof window === \"undefined\") return undefined;\n    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);\n    return isDensity(stored) ? stored : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Pin a layout to one this table can render. \"Tabela\" is always available, so it\n * is the floor: a page with no `renderCard` never renders a cards body, one with\n * no `renderListRow` never renders a list, and one with no `board` config never\n * renders a board — whatever is stored, saved in a view, or requested.\n */\nfunction pinLayout(layout: DataViewsLayout, available: LayoutAvailability): DataViewsLayout {\n  if (layout === \"cards\") return available.canUseCards ? \"cards\" : \"table\";\n  if (layout === \"list\") return available.canUseList ? \"list\" : \"table\";\n  if (layout === \"board\") return available.canUseBoard ? \"board\" : \"table\";\n  return \"table\";\n}\n\n/** The stored cross-screen preference, or undefined (no window, no value, junk). */\nfunction readStoredLayout(): DataViewsLayout | undefined {\n  // Guarded rather than assumed: this module is also imported in Node (tests,\n  // any SSR host), and a `localStorage` access can throw outright under a\n  // restrictive privacy setting — a thrown read must not take the grid with it.\n  try {\n    if (typeof window === \"undefined\") return undefined;\n    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);\n    return isLayout(stored) ? stored : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/** Remember a preference for every other screen. A failed write is not an error. */\nfunction writeStored(key: string, value: string): void {\n  try {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(key, value);\n  } catch {\n    // Private mode / quota / disabled storage: the preference simply does not\n    // survive the session. Nothing about the current view depends on it.\n  }\n}\n\ninterface LayoutProviderProps extends Partial<LayoutAvailability> {\n  /** Which layout to show first when the user has expressed no preference. */\n  defaultLayout?: DataViewsLayout;\n  /**\n   * The layout an APPLIED SAVED VIEW pins, when it stored one. It wins over the\n   * remembered preference for as long as that view is applied — the view is a\n   * snapshot someone chose to keep — but it does NOT overwrite the preference:\n   * only the toggle does that, because only the toggle is the user saying so.\n   */\n  viewLayout?: DataViewsLayout;\n  /**\n   * Ignore — and stop writing — the remembered cross-screen preference, making\n   * `defaultLayout` authoritative for this table.\n   *\n   * For a table that exists to SHOW a particular layout rather than to be\n   * browsed: a Storybook story called \"Board\", a docs example, a screenshot\n   * harness. Without it the remembered preference wins, so opening \"Board\"\n   * after having clicked Tabela anywhere renders a table — the demonstration\n   * silently showing the wrong thing, and a shared link doing it for everyone\n   * whose preference differs.\n   *\n   * A real screen leaves this off: remembering how someone likes to read\n   * lists is the point.\n   */\n  ignoreStoredLayout?: boolean;\n  children: ReactNode;\n}\n\n/**\n * Provides the view-type state, seeded from (in order) the applied saved view's\n * layout, the user's remembered cross-screen preference, then `defaultLayout` —\n * each pinned to what this table can actually render.\n */\nexport function DataViewsLayoutProvider({\n  canUseCards = false,\n  canUseList = false,\n  canUseBoard = false,\n  defaultLayout = \"table\",\n  viewLayout,\n  ignoreStoredLayout = false,\n  children,\n}: LayoutProviderProps): React.JSX.Element {\n  const availability = { canUseCards, canUseList, canUseBoard };\n  const [layout, setLayoutState] = useState<DataViewsLayout>(() =>\n    pinLayout(\n      viewLayout ?? (ignoreStoredLayout ? undefined : readStoredLayout()) ?? defaultLayout,\n      availability,\n    ),\n  );\n  const [density, setDensityState] = useState<DataViewsDensity>(\n    () => (ignoreStoredLayout ? undefined : readStoredDensity()) ?? \"cozy\",\n  );\n  const [zoom, setZoom] = useState(DEFAULT_ZOOM);\n  // A newly applied view carrying a layout switches to it (its reference-change\n  // is the signal, exactly as `appliedState` works for the filters).\n  useEffect(() => {\n    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));\n    // Availability is derived from props that do not change for a mounted table.\n  }, [viewLayout]);\n  // Pin again on read: `canUseCards`/`canUseBoard` can flip for a mounted table\n  // (a page that supplies `renderCard` only once its card data has loaded), and\n  // a stale \"cards\" would otherwise render a cards body with no renderer.\n  const effective = pinLayout(layout, availability);\n\n  const value = useMemo<DataViewsLayoutValue>(\n    () => ({\n      layout: effective,\n      setLayout: (next: DataViewsLayout) => {\n        const pinned = pinLayout(next, availability);\n        setLayoutState(pinned);\n        // Remember the user's own choice across every screen — see LAYOUT_STORAGE_KEY.\n        // A table pinned to a layout does not write: it would teach the\n        // preference a value the operator never chose.\n        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);\n      },\n      density,\n      setDensity: (next: DataViewsDensity) => {\n        setDensityState(next);\n        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);\n      },\n      canUseCards,\n      canUseList,\n      canUseBoard,\n      zoom,\n      setZoom,\n    }),\n    [effective, density, canUseCards, canUseList, canUseBoard, zoom],\n  );\n  return <DataViewsLayoutContext.Provider value={value}>{children}</DataViewsLayoutContext.Provider>;\n}\n\n/** Read the current DataViews layout. Throws outside a provider. */\nexport function useDataViewsLayout(): DataViewsLayoutValue {\n  const ctx = useContext(DataViewsLayoutContext);\n  if (!ctx) {\n    throw new Error(\"useDataViewsLayout must be used within a DataViewsLayoutProvider\");\n  }\n  return ctx;\n}\n\n/**\n * Card-size slider for the toolbar — shown in the CARD-BASED layouts (\"Grade\"\n * and \"Quadro\"), mirroring the tabwoah view-selector's zoom. The board reuses\n * the same `renderCard`, so the same knob scales both.\n *\n * Deliberately ABSENT in \"Lista\" and \"Tabela\" (FUT-733): a list row is\n * full-width and sized by its content, so a card-size multiplier has nothing to\n * act on — a slider that moved and changed nothing would be worse than none.\n */\nexport function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element | null {\n  const { layout, zoom, setZoom } = useDataViewsLayout();\n  const copy = useDataViewsCopy();\n  if (layout !== \"cards\" && layout !== \"board\") return null;\n  return (\n    <Box\n      sx={{\n        display: { xs: \"none\", sm: \"flex\" },\n        alignItems: \"center\",\n        gap: 1,\n        color: \"text.secondary\",\n      }}\n    >\n      <GridViewOutlinedIcon sx={{ fontSize: 14 }} />\n      <Box sx={{ width: 88, display: \"flex\", alignItems: \"center\" }}>\n        <Slider\n          size=\"sm\"\n          showValue={false}\n          value={zoom}\n          min={0}\n          max={100}\n          step={5}\n          onChange={(_event, next) => setZoom(Array.isArray(next) ? (next[0] ?? 0) : next)}\n          aria-label={copy.display.cardZoom}\n          data-testid={`${testIdPrefix}-card-zoom`}\n        />\n      </Box>\n      <GridViewOutlinedIcon sx={{ fontSize: 20 }} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-I6PZVHIT.js

@@ -0,0 +1,46 @@
+// src/tokens/scales.ts
+var SIZE_VALUES = ["xs", "sm", "md", "lg", "xl"];
+var COLOR_VALUES = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "info",
+  "danger",
+  "neutral"
+];
+var muiSize = (size) => {
+  if (size === "xs" || size === "sm") return "small";
+  return size === "md" ? "medium" : "large";
+};
+function muiColor(color, neutralAs) {
+  if (color === "danger") return "error";
+  return color === "neutral" ? neutralAs : color;
+}
+var paletteKey = (color) => color === "danger" ? "error" : color === "neutral" ? "grey" : color;
+function accentFor(theme, color) {
+  if (color === "neutral") {
+    const grey = theme.palette.grey;
+    return {
+      // Explicit fallbacks: the ramp is indexed, and under
+      // `noUncheckedIndexedAccess` every stop is `string | undefined`.
+      main: grey[600] ?? "#757575",
+      light: grey[400] ?? "#bdbdbd",
+      dark: grey[800] ?? "#424242",
+      // Grey 600 carries white text in both themes.
+      contrastText: "#fff"
+    };
+  }
+  const key = color === "danger" ? "error" : color;
+  return theme.palette[key];
+}
+
+export {
+  SIZE_VALUES,
+  COLOR_VALUES,
+  muiSize,
+  muiColor,
+  paletteKey,
+  accentFor
+};
+//# sourceMappingURL=chunk-I6PZVHIT.js.map

package/dist/chunk-I6PZVHIT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/scales.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\n/**\n * THE TWO VOCABULARIES EVERY COMPONENT SPEAKS.\n *\n * Before this file the package had both halves of every argument at once: 26\n * components sized themselves `xs|sm|md|lg|xl` and four used MUI's\n * `small|medium|large`; 14 coloured themselves `danger|neutral` and 15 used\n * MUI's `error`. Nothing enforced either, because most of these props were\n * spelled out as inline unions and a couple were plain `string`.\n *\n * That is not a tidiness problem. A caller learns the vocabulary from whichever\n * component they used first, and the wrong half is not rejected — it reaches MUI\n * as an unknown value and silently falls back. `Chip` shipped with `color?:\n * string` and MUI's `small|medium`, so `color=\"danger\"` rendered grey and\n * `size=\"sm\"` rendered medium; twelve live call sites were doing exactly that,\n * and every test passed because they all asserted on text.\n *\n * So the vocabulary is declared once, here, and components derive from it.\n *\n * DERIVE, DON'T COPY — AND TAKE THE WHOLE VOCABULARY. Every size prop is\n * `SizeValue` and every colour prop is `ColorValue`, with no `Extract` and no\n * `Exclude`. Handing a component a slice was tried and undone: it is the same\n * fragmentation wearing the canonical type's name, and it leaves a caller having\n * to remember which components accept `xs` and which accept `info`. Where the\n * underlying widget draws fewer steps than five, that is a rendering detail and\n * belongs at the MUI boundary below — not in the prop's type.\n *\n * A component whose size or colour is not this concept at all keeps its own type\n * — `Scrollbar`'s `thin|medium|thick` is a track width, `Sheet`'s `full` is a\n * viewport fraction, `LazyImage`'s size is pixels. Forcing those into the scale\n * would be consistency for its own sake.\n */\n\n/**\n * The house size scale.\n *\n * Abbreviated, because that is what 26 of the 30 components with a real size\n * already used and what every caller has been taught to write.\n *\n * Declared as the array and the type together so the two cannot disagree. The\n * runtime list is what Storybook `argTypes.options` and the demo grids iterate;\n * spelled by hand in each story it drifts, and it had — twelve colour lists\n * omitted `info`, so the control that documents the vocabulary offered a\n * component less than the component accepted.\n */\n/**\n * The type scale is the THIRD vocabulary, and it lives in `./typography.ts`\n * because it is metrics rather than a prop union. Re-exported here so\n * `@12-apps/ui/tokens` stays the one import path for \"what words does this\n * package speak\" — a second entry point is how a vocabulary gets missed.\n */\nexport {\n  HEADING_LEVELS,\n  HEADING_SCALE,\n  headingMetrics,\n  type HeadingLevel,\n  type HeadingMetrics,\n  type HeadingScaleOverrides,\n} from './typography';\n\nexport type SizeValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport const SIZE_VALUES = ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly SizeValue[];\n\n/**\n * The house colour vocabulary.\n *\n * `danger` and `neutral` are OURS; the rest are MUI's own names already. That\n * sentence started life in `Button.tsx`, which is the component most callers\n * meet first and therefore the one that taught the vocabulary — so it is the one\n * the rest of the package follows.\n *\n * Components that hand these to MUI translate at the boundary (`danger` →\n * `error`, `neutral` → `default` or `inherit` depending on what the underlying\n * component calls its unaccented state). The translation must be a real mapping\n * and never a cast: a cast is precisely what let `danger` through untouched and\n * had MUI fall back to grey.\n *\n * Array and type declared together, for the reason given on {@link SIZE_VALUES}.\n */\nexport type ColorValue =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'danger'\n  | 'neutral';\n\nexport const COLOR_VALUES = [\n  'primary',\n  'secondary',\n  'success',\n  'warning',\n  'info',\n  'danger',\n  'neutral',\n] as const satisfies readonly ColorValue[];\n\n/* ── Array and union, pinned to each other ────────────────────────────────── */\n\n/**\n * The arrays above are written out rather than derived, because deriving the\n * union from the array (`(typeof COLOR_VALUES)[number]`) costs the alias its\n * name: TypeScript resolves the indexed access eagerly, and every error in the\n * package stops saying `not assignable to type 'ColorValue'` and starts dumping\n * seven string literals. In a package whose entire purpose is teaching this\n * vocabulary, the name in the error message is worth keeping.\n *\n * Writing both means they could disagree, so both directions are checked here.\n * `satisfies` above catches an entry that is not a member. These catch the other\n * half — a member missing from the array — which `satisfies` cannot see and\n * which is the direction that actually bit: twelve story control lists offered\n * six colours for a vocabulary of seven, so `info` was undocumented everywhere.\n *\n * A gap makes the assignment below fail, and the error names the missing member.\n */\ntype Missing<Union extends string, Listed extends string> = Exclude<Union, Listed>;\n\nconst _allSizesListed: Missing<SizeValue, (typeof SIZE_VALUES)[number]> extends never\n  ? true\n  : never = true;\n\nconst _allColorsListed: Missing<ColorValue, (typeof COLOR_VALUES)[number]> extends never\n  ? true\n  : never = true;\n\nvoid _allSizesListed;\nvoid _allColorsListed;\n\n/* ── The MUI boundary ─────────────────────────────────────────────────────── */\n\n/** What MUI calls a size. Three entries against our five. */\nexport type MuiSize = 'small' | 'medium' | 'large';\n\n/**\n * The house scale collapsed onto MUI's three.\n *\n * Five onto three loses information, and it loses it at the ends on purpose:\n * `xs`/`sm` both draw small and `lg`/`xl` both draw large, because MUI has no\n * fourth and fifth step to give them. A component that genuinely needs five\n * distinct sizes styles them itself rather than routing through here — this is\n * for the ones that just forward the prop.\n */\nexport const muiSize = (size: SizeValue): MuiSize => {\n  if (size === 'xs' || size === 'sm') return 'small';\n  return size === 'md' ? 'medium' : 'large';\n};\n\n/** What MUI calls a semantic colour on most components. */\nexport type MuiColor = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error';\n\n/**\n * The house vocabulary translated for MUI, with the caller naming its neutral.\n *\n * `neutral` is the awkward one: MUI spells the unaccented state `default` on a\n * chip, `inherit` on a button and an icon button, and `grey` in the palette. So\n * the caller passes the word its own MUI component uses rather than this\n * pretending there is one answer.\n *\n * A MAPPING, NEVER A CAST. The cast is what let `danger` reach MUI untouched and\n * silently fall back to grey.\n */\nexport function muiColor<N extends string>(color: ColorValue, neutralAs: N): MuiColor | N {\n  if (color === 'danger') return 'error';\n  return color === 'neutral' ? neutralAs : color;\n}\n\n/**\n * The house vocabulary as a `theme.palette` key.\n *\n * Separate from {@link muiColor} because the palette has no `default` and no\n * `inherit` — an unaccented colour there is `grey`.\n */\nexport type PaletteKey = MuiColor | 'grey';\n\nexport const paletteKey = (color: ColorValue): PaletteKey =>\n  color === 'danger' ? 'error' : color === 'neutral' ? 'grey' : color;\n\n/**\n * A `ColorValue` resolved to a four-stop accent from the theme.\n *\n * `paletteKey` is not enough on its own for anything that reads `.main`: MUI's\n * palette has no neutral `PaletteColor`, and `palette.grey` is a 50–900 ramp\n * with no `main`, `light`, `dark` or `contrastText` on it at all. So `neutral`\n * is resolved from the ramp here, once, instead of every component discovering\n * the same hole and branching around it.\n *\n * Typed against the theme structurally so this file does not drag in MUI's\n * `Theme` and become a dependency of everything that imports a token.\n */\nexport interface Accent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\nexport function accentFor(theme: Theme, color: ColorValue): Accent {\n  if (color === 'neutral') {\n    const grey = theme.palette.grey;\n    return {\n      // Explicit fallbacks: the ramp is indexed, and under\n      // `noUncheckedIndexedAccess` every stop is `string | undefined`.\n      main: grey[600] ?? '#757575',\n      light: grey[400] ?? '#bdbdbd',\n      dark: grey[800] ?? '#424242',\n      // Grey 600 carries white text in both themes.\n      contrastText: '#fff',\n    };\n  }\n  // Past the `neutral` return, `paletteKey` can only produce a `MuiColor` — but\n  // its signature still admits `'grey'`, and TS cannot narrow a return type by\n  // the argument. Naming the key here keeps the accent branch honestly typed\n  // instead of casting the hole shut.\n  const key: MuiColor = color === 'danger' ? 'error' : color;\n  return theme.palette[key];\n}\n"],"mappings":";AA+DO,IAAM,cAAc,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AA2BjD,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA+CO,IAAM,UAAU,CAAC,SAA6B;AACnD,MAAI,SAAS,QAAQ,SAAS,KAAM,QAAO;AAC3C,SAAO,SAAS,OAAO,WAAW;AACpC;AAgBO,SAAS,SAA2B,OAAmB,WAA4B;AACxF,MAAI,UAAU,SAAU,QAAO;AAC/B,SAAO,UAAU,YAAY,YAAY;AAC3C;AAUO,IAAM,aAAa,CAAC,UACzB,UAAU,WAAW,UAAU,UAAU,YAAY,SAAS;AAqBzD,SAAS,UAAU,OAAc,OAA2B;AACjE,MAAI,UAAU,WAAW;AACvB,UAAM,OAAO,MAAM,QAAQ;AAC3B,WAAO;AAAA;AAAA;AAAA,MAGL,MAAM,KAAK,GAAG,KAAK;AAAA,MACnB,OAAO,KAAK,GAAG,KAAK;AAAA,MACpB,MAAM,KAAK,GAAG,KAAK;AAAA;AAAA,MAEnB,cAAc;AAAA,IAChB;AAAA,EACF;AAKA,QAAM,MAAgB,UAAU,WAAW,UAAU;AACrD,SAAO,MAAM,QAAQ,GAAG;AAC1B;","names":[]}