@12-apps/ui 6.44.0 → 6.44.1

package/NATIVE.md

@@ -95,7 +95,7 @@ Ported: **27 of 144** public subpaths carry a `react-native` condition.
 | `@12-apps/ui/data-display/Progress` | 27 | 2 | `gradient` paints its first stop (`main`) flat: React Native core has no gradient fill, so the 90° run to `dark` is lost. `glass` keeps the 80% wash and the 30% hairline but not the 10px backdrop blur, which React Native has no equivalent of.; `glow` draws the web's `0 0 10px 2px alpha(main, 0.4)` shadow (and `0 0 6px 1px` on a filled segment) but not the `filter: brightness(1.1)` that goes with it, nor the circular variant's `drop-shadow` — the dial takes a box shadow round its square instead.; The indeterminate linear bar is ONE band a third of the track wide crossing every 2.1s; MUI runs two bars on two keyframe tracks. The indeterminate dial spins a quarter-circle arc once every 1.4s rather than growing and shrinking it.; The determinate bar is a clamped WIDTH; MUI translates a full-width bar by `value - 100`%. The two agree between 0 and 100 — outside it the web slides the bar off the track and native stops at the ends.; MUI's `transition: all 0.3s ease` on the bar and on every segment has no equivalent: a value change is drawn immediately.; The label is set in MUI's default `caption` ratios at the size's own step; a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/feedback/Dialog` | 26 | 5 | `glass` paints its 0.1 paper wash and primary hairline without the 20px backdrop blur, and the scrim behind it is a flat `alpha(black, 0.2)` without its 8px blur — React Native has no backdrop filter.; `gradient` adds nothing on native: it is a `linear-gradient` background IMAGE layered over the paper colour, and React Native core has neither a gradient fill nor a second background layer.; `role="dialog"` sits on React Native's `Modal`, which is the dialog on this side; the web puts it on MUI's paper. react-native-web gives that role to the TOP-MOST modal only, so two stacked dialogs announce one.; The modal mounts and unmounts without a transition where the web fades the paper in through MUI's `Fade`. React Native's own `animationType` is forwarded, so a consumer who wants `"fade"` or `"slide"` passes it.; The paper is `maxHeight: '100%'` inside an overlay inset by the web's `theme.spacing(2)` margin; the web writes `calc(100% - 64px)`, which React Native has no `calc` for, and 90vw, which the inset overlay stands in for.; `borderRadius` has no effect on `variant="drawer"` on EITHER renderer, so native paints the drawer SQUARE — which is what the web shows. Two things have to fail for that and both do: the web builds `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and is dropped; and that `sx` lands on a plain `Box` inside the Drawer rather than on a Paper, and MUI renders the Drawer's own Paper with `square: true`, so `shape.borderRadius` paints nothing either. Rounding the drawer is a web change (`Dialog.styles.ts` plus where the `sx` lands), made once, for both.; A `DialogContent` or `DialogActions` passed through a COMPONENT boundary still gets the padded wrapper here. The web catches that case with a `:has()` selector, which asks the DOM one step after React can; native has only the element-type check, so a body split into its own component is padded twice and stops being a sibling of the action bar.; `DialogContent` is a `ScrollView` — React Native's `overflow-y: auto` — so its padding lives on the scrolling content container rather than on the box the test id names.; The tighter top padding a body gets under a title (FUT-544) is decided by context rather than by the web's `.MuiDialogTitle-root + &`, so a SECOND `DialogContent` further down the dialog gets it too.; A `glow`ing paper stops clipping its children to its corners: a view's own shadow is clipped by its own overflow on a device, so the halo the caller asked for would not paint. The web keeps its clip and shows both.; The close button is a `Pressable` around the shared `Close` glyph at MUI's 8px `IconButton` padding; its pressed wash stands in for the web's hover.; Title, subtitle and raw text children are set in MUI's default `h6`/`body2`/`body1` numbers; a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/form/Button` | 24 | 2 | — |
-| `@12-apps/ui/form/Checkbox` | 25 | 0 | The control is a pressable carrying `role="checkbox"` and `aria-checked` — the state the web's hidden `<input type="checkbox">` announces — rather than a real form element. So it is a tab stop and a screen reader reads it correctly, but the `disabled` ATTRIBUTE a DOM assertion like `toBeDisabled()` looks for is `aria-disabled` here.; The box itself IS MUI's glyph: `@12-apps/ui/icons` generates `CheckBox`, `CheckBoxOutlineBlank` and `IndeterminateCheckBox` from the same `@mui/icons-material` package MUI's own `Checkbox` imports them from.; `glow` is a static shadow of MUI's default blue rather than one breathing between a 5px and a 20px blur, and `pulse` — an expanding ring drawn with `box-shadow` spread — is not drawn at all: React Native has neither keyframes on a shadow nor shadow spread.; Hover has no touch equivalent, so the 0.1 wash the web puts behind a hovered box is not drawn; `ripple` becomes Android's own ripple and is nothing on iOS.; `rounded` and `toggle` clip and scale the glyph's own box, as the web does — which on a transparent glyph shows only where the box would have clipped it. The web's `borderRadius` on an `<svg>` is the same near-invisible change.; Both renderers check in `primary.main` whatever `color` says: `Checkbox.tsx` overrides MUI's per-colour rule with primary and wins on source order. Fixing that is a web change.; The label and the helper text are set in MUI's own numbers (`body2` at 14px, `caption` at 12px, four spacing units of helper inset); a host that re-themes MUI's typography moves the web only. |
+| `@12-apps/ui/form/Checkbox` | 26 | 0 | The control is a pressable carrying `role="checkbox"` and `aria-checked` — the state the web's hidden `<input type="checkbox">` announces — rather than a real form element. So it is a tab stop and a screen reader reads it correctly, but the `disabled` ATTRIBUTE a DOM assertion like `toBeDisabled()` looks for is `aria-disabled` here.; The box itself IS MUI's glyph: `@12-apps/ui/icons` generates `CheckBox`, `CheckBoxOutlineBlank` and `IndeterminateCheckBox` from the same `@mui/icons-material` package MUI's own `Checkbox` imports them from.; `glow` is a static shadow of MUI's default blue rather than one breathing between a 5px and a 20px blur, and `pulse` — an expanding ring drawn with `box-shadow` spread — is not drawn at all: React Native has neither keyframes on a shadow nor shadow spread.; Hover has no touch equivalent, so the 0.1 wash the web puts behind a hovered box is not drawn; `ripple` becomes Android's own ripple and is nothing on iOS.; `rounded` and `toggle` clip and scale the glyph's own box, as the web does — which on a transparent glyph shows only where the box would have clipped it. The web's `borderRadius` on an `<svg>` is the same near-invisible change.; Both renderers check in `primary.main` whatever `color` says: `Checkbox.tsx` overrides MUI's per-colour rule with primary and wins on source order. Fixing that is a web change.; The label and the helper text are set in MUI's own numbers (`body2` at 14px, `caption` at 12px, four spacing units of helper inset); a host that re-themes MUI's typography moves the web only. |
 | `@12-apps/ui/form/Input` | 23 | 2 | The label sits ABOVE the field at its shrunk size (12px, aligned with the value's own left inset) instead of floating into a notch in the border: React Native can neither cut a notch in a border nor animate a label into one, so `floating` has nothing left to move.; `filled` keeps MUI's lopsided `25px 12px 8px` inset, which on the web is where the floating label sits inside the box — so a native filled field reads low in its box, with the label above it.; `glass` paints its 0.1 paper wash and hairline without the 20px backdrop blur (React Native has no backdrop filter), and draws ONE border where the web draws two — its own on the field root, plus the outlined fieldset's underneath.; `gradient` paints the first stop of its 135° fill flat and gives the 2px ring the gradient's first hue: React Native core has no gradient fill and no masked pseudo-element border.; Hover has no touch equivalent, so the web's hover border, its brighter glass wash and its deeper filled wash are not drawn; focus is, and it carries the same colours.; `pulse` grows by scaling the bar rather than spreading a box-shadow, which React Native does not have; `glow` is a shadow on iOS and an elevation on Android, so its halo is not symmetrical there.; `onClick` fires from the DOM click under react-native-web and from `onPressIn` on a device — react-native-web forwards only the first and React Native only the second, so exactly one runs and never both.; Enter keeps focus (`blurOnSubmit={false}`), as it does in a web `<input>`; React Native's own default for a single-line field is to dismiss the keyboard, and a caller wanting that passes its own.; An HTML `type` React Native has no keyboard for (`date`, `time`, `file`, `color`) renders a plain text field; `text`, `search`, `email`, `tel`, `url` and `number` pick the keyboard and `password` sets secure entry.; The value, label and helper text are set in MUI's own numbers (`body1` at 16px on a 23px line, the 0.75 shrunk label, `caption` at 12px); a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/form/Select` | 29 | 1 | The option list is an absolutely positioned panel under the field, not a portal over the screen: React Native's `Modal` traps focus and covers the viewport, which is right for a dialog and wrong for a dropdown. So the list is clipped by any ancestor that hides its overflow, it cannot escape a `ScrollView`, and there is no backdrop — the list closes on a pick, on Escape, or when the field is pressed again, never by a tap elsewhere.; Arrow keys open the list and Escape closes it, through react-native-web's DOM key events; `Enter` toggles it, because react-native-web's `Pressable` already answers `Enter` as a press. None of the three exists on a device, where the list is a touch surface — so there is no highlighted option to walk.; The label sits above the field rather than floating into a notch in its border, and the arrow is laid out in flow rather than absolutely at `right: 7`; the 1px difference that costs is taken out of the gap before the glyph, so the value still stops 32px from the edge. Both follow from React Native having no notched outline and no `position: absolute` inside a text run.; `glass` paints its 0.1 paper wash without the 20px backdrop blur (React Native has no backdrop filter), and `gradient` paints the first stop of its 135° fill flat inside a 2px ring of the gradient's first hue — React Native core has no gradient fill and no masked pseudo-element border.; Hover has no touch equivalent: the web's hover border, its brighter glass wash and the `action.hover` wash under a menu row are not drawn. `glow` is a shadow on iOS and an elevation on Android, so its halo is not symmetrical there, and it does not brighten on focus the way the web's does.; `defaultValue` selects an option here and does nothing on the web, where `Select.tsx` passes `value={value ?? ''}` and MUI's controlled value wins over it. Fixing that is a web change.; The list is rendered in full inside a `ScrollView` capped at the window height less 96px, where MUI's `Menu` measures the anchor and flips or shifts to stay on screen; a list opened near the bottom of a device screen runs off it.; The display slot, the option labels, the label and the helper text are set in MUI's own numbers (`body1` at 16px on a 23px line, the 0.75 shrunk label, `caption` at 12px); a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/form/Switch` | 26 | 3 | The control is drawn here rather than handed to React Native's own `Switch`, which is the platform control at the platform's size: no size scale, no track geometry, no thumb radius per look, no room for an icon or a word inside the track. What that costs is the platform's own switch on a device — this one is a pressable carrying `role="checkbox"` and `aria-checked`, which is what the web's hidden `<input type="checkbox">` announces, but a `role="switch"` would announce better where nothing needs `getByRole('checkbox')` to find it.; Hover has no touch equivalent, so the thumb does not lift or take its halo, and `ripple` — a wash that expands from the thumb under the pointer on the web — is not drawn at all.; `glow` paints its halo and inner wash as a static shadow rather than breathing every two seconds, and `gradient` paints the gradient's first stop flat (`light` checked, `alpha(light, 0.3)` at rest): React Native core has no gradient fill, no keyframes on a shadow and no shimmer sweep.; `glass` washes the track and the thumb at MUI's alphas without the 20px and 10px backdrop blurs — React Native has no backdrop filter.; `loading` turns the platform's `ActivityIndicator` inside the thumb at MUI's 0.6 of the thumb's size, where the web draws its own 2px ring with one transparent quarter.; An `onIcon` or `offIcon` is rendered as given, centred in its box. The web sets `color` and `fontSize` on the wrapper and an MUI glyph inherits both; React Native has no inheritance, so pass an `<Icon size color>` that is already the size and colour you want.; The keyboard reaches the control only through react-native-web: `Enter` presses it (react-native-web's `Pressable` answers it), the space bar toggles it through a DOM key handler, and neither exists on a device.; `checked`, the label, the description and the helper text are set in MUI's own numbers (`body2` at 14px, `caption` at 12px, the 300ms `cubic-bezier(0.4, 0, 0.2, 1)`); a host that re-themes MUI's typography or its elevations moves the web only. |

package/dist/_internal/components/data-display/DataViews/base-card.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   BaseCard
-} from "../../../../chunk-CEJTGG6J.js";
+} from "../../../../chunk-CIBTYBBN.js";
 import "../../../../chunk-BYH5GPLT.js";
 import "../../../../chunk-K4EKTMTC.js";
 import "../../../../chunk-LHHAYZ55.js";
 import "../../../../chunk-KHG57NAE.js";
 import "../../../../chunk-SJRTT3PA.js";
-import "../../../../chunk-FOM7OMJR.js";
+import "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-3UIDKLML.js";
 import "../../../../chunk-PYC4CWCQ.js";
 import "../../../../chunk-6DPAWXZ3.js";
@@ -23,6 +23,7 @@ import "../../../../chunk-YZHX2HTC.js";
 import "../../../../chunk-6IWO7CM2.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
 import "../../../../chunk-6WZUZHJM.js";
 import "../../../../chunk-2BYKTBDL.js";
 import "../../../../chunk-AG66JBNH.js";

package/dist/_internal/components/data-display/DataViews/base-list-card-gutters.js

@@ -3,16 +3,18 @@ import {
   DiscloseSlot,
   DragSlot,
   SelectSlot
-} from "../../../../chunk-B2ZITMYG.js";
+} from "../../../../chunk-26QYVCDK.js";
 import "../../../../chunk-K4EKTMTC.js";
 import "../../../../chunk-KHG57NAE.js";
 import "../../../../chunk-SJRTT3PA.js";
-import "../../../../chunk-FOM7OMJR.js";
+import "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-6DPAWXZ3.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-YKCAJ2TN.js";

package/dist/_internal/components/data-display/DataViews/base-list-card.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   BaseListCard
-} from "../../../../chunk-KMC6WP66.js";
-import "../../../../chunk-B2ZITMYG.js";
+} from "../../../../chunk-KPZ53JY6.js";
+import "../../../../chunk-26QYVCDK.js";
 import "../../../../chunk-XLQYOBHP.js";
 import {
   META_BREAK,
@@ -21,9 +21,9 @@ import "../../../../chunk-MNHIK2OR.js";
 import "../../../../chunk-4RWPGWJW.js";
 import "../../../../chunk-6LOGBWLG.js";
 import "../../../../chunk-SJRTT3PA.js";
-import "../../../../chunk-FOM7OMJR.js";
+import "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-SNCSGLJ6.js";
 import "../../../../chunk-DSHM7VN6.js";
 import "../../../../chunk-3UIDKLML.js";
@@ -39,6 +39,7 @@ import "../../../../chunk-YZHX2HTC.js";
 import "../../../../chunk-6IWO7CM2.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
 import "../../../../chunk-2GG5W6LR.js";
 import "../../../../chunk-532XOWZ5.js";
 import "../../../../chunk-M47ZOUGF.js";

package/dist/_internal/components/form/Checkbox/Checkbox.js

@@ -1,10 +1,12 @@
 import {
   Checkbox
-} from "../../../../chunk-FOM7OMJR.js";
+} from "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-YKCAJ2TN.js";

package/dist/_internal/components/form/Checkbox/Checkbox.metrics.js

@@ -11,8 +11,11 @@ import {
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
   effectInk,
-  glyphSize
-} from "../../../../chunk-TIQXDPIX.js";
+  glyphSize,
+  resolveCheckboxSize
+} from "../../../../chunk-RIJGMRJK.js";
+import "../../../../chunk-7ZPUN7TV.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-PZ5AY32C.js";
@@ -29,6 +32,7 @@ export {
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
   effectInk,
-  glyphSize
+  glyphSize,
+  resolveCheckboxSize
 };
 //# sourceMappingURL=Checkbox.metrics.js.map

package/dist/_internal/components/form/index.js

@@ -185,9 +185,9 @@ import "../../../chunk-SZS7VZJN.js";
 import "../../../chunk-SJRTT3PA.js";
 import {
   Checkbox
-} from "../../../chunk-FOM7OMJR.js";
+} from "../../../chunk-DDL6W7JS.js";
 import "../../../chunk-TZ633UZA.js";
-import "../../../chunk-TIQXDPIX.js";
+import "../../../chunk-RIJGMRJK.js";
 import "../../../chunk-FDMQ7H22.js";
 import "../../../chunk-QYKDY4EI.js";
 import {

package/dist/_internal/components/index.js

@@ -613,9 +613,9 @@ import "../../chunk-SZS7VZJN.js";
 import "../../chunk-SJRTT3PA.js";
 import {
   Checkbox
-} from "../../chunk-FOM7OMJR.js";
+} from "../../chunk-DDL6W7JS.js";
 import "../../chunk-TZ633UZA.js";
-import "../../chunk-TIQXDPIX.js";
+import "../../chunk-RIJGMRJK.js";
 import "../../chunk-FDMQ7H22.js";
 import "../../chunk-QYKDY4EI.js";
 import {

package/dist/{chunk-B2ZITMYG.js → chunk-26QYVCDK.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   Checkbox
-} from "./chunk-FOM7OMJR.js";
+} from "./chunk-DDL6W7JS.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -134,4 +134,4 @@ export {
   SelectSlot,
   DiscloseSlot
 };
-//# sourceMappingURL=chunk-B2ZITMYG.js.map
+//# sourceMappingURL=chunk-26QYVCDK.js.map

package/dist/{chunk-CEJTGG6J.js → chunk-CIBTYBBN.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   Checkbox
-} from "./chunk-FOM7OMJR.js";
+} from "./chunk-DDL6W7JS.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -268,4 +268,4 @@ function BaseCard(props) {
 export {
   BaseCard
 };
-//# sourceMappingURL=chunk-CEJTGG6J.js.map
+//# sourceMappingURL=chunk-CIBTYBBN.js.map

package/dist/{chunk-FOM7OMJR.js → chunk-DDL6W7JS.js}

@@ -11,8 +11,9 @@ import {
   CHECKBOX_SPINNER,
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
-  effectInk
-} from "./chunk-TIQXDPIX.js";
+  effectInk,
+  resolveCheckboxSize
+} from "./chunk-RIJGMRJK.js";
 import {
   splitTestId
 } from "./chunk-TYJR4GOF.js";
@@ -116,6 +117,7 @@ var Checkbox = React.forwardRef(
       glow: glow2,
       pulse: pulse2,
       disabled,
+      size,
       ...others
     } = resolveCheckboxProps(rawProps);
     const theme = useTheme();
@@ -132,6 +134,7 @@ var Checkbox = React.forwardRef(
           glow: glow2,
           pulse: pulse2,
           disabled: isDisabled,
+          size: resolveCheckboxSize(size),
           "data-testid": dataTestId || "checkbox",
           ...props
         }
@@ -180,4 +183,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-FOM7OMJR.js.map
+//# sourceMappingURL=chunk-DDL6W7JS.js.map

package/dist/chunk-DDL6W7JS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["import MuiCheckbox from '@mui/material/Checkbox/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_HELPER,\n  CHECKBOX_HOVER_ALPHA,\n  CHECKBOX_LABEL,\n  CHECKBOX_PULSE,\n  CHECKBOX_SPINNER,\n  CHECKBOX_TRANSITION_MS,\n  CHECKBOX_VARIANT,\n  effectInk,\n  resolveCheckboxSize,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst pulse = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${effectInk(0)};\n  }\n`;\n\nconst glow = (theme: Theme) => keyframes`\n  0%, 100% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};\n  }\n`;\n\n/** A variant's corner: a design-px number through the type scale, a percentage as it is. */\nconst cornerOf = (theme: Theme, radius: number | string | undefined): string | undefined =>\n  typeof radius === 'number' ? rem(theme, radius) : radius;\n\nconst StyledCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: CheckboxProps['variant'];\n  ripple?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n}>(\n  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({\n    ...(customVariant === 'rounded' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius),\n      },\n    }),\n    \n    ...(customVariant === 'toggle' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),\n        transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,\n      },\n    }),\n    \n    '&.MuiCheckbox-root': {\n      transition: `all ${CHECKBOX_TRANSITION_MS / 1000}s ease`,\n      ...(ripple === false && {\n        '& .MuiTouchRipple-root': {\n          display: 'none',\n        },\n      }),\n      ...(glowProp && {\n        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,\n      }),\n      ...(pulseProp && {\n        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1000}s infinite`,\n      }),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),\n      },\n    },\n    \n    '&.Mui-checked': {\n      color: theme.palette.primary.main,\n    },\n    \n    '&.MuiCheckbox-indeterminate': {\n      color: theme.palette.primary.main,\n    },\n  })\n);\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(\n  ({ theme, error }) => ({\n    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),\n    '& .MuiFormControlLabel-label': {\n      color: error ? theme.palette.error.main : theme.palette.text.primary,\n      fontSize: rem(theme, CHECKBOX_LABEL.fontSize),\n    },\n  })\n);\n\nconst StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({\n  marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n  marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n}));\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      label,\n      error,\n      helperText,\n      loading,\n      ripple,\n      glow,\n      pulse,\n      disabled,\n      size,\n      ...others\n    } = resolveCheckboxProps(rawProps);\n    const theme = useTheme();\n    const isDisabled = disabled || loading;\n    const { testId: dataTestId, rest: props } = splitTestId(others);\n    const testId = makeTestId(dataTestId);\n\n    const checkbox = (\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <StyledCheckbox\n          ref={ref}\n          customVariant={variant}\n          ripple={ripple}\n          glow={glow}\n          pulse={pulse}\n          disabled={isDisabled}\n          size={resolveCheckboxSize(size)}\n          data-testid={dataTestId || 'checkbox'}\n          {...props}\n        />\n        {loading && (\n          <CircularProgress\n            size={rem(theme, CHECKBOX_SPINNER.size)}\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              marginTop: sxRem(CHECKBOX_SPINNER.offset),\n              marginLeft: sxRem(CHECKBOX_SPINNER.offset),\n              color: 'primary.main',\n            }}\n          />\n        )}\n      </div>\n    );\n    \n    if (label) {\n      return (\n        <div data-testid={testId('container')}>\n          <StyledFormControlLabel\n            control={checkbox}\n            label={label}\n            error={error}\n            disabled={isDisabled}\n          />\n          {helperText && (\n            <StyledFormHelperText \n              error={error}\n              data-testid={testId('helper')}\n            >\n              {helperText}\n            </StyledFormHelperText>\n          )}\n        </div>\n      );\n    }\n    \n    return checkbox;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"mappings":"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","names":["glow","pulse"]}

package/dist/{chunk-KMC6WP66.js → chunk-KPZ53JY6.js}

@@ -2,7 +2,7 @@ import {
   DiscloseSlot,
   DragSlot,
   SelectSlot
-} from "./chunk-B2ZITMYG.js";
+} from "./chunk-26QYVCDK.js";
 import {
   actionProps,
   metaShape,
@@ -179,4 +179,4 @@ function BaseListCard(props) {
 export {
   BaseListCard
 };
-//# sourceMappingURL=chunk-KMC6WP66.js.map
+//# sourceMappingURL=chunk-KPZ53JY6.js.map

package/dist/{chunk-TIQXDPIX.js → chunk-RIJGMRJK.js}

@@ -1,3 +1,6 @@
+import {
+  muiSize
+} from "./chunk-7ZPUN7TV.js";
 import {
   alpha
 } from "./chunk-6JAIFIPW.js";
@@ -9,6 +12,11 @@ import {
 var CHECKBOX_PADDING = 9;
 var CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 };
 var glyphSize = (size) => CHECKBOX_GLYPH_SIZES[size ?? "medium"] ?? CHECKBOX_GLYPH_SIZES.medium;
+var resolveCheckboxSize = (size) => {
+  if (size === void 0) return void 0;
+  if (size === "small" || size === "medium" || size === "large") return size;
+  return muiSize(size);
+};
 var CHECKBOX_GLYPH = {
   checked: "CheckBox",
   unchecked: "CheckBoxOutlineBlank",
@@ -32,6 +40,7 @@ export {
   CHECKBOX_PADDING,
   CHECKBOX_GLYPH_SIZES,
   glyphSize,
+  resolveCheckboxSize,
   CHECKBOX_GLYPH,
   CHECKBOX_VARIANT,
   CHECKBOX_HOVER_ALPHA,
@@ -43,4 +52,4 @@ export {
   CHECKBOX_LABEL,
   CHECKBOX_HELPER
 };
-//# sourceMappingURL=chunk-TIQXDPIX.js.map
+//# sourceMappingURL=chunk-RIJGMRJK.js.map

package/dist/chunk-RIJGMRJK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.metrics.ts"],"sourcesContent":["import { alpha } from '../../../tokens/color';\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\nimport { muiSize } from '../../../tokens/vocabulary';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\nimport type { CheckboxSize, CheckboxVariant } from './Checkbox.base';\n\nexport type { CheckboxSize } from './Checkbox.base';\n\n/**\n * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.\n *\n * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and\n * `Checkbox.native.tsx` (React Native) read this one table. As with the other\n * fields, some of it is what the web writes itself — the two variants' corner\n * treatment, the glow and pulse keyframes, the helper text's inset — and some\n * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s\n * three sizes, and the ink a box is drawn in.\n */\n\n/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */\nexport const CHECKBOX_PADDING = 9;\n\n/**\n * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the\n * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,\n * the contract file, since it is part of the public prop type) rather than the\n * other way around, so a step added to one and not the other fails here.\n */\nexport const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number> = { small: 20, medium: 24, large: 35 };\n\nexport const glyphSize = (size: CheckboxSize | undefined): number =>\n  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;\n\n/**\n * `size` at the MUI boundary.\n *\n * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/\n * `Carousel` already follow. MUI's own deprecated word (see\n * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,\n * so a caller who has not migrated renders at exactly the size it always has —\n * translating it through `muiSize()` too would not change any of the three\n * words' own geometry, but passing it through untouched is the one route that\n * cannot drift from what \"unchanged\" already means. `undefined` stays\n * `undefined`, so a caller who names no size keeps MUI's own default.\n */\nexport const resolveCheckboxSize = (\n  size: SizeValue | CheckboxSize | undefined,\n): CheckboxSize | undefined => {\n  if (size === undefined) return undefined;\n  if (size === 'small' || size === 'medium' || size === 'large') return size;\n  return muiSize(size);\n};\n\n/**\n * The three glyphs MUI draws, by state.\n *\n * `@12-apps/ui/icons` generates their paths from the same\n * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the\n * native box is the web box rather than a hand-drawn square.\n */\nexport const CHECKBOX_GLYPH = {\n  checked: 'CheckBox',\n  unchecked: 'CheckBoxOutlineBlank',\n  indeterminate: 'IndeterminateCheckBox',\n} as const;\n\n/**\n * The corner each variant gives the glyph's box.\n *\n * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied\n * to the SVG's own box on the web, where they show only through what the box\n * clips. Native gives them the same radius and the same scale.\n */\nexport const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {\n  default: {},\n  rounded: { radius: '50%' },\n  toggle: { radius: 12, scale: 1.2 },\n};\n\n/** The wash a hovered box takes, and the 0.3s every state change runs over. */\nexport const CHECKBOX_HOVER_ALPHA = 0.1;\nexport const CHECKBOX_TRANSITION_MS = 300;\n\n/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */\nexport const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;\n\n/**\n * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's\n * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.\n */\nexport const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;\nexport const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;\n\n/** MUI's default blue at an alpha, as the web's keyframes spell it. */\nexport const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);\n\n/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */\nexport const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;\n\n/** `FormHelperText`: four spacing units in, half a unit down. */\nexport const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;\n"],"mappings":";;;;;;;;;;;AAqBO,IAAM,mBAAmB;AAQzB,IAAM,uBAAqD,EAAE,OAAO,IAAI,QAAQ,IAAI,OAAO,GAAG;AAE9F,IAAM,YAAY,CAAC,SACxB,qBAAqB,QAAQ,QAAQ,KAAK,qBAAqB;AAc1D,IAAM,sBAAsB,CACjC,SAC6B;AAC7B,MAAI,SAAS,OAAW,QAAO;AAC/B,MAAI,SAAS,WAAW,SAAS,YAAY,SAAS,QAAS,QAAO;AACtE,SAAO,QAAQ,IAAI;AACrB;AASO,IAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AACjB;AASO,IAAM,mBAA0F;AAAA,EACrG,SAAS,CAAC;AAAA,EACV,SAAS,EAAE,QAAQ,MAAM;AAAA,EACzB,QAAQ,EAAE,QAAQ,IAAI,OAAO,IAAI;AACnC;AAGO,IAAM,uBAAuB;AAC7B,IAAM,yBAAyB;AAG/B,IAAM,mBAAmB,EAAE,MAAM,IAAI,QAAQ,IAAI;AAMjD,IAAM,gBAAgB,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,GAAG,OAAO,EAAE,MAAM,KAAK,IAAI,IAAI,GAAG,IAAI,IAAK;AAC3F,IAAM,iBAAiB,EAAE,QAAQ,IAAI,OAAO,KAAK,IAAI,IAAK;AAG1D,IAAM,YAAY,CAAC,eAA+B,MAAM,YAAY,SAAS,UAAU;AAGvF,IAAM,iBAAiB,EAAE,YAAY,GAAG,UAAU,GAAG;AAGrD,IAAM,kBAAkB,EAAE,iBAAiB,GAAG,gBAAgB,KAAK,UAAU,IAAI,YAAY,KAAK;","names":[]}

package/dist/data-display/DataViews.js

@@ -7,14 +7,14 @@ import {
 } from "../chunk-6B4UTB4O.js";
 import {
   BaseListCard
-} from "../chunk-KMC6WP66.js";
-import "../chunk-B2ZITMYG.js";
+} from "../chunk-KPZ53JY6.js";
+import "../chunk-26QYVCDK.js";
 import "../chunk-XLQYOBHP.js";
 import "../chunk-KRA75CKC.js";
 import "../chunk-2JCRNWHE.js";
 import {
   BaseCard
-} from "../chunk-CEJTGG6J.js";
+} from "../chunk-CIBTYBBN.js";
 import "../chunk-BYH5GPLT.js";
 import {
   DragContainerProvider,
@@ -129,9 +129,9 @@ import "../chunk-RIEV4VXF.js";
 import "../chunk-TNBJ4DK4.js";
 import "../chunk-SZS7VZJN.js";
 import "../chunk-SJRTT3PA.js";
-import "../chunk-FOM7OMJR.js";
+import "../chunk-DDL6W7JS.js";
 import "../chunk-TZ633UZA.js";
-import "../chunk-TIQXDPIX.js";
+import "../chunk-RIJGMRJK.js";
 import "../chunk-FDMQ7H22.js";
 import "../chunk-N5ZWC6CB.js";
 import "../chunk-WQ3KTELX.js";

package/dist/form/Checkbox.js

@@ -1,11 +1,13 @@
 import "../chunk-SJRTT3PA.js";
 import {
   Checkbox
-} from "../chunk-FOM7OMJR.js";
+} from "../chunk-DDL6W7JS.js";
 import "../chunk-TZ633UZA.js";
-import "../chunk-TIQXDPIX.js";
+import "../chunk-RIJGMRJK.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-HPK33ACY.js";
+import "../chunk-7ZPUN7TV.js";
+import "../chunk-FZXKH2ZT.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";
 import "../chunk-YKCAJ2TN.js";

package/dist/native/form/Checkbox.js

@@ -10,7 +10,9 @@ import {
 import {
   Icon
 } from "../chunks/chunk-VJFKRXY2.js";
-import "../chunks/chunk-5WLOVHKK.js";
+import {
+  muiSize
+} from "../chunks/chunk-5WLOVHKK.js";
 import {
   resolveTestId,
   withoutTestIdProps
@@ -47,6 +49,11 @@ var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffi
 var CHECKBOX_PADDING = 9;
 var CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 };
 var glyphSize = (size) => CHECKBOX_GLYPH_SIZES[size ?? "medium"] ?? CHECKBOX_GLYPH_SIZES.medium;
+var resolveCheckboxSize = (size) => {
+  if (size === void 0) return void 0;
+  if (size === "small" || size === "medium" || size === "large") return size;
+  return muiSize(size);
+};
 var CHECKBOX_GLYPH = {
   checked: "CheckBox",
   unchecked: "CheckBoxOutlineBlank",
@@ -194,7 +201,7 @@ var Checkbox = React.forwardRef((rawProps, ref) => {
       glow,
       ripple,
       variant,
-      size: glyphSize(size),
+      size: glyphSize(resolveCheckboxSize(size)),
       label,
       onToggle: toggle,
       rest: withoutTestIdProps(others)

package/dist/native/form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form/Checkbox/Checkbox.native.tsx","../../../src/components/form/Checkbox/Checkbox.helpers.ts","../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActivityIndicator,\n  Platform,\n  Pressable,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type GestureResponderEvent,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_GLYPH,\n  CHECKBOX_HELPER,\n  CHECKBOX_LABEL,\n  CHECKBOX_PADDING,\n  CHECKBOX_SPINNER,\n  CHECKBOX_VARIANT,\n  effectInk,\n  glyphSize,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { webKeyDown } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** Which of MUI's three glyphs the box is in right now. */\nfunction glyphFor(checked: boolean, indeterminate: boolean): IconName {\n  if (indeterminate) return CHECKBOX_GLYPH.indeterminate;\n  return checked ? CHECKBOX_GLYPH.checked : CHECKBOX_GLYPH.unchecked;\n}\n\n/**\n * The ink the box is drawn in.\n *\n * MUI's own rule paints a checked box in `palette[color].main`, but\n * `Checkbox.tsx` overrides `.Mui-checked` with `primary.main` and wins on\n * source order — so every colour checks blue on the web, and here too.\n */\nfunction glyphInk(theme: UiTheme, checked: boolean, indeterminate: boolean, disabled: boolean): string {\n  if (disabled) return theme.palette.action.disabled;\n  if (checked || indeterminate) return theme.palette.primary.main;\n  return theme.palette.text.secondary;\n}\n\n/** `glow` as a shadow; the web breathes it between two blurs, which needs keyframes. */\nfunction glowStyle(): ViewStyle {\n  return Platform.select<ViewStyle>({\n    android: { elevation: CHECKBOX_GLOW.blur.to / 2 },\n    default: {\n      shadowColor: effectInk(1),\n      shadowOpacity: CHECKBOX_GLOW.alpha.from,\n      shadowRadius: CHECKBOX_GLOW.blur.from,\n      shadowOffset: { width: 0, height: 0 },\n    },\n  });\n}\n\n/** The `rounded` and `toggle` variants' corner and scale, on the glyph's own box. */\nfunction variantStyle(variant: keyof typeof CHECKBOX_VARIANT, size: number): ViewStyle {\n  const treatment = CHECKBOX_VARIANT[variant];\n  if (treatment.radius === undefined) return {};\n  return {\n    overflow: 'hidden',\n    borderRadius: typeof treatment.radius === 'number' ? treatment.radius : size / 2,\n    ...(treatment.scale === undefined ? {} : { transform: [{ scale: treatment.scale }] }),\n  };\n}\n\ninterface BoxProps {\n  boxRef: React.ForwardedRef<View>;\n  testID: string;\n  checked: boolean;\n  indeterminate: boolean;\n  inactive: boolean;\n  loading: boolean;\n  glow: boolean;\n  ripple: boolean;\n  variant: keyof typeof CHECKBOX_VARIANT;\n  size: number;\n  label?: string;\n  onToggle: (event?: GestureResponderEvent) => void;\n  rest: Record<string, unknown>;\n}\n\n/** The box itself: MUI's glyph inside `SwitchBase`'s 9px of padding. */\nfunction CheckboxBox(props: BoxProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { checked, indeterminate, inactive, size, variant } = props;\n  const ink = glyphInk(theme, checked, indeterminate, inactive);\n\n  return (\n    <Pressable\n      ref={props.boxRef}\n      testID={props.testID}\n      role=\"checkbox\"\n      aria-checked={indeterminate ? 'mixed' : checked}\n      aria-disabled={inactive}\n      aria-label={props.label}\n      disabled={inactive}\n      onPress={props.onToggle}\n      android_ripple={\n        props.ripple && !inactive\n          ? { color: alpha(theme.palette.primary.main, 0.2), borderless: true }\n          : undefined\n      }\n      {...webKeyDown((event) => {\n        if (event.key === ' ' || event.key === 'Spacebar') props.onToggle();\n      })}\n      style={[styles.box, props.glow ? glowStyle() : null]}\n      {...props.rest}\n    >\n      <View style={variantStyle(variant, size)}>\n        <Icon name={glyphFor(checked, indeterminate)} size={size} color={ink} />\n      </View>\n      {props.loading ? (\n        <ActivityIndicator\n          style={styles.spinner}\n          size={CHECKBOX_SPINNER.size}\n          color={theme.palette.primary.main}\n          accessibilityLabel=\"loading\"\n        />\n      ) : null}\n    </Pressable>\n  );\n}\n\n/** MUI's `FormControlLabel` label, in `body2` and the error hue when it errs. */\nfunction labelStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_LABEL.fontSize,\n    marginLeft: CHECKBOX_LABEL.marginLeft,\n  };\n}\n\n/** `FormHelperText`, four spacing units in and half a unit down. */\nfunction helperStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.secondary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_HELPER.fontSize,\n    lineHeight: CHECKBOX_HELPER.fontSize * CHECKBOX_HELPER.lineHeight,\n    marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n    marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n  };\n}\n\n/**\n * The native `Checkbox`.\n *\n * The box is the glyph MUI's own `Checkbox` draws — `@12-apps/ui/icons`\n * generates its path from the same `@mui/icons-material` — inside\n * `SwitchBase`'s 9px of padding, under a pressable carrying `role=\"checkbox\"`\n * and `aria-checked`: the state the web's hidden `<input type=\"checkbox\">`\n * carries. See `NATIVE-NOTES.md`.\n */\nexport const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) => {\n  const {\n    variant, label, error, helperText, loading, ripple, glow, pulse: _pulse,\n    indeterminate, disabled, size, checked, defaultChecked,\n    onChange, onClick, onPress, style, ...others\n  } = resolveCheckboxProps(rawProps);\n\n  const theme = useUiTheme();\n  // `Boolean()` rather than a destructuring default for each: every `= false`\n  // is a branch, and there are enough of them here to cost the size gate.\n  const [own, setOwn] = React.useState(Boolean(defaultChecked));\n  const current = checked ?? own;\n  const inactive = Boolean(disabled) || Boolean(loading);\n  const testId = makeTestId(resolveTestId(others));\n\n  const toggle = (event?: GestureResponderEvent): void => {\n    const next = !current;\n    setOwn(next);\n    onChange?.({ target: { checked: next } }, next);\n    if (event === undefined) return;\n    onClick?.(event);\n    onPress?.(event);\n  };\n\n  const box = (\n    <CheckboxBox\n      boxRef={ref}\n      testID={resolveTestId(others, 'checkbox') ?? 'checkbox'}\n      checked={current}\n      indeterminate={Boolean(indeterminate)}\n      inactive={inactive}\n      loading={Boolean(loading)}\n      glow={glow}\n      ripple={ripple}\n      variant={variant}\n      size={glyphSize(size)}\n      label={label}\n      onToggle={toggle}\n      rest={withoutTestIdProps(others) as Record<string, unknown>}\n    />\n  );\n\n  if (label === undefined) return box;\n\n  return (\n    <View testID={testId('container')} style={style}>\n      <View style={styles.row}>\n        {box}\n        <RNText style={labelStyle(theme, Boolean(error))}>{label}</RNText>\n      </View>\n      {helperText === undefined ? null : (\n        <RNText testID={testId('helper')} style={helperStyle(theme, Boolean(error))}>\n          {helperText}\n        </RNText>\n      )}\n    </View>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nconst styles = StyleSheet.create({\n  box: {\n    padding: CHECKBOX_PADDING,\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n  },\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  spinner: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: CHECKBOX_SPINNER.offset,\n    marginLeft: CHECKBOX_SPINNER.offset,\n  },\n});\n","import type { CheckboxBaseProps } from './Checkbox.base';\nimport { withDefaults } from '../../../utils/withDefaults';\n\ntype CheckboxDefaultedKeys = 'variant' | 'ripple' | 'glow' | 'pulse';\n\n/**\n * Generic over the renderer's own props, as `resolveButtonProps` is: the web\n * and the native `Checkbox` pass different handler types through, and both come\n * back out untouched.\n */\nexport type ResolvedCheckboxProps<P extends CheckboxBaseProps = CheckboxBaseProps> = P &\n  Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>>;\n\nconst CHECKBOX_DEFAULTS: Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>> = {\n  variant: 'default',\n  ripple: true,\n  glow: false,\n  pulse: false,\n};\n\nexport const resolveCheckboxProps = <P extends CheckboxBaseProps>(props: P): ResolvedCheckboxProps<P> =>\n  withDefaults(props, CHECKBOX_DEFAULTS as Partial<P>) as ResolvedCheckboxProps<P>;\n\n/** `${dataTestId}-${suffix}`, or `checkbox-${suffix}` when the caller named nothing. */\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `checkbox-${suffix}`;\n","import { alpha } from '../../../tokens/color';\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\n\nimport type { CheckboxVariant } from './Checkbox.base';\n\n/**\n * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.\n *\n * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and\n * `Checkbox.native.tsx` (React Native) read this one table. As with the other\n * fields, some of it is what the web writes itself — the two variants' corner\n * treatment, the glow and pulse keyframes, the helper text's inset — and some\n * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s\n * three sizes, and the ink a box is drawn in.\n */\n\n/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */\nexport const CHECKBOX_PADDING = 9;\n\n/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */\nexport const CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 } as const;\nexport type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;\n\nexport const glyphSize = (size: CheckboxSize | undefined): number =>\n  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;\n\n/**\n * The three glyphs MUI draws, by state.\n *\n * `@12-apps/ui/icons` generates their paths from the same\n * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the\n * native box is the web box rather than a hand-drawn square.\n */\nexport const CHECKBOX_GLYPH = {\n  checked: 'CheckBox',\n  unchecked: 'CheckBoxOutlineBlank',\n  indeterminate: 'IndeterminateCheckBox',\n} as const;\n\n/**\n * The corner each variant gives the glyph's box.\n *\n * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied\n * to the SVG's own box on the web, where they show only through what the box\n * clips. Native gives them the same radius and the same scale.\n */\nexport const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {\n  default: {},\n  rounded: { radius: '50%' },\n  toggle: { radius: 12, scale: 1.2 },\n};\n\n/** The wash a hovered box takes, and the 0.3s every state change runs over. */\nexport const CHECKBOX_HOVER_ALPHA = 0.1;\nexport const CHECKBOX_TRANSITION_MS = 300;\n\n/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */\nexport const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;\n\n/**\n * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's\n * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.\n */\nexport const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;\nexport const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;\n\n/** MUI's default blue at an alpha, as the web's keyframes spell it. */\nexport const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);\n\n/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */\nexport const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;\n\n/** `FormHelperText`: four spacing units in, half a unit down. */\nexport const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/form/Checkbox/Checkbox.native.tsx","../../../src/components/form/Checkbox/Checkbox.helpers.ts","../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActivityIndicator,\n  Platform,\n  Pressable,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type GestureResponderEvent,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_GLYPH,\n  CHECKBOX_HELPER,\n  CHECKBOX_LABEL,\n  CHECKBOX_PADDING,\n  CHECKBOX_SPINNER,\n  CHECKBOX_VARIANT,\n  effectInk,\n  glyphSize,\n  resolveCheckboxSize,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { webKeyDown } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** Which of MUI's three glyphs the box is in right now. */\nfunction glyphFor(checked: boolean, indeterminate: boolean): IconName {\n  if (indeterminate) return CHECKBOX_GLYPH.indeterminate;\n  return checked ? CHECKBOX_GLYPH.checked : CHECKBOX_GLYPH.unchecked;\n}\n\n/**\n * The ink the box is drawn in.\n *\n * MUI's own rule paints a checked box in `palette[color].main`, but\n * `Checkbox.tsx` overrides `.Mui-checked` with `primary.main` and wins on\n * source order — so every colour checks blue on the web, and here too.\n */\nfunction glyphInk(theme: UiTheme, checked: boolean, indeterminate: boolean, disabled: boolean): string {\n  if (disabled) return theme.palette.action.disabled;\n  if (checked || indeterminate) return theme.palette.primary.main;\n  return theme.palette.text.secondary;\n}\n\n/** `glow` as a shadow; the web breathes it between two blurs, which needs keyframes. */\nfunction glowStyle(): ViewStyle {\n  return Platform.select<ViewStyle>({\n    android: { elevation: CHECKBOX_GLOW.blur.to / 2 },\n    default: {\n      shadowColor: effectInk(1),\n      shadowOpacity: CHECKBOX_GLOW.alpha.from,\n      shadowRadius: CHECKBOX_GLOW.blur.from,\n      shadowOffset: { width: 0, height: 0 },\n    },\n  });\n}\n\n/** The `rounded` and `toggle` variants' corner and scale, on the glyph's own box. */\nfunction variantStyle(variant: keyof typeof CHECKBOX_VARIANT, size: number): ViewStyle {\n  const treatment = CHECKBOX_VARIANT[variant];\n  if (treatment.radius === undefined) return {};\n  return {\n    overflow: 'hidden',\n    borderRadius: typeof treatment.radius === 'number' ? treatment.radius : size / 2,\n    ...(treatment.scale === undefined ? {} : { transform: [{ scale: treatment.scale }] }),\n  };\n}\n\ninterface BoxProps {\n  boxRef: React.ForwardedRef<View>;\n  testID: string;\n  checked: boolean;\n  indeterminate: boolean;\n  inactive: boolean;\n  loading: boolean;\n  glow: boolean;\n  ripple: boolean;\n  variant: keyof typeof CHECKBOX_VARIANT;\n  size: number;\n  label?: string;\n  onToggle: (event?: GestureResponderEvent) => void;\n  rest: Record<string, unknown>;\n}\n\n/** The box itself: MUI's glyph inside `SwitchBase`'s 9px of padding. */\nfunction CheckboxBox(props: BoxProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { checked, indeterminate, inactive, size, variant } = props;\n  const ink = glyphInk(theme, checked, indeterminate, inactive);\n\n  return (\n    <Pressable\n      ref={props.boxRef}\n      testID={props.testID}\n      role=\"checkbox\"\n      aria-checked={indeterminate ? 'mixed' : checked}\n      aria-disabled={inactive}\n      aria-label={props.label}\n      disabled={inactive}\n      onPress={props.onToggle}\n      android_ripple={\n        props.ripple && !inactive\n          ? { color: alpha(theme.palette.primary.main, 0.2), borderless: true }\n          : undefined\n      }\n      {...webKeyDown((event) => {\n        if (event.key === ' ' || event.key === 'Spacebar') props.onToggle();\n      })}\n      style={[styles.box, props.glow ? glowStyle() : null]}\n      {...props.rest}\n    >\n      <View style={variantStyle(variant, size)}>\n        <Icon name={glyphFor(checked, indeterminate)} size={size} color={ink} />\n      </View>\n      {props.loading ? (\n        <ActivityIndicator\n          style={styles.spinner}\n          size={CHECKBOX_SPINNER.size}\n          color={theme.palette.primary.main}\n          accessibilityLabel=\"loading\"\n        />\n      ) : null}\n    </Pressable>\n  );\n}\n\n/** MUI's `FormControlLabel` label, in `body2` and the error hue when it errs. */\nfunction labelStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_LABEL.fontSize,\n    marginLeft: CHECKBOX_LABEL.marginLeft,\n  };\n}\n\n/** `FormHelperText`, four spacing units in and half a unit down. */\nfunction helperStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.secondary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_HELPER.fontSize,\n    lineHeight: CHECKBOX_HELPER.fontSize * CHECKBOX_HELPER.lineHeight,\n    marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n    marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n  };\n}\n\n/**\n * The native `Checkbox`.\n *\n * The box is the glyph MUI's own `Checkbox` draws — `@12-apps/ui/icons`\n * generates its path from the same `@mui/icons-material` — inside\n * `SwitchBase`'s 9px of padding, under a pressable carrying `role=\"checkbox\"`\n * and `aria-checked`: the state the web's hidden `<input type=\"checkbox\">`\n * carries. See `NATIVE-NOTES.md`.\n */\nexport const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) => {\n  const {\n    variant, label, error, helperText, loading, ripple, glow, pulse: _pulse,\n    indeterminate, disabled, size, checked, defaultChecked,\n    onChange, onClick, onPress, style, ...others\n  } = resolveCheckboxProps(rawProps);\n\n  const theme = useUiTheme();\n  // `Boolean()` rather than a destructuring default for each: every `= false`\n  // is a branch, and there are enough of them here to cost the size gate.\n  const [own, setOwn] = React.useState(Boolean(defaultChecked));\n  const current = checked ?? own;\n  const inactive = Boolean(disabled) || Boolean(loading);\n  const testId = makeTestId(resolveTestId(others));\n\n  const toggle = (event?: GestureResponderEvent): void => {\n    const next = !current;\n    setOwn(next);\n    onChange?.({ target: { checked: next } }, next);\n    if (event === undefined) return;\n    onClick?.(event);\n    onPress?.(event);\n  };\n\n  const box = (\n    <CheckboxBox\n      boxRef={ref}\n      testID={resolveTestId(others, 'checkbox') ?? 'checkbox'}\n      checked={current}\n      indeterminate={Boolean(indeterminate)}\n      inactive={inactive}\n      loading={Boolean(loading)}\n      glow={glow}\n      ripple={ripple}\n      variant={variant}\n      size={glyphSize(resolveCheckboxSize(size))}\n      label={label}\n      onToggle={toggle}\n      rest={withoutTestIdProps(others) as Record<string, unknown>}\n    />\n  );\n\n  if (label === undefined) return box;\n\n  return (\n    <View testID={testId('container')} style={style}>\n      <View style={styles.row}>\n        {box}\n        <RNText style={labelStyle(theme, Boolean(error))}>{label}</RNText>\n      </View>\n      {helperText === undefined ? null : (\n        <RNText testID={testId('helper')} style={helperStyle(theme, Boolean(error))}>\n          {helperText}\n        </RNText>\n      )}\n    </View>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nconst styles = StyleSheet.create({\n  box: {\n    padding: CHECKBOX_PADDING,\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n  },\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  spinner: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: CHECKBOX_SPINNER.offset,\n    marginLeft: CHECKBOX_SPINNER.offset,\n  },\n});\n","import type { CheckboxBaseProps } from './Checkbox.base';\nimport { withDefaults } from '../../../utils/withDefaults';\n\ntype CheckboxDefaultedKeys = 'variant' | 'ripple' | 'glow' | 'pulse';\n\n/**\n * Generic over the renderer's own props, as `resolveButtonProps` is: the web\n * and the native `Checkbox` pass different handler types through, and both come\n * back out untouched.\n */\nexport type ResolvedCheckboxProps<P extends CheckboxBaseProps = CheckboxBaseProps> = P &\n  Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>>;\n\nconst CHECKBOX_DEFAULTS: Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>> = {\n  variant: 'default',\n  ripple: true,\n  glow: false,\n  pulse: false,\n};\n\nexport const resolveCheckboxProps = <P extends CheckboxBaseProps>(props: P): ResolvedCheckboxProps<P> =>\n  withDefaults(props, CHECKBOX_DEFAULTS as Partial<P>) as ResolvedCheckboxProps<P>;\n\n/** `${dataTestId}-${suffix}`, or `checkbox-${suffix}` when the caller named nothing. */\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `checkbox-${suffix}`;\n","import { alpha } from '../../../tokens/color';\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\nimport { muiSize } from '../../../tokens/vocabulary';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\nimport type { CheckboxSize, CheckboxVariant } from './Checkbox.base';\n\nexport type { CheckboxSize } from './Checkbox.base';\n\n/**\n * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.\n *\n * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and\n * `Checkbox.native.tsx` (React Native) read this one table. As with the other\n * fields, some of it is what the web writes itself — the two variants' corner\n * treatment, the glow and pulse keyframes, the helper text's inset — and some\n * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s\n * three sizes, and the ink a box is drawn in.\n */\n\n/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */\nexport const CHECKBOX_PADDING = 9;\n\n/**\n * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the\n * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,\n * the contract file, since it is part of the public prop type) rather than the\n * other way around, so a step added to one and not the other fails here.\n */\nexport const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number> = { small: 20, medium: 24, large: 35 };\n\nexport const glyphSize = (size: CheckboxSize | undefined): number =>\n  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;\n\n/**\n * `size` at the MUI boundary.\n *\n * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/\n * `Carousel` already follow. MUI's own deprecated word (see\n * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,\n * so a caller who has not migrated renders at exactly the size it always has —\n * translating it through `muiSize()` too would not change any of the three\n * words' own geometry, but passing it through untouched is the one route that\n * cannot drift from what \"unchanged\" already means. `undefined` stays\n * `undefined`, so a caller who names no size keeps MUI's own default.\n */\nexport const resolveCheckboxSize = (\n  size: SizeValue | CheckboxSize | undefined,\n): CheckboxSize | undefined => {\n  if (size === undefined) return undefined;\n  if (size === 'small' || size === 'medium' || size === 'large') return size;\n  return muiSize(size);\n};\n\n/**\n * The three glyphs MUI draws, by state.\n *\n * `@12-apps/ui/icons` generates their paths from the same\n * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the\n * native box is the web box rather than a hand-drawn square.\n */\nexport const CHECKBOX_GLYPH = {\n  checked: 'CheckBox',\n  unchecked: 'CheckBoxOutlineBlank',\n  indeterminate: 'IndeterminateCheckBox',\n} as const;\n\n/**\n * The corner each variant gives the glyph's box.\n *\n * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied\n * to the SVG's own box on the web, where they show only through what the box\n * clips. Native gives them the same radius and the same scale.\n */\nexport const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {\n  default: {},\n  rounded: { radius: '50%' },\n  toggle: { radius: 12, scale: 1.2 },\n};\n\n/** The wash a hovered box takes, and the 0.3s every state change runs over. */\nexport const CHECKBOX_HOVER_ALPHA = 0.1;\nexport const CHECKBOX_TRANSITION_MS = 300;\n\n/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */\nexport const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;\n\n/**\n * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's\n * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.\n */\nexport const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;\nexport const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;\n\n/** MUI's default blue at an alpha, as the web's keyframes spell it. */\nexport const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);\n\n/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */\nexport const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;\n\n/** `FormHelperText`: four spacing units in, half a unit down. */\nexport const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;\n"],"mappings":"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","names":[]}

package/dist/types/components/form/Checkbox/Checkbox.base.d.ts

@@ -5,15 +5,25 @@
  * and a native consumer has no `@mui/material` to resolve a type import
  * against. See `Button.base.ts`.
  */
+import type { SizeValue } from '../../../tokens/vocabulary';
 export type CheckboxVariant = 'default' | 'rounded' | 'toggle';
+/**
+ * MUI's own words for the glyph's size — `CHECKBOX_GLYPH_SIZES` in
+ * `Checkbox.metrics.ts` gives each one's pixel value.
+ *
+ * @deprecated `size` now also accepts `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' |
+ * 'xl'`), the house vocabulary every other sized component in the package
+ * speaks — translated to this at the MUI boundary by `resolveCheckboxSize`
+ * (`Checkbox.metrics.ts`). These words keep working for one release; pass
+ * `SizeValue` instead. Removed in the next major version.
+ */
+export type CheckboxSize = 'small' | 'medium' | 'large';
 /**
  * The contract both renderers honour.
  *
  * `checked`, `defaultChecked` and `onChange` are NOT here: MUI types the change
  * as a DOM `ChangeEvent` and the native side synthesises the
- * `{ target: { checked } }` shape those handlers already read. Neither is
- * `size`, which this component takes in MUI's own words (`small | medium`)
- * rather than the house scale — narrowing it would reject the callers it has.
+ * `{ target: { checked } }` shape those handlers already read.
  */
 export interface CheckboxBaseProps {
     variant?: CheckboxVariant;
@@ -30,6 +40,16 @@ export interface CheckboxBaseProps {
     /** The third state: neither checked nor unchecked, drawn as a dash. */
     indeterminate?: boolean;
     disabled?: boolean;
+    /**
+     * The size of the box and glyph.
+     *
+     * `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) is the documented house
+     * vocabulary every other sized component in the package speaks, translated
+     * to MUI's own word at the MUI boundary (`resolveCheckboxSize`, in
+     * `Checkbox.metrics.ts`) — the same pattern `Chip`/`Button` already follow.
+     * MUI's own words (`CheckboxSize`) still work; see its `@deprecated` note.
+     */
+    size?: SizeValue | CheckboxSize;
     testID?: string;
     dataTestId?: string;
 }

package/dist/types/components/form/Checkbox/Checkbox.base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"Checkbox.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;GASG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types/components/form/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgGtD,eAAO,MAAM,QAAQ,sGAsEpB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgGtD,eAAO,MAAM,QAAQ,sGAwEpB,CAAC"}

package/dist/types/components/form/Checkbox/Checkbox.metrics.d.ts

@@ -1,4 +1,6 @@
-import type { CheckboxVariant } from './Checkbox.base';
+import type { SizeValue } from '../../../tokens/vocabulary';
+import type { CheckboxSize, CheckboxVariant } from './Checkbox.base';
+export type { CheckboxSize } from './Checkbox.base';
 /**
  * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.
  *
@@ -11,14 +13,27 @@ import type { CheckboxVariant } from './Checkbox.base';
  */
 /** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */
 export declare const CHECKBOX_PADDING = 9;
-/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */
-export declare const CHECKBOX_GLYPH_SIZES: {
-    readonly small: 20;
-    readonly medium: 24;
-    readonly large: 35;
-};
-export type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;
+/**
+ * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the
+ * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,
+ * the contract file, since it is part of the public prop type) rather than the
+ * other way around, so a step added to one and not the other fails here.
+ */
+export declare const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number>;
 export declare const glyphSize: (size: CheckboxSize | undefined) => number;
+/**
+ * `size` at the MUI boundary.
+ *
+ * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/
+ * `Carousel` already follow. MUI's own deprecated word (see
+ * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,
+ * so a caller who has not migrated renders at exactly the size it always has —
+ * translating it through `muiSize()` too would not change any of the three
+ * words' own geometry, but passing it through untouched is the one route that
+ * cannot drift from what "unchanged" already means. `undefined` stays
+ * `undefined`, so a caller who names no size keeps MUI's own default.
+ */
+export declare const resolveCheckboxSize: (size: SizeValue | CheckboxSize | undefined) => CheckboxSize | undefined;
 /**
  * The three glyphs MUI draws, by state.
  *

package/dist/types/components/form/Checkbox/Checkbox.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC,qFAAqF;AACrF,eAAO,MAAM,oBAAoB;;;;CAAgD,CAAC;AAClF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAE7D,eAAO,MAAM,SAAS,GAAI,MAAM,YAAY,GAAG,SAAS,KAAG,MACY,CAAC;AAExE;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAIlG,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,sEAAsE;AACtE,eAAO,MAAM,gBAAgB;;;CAAqC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAAkF,CAAC;AAC7G,eAAO,MAAM,cAAc;;;;CAAgD,CAAC;AAE5E,uEAAuE;AACvE,eAAO,MAAM,SAAS,GAAI,YAAY,MAAM,KAAG,MAAgD,CAAC;AAEhG,uEAAuE;AACvE,eAAO,MAAM,cAAc;;;CAA2C,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,eAAe;;;;;CAAuF,CAAC"}
+{"version":3,"file":"Checkbox.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAErE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAwC,CAAC;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,YAAY,GAAG,SAAS,KAAG,MACY,CAAC;AAExE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,GAC9B,MAAM,SAAS,GAAG,YAAY,GAAG,SAAS,KACzC,YAAY,GAAG,SAIjB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAIlG,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,sEAAsE;AACtE,eAAO,MAAM,gBAAgB;;;CAAqC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAAkF,CAAC;AAC7G,eAAO,MAAM,cAAc;;;;CAAgD,CAAC;AAE5E,uEAAuE;AACvE,eAAO,MAAM,SAAS,GAAI,YAAY,MAAM,KAAG,MAAgD,CAAC;AAEhG,uEAAuE;AACvE,eAAO,MAAM,cAAc;;;CAA2C,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,eAAe;;;;;CAAuF,CAAC"}

package/dist/types/components/form/Checkbox/Checkbox.types.d.ts

@@ -1,11 +1,14 @@
 import type { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox/index.js';
 import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from 'react';
 import type { CheckboxBaseProps } from './Checkbox.base';
-export type { CheckboxBaseProps, CheckboxVariant } from './Checkbox.base';
+export type { CheckboxBaseProps, CheckboxSize, CheckboxVariant } from './Checkbox.base';
 /**
  * The web `Checkbox`: the shared contract, plus everything MUI's `Checkbox`
  * accepts that the contract does not already name — `checked`,
- * `defaultChecked`, `size`, `color`, `icon`, `inputProps`, `sx`.
+ * `defaultChecked`, `color`, `icon`, `inputProps`, `sx`. `size` IS already
+ * named by the contract (`CheckboxBaseProps`), which is why it is omitted
+ * from what flows through here — MUI's own `size` type would otherwise win
+ * over the house `SizeValue` the contract adds.
  */
 export interface CheckboxProps extends CheckboxBaseProps, Omit<MuiCheckboxProps, 'variant' | keyof CheckboxBaseProps> {
     'data-testid'?: string;

package/dist/types/components/form/Checkbox/Checkbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE1E;;;;GAIG;AACH,MAAM,WAAW,aACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,MAAM,iBAAiB,CAAC;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACxE"}
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAExF;;;;;;;GAOG;AACH,MAAM,WAAW,aACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,MAAM,iBAAiB,CAAC;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACxE"}

package/dist/types-native/components/form/Checkbox/Checkbox.base.d.ts

@@ -5,15 +5,25 @@
  * and a native consumer has no `@mui/material` to resolve a type import
  * against. See `Button.base.ts`.
  */
+import type { SizeValue } from '../../../tokens/vocabulary';
 export type CheckboxVariant = 'default' | 'rounded' | 'toggle';
+/**
+ * MUI's own words for the glyph's size — `CHECKBOX_GLYPH_SIZES` in
+ * `Checkbox.metrics.ts` gives each one's pixel value.
+ *
+ * @deprecated `size` now also accepts `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' |
+ * 'xl'`), the house vocabulary every other sized component in the package
+ * speaks — translated to this at the MUI boundary by `resolveCheckboxSize`
+ * (`Checkbox.metrics.ts`). These words keep working for one release; pass
+ * `SizeValue` instead. Removed in the next major version.
+ */
+export type CheckboxSize = 'small' | 'medium' | 'large';
 /**
  * The contract both renderers honour.
  *
  * `checked`, `defaultChecked` and `onChange` are NOT here: MUI types the change
  * as a DOM `ChangeEvent` and the native side synthesises the
- * `{ target: { checked } }` shape those handlers already read. Neither is
- * `size`, which this component takes in MUI's own words (`small | medium`)
- * rather than the house scale — narrowing it would reject the callers it has.
+ * `{ target: { checked } }` shape those handlers already read.
  */
 export interface CheckboxBaseProps {
     variant?: CheckboxVariant;
@@ -30,6 +40,16 @@ export interface CheckboxBaseProps {
     /** The third state: neither checked nor unchecked, drawn as a dash. */
     indeterminate?: boolean;
     disabled?: boolean;
+    /**
+     * The size of the box and glyph.
+     *
+     * `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) is the documented house
+     * vocabulary every other sized component in the package speaks, translated
+     * to MUI's own word at the MUI boundary (`resolveCheckboxSize`, in
+     * `Checkbox.metrics.ts`) — the same pattern `Chip`/`Button` already follow.
+     * MUI's own words (`CheckboxSize`) still work; see its `@deprecated` note.
+     */
+    size?: SizeValue | CheckboxSize;
     testID?: string;
     dataTestId?: string;
 }

package/dist/types-native/components/form/Checkbox/Checkbox.base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"Checkbox.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;GASG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types-native/components/form/Checkbox/Checkbox.metrics.d.ts

@@ -1,4 +1,6 @@
-import type { CheckboxVariant } from './Checkbox.base';
+import type { SizeValue } from '../../../tokens/vocabulary';
+import type { CheckboxSize, CheckboxVariant } from './Checkbox.base';
+export type { CheckboxSize } from './Checkbox.base';
 /**
  * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.
  *
@@ -11,14 +13,27 @@ import type { CheckboxVariant } from './Checkbox.base';
  */
 /** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */
 export declare const CHECKBOX_PADDING = 9;
-/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */
-export declare const CHECKBOX_GLYPH_SIZES: {
-    readonly small: 20;
-    readonly medium: 24;
-    readonly large: 35;
-};
-export type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;
+/**
+ * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the
+ * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,
+ * the contract file, since it is part of the public prop type) rather than the
+ * other way around, so a step added to one and not the other fails here.
+ */
+export declare const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number>;
 export declare const glyphSize: (size: CheckboxSize | undefined) => number;
+/**
+ * `size` at the MUI boundary.
+ *
+ * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/
+ * `Carousel` already follow. MUI's own deprecated word (see
+ * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,
+ * so a caller who has not migrated renders at exactly the size it always has —
+ * translating it through `muiSize()` too would not change any of the three
+ * words' own geometry, but passing it through untouched is the one route that
+ * cannot drift from what "unchanged" already means. `undefined` stays
+ * `undefined`, so a caller who names no size keeps MUI's own default.
+ */
+export declare const resolveCheckboxSize: (size: SizeValue | CheckboxSize | undefined) => CheckboxSize | undefined;
 /**
  * The three glyphs MUI draws, by state.
  *

package/dist/types-native/components/form/Checkbox/Checkbox.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC,qFAAqF;AACrF,eAAO,MAAM,oBAAoB;;;;CAAgD,CAAC;AAClF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAE7D,eAAO,MAAM,SAAS,GAAI,MAAM,YAAY,GAAG,SAAS,KAAG,MACY,CAAC;AAExE;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAIlG,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,sEAAsE;AACtE,eAAO,MAAM,gBAAgB;;;CAAqC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAAkF,CAAC;AAC7G,eAAO,MAAM,cAAc;;;;CAAgD,CAAC;AAE5E,uEAAuE;AACvE,eAAO,MAAM,SAAS,GAAI,YAAY,MAAM,KAAG,MAAgD,CAAC;AAEhG,uEAAuE;AACvE,eAAO,MAAM,cAAc;;;CAA2C,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,eAAe;;;;;CAAuF,CAAC"}
+{"version":3,"file":"Checkbox.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAErE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAwC,CAAC;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,YAAY,GAAG,SAAS,KAAG,MACY,CAAC;AAExE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,GAC9B,MAAM,SAAS,GAAG,YAAY,GAAG,SAAS,KACzC,YAAY,GAAG,SAIjB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAIlG,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,sEAAsE;AACtE,eAAO,MAAM,gBAAgB;;;CAAqC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAAkF,CAAC;AAC7G,eAAO,MAAM,cAAc;;;;CAAgD,CAAC;AAE5E,uEAAuE;AACvE,eAAO,MAAM,SAAS,GAAI,YAAY,MAAM,KAAG,MAAgD,CAAC;AAEhG,uEAAuE;AACvE,eAAO,MAAM,cAAc;;;CAA2C,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,eAAe;;;;;CAAuF,CAAC"}

package/dist/types-native/components/form/Checkbox/Checkbox.native.d.ts

@@ -12,7 +12,6 @@ import { View, type GestureResponderEvent, type ViewStyle } from 'react-native';
 export declare const Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.base").CheckboxBaseProps & Omit<import("react-native").ViewProps, "style" | keyof import("./Checkbox.base").CheckboxBaseProps> & {
     checked?: boolean;
     defaultChecked?: boolean;
-    size?: import("./Checkbox.metrics").CheckboxSize;
     onChange?: (event: import("./Checkbox.types.native").CheckboxChangeEvent, checked: boolean) => void;
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;

package/dist/types-native/components/form/Checkbox/Checkbox.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,IAAI,EACJ,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAkJtB;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;;;;;;;;8BAyDnB,CAAC"}
+{"version":3,"file":"Checkbox.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,IAAI,EACJ,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAmJtB;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;;;;;;;8BAyDnB,CAAC"}

package/dist/types-native/components/form/Checkbox/Checkbox.types.native.d.ts

@@ -1,8 +1,6 @@
 import type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';
 import type { CheckboxBaseProps } from './Checkbox.base';
-import type { CheckboxSize } from './Checkbox.metrics';
-export type { CheckboxBaseProps, CheckboxVariant } from './Checkbox.base';
-export type { CheckboxSize } from './Checkbox.metrics';
+export type { CheckboxBaseProps, CheckboxSize, CheckboxVariant } from './Checkbox.base';
 /**
  * The change a native `Checkbox` reports: the `{ target: { checked } }` shape
  * MUI's `ChangeEvent` gives, and the resolved flag second, as MUI passes it.
@@ -16,8 +14,6 @@ export interface CheckboxChangeEvent {
 export type CheckboxProps = CheckboxBaseProps & Omit<ViewProps, keyof CheckboxBaseProps | 'style'> & {
     checked?: boolean;
     defaultChecked?: boolean;
-    /** MUI's own words for the glyph's size, which is what this component takes. */
-    size?: CheckboxSize;
     onChange?: (event: CheckboxChangeEvent, checked: boolean) => void;
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;

package/dist/types-native/components/form/Checkbox/Checkbox.types.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC1E,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAC9B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,IAAI,CAAC,SAAS,EAAE,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"Checkbox.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Checkbox/Checkbox.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAExF;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAC9B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,IAAI,CAAC,SAAS,EAAE,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.44.0",
+  "version": "6.44.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/form/Checkbox/Checkbox.base.ts

@@ -5,16 +5,28 @@
  * and a native consumer has no `@mui/material` to resolve a type import
  * against. See `Button.base.ts`.
  */
+import type { SizeValue } from '../../../tokens/vocabulary';
+
 export type CheckboxVariant = 'default' | 'rounded' | 'toggle';
 
+/**
+ * MUI's own words for the glyph's size — `CHECKBOX_GLYPH_SIZES` in
+ * `Checkbox.metrics.ts` gives each one's pixel value.
+ *
+ * @deprecated `size` now also accepts `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' |
+ * 'xl'`), the house vocabulary every other sized component in the package
+ * speaks — translated to this at the MUI boundary by `resolveCheckboxSize`
+ * (`Checkbox.metrics.ts`). These words keep working for one release; pass
+ * `SizeValue` instead. Removed in the next major version.
+ */
+export type CheckboxSize = 'small' | 'medium' | 'large';
+
 /**
  * The contract both renderers honour.
  *
  * `checked`, `defaultChecked` and `onChange` are NOT here: MUI types the change
  * as a DOM `ChangeEvent` and the native side synthesises the
- * `{ target: { checked } }` shape those handlers already read. Neither is
- * `size`, which this component takes in MUI's own words (`small | medium`)
- * rather than the house scale — narrowing it would reject the callers it has.
+ * `{ target: { checked } }` shape those handlers already read.
  */
 export interface CheckboxBaseProps {
   variant?: CheckboxVariant;
@@ -31,6 +43,16 @@ export interface CheckboxBaseProps {
   /** The third state: neither checked nor unchecked, drawn as a dash. */
   indeterminate?: boolean;
   disabled?: boolean;
+  /**
+   * The size of the box and glyph.
+   *
+   * `SizeValue` (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) is the documented house
+   * vocabulary every other sized component in the package speaks, translated
+   * to MUI's own word at the MUI boundary (`resolveCheckboxSize`, in
+   * `Checkbox.metrics.ts`) — the same pattern `Chip`/`Button` already follow.
+   * MUI's own words (`CheckboxSize`) still work; see its `@deprecated` note.
+   */
+  size?: SizeValue | CheckboxSize;
   testID?: string;
   dataTestId?: string;
 }

package/src/components/form/Checkbox/Checkbox.md

@@ -55,6 +55,7 @@ import { Checkbox } from '@/components/form/Checkbox';
 | glow | `boolean` | `false` | Enable glow animation |
 | pulse | `boolean` | `false` | Enable pulse animation |
 | disabled | `boolean` | `false` | Disable the checkbox |
+| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | MUI's `'medium'` | The house size vocabulary, translated to MUI's own size at the boundary. MUI's own words (`'small' \| 'medium' \| 'large'`) still work but are **deprecated** — migrate to the house vocabulary; removed in the next major version. |
 | data-testid | `string` | - | Custom test ID for testing |
 
 Plus all standard MUI Checkbox props (checked, onChange, indeterminate, etc.)

package/src/components/form/Checkbox/Checkbox.metrics.ts

@@ -1,7 +1,11 @@
 import { alpha } from '../../../tokens/color';
 import { EFFECT_GLOW } from '../../../tokens/ink.core';
+import { muiSize } from '../../../tokens/vocabulary';
+import type { SizeValue } from '../../../tokens/vocabulary';
 
-import type { CheckboxVariant } from './Checkbox.base';
+import type { CheckboxSize, CheckboxVariant } from './Checkbox.base';
+
+export type { CheckboxSize } from './Checkbox.base';
 
 /**
  * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.
@@ -17,13 +21,37 @@ import type { CheckboxVariant } from './Checkbox.base';
 /** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */
 export const CHECKBOX_PADDING = 9;
 
-/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */
-export const CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 } as const;
-export type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;
+/**
+ * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the
+ * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,
+ * the contract file, since it is part of the public prop type) rather than the
+ * other way around, so a step added to one and not the other fails here.
+ */
+export const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number> = { small: 20, medium: 24, large: 35 };
 
 export const glyphSize = (size: CheckboxSize | undefined): number =>
   CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;
 
+/**
+ * `size` at the MUI boundary.
+ *
+ * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/
+ * `Carousel` already follow. MUI's own deprecated word (see
+ * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,
+ * so a caller who has not migrated renders at exactly the size it always has —
+ * translating it through `muiSize()` too would not change any of the three
+ * words' own geometry, but passing it through untouched is the one route that
+ * cannot drift from what "unchanged" already means. `undefined` stays
+ * `undefined`, so a caller who names no size keeps MUI's own default.
+ */
+export const resolveCheckboxSize = (
+  size: SizeValue | CheckboxSize | undefined,
+): CheckboxSize | undefined => {
+  if (size === undefined) return undefined;
+  if (size === 'small' || size === 'medium' || size === 'large') return size;
+  return muiSize(size);
+};
+
 /**
  * The three glyphs MUI draws, by state.
  *

package/src/components/form/Checkbox/Checkbox.native.tsx

@@ -22,6 +22,7 @@ import {
   CHECKBOX_VARIANT,
   effectInk,
   glyphSize,
+  resolveCheckboxSize,
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types.native';
 import { Icon } from '../../../icons/Icon.native';
@@ -199,7 +200,7 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) =>
       glow={glow}
       ripple={ripple}
       variant={variant}
-      size={glyphSize(size)}
+      size={glyphSize(resolveCheckboxSize(size))}
       label={label}
       onToggle={toggle}
       rest={withoutTestIdProps(others) as Record<string, unknown>}

package/src/components/form/Checkbox/Checkbox.tsx

@@ -17,6 +17,7 @@ import {
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
   effectInk,
+  resolveCheckboxSize,
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types';
 import { splitTestId } from '../../../platform/test-id';
@@ -126,6 +127,7 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
       glow,
       pulse,
       disabled,
+      size,
       ...others
     } = resolveCheckboxProps(rawProps);
     const theme = useTheme();
@@ -142,6 +144,7 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
           glow={glow}
           pulse={pulse}
           disabled={isDisabled}
+          size={resolveCheckboxSize(size)}
           data-testid={dataTestId || 'checkbox'}
           {...props}
         />

package/src/components/form/Checkbox/Checkbox.types.native.ts

@@ -1,10 +1,8 @@
 import type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import type { CheckboxBaseProps } from './Checkbox.base';
-import type { CheckboxSize } from './Checkbox.metrics';
 
-export type { CheckboxBaseProps, CheckboxVariant } from './Checkbox.base';
-export type { CheckboxSize } from './Checkbox.metrics';
+export type { CheckboxBaseProps, CheckboxSize, CheckboxVariant } from './Checkbox.base';
 
 /**
  * The change a native `Checkbox` reports: the `{ target: { checked } }` shape
@@ -19,8 +17,6 @@ export type CheckboxProps = CheckboxBaseProps &
   Omit<ViewProps, keyof CheckboxBaseProps | 'style'> & {
     checked?: boolean;
     defaultChecked?: boolean;
-    /** MUI's own words for the glyph's size, which is what this component takes. */
-    size?: CheckboxSize;
     onChange?: (event: CheckboxChangeEvent, checked: boolean) => void;
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;

package/src/components/form/Checkbox/Checkbox.types.ts

@@ -3,12 +3,15 @@ import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from 'react';
 
 import type { CheckboxBaseProps } from './Checkbox.base';
 
-export type { CheckboxBaseProps, CheckboxVariant } from './Checkbox.base';
+export type { CheckboxBaseProps, CheckboxSize, CheckboxVariant } from './Checkbox.base';
 
 /**
  * The web `Checkbox`: the shared contract, plus everything MUI's `Checkbox`
  * accepts that the contract does not already name — `checked`,
- * `defaultChecked`, `size`, `color`, `icon`, `inputProps`, `sx`.
+ * `defaultChecked`, `color`, `icon`, `inputProps`, `sx`. `size` IS already
+ * named by the contract (`CheckboxBaseProps`), which is why it is omitted
+ * from what flows through here — MUI's own `size` type would otherwise win
+ * over the house `SizeValue` the contract adds.
  */
 export interface CheckboxProps
   extends CheckboxBaseProps,

package/dist/chunk-FOM7OMJR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["import MuiCheckbox from '@mui/material/Checkbox/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_HELPER,\n  CHECKBOX_HOVER_ALPHA,\n  CHECKBOX_LABEL,\n  CHECKBOX_PULSE,\n  CHECKBOX_SPINNER,\n  CHECKBOX_TRANSITION_MS,\n  CHECKBOX_VARIANT,\n  effectInk,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst pulse = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${effectInk(0)};\n  }\n`;\n\nconst glow = (theme: Theme) => keyframes`\n  0%, 100% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};\n  }\n`;\n\n/** A variant's corner: a design-px number through the type scale, a percentage as it is. */\nconst cornerOf = (theme: Theme, radius: number | string | undefined): string | undefined =>\n  typeof radius === 'number' ? rem(theme, radius) : radius;\n\nconst StyledCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: CheckboxProps['variant'];\n  ripple?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n}>(\n  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({\n    ...(customVariant === 'rounded' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius),\n      },\n    }),\n    \n    ...(customVariant === 'toggle' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),\n        transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,\n      },\n    }),\n    \n    '&.MuiCheckbox-root': {\n      transition: `all ${CHECKBOX_TRANSITION_MS / 1000}s ease`,\n      ...(ripple === false && {\n        '& .MuiTouchRipple-root': {\n          display: 'none',\n        },\n      }),\n      ...(glowProp && {\n        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,\n      }),\n      ...(pulseProp && {\n        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1000}s infinite`,\n      }),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),\n      },\n    },\n    \n    '&.Mui-checked': {\n      color: theme.palette.primary.main,\n    },\n    \n    '&.MuiCheckbox-indeterminate': {\n      color: theme.palette.primary.main,\n    },\n  })\n);\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(\n  ({ theme, error }) => ({\n    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),\n    '& .MuiFormControlLabel-label': {\n      color: error ? theme.palette.error.main : theme.palette.text.primary,\n      fontSize: rem(theme, CHECKBOX_LABEL.fontSize),\n    },\n  })\n);\n\nconst StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({\n  marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n  marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n}));\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      label,\n      error,\n      helperText,\n      loading,\n      ripple,\n      glow,\n      pulse,\n      disabled,\n      ...others\n    } = resolveCheckboxProps(rawProps);\n    const theme = useTheme();\n    const isDisabled = disabled || loading;\n    const { testId: dataTestId, rest: props } = splitTestId(others);\n    const testId = makeTestId(dataTestId);\n\n    const checkbox = (\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <StyledCheckbox\n          ref={ref}\n          customVariant={variant}\n          ripple={ripple}\n          glow={glow}\n          pulse={pulse}\n          disabled={isDisabled}\n          data-testid={dataTestId || 'checkbox'}\n          {...props}\n        />\n        {loading && (\n          <CircularProgress\n            size={rem(theme, CHECKBOX_SPINNER.size)}\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              marginTop: sxRem(CHECKBOX_SPINNER.offset),\n              marginLeft: sxRem(CHECKBOX_SPINNER.offset),\n              color: 'primary.main',\n            }}\n          />\n        )}\n      </div>\n    );\n    \n    if (label) {\n      return (\n        <div data-testid={testId('container')}>\n          <StyledFormControlLabel\n            control={checkbox}\n            label={label}\n            error={error}\n            disabled={isDisabled}\n          />\n          {helperText && (\n            <StyledFormHelperText \n              error={error}\n              data-testid={testId('helper')}\n            >\n              {helperText}\n            </StyledFormHelperText>\n          )}\n        </div>\n      );\n    }\n    \n    return checkbox;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,iBAAiB;AACxB,OAAO,sBAAsB;AAC7B,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,SAAS,OAAO,WAAW,QAAQ,gBAAgB;AAEnD,OAAO,WAAW;AAkIZ,SACE,KADF;AAhHN,IAAM,QAAQ,CAAC,UAAiB;AAAA;AAAA,0BAEN,UAAU,eAAe,KAAK,CAAC;AAAA;AAAA;AAAA,wBAGjC,IAAI,OAAO,eAAe,MAAM,CAAC,IAAI,UAAU,CAAC,CAAC;AAAA;AAAA;AAAA,0BAG/C,UAAU,CAAC,CAAC;AAAA;AAAA;AAItC,IAAM,OAAO,CAAC,UAAiB;AAAA;AAAA,sBAET,IAAI,OAAO,cAAc,KAAK,IAAI,CAAC,IAAI,UAAU,cAAc,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA,sBAG1E,IAAI,OAAO,cAAc,KAAK,EAAE,CAAC,IAAI,UAAU,cAAc,MAAM,EAAE,CAAC;AAAA;AAAA;AAK5F,IAAM,WAAW,CAAC,OAAc,WAC9B,OAAO,WAAW,WAAW,IAAI,OAAO,MAAM,IAAI;AAEpD,IAAM,iBAAiB,OAAO,aAAa;AAAA,EACzC,mBAAmB,CAAC,SAAS,CAAC,CAAC,iBAAiB,UAAU,QAAQ,OAAO,EAAE,SAAS,IAAc;AACpG,CAAC;AAAA,EAMC,CAAC,EAAE,OAAO,eAAe,QAAQ,MAAM,UAAU,OAAO,UAAU,OAAO;AAAA,IACvE,GAAI,kBAAkB,aAAa;AAAA,MACjC,sBAAsB;AAAA,QACpB,cAAc,SAAS,OAAO,iBAAiB,QAAQ,MAAM;AAAA,MAC/D;AAAA,IACF;AAAA,IAEA,GAAI,kBAAkB,YAAY;AAAA,MAChC,sBAAsB;AAAA,QACpB,cAAc,SAAS,OAAO,iBAAiB,OAAO,MAAM;AAAA,QAC5D,WAAW,SAAS,iBAAiB,OAAO,KAAK;AAAA,MACnD;AAAA,IACF;AAAA,IAEA,sBAAsB;AAAA,MACpB,YAAY,OAAO,yBAAyB,GAAI;AAAA,MAChD,GAAI,WAAW,SAAS;AAAA,QACtB,0BAA0B;AAAA,UACxB,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,GAAI,YAAY;AAAA,QACd,WAAW,GAAG,KAAK,KAAK,CAAC,IAAI,cAAc,KAAK,GAAI;AAAA,MACtD;AAAA,MACA,GAAI,aAAa;AAAA,QACf,WAAW,GAAG,MAAM,KAAK,CAAC,IAAI,eAAe,KAAK,GAAI;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB,MAAM,MAAM,QAAQ,QAAQ,MAAM,oBAAoB;AAAA,MACzE;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,OAAO,MAAM,QAAQ,QAAQ;AAAA,IAC/B;AAAA,IAEA,+BAA+B;AAAA,MAC7B,OAAO,MAAM,QAAQ,QAAQ;AAAA,IAC/B;AAAA,EACF;AACF;AAEA,IAAM,yBAAyB,OAAO,kBAAkB;AAAA,EACtD,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC;AAAA,EACC,CAAC,EAAE,OAAO,MAAM,OAAO;AAAA,IACrB,YAAY,IAAI,OAAO,eAAe,UAAU;AAAA,IAChD,gCAAgC;AAAA,MAC9B,OAAO,QAAQ,MAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC7D,UAAU,IAAI,OAAO,eAAe,QAAQ;AAAA,IAC9C;AAAA,EACF;AACF;AAEA,IAAM,uBAAuB,OAAO,cAAc,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAClE,YAAY,MAAM,QAAQ,gBAAgB,eAAe;AAAA,EACzD,WAAW,MAAM,QAAQ,gBAAgB,cAAc;AACzD,EAAE;AAEK,IAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,UAAU,QAAQ;AACjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAAA;AAAA,MACA,OAAAC;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,qBAAqB,QAAQ;AACjC,UAAM,QAAQ,SAAS;AACvB,UAAM,aAAa,YAAY;AAC/B,UAAM,EAAE,QAAQ,YAAY,MAAM,MAAM,IAAI,YAAY,MAAM;AAC9D,UAAM,SAAS,WAAW,UAAU;AAEpC,UAAM,WACJ,qBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,SAAS,cAAc,GACzD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,eAAe;AAAA,UACf;AAAA,UACA,MAAMD;AAAA,UACN,OAAOC;AAAA,UACP,UAAU;AAAA,UACV,eAAa,cAAc;AAAA,UAC1B,GAAG;AAAA;AAAA,MACN;AAAA,MACC,WACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,IAAI,OAAO,iBAAiB,IAAI;AAAA,UACtC,IAAI;AAAA,YACF,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAW,MAAM,iBAAiB,MAAM;AAAA,YACxC,YAAY,MAAM,iBAAiB,MAAM;AAAA,YACzC,OAAO;AAAA,UACT;AAAA;AAAA,MACF;AAAA,OAEJ;AAGF,QAAI,OAAO;AACT,aACE,qBAAC,SAAI,eAAa,OAAO,WAAW,GAClC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QACC,cACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,OAAO,QAAQ;AAAA,YAE3B;AAAA;AAAA,QACH;AAAA,SAEJ;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AACF;AAEA,SAAS,cAAc;","names":["glow","pulse"]}

package/dist/chunk-TIQXDPIX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.metrics.ts"],"sourcesContent":["import { alpha } from '../../../tokens/color';\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\n\nimport type { CheckboxVariant } from './Checkbox.base';\n\n/**\n * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.\n *\n * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and\n * `Checkbox.native.tsx` (React Native) read this one table. As with the other\n * fields, some of it is what the web writes itself — the two variants' corner\n * treatment, the glow and pulse keyframes, the helper text's inset — and some\n * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s\n * three sizes, and the ink a box is drawn in.\n */\n\n/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */\nexport const CHECKBOX_PADDING = 9;\n\n/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */\nexport const CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 } as const;\nexport type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;\n\nexport const glyphSize = (size: CheckboxSize | undefined): number =>\n  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;\n\n/**\n * The three glyphs MUI draws, by state.\n *\n * `@12-apps/ui/icons` generates their paths from the same\n * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the\n * native box is the web box rather than a hand-drawn square.\n */\nexport const CHECKBOX_GLYPH = {\n  checked: 'CheckBox',\n  unchecked: 'CheckBoxOutlineBlank',\n  indeterminate: 'IndeterminateCheckBox',\n} as const;\n\n/**\n * The corner each variant gives the glyph's box.\n *\n * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied\n * to the SVG's own box on the web, where they show only through what the box\n * clips. Native gives them the same radius and the same scale.\n */\nexport const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {\n  default: {},\n  rounded: { radius: '50%' },\n  toggle: { radius: 12, scale: 1.2 },\n};\n\n/** The wash a hovered box takes, and the 0.3s every state change runs over. */\nexport const CHECKBOX_HOVER_ALPHA = 0.1;\nexport const CHECKBOX_TRANSITION_MS = 300;\n\n/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */\nexport const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;\n\n/**\n * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's\n * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.\n */\nexport const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;\nexport const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;\n\n/** MUI's default blue at an alpha, as the web's keyframes spell it. */\nexport const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);\n\n/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */\nexport const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;\n\n/** `FormHelperText`: four spacing units in, half a unit down. */\nexport const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;\n"],"mappings":";;;;;;;;AAiBO,IAAM,mBAAmB;AAGzB,IAAM,uBAAuB,EAAE,OAAO,IAAI,QAAQ,IAAI,OAAO,GAAG;AAGhE,IAAM,YAAY,CAAC,SACxB,qBAAqB,QAAQ,QAAQ,KAAK,qBAAqB;AAS1D,IAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AACjB;AASO,IAAM,mBAA0F;AAAA,EACrG,SAAS,CAAC;AAAA,EACV,SAAS,EAAE,QAAQ,MAAM;AAAA,EACzB,QAAQ,EAAE,QAAQ,IAAI,OAAO,IAAI;AACnC;AAGO,IAAM,uBAAuB;AAC7B,IAAM,yBAAyB;AAG/B,IAAM,mBAAmB,EAAE,MAAM,IAAI,QAAQ,IAAI;AAMjD,IAAM,gBAAgB,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,GAAG,OAAO,EAAE,MAAM,KAAK,IAAI,IAAI,GAAG,IAAI,IAAK;AAC3F,IAAM,iBAAiB,EAAE,QAAQ,IAAI,OAAO,KAAK,IAAI,IAAK;AAG1D,IAAM,YAAY,CAAC,eAA+B,MAAM,YAAY,SAAS,UAAU;AAGvF,IAAM,iBAAiB,EAAE,YAAY,GAAG,UAAU,GAAG;AAGrD,IAAM,kBAAkB,EAAE,iBAAiB,GAAG,gBAAgB,KAAK,UAAU,IAAI,YAAY,KAAK;","names":[]}